From 0d75ff336d923b14434cf49b8035438aa9c386b3 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 16 May 2019 22:32:28 +0100
Subject: [PATCH] Found some more ids and classes to namespace

---
 .../editor-client/src/js/text/bidi.js         |  6 +-
 .../editor-client/src/js/ui/common/menu.js    |  4 +-
 .../editor-client/src/js/ui/common/tabs.js    |  4 +-
 .../src/js/ui/editors/markdown.js             |  2 +-
 .../editor-client/src/js/ui/library.js        |  8 +--
 .../editor-client/src/js/ui/palette.js        |  6 +-
 .../src/js/ui/projects/projectSettings.js     | 16 ++---
 .../src/js/ui/projects/projectUserSettings.js |  2 +-
 .../src/js/ui/projects/tab-versionControl.js  |  6 +-
 .../editor-client/src/js/ui/subflow.js        | 62 +++++++++----------
 .../editor-client/src/js/ui/tab-context.js    | 18 +++---
 .../editor-client/src/js/ui/tab-info.js       | 62 +++++++++----------
 .../editor-client/src/js/ui/userSettings.js   |  2 +-
 .../editor-client/src/sass/dropdownMenu.scss  |  2 +-
 .../editor-client/src/sass/library.scss       |  2 +-
 .../editor-client/src/sass/mixins.scss        |  2 +-
 .../editor-client/src/sass/projects.scss      |  2 +-
 .../editor-client/src/sass/tab-info.scss      | 41 ++++++------
 .../nodes/core/core/lib/debug/debug-utils.js  |  4 +-
 19 files changed, 124 insertions(+), 127 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js b/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js
index 6a1f883b2..8fc4a0d86 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js
@@ -97,14 +97,14 @@ RED.text.bidi = (function() {
     }
 
     /**
-     * Enforces the text direction for all the spans with style bidiAware under
+     * Enforces the text direction for all the spans with style red-ui-text-bidi-aware under
      * workspace or sidebar div
      */
     function enforceTextDirectionOnPage() {
-        $("#red-ui-workspace").find('span.bidiAware').each(function() {
+        $("#red-ui-workspace").find('span.red-ui-text-bidi-aware').each(function() {
             $(this).attr("dir", resolveBaseTextDir($(this).html()));
         });
-        $("#red-ui-sidebar").find('span.bidiAware').each(function() {
+        $("#red-ui-sidebar").find('span.red-ui-text-bidi-aware').each(function() {
             $(this).attr("dir", resolveBaseTextDir($(this).text()));
         });
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
index be8748bd1..039357c11 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
@@ -56,12 +56,12 @@ RED.menu = (function() {
         }
 
         if (opt === null) {
-            item = $('<li class="divider"></li>');
+            item = $('<li class="red-ui-menu-divider"></li>');
         } else {
             item = $('<li></li>');
 
             if (opt.group) {
-                item.addClass("rd-ui-menu-group-"+opt.group);
+                item.addClass("red-ui-menu-group-"+opt.group);
 
             }
             var linkContent = '<a '+(opt.id?'id="'+opt.id+'" ':'')+'tabindex="-1" href="#">';
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
index c24eba033..288334c06 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
@@ -488,7 +488,7 @@ RED.tabs = (function() {
                 } else if (tab.iconClass) {
                     $('<i>',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link);
                 }
-                var span = $('<span/>',{class:"bidiAware"}).text(tab.label).appendTo(link);
+                var span = $('<span/>',{class:"red-ui-text-bidi-aware"}).text(tab.label).appendTo(link);
                 span.attr('dir', RED.text.bidi.resolveBaseTextDir(tab.label));
                 if (options.collapsible) {
                     li.addClass("red-ui-tab-pinned");
@@ -650,7 +650,7 @@ RED.tabs = (function() {
                 tabs[id].label = label;
                 var tab = ul.find("a[href='#"+id+"']");
                 tab.attr("title",label);
-                tab.find("span.bidiAware").text(label).attr('dir', RED.text.bidi.resolveBaseTextDir(label));
+                tab.find("span.red-ui-text-bidi-aware").text(label).attr('dir', RED.text.bidi.resolveBaseTextDir(label));
                 updateTabWidths();
             },
             selection: getSelection,
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
index 6c45d9c5f..bf6415193 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js
@@ -44,7 +44,7 @@
             '</div>'+
         '</div>'+
         '<div class="red-ui-panel">'+
-            '<div class="red-ui-editor-type-markdown-panel-preview node-help"></div>'+
+            '<div class="red-ui-editor-type-markdown-panel-preview red-ui-help"></div>'+
         '</div>'+
         '</script>';
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
index 726eee07d..6c3715afb 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
@@ -29,7 +29,7 @@ RED.library = (function() {
                         '<div id="red-ui-library-dialog-load-preview">'+
                             '<div class="red-ui-panel" id="red-ui-library-dialog-load-preview-text"></div>'+
                             '<div class="red-ui-panel" id="red-ui-library-dialog-load-preview-details">'+
-                                '<table id="red-ui-library-dialog-load-preview-details-table" class="node-info"></table>'+
+                                '<table id="red-ui-library-dialog-load-preview-details-table" class="red-ui-info-table"></table>'+
                             '</div>'+
                         '</div>'+
                     '</div>'+
@@ -523,15 +523,15 @@ RED.library = (function() {
                     if (file && file.label && !file.children) {
                         $.get("library/"+file.library+"/"+file.type+"/"+file.path, function(data) {
                             //TODO: nls + sanitize
-                            var propRow = $('<tr class="node-info-node-row"><td>Type</td><td></td></tr>').appendTo(table);
+                            var propRow = $('<tr class="red-ui-help-info-row"><td>Type</td><td></td></tr>').appendTo(table);
                             $(propRow.children()[1]).text(activeLibrary.type);
                             if (file.props.hasOwnProperty('name')) {
-                                propRow = $('<tr class="node-info-node-row"><td>Name</td><td>'+file.props.name+'</td></tr>').appendTo(table);
+                                propRow = $('<tr class="red-ui-help-info-row"><td>Name</td><td>'+file.props.name+'</td></tr>').appendTo(table);
                                 $(propRow.children()[1]).text(file.props.name);
                             }
                             for (var p in file.props) {
                                 if (file.props.hasOwnProperty(p) && p !== 'name' && p !== 'fn') {
-                                    propRow = $('<tr class="node-info-node-row"><td></td><td></td></tr>').appendTo(table);
+                                    propRow = $('<tr class="red-ui-help-info-row"><td></td><td></td></tr>').appendTo(table);
                                     $(propRow.children()[0]).text(p);
                                     RED.utils.createObjectElement(file.props[p]).appendTo(propRow.children()[1]);
                                 }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
index f3dde36ed..e8fbb0460 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
@@ -34,7 +34,7 @@ RED.palette = (function() {
     function createCategoryContainer(originalCategory,category, labelId) {
         var label = RED._(labelId, {defaultValue:category});
         label = (label || category).replace(/_/g, " ");
-        var catDiv = $('<div id="red-ui-palette-container-'+category+'" class="red-ui-palette-category palette-close hide">'+
+        var catDiv = $('<div id="red-ui-palette-container-'+category+'" class="red-ui-palette-category hide">'+
             '<div id="red-ui-palette-header-'+category+'" class="red-ui-palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
             '<div class="red-ui-palette-content" id="red-ui-palette-base-category-'+category+'">'+
             '<div id="red-ui-palette-'+category+'-input"></div>'+
@@ -236,9 +236,9 @@ RED.palette = (function() {
                 RED.view.focus();
                 var helpText;
                 if (nt.indexOf("subflow:") === 0) {
-                    helpText = marked(RED.nodes.subflow(nt.substring(8)).info||"")||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>');
+                    helpText = marked(RED.nodes.subflow(nt.substring(8)).info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>');
                 } else {
-                    helpText = $("script[data-help-name='"+d.type+"']").html()||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>');
+                    helpText = $("script[data-help-name='"+d.type+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>');
                 }
                 RED.sidebar.info.set(helpText,RED._("sidebar.info.nodeHelp"));
             });
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
index 1ea2bd869..41cb2dc8b 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
@@ -160,10 +160,10 @@ RED.projects.settings = (function() {
         if (activeProject.description) {
             desc = marked(activeProject.description);
         } else {
-            desc = '<span class="node-info-none">'+'No description available'+'</span>';
+            desc = '<span class="red-ui-help-info-none">'+'No description available'+'</span>';
         }
-        var description = addTargetToExternalLinks($('<span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(desc)+'">'+desc+'</span>')).appendTo(container);
-        description.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
+        var description = addTargetToExternalLinks($('<span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(desc)+'">'+desc+'</span>')).appendTo(container);
+        description.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
     }
 
     function editSummary(activeProject, summary, container) {
@@ -222,13 +222,13 @@ RED.projects.settings = (function() {
         if (summary) {
             container.text(summary).removeClass('node-info-node');
         } else {
-            container.text(RED._("sidebar.project.projectSettings.noSummaryAvailable")).addClass('node-info-none');
+            container.text(RED._("sidebar.project.projectSettings.noSummaryAvailable")).addClass('red-ui-help-info-none');
         }
     }
 
     function createMainPane(activeProject) {
 
-        var pane = $('<div id="red-ui-project-settings-tab-main" class="red-ui-project-settings-tab-pane node-help"></div>');
+        var pane = $('<div id="red-ui-project-settings-tab-main" class="red-ui-project-settings-tab-pane red-ui-help"></div>');
         $('<h1>').text(activeProject.name).appendTo(pane);
         var summary = $('<div style="position: relative">').appendTo(pane);
         var summaryContent = $('<div></div>').appendTo(summary);
@@ -243,7 +243,7 @@ RED.projects.settings = (function() {
         }
         $('<hr>').appendTo(pane);
 
-        var description = $('<div class="node-help" style="position: relative"></div>').appendTo(pane);
+        var description = $('<div class="red-ui-help" style="position: relative"></div>').appendTo(pane);
         var descriptionContent = $('<div>',{style:"min-height: 200px"}).appendTo(description);
 
         updateProjectDescription(activeProject, descriptionContent);
@@ -378,7 +378,7 @@ RED.projects.settings = (function() {
     }
 
     function createDependenciesPane(activeProject) {
-        var pane = $('<div id="red-ui-project-settings-tab-deps" class="red-ui-project-settings-tab-pane node-help"></div>');
+        var pane = $('<div id="red-ui-project-settings-tab-deps" class="red-ui-project-settings-tab-pane red-ui-help"></div>');
         if (RED.user.hasPermission("projects.write")) {
             $('<button class="editor-button editor-button-small" style="margin-top:10px;float: right;">' + RED._("sidebar.project.projectSettings.edit") + '</button>')
                 .appendTo(pane)
@@ -1576,7 +1576,7 @@ RED.projects.settings = (function() {
 
 
     function createSettingsPane(activeProject) {
-        var pane = $('<div id="red-ui-project-settings-tab-settings" class="red-ui-project-settings-tab-pane node-help"></div>');
+        var pane = $('<div id="red-ui-project-settings-tab-settings" class="red-ui-project-settings-tab-pane red-ui-help"></div>');
         createFilesSection(activeProject,pane);
         // createLocalRepositorySection(activeProject,pane);
         createRemoteRepositorySection(activeProject,pane);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
index b818ab740..fb7875551 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
@@ -389,7 +389,7 @@ RED.projects.userSettings = (function() {
     }
 
     function createSettingsPane(activeProject) {
-        var pane = $('<div id="red-ui-settings-tab-gitconfig" class="project-settings-tab-pane node-help"></div>');
+        var pane = $('<div id="red-ui-settings-tab-gitconfig" class="project-settings-tab-pane red-ui-help"></div>');
         createGitUserSection(pane);
         createSSHKeySection(pane);
         return pane;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
index 29f1f2a94..3f1cd7088 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js
@@ -118,7 +118,7 @@ RED.sidebar.versionControl = (function() {
         row.addClass("red-ui-sidebar-vc-change-entry");
         var container = $('<div>').appendTo(row);
         if (entry.label) {
-            row.addClass('node-info-none');
+            row.addClass('red-ui-help-info-none');
             container.text(entry.label);
             if (entry.button) {
                 container.css({
@@ -618,7 +618,7 @@ RED.sidebar.versionControl = (function() {
         RED.popover.tooltip(repoStatusButton,RED._("sidebar.project.versionControl.manageRemoteBranch"))
 
         localCommitList = $("<ol>",{style:"position: absolute; top: 30px; bottom: 0px; right:0; left:0;"}).appendTo(localHistory.content);
-        localCommitListShade = $('<div class="component-shade" style="z-Index: 3"></div>').css('top',"30px").hide().appendTo(localHistory.content);
+        localCommitListShade = $('<div class="red-ui-shade" style="z-Index: 3"></div>').css('top',"30px").hide().appendTo(localHistory.content);
         localCommitList.editableList({
             addButton: false,
             scrollOnAdd: false,
@@ -1021,7 +1021,7 @@ RED.sidebar.versionControl = (function() {
                 });
             });
 
-        $('<div class="component-shade red-ui-sidebar-vc-shade">').appendTo(sidebarContent);
+        $('<div class="red-ui-shade red-ui-sidebar-vc-shade">').appendTo(sidebarContent);
 
         RED.sidebar.addTab({
             id: "version-control",
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
index b0ab5c066..342109200 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
@@ -87,8 +87,8 @@ RED.subflow = (function() {
         RED.view.select();
         RED.nodes.dirty(true);
         RED.view.redraw();
-        $("#workspace-subflow-input-add").addClass("active");
-        $("#workspace-subflow-input-remove").removeClass("active");
+        $("#red-ui-subflow-input-add").addClass("active");
+        $("#red-ui-subflow-input-remove").removeClass("active");
         RED.palette.refresh();
     }
 
@@ -108,8 +108,8 @@ RED.subflow = (function() {
         });
         removedInputLinks.forEach(function(l) { RED.nodes.removeLink(l)});
         activeSubflow.in = [];
-        $("#workspace-subflow-input-add").removeClass("active");
-        $("#workspace-subflow-input-remove").addClass("active");
+        $("#red-ui-subflow-input-add").removeClass("active");
+        $("#red-ui-subflow-input-remove").addClass("active");
         activeSubflow.changed = true;
         RED.palette.refresh();
         return {subflowInputs: [ removedInput ], links:removedInputLinks};
@@ -151,7 +151,7 @@ RED.subflow = (function() {
         RED.view.select();
         RED.nodes.dirty(true);
         RED.view.redraw();
-        $("#workspace-subflow-output .spinner-value").text(subflow.out.length);
+        $("#red-ui-subflow-output .spinner-value").text(subflow.out.length);
         RED.palette.refresh();
     }
 
@@ -227,8 +227,8 @@ RED.subflow = (function() {
         RED.view.select();
         RED.nodes.dirty(true);
         RED.view.redraw();
-        $("#workspace-subflow-status").prop("checked",!!subflow.status);
-        $("#workspace-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
+        $("#red-ui-subflow-status").prop("checked",!!subflow.status);
+        $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
     }
 
     function removeSubflowStatus() {
@@ -245,8 +245,8 @@ RED.subflow = (function() {
         subflowRemovedLinks.forEach(function(l) { RED.nodes.removeLink(l)});
         delete subflow.status;
 
-        $("#workspace-subflow-status").prop("checked",!!subflow.status);
-        $("#workspace-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
+        $("#red-ui-subflow-status").prop("checked",!!subflow.status);
+        $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
 
         return { links: subflowRemovedLinks }
     }
@@ -282,13 +282,13 @@ RED.subflow = (function() {
 
     function refreshToolbar(activeSubflow) {
         if (activeSubflow) {
-            $("#workspace-subflow-input-add").toggleClass("active", activeSubflow.in.length !== 0);
-            $("#workspace-subflow-input-remove").toggleClass("active",activeSubflow.in.length === 0);
+            $("#red-ui-subflow-input-add").toggleClass("active", activeSubflow.in.length !== 0);
+            $("#red-ui-subflow-input-remove").toggleClass("active",activeSubflow.in.length === 0);
 
-            $("#workspace-subflow-output .spinner-value").text(activeSubflow.out.length);
+            $("#red-ui-subflow-output .spinner-value").text(activeSubflow.out.length);
 
-            $("#workspace-subflow-status").prop("checked",!!activeSubflow.status);
-            $("#workspace-subflow-status").parent().parent().toggleClass("active",!!activeSubflow.status);
+            $("#red-ui-subflow-status").prop("checked",!!activeSubflow.status);
+            $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!activeSubflow.status);
 
         }
     }
@@ -298,35 +298,35 @@ RED.subflow = (function() {
         toolbar.empty();
 
         // Edit properties
-        $('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
+        $('<a class="button" id="red-ui-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
 
         // Inputs
         $('<span style="margin-left: 5px;" data-i18n="subflow.input"></span> '+
             '<div style="display: inline-block;" class="button-group">'+
-            '<a id="workspace-subflow-input-remove" class="button active" href="#">0</a>'+
-            '<a id="workspace-subflow-input-add" class="button" href="#">1</a>'+
+            '<a id="red-ui-subflow-input-remove" class="button active" href="#">0</a>'+
+            '<a id="red-ui-subflow-input-add" class="button" href="#">1</a>'+
             '</div>').appendTo(toolbar);
 
         // Outputs
-        $('<span style="margin-left: 5px;" data-i18n="subflow.output"></span> <div id="workspace-subflow-output" style="display: inline-block;" class="button-group spinner-group">'+
-            '<a id="workspace-subflow-output-remove" class="button" href="#"><i class="fa fa-minus"></i></a>'+
+        $('<span style="margin-left: 5px;" data-i18n="subflow.output"></span> <div id="red-ui-subflow-output" style="display: inline-block;" class="button-group spinner-group">'+
+            '<a id="red-ui-subflow-output-remove" class="button" href="#"><i class="fa fa-minus"></i></a>'+
             '<div class="spinner-value">3</div>'+
-            '<a id="workspace-subflow-output-add" class="button" href="#"><i class="fa fa-plus"></i></a>'+
+            '<a id="red-ui-subflow-output-add" class="button" href="#"><i class="fa fa-plus"></i></a>'+
             '</div>').appendTo(toolbar);
 
         // Status
-        $('<span class="button-group"><span class="button" style="padding:0"><label for="workspace-subflow-status"><input id="workspace-subflow-status" type="checkbox"> <span data-i18n="subflow.status"></span></label></span></span>').appendTo(toolbar);
+        $('<span class="button-group"><span class="button" style="padding:0"><label for="red-ui-subflow-status"><input id="red-ui-subflow-status" type="checkbox"> <span data-i18n="subflow.status"></span></label></span></span>').appendTo(toolbar);
 
-        // $('<a class="button disabled" id="workspace-subflow-add-input" href="#" data-i18n="[append]subflow.input"><i class="fa fa-plus"></i> </a>').appendTo(toolbar);
-        // $('<a class="button" id="workspace-subflow-add-output" href="#" data-i18n="[append]subflow.output"><i class="fa fa-plus"></i> </a>').appendTo(toolbar);
+        // $('<a class="button disabled" id="red-ui-subflow-add-input" href="#" data-i18n="[append]subflow.input"><i class="fa fa-plus"></i> </a>').appendTo(toolbar);
+        // $('<a class="button" id="red-ui-subflow-add-output" href="#" data-i18n="[append]subflow.output"><i class="fa fa-plus"></i> </a>').appendTo(toolbar);
 
         // Delete
-        $('<a class="button" id="workspace-subflow-delete" href="#" data-i18n="[append]subflow.deleteSubflow"><i class="fa fa-trash"></i> </a>').appendTo(toolbar);
+        $('<a class="button" id="red-ui-subflow-delete" href="#" data-i18n="[append]subflow.deleteSubflow"><i class="fa fa-trash"></i> </a>').appendTo(toolbar);
 
         toolbar.i18n();
 
 
-        $("#workspace-subflow-output-remove").on("click", function(event) {
+        $("#red-ui-subflow-output-remove").on("click", function(event) {
             event.preventDefault();
             var wasDirty = RED.nodes.dirty();
             var wasChanged = activeSubflow.changed;
@@ -350,17 +350,17 @@ RED.subflow = (function() {
             }
         });
 
-        $("#workspace-subflow-output-add").on("click", function(event) {
+        $("#red-ui-subflow-output-add").on("click", function(event) {
             event.preventDefault();
             addSubflowOutput();
         });
 
-        $("#workspace-subflow-input-add").on("click", function(event) {
+        $("#red-ui-subflow-input-add").on("click", function(event) {
             event.preventDefault();
             addSubflowInput();
         });
 
-        $("#workspace-subflow-input-remove").on("click", function(event) {
+        $("#red-ui-subflow-input-remove").on("click", function(event) {
             event.preventDefault();
             var wasDirty = RED.nodes.dirty();
             var wasChanged = activeSubflow.changed;
@@ -384,7 +384,7 @@ RED.subflow = (function() {
             }
         });
 
-        $("#workspace-subflow-status").on("change", function(evt) {
+        $("#red-ui-subflow-status").on("change", function(evt) {
             if (this.checked) {
                 addSubflowStatus();
             } else {
@@ -411,12 +411,12 @@ RED.subflow = (function() {
             }
         })
 
-        $("#workspace-subflow-edit").on("click", function(event) {
+        $("#red-ui-subflow-edit").on("click", function(event) {
             RED.editor.editSubflow(RED.nodes.subflow(RED.workspaces.active()));
             event.preventDefault();
         });
 
-        $("#workspace-subflow-delete").on("click", function(event) {
+        $("#red-ui-subflow-delete").on("click", function(event) {
             event.preventDefault();
             var startDirty = RED.nodes.dirty();
             var historyEvent = removeSubflow(RED.workspaces.active());
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js
index ead24d116..c78ee5d74 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js
@@ -53,7 +53,7 @@ RED.sidebar.context = (function() {
         nodeSection.expand();
         nodeSection.content.css({height:"100%"});
         nodeSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').appendTo(nodeSection.content);
-        var table = $('<table class="node-info"></table>').appendTo(nodeSection.content);
+        var table = $('<table class="red-ui-info-table"></table>').appendTo(nodeSection.content);
         nodeSection.table = $('<tbody>').appendTo(table);
         var bg = $('<div style="float: right"></div>').appendTo(nodeSection.header);
         $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
@@ -87,7 +87,7 @@ RED.sidebar.context = (function() {
         flowSection.expand();
         flowSection.content.css({height:"100%"});
         flowSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').appendTo(flowSection.content);
-        var table = $('<table class="node-info"></table>').appendTo(flowSection.content);
+        var table = $('<table class="red-ui-info-table"></table>').appendTo(flowSection.content);
         flowSection.table = $('<tbody>').appendTo(table);
         bg = $('<div style="float: right"></div>').appendTo(flowSection.header);
         $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
@@ -105,7 +105,7 @@ RED.sidebar.context = (function() {
         globalSection.expand();
         globalSection.content.css({height:"100%"});
         globalSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').appendTo(globalSection.content);
-        var table = $('<table class="node-info"></table>').appendTo(globalSection.content);
+        var table = $('<table class="red-ui-info-table"></table>').appendTo(globalSection.content);
         globalSection.table = $('<tbody>').appendTo(table);
 
         bg = $('<div style="float: right"></div>').appendTo(globalSection.header);
@@ -185,9 +185,9 @@ RED.sidebar.context = (function() {
         } else {
             $(nodeSection.table).empty();
             if (node) {
-                $('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(nodeSection.table).i18n();
+                $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(nodeSection.table).i18n();
             } else {
-                $('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.none"></td></tr>').appendTo(nodeSection.table).i18n();
+                $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.none"></td></tr>').appendTo(nodeSection.table).i18n();
             }
             nodeSection.timestamp.html("&nbsp;");
 
@@ -230,7 +230,7 @@ RED.sidebar.context = (function() {
                 sortedData[keys[i]].forEach(function(v) {
                     var k = keys[i];
                     var l2 = sortedData[k].length;
-                    var propRow = $('<tr class="node-info-node-row"><td class="red-ui-sidebar-context-property"></td><td></td></tr>').appendTo(container);
+                    var propRow = $('<tr class="red-ui-help-info-row"><td class="red-ui-sidebar-context-property"></td><td></td></tr>').appendTo(container);
                     var obj = $(propRow.children()[0]);
                     obj.text(k);
                     var tools = $('<span class="button-group"></span>');
@@ -280,7 +280,7 @@ RED.sidebar.context = (function() {
                                             if (data.format === 'undefined') {
                                                 propRow.remove();
                                                 if (container.children().length === 0) {
-                                                    $('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.empty"></td></tr>').appendTo(container).i18n();
+                                                    $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.empty"></td></tr>').appendTo(container).i18n();
                                                 }
                                             } else {
                                                 payload = data.msg;
@@ -317,7 +317,7 @@ RED.sidebar.context = (function() {
                 });
             }
             if (l === 0) {
-                $('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.empty"></td></tr>').appendTo(container).i18n();
+                $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.empty"></td></tr>').appendTo(container).i18n();
             }
             $(section.timestamp).text(new Date().toLocaleString());
         });
@@ -328,7 +328,7 @@ RED.sidebar.context = (function() {
             refreshEntry(section,baseUrl,id);
         } else {
             $(container).empty();
-            $('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.none"></td></tr>').appendTo(container).i18n();
+            $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.none"></td></tr>').appendTo(container).i18n();
         }
     }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
index d2d27ecc8..42d063735 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
@@ -40,11 +40,11 @@ RED.sidebar.info = (function() {
     function init() {
 
         content = document.createElement("div");
-        content.className = "sidebar-node-info"
+        content.className = "red-ui-sidebar-info"
 
         RED.actions.add("core:show-info-tab",show);
 
-        var stackContainer = $("<div>",{class:"sidebar-node-info-stack"}).appendTo(content);
+        var stackContainer = $("<div>",{class:"red-ui-sidebar-info-stack"}).appendTo(content);
 
         sections = RED.stack.create({
             container: stackContainer
@@ -71,7 +71,7 @@ RED.sidebar.info = (function() {
         helpSection.content.css("padding","6px");
 
         var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
-        tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
+        tipBox = $('<div class="red-ui-help-tip"></div>').appendTo(tipContainer);
         var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer);
 
         var tipRefresh = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
@@ -131,7 +131,7 @@ RED.sidebar.info = (function() {
 
         var propRow;
 
-        var table = $('<table class="node-info"></table>').appendTo(propertiesSection.content);
+        var table = $('<table class="red-ui-info-table"></table>').appendTo(propertiesSection.content);
         var tableBody = $('<tbody>').appendTo(table);
 
         var subflowNode;
@@ -139,9 +139,9 @@ RED.sidebar.info = (function() {
 
         var activeProject = RED.projects.getActiveProject();
         if (activeProject) {
-            propRow = $('<tr class="node-info-node-row"><td>Project</td><td></td></tr>').appendTo(tableBody);
+            propRow = $('<tr class="red-ui-help-info-row"><td>Project</td><td></td></tr>').appendTo(tableBody);
             $(propRow.children()[1]).text(activeProject.name||"");
-            $('<tr class="node-info-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
+            $('<tr class="red-ui-help-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
             var editProjectButton = $('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
                 .appendTo(propRow.children()[1])
                 .on("click", function(evt) {
@@ -177,7 +177,7 @@ RED.sidebar.info = (function() {
             helpSection.container.hide();
             infoSection.container.hide();
             // - show the count of selected nodes
-            propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody);
+            propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody);
 
             var counts = $('<div>').appendTo($(propRow.children()[1]));
             if (types.flows > 0) {
@@ -211,24 +211,24 @@ RED.sidebar.info = (function() {
             }
             if (node.type === "tab" || node.type === "subflow") {
                 // If nothing is selected, but we're on a flow or subflow tab.
-                propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'</td><td></td></tr>').appendTo(tableBody);
+                propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'</td><td></td></tr>').appendTo(tableBody);
                 RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
-                propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.tabName")+"</td><td></td></tr>").appendTo(tableBody);
+                propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.tabName")+"</td><td></td></tr>").appendTo(tableBody);
                 $(propRow.children()[1]).text(node.label||node.name||"");
                 if (node.type === "tab") {
-                    propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
+                    propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
                     $(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
                 }
             } else {
                 // An actual node is selected in the editor - build up its properties table
-                propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody);
+                propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody);
                 RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
                 if (node.type !== "subflow" && node.type !== "unknown" && node.name) {
-                    propRow = $('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody);
-                    $('<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]);
+                    propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody);
+                    $('<span class="red-ui-text-bidi-aware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]);
                 }
                 if (!m) {
-                    propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td></td></tr>").appendTo(tableBody);
+                    propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("sidebar.info.type")+"</td><td></td></tr>").appendTo(tableBody);
                     $(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type);
                     if (node.type === "unknown") {
                         $('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1]))
@@ -246,11 +246,11 @@ RED.sidebar.info = (function() {
                         })
                     } else if (node._def) {
                         defaults = node._def.defaults;
-                        propRow = $('<tr class="node-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+RED._("sidebar.info.module")+"</td><td></td></tr>").appendTo(tableBody);
+                        propRow = $('<tr class="red-ui-help-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+RED._("sidebar.info.module")+"</td><td></td></tr>").appendTo(tableBody);
                         $(propRow.children()[1]).text(RED.nodes.getType(node.type).set.module);
                         count++;
                     }
-                    $('<tr class="node-info-property-expand node-info-property-row blank'+(expandedSections.property?"":" hide")+'"><td colspan="2"></td></tr>').appendTo(tableBody);
+                    $('<tr class="red-ui-help-property-expand red-ui-help-info-property-row blank'+(expandedSections.property?"":" hide")+'"><td colspan="2"></td></tr>').appendTo(tableBody);
 
                     if (defaults) {
                         for (var n in defaults) {
@@ -258,7 +258,7 @@ RED.sidebar.info = (function() {
                                 var val = node[n];
                                 var type = typeof val;
                                 count++;
-                                propRow = $('<tr class="node-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody);
+                                propRow = $('<tr class="red-ui-help-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody);
                                 if (defaults[n].type) {
                                     var configNode = RED.nodes.node(val);
                                     if (!configNode) {
@@ -288,18 +288,18 @@ RED.sidebar.info = (function() {
                         }
                     }
                     if (count > 0) {
-                        $('<tr class="node-info-property-expand blank"><td colspan="2"><a href="#" class=" node-info-property-header'+(expandedSections.property?" expanded":"")+'"><span class="node-info-property-show-more">'+RED._("sidebar.info.showMore")+'</span><span class="node-info-property-show-less">'+RED._("sidebar.info.showLess")+'</span> <i class="fa fa-caret-down"></i></a></td></tr>').appendTo(tableBody);
+                        $('<tr class="red-ui-help-property-expand blank"><td colspan="2"><a href="#" class="node-info-property-header'+(expandedSections.property?" expanded":"")+'"><span class="red-ui-help-property-more">'+RED._("sidebar.info.showMore")+'</span><span class="red-ui-help-property-less">'+RED._("sidebar.info.showLess")+'</span> <i class="fa fa-caret-down"></i></a></td></tr>').appendTo(tableBody);
                     }
                 }
                 if (node.type !== 'tab') {
                     if (m) {
                         $('<tr class="blank"><th colspan="2">'+RED._("sidebar.info.subflow")+'</th></tr>').appendTo(tableBody);
-                        $('<tr class="node-info-subflow-row"><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+RED.utils.sanitize(subflowNode.name)+'</span></td></tr>').appendTo(tableBody);
+                        $('<tr class="node-info-subflow-row"><td>'+RED._("common.label.name")+'</td><td><span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+RED.utils.sanitize(subflowNode.name)+'</span></td></tr>').appendTo(tableBody);
                     }
                 }
             }
             if (m) {
-                propRow = $('<tr class="node-info-node-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
+                propRow = $('<tr class="red-ui-help-info-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
                 var category = subflowNode.category||"subflows";
                 $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
                 $('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody);
@@ -313,9 +313,9 @@ RED.sidebar.info = (function() {
                 if (subflowNode && node.type !== "subflow") {
                     // Selected a subflow instance node.
                     // - The subflow template info goes into help
-                    helpText = (marked(subflowNode.info||"")||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>'));
+                    helpText = (marked(subflowNode.info||"")||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>'));
                 } else {
-                    helpText = $("script[data-help-name='"+node.type+"']").html()||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>');
+                    helpText = $("script[data-help-name='"+node.type+"']").html()||('<span class="red-ui-help-info-none">'+RED._("sidebar.info.none")+'</span>');
                 }
                 setInfoText(helpText, helpSection.content);
             }
@@ -332,18 +332,18 @@ RED.sidebar.info = (function() {
             }
             setInfoText(infoText, infoSection.content);
 
-            $(".sidebar-node-info-stack").scrollTop(0);
+            $(".red-ui-sidebar-info-stack").scrollTop(0);
             $(".node-info-property-header").on("click", function(e) {
                 e.preventDefault();
                 expandedSections["property"] = !expandedSections["property"];
                 $(this).toggleClass("expanded",expandedSections["property"]);
-                $(".node-info-property-row").toggle(expandedSections["property"]);
+                $(".red-ui-help-info-property-row").toggle(expandedSections["property"]);
             });
         }
 
 
         // $('<tr class="blank"><th colspan="2"></th></tr>').appendTo(tableBody);
-        // propRow = $('<tr class="node-info-node-row"><td>Actions</td><td></td></tr>').appendTo(tableBody);
+        // propRow = $('<tr class="red-ui-help-info-row"><td>Actions</td><td></td></tr>').appendTo(tableBody);
         // var actionBar = $(propRow.children()[1]);
         //
         // // var actionBar = $('<div>',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content);
@@ -356,10 +356,10 @@ RED.sidebar.info = (function() {
 
     }
     function setInfoText(infoText,target) {
-        var info = addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(target);
-        info.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
+        var info = addTargetToExternalLinks($('<div class="red-ui-help"><span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(target);
+        info.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
         var foldingHeader = "H3";
-        info.find(foldingHeader).wrapInner('<a class="node-info-header expanded" href="#"></a>')
+        info.find(foldingHeader).wrapInner('<a class="red-ui-help-info-header expanded" href="#"></a>')
             .find("a").prepend('<i class="fa fa-angle-right">').on("click", function(e) {
                 e.preventDefault();
                 var isExpanded = $(this).hasClass('expanded');
@@ -420,7 +420,7 @@ RED.sidebar.info = (function() {
             })
         }
         function startTips() {
-            $(".sidebar-node-info").addClass('show-tips');
+            $(".red-ui-sidebar-info").addClass('show-tips');
             if (enabled) {
                 if (!startTimeout && !refreshTimeout) {
                     if (tipCount === -1) {
@@ -433,7 +433,7 @@ RED.sidebar.info = (function() {
             }
         }
         function stopTips() {
-            $(".sidebar-node-info").removeClass('show-tips');
+            $(".red-ui-sidebar-info").removeClass('show-tips');
             clearInterval(refreshTimeout);
             clearTimeout(startTimeout);
             refreshTimeout = null;
@@ -466,7 +466,7 @@ RED.sidebar.info = (function() {
         infoSection.container.show();
         //helpSection.title.text(title||RED._("sidebar.info.info"));
         setInfoText(html,infoSection.content);
-        $(".sidebar-node-info-stack").scrollTop(0);
+        $(".red-ui-sidebar-info-stack").scrollTop(0);
     }
 
     function refreshSelection(selection) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js
index cb882dcf0..e5c1500af 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js
@@ -133,7 +133,7 @@ RED.userSettings = (function() {
 
     function createViewPane() {
 
-        var pane = $('<div id="red-ui-settings-tab-view" class="node-help"></div>');
+        var pane = $('<div id="red-ui-settings-tab-view" class="red-ui-help"></div>');
 
         var currentEditorSettings = RED.settings.get('editor') || {};
         currentEditorSettings.view = currentEditorSettings.view || {};
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index 2343c15d3..b68c70394 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -37,7 +37,7 @@
         left: auto;
     }
 
-    .divider {
+    .red-ui-menu-divider {
         height: 1px;
         margin: 9px 1px;
         overflow: hidden;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
index 2aa2a9174..0cfca1952 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
@@ -151,7 +151,7 @@
 }
 #red-ui-library-dialog-load-preview-details {
     box-sizing: border-box;
-    .node-info-node-row:first-child {
+    .red-ui-help-info-row:first-child {
         border-top: none;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
index 2d941b154..d7d20db0b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
@@ -237,6 +237,6 @@
     background: $shade-color;
     z-index: 5;
 }
-.component-shade {
+.red-ui-shade {
     @include shade
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
index c67741218..44e08cc2f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
@@ -506,7 +506,7 @@
             display: block;
         }
     }
-    &.node-info-none {
+    &.red-ui-help-info-node {
         text-align: center;
         background: $list-item-background;
         white-space: normal;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index 8d663480f..bc72f7532 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -14,19 +14,19 @@
  * limitations under the License.
  **/
 
-.sidebar-node-info  hr {
+.red-ui-sidebar-info  hr {
     margin: 10px 0;
 }
-table.node-info {
+table.red-ui-info-table {
     font-size: 14px;
     margin: 0 0 10px;
     width: 100%;
 }
-table.node-info tr:not(.blank) {
+table.red-ui-info-table tr:not(.blank) {
     border-top: 1px solid $secondary-border-color;
     border-bottom: 1px solid $secondary-border-color;
 }
-.node-info-property-expand  {
+.red-ui-help-property-expand  {
     font-size: 0.8em;
     text-align: right;
     line-height: 0.9em;
@@ -35,7 +35,7 @@ table.node-info tr:not(.blank) {
     }
 
 }
-table.node-info tr.blank {
+table.red-ui-info-table tr.blank {
     border: none;
     th {
         text-align: left;
@@ -58,10 +58,10 @@ table.node-info tr.blank {
             text-decoration: none;
         }
         &:not(.expanded) {
-            .node-info-property-show-more {
+            .red-ui-help-property-more {
                 display: inline;
             }
-            .node-info-property-show-less {
+            .red-ui-help-property-less {
                 display: none;
             }
         }
@@ -72,10 +72,10 @@ table.node-info tr.blank {
         }
 
         &.expanded {
-            .node-info-property-show-more {
+            .red-ui-help-property-more {
                 display: none;
             }
-            .node-info-property-show-less {
+            .red-ui-help-property-less {
                 display: inline;
             }
             i {
@@ -83,15 +83,12 @@ table.node-info tr.blank {
             }
         }
     }
-    &.node-info-info-row > td {
-        padding-left: 5px;
-    }
 }
-.node-info-none {
+.red-ui-help-info-none {
     font-style: italic;
     color: $tertiary-text-color;
 }
-table.node-info tr:not(.blank) td:first-child{
+table.red-ui-info-table tr:not(.blank) td:first-child{
     color: $header-text-color;
     vertical-align: top;
     width: 90px;
@@ -99,15 +96,15 @@ table.node-info tr:not(.blank) td:first-child{
     background:$tertiary-background;
     border-right: 1px solid $secondary-border-color;
 }
-table.node-info tr:not(.blank) td:last-child{
+table.red-ui-info-table tr:not(.blank) td:last-child{
     padding: 3px 3px 3px 6px;
     color: $primary-text-color;
     overflow-y: hidden;
 }
-div.node-info {
+div.red-ui-info-table {
     margin: 5px;
 }
-.node-help {
+.red-ui-help {
     font-size: $primary-font-size;
     line-height: 1.5em;
 
@@ -197,7 +194,7 @@ div.node-info {
             }
         }
     }
-    .node-info-header {
+    .red-ui-help-info-header {
         i {
             width: 10px;
             text-align: center;
@@ -216,7 +213,7 @@ div.node-info {
     }
 
 }
-.sidebar-node-info-stack {
+.red-ui-sidebar-info-stack {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -238,8 +235,8 @@ div.node-info {
     box-shadow: 0 5px 20px 0px $shadow;
     overflow-y: auto;
 }
-.sidebar-node-info.show-tips {
-    .sidebar-node-info-stack {
+.red-ui-sidebar-info.show-tips {
+    .red-ui-sidebar-info-stack {
         bottom: 150px;
     }
     .red-ui-help-tips {
@@ -255,7 +252,7 @@ div.node-info {
   margin-right: -0.25em; /* Adjusts for spacing */
 }
 
-.node-info-tip {
+.red-ui-help-tip {
     display: inline-block;
     vertical-align: middle;
     width: 100%;
diff --git a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
index 953ca7f37..6ed46bbc0 100644
--- a/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
+++ b/packages/node_modules/@node-red/nodes/core/core/lib/debug/debug-utils.js
@@ -69,7 +69,7 @@ RED.debug = (function() {
         // var filterTypeRow = $('<div class="red-ui-debug-filter-row"></div>').appendTo(filterDialog);
         // $('<select><option>Show all debug nodes</option><option>Show selected debug nodes</option><option>Show current flow only</option></select>').appendTo(filterTypeRow);
 
-        var debugNodeListRow = $('<div class="red-ui-debug-filter-row hide" id="debug-filter-node-list-row"></div>').appendTo(filterDialog);
+        var debugNodeListRow = $('<div class="red-ui-debug-filter-row hide" id="red-ui-sidebar-debug-filter-node-list-row"></div>').appendTo(filterDialog);
         var flowCheckboxes = {};
         var debugNodeListHeader = $('<div><span data-i18n="node-red:debug.sidebar.debugNodes"></span><span></span></div>');
         var headerCheckbox = $('<input type="checkbox">').appendTo(debugNodeListHeader.find("span")[1]).checkboxSet();
@@ -545,7 +545,7 @@ RED.debug = (function() {
         $('.red-ui-sidebar-debug-filter-option').removeClass('selected');
         $('#red-ui-sidebar-debug-filterAll').addClass('selected');
         $('#red-ui-sidebar-debug-filter span').text(RED._('node-red:debug.sidebar.filterAll'));
-        $('#debug-filter-node-list-row').slideUp();
+        $('#red-ui-sidebar-debug-filter-node-list-row').slideUp();
     }
 
     return {