Add initial tour-guide feature

packages/node_modules/@node-red/editor-client/src/sass/colors.scss

@@ -295,6 +295,10 @@ $group-default-stroke: #999;
 $group-default-stroke-opacity: 1;
 $group-default-label-color: #a4a4a4;
 
+$tourGuide-shade: rgba(100, 70, 70, 0.6);
+$tourGuide-border: #a22222;
+$tourGuide-heading-color: #a22222;
+
 // Deprecated
 $text-color-green: $text-color-success;
 $info-text-code-color: $text-color-code;

packages/node_modules/@node-red/editor-client/src/sass/style.scss

@@ -69,3 +69,5 @@
 @import "debug";
 
 @import "radialMenu";
+
+@import "tourGuide";

packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss

@@ -0,0 +1,122 @@
+.red-ui-tourGuide-shade {
+    position: absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    right:0;
+    z-index: 2000;
+    overflow: hidden;
+}
+
+.red-ui-tourGuide-shade-focus {
+    display: block;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    z-index: 2001;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    border: 2px solid $tourGuide-border;
+
+    &.transition {
+        transition: 0.4s ease;
+        transition-property: width,height;
+    }
+
+    &.disableInteraction {
+        pointer-events: none;
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: solid 6000px $tourGuide-shade;
+        margin-left: -6000px;
+        margin-top: -6000px;
+        pointer-events: none;
+    }
+}
+.red-ui-popover.red-ui-tourGuide-popover {
+    z-index: 2003;
+    --red-ui-popover-background: #{$secondary-background};
+    --red-ui-popover-border: #{$tourGuide-border};
+    --red-ui-popover-color: #{$primary-text-color};
+
+    .red-ui-popover-content {
+        h2 {
+            text-align: center;
+            margin-top: 0px;
+            color: #a22222;
+            i.fa {
+                font-size: 1.5em
+            }
+        }
+    }
+
+}
+
+.red-ui-tourGuide-toolbar {
+    min-height: 36px;
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+}
+.red-ui-tourGuide-breadcrumbs {
+    flex-grow: 1;
+
+    display:  flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 6px;
+    & > div {
+        display: inline-block;
+    }
+    i {
+        line-height: 16px;
+        margin: 0 3px;
+    }
+}
+.red-ui-tourGuide-popover-description {
+    padding: 10px 20px 5px;
+}
+.red-ui-tourGuide-popover-full {
+    .red-ui-tourGuide-popover-description {
+        padding: 20px 40px 10px;
+        text-align: center;
+    }
+}
+.red-ui-popover.red-ui-tourGuide-popover button.red-ui-button {
+    &:not(.primary) {
+        border-color: transparent;
+        background: $secondary-background;
+        color: $primary-text-color !important;
+    }
+    &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
+        border-color: $popover-button-border-color-hover;
+    }
+}
+
+
+// .red-ui-tourGuide-popover-bounce {
+//     animation: 10s ease-in 5s infinite both red-ui-tourGuide-popover-bounce;
+// }
+// // @keyframes *must* be on multiple lines so build-custom-theme can filter them out
+// @keyframes red-ui-tourGuide-popover-bounce {
+//     0%,
+//     10%,
+//     100% {
+//         -webkit-transform: translateY(0);
+//         transform: translateY(0);
+//     }
+//     2%,8% {
+//         -webkit-transform: translateY(-5px);
+//         transform: translateY(-5px);
+//     }
+//     5% {
+//         -webkit-transform: translateY(5px);
+//         transform: translateY(5px);
+//     }
+// }