Update changelog

Currently, everytime the tab is switched, we recalculate the
width of every node. There's no need to do that as the width
will not have changed - unless it has changed, but then the
dirty/changed flag will be set on that one node and it will
get handled.
Also avoid endless added/removing an element to calculate the
dimenstions - keep it on the dom (keyed by className) and
positioned well away from the visible space.

.travis.yml

@@ -2,9 +2,12 @@ sudo: false
 language: node_js
 matrix:
   include:
+    - node_js: "12"
     - node_js: "10"
       script:
         - ./node_modules/.bin/grunt && istanbul report text && ( cat coverage/lcov.info | $(npm get prefix)/bin/coveralls || true ) && rm -rf coverage
       before_script:
         - npm install -g istanbul coveralls
     - node_js: "8"
+  allow_failures:
+    - node_js: "12"

CHANGELOG.md

@@ -1,3 +1,54 @@
+#### 1.0.0-beta.2: Beta Release
+
+Runtime
+ - Fix length calculation when loading library file
+
+#### 1.0.0-beta.1: Beta Release
+
+Runtime
+ - Update runtime apis to support multiple libraries
+ - Add Node 12 to travis (allow_failures)
+ - Bump all dependencies Fixes #2152
+
+Editor
+ - [BREAKING] complete overhaul of editor DOM/CSS structure
+ - [BREAKING] Get rid of Bootstrap
+ - Simplify index.mst to a single div to insert the editor
+ - Append node configs to div rather than body
+ - Only redraw node status when it has changed
+ - Minimise work done to calculate node label widths
+ - Allow script tags with src to reference esm modules
+ - Upgrade to jq 3.4.1 / jq-ui 1.12.1
+ - Allow editor language to be chosen in editor settings
+ - Only NLS status text that starts with a letter Fixes #2128
+ - Fix display of link node list within subflow Fixes #2140
+ - Blur the active element when closing edit dialog via action Fixes #2097
+ - Trigger change evnt on typedInput when type changes and options present Fixes #2160
+ - Move library import/export to single dialog
+ - Move type-library dialogs to new style dialog
+ - Fix node drag and drop animation
+ - let status be simple text if wanted
+ - Add workspace statusBar
+ - Complete refresh of German translations
+ - Fix memory leak in Debug sidebar #2163
+ - Introduce toggleButton and move flow-disabled to use it
+ - Allow RED.settings.get/set to use full property desc
+ - Add auto-refresh toggle to context sidebar
+ - Add build-custom-theme script
+ - Add RED.view.selectNodes api for node selection whilst editing
+ - Add node-select to typedInput
+
+Nodes
+ - http request node: warn user if msg.requestTimeout == 0
+ - hide delay node reset label on deploy
+ - Fix CSV regex to treat strings starting e as text
+ - Add "don't parse numbers" option to csv node
+ - Add expand editor button to Template node
+ - Update catch/status nodes to use selectNodes api and treeList
+
+
+
+
 #### 0.20.5: Maintenance Release
 
  - Revert error handling in palette manager

Gruntfile.js

@@ -145,11 +145,13 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/actions.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/view.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js",
@@ -181,22 +183,22 @@ module.exports = function(grunt) {
             vendor: {
                 files: {
                     "packages/node_modules/@node-red/editor-client/public/vendor/vendor.js": [
-                        "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery-1.11.3.min.js",
-                        "packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/js/bootstrap.min.js",
-                        "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery-ui-1.10.3.custom.min.js",
+                        "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery-3.4.1.min.js",
+                        "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery-migrate-3.0.1.min.js",
+                        "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery-ui.min.js",
                         "packages/node_modules/@node-red/editor-client/src/vendor/jquery/js/jquery.ui.touch-punch.min.js",
                         "packages/node_modules/@node-red/editor-client/src/vendor/marked/marked.min.js",
                         "packages/node_modules/@node-red/editor-client/src/vendor/d3/d3.v3.min.js",
-                        "packages/node_modules/@node-red/editor-client/src/vendor/i18next/i18next.min.js"
-                    ],
-                    "packages/node_modules/@node-red/editor-client/public/vendor/vendor.css": [
-                        // TODO: resolve relative resource paths in
-                        //       bootstrap/FA/jquery
-                    ],
-                    "packages/node_modules/@node-red/editor-client/public/vendor/jsonata/jsonata.min.js": [
+                        "packages/node_modules/@node-red/editor-client/src/vendor/i18next/i18next.min.js",
                         "node_modules/jsonata/jsonata-es5.min.js",
-                        "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js"
+                        "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js",
+                        "packages/node_modules/@node-red/editor-client/src/vendor/ace/ace.js",
+                        "packages/node_modules/@node-red/editor-client/src/vendor/ace/ext-language_tools.js",
                     ],
+                    // "packages/node_modules/@node-red/editor-client/public/vendor/vendor.css": [
+                    //     // TODO: resolve relative resource paths in
+                    //     //       bootstrap/FA/jquery
+                    // ],
                     "packages/node_modules/@node-red/editor-client/public/vendor/ace/worker-jsonata.js": [
                         "node_modules/jsonata/jsonata-es5.min.js",
                         "packages/node_modules/@node-red/editor-client/src/vendor/jsonata/worker-jsonata.js"
@@ -222,10 +224,6 @@ module.exports = function(grunt) {
                 files: [{
                     dest: 'packages/node_modules/@node-red/editor-client/public/red/style.min.css',
                     src: 'packages/node_modules/@node-red/editor-client/src/sass/style.scss'
-                },
-                {
-                    dest: 'packages/node_modules/@node-red/editor-client/public/vendor/bootstrap/css/bootstrap.min.css',
-                    src: 'packages/node_modules/@node-red/editor-client/src/vendor/bootstrap/css/bootstrap.css'
                 }]
             }
         },
@@ -352,9 +350,7 @@ module.exports = function(grunt) {
                         cwd: 'packages/node_modules/@node-red/editor-client/src/vendor',
                         src: [
                             'ace/**',
-                            //'bootstrap/css/**',
-                            'bootstrap/img/**',
-                            'jquery/css/**',
+                            'jquery/css/base/**',
                             'font-awesome/**'
                         ],
                         expand: true,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "0.20.5",
+    "version": "1.0.0-beta.2",
     "description": "A visual tool for wiring the Internet of Things",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -31,25 +31,25 @@
         "cheerio": "0.22.0",
         "clone": "2.1.2",
         "content-type": "1.0.4",
-        "cookie": "0.3.1",
+        "cookie": "0.4.0",
         "cookie-parser": "1.4.4",
         "cors": "2.8.5",
         "cron": "1.7.1",
         "denque": "1.4.1",
-        "express": "4.16.4",
+        "express": "4.17.0",
         "express-session": "1.16.1",
-        "fs-extra": "7.0.1",
+        "fs-extra": "8.0.1",
         "fs.notify": "0.0.4",
         "hash-sum": "1.0.2",
         "https-proxy-agent": "2.2.1",
-        "i18next": "15.1.0",
+        "i18next": "15.1.2",
         "iconv-lite": "0.4.24",
         "is-utf8": "0.2.1",
         "js-yaml": "3.13.1",
         "json-stringify-safe": "5.0.1",
         "jsonata": "1.6.4",
         "memorystore": "1.6.1",
-        "mime": "2.4.2",
+        "mime": "2.4.3",
         "mqtt": "2.18.8",
         "multer": "1.4.1",
         "mustache": "3.0.1",
@@ -68,13 +68,13 @@
         "raw-body": "2.4.0",
         "request": "2.88.0",
         "semver": "6.0.0",
-        "uglify-js": "3.5.9",
+        "uglify-js": "3.5.15",
         "when": "3.7.8",
         "ws": "6.2.1",
         "xml2js": "0.4.19"
     },
     "optionalDependencies": {
-        "bcrypt": "3.0.5"
+        "bcrypt": "3.0.6"
     },
     "devDependencies": {
         "grunt": "~1.0.3",

packages/node_modules/@node-red/editor-api/lib/editor/index.js

@@ -25,8 +25,8 @@ var auth = require("../auth");
 var nodes = require("../admin/nodes"); // TODO: move /icons into here
 var needsPermission;
 var runtimeAPI;
-var log = require("@node-red/util").log; // TODO: separate module
-var i18n = require("@node-red/util").i18n; // TODO: separate module
+var log = require("@node-red/util").log;
+var i18n = require("@node-red/util").i18n;
 
 var apiUtil = require("../util");
 
@@ -93,9 +93,8 @@ module.exports = {
             // Library
             var library = require("./library");
             library.init(runtimeAPI);
-            editorApp.get("/library/flows",needsPermission("library.read"),library.getAll,apiUtil.errorHandler);
-            editorApp.get(/library\/([^\/]+)(?:$|\/(.*))/,needsPermission("library.read"),library.getEntry);
-            editorApp.post(/library\/([^\/]+)\/(.*)/,needsPermission("library.write"),library.saveEntry);
+            editorApp.get(/library\/([^\/]+)\/([^\/]+)(?:$|\/(.*))/,needsPermission("library.read"),library.getEntry);
+            editorApp.post(/library\/([^\/]+)\/([^\/]+)\/(.*)/,needsPermission("library.write"),library.saveEntry);
 
 
             // Credentials

packages/node_modules/@node-red/editor-api/lib/editor/library.js

@@ -25,23 +25,12 @@ module.exports = {
     init: function(_runtimeAPI) {
         runtimeAPI = _runtimeAPI;
     },
-
-    getAll: function(req,res) {
-        var opts = {
-            user: req.user,
-            type: 'flows'
-        }
-        runtimeAPI.library.getEntries(opts).then(function(result) {
-            res.json(result);
-        }).catch(function(err) {
-            apiUtils.rejectHandler(req,res,err);
-        });
-    },
     getEntry: function(req,res) {
         var opts = {
             user: req.user,
-            type: req.params[0],
-            path: req.params[1]||""
+            library: req.params[0],
+            type: req.params[1],
+            path: req.params[2]||""
         }
         runtimeAPI.library.getEntry(opts).then(function(result) {
             if (typeof result === "string") {
@@ -62,8 +51,9 @@ module.exports = {
     saveEntry: function(req,res) {
         var opts = {
             user: req.user,
-            type: req.params[0],
-            path: req.params[1]||""
+            library: req.params[0],
+            type: req.params[1],
+            path: req.params[2]||""
         }
         // TODO: horrible inconsistencies between flows and all other types
         if (opts.type === "flows") {

packages/node_modules/@node-red/editor-api/lib/editor/settings.js

@@ -19,6 +19,8 @@ var sshkeys = require("./sshkeys");
 var theme = require("./theme");
 var clone = require("clone");
 
+var i18n = require("@node-red/util").i18n
+
 function extend(target, source) {
     var keys = Object.keys(source);
     var i = keys.length;
@@ -53,12 +55,14 @@ module.exports = {
             user: req.user
         }
         runtimeAPI.settings.getRuntimeSettings(opts).then(function(result) {
+            result.editorTheme = result.editorTheme||{};
             var themeSettings = theme.settings();
             if (themeSettings) {
                 // result.editorTheme may already exist with the palette
                 // disabled. Need to merge that into the receive settings
-                result.editorTheme = extend(clone(themeSettings),result.editorTheme||{});
+                result.editorTheme = extend(clone(themeSettings),result.editorTheme);
             }
+            result.editorTheme.languages = i18n.availableLanguages("editor");
             res.json(result);
         });
     },

packages/node_modules/@node-red/editor-api/lib/editor/theme.js

@@ -169,6 +169,9 @@ module.exports = {
                 }
             }
         }
+        themeApp.get("/", function(req,res) {
+            res.json(themeContext);
+        })
 
         if (theme.hasOwnProperty("menu")) {
             themeSettings.menu = theme.menu;

packages/node_modules/@node-red/editor-api/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-api",
-    "version": "0.20.5",
+    "version": "1.0.0-beta.2",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,16 +16,16 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "0.20.5",
-        "@node-red/editor-client": "0.20.5",
+        "@node-red/util": "1.0.0-beta.2",
+        "@node-red/editor-client": "1.0.0-beta.2",
         "bcryptjs": "2.4.3",
         "body-parser": "1.19.0",
         "clone": "2.1.2",
         "cors": "2.8.5",
         "express-session": "1.16.1",
-        "express": "4.16.4",
+        "express": "4.17.0",
         "memorystore": "1.6.1",
-        "mime": "2.4.2",
+        "mime": "2.4.3",
         "mustache": "3.0.1",
         "oauth2orize": "1.11.0",
         "passport-http-bearer": "1.0.1",

packages/node_modules/@node-red/editor-client/locales/de/editor.json

@@ -55,9 +55,6 @@
       "export" : "Exportieren",
       "search" : "Flows durchsuchen",
       "searchInput" : "durchsuchen Sie Ihre Flows",
-      "clipboard" : "Zwischenablage",
-      "library" : "Bibliothek",
-      "examples" : "Beispiele",
       "subflows" : "Subflow",
       "createSubflow" : "Subflow erstellen",
       "selectionToSubflow" : "Auswahl für Subflow",
@@ -136,8 +133,8 @@
     }
   },
   "clipboard" : {
+    "clipboard" : "Zwischenablage",
     "nodes" : "Nodes",
-    "selectNodes" : "Wählen Sie den Text oben aus, und kopieren Sie die Datei in die Zwischenablage.",
     "pasteNodes" : "Nodes hier einfügen",
     "importNodes" : "Nodes importieren",
     "exportNodes" : "Nodes in Zwischenablage exportieren",
@@ -297,22 +294,19 @@
     "managePalette" : "Palette verwalten"
   },
   "library" : {
+    "library" : "Bibliothek",
     "openLibrary" : "Bibliothek öffnen ...",
     "saveToLibrary" : "In Bibliothek speichern ...",
     "typeLibrary" : "__type__, Bibliothek",
     "unnamedType" : "Unbenannt __type__",
-    "exportToLibrary" : "Node in Bibliothek exportieren",
     "dialogSaveOverwrite" : "Ein __libraryType__ mit dem Namen __libraryName__ ist bereits vorhanden. Überschreiben?",
     "invalidFilename" : "Ungültiger Dateiname",
     "savedNodes" : "Gespeicherte Nodes",
     "savedType" : "Gespeichert __type__",
     "saveFailed" : "Speichern fehlgeschlagen: __message__",
-    "filename" : "Name der Datei",
-    "folder" : "Ordner",
-    "filenamePlaceholder" : "Datei",
-    "fullFilenamePlaceholder" : "a/b/Datei",
-    "folderPlaceholder" : "a/b",
-    "breadcrumb" : "Bibliothek"
+    "types": {
+        "examples" : "Beispiele"
+    }
   },
   "palette" : {
     "noInfo" : "Keine Informationen verfügbar",
@@ -826,4 +820,4 @@
       "code" : "code"
     }
   }
-}
+}

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -28,7 +28,8 @@
         "status": "Status",
         "enabled": "Enabled",
         "disabled":"Disabled",
-        "info": "Description"
+        "info": "Description",
+        "selectNodes": "Click nodes to select"
     },
     "menu": {
         "label": {
@@ -42,7 +43,9 @@
                 "defaultDir": "Default",
                 "ltr": "Left-to-right",
                 "rtl": "Right-to-left",
-                "auto": "Contextual"
+                "auto": "Contextual",
+                "language": "Language",
+                "browserDefault": "Browser default"
             },
             "sidebar": {
                 "show": "Show sidebar"
@@ -59,9 +62,6 @@
             "export": "Export",
             "search": "Search flows",
             "searchInput": "search your flows",
-            "clipboard": "Clipboard",
-            "library": "Library",
-            "examples": "Examples",
             "subflows": "Subflows",
             "createSubflow": "Create Subflow",
             "selectionToSubflow": "Selection to Subflow",
@@ -154,6 +154,7 @@
         }
     },
     "clipboard": {
+        "clipboard": "Clipboard",
         "nodes": "Nodes",
         "node": "__count__ node",
         "node_plural": "__count__ nodes",
@@ -163,7 +164,6 @@
         "flow_plural": "__count__ flows",
         "subflow": "__count__ subflow",
         "subflow_plural": "__count__ subflows",
-        "selectNodes": "Select the text above and copy to the clipboard.",
         "pasteNodes": "Paste flow json or",
         "selectFile": "select a file to import",
         "importNodes": "Import nodes",
@@ -182,7 +182,11 @@
             "all":"all flows",
             "compact":"compact",
             "formatted":"formatted",
-            "copy": "Export to clipboard"
+            "copy": "Copy to clipboard",
+            "export": "Export to library",
+            "exportAs": "Export as",
+            "overwrite": "Replace",
+            "exists": "<p><b>\"__file__\"</b> already exists.</p><p>Do you want to replace it?</p>"
         },
         "import": {
             "import": "Import to",
@@ -318,7 +322,8 @@
         "show": "Show",
         "hide": "Hide",
         "errors": {
-            "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it"
+            "scopeChange": "Changing the scope will make it unavailable to nodes in other flows that use it",
+            "invalidProperties": "Invalid properties:"
         }
     },
     "keyboard": {
@@ -349,22 +354,21 @@
         "managePalette": "Manage palette"
     },
     "library": {
+        "library": "Library",
         "openLibrary": "Open Library...",
         "saveToLibrary": "Save to Library...",
         "typeLibrary": "__type__ library",
         "unnamedType": "Unnamed __type__",
-        "exportToLibrary": "Export nodes to library",
+        "exportedToLibrary": "Nodes exported to library",
         "dialogSaveOverwrite": "A __libraryType__ called __libraryName__ already exists. Overwrite?",
         "invalidFilename": "Invalid filename",
         "savedNodes": "Saved nodes",
         "savedType": "Saved __type__",
         "saveFailed": "Save failed: __message__",
-        "filename": "Filename",
-        "folder": "Folder",
-        "filenamePlaceholder": "file",
-        "fullFilenamePlaceholder": "a/b/file",
-        "folderPlaceholder": "a/b",
-        "breadcrumb": "Library"
+        "types": {
+            "local": "Local",
+            "examples": "Examples"
+        }
     },
     "palette": {
         "noInfo": "no information available",
@@ -525,7 +529,8 @@
             "node": "Node",
             "flow": "Flow",
             "global": "Global",
-            "deleteConfirm": "Are you sure you want to delete this item?"
+            "deleteConfirm": "Are you sure you want to delete this item?",
+            "autoRefresh": "Auto-refresh"
         },
         "palette": {
             "name": "Palette management",
@@ -726,6 +731,9 @@
     "jsEditor": {
         "title": "JavaScript editor"
     },
+    "textEditor": {
+        "title": "Text editor"
+    },
     "jsonEditor": {
         "title": "JSON editor",
         "format": "format JSON"

packages/node_modules/@node-red/editor-client/locales/ja/editor.json

@@ -59,9 +59,6 @@
             "export": "書き出し",
             "search": "ノードを検索",
             "searchInput": "ノードを検索",
-            "clipboard": "クリップボード",
-            "library": "ライブラリ",
-            "examples": "サンプル",
             "subflows": "サブフロー",
             "createSubflow": "サブフローを作成",
             "selectionToSubflow": "選択部分をサブフロー化",
@@ -154,6 +151,7 @@
         }
     },
     "clipboard": {
+        "clipboard": "クリップボード",
         "nodes": "ノード",
         "node": "__count__ 個のノード",
         "node_plural": "__count__ 個のノード",
@@ -163,7 +161,6 @@
         "flow_plural": "__count__ 個のフロー",
         "subflow": "__count__ 個のサブフロー",
         "subflow_plural": "__count__ 個のサブフロー",
-        "selectNodes": "上のテキストを選択し、クリップボードへコピーしてください",
         "pasteNodes": "JSON形式のフローデータを貼り付けてください",
         "selectFile": "読み込むファイルを選択してください",
         "importNodes": "フローをクリップボートから読み込み",
@@ -349,22 +346,19 @@
         "managePalette": "パレットの管理"
     },
     "library": {
+        "library": "ライブラリ",
         "openLibrary": "ライブラリを開く",
         "saveToLibrary": "ライブラリへ保存",
         "typeLibrary": "__type__ ライブラリ",
         "unnamedType": "名前なし __type__",
-        "exportToLibrary": "ライブラリへフローを書き出す",
         "dialogSaveOverwrite": "__libraryName__ という __libraryType__ は既に存在しています 上書きしますか？",
         "invalidFilename": "不正なファイル名",
         "savedNodes": "フローを保存しました",
         "savedType": "__type__ を保存しました",
         "saveFailed": "保存に失敗しました: __message__",
-        "filename": "ファイル名",
-        "folder": "フォルダ",
-        "filenamePlaceholder": "ファイル",
-        "fullFilenamePlaceholder": "a/b/file",
-        "folderPlaceholder": "a/b",
-        "breadcrumb": "ライブラリ"
+        "types": {
+            "examples": "サンプル"
+        }
     },
     "palette": {
         "noInfo": "情報がありません",

packages/node_modules/@node-red/editor-client/locales/ko/editor.json

@@ -58,9 +58,6 @@
       "export": "내보내기",
       "search": "플로우 겅색",
       "searchInput": "플로우 검색",
-      "clipboard": "클립보드",
-      "library": "라이브러리",
-      "examples": "예시",
       "subflows": "보조 플로우",
       "createSubflow": "보조 플로우 생성",
       "selectionToSubflow": "보조 플로우 선택",
@@ -148,6 +145,7 @@
     }
   },
   "clipboard": {
+    "clipboard": "클립보드",
     "nodes": "노드",
     "node": "__count__ 개의 노드",
     "node_plural": "__count__ 개의 노드",
@@ -157,7 +155,6 @@
     "flow_plural": "__count__ 개의 플로우",
     "subflow": "__count__ 개의 서브 플로우",
     "subflow_plural": "__count__ 개의 서브 플로우",
-    "selectNodes": "텍스트를 선택하고 클립보드에 복사하세요",
     "pasteNodes": "여기에 노드를 붙여넣기 하세요",
     "selectFile": "불러올 파일을 선택하세요",
     "importNodes": "노드 불러오기",
@@ -338,22 +335,19 @@
     "managePalette": "팔렛트 관리"
   },
   "library": {
+    "library": "라이브러리",
     "openLibrary": "라이브러리 열기...",
     "saveToLibrary": "라이브러리로 저장...",
     "typeLibrary": "__type__ 라이브러리",
     "unnamedType": "이름없는 __type__",
-    "exportToLibrary": "라이브러리로 노드 내보내기",
     "dialogSaveOverwrite": "__libraryType__이 __libraryName__으로 이미 등록되어있습니다. 덮어쓸까요?",
     "invalidFilename": "파일명이 올바르지 않습니다",
     "savedNodes": "저장된 노드",
     "savedType": "저장된 __type__",
     "saveFailed": "저장 실패 : __message__",
-    "filename": "파일명",
-    "folder": "폴더명",
-    "filenamePlaceholder": "파일",
-    "fullFilenamePlaceholder": "a/b/file",
-    "folderPlaceholder": "a/b",
-    "breadcrumb": "라이브러리"
+    "types": {
+        "examples": "예시"
+    }
   },
   "palette": {
     "noInfo": "정보 없음",
@@ -904,4 +898,4 @@
     "description": "상세 내역",
     "appearance": "모양"
   }
-}
+}

packages/node_modules/@node-red/editor-client/locales/zh-CN/editor.json

@@ -50,9 +50,6 @@
             "export": "导出",
             "search": "查找流程",
             "searchInput": "查找流程",
-            "clipboard": "剪贴板",
-            "library": "库",
-            "examples": "例子",
             "subflows": "子流程",
             "createSubflow": "新建子流程",
             "selectionToSubflow": "将选择部分更改为子流程",
@@ -100,8 +97,8 @@
         }
     },
     "clipboard": {
+        "clipboard": "剪贴板",
         "nodes": "节点",
-        "selectNodes": "选择上面的文本并复制到剪贴板",
         "pasteNodes": "在这里粘贴节点",
         "importNodes": "导入节点",
         "exportNodes": "导出节点至剪贴板",
@@ -237,6 +234,7 @@
         "managePalette": "管理面板"
     },
     "library": {
+        "library": "库",
         "openLibrary": "打开库...",
         "saveToLibrary": "保存到库...",
         "typeLibrary": "__type__类型库",
@@ -247,12 +245,9 @@
         "savedNodes": "保存的节点",
         "savedType": "已保存__type__",
         "saveFailed": "保存失败: __message__",
-        "filename": "文件名",
-        "folder": "文件夹",
-        "filenamePlaceholder": "文件",
-        "fullFilenamePlaceholder": "a/b/文件",
-        "folderPlaceholder": "a/b",
-        "breadcrumb": "库"
+        "types": {
+            "examples": "例子"
+        }
     },
     "palette": {
         "noInfo": "无可用信息",

packages/node_modules/@node-red/editor-client/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-client",
-    "version": "0.20.5",
+    "version": "1.0.0-beta.2",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",

packages/node_modules/@node-red/editor-client/src/js/comms.js

@@ -143,7 +143,7 @@ RED.comms = (function() {
                     } else {
                         var msg = RED._("notification.errors.lostConnectionReconnect",{time: connectCountdown})+' <a href="#">'+ RED._("notification.errors.lostConnectionTry")+'</a>';
                         errornotification.update(msg,{silent:true});
-                        $(errornotification).find("a").click(function(e) {
+                        $(errornotification).find("a").on("click", function(e) {
                             e.preventDefault();
                             errornotification.update(RED._("notification.errors.lostConnection"),{silent:true});
                             clearInterval(connectCountdownTimer);

packages/node_modules/@node-red/editor-client/src/js/i18n.js

@@ -21,7 +21,8 @@ RED.i18n = (function() {
     return {
         init: function(options, done) {
             apiRootUrl = options.apiRootUrl||"";
-            i18n.init({
+            var preferredLanguage = localStorage.getItem("editor-language");
+            var opts = {
                 resGetPath: apiRootUrl+'locales/__ns__?lng=__lng__',
                 dynamicLoad: false,
                 load:'current',
@@ -32,7 +33,11 @@ RED.i18n = (function() {
                 fallbackLng: ['en-US'],
                 useCookie: false,
                 returnObjectTrees: true
-            },function() {
+            };
+            if (preferredLanguage) {
+                opts.lng = preferredLanguage;
+            }
+            i18n.init(opts,function() {
                 done();
             });
             RED["_"] = function() {

packages/node_modules/@node-red/editor-client/src/js/keymap.json

@@ -23,13 +23,13 @@
         "ctrl-g v": "core:show-version-control-tab",
         "ctrl-shift-l": "core:show-event-log"
     },
-    "sidebar-node-config": {
+    "red-ui-sidebar-node-config": {
         "backspace": "core:delete-config-selection",
         "delete": "core:delete-config-selection",
         "ctrl-a": "core:select-all-config-nodes",
         "ctrl-z": "core:undo"
     },
-    "workspace": {
+    "red-ui-workspace": {
         "backspace": "core:delete-selection",
         "delete": "core:delete-selection",
         "enter": "core:edit-selected-node",

packages/node_modules/@node-red/editor-client/src/js/nodes.js

@@ -368,7 +368,7 @@ RED.nodes = (function() {
             outputs: sf.out.length,
             color: "#da9",
             label: function() { return this.name||RED.nodes.subflow(sf.id).name },
-            labelStyle: function() { return this.name?"node_label_italic":""; },
+            labelStyle: function() { return this.name?"red-ui-flow-node-label-italic":""; },
             paletteLabel: function() { return RED.nodes.subflow(sf.id).name },
             inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
             outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
@@ -1072,7 +1072,7 @@ RED.nodes = (function() {
                                     color:"#fee",
                                     defaults: {},
                                     label: "unknown: "+n.type,
-                                    labelStyle: "node_label_italic",
+                                    labelStyle: "red-ui-flow-node-label-italic",
                                     outputs: n.outputs||n.wires.length,
                                     set: registry.getNodeSet("node-red/unknown")
                                 }

packages/node_modules/@node-red/editor-client/src/js/red.js

@@ -38,11 +38,14 @@ var RED = (function() {
                     newScript.onload = function() {
                         scriptCount--;
                         if (scriptCount === 0) {
-                            $("body").append(nodeConfigEls);
+                            $("#red-ui-editor-node-configs").append(nodeConfigEls);
                             done()
                         }
                     }
-                    $('body').append(newScript);
+                    if ($(el).attr('type') === "module") {
+                        newScript.type = "module";
+                    }
+                    $("#red-ui-editor-node-configs").append(newScript);
                     newScript.src = RED.settings.apiRootUrl+srcUrl;
                     hasDeferred = true;
                 } else {
@@ -58,7 +61,7 @@ var RED = (function() {
                 }
             })
             if (!hasDeferred) {
-                $("body").append(nodeConfigEls);
+                $("#red-ui-editor-node-configs").append(nodeConfigEls);
                 done();
             }
         } catch(err) {
@@ -114,10 +117,10 @@ var RED = (function() {
                 var configs = data.trim().split(/(?=<!-- --- \[red-module:\S+\] --- -->)/);
                 var stepConfig = function() {
                     if (configs.length === 0) {
-                        $("body").i18n();
-                        $("#palette > .palette-spinner").hide();
-                        $(".palette-scroll").removeClass("hide");
-                        $("#palette-search").removeClass("hide");
+                        $("#red-ui-editor").i18n();
+                        $("#red-ui-palette > .red-ui-palette-spinner").hide();
+                        $(".red-ui-palette-scroll").removeClass("hide");
+                        $("#red-ui-palette-search").removeClass("hide");
                         loadFlows(function() {
                             if (RED.settings.theme("projects.enabled",false)) {
                                 RED.projects.refresh(function(activeProject) {
@@ -351,6 +354,7 @@ var RED = (function() {
                     msg.text = node._(msg.text.toString(),{defaultValue:msg.text.toString()});
                 }
                 node.status = msg;
+                node.dirtyStatus = true;
                 node.dirty = true;
                 RED.view.redraw();
             }
@@ -431,7 +435,7 @@ var RED = (function() {
         });
     }
 
-    function loadEditor() {
+    function buildMainMenu() {
         var menuOptions = [];
         if (RED.settings.theme("projects.enabled",false)) {
             menuOptions.push({id:"menu-item-projects-menu",label:RED._("menu.label.projects"),options:[
@@ -440,34 +444,15 @@ var RED = (function() {
                 {id:"menu-item-projects-settings",label:RED._("menu.label.projects-settings"),disabled:false,onselect:"core:show-project-settings"}
             ]});
         }
-
-
         menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[
-            // {id:"menu-item-view-show-grid",setting:"view-show-grid",label:RED._("menu.label.view.showGrid"),toggle:true,onselect:"core:toggle-show-grid"},
-            // {id:"menu-item-view-snap-grid",setting:"view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:"core:toggle-snap-grid"},
-            // {id:"menu-item-status",setting:"node-show-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:"core:toggle-status", selected: true},
-            //null,
-            // {id:"menu-item-bidi",label:RED._("menu.label.view.textDir"),options:[
-            //     {id:"menu-item-bidi-default",toggle:"text-direction",label:RED._("menu.label.view.defaultDir"),selected: true, onselect:function(s) { if(s){RED.text.bidi.setTextDirection("")}}},
-            //     {id:"menu-item-bidi-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("ltr")}}},
-            //     {id:"menu-item-bidi-rtl",toggle:"text-direction",label:RED._("menu.label.view.rtl"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("rtl")}}},
-            //     {id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("auto")}}}
-            // ]},
-            // null,
             {id:"menu-item-palette",label:RED._("menu.label.palette.show"),toggle:true,onselect:"core:toggle-palette", selected: true},
             {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
             {id:"menu-item-event-log",label:RED._("eventLog.title"),onselect:"core:show-event-log"},
             null
         ]});
         menuOptions.push(null);
-        menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[
-            {id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-import-dialog"},
-            {id:"menu-item-import-library",label:RED._("menu.label.library"),options:[]}
-        ]});
-        menuOptions.push({id:"menu-item-export",label:RED._("menu.label.export"),options:[
-            {id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-export-dialog"},
-            {id:"menu-item-export-library",label:RED._("menu.label.library"),disabled:true,onselect:"core:library-export"}
-        ]});
+        menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),onselect:"core:show-import-dialog"});
+        menuOptions.push({id:"menu-item-export",label:RED._("menu.label.export"),onselect:"core:show-export-dialog"});
         menuOptions.push(null);
         menuOptions.push({id:"menu-item-search",label:RED._("menu.label.search"),onselect:"core:search"});
         menuOptions.push(null);
@@ -498,13 +483,24 @@ var RED = (function() {
         menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" });
 
 
+        $('<li><a id="red-ui-header-button-sidemenu" class="button" href="#"><i class="fa fa-bars"></i></a></li>').appendTo(".red-ui-header-toolbar")
+        RED.menu.init({id:"red-ui-header-button-sidemenu",options: menuOptions});
+
+    }
+
+    function loadEditor() {
+
+        RED.workspaces.init();
+        RED.statusBar.init();
         RED.view.init();
         RED.userSettings.init();
         RED.user.init();
+        RED.notifications.init();
         RED.library.init();
         RED.keyboard.init();
         RED.palette.init();
         RED.eventLog.init();
+
         if (RED.settings.theme('palette.editable') !== false) {
             RED.palette.editor.init();
         } else {
@@ -520,27 +516,56 @@ var RED = (function() {
         }
 
         RED.subflow.init();
-        RED.workspaces.init();
         RED.clipboard.init();
         RED.search.init();
         RED.editor.init();
         RED.diff.init();
 
-        RED.menu.init({id:"btn-sidemenu",options: menuOptions});
 
         RED.deploy.init(RED.settings.theme("deployButton",null));
-        RED.notifications.init();
 
-        RED.actions.add("core:show-about", showAbout);
+        buildMainMenu();
+
         RED.nodes.init();
         RED.comms.connect();
 
-        $("#main-container").show();
-        $(".header-toolbar").show();
+        $("#red-ui-main-container").show();
+        $(".red-ui-header-toolbar").show();
+
+        RED.actions.add("core:show-about", showAbout);
 
         loadNodeList();
     }
 
+    function buildEditor(options) {
+        var header = $('<div id="red-ui-header"></div>').appendTo(options.target);
+        var logo = $('<span class="red-ui-header-logo"></span>').appendTo(header);
+        $('<ul class="red-ui-header-toolbar hide"></ul>').appendTo(header);
+        $('<div id="red-ui-header-shade" class="hide"></div>').appendTo(header);
+        $('<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">'+
+            '<div id="red-ui-workspace"></div>'+
+            '<div id="red-ui-editor-stack"></div>'+
+            '<div id="red-ui-palette"></div>'+
+            '<div id="red-ui-sidebar"></div>'+
+            '<div id="red-ui-sidebar-separator"></div>'+
+        '</div>').appendTo(options.target);
+        $('<div id="red-ui-editor-node-configs"></div>').appendTo(options.target);
+        $('<div id="red-ui-full-shade" class="hide"></div>').appendTo(options.target);
+        $.getJSON(options.apiRootUrl+"theme", function(theme) {
+            if (theme.header) {
+                if (theme.header.url) {
+                    logo = $("<a>",{href:theme.header.url}).appendTo(logo);
+                }
+                if (theme.header.image) {
+                    $('<img>',{src:theme.header.image}).appendTo(logo);
+                }
+                if (theme.header.title) {
+                    $('<span>').html(theme.header.title).appendTo(logo);
+                }
+            }
+        });
+    }
+
     var initialised = false;
 
     function init(options) {
@@ -554,6 +579,10 @@ var RED = (function() {
         if (options.apiRootUrl && !/\/$/.test(options.apiRootUrl)) {
             options.apiRootUrl = options.apiRootUrl+"/";
         }
+        options.target = $("#red-ui-editor");
+        options.target.addClass("red-ui-editor");
+
+        buildEditor(options);
         RED.i18n.init(options, function() {
             RED.settings.init(options, loadEditor);
         })

packages/node_modules/@node-red/editor-client/src/js/settings.js

@@ -37,7 +37,7 @@ RED.settings = (function () {
         if (key === "auth-tokens") {
             localStorage.setItem(key, JSON.stringify(value));
         } else {
-            userSettings[key] = value;
+            RED.utils.setMessageProperty(userSettings,key,value);
             saveUserSettings();
         }
     };
@@ -46,16 +46,25 @@ RED.settings = (function () {
      * If the key is not set in the localStorage it returns <i>undefined</i>
      * Else return the JSON parsed value
      * @param key
+     * @param defaultIfUndefined
      * @returns {*}
      */
-    var get = function (key) {
+    var get = function (key,defaultIfUndefined) {
         if (!hasLocalStorage()) {
             return undefined;
         }
         if (key === "auth-tokens") {
             return JSON.parse(localStorage.getItem(key));
         } else {
-            return userSettings[key];
+            try {
+                var v = RED.utils.getMessageProperty(userSettings,key);
+                if (v === undefined) {
+                    v = defaultIfUndefined;
+                }
+            } catch(err) {
+                v = defaultIfUndefined;
+            }
+            return v;
         }
     };
 
@@ -131,6 +140,12 @@ RED.settings = (function () {
                     RED.settings.remove("auth-tokens");
                 }
                 console.log("Node-RED: " + data.version);
+                console.groupCollapsed("Versions");
+                console.log("jQuery",$().jquery)
+                console.log("jQuery UI",$.ui.version);
+                console.log("ACE",ace.version);
+                console.log("D3",d3.version);
+                console.groupEnd();
                 loadUserSettings(done);
             },
             error: function(jqXHR,textStatus,errorThrown) {

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() {
-        $("#workspace").find('span.bidiAware').each(function() {
+        $("#red-ui-workspace").find('span.red-ui-text-bidi-aware').each(function() {
             $(this).attr("dir", resolveBaseTextDir($(this).html()));
         });
-        $("#sidebar").find('span.bidiAware').each(function() {
+        $("#red-ui-sidebar").find('span.red-ui-text-bidi-aware').each(function() {
             $(this).attr("dir", resolveBaseTextDir($(this).text()));
         });
     }

packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js

@@ -24,71 +24,141 @@ RED.clipboard = (function() {
     var disabled = false;
     var popover;
     var currentPopoverError;
+    var activeTab;
+    var libraryBrowser;
+    var examplesBrowser;
 
     function setupDialogs() {
-        dialog = $('<div id="clipboard-dialog" class="hide node-red-dialog"><form class="dialog-form form-horizontal"></form></div>')
-            .appendTo("body")
+        dialog = $('<div id="red-ui-clipboard-dialog" class="hide"><form class="dialog-form form-horizontal"></form></div>')
+            .appendTo("#red-ui-editor")
             .dialog({
                 modal: true,
                 autoOpen: false,
-                width: 500,
+                width: 700,
                 resizable: false,
+                classes: {
+                    "ui-dialog": "red-ui-editor-dialog",
+                    "ui-dialog-titlebar-close": "hide",
+                    "ui-widget-overlay": "red-ui-editor-dialog"
+                },
                 buttons: [
                     {
-                        id: "clipboard-dialog-cancel",
+                        id: "red-ui-clipboard-dialog-cancel",
                         text: RED._("common.label.cancel"),
                         click: function() {
                             $( this ).dialog( "close" );
                         }
                     },
                     {
-                        id: "clipboard-dialog-close",
-                        class: "primary",
-                        text: RED._("common.label.close"),
-                        click: function() {
-                            $( this ).dialog( "close" );
-                        }
-                    },
-                    {
-                        id: "clipboard-dialog-download",
+                        id: "red-ui-clipboard-dialog-download",
                         class: "primary",
                         text: RED._("clipboard.download"),
                         click: function() {
                             var element = document.createElement('a');
-                            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent($("#clipboard-export").val()));
+                            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent($("#red-ui-clipboard-dialog-export-text").val()));
                             element.setAttribute('download', "flows.json");
                             element.style.display = 'none';
                             document.body.appendChild(element);
-                            element.click();
+                            element.trigger("click");
                             document.body.removeChild(element);
                             $( this ).dialog( "close" );
                         }
                     },
                     {
-                        id: "clipboard-dialog-copy",
+                        id: "red-ui-clipboard-dialog-export",
                         class: "primary",
                         text: RED._("clipboard.export.copy"),
                         click: function() {
-                            $("#clipboard-export").select();
-                            document.execCommand("copy");
-                            document.getSelection().removeAllRanges();
-                            RED.notify(RED._("clipboard.nodesExported"),{id:"clipboard"});
-                            $( this ).dialog( "close" );
+                            if (activeTab === "red-ui-clipboard-dialog-export-tab-clipboard") {
+                                $("#red-ui-clipboard-dialog-export-text").select();
+                                document.execCommand("copy");
+                                document.getSelection().removeAllRanges();
+                                RED.notify(RED._("clipboard.nodesExported"),{id:"clipboard"});
+                                $( this ).dialog( "close" );
+                            } else {
+                                var flowToExport = $("#red-ui-clipboard-dialog-export-text").val();
+                                var selectedPath = libraryBrowser.getSelected();
+                                if (!selectedPath.children) {
+                                    selectedPath = selectedPath.parent;
+                                }
+                                var filename = $("#red-ui-clipboard-dialog-tab-library-name").val().trim();
+                                var saveFlow = function() {
+                                    $.ajax({
+                                        url:'library/'+selectedPath.library+'/'+selectedPath.type+'/'+selectedPath.path + filename,
+                                        type: "POST",
+                                        data: flowToExport,
+                                        contentType: "application/json; charset=utf-8"
+                                    }).done(function() {
+                                        $(dialog).dialog( "close" );
+                                        RED.notify(RED._("library.exportedToLibrary"),"success");
+                                    }).fail(function(xhr,textStatus,err) {
+                                        if (xhr.status === 401) {
+                                            RED.notify(RED._("library.saveFailed",{message:RED._("user.notAuthorized")}),"error");
+                                        } else {
+                                            RED.notify(RED._("library.saveFailed",{message:xhr.responseText}),"error");
+                                        }
+                                    });
+                                }
+                                if (selectedPath.children) {
+                                    var exists = false;
+                                    selectedPath.children.forEach(function(f) {
+                                        if (f.label === filename) {
+                                            exists = true;
+                                        }
+                                    });
+                                    if (exists) {
+                                        dialog.dialog("close");
+                                        var notification = RED.notify(RED._("clipboard.export.exists",{file:RED.utils.sanitize(filename)}),{
+                                            type: "warning",
+                                            fixed: true,
+                                            buttons: [{
+                                                text: RED._("common.label.cancel"),
+                                                click: function() {
+                                                    notification.hideNotification()
+                                                    dialog.dialog( "open" );
+                                                }
+                                            },{
+                                                text: RED._("clipboard.export.overwrite"),
+                                                click: function() {
+                                                    notification.hideNotification()
+                                                    saveFlow();
+                                                }
+                                            }]
+                                        });
+                                    } else {
+                                        saveFlow();
+                                    }
+                                } else {
+                                    saveFlow();
+                                }
+                            }
                         }
                     },
                     {
-                        id: "clipboard-dialog-ok",
+                        id: "red-ui-clipboard-dialog-ok",
                         class: "primary",
                         text: RED._("common.label.import"),
                         click: function() {
-                            RED.view.importNodes($("#clipboard-import").val(),$("#import-tab > a.selected").attr('id') === 'import-tab-new');
+                            var addNewFlow = ($("#red-ui-clipboard-dialog-import-opt > a.selected").attr('id') === 'red-ui-clipboard-dialog-import-opt-new');
+                            if (activeTab === "red-ui-clipboard-dialog-import-tab-clipboard") {
+                                RED.view.importNodes($("#red-ui-clipboard-dialog-import-text").val(),addNewFlow);
+                            } else {
+                                var selectedPath;
+                                if (activeTab === "red-ui-clipboard-dialog-import-tab-library") {
+                                    selectedPath = libraryBrowser.getSelected();
+                                } else {
+                                    selectedPath = examplesBrowser.getSelected();
+                                }
+                                if (selectedPath.path) {
+                                    $.get('library/'+selectedPath.library+'/'+selectedPath.type+'/'+selectedPath.path, function(data) {
+                                        RED.view.importNodes(data,addNewFlow);
+                                    });
+                                }
+                            }
                             $( this ).dialog( "close" );
                         }
                     }
                 ],
-                open: function(e) {
-                    $(this).parent().find(".ui-dialog-titlebar-close").hide();
-                },
                 close: function(e) {
                     if (popover) {
                         popover.close(true);
@@ -101,152 +171,289 @@ RED.clipboard = (function() {
 
         exportNodesDialog =
             '<div class="form-row">'+
-                '<label style="width:auto;margin-right: 10px;" data-i18n="clipboard.export.copy"></label>'+
-                '<span id="export-range-group" class="button-group">'+
-                    '<a id="export-range-selected" class="editor-button toggle" href="#" data-i18n="clipboard.export.selected"></a>'+
-                    '<a id="export-range-flow" class="editor-button toggle" href="#" data-i18n="clipboard.export.current"></a>'+
-                    '<a id="export-range-full" class="editor-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
+                '<label style="width:auto;margin-right: 10px;" data-i18n="common.label.export"></label>'+
+                '<span id="red-ui-clipboard-dialog-export-rng-group" class="button-group">'+
+                    '<a id="red-ui-clipboard-dialog-export-rng-selected" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.selected"></a>'+
+                    '<a id="red-ui-clipboard-dialog-export-rng-flow" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.current"></a>'+
+                    '<a id="red-ui-clipboard-dialog-export-rng-full" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
                 '</span>'+
             '</div>'+
-            '<div class="form-row">'+
-                '<textarea readonly style="resize: none; width: 100%; border-radius: 4px;font-family: monospace; font-size: 12px; background:#f3f3f3; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-export" rows="5"></textarea>'+
-            '</div>'+
-            '<div class="form-row" style="text-align: right;">'+
-                '<span id="export-format-group" class="button-group">'+
-                    '<a id="export-format-mini" class="editor-button editor-button-small toggle" href="#" data-i18n="clipboard.export.compact"></a>'+
-                    '<a id="export-format-full" class="editor-button editor-button-small toggle" href="#" data-i18n="clipboard.export.formatted"></a>'+
-                '</span>'+
-            '</div>';
+            '<div class="red-ui-clipboard-dialog-box">'+
+                '<div class="red-ui-clipboard-dialog-tabs">'+
+                    '<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+
+                '</div>'+
+                '<div id="red-ui-clipboard-dialog-export-tabs-content" class="red-ui-clipboard-dialog-tabs-content">'+
+                    '<div id="red-ui-clipboard-dialog-export-tab-clipboard" class="red-ui-clipboard-dialog-tab-clipboard">'+
+                        '<div class="form-row">'+
+                            '<textarea readonly id="red-ui-clipboard-dialog-export-text"></textarea>'+
+                        '</div>'+
+                        '<div class="form-row" style="text-align: right;">'+
+                            '<span id="red-ui-clipboard-dialog-export-fmt-group" class="button-group">'+
+                                '<a id="red-ui-clipboard-dialog-export-fmt-mini" class="red-ui-button red-ui-button-small toggle" href="#" data-i18n="clipboard.export.compact"></a>'+
+                                '<a id="red-ui-clipboard-dialog-export-fmt-full" class="red-ui-button red-ui-button-small toggle" href="#" data-i18n="clipboard.export.formatted"></a>'+
+                            '</span>'+
+                        '</div>'+
+                    '</div>'+
+                    '<div id="red-ui-clipboard-dialog-export-tab-library" class="red-ui-clipboard-dialog-tab-library">'+
+                        '<div id="red-ui-clipboard-dialog-export-tab-library-browser"></div>'+
+                        '<div class="form-row">'+
+                            '<label data-i18n="clipboard.export.exportAs"></label><input id="red-ui-clipboard-dialog-tab-library-name" type="text">'+
+                        '</div>'+
+                    '</div>'+
+                '</div>'+
+            '</div>'
+            ;
+
 
         importNodesDialog =
-            '<div class="form-row"><span data-i18n="clipboard.pasteNodes"></span>'+
-                ' <a class="editor-button" id="import-file-upload-btn"><i class="fa fa-upload"></i> <span data-i18n="clipboard.selectFile"></span></a>'+
-                '<input type="file" id="import-file-upload" accept=".json" style="display:none">'+
+            '<div class="red-ui-clipboard-dialog-box" style="margin-bottom: 12px">'+
+                '<div class="red-ui-clipboard-dialog-tabs">'+
+                    '<ul id="red-ui-clipboard-dialog-import-tabs"></ul>'+
+                '</div>'+
+                '<div id="red-ui-clipboard-dialog-import-tabs-content" class="red-ui-clipboard-dialog-tabs-content">'+
+                    '<div id="red-ui-clipboard-dialog-import-tab-clipboard" class="red-ui-clipboard-dialog-tab-clipboard">'+
+                        '<div class="form-row"><span data-i18n="clipboard.pasteNodes"></span>'+
+                            ' <a class="red-ui-button" id="red-ui-clipboard-dialog-import-file-upload-btn"><i class="fa fa-upload"></i> <span data-i18n="clipboard.selectFile"></span></a>'+
+                            '<input type="file" id="red-ui-clipboard-dialog-import-file-upload" accept=".json" style="display:none">'+
+                        '</div>'+
+                        '<div class="form-row">'+
+                            '<textarea id="red-ui-clipboard-dialog-import-text"></textarea>'+
+                        '</div>'+
+                    '</div>'+
+                    '<div id="red-ui-clipboard-dialog-import-tab-library" class="red-ui-clipboard-dialog-tab-library"></div>'+
+                    '<div id="red-ui-clipboard-dialog-import-tab-examples" class="red-ui-clipboard-dialog-tab-library"></div>'+
+                '</div>'+
             '</div>'+
             '<div class="form-row">'+
-                '<textarea style="resize: none; width: 100%; border-radius: 0px;font-family: monospace; font-size: 12px; background:#eee; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-import" rows="5"></textarea>'+
-            '</div>'+
-            '<div class="form-row">'+
-            '<label style="width:auto;margin-right: 10px;" data-i18n="clipboard.import.import"></label>'+
-            '<span id="import-tab" class="button-group">'+
-                '<a id="import-tab-current" class="editor-button toggle selected" href="#" data-i18n="clipboard.export.current"></a>'+
-                '<a id="import-tab-new" class="editor-button toggle" href="#" data-i18n="clipboard.import.newFlow"></a>'+
-            '</span>'+
+                '<label style="width:auto;margin-right: 10px;" data-i18n="clipboard.import.import"></label>'+
+                '<span id="red-ui-clipboard-dialog-import-opt" class="button-group">'+
+                    '<a id="red-ui-clipboard-dialog-import-opt-current" class="red-ui-button toggle selected" href="#" data-i18n="clipboard.export.current"></a>'+
+                    '<a id="red-ui-clipboard-dialog-import-opt-new" class="red-ui-button toggle" href="#" data-i18n="clipboard.import.newFlow"></a>'+
+                '</span>'+
             '</div>';
+
     }
 
-    var validateImportTimeout;
-
-    function validateImport() {
-        if (validateImportTimeout) {
-            clearTimeout(validateImportTimeout);
+    var validateExportFilenameTimeout
+    function validateExportFilename() {
+        if (validateExportFilenameTimeout) {
+            clearTimeout(validateExportFilenameTimeout);
         }
-        validateImportTimeout = setTimeout(function() {
-            var importInput = $("#clipboard-import");
-            var v = importInput.val().trim();
-            if (v === "") {
-                popover.close(true);
-                currentPopoverError = null;
-                importInput.removeClass("input-error");
-                $("#clipboard-dialog-ok").button("disable");
-                return;
-            }
-            try {
-                if (!/^\[[\s\S]*\]$/m.test(v)) {
-                    throw new Error(RED._("clipboard.import.errors.notArray"));
-                }
-                var res = JSON.parse(v);
-                for (var i=0;i<res.length;i++) {
-                    if (typeof res[i] !== "object") {
-                        throw new Error(RED._("clipboard.import.errors.itemNotObject",{index:i}));
-                    }
-                    if (!res[i].hasOwnProperty('id')) {
-                        throw new Error(RED._("clipboard.import.errors.missingId",{index:i}));
-                    }
-                    if (!res[i].hasOwnProperty('type')) {
-                        throw new Error(RED._("clipboard.import.errors.missingType",{index:i}));
-                    }
-                }
-                currentPopoverError = null;
-                popover.close(true);
-                importInput.removeClass("input-error");
-                importInput.val(v);
-                $("#clipboard-dialog-ok").button("enable");
-            } catch(err) {
-                if (v !== "") {
-                    importInput.addClass("input-error");
-                    var errString = err.toString();
-                    if (errString !== currentPopoverError) {
-                        // Display the error as-is.
-                        // Error messages are only in English. Each browser has its
-                        // own set of messages with very little consistency.
-                        // To provide translated messages this code will either need to:
-                        // - reduce everything down to 'unexpected token at position x'
-                        //   which is the least useful, but most consistent message
-                        // - use a custom/library parser that gives consistent messages
-                        //   which can be translated.
-                        var message = $('<div class="clipboard-import-error"></div>').text(errString);
-                        var errorPos;
-                        // Chrome error messages
-                        var m = /at position (\d+)/i.exec(errString);
-                        if (m) {
-                            errorPos = parseInt(m[1]);
-                        } else {
-                            // Firefox error messages
-                            m = /at line (\d+) column (\d+)/i.exec(errString);
-                            if (m) {
-                                var line = parseInt(m[1])-1;
-                                var col = parseInt(m[2])-1;
-                                var lines = v.split("\n");
-                                errorPos = 0;
-                                for (var i=0;i<line;i++) {
-                                    errorPos += lines[i].length+1;
-                                }
-                                errorPos += col;
-                            } else {
-                                // Safari doesn't provide any position information
-                                // IE: tbd
-                            }
-                        }
-
-                        if (errorPos !== undefined) {
-                            v = v.replace(/\n/g,"↵");
-                            var index = parseInt(m[1]);
-                            var parseError = $('<div>').appendTo(message);
-                            var code = $('<pre>').appendTo(parseError);
-                            $('<span>').text(v.substring(errorPos-12,errorPos)).appendTo(code)
-                            $('<span class="error">').text(v.charAt(errorPos)).appendTo(code);
-                            $('<span>').text(v.substring(errorPos+1,errorPos+12)).appendTo(code);
-                        }
-                        popover.close(true).setContent(message).open();
-                        currentPopoverError = errString;
-                    }
-                } else {
-                    currentPopoverError = null;
-                }
-                $("#clipboard-dialog-ok").button("disable");
+        validateExportFilenameTimeout = setTimeout(function() {
+            var filenameInput = $("#red-ui-clipboard-dialog-tab-library-name");
+            var filename = filenameInput.val().trim();
+            var valid = filename.length > 0 && !/[\/\\]/.test(filename);
+            if (valid) {
+                filenameInput.removeClass("input-error");
+                $("#red-ui-clipboard-dialog-export").button("enable");
+            } else {
+                filenameInput.addClass("input-error");
+                $("#red-ui-clipboard-dialog-export").button("disable");
             }
         },100);
     }
 
-    function importNodes() {
+    var validateImportTimeout;
+    function validateImport() {
+        if (activeTab === "red-ui-clipboard-dialog-import-tab-clipboard") {
+            if (validateImportTimeout) {
+                clearTimeout(validateImportTimeout);
+            }
+            validateImportTimeout = setTimeout(function() {
+                var importInput = $("#red-ui-clipboard-dialog-import-text");
+                var v = importInput.val().trim();
+                if (v === "") {
+                    popover.close(true);
+                    currentPopoverError = null;
+                    importInput.removeClass("input-error");
+                    $("#red-ui-clipboard-dialog-ok").button("disable");
+                    return;
+                }
+                try {
+                    if (!/^\[[\s\S]*\]$/m.test(v)) {
+                        throw new Error(RED._("clipboard.import.errors.notArray"));
+                    }
+                    var res = JSON.parse(v);
+                    for (var i=0;i<res.length;i++) {
+                        if (typeof res[i] !== "object") {
+                            throw new Error(RED._("clipboard.import.errors.itemNotObject",{index:i}));
+                        }
+                        if (!res[i].hasOwnProperty('id')) {
+                            throw new Error(RED._("clipboard.import.errors.missingId",{index:i}));
+                        }
+                        if (!res[i].hasOwnProperty('type')) {
+                            throw new Error(RED._("clipboard.import.errors.missingType",{index:i}));
+                        }
+                    }
+                    currentPopoverError = null;
+                    popover.close(true);
+                    importInput.removeClass("input-error");
+                    importInput.val(v);
+                    $("#red-ui-clipboard-dialog-ok").button("enable");
+                } catch(err) {
+                    if (v !== "") {
+                        importInput.addClass("input-error");
+                        var errString = err.toString();
+                        if (errString !== currentPopoverError) {
+                            // Display the error as-is.
+                            // Error messages are only in English. Each browser has its
+                            // own set of messages with very little consistency.
+                            // To provide translated messages this code will either need to:
+                            // - reduce everything down to 'unexpected token at position x'
+                            //   which is the least useful, but most consistent message
+                            // - use a custom/library parser that gives consistent messages
+                            //   which can be translated.
+                            var message = $('<div class="red-ui-clipboard-import-error"></div>').text(errString);
+                            var errorPos;
+                            // Chrome error messages
+                            var m = /at position (\d+)/i.exec(errString);
+                            if (m) {
+                                errorPos = parseInt(m[1]);
+                            } else {
+                                // Firefox error messages
+                                m = /at line (\d+) column (\d+)/i.exec(errString);
+                                if (m) {
+                                    var line = parseInt(m[1])-1;
+                                    var col = parseInt(m[2])-1;
+                                    var lines = v.split("\n");
+                                    errorPos = 0;
+                                    for (var i=0;i<line;i++) {
+                                        errorPos += lines[i].length+1;
+                                    }
+                                    errorPos += col;
+                                } else {
+                                    // Safari doesn't provide any position information
+                                    // IE: tbd
+                                }
+                            }
+
+                            if (errorPos !== undefined) {
+                                v = v.replace(/\n/g,"↵");
+                                var index = parseInt(m[1]);
+                                var parseError = $('<div>').appendTo(message);
+                                var code = $('<pre>').appendTo(parseError);
+                                $('<span>').text(v.substring(errorPos-12,errorPos)).appendTo(code)
+                                $('<span class="error">').text(v.charAt(errorPos)).appendTo(code);
+                                $('<span>').text(v.substring(errorPos+1,errorPos+12)).appendTo(code);
+                            }
+                            popover.close(true).setContent(message).open();
+                            currentPopoverError = errString;
+                        }
+                    } else {
+                        currentPopoverError = null;
+                    }
+                    $("#red-ui-clipboard-dialog-ok").button("disable");
+                }
+            },100);
+        } else {
+            var file = libraryBrowser.getSelected();
+            if (file && file.label && !file.children) {
+                $("#red-ui-clipboard-dialog-ok").button("enable");
+            } else {
+                $("#red-ui-clipboard-dialog-ok").button("disable");
+            }
+        }
+    }
+
+    function importNodes(mode) {
         if (disabled) {
             return;
         }
+        mode = mode || "clipboard";
+
         dialogContainer.empty();
         dialogContainer.append($(importNodesDialog));
+
+        var tabs = RED.tabs.create({
+            id: "red-ui-clipboard-dialog-import-tabs",
+            vertical: true,
+            onchange: function(tab) {
+                $("#red-ui-clipboard-dialog-import-tabs-content").children().hide();
+                $("#" + tab.id).show();
+                activeTab = tab.id;
+                if (popover) {
+                    popover.close(true);
+                    currentPopoverError = null;
+                }
+                if (tab.id === "red-ui-clipboard-dialog-import-tab-clipboard") {
+                    $("#red-ui-clipboard-dialog-import-text").trigger("focus");
+                } else {
+                    libraryBrowser.focus();
+                }
+                validateImport();
+            }
+        });
+        tabs.addTab({
+            id: "red-ui-clipboard-dialog-import-tab-clipboard",
+            label: RED._("clipboard.clipboard")
+        });
+        tabs.addTab({
+            id: "red-ui-clipboard-dialog-import-tab-library",
+            label: RED._("library.library")
+        });
+        tabs.addTab({
+            id: "red-ui-clipboard-dialog-import-tab-examples",
+            label: RED._("library.types.examples")
+        });
+
+        tabs.activateTab("red-ui-clipboard-dialog-import-tab-"+mode);
+        if (mode === 'clipboard') {
+            setTimeout(function() {
+                $("#red-ui-clipboard-dialog-import-text").trigger("focus");
+            },100)
+        }
+
+
+        $("#red-ui-clipboard-dialog-tab-library-name").on("keyup", validateExportFilename);
+        $("#red-ui-clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)});
+        $("#red-ui-clipboard-dialog-export").button("enable");
+
+        libraryBrowser = RED.library.createBrowser({
+            container: $("#red-ui-clipboard-dialog-import-tab-library"),
+            onselect: function(file) {
+                if (file && file.label && !file.children) {
+                    $("#red-ui-clipboard-dialog-ok").button("enable");
+                } else {
+                    $("#red-ui-clipboard-dialog-ok").button("disable");
+                }
+            },
+            onconfirm: function(item) {
+                if (item && item.label && !item.children) {
+                    $("#red-ui-clipboard-dialog-ok").trigger("click");
+                }
+            }
+        })
+        loadFlowLibrary(libraryBrowser,"local",RED._("library.types.local"));
+
+        examplesBrowser = RED.library.createBrowser({
+            container: $("#red-ui-clipboard-dialog-import-tab-examples"),
+            onselect: function(file) {
+                if (file && file.label && !file.children) {
+                    $("#red-ui-clipboard-dialog-ok").button("enable");
+                } else {
+                    $("#red-ui-clipboard-dialog-ok").button("disable");
+                }
+            },
+            onconfirm: function(item) {
+                if (item && item.label && !item.children) {
+                    $("#red-ui-clipboard-dialog-ok").trigger("click");
+                }
+            }
+        })
+        loadFlowLibrary(examplesBrowser,"_examples_",RED._("library.types.examples"));
+
+
         dialogContainer.i18n();
 
-        $("#clipboard-dialog-ok").show();
-        $("#clipboard-dialog-cancel").show();
-        $("#clipboard-dialog-close").hide();
-        $("#clipboard-dialog-copy").hide();
-        $("#clipboard-dialog-download").hide();
-        $("#clipboard-dialog-ok").button("disable");
-        $("#clipboard-import").keyup(validateImport);
-        $("#clipboard-import").on('paste',function() { setTimeout(validateImport,10)});
+        $("#red-ui-clipboard-dialog-ok").show();
+        $("#red-ui-clipboard-dialog-cancel").show();
+        $("#red-ui-clipboard-dialog-export").hide();
+        $("#red-ui-clipboard-dialog-download").hide();
+        $("#red-ui-clipboard-dialog-ok").button("disable");
+        $("#red-ui-clipboard-dialog-import-text").on("keyup", validateImport);
+        $("#red-ui-clipboard-dialog-import-text").on('paste',function() { setTimeout(validateImport,10)});
 
-        $("#import-tab > a").click(function(evt) {
+        $("#red-ui-clipboard-dialog-import-opt > a").on("click", function(evt) {
             evt.preventDefault();
             if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
                 return;
@@ -255,66 +462,116 @@ RED.clipboard = (function() {
             $(this).addClass('selected');
         });
 
-        $("#import-file-upload").change(function() {
+        $("#red-ui-clipboard-dialog-import-file-upload").on("change", function() {
             var fileReader = new FileReader();
             fileReader.onload = function () {
-                $("#clipboard-import").val(fileReader.result);
+                $("#red-ui-clipboard-dialog-import-text").val(fileReader.result);
                 validateImport();
             };
             fileReader.readAsText($(this).prop('files')[0]);
         })
-        $("#import-file-upload-btn").click(function(evt) {
+        $("#red-ui-clipboard-dialog-import-file-upload-btn").on("click", function(evt) {
             evt.preventDefault();
-            $("#import-file-upload").click();
+            $("#red-ui-clipboard-dialog-import-file-upload").trigger("click");
         })
 
         dialog.dialog("option","title",RED._("clipboard.importNodes")).dialog("open");
         popover = RED.popover.create({
-            target: $("#clipboard-import"),
+            target: $("#red-ui-clipboard-dialog-import-text"),
             trigger: "manual",
             direction: "bottom",
             content: ""
         });
     }
 
-    function exportNodes() {
+    function exportNodes(mode) {
         if (disabled) {
             return;
         }
 
+        mode = mode || "clipboard";
+
         dialogContainer.empty();
         dialogContainer.append($(exportNodesDialog));
-        dialogContainer.i18n();
-        var format = RED.settings.flowFilePretty ? "export-format-full" : "export-format-mini";
 
-        $("#export-format-group > a").click(function(evt) {
+        var tabs = RED.tabs.create({
+            id: "red-ui-clipboard-dialog-export-tabs",
+            vertical: true,
+            onchange: function(tab) {
+                $("#red-ui-clipboard-dialog-export-tabs-content").children().hide();
+                $("#" + tab.id).show();
+                activeTab = tab.id;
+                if (tab.id === "red-ui-clipboard-dialog-export-tab-clipboard") {
+                    $("#red-ui-clipboard-dialog-export").button("option","label", RED._("clipboard.export.copy"))
+                    $("#red-ui-clipboard-dialog-download").show();
+                } else {
+                    $("#red-ui-clipboard-dialog-export").button("option","label", RED._("clipboard.export.export"))
+                    $("#red-ui-clipboard-dialog-download").hide();
+                    libraryBrowser.focus();
+                }
+
+            }
+        });
+        tabs.addTab({
+            id: "red-ui-clipboard-dialog-export-tab-clipboard",
+            label: RED._("clipboard.clipboard")
+        });
+        tabs.addTab({
+            id: "red-ui-clipboard-dialog-export-tab-library",
+            label: RED._("library.library")
+        });
+
+        tabs.activateTab("red-ui-clipboard-dialog-export-tab-"+mode);
+
+        $("#red-ui-clipboard-dialog-tab-library-name").on("keyup", validateExportFilename);
+        $("#red-ui-clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)});
+        $("#red-ui-clipboard-dialog-export").button("enable");
+
+        libraryBrowser = RED.library.createBrowser({
+            container: $("#red-ui-clipboard-dialog-export-tab-library-browser"),
+            folderTools: true,
+            onselect: function(file) {
+                if (file && file.label && !file.children) {
+                    $("#red-ui-clipboard-dialog-tab-library-name").val(file.label);
+                }
+            }
+        })
+        loadFlowLibrary(libraryBrowser,"local",RED._("library.types.local"));
+
+        $("#red-ui-clipboard-dialog-tab-library-name").val("flows.json").select();
+
+        dialogContainer.i18n();
+        var format = RED.settings.flowFilePretty ? "red-ui-clipboard-dialog-export-fmt-full" : "red-ui-clipboard-dialog-export-fmt-mini";
+
+        $("#red-ui-clipboard-dialog-export-fmt-group > a").on("click", function(evt) {
             evt.preventDefault();
             if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
-                $("#clipboard-export").focus();
+                $("#red-ui-clipboard-dialog-export-text").trigger("focus");
                 return;
             }
             $(this).parent().children().removeClass('selected');
             $(this).addClass('selected');
 
-            var flow = $("#clipboard-export").val();
+            var flow = $("#red-ui-clipboard-dialog-export-text").val();
             if (flow.length > 0) {
                 var nodes = JSON.parse(flow);
 
                 format = $(this).attr('id');
-                if (format === 'export-format-full') {
+                if (format === 'red-ui-clipboard-dialog-export-fmt-full') {
                     flow = JSON.stringify(nodes,null,4);
                 } else {
                     flow = JSON.stringify(nodes);
                 }
-                $("#clipboard-export").val(flow);
-                $("#clipboard-export").focus();
+                $("#red-ui-clipboard-dialog-export-text").val(flow);
+                setTimeout(function() { $("#red-ui-clipboard-dialog-export-text").scrollTop(0); },50);
+
+                $("#red-ui-clipboard-dialog-export-text").trigger("focus");
             }
         });
 
-        $("#export-range-group > a").click(function(evt) {
+        $("#red-ui-clipboard-dialog-export-rng-group > a").on("click", function(evt) {
             evt.preventDefault();
             if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
-                $("#clipboard-export").focus();
                 return;
             }
             $(this).parent().children().removeClass('selected');
@@ -322,7 +579,7 @@ RED.clipboard = (function() {
             var type = $(this).attr('id');
             var flow = "";
             var nodes = null;
-            if (type === 'export-range-selected') {
+            if (type === 'red-ui-clipboard-dialog-export-rng-selected') {
                 var selection = RED.workspaces.selection();
                 if (selection.length > 0) {
                     nodes = [];
@@ -335,77 +592,95 @@ RED.clipboard = (function() {
                 }
                 // Don't include the subflow meta-port nodes in the exported selection
                 nodes = RED.nodes.createExportableNodeSet(nodes.filter(function(n) { return n.type !== 'subflow'}));
-            } else if (type === 'export-range-flow') {
+            } else if (type === 'red-ui-clipboard-dialog-export-rng-flow') {
                 var activeWorkspace = RED.workspaces.active();
                 nodes = RED.nodes.filterNodes({z:activeWorkspace});
                 var parentNode = RED.nodes.workspace(activeWorkspace)||RED.nodes.subflow(activeWorkspace);
                 nodes.unshift(parentNode);
                 nodes = RED.nodes.createExportableNodeSet(nodes);
-            } else if (type === 'export-range-full') {
+            } else if (type === 'red-ui-clipboard-dialog-export-rng-full') {
                 nodes = RED.nodes.createCompleteNodeSet(false);
             }
             if (nodes !== null) {
-                if (format === "export-format-full") {
+                if (format === "red-ui-clipboard-dialog-export-fmt-full") {
                     flow = JSON.stringify(nodes,null,4);
                 } else {
                     flow = JSON.stringify(nodes);
                 }
             }
             if (flow.length > 0) {
-                $("#export-copy").removeClass('disabled');
+                $("#red-ui-clipboard-dialog-export").removeClass('disabled');
             } else {
-                $("#export-copy").addClass('disabled');
+                $("#red-ui-clipboard-dialog-export").addClass('disabled');
             }
-            $("#clipboard-export").val(flow);
-            $("#clipboard-export").focus();
+            $("#red-ui-clipboard-dialog-export-text").val(flow);
+            setTimeout(function() { $("#red-ui-clipboard-dialog-export-text").scrollTop(0); },50);
+            $("#red-ui-clipboard-dialog-export-text").trigger("focus");
         })
 
-        $("#clipboard-dialog-ok").hide();
-        $("#clipboard-dialog-cancel").hide();
-        $("#clipboard-dialog-copy").hide();
-        $("#clipboard-dialog-close").hide();
+        $("#red-ui-clipboard-dialog-ok").hide();
+        $("#red-ui-clipboard-dialog-cancel").hide();
+        $("#red-ui-clipboard-dialog-export").hide();
         var selection = RED.workspaces.selection();
         if (selection.length > 0) {
-            $("#export-range-selected").click();
+            $("#red-ui-clipboard-dialog-export-rng-selected").trigger("click");
         } else {
             selection = RED.view.selection();
             if (selection.nodes) {
-                $("#export-range-selected").click();
+                $("#red-ui-clipboard-dialog-export-rng-selected").trigger("click");
             } else {
-                $("#export-range-selected").addClass('disabled').removeClass('selected');
-                $("#export-range-flow").click();
+                $("#red-ui-clipboard-dialog-export-rng-selected").addClass('disabled').removeClass('selected');
+                $("#red-ui-clipboard-dialog-export-rng-flow").trigger("click");
             }
         }
-        if (format === "export-format-full") {
-            $("#export-format-full").click();
+        if (format === "red-ui-clipboard-dialog-export-fmt-full") {
+            $("#red-ui-clipboard-dialog-export-fmt-full").trigger("click");
         } else {
-            $("#export-format-mini").click();
+            $("#red-ui-clipboard-dialog-export-fmt-mini").trigger("click");
         }
-        $("#clipboard-export")
-            .focus(function() {
-                var textarea = $(this);
-                textarea.select();
-                textarea.mouseup(function() {
-                    textarea.unbind("mouseup");
-                    return false;
-                })
-            });
         dialog.dialog("option","title",RED._("clipboard.exportNodes")).dialog( "open" );
 
-        $("#clipboard-export").focus();
-        if (!document.queryCommandSupported("copy")) {
-            $("#clipboard-dialog-cancel").hide();
-            $("#clipboard-dialog-close").show();
-        } else {
-            $("#clipboard-dialog-cancel").show();
-            $("#clipboard-dialog-copy").show();
-        }
-        $("#clipboard-dialog-download").show();
+        $("#red-ui-clipboard-dialog-export-text").trigger("focus");
+        $("#red-ui-clipboard-dialog-cancel").show();
+        $("#red-ui-clipboard-dialog-export").show();
+        $("#red-ui-clipboard-dialog-download").show();
 
     }
 
+    function loadFlowLibrary(browser,library,label) {
+        // if (includeExamples) {
+        //     listing.push({
+        //         library: "_examples_",
+        //         type: "flows",
+        //         icon: 'fa fa-hdd-o',
+        //         label: RED._("library.types.examples"),
+        //         path: "",
+        //         children: function(item,done) {
+        //             RED.library.loadLibraryFolder("_examples_","flows","",function(children) {
+        //                 item.children = children;
+        //                 done(children);
+        //             })
+        //         }
+        //     })
+        // }
+        browser.data([{
+            library: library,
+            type: "flows",
+            icon: 'fa fa-hdd-o',
+            label: label,
+            path: "",
+            expanded: true,
+            children: function(item,done) {
+                RED.library.loadLibraryFolder(library,"flows","",function(children) {
+                    item.children = children;
+                    done(children);
+                })
+            }
+        }]);
+    }
+
     function hideDropTarget() {
-        $("#dropTarget").hide();
+        $("#red-ui-drop-target").hide();
         RED.keyboard.remove("escape");
     }
     function copyText(value,element,msg) {
@@ -435,7 +710,7 @@ RED.clipboard = (function() {
         if (truncated) {
             msg += "_truncated";
         }
-        $("#clipboard-hidden").val(value).select();
+        $("#red-ui-clipboard-hidden").val(value).select();
         var result =  document.execCommand("copy");
         if (result && element) {
             var popover = RED.popover.create({
@@ -455,11 +730,12 @@ RED.clipboard = (function() {
         init: function() {
             setupDialogs();
 
-            $('<input type="text" id="clipboard-hidden">').appendTo("body");
+            $('<input type="text" id="red-ui-clipboard-hidden">').appendTo("#red-ui-editor");
 
             RED.actions.add("core:show-export-dialog",exportNodes);
             RED.actions.add("core:show-import-dialog",importNodes);
 
+            RED.actions.add("core:library-export",function() { exportNodes('library') });
 
             RED.events.on("editor:open",function() { disabled = true; });
             RED.events.on("editor:close",function() { disabled = false; });
@@ -468,16 +744,17 @@ RED.clipboard = (function() {
             RED.events.on("type-search:open",function() { disabled = true; });
             RED.events.on("type-search:close",function() { disabled = false; });
 
+            $('<div id="red-ui-drop-target"><div data-i18n="[append]workspace.dropFlowHere"><i class="fa fa-download"></i><br></div></div>').appendTo('#red-ui-editor');
 
-            $('#chart').on("dragenter",function(event) {
+            $('#red-ui-workspace-chart').on("dragenter",function(event) {
                 if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
                      $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
-                    $("#dropTarget").css({display:'table'});
+                    $("#red-ui-drop-target").css({display:'table'});
                     RED.keyboard.add("*", "escape" ,hideDropTarget);
                 }
             });
 
-            $('#dropTarget').on("dragover",function(event) {
+            $('#red-ui-drop-target').on("dragover",function(event) {
                 if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
                      $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
                     event.preventDefault();

packages/node_modules/@node-red/editor-client/src/js/ui/common/checkboxSet.js

@@ -38,7 +38,7 @@
                 this.options[0].show();
             }
 
-            this.element.change(function() {
+            this.element.on("change", function() {
                 if (this.checked) {
                     that.options[0].hide();
                     that.options[1].show();
@@ -53,7 +53,7 @@
                     child.checkboxSet('state',isChecked,false,true);
                 })
             })
-            this.uiElement.click(function(e) {
+            this.uiElement.on("click", function(e) {
                 e.stopPropagation();
                 // state returns null for a partial state. Clicking on that should
                 // result in false.

packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js

@@ -75,9 +75,9 @@
                         addLabel = 'add';
                     }
                 }
-                $('<a href="#" class="editor-button editor-button-small red-ui-editableList-addButton" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
+                $('<a href="#" class="red-ui-button red-ui-button-small red-ui-editableList-addButton" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>')
                     .appendTo(this.topContainer)
-                    .click(function(evt) {
+                    .on("click", function(evt) {
                         evt.preventDefault();
                         that.addItem({});
                     });
@@ -257,10 +257,10 @@
                 li.addClass("red-ui-editableList-item-sortable");
             }
             if (this.options.removable) {
-                var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(li);
+                var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(li);
                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
                 li.addClass("red-ui-editableList-item-removable");
-                deleteButton.click(function(evt) {
+                deleteButton.on("click", function(evt) {
                     evt.preventDefault();
                     var data = row.data('data');
                     li.addClass("red-ui-editableList-item-deleting")

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("menu-group-"+opt.group);
+                item.addClass("red-ui-menu-group-"+opt.group);
 
             }
             var linkContent = '<a '+(opt.id?'id="'+opt.id+'" ':'')+'tabindex="-1" href="#">';
@@ -79,10 +79,10 @@ RED.menu = (function() {
             }
 
             if (opt.sublabel) {
-                linkContent += '<span class="menu-label-container"><span class="menu-label">'+opt.label+'</span>'+
-                               '<span class="menu-sublabel">'+opt.sublabel+'</span></span>'
+                linkContent += '<span class="red-ui-menu-label-container"><span class="red-ui-menu-label">'+opt.label+'</span>'+
+                               '<span class="red-ui-menu-sublabel">'+opt.sublabel+'</span></span>'
             } else {
-                linkContent += '<span class="menu-label">'+opt.label+'</span>'
+                linkContent += '<span class="red-ui-menu-label">'+opt.label+'</span>'
             }
 
             linkContent += '</a>';
@@ -92,7 +92,7 @@ RED.menu = (function() {
             menuItems[opt.id] = opt;
 
             if (opt.onselect) {
-                link.click(function(e) {
+                link.on("click", function(e) {
                     e.preventDefault();
                     if ($(this).parent().hasClass("disabled")) {
                         return;
@@ -125,13 +125,13 @@ RED.menu = (function() {
                 link.attr("target","_blank").attr("href",opt.href);
             } else if (!opt.options) {
                 item.addClass("disabled");
-                link.click(function(event) {
+                link.on("click", function(event) {
                     event.preventDefault();
                 });
             }
             if (opt.options) {
-                item.addClass("dropdown-submenu pull-left");
-                var submenu = $('<ul id="'+opt.id+'-submenu" class="dropdown-menu"></ul>').appendTo(item);
+                item.addClass("red-ui-menu-dropdown-submenu pull-left");
+                var submenu = $('<ul id="'+opt.id+'-submenu" class="red-ui-menu-dropdown"></ul>').appendTo(item);
 
                 for (var i=0;i<opt.options.length;i++) {
                     var li = createMenuItem(opt.options[i]);
@@ -150,13 +150,29 @@ RED.menu = (function() {
 
     }
     function createMenu(options) {
-        var topMenu = $("<ul/>",{class:"dropdown-menu pull-right"});
+        var topMenu = $("<ul/>",{class:"red-ui-menu red-ui-menu-dropdown pull-right"});
 
         if (options.id) {
             topMenu.attr({id:options.id+"-submenu"});
             var menuParent = $("#"+options.id);
             if (menuParent.length === 1) {
                 topMenu.insertAfter(menuParent);
+                menuParent.on("click", function(evt) {
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    if (topMenu.is(":visible")) {
+                        $(document).off("click.red-ui-menu");
+                        topMenu.hide();
+                    } else {
+                        $(document).on("click.red-ui-menu", function(evt) {
+                            $(document).off("click.red-ui-menu");
+                            activeMenu = null;
+                            topMenu.hide();
+                        });
+                        $(".red-ui-menu").hide();
+                        topMenu.show();
+                    }
+                })
             }
         }
 
@@ -223,13 +239,13 @@ RED.menu = (function() {
     function addItem(id,opt) {
         var item = createMenuItem(opt);
         if (opt.group) {
-            var groupItems = $("#"+id+"-submenu").children(".menu-group-"+opt.group);
+            var groupItems = $("#"+id+"-submenu").children(".red-ui-menu-group-"+opt.group);
             if (groupItems.length === 0) {
                 item.appendTo("#"+id+"-submenu");
             } else {
                 for (var i=0;i<groupItems.length;i++) {
                     var groupItem = groupItems[i];
-                    var label = $(groupItem).find(".menu-label").html();
+                    var label = $(groupItem).find(".red-ui-menu-label").html();
                     if (opt.label < label) {
                         $(groupItem).before(item);
                         break;
@@ -263,6 +279,5 @@ RED.menu = (function() {
         addItem: addItem,
         removeItem: removeItem,
         setAction: setAction
-        //TODO: add an api for replacing a submenu - see library.js:loadFlowLibrary
     }
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js

@@ -21,6 +21,7 @@ RED.panels = (function() {
         var container = options.container || $("#"+options.id);
         var children = container.children();
         if (children.length !== 2) {
+            console.log(options.id);
             throw new Error("Container must have exactly two children");
         }
         var vertical = (!options.dir || options.dir === "vertical");
@@ -86,10 +87,10 @@ RED.panels = (function() {
             resize: function(size) {
                 var panelSizes;
                 if (vertical) {
-                    panelSizes = [$(children[0]).height(),$(children[1]).height()];
+                    panelSizes = [$(children[0]).outerHeight(),$(children[1]).outerHeight()];
                     container.height(size);
                 } else {
-                    panelSizes = [$(children[0]).width(),$(children[1]).width()];
+                    panelSizes = [$(children[0]).outerWidth(),$(children[1]).outerWidth()];
                     container.width(size);
                 }
                 if (modifiedSizes) {
@@ -105,6 +106,11 @@ RED.panels = (function() {
                     }
                 }
                 if (options.resize) {
+                    if (vertical) {
+                        panelSizes = [$(children[0]).height(),$(children[1]).height()];
+                    } else {
+                        panelSizes = [$(children[0]).width(),$(children[1]).width()];
+                    }
                     options.resize(panelSizes[0],panelSizes[1]);
                 }
             }

packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js

@@ -131,7 +131,7 @@ RED.popover = (function() {
             }
         }
         var closePopup = function(instant) {
-            $(document).off('mousedown.modal-popover-close');
+            $(document).off('mousedown.red-ui-popover');
             if (!active) {
                 if (div) {
                     if (instant) {
@@ -162,7 +162,7 @@ RED.popover = (function() {
                 }
             });
         } else if (trigger === 'click') {
-            target.click(function(e) {
+            target.on("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
                 active = !active;
@@ -185,7 +185,7 @@ RED.popover = (function() {
             }
 
         } else if (trigger === 'modal') {
-            $(document).on('mousedown.modal-popover-close', function (event) {
+            $(document).on('mousedown.red-ui-popover', function (event) {
                 var target = event.target;
                 while (target.nodeName !== 'BODY' && target !== div[0]) {
                     target = target.parentElement;

packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js

@@ -35,6 +35,7 @@
             this.currentTimeout = null;
             this.lastSent = "";
             this.element.val("");
+            this.element.addClass("red-ui-searchBox-input");
             this.uiContainer = this.element.wrap("<div>").parent();
             this.uiContainer.addClass("red-ui-searchBox-container");
 
@@ -44,7 +45,7 @@
                 e.preventDefault();
                 that.element.val("");
                 that._change("",true);
-                that.element.focus();
+                that.element.trigger("focus");
             });
 
             this.resultCount = $('<span>',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer);
@@ -60,7 +61,7 @@
             });
 
             this.element.on("focus",function() {
-                $("body").one("mousedown",function() {
+                $(document).one("mousedown",function() {
                     that.element.blur();
                 });
             });

packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js

@@ -39,17 +39,17 @@ RED.stack = (function() {
             }
         }
         if (options.fill && options.singleExpanded) {
-            $(window).resize(resizeStack);
-            $(window).focus(resizeStack);
+            $(window).on("resize", resizeStack);
+            $(window).on("focus", resizeStack);
         }
         return {
             add: function(entry) {
                 entries.push(entry);
-                entry.container = $('<div class="palette-category">').appendTo(container);
+                entry.container = $('<div class="red-ui-palette-category">').appendTo(container);
                 if (!visible) {
                     entry.container.hide();
                 }
-                var header = $('<div class="palette-header"></div>').appendTo(entry.container);
+                var header = $('<div class="red-ui-palette-header"></div>').appendTo(entry.container);
                 entry.header = header;
                 entry.contentWrap = $('<div></div>',{style:"position:relative"}).appendTo(entry.container);
                 if (options.fill) {
@@ -57,7 +57,7 @@ RED.stack = (function() {
                 }
                 entry.content = $('<div></div>').appendTo(entry.contentWrap);
                 if (entry.collapsible !== false) {
-                    header.click(function() {
+                    header.on("click", function() {
                         if (options.singleExpanded) {
                             if (!entry.isExpanded()) {
                                 for (var i=0;i<entries.length;i++) {
@@ -82,7 +82,7 @@ RED.stack = (function() {
                     var icon = $('<i class="fa fa-angle-down"></i>').appendTo(header);
 
                     if (entry.expanded) {
-                        entry.container.addClass("palette-category-expanded");
+                        entry.container.addClass("expanded");
                         icon.addClass("expanded");
                     } else {
                         entry.contentWrap.hide();
@@ -118,7 +118,7 @@ RED.stack = (function() {
                         }
 
                         icon.addClass("expanded");
-                        entry.container.addClass("palette-category-expanded");
+                        entry.container.addClass("expanded");
                         entry.contentWrap.slideDown(200);
                         return true;
                     }
@@ -126,13 +126,13 @@ RED.stack = (function() {
                 entry.collapse = function() {
                     if (entry.isExpanded()) {
                         icon.removeClass("expanded");
-                        entry.container.removeClass("palette-category-expanded");
+                        entry.container.removeClass("expanded");
                         entry.contentWrap.slideUp(200);
                         return true;
                     }
                 };
                 entry.isExpanded = function() {
-                    return entry.container.hasClass("palette-category-expanded");
+                    return entry.container.hasClass("expanded");
                 };
                 if (options.fill && options.singleExpanded) {
                     resizeStack();

packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

@@ -37,7 +37,7 @@ RED.tabs = (function() {
         if (options.addButton) {
             wrapper.addClass("red-ui-tabs-add");
             var addButton = $('<div class="red-ui-tab-button red-ui-tabs-add"><a href="#"><i class="fa fa-plus"></i></a></div>').appendTo(wrapper);
-            addButton.find('a').click(function(evt) {
+            addButton.find('a').on("click", function(evt) {
                 evt.preventDefault();
                 if (typeof options.addButton === 'function') {
                     options.addButton();
@@ -73,7 +73,7 @@ RED.tabs = (function() {
         if (options.searchButton) {
             wrapper.addClass("red-ui-tabs-search");
             var searchButton = $('<div class="red-ui-tab-button red-ui-tabs-search"><a href="#"><i class="fa fa-list-ul"></i></a></div>').appendTo(wrapper);
-            searchButton.find('a').click(function(evt) {
+            searchButton.find('a').on("click", function(evt) {
                 evt.preventDefault();
                 if (typeof options.searchButton === 'function') {
                     options.searchButton()
@@ -96,7 +96,7 @@ RED.tabs = (function() {
         if (options.scrollable) {
             wrapper.addClass("red-ui-tabs-scrollable");
             scrollContainer.addClass("red-ui-tabs-scroll-container");
-            scrollContainer.scroll(updateScroll);
+            scrollContainer.on("scroll",updateScroll);
             scrollLeft = $('<div class="red-ui-tab-button red-ui-tab-scroll red-ui-tab-scroll-left"><a href="#" style="display:none;"><i class="fa fa-caret-left"></i></a></div>').appendTo(wrapper).find("a");
             scrollLeft.on('mousedown',function(evt) { scrollEventHandler(evt,'-=150') }).on('click',function(evt){ evt.preventDefault();});
             scrollRight = $('<div class="red-ui-tab-button red-ui-tab-scroll red-ui-tab-scroll-right"><a href="#" style="display:none;"><i class="fa fa-caret-right"></i></a></div>').appendTo(wrapper).find("a");
@@ -113,7 +113,7 @@ RED.tabs = (function() {
             if (options.menu !== false) {
                 var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow);
                 selectButton.addClass("red-ui-tab-link-button-menu")
-                selectButton.click(function(evt) {
+                selectButton.on("click", function(evt) {
                     evt.stopPropagation();
                     evt.preventDefault();
                     if (!collapsibleMenu) {
@@ -136,7 +136,7 @@ RED.tabs = (function() {
                             }
                         });
                         options = pinnedOptions.concat(options);
-                        collapsibleMenu = RED.menu.init({id:"debug-message-option-menu",options: options});
+                        collapsibleMenu = RED.menu.init({options: options});
                         collapsibleMenu.css({
                             position: "absolute"
                         })
@@ -148,10 +148,11 @@ RED.tabs = (function() {
                         left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
                     })
                     if (collapsibleMenu.is(":visible")) {
-                        $(document).off("click.tabmenu");
+                        $(document).off("click.red-ui-tabmenu");
                     } else {
-                        $(document).on("click.tabmenu", function(evt) {
-                            $(document).off("click.tabmenu");
+                        $(".red-ui-menu").hide();
+                        $(document).on("click.red-ui-tabmenu", function(evt) {
+                            $(document).off("click.red-ui-tabmenu");
                             collapsibleMenu.hide();
                         });
                     }
@@ -348,7 +349,7 @@ RED.tabs = (function() {
             }
             var tabs = ul.find("li.red-ui-tab");
             var width = wrapper.width();
-            var tabCount = tabs.size();
+            var tabCount = tabs.length;
             var tabWidth;
 
             if (options.collapsible) {
@@ -434,7 +435,7 @@ RED.tabs = (function() {
             var li = ul.find("a[href='#"+id+"']").parent();
             if (li.hasClass("active")) {
                 var tab = li.prev();
-                if (tab.size() === 0) {
+                if (tab.length === 0) {
                     tab = li.next();
                 }
                 activateTab(tab.find("a"));
@@ -448,7 +449,10 @@ RED.tabs = (function() {
             }
             delete tabs[id];
             updateTabWidths();
-            collapsibleMenu = null;
+            if (collapsibleMenu) {
+                collapsibleMenu.remove();
+                collapsibleMenu = null;
+            }
         }
 
         return {
@@ -484,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");
@@ -509,7 +513,7 @@ RED.tabs = (function() {
                     } else {
                         $('<i>',{class:defaultTabIcon}).appendTo(pinnedLink);
                     }
-                    pinnedLink.click(function(evt) {
+                    pinnedLink.on("click", function(evt) {
                         evt.preventDefault();
                         activateTab(tab.id);
                     });
@@ -543,7 +547,7 @@ RED.tabs = (function() {
                     options.onadd(tab);
                 }
                 link.attr("title",tab.label);
-                if (ul.find("li.red-ui-tab").size() == 1) {
+                if (ul.find("li.red-ui-tab").length == 1) {
                     activateTab(link);
                 }
                 if (options.onreorder) {
@@ -626,7 +630,10 @@ RED.tabs = (function() {
                 setTimeout(function() {
                     updateTabWidths();
                 },10);
-                collapsibleMenu = null;
+                if (collapsibleMenu) {
+                    collapsibleMenu.remove();
+                    collapsibleMenu = null;
+                }
             },
             removeTab: removeTab,
             activateTab: activateTab,
@@ -634,7 +641,7 @@ RED.tabs = (function() {
             previousTab: activatePreviousTab,
             resize: updateTabWidths,
             count: function() {
-                return ul.find("li.red-ui-tab").size();
+                return ul.find("li.red-ui-tab").length;
             },
             contains: function(id) {
                 return ul.find("a[href='#"+id+"']").length > 0;
@@ -643,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,

packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+(function($) {
+
+/**
+ * options:
+ *   - invertState   : boolean - if "true" the button will show "enabled" when the
+ *                             checkbox is not selected and vice versa.
+ *   - enabledIcon   : string - the icon for "enabled" state, default "fa-check-square-o"
+ *   - enabledLabel  : string - the label for "enabled" state, default "Enabled" ("editor:workspace.enabled")
+ *   - disabledIcon  : string - the icon for "disabled" state, default "fa-square-o"
+ *   - disabledLabel : string - the label for "disabled" state, default "Disabled" ("editor:workspace.disabled")
+ *   - baseClass     : string - the base css class to apply, default "red-ui-button" (alternative eg "red-ui-sidebar-header-button")
+ *   - class         : string - additional classes to apply to the button - eg "red-ui-button-small"
+ * methods:
+ *   -
+ */
+    $.widget( "nodered.toggleButton", {
+        _create: function() {
+            var that = this;
+
+            var invertState = false;
+            if (this.options.hasOwnProperty("invertState")) {
+                invertState = this.options.invertState;
+            }
+            var baseClass = this.options.baseClass || "red-ui-button";
+            var enabledIcon = this.options.enabledIcon || "fa-check-square-o";
+            var disabledIcon = this.options.disabledIcon || "fa-square-o";
+            var enabledLabel = this.options.enabledLabel || RED._("editor:workspace.enabled");
+            var disabledLabel = this.options.disabledLabel || RED._("editor:workspace.disabled");
+
+            this.element.addClass("red-ui-toggleButton");
+            this.element.css("display","none");
+            this.element.on("focus", function() {
+                that.button.focus();
+            });
+            this.button = $('<button type="button" class="'+baseClass+' toggle single"><i class="fa"></i> <span></span></button>');
+            if (this.options.class) {
+                this.button.addClass(this.options.class)
+            }
+            this.element.after(this.button);
+            this.buttonIcon = this.button.find("i");
+            this.buttonLabel = this.button.find("span");
+
+            // Quick hack to find the maximum width of the button
+            this.button.addClass("selected");
+            this.buttonIcon.addClass(enabledIcon);
+            this.buttonLabel.text(enabledLabel);
+            var width = this.button.width();
+            this.button.removeClass("selected");
+            this.buttonIcon.removeClass(enabledIcon);
+            that.buttonIcon.addClass(disabledIcon);
+            that.buttonLabel.text(disabledLabel);
+            width = Math.max(width,this.button.width());
+            this.buttonIcon.removeClass(disabledIcon);
+
+            // Fix the width of the button so it doesn't jump around when toggled
+            if (width > 0) {
+                this.button.width(Math.ceil(width));
+            }
+
+            this.button.on("click",function(e) {
+                e.stopPropagation();
+                if (that.buttonIcon.hasClass(disabledIcon)) {
+                    that.element.prop("checked",!invertState);
+                } else {
+                    that.element.prop("checked",invertState);
+                }
+                that.element.trigger("change");
+            })
+
+            this.element.on("change", function(e) {
+                if ($(this).prop("checked") !== invertState) {
+                    that.button.addClass("selected");
+                    that.buttonIcon.addClass(enabledIcon);
+                    that.buttonIcon.removeClass(disabledIcon);
+                    that.buttonLabel.text(enabledLabel);
+                } else {
+                    that.button.removeClass("selected");
+                    that.buttonIcon.addClass(disabledIcon);
+                    that.buttonIcon.removeClass(enabledIcon);
+                    that.buttonLabel.text(disabledLabel);
+                }
+            })
+            this.element.trigger("change");
+        }
+    });
+})(jQuery);

packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js

@@ -18,13 +18,15 @@
 /**
  * options:
  *   - data : array - initial items to display in tree
+ *   - multi : boolean - if true, .selected will return an array of results
+ *                       otherwise, returns the first selected item
  *
  * methods:
  *   - data(items) - clears existing items and replaces with new data
  *
  * events:
  *   - treelistselect : function(event, item) {}
- *
+ *   - treelistconfirm : function(event,item) {}
  *
  * data:
  * [
@@ -32,7 +34,7 @@
  *         label: 'Local', // label for the item
  *         icon: 'fa fa-rocket', // (optional) icon for the item
  *         selected: true/false, // (optional) if present, display checkbox accordingly
- *         children: [] | function(done) // (optional) an array of child items, or a function
+ *         children: [] | function(item,done) // (optional) an array of child items, or a function
  *                                       // that will call the `done` callback with an array
  *                                       // of child items
  *     }
@@ -51,8 +53,67 @@
             var that = this;
 
             this.element.addClass('red-ui-treeList');
+            this.element.attr("tabIndex",0);
             var wrapper = $('<div>',{class:'red-ui-treeList-container'}).appendTo(this.element);
+            this.element.on('keydown', function(evt) {
+                var selected = that._topList.find(".selected").parent().data('data');
+                if (!selected && (evt.keyCode === 40 || evt.keyCode === 38)) {
+                    that.select(that._data[0]);
+                    return;
+                }
+                var target;
+                switch(evt.keyCode) {
+                    case 13: // ENTER
+                        if (selected.children) {
+                            if (selected.treeList.container.hasClass("expanded")) {
+                                selected.treeList.collapse()
+                            } else {
+                                selected.treeList.expand()
+                            }
+                        } else {
+                            that._trigger("confirm",null,selected)
+                        }
 
+                    break;
+                    case 37: // LEFT
+                        if (selected.children&& selected.treeList.container.hasClass("expanded")) {
+                            selected.treeList.collapse()
+                        } else if (selected.parent) {
+                            target = selected.parent;
+                        }
+                    break;
+                    case 38: // UP
+                        target = that._getPreviousSibling(selected);
+                        if (target) {
+                            target = that._getLastDescendant(target);
+                        }
+                        if (!target && selected.parent) {
+                            target = selected.parent;
+                        }
+                    break;
+                    case 39: // RIGHT
+                        if (selected.children) {
+                            if (!selected.treeList.container.hasClass("expanded")) {
+                                selected.treeList.expand()
+                            }
+                        }
+                    break
+                    case 40: //DOWN
+                        if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) {
+                            target = selected.children[0];
+                        } else {
+                            target = that._getNextSibling(selected);
+                            while (!target && selected.parent) {
+                                selected = selected.parent;
+                                target = that._getNextSibling(selected);
+                            }
+                        }
+                    break
+                }
+                if (target) {
+                    that.select(target);
+                }
+            });
             this._data = [];
 
             this._topList = $('<ol>').css({
@@ -66,34 +127,83 @@
                 scrollOnAdd: false,
                 height: '100%',
                 addItem: function(container,i,item) {
-                    that._addSubtree(container,item,0);
+                    that._addSubtree(that._topList,container,item,0);
                 }
-            });
+            })
             if (this.options.data) {
                 this.data(this.options.data);
             }
         },
-        _addChildren: function(container,children,depth) {
+        _getLastDescendant: function(item) {
+            // Gets the last visible descendant of the item
+            if (!item.children || !item.treeList.container.hasClass("expanded") || item.children.length === 0) {
+                return item;
+            }
+            return this._getLastDescendant(item.children[item.children.length-1]);
+        },
+        _getPreviousSibling: function(item) {
+            var candidates;
+            if (!item.parent) {
+                candidates = this._data;
+            } else {
+                candidates = item.parent.children;
+            }
+            var index = candidates.indexOf(item);
+            if (index === 0) {
+                return null;
+            } else {
+                return candidates[index-1];
+            }
+        },
+        _getNextSibling: function(item) {
+            var candidates;
+            if (!item.parent) {
+                candidates = this._data;
+            } else {
+                candidates = item.parent.children;
+            }
+            var index = candidates.indexOf(item);
+            if (index === candidates.length - 1) {
+                return null;
+            } else {
+                return candidates[index+1];
+            }
+        },
+        _addChildren: function(container,parent,children,depth) {
             var that = this;
             var subtree = $('<ol>').appendTo(container).editableList({
                 addButton: false,
                 scrollOnAdd: false,
                 height: 'auto',
                 addItem: function(container,i,item) {
-                    that._addSubtree(container,item,depth+1);
+                    that._addSubtree(subtree,container,item,depth+1);
                 }
             });
             for (var i=0;i<children.length;i++) {
+                children[i].parent = parent;
                 subtree.editableList('addItem',children[i])
             }
+            return subtree;
         },
-        _addSubtree: function(container, item, depth) {
+        _addSubtree: function(parentList, container, item, depth) {
             var that = this;
-            var labelNodeType = "<label>";
-            if (item.children && item.hasOwnProperty('selected')) {
-                labelNodeType = "<div>";
+            item.treeList = {};
+            item.treeList.container = container;
+
+            item.treeList.parentList = parentList;
+            item.treeList.remove = function() {
+                parentList.editableList('removeItem',item);
+                if (item.parent) {
+                    var index = item.parent.children.indexOf(item);
+                    item.parent.children.splice(index,1)
+                }
             }
-            var label = $(labelNodeType,{tabindex:"0",class:"red-ui-treeList-label"}).appendTo(container);
+            var labelNodeType = "<div>";
+            // if (item.children && item.hasOwnProperty('selected')) {
+            //     labelNodeType = "<div>";
+            // }
+            var label = $(labelNodeType,{class:"red-ui-treeList-label"}).appendTo(container);
+            item.treeList.label = label;
             if (item.class) {
                 label.addClass(item.class);
             }
@@ -102,59 +212,137 @@
             })
             label.on('mouseover',function(e) { that._trigger('itemmouseover',e,item); })
             label.on('mouseout',function(e) { that._trigger('itemmouseout',e,item); })
+            label.on('mouseenter',function(e) { that._trigger('itemmouseenter',e,item); })
+            label.on('mouseleave',function(e) { that._trigger('itemmouseleave',e,item); })
 
             if (item.children) {
-                $('<span class="red-ui-treeList-icon"><i class="fa fa-angle-right" /></span>').appendTo(label);
-                // $('<span class="red-ui-treeList-icon"><i class="fa fa-folder-o" /></span>').appendTo(label);
-                label.click(function(e) {
+                item.treeList.addChild = function(newItem,select) {
+                    item.treeList.childList.editableList('addItem',newItem)
+                    newItem.parent = item;
+                    item.children.push(newItem);
+                    if (select) {
+                        setTimeout(function() {
+                            that.select(newItem)
+                        },100);
+                    }
+                }
+                item.treeList.expand = function(done) {
+                    if (container.hasClass("expanded")) {
+                        done && done();
+                        return;
+                    }
                     if (!container.hasClass("built") && typeof item.children === 'function') {
                         container.addClass('built');
                         var childrenAdded = false;
                         var spinner;
-                        item.children(function(children) {
+                        var startTime = 0;
+                        item.children(item,function(children) {
                             childrenAdded = true;
-                            that._addChildren(container,children,depth);
-                            if (spinner) {
-                                spinner.remove();
+                            item.treeList.childList = that._addChildren(container,item,children,depth).hide();
+                            var delta = Date.now() - startTime;
+                            if (delta < 400) {
+                                setTimeout(function() {
+                                    item.treeList.childList.slideDown('fast');
+                                    if (spinner) {
+                                        spinner.remove();
+                                    }
+                                },400-delta);
+                            } else {
+                                item.treeList.childList.slideDown('fast');
+                                if (spinner) {
+                                    spinner.remove();
+                                }
                             }
+                            done && done();
+                            that._trigger("childrenloaded",null,item)
                         });
                         if (!childrenAdded) {
+                            startTime = Date.now();
                             spinner = $('<div class="red-ui-treeList-spinner">').css({
                                 "background-position": (35+depth*15)+'px 50%'
                             }).appendTo(container);
                         }
 
+                    } else {
+                        item.treeList.childList.slideDown('fast');
+                        done && done();
+                    }
+                    container.addClass("expanded");
+                }
+                item.treeList.collapse = function() {
+                    item.treeList.childList.slideUp('fast');
+                    container.removeClass("expanded");
+                }
+
+                $('<span class="red-ui-treeList-icon"><i class="fa fa-angle-right" /></span>').appendTo(label);
+                // $('<span class="red-ui-treeList-icon"><i class="fa fa-folder-o" /></span>').appendTo(label);
+                label.on("click", function(e) {
+                    if (container.hasClass("expanded")) {
+                        if (item.hasOwnProperty('selected') || label.hasClass("selected")) {
+                            item.treeList.collapse();
+                        }
+                    } else {
+                        item.treeList.expand();
                     }
-                    container.toggleClass("expanded");
                 })
             } else {
                 $('<span class="red-ui-treeList-icon"></span>').appendTo(label);
             }
             if (item.hasOwnProperty('selected')) {
                 var selectWrapper = $('<span class="red-ui-treeList-icon"></span>').appendTo(label);
-                var cb = $('<input type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper);
+                var cb = $('<input class="red-ui-treeList-checkbox" type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper);
+                label.toggleClass("selected",item.selected);
                 cb.on('click', function(e) {
                     e.stopPropagation();
                 });
                 cb.on('change', function(e) {
                     item.selected = this.checked;
+                    label.toggleClass("selected",this.checked);
                     that._trigger("select",e,item);
                 })
-            } else if (!item.children) {
-                label.click(function(e) {
+                if (!item.children) {
+                    label.on("click", function(e) {
+                        e.stopPropagation();
+                        cb.trigger("click");
+                    })
+                }
+                item.treeList.select = function(v) {
+                    if (v !== item.selected) {
+                        cb.trigger("click");
+                    }
+                }
+            } else {
+                label.on("click", function(e) {
+                    that._topList.find(".selected").removeClass("selected");
+                    label.addClass("selected");
                     that._trigger("select",e,item)
                 })
+                label.on("dblclick", function(e) {
+                    if (!item.children) {
+                        that._trigger("confirm",e,item);
+                    }
+                })
             }
             if (item.icon) {
                 $('<span class="red-ui-treeList-icon"><i class="'+item.icon+'" /></span>').appendTo(label);
             }
-            $('<span class="red-ui-treeList-label-text"></span>').text(item.label).appendTo(label);
+            if (item.label || item.sublabel) {
+                if (item.label) {
+                    $('<span class="red-ui-treeList-label-text"></span>').text(item.label).appendTo(label);
+                }
+                if (item.sublabel) {
+                    $('<span class="red-ui-treeList-sublabel-text"></span>').text(item.sublabel).appendTo(label);
+                }
+
+            } else if (item.element) {
+                $(item.element).appendTo(label);
+            }
             if (item.children) {
                 if (Array.isArray(item.children)) {
-                    that._addChildren(container,item.children,depth);
+                    item.treeList.childList = that._addChildren(container,item,item.children,depth).hide();
                 }
                 if (item.expanded) {
-                    label.click();
+                    item.treeList.expand();
                 }
             }
         },
@@ -168,6 +356,8 @@
                 for (var i=0; i<items.length;i++) {
                     this._topList.editableList('addItem',items[i]);
                 }
+                this._trigger("select")
+
             } else {
                 return this._data;
             }
@@ -178,6 +368,23 @@
                     this._topList.editableList('show',this._data[i]);
                 }
             }
+        },
+        select: function(item) {
+            this._topList.find(".selected").removeClass("selected");
+            item.treeList.label.addClass("selected");
+            this._trigger("select",null,item)
+
+        },
+        selected: function() {
+            var s = this._topList.find(".selected");
+            if (this.options.multi) {
+                var res = [];
+                s.each(function() {
+                    res.push($(this).parent().data('data'));
+                })
+                return res;
+            }
+            return s.parent().data('data');
         }
     });
 

packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js

@@ -109,6 +109,55 @@
             value: "env",
             label: "env variable",
             icon: "red/images/typedInput/env.png"
+        },
+        node: {
+            value: "node",
+            label: "node",
+            icon: "red/images/typedInput/target.png",
+            valueLabel: function(container,value) {
+                var node = RED.nodes.node(value);
+                var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).css({
+                    "margin-top": "2px",
+                    "margin-left": "3px"
+                }).appendTo(container);
+                var nodeLabel = $('<span>').css({
+                    "line-height": "32px",
+                    "margin-left": "6px"
+                }).appendTo(container);
+                if (node) {
+                    var colour = RED.utils.getNodeColor(node.type,node._def);
+                    var icon_url = RED.utils.getNodeIcon(node._def,node);
+                    if (node.type === 'tab') {
+                        colour = "#C0DEED";
+                    }
+                    nodeDiv.css('backgroundColor',colour);
+                    var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                    var l = RED.utils.getNodeLabel(node,node.id);
+                    nodeLabel.text(l);
+                } else {
+                    nodeDiv.css({
+                        'backgroundColor': '#eee',
+                        'border-style' : 'dashed'
+                    });
+
+                }
+            },
+            expand: function() {
+                var that = this;
+                RED.tray.hide();
+                RED.view.selectNodes({
+                    single: true,
+                    selected: [that.value()],
+                    onselect: function(selection) {
+                        that.value(selection.id);
+                        RED.tray.show();
+                    },
+                    oncancel: function() {
+                        RED.tray.show();
+                    }
+                })
+            }
         }
     };
     var nlsd = false;
@@ -124,7 +173,7 @@
                 }
                 var contextStores = RED.settings.context.stores;
                 var contextOptions = contextStores.map(function(store) {
-                    return {value:store,label: store, icon:'<i class="red-ui-typedInput-icon fa fa-database" style="color: #'+(store==='memory'?'ddd':'777')+'"></i>'}
+                    return {value:store,label: store, icon:'<i class="red-ui-typedInput-icon fa fa-database"></i>'}
                 })
                 if (contextOptions.length < 2) {
                     allOptions.flow.options = [];
@@ -138,12 +187,12 @@
             var that = this;
 
             this.disarmClick = false;
-            this.input = $('<input type="text"></input>');
+            this.input = $('<input class="red-ui-typedInput-input" type="text"></input>');
             this.input.insertAfter(this.element);
             this.input.val(this.element.val());
             this.element.addClass('red-ui-typedInput');
             this.uiWidth = this.element.outerWidth();
-            this.elementDiv = this.input.wrap("<div>").parent().addClass('red-ui-typedInput-input');
+            this.elementDiv = this.input.wrap("<div>").parent().addClass('red-ui-typedInput-input-wrap');
             this.uiSelect = this.elementDiv.wrap( "<div>" ).parent();
             var attrStyle = this.element.attr('style');
             var m;
@@ -171,8 +220,8 @@
 
             this.options.types = this.options.types||Object.keys(allOptions);
 
-            this.selectTrigger = $('<button tabindex="0"></button>').prependTo(this.uiSelect);
-            $('<i class="red-ui-typedInput-icon fa fa-sort-desc"></i>').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);
+            this.selectTrigger = $('<button class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
+            $('<i class="red-ui-typedInput-icon fa fa-caret-down"></i>').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);
 
             this.selectLabel = $('<span class="red-ui-typedInput-type-label"></span>').appendTo(this.selectTrigger);
 
@@ -199,7 +248,7 @@
                 that.element.val(that.value());
                 that.element.trigger('change',that.propertyType,that.value());
             })
-            this.selectTrigger.click(function(event) {
+            this.selectTrigger.on("click", function(event) {
                 event.preventDefault();
                 that._showTypeMenu();
             });
@@ -212,13 +261,15 @@
                 that.uiSelect.addClass('red-ui-typedInput-focus');
             })
 
+            this.valueLabelContainer = $('<div class="red-ui-typedInput-value-label">').appendTo(this.uiSelect)
+
             // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
-            this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-sort-desc"></i></span></button>').appendTo(this.uiSelect);
+            this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
             this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger);
             RED.popover.tooltip(this.optionSelectLabel,function() {
                 return that.optionValue;
             });
-            this.optionSelectTrigger.click(function(event) {
+            this.optionSelectTrigger.on("click", function(event) {
                 event.preventDefault();
                 that._showOptionSelectMenu();
             }).on('keydown', function(evt) {
@@ -241,9 +292,12 @@
         _showTypeMenu: function() {
             if (this.typeList.length > 1) {
                 this._showMenu(this.menu,this.selectTrigger);
-                this.menu.find("[value='"+this.propertyType+"']").focus();
+                var selected = this.menu.find("[value='"+this.propertyType+"']");
+                setTimeout(function() {
+                    selected.trigger("focus");
+                },120);
             } else {
-                this.input.focus();
+                this.input.trigger("focus");
             }
         },
         _showOptionSelectMenu: function() {
@@ -257,19 +311,22 @@
                 if (selectedOption.length === 0) {
                     selectedOption = this.optionMenu.children(":first");
                 }
-                selectedOption.focus();
+                selectedOption.trigger("focus");
 
             }
         },
         _hideMenu: function(menu) {
-            $(document).off("mousedown.close-property-select");
+            $(document).off("mousedown.red-ui-typedInput-close-property-select");
             menu.hide();
+            menu.css({
+                height: "auto"
+            });
             if (this.elementDiv.is(":visible")) {
-                this.input.focus();
+                this.input.trigger("focus");
             } else if (this.optionSelectTrigger.is(":visible")){
-                this.optionSelectTrigger.focus();
+                this.optionSelectTrigger.trigger("focus");
             } else {
-                this.selectTrigger.focus();
+                this.selectTrigger.trigger("focus");
             }
         },
         _createMenu: function(opts,callback) {
@@ -298,25 +355,28 @@
                     op.text(opt.value);
                 }
 
-                op.click(function(event) {
+                op.on("click", function(event) {
                     event.preventDefault();
                     callback(opt.value);
                     that._hideMenu(menu);
                 });
             });
             menu.css({
-                display: "none",
+                display: "none"
             });
             menu.appendTo(document.body);
 
             menu.on('keydown', function(evt) {
                 if (evt.keyCode === 40) {
+                    evt.preventDefault();
                     // DOWN
-                    $(this).children(":focus").next().focus();
+                    $(this).children(":focus").next().trigger("focus");
                 } else if (evt.keyCode === 38) {
+                    evt.preventDefault();
                     // UP
-                    $(this).children(":focus").prev().focus();
+                    $(this).children(":focus").prev().trigger("focus");
                 } else if (evt.keyCode === 27) {
+                    evt.preventDefault();
                     that._hideMenu(menu);
                 }
             })
@@ -339,6 +399,10 @@
             if (top+menuHeight > $(window).height()) {
                 top -= (top+menuHeight)-$(window).height()+5;
             }
+            if (top < 0) {
+                menu.height(menuHeight+top)
+                top = 0;
+            }
             menu.css({
                 top: top+"px",
                 left: (2+pos.left)+"px",
@@ -346,7 +410,7 @@
             menu.slideDown(100);
             this._delay(function() {
                 that.uiSelect.addClass('red-ui-typedInput-focus');
-                $(document).on("mousedown.close-property-select", function(event) {
+                $(document).on("mousedown.red-ui-typedInput-close-property-select", function(event) {
                     if(!$(event.target).closest(menu).length) {
                         that._hideMenu(menu);
                     }
@@ -362,8 +426,7 @@
             if (labelWidth === 0) {
                 var container = $('<div class="red-ui-typedInput-container"></div>').css({
                     position:"absolute",
-                    top:0,
-                    left:-1000
+                    top:0
                 }).appendTo(document.body);
                 var newTrigger = label.clone().appendTo(container);
                 labelWidth = newTrigger.outerWidth();
@@ -382,10 +445,13 @@
                 this.selectTrigger.removeClass("red-ui-typedInput-full-width");
                 var labelWidth = this._getLabelWidth(this.selectTrigger);
                 this.elementDiv.css('left',labelWidth+"px");
+                this.valueLabelContainer.css('left',labelWidth+"px");
                 if (this.optionExpandButton.is(":visible")) {
                     this.elementDiv.css('right',"22px");
+                    this.valueLabelContainer.css('right',"22px");
                 } else {
                     this.elementDiv.css('right','0');
+                    this.valueLabelContainer.css('right','0');
                     this.input.css({
                         'border-top-right-radius': '4px',
                         'border-bottom-right-radius': '4px'
@@ -465,7 +531,7 @@
                 return result;
             });
             this.selectTrigger.toggleClass("disabled", this.typeList.length === 1);
-            this.selectTrigger.find(".fa-sort-desc").toggle(this.typeList.length > 1)
+            this.selectTrigger.find(".fa-caret-down").toggle(this.typeList.length > 1)
             if (this.menu) {
                 this.menu.remove();
             }
@@ -508,8 +574,13 @@
                         selectedOption = {value:""}
                     }
                     this._updateOptionSelectLabel(selectedOption)
+                } else {
+                    this.input.val(value);
+                }
+                if (this.typeMap[this.propertyType].valueLabel) {
+                    this.valueLabelContainer.empty();
+                    this.typeMap[this.propertyType].valueLabel.call(this,this.valueLabelContainer,value);
                 }
-                this.input.val(value);
                 this.input.trigger('change',this.type(),value);
             }
         },
@@ -554,8 +625,10 @@
                             this.optionSelectTrigger.show();
                             if (!opt.hasValue) {
                                 this.elementDiv.hide();
+                                this.valueLabelContainer.hide();
                             } else {
                                 this.elementDiv.show();
+                                this.valueLabelContainer.hide();
                             }
                             this.activeOptions = {};
                             opt.options.forEach(function(o) {
@@ -644,11 +717,18 @@
                             this.oldValue = this.input.val();
                             this.input.val("");
                             this.elementDiv.hide();
+                            this.valueLabelContainer.hide();
+                        } else if (opt.valueLabel) {
+                            this.valueLabelContainer.show();
+                            this.valueLabelContainer.empty();
+                            opt.valueLabel.call(this,this.valueLabelContainer,this.input.val());
+                            this.elementDiv.hide();
                         } else {
                             if (this.oldValue !== undefined) {
                                 this.input.val(this.oldValue);
                                 delete this.oldValue;
                             }
+                            this.valueLabelContainer.hide();
                             this.elementDiv.show();
                         }
                         if (this.optionExpandButton) {

packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js

@@ -36,7 +36,7 @@ RED.deploy = (function() {
 
     function changeDeploymentType(type) {
         deploymentType = type;
-        $("#btn-deploy-icon").attr("src",deploymentTypes[type].img);
+        $("#red-ui-header-button-deploy-icon").attr("src",deploymentTypes[type].img);
     }
 
     /**
@@ -51,19 +51,19 @@ RED.deploy = (function() {
         var type = options.type || "default";
 
         if (type == "default") {
-            $('<li><span class="deploy-button-group button-group">'+
-              '<a id="btn-deploy" class="deploy-button disabled" href="#">'+
-                '<span class="deploy-button-content">'+
-                 '<img id="btn-deploy-icon" src="red/images/deploy-full-o.png"> '+
+            $('<li><span class="red-ui-deploy-button-group button-group">'+
+              '<a id="red-ui-header-button-deploy" class="red-ui-deploy-button disabled" href="#">'+
+                '<span class="red-ui-deploy-button-content">'+
+                 '<img id="red-ui-header-button-deploy-icon" src="red/images/deploy-full-o.png"> '+
                  '<span>'+RED._("deploy.deploy")+'</span>'+
                 '</span>'+
-                '<span class="deploy-button-spinner hide">'+
+                '<span class="red-ui-deploy-button-spinner hide">'+
                  '<img src="red/images/spin.svg"/>'+
                 '</span>'+
               '</a>'+
-              '<a id="btn-deploy-options" data-toggle="dropdown" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
-              '</span></li>').prependTo(".header-toolbar");
-              RED.menu.init({id:"btn-deploy-options",
+              '<a id="red-ui-header-button-deploy-options" class="red-ui-deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
+              '</span></li>').prependTo(".red-ui-header-toolbar");
+              RED.menu.init({id:"red-ui-header-button-deploy-options",
                   options: [
                       {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.png",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
                       {id:"deploymenu-item-flow",toggle:"deploy-type",icon:"red/images/deploy-flows.png",label:RED._("deploy.modifiedFlows"),sublabel:RED._("deploy.modifiedFlowsDesc"), onselect:function(s) {if(s){changeDeploymentType("flows")}}},
@@ -80,20 +80,20 @@ RED.deploy = (function() {
                 icon = options.icon;
             }
 
-            $('<li><span class="deploy-button-group button-group">'+
-              '<a id="btn-deploy" class="deploy-button disabled" href="#">'+
-                '<span class="deploy-button-content">'+
-                  (icon?'<img id="btn-deploy-icon" src="'+icon+'"> ':'')+
+            $('<li><span class="red-ui-deploy-button-group button-group">'+
+              '<a id="red-ui-header-button-deploy" class="red-ui-deploy-button disabled" href="#">'+
+                '<span class="red-ui-deploy-button-content">'+
+                  (icon?'<img id="red-ui-header-button-deploy-icon" src="'+icon+'"> ':'')+
                   '<span>'+label+'</span>'+
                 '</span>'+
-                '<span class="deploy-button-spinner hide">'+
+                '<span class="red-ui-deploy-button-spinner hide">'+
                  '<img src="red/images/spin.svg"/>'+
                 '</span>'+
               '</a>'+
-              '</span></li>').prependTo(".header-toolbar");
+              '</span></li>').prependTo(".red-ui-header-toolbar");
         }
 
-        $('#btn-deploy').click(function(event) {
+        $('#red-ui-header-button-deploy').on("click", function(event) {
             event.preventDefault();
             save();
         });
@@ -107,10 +107,10 @@ RED.deploy = (function() {
                 window.onbeforeunload = function() {
                     return RED._("deploy.confirm.undeployedChanges");
                 }
-                $("#btn-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled");
             } else {
                 window.onbeforeunload = null;
-                $("#btn-deploy").addClass("disabled");
+                $("#red-ui-header-button-deploy").addClass("disabled");
             }
         });
 
@@ -176,14 +176,14 @@ RED.deploy = (function() {
     function resolveConflict(currentNodes, activeDeploy) {
         var message = $('<div>');
         $('<p data-i18n="deploy.confirm.conflict"></p>').appendTo(message);
-        var conflictCheck = $('<div id="node-dialog-confirm-deploy-conflict-checking" class="node-dialog-confirm-conflict-row">'+
+        var conflictCheck = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
             '<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>'+
         '</div>').appendTo(message);
-        var conflictAutoMerge = $('<div class="node-dialog-confirm-conflict-row">'+
-            '<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
+        var conflictAutoMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
+            '<i class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
             '</div>').hide().appendTo(message);
-        var conflictManualMerge = $('<div id="node-dialog-confirm-deploy-conflict-manual-merge" class="node-dialog-confirm-conflict-row">'+
-            '<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
+        var conflictManualMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
+            '<i class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
             '</div>').hide().appendTo(message);
 
         message.i18n();
@@ -196,22 +196,22 @@ RED.deploy = (function() {
                 }
             },
             {
-                id: "node-dialog-confirm-deploy-review",
+                id: "red-ui-deploy-dialog-confirm-deploy-review",
                 text: RED._("deploy.confirm.button.review"),
                 class: "primary disabled",
                 click: function() {
-                    if (!$("#node-dialog-confirm-deploy-review").hasClass('disabled')) {
+                    if (!$("#red-ui-deploy-dialog-confirm-deploy-review").hasClass('disabled')) {
                         RED.diff.showRemoteDiff();
                         conflictNotification.close();
                     }
                 }
             },
             {
-                id: "node-dialog-confirm-deploy-merge",
+                id: "red-ui-deploy-dialog-confirm-deploy-merge",
                 text: RED._("deploy.confirm.button.merge"),
                 class: "primary disabled",
                 click: function() {
-                    if (!$("#node-dialog-confirm-deploy-merge").hasClass('disabled')) {
+                    if (!$("#red-ui-deploy-dialog-confirm-deploy-merge").hasClass('disabled')) {
                         RED.diff.mergeDiff(currentDiff);
                         conflictNotification.close();
                     }
@@ -220,7 +220,7 @@ RED.deploy = (function() {
         ];
         if (activeDeploy) {
             buttons.push({
-                id: "node-dialog-confirm-deploy-overwrite",
+                id: "red-ui-deploy-dialog-confirm-deploy-overwrite",
                 text: RED._("deploy.confirm.button.overwrite"),
                 class: "primary",
                 click: function() {
@@ -245,11 +245,11 @@ RED.deploy = (function() {
                 var d = Object.keys(diff.conflicts);
                 if (d.length === 0) {
                     conflictAutoMerge.show();
-                    $("#node-dialog-confirm-deploy-merge").removeClass('disabled')
+                    $("#red-ui-deploy-dialog-confirm-deploy-merge").removeClass('disabled')
                 } else {
                     conflictManualMerge.show();
                 }
-                $("#node-dialog-confirm-deploy-review").removeClass('disabled')
+                $("#red-ui-deploy-dialog-confirm-deploy-review").removeClass('disabled')
             },ellapsed);
         })
     }
@@ -266,15 +266,15 @@ RED.deploy = (function() {
     }
     function restart() {
         var startTime = Date.now();
-        $(".deploy-button-content").css('opacity',0);
-        $(".deploy-button-spinner").show();
-        var deployWasEnabled = !$("#btn-deploy").hasClass("disabled");
-        $("#btn-deploy").addClass("disabled");
+        $(".red-ui-deploy-button-content").css('opacity',0);
+        $(".red-ui-deploy-button-spinner").show();
+        var deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled");
+        $("#red-ui-header-button-deploy").addClass("disabled");
         deployInflight = true;
-        $("#header-shade").show();
-        $("#editor-shade").show();
-        $("#palette-shade").show();
-        $("#sidebar-shade").show();
+        $("#red-ui-header-shade").show();
+        $("#red-ui-editor-shade").show();
+        $("#red-ui-palette-shade").show();
+        $("#red-ui-sidebar-shade").show();
 
         $.ajax({
             url:"flows",
@@ -284,12 +284,12 @@ RED.deploy = (function() {
             }
         }).done(function(data,textStatus,xhr) {
             if (deployWasEnabled) {
-                $("#btn-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled");
             }
             RED.notify('<p>'+RED._("deploy.successfulRestart")+'</p>',"success");
         }).fail(function(xhr,textStatus,err) {
             if (deployWasEnabled) {
-                $("#btn-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled");
             }
             if (xhr.status === 401) {
                 RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error");
@@ -304,17 +304,17 @@ RED.deploy = (function() {
             deployInflight = false;
             var delta = Math.max(0,300-(Date.now()-startTime));
             setTimeout(function() {
-                $(".deploy-button-content").css('opacity',1);
-                $(".deploy-button-spinner").hide();
-                $("#header-shade").hide();
-                $("#editor-shade").hide();
-                $("#palette-shade").hide();
-                $("#sidebar-shade").hide();
+                $(".red-ui-deploy-button-content").css('opacity',1);
+                $(".red-ui-deploy-button-spinner").hide();
+                $("#red-ui-header-shade").hide();
+                $("#red-ui-editor-shade").hide();
+                $("#red-ui-palette-shade").hide();
+                $("#red-ui-sidebar-shade").hide();
             },delta);
         });
     }
     function save(skipValidation,force) {
-        if (!$("#btn-deploy").hasClass("disabled")) {
+        if (!$("#red-ui-header-button-deploy").hasClass("disabled")) {
             if (!RED.user.hasPermission("flows.write")) {
                 RED.notify(RED._("user.errors.deploy"),"error");
                 return;
@@ -355,13 +355,13 @@ RED.deploy = (function() {
                 if (hasUnknown && !ignoreDeployWarnings.unknown) {
                     showWarning = true;
                     notificationMessage = "<p>"+RED._('deploy.confirm.unknown')+"</p>"+
-                        '<ul class="node-dialog-configm-deploy-list"><li>'+cropList(unknownNodes).map(function(n) { return sanitize(n) }).join("</li><li>")+"</li></ul><p>"+
+                        '<ul class="red-ui-deploy-dialog-confirm-list"><li>'+cropList(unknownNodes).map(function(n) { return sanitize(n) }).join("</li><li>")+"</li></ul><p>"+
                         RED._('deploy.confirm.confirm')+
                         "</p>";
 
                     notificationButtons= [
                         {
-                            id: "node-dialog-confirm-deploy-deploy",
+                            id: "red-ui-deploy-dialog-confirm-deploy-deploy",
                             text: RED._("deploy.confirm.button.confirm"),
                             class: "primary",
                             click: function() {
@@ -375,12 +375,12 @@ RED.deploy = (function() {
                     invalidNodes.sort(sortNodeInfo);
 
                     notificationMessage = "<p>"+RED._('deploy.confirm.improperlyConfigured')+"</p>"+
-                        '<ul class="node-dialog-configm-deploy-list"><li>'+cropList(invalidNodes.map(function(A) { return sanitize( (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")")})).join("</li><li>")+"</li></ul><p>"+
+                        '<ul class="red-ui-deploy-dialog-confirm-list"><li>'+cropList(invalidNodes.map(function(A) { return sanitize( (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")")})).join("</li><li>")+"</li></ul><p>"+
                         RED._('deploy.confirm.confirm')+
                         "</p>";
                     notificationButtons= [
                         {
-                            id: "node-dialog-confirm-deploy-deploy",
+                            id: "red-ui-deploy-dialog-confirm-deploy-deploy",
                             text: RED._("deploy.confirm.button.confirm"),
                             class: "primary",
                             click: function() {
@@ -411,9 +411,9 @@ RED.deploy = (function() {
             var nns = RED.nodes.createCompleteNodeSet();
 
             var startTime = Date.now();
-            $(".deploy-button-content").css('opacity',0);
-            $(".deploy-button-spinner").show();
-            $("#btn-deploy").addClass("disabled");
+            $(".red-ui-deploy-button-content").css('opacity',0);
+            $(".red-ui-deploy-button-spinner").show();
+            $("#red-ui-header-button-deploy").addClass("disabled");
 
             var data = {flows:nns};
 
@@ -422,10 +422,10 @@ RED.deploy = (function() {
             }
 
             deployInflight = true;
-            $("#header-shade").show();
-            $("#editor-shade").show();
-            $("#palette-shade").show();
-            $("#sidebar-shade").show();
+            $("#red-ui-header-shade").show();
+            $("#red-ui-editor-shade").show();
+            $("#red-ui-palette-shade").show();
+            $("#red-ui-sidebar-shade").show();
             $.ajax({
                 url:"flows",
                 type: "POST",
@@ -476,7 +476,7 @@ RED.deploy = (function() {
                 RED.events.emit("deploy");
             }).fail(function(xhr,textStatus,err) {
                 RED.nodes.dirty(true);
-                $("#btn-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled");
                 if (xhr.status === 401) {
                     RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error");
                 } else if (xhr.status === 409) {
@@ -490,12 +490,12 @@ RED.deploy = (function() {
                 deployInflight = false;
                 var delta = Math.max(0,300-(Date.now()-startTime));
                 setTimeout(function() {
-                    $(".deploy-button-content").css('opacity',1);
-                    $(".deploy-button-spinner").hide();
-                    $("#header-shade").hide();
-                    $("#editor-shade").hide();
-                    $("#palette-shade").hide();
-                    $("#sidebar-shade").hide();
+                    $(".red-ui-deploy-button-content").css('opacity',1);
+                    $(".red-ui-deploy-button-spinner").hide();
+                    $("#red-ui-header-shade").hide();
+                    $("#red-ui-editor-shade").hide();
+                    $("#red-ui-palette-shade").hide();
+                    $("#red-ui-sidebar-shade").hide();
                 },delta);
             });
         }

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -45,6 +45,7 @@ RED.editor = (function() {
         node.valid = true;
         var subflow;
         var isValid;
+        var validationErrors;
         var hasChanged;
         if (node.type.indexOf("subflow:")===0) {
             subflow = RED.nodes.subflow(node.type.substring(8));
@@ -54,13 +55,17 @@ RED.editor = (function() {
                 isValid = validateNode(subflow);
                 hasChanged = subflow.changed;
             }
-            node.valid = isValid && validateNodeProperties(node, node._def.defaults, node);
+            validationErrors = validateNodeProperties(node, node._def.defaults, node);
+            node.valid = isValid && validationErrors.length === 0;
             node.changed = node.changed || hasChanged;
+            node.validationErrors = validationErrors;
         } else if (node._def) {
-            node.valid = validateNodeProperties(node, node._def.defaults, node);
+            validationErrors = validateNodeProperties(node, node._def.defaults, node);
             if (node._def._creds) {
-                node.valid = node.valid && validateNodeProperties(node, node._def.credentials, node._def._creds);
+                validationErrors = validationErrors.concat(validateNodeProperties(node, node._def.credentials, node._def._creds))
             }
+            node.valid = (validationErrors.length === 0);
+            node.validationErrors = validationErrors;
         } else if (node.type == "subflow") {
             var subflowNodes = RED.nodes.filterNodes({z:node.id});
             for (var i=0;i<subflowNodes.length;i++) {
@@ -103,18 +108,18 @@ RED.editor = (function() {
      * @param node - the node being validated
      * @param definition - the node property definitions (either def.defaults or def.creds)
      * @param properties - the node property values to validate
-     * @returns {boolean} whether the node's properties are valid
+     * @returns {array} an array of invalid properties
      */
     function validateNodeProperties(node, definition, properties) {
-        var isValid = true;
+        var result = [];
         for (var prop in definition) {
             if (definition.hasOwnProperty(prop)) {
                 if (!validateNodeProperty(node, definition, prop, properties[prop])) {
-                    isValid = false;
+                    result.push(prop);
                 }
             }
         }
-        return isValid;
+        return result;
     }
 
     /**
@@ -127,9 +132,11 @@ RED.editor = (function() {
      */
     function validateNodeProperty(node,definition,property,value) {
         var valid = true;
+        // Check for $(env-var) and consider it valid
         if (/^\$\([a-zA-Z_][a-zA-Z0-9_]*\)$/.test(value)) {
             return true;
         }
+        // Check for ${env-var} and consider it valid
         if (/^\$\{[a-zA-Z_][a-zA-Z0-9_]*\}$/.test(value)) {
             return true;
         }
@@ -264,10 +271,10 @@ RED.editor = (function() {
         // set the style attr directly - using width() on FF causes a value of 114%...
         select.attr('style',"width:100%");
         updateConfigNodeSelect(property,type,node[property],prefix);
-        $('<a id="'+prefix+'-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>')
+        $('<a id="'+prefix+'-lookup-'+property+'" class="red-ui-button"><i class="fa fa-pencil"></i></a>')
             .css({position:'absolute',right:0,top:0})
             .appendTo(outerWrap);
-        $('#'+prefix+'-lookup-'+property).click(function(e) {
+        $('#'+prefix+'-lookup-'+property).on("click", function(e) {
             showEditConfigNodeDialog(property,type,select.find(":selected").val(),prefix);
             e.preventDefault();
         });
@@ -292,7 +299,7 @@ RED.editor = (function() {
         input.val(node[property]);
         input.attr("type","hidden");
 
-        var button = $("<a>",{id:prefix+"-edit-"+property, class:"editor-button"});
+        var button = $("<a>",{id:prefix+"-edit-"+property, class:"red-ui-button"});
         input.after(button);
 
         if (node[property]) {
@@ -301,7 +308,7 @@ RED.editor = (function() {
             button.text(RED._("editor.configAdd"));
         }
 
-        button.click(function(e) {
+        button.on("click", function(e) {
             showEditConfigNodeDialog(property,type,input.val()||"_ADD_",prefix);
             e.preventDefault();
         });
@@ -355,7 +362,7 @@ RED.editor = (function() {
                 }
             });
         } else {
-            $("#"+prefix+"-"+property).change(function(event,skipValidation) {
+            $("#"+prefix+"-"+property).on("change", function(event,skipValidation) {
                 if (!skipValidation) {
                     validateNodeEditor(node,prefix);
                 }
@@ -506,6 +513,8 @@ RED.editor = (function() {
                 label = RED._("expressionEditor.title");
             } else if (node.type === '_js') {
                 label = RED._("jsEditor.title");
+            } else if (node.type === '_text') {
+                label = RED._("textEditor.title");
             } else if (node.type === '_json') {
                 label = RED._("jsonEditor.title");
             } else if (node.type === '_markdown') {
@@ -573,7 +582,7 @@ RED.editor = (function() {
                     valueField.typedInput('type', opt.parent?(opt.type||opt.parent.type):opt.type);
                     valueField.typedInput('value', opt.parent?((opt.value !== undefined)?opt.value:opt.parent.value):opt.value);
 
-                    var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove editor-button editor-button-small"}).appendTo(container);
+                    var actionButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(container);
                     $('<i/>',{class:"fa "+(opt.parent?"fa-reply":"fa-remove")}).appendTo(actionButton);
                     container.parent().addClass("red-ui-editableList-item-removable");
                     if (opt.parent) {
@@ -583,7 +592,7 @@ RED.editor = (function() {
                             actionButton.hide();
                         }
                         var restoreTip = RED.popover.tooltip(actionButton,RED._("subflow.env.restore"));
-                        valueField.change(function(evt) {
+                        valueField.on("change", function(evt) {
                             var newType = valueField.typedInput('type');
                             var newValue = valueField.typedInput('value');
                             if (newType === opt.parent.type && newValue === opt.parent.value) {
@@ -592,7 +601,7 @@ RED.editor = (function() {
                                 actionButton.show();
                             }
                         })
-                        actionButton.click(function(evt) {
+                        actionButton.on("click", function(evt) {
                             evt.preventDefault();
                             restoreTip.close();
                             valueField.typedInput('type', opt.parent.type);
@@ -600,7 +609,7 @@ RED.editor = (function() {
                         })
                     } else {
                         var removeTip = RED.popover.tooltip(actionButton,RED._("subflow.env.remove"));
-                        actionButton.click(function(evt) {
+                        actionButton.on("click", function(evt) {
                             evt.preventDefault();
                             removeTip.close();
                             container.parent().addClass("red-ui-editableList-item-deleting")
@@ -711,7 +720,7 @@ RED.editor = (function() {
         // Add in reverse order as they are prepended...
         $('<input type="password" style="display: none;" />').prependTo(dialogForm);
         $('<input type="text" style="display: none;" />').prependTo(dialogForm);
-        dialogForm.submit(function(e) { e.preventDefault();});
+        dialogForm.on("submit", function(e) { e.preventDefault();});
         return dialogForm;
     }
 
@@ -720,8 +729,8 @@ RED.editor = (function() {
         var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
         var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
 
-        var inputsDiv = $("#node-label-form-inputs");
-        var outputsDiv = $("#node-label-form-outputs");
+        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
+        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
 
         var inputCount;
         if (node.type === 'subflow') {
@@ -732,7 +741,7 @@ RED.editor = (function() {
 
         var children = inputsDiv.children();
         var childCount = children.length;
-        if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
+        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
             childCount--;
         }
 
@@ -768,14 +777,14 @@ RED.editor = (function() {
             var keys = Object.keys(outputMap);
             children = outputsDiv.children();
             childCount = children.length;
-            if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
+            if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
                 childCount--;
             }
 
             outputCount = 0;
             var rows = [];
             keys.forEach(function(p) {
-                var row = $("#node-label-form-output-"+p).parent();
+                var row = $("#red-ui-editor-node-label-form-output-"+p).parent();
                 if (row.length === 0 && outputMap[p] !== -1) {
                     if (childCount === 0) {
                         $(children[0]).remove();
@@ -807,7 +816,7 @@ RED.editor = (function() {
         }
         children = outputsDiv.children();
         childCount = children.length;
-        if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
+        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
             childCount--;
         }
         if (childCount < outputCount) {
@@ -828,17 +837,17 @@ RED.editor = (function() {
         }
     }
     function buildLabelRow(type, index, value, placeHolder) {
-        var result = $('<div>',{class:"node-label-form-row"});
+        var result = $('<div>',{class:"red-ui-editor-node-label-form-row"});
         if (type === undefined) {
             $('<span>').text(RED._("editor.noDefaultLabel")).appendTo(result);
-            result.addClass("node-label-form-none");
+            result.addClass("red-ui-editor-node-label-form-none");
         } else {
             result.addClass("");
-            var id = "node-label-form-"+type+"-"+index;
+            var id = "red-ui-editor-node-label-form-"+type+"-"+index;
             $('<label>',{for:id}).text((index+1)+".").appendTo(result);
             var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
-            var clear = $('<button type="button" class="editor-button editor-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
-            clear.click(function(evt) {
+            var clear = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
+            clear.on("click", function(evt) {
                 evt.preventDefault();
                 input.val("");
             })
@@ -859,7 +868,7 @@ RED.editor = (function() {
         var picker = $('<div class="red-ui-icon-picker">').css({
             top: top+"px",
             left: containerPos.left+"px",
-        }).appendTo("body");
+        }).appendTo("#red-ui-editor");
 
         var hide = function() {
             pickerBackground.remove();
@@ -894,7 +903,7 @@ RED.editor = (function() {
         var iconList = $('<div class="red-ui-icon-list">').appendTo(picker);
         var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker);
         var summary = $('<span>').appendTo(metaRow);
-        var resetButton = $('<button type="button" class="editor-button editor-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).click(function(e) {
+        var resetButton = $('<button type="button" class="red-ui-button red-ui-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
             e.preventDefault();
             hide();
             done(null);
@@ -913,7 +922,7 @@ RED.editor = (function() {
                     var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
                     iconDiv.data('icon',icon_url);
                     nodeDiv.css('backgroundColor',colour);
-                    var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
+                    var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
                     RED.utils.createIconElement(icon_url, iconContainer, true);
 
                     if (iconPath.module === moduleName && iconPath.file === icon) {
@@ -925,7 +934,7 @@ RED.editor = (function() {
                     iconDiv.on("mouseout", function() {
                         summary.html("&nbsp;");
                     })
-                    iconDiv.click(function() {
+                    iconDiv.on("click", function() {
                         hide();
                         done(moduleName+"/"+icon);
                     })
@@ -933,7 +942,7 @@ RED.editor = (function() {
             }
         });
         picker.slideDown(100);
-        searchInput.focus();
+        searchInput.trigger("focus");
     }
 
     function buildAppearanceForm(container,node) {
@@ -943,7 +952,7 @@ RED.editor = (function() {
 
         $('<div class="form-row">'+
             '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
-            '<button type="button" id="node-input-show-label-btn" class="editor-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> '+
+            '<button type="button" id="node-input-show-label-btn" class="red-ui-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> '+
             '<input type="checkbox" id="node-input-show-label" style="display: none;"/>'+
         '</div>').appendTo(dialogForm);
 
@@ -977,31 +986,31 @@ RED.editor = (function() {
             var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
             $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
 
-            var iconButton = $('<button type="button" class="editor-button" id="node-settings-icon-button">').appendTo(iconRow);
+            var iconButton = $('<button type="button" class="red-ui-button" id="red-ui-editor-node-icon-button">').appendTo(iconRow);
 
             var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
             var colour = RED.utils.getNodeColor(node.type, node._def);
             var icon_url = RED.utils.getNodeIcon(node._def,node);
             nodeDiv.css('backgroundColor',colour);
-            var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
+            var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
             RED.utils.createIconElement(icon_url, iconContainer, true);
 
-            iconButton.click(function(e) {
+            iconButton.on("click", function(e) {
                 e.preventDefault();
                 var iconPath;
-                var icon = $("#node-settings-icon").text()||"";
+                var icon = $("#red-ui-editor-node-icon").text()||"";
                 if (icon) {
                     iconPath = RED.utils.separateIconPath(icon);
                 } else {
                     iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
                 }
                 showIconPicker(iconRow,node,iconPath,function(newIcon) {
-                    $("#node-settings-icon").text(newIcon||"");
+                    $("#red-ui-editor-node-icon").text(newIcon||"");
                     var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
                     RED.utils.createIconElement(icon_url, iconContainer, true);
                 });
             });
-            $('<div id="node-settings-icon">').text(node.icon).appendTo(iconButton);
+            $('<div id="red-ui-editor-node-icon">').text(node.icon).appendTo(iconButton);
         }
 
         $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
@@ -1019,8 +1028,8 @@ RED.editor = (function() {
         var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
         var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
 
-        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelInputs"></span><div id="node-label-form-inputs"></div></div>').appendTo(dialogForm);
-        var inputsDiv = $("#node-label-form-inputs");
+        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelInputs"></span><div id="red-ui-editor-node-label-form-inputs"></div></div>').appendTo(dialogForm);
+        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
         if (inputCount > 0) {
             for (i=0;i<inputCount;i++) {
                 buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
@@ -1028,8 +1037,8 @@ RED.editor = (function() {
         } else {
             buildLabelRow().appendTo(inputsDiv);
         }
-        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelOutputs"></span><div id="node-label-form-outputs"></div></div>').appendTo(dialogForm);
-        var outputsDiv = $("#node-label-form-outputs");
+        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelOutputs"></span><div id="red-ui-editor-node-label-form-outputs"></div></div>').appendTo(dialogForm);
+        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
         if (outputCount > 0) {
             for (i=0;i<outputCount;i++) {
                 buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
@@ -1040,8 +1049,8 @@ RED.editor = (function() {
     }
 
     function updateLabels(editing_node, changes, outputMap) {
-        var inputLabels = $("#node-label-form-inputs").children().find("input");
-        var outputLabels = $("#node-label-form-outputs").children().find("input");
+        var inputLabels = $("#red-ui-editor-node-label-form-inputs").children().find("input");
+        var outputLabels = $("#red-ui-editor-node-label-form-outputs").children().find("input");
 
         var hasNonBlankLabel = false;
         var changed = false;
@@ -1059,7 +1068,7 @@ RED.editor = (function() {
         hasNonBlankLabel = false;
         newValue = new Array(editing_node.outputs);
         outputLabels.each(function() {
-            var index = $(this).attr('id').substring(23); // node-label-form-output-<index>
+            var index = $(this).attr('id').substring("red-ui-editor-node-label-form-output-".length);
             if (outputMap && outputMap.hasOwnProperty(index)) {
                 index = parseInt(outputMap[index]);
                 if (index === -1) {
@@ -1326,7 +1335,7 @@ RED.editor = (function() {
                         }
 
                         if (!editing_node._def.defaults || !editing_node._def.defaults.hasOwnProperty("icon")) {
-                            var icon = $("#node-settings-icon").text()||""
+                            var icon = $("#red-ui-editor-node-icon").text()||""
                             if (!isDefaultIcon) {
                                 if (icon !== editing_node.icon) {
                                     changes.icon = editing_node.icon;
@@ -1471,8 +1480,8 @@ RED.editor = (function() {
             ],
             resize: function(dimensions) {
                 editTrayWidthCache[type] = dimensions.width;
-                $(".editor-tray-content").height(dimensions.height - 50);
-                var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40);
+                $(".red-ui-tray-content").height(dimensions.height - 50);
+                var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
                 if (editing_node && editing_node._def.oneditresize) {
                     try {
                         editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
@@ -1482,8 +1491,8 @@ RED.editor = (function() {
                 }
             },
             open: function(tray, done) {
-                var trayFooter = tray.find(".editor-tray-footer");
-                var trayBody = tray.find('.editor-tray-body');
+                var trayFooter = tray.find(".red-ui-tray-footer");
+                var trayBody = tray.find('.red-ui-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
                 var editorTabEl = $('<ul></ul>').appendTo(trayBody);
@@ -1525,7 +1534,7 @@ RED.editor = (function() {
                     id: "editor-tab-properties",
                     label: RED._("editor-tab.properties"),
                     name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
                     iconClass: "fa fa-cog"
                 };
                 buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node);
@@ -1536,7 +1545,7 @@ RED.editor = (function() {
                         id: "editor-tab-description",
                         label: RED._("editor-tab.description"),
                         name: RED._("editor-tab.description"),
-                        content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                        content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
                         iconClass: "fa fa-file-text-o",
                         onchange: function() {
                             nodeInfoEditor.focus();
@@ -1550,7 +1559,7 @@ RED.editor = (function() {
                     id: "editor-tab-appearance",
                     label: RED._("editor-tab.appearance"),
                     name: RED._("editor-tab.appearance"),
-                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
                     iconClass: "fa fa-object-group",
                     onchange: function() {
                         refreshLabelForm(this.content,node);
@@ -1597,7 +1606,7 @@ RED.editor = (function() {
                 text: RED._("subflow.edit"),
                 click: function() {
                     RED.workspaces.show(id);
-                    $("#node-dialog-ok").click();
+                    $("#node-dialog-ok").trigger("click");
                 }
             });
         }
@@ -1649,7 +1658,7 @@ RED.editor = (function() {
         var trayOptions = {
             title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
             resize: function(dimensions) {
-                $(".editor-tray-content").height(dimensions.height - 50);
+                $(".red-ui-tray-content").height(dimensions.height - 50);
                 if (editing_config_node && editing_config_node._def.oneditresize) {
                     var form = $("#node-config-dialog-edit-form");
                     try {
@@ -1660,14 +1669,14 @@ RED.editor = (function() {
                 }
             },
             open: function(tray, done) {
-                var trayHeader = tray.find(".editor-tray-header");
-                var trayBody = tray.find('.editor-tray-body');
-                var trayFooter = tray.find(".editor-tray-footer");
-
+                var trayHeader = tray.find(".red-ui-tray-header");
+                var trayBody = tray.find('.red-ui-tray-body');
+                var trayFooter = tray.find(".red-ui-tray-footer");
+                var userCountDiv;
                 if (node_def.hasUsers !== false) {
-                    trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
+                    userCountDiv = $('<div class="red-ui-tray-footer-left"><i class="fa fa-info-circle"></i> <span></span></div>').prependTo(trayFooter);
                 }
-                trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
+                trayFooter.append('<span class="red-ui-tray-footer-right"><span id="red-ui-editor-config-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="red-ui-editor-config-scope"></select></span>');
 
                 var editorTabEl = $('<ul></ul>').appendTo(trayBody);
                 var editorContent = $('<div></div>').appendTo(trayBody);
@@ -1691,7 +1700,7 @@ RED.editor = (function() {
                     id: "editor-tab-cproperties",
                     label: RED._("editor-tab.properties"),
                     name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
                     iconClass: "fa fa-cog"
                 };
                 editorTabs.addTab(nodePropertiesTab);
@@ -1702,7 +1711,7 @@ RED.editor = (function() {
                         id: "editor-tab-description",
                         label: RED._("editor-tab.description"),
                         name: RED._("editor-tab.description"),
-                        content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                        content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
                         iconClass: "fa fa-file-text-o",
                         onchange: function() {
                             nodeInfoEditor.focus();
@@ -1715,18 +1724,18 @@ RED.editor = (function() {
 
                 prepareEditDialog(editing_config_node,node_def,"node-config-input", function() {
                     if (editing_config_node._def.exclusive) {
-                        $("#node-config-dialog-scope").hide();
+                        $("#red-ui-editor-config-scope").hide();
                     } else {
-                        $("#node-config-dialog-scope").show();
+                        $("#red-ui-editor-config-scope").show();
                     }
-                    $("#node-config-dialog-scope-warning").hide();
+                    $("#red-ui-editor-config-scope-warning").hide();
 
                     var nodeUserFlows = {};
                     editing_config_node.users.forEach(function(n) {
                         nodeUserFlows[n.z] = true;
                     });
                     var flowCount = Object.keys(nodeUserFlows).length;
-                    var tabSelect = $("#node-config-dialog-scope").empty();
+                    var tabSelect = $("#red-ui-editor-config-scope").empty();
                     tabSelect.off("change");
                     tabSelect.append('<option value=""'+(!editing_config_node.z?" selected":"")+' data-i18n="sidebar.config.global"></option>');
                     tabSelect.append('<option disabled data-i18n="sidebar.config.flows"></option>');
@@ -1750,17 +1759,17 @@ RED.editor = (function() {
                             var newScope = $(this).val();
                             if (newScope === '') {
                                 // global scope - everyone can use it
-                                $("#node-config-dialog-scope-warning").hide();
+                                $("#red-ui-editor-config-scope-warning").hide();
                             } else if (!nodeUserFlows[newScope] || flowCount > 1) {
                                 // a user will loose access to it
-                                $("#node-config-dialog-scope-warning").show();
+                                $("#red-ui-editor-config-scope-warning").show();
                             } else {
-                                $("#node-config-dialog-scope-warning").hide();
+                                $("#red-ui-editor-config-scope-warning").hide();
                             }
                         });
                     }
-                    if (node_def.hasUsers !== false) {
-                        $("#node-config-dialog-user-count").find("span").text(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show();
+                    if (node_def.hasUsers !== false && userCountDiv) {
+                        userCountDiv.find("span").text(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show();
                     }
                     trayBody.i18n();
                     trayFooter.i18n();
@@ -1826,7 +1835,7 @@ RED.editor = (function() {
                     var configTypeDef = RED.nodes.getType(configType);
                     var d;
                     var input;
-                    var scope = $("#node-config-dialog-scope").val();
+                    var scope = $("#red-ui-editor-config-scope").val();
 
                     if (configTypeDef.oneditsave) {
                         try {
@@ -2069,7 +2078,7 @@ RED.editor = (function() {
                 });
 
                 select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
-                window.setTimeout(function() { select.change();},50);
+                window.setTimeout(function() { select.trigger("change");},50);
             }
         }
     }
@@ -2118,7 +2127,7 @@ RED.editor = (function() {
                         if (updateLabels(editing_node, changes, null)) {
                             changed = true;
                         }
-                        var icon = $("#node-settings-icon").text()||"";
+                        var icon = $("#red-ui-editor-node-icon").text()||"";
                         if ((editing_node.icon === undefined && icon !== "node-red/subflow.png") ||
                             (editing_node.icon !== undefined && editing_node.icon !== icon)) {
                             changes.icon = editing_node.icon;
@@ -2188,8 +2197,8 @@ RED.editor = (function() {
                 }
             ],
             resize: function(size) {
-                $(".editor-tray-content").height(size.height - 50);
-                // var form = $(".editor-tray-content form").height(size.height - 50 - 40);
+                $(".red-ui-tray-content").height(size.height - 50);
+                // var form = $(".red-ui-tray-content form").height(size.height - 50 - 40);
                 var rows = $("#dialog-form>div:not(.node-input-env-container-row)");
                 var height = size.height;
                 for (var i=0; i<rows.size(); i++) {
@@ -2200,8 +2209,8 @@ RED.editor = (function() {
                 $("#node-input-env-container").editableList('height',height-80);
             },
             open: function(tray) {
-                var trayFooter = tray.find(".editor-tray-footer");
-                var trayBody = tray.find('.editor-tray-body');
+                var trayFooter = tray.find(".red-ui-tray-footer");
+                var trayBody = tray.find('.red-ui-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
 
@@ -2231,7 +2240,7 @@ RED.editor = (function() {
                     id: "editor-tab-properties",
                     label: RED._("editor-tab.properties"),
                     name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
                     iconClass: "fa fa-cog"
                 };
                 buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node);
@@ -2241,7 +2250,7 @@ RED.editor = (function() {
                     id: "editor-tab-description",
                     label: RED._("editor-tab.description"),
                     name: RED._("editor-tab.description"),
-                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
                     iconClass: "fa fa-file-text-o",
                     onchange: function() {
                         subflowEditor.focus();
@@ -2254,7 +2263,7 @@ RED.editor = (function() {
                     id: "editor-tab-appearance",
                     label: RED._("editor-tab.appearance"),
                     name: RED._("editor-tab.appearance"),
-                    content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(),
+                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
                     iconClass: "fa fa-object-group",
                     onchange: function() {
                         refreshLabelForm(this.content,editing_node);
@@ -2281,7 +2290,7 @@ RED.editor = (function() {
                 $("#subflow-input-category").append($("<option></option>").val("_custom_").text(RED._("palette.addCategory")));
 
 
-                $("#subflow-input-category").change(function() {
+                $("#subflow-input-category").on("change", function() {
                     var val = $(this).val();
                     if (val === "_custom_") {
                         $("#subflow-input-category").width(120);
@@ -2342,7 +2351,7 @@ RED.editor = (function() {
     function createEditor(options) {
         var el = options.element || $("#"+options.id)[0];
         var toolbarRow = $("<div>").appendTo(el);
-        el = $("<div>").appendTo(el).addClass("node-text-editor-container")[0];
+        el = $("<div>").appendTo(el).addClass("red-ui-editor-text-container")[0];
         var editor = ace.edit(el);
         editor.setTheme("ace/theme/tomorrow");
         var session = editor.getSession();
@@ -2392,12 +2401,12 @@ RED.editor = (function() {
             },100);
         }
         if (options.mode === 'ace/mode/markdown') {
-            $(el).addClass("node-text-editor-container-toolbar");
+            $(el).addClass("red-ui-editor-text-container-toolbar");
             editor.toolbar = customEditTypes['_markdown'].buildToolbar(toolbarRow,editor);
             if (options.expandable !== false) {
-                var expandButton = $('<button type="button" class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(editor.toolbar);
+                var expandButton = $('<button type="button" class="red-ui-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(editor.toolbar);
 
-                expandButton.click(function(e) {
+                expandButton.on("click", function(e) {
                     e.preventDefault();
                     var value = editor.getValue();
                     RED.editor.editMarkdown({
@@ -2414,7 +2423,7 @@ RED.editor = (function() {
                     })
                 });
             }
-            var helpButton = $('<button type="button" class="node-text-editor-help editor-button editor-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent());
+            var helpButton = $('<button type="button" class="red-ui-editor-text-help red-ui-button red-ui-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent());
             RED.popover.create({
                 target: helpButton,
                 trigger: 'click',
@@ -2429,14 +2438,17 @@ RED.editor = (function() {
 
     return {
         init: function() {
+            ace.config.set('basePath', 'vendor/ace');
             RED.tray.init();
             RED.actions.add("core:confirm-edit-tray", function() {
-                $("#node-dialog-ok").click();
-                $("#node-config-dialog-ok").click();
+                $(document.activeElement).blur();
+                $("#node-dialog-ok").trigger("click");
+                $("#node-config-dialog-ok").trigger("click");
             });
             RED.actions.add("core:cancel-edit-tray", function() {
-                $("#node-dialog-cancel").click();
-                $("#node-config-dialog-cancel").click();
+                $(document.activeElement).blur();
+                $("#node-dialog-cancel").trigger("click");
+                $("#node-config-dialog-cancel").trigger("click");
             });
         },
         edit: showEditDialog,
@@ -2446,6 +2458,7 @@ RED.editor = (function() {
         editExpression: function(options) { showTypeEditor("_expression", options) },
         editJSON: function(options) { showTypeEditor("_json", options) },
         editMarkdown: function(options) { showTypeEditor("_markdown", options) },
+        editText: function(options) { showTypeEditor("_text", options) },
         editBuffer: function(options) { showTypeEditor("_buffer", options) },
         buildEditForm: buildEditForm,
         validateNode: validateNode,

packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js

@@ -15,7 +15,7 @@
  **/
 (function() {
 
-    var template = '<script type="text/x-red" data-template-name="_buffer"><div id="node-input-buffer-panels"><div id="node-input-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="node-input-buffer-type"><i class="fa fa-exclamation-circle"></i> <span id="node-input-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="node-input-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></span></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="node-input-buffer-str"></div></div></div><div id="node-input-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="node-input-buffer-bin"></div></div></div></div></script>';
+    var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
 
     function stringToUTF8Array(str) {
         var data = [];
@@ -49,6 +49,9 @@
             var value = options.value;
             var onComplete = options.complete;
             var type = "_buffer"
+            if ($("script[data-template-name='"+type+"']").length === 0) {
+                $(template).appendTo("#red-ui-editor-node-configs");
+            }
             RED.view.state(RED.state.EDITING);
             var bufferStringEditor = [];
             var bufferBinValue;
@@ -83,18 +86,18 @@
                     }
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.editor-tray-body');
-                    var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
+                    var trayBody = tray.find('.red-ui-tray-body');
+                    var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
 
                     bufferStringEditor = RED.editor.createEditor({
-                        id: 'node-input-buffer-str',
+                        id: 'red-ui-editor-type-buffer-str',
                         value: "",
                         mode:"ace/mode/text"
                     });
                     bufferStringEditor.getSession().setValue(value||"",-1);
 
                     bufferBinEditor = RED.editor.createEditor({
-                        id: 'node-input-buffer-bin',
+                        id: 'red-ui-editor-type-buffer-bin',
                         value: "",
                         mode:"ace/mode/text",
                         readOnly: true
@@ -132,8 +135,8 @@
                             binBuffer.push((d<16?"0":"")+d.toString(16).toUpperCase());
                         }
                         if (valid) {
-                            $("#node-input-buffer-type-string").toggle(isString);
-                            $("#node-input-buffer-type-array").toggle(!isString);
+                            $("#red-ui-editor-type-buffer-type-string").toggle(isString);
+                            $("#red-ui-editor-type-buffer-type-array").toggle(!isString);
                             bufferBinEditor.setValue(binBuffer.join(""),1);
                         }
                         return valid;
@@ -165,24 +168,24 @@
                     dialogForm.i18n();
 
                     panels = RED.panels.create({
-                        id:"node-input-buffer-panels",
+                        id:"red-ui-editor-type-buffer-panels",
                         resize: function(p1Height,p2Height) {
-                            var p1 = $("#node-input-buffer-panel-str");
+                            var p1 = $("#red-ui-editor-type-buffer-panel-str");
                             p1Height -= $(p1.children()[0]).outerHeight(true);
                             var editorRow = $(p1.children()[1]);
                             p1Height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                            $("#node-input-buffer-str").css("height",(p1Height-5)+"px");
+                            $("#red-ui-editor-type-buffer-str").css("height",(p1Height-5)+"px");
                             bufferStringEditor.resize();
 
-                            var p2 = $("#node-input-buffer-panel-bin");
+                            var p2 = $("#red-ui-editor-type-buffer-panel-bin");
                             editorRow = $(p2.children()[0]);
                             p2Height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                            $("#node-input-buffer-bin").css("height",(p2Height-5)+"px");
+                            $("#red-ui-editor-type-buffer-bin").css("height",(p2Height-5)+"px");
                             bufferBinEditor.resize();
                         }
                     });
 
-                    $(".node-input-buffer-type").click(function(e) {
+                    $(".red-ui-editor-type-buffer-type").on("click", function(e) {
                         e.preventDefault();
                         RED.sidebar.info.set(RED._("bufferEditor.modeDesc"));
                         RED.sidebar.info.show();
@@ -202,7 +205,6 @@
             RED.tray.show(trayOptions);
         }
     }
-    $(template).appendTo(document.body);
     RED.editor.registerTypeEditor("_buffer", definition);
 
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js

@@ -17,28 +17,28 @@
 
 
     var template = '<script type="text/x-red" data-template-name="_expression">'+
-    '<div id="node-input-expression-panels">'+
-        '<div id="node-input-expression-panel-expr" class="red-ui-panel">'+
-            '<div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="node-input-expression-legacy"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></span><button id="node-input-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
-            '<div class="form-row node-text-editor-row"><div class="node-text-editor" id="node-input-expression"></div></div>'+
+    '<div id="red-ui-editor-type-expression-panels">'+
+        '<div id="red-ui-editor-type-expression-panel-expr" class="red-ui-panel">'+
+            '<div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-expression-legacy red-ui-button red-ui-button-small"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></button><button id="red-ui-editor-type-expression-reformat" class="red-ui-button red-ui-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
+            '<div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-expression"></div></div>'+
         '</div>'+
-        '<div id="node-input-expression-panel-info" class="red-ui-panel">'+
+        '<div id="red-ui-editor-type-expression-panel-info" class="red-ui-panel">'+
             '<div class="form-row">'+
-                '<ul id="node-input-expression-tabs"></ul>'+
-                '<div id="node-input-expression-tab-help" class="node-input-expression-tab-content hide">'+
+                '<ul id="red-ui-editor-type-expression-tabs"></ul>'+
+                '<div id="red-ui-editor-type-expression-tab-help" class="red-ui-editor-type-expression-tab-content hide">'+
                     '<div>'+
-                        '<select id="node-input-expression-func"></select>'+
-                        '<button id="node-input-expression-func-insert" class="editor-button" data-i18n="expressionEditor.insert"></button>'+
+                        '<select id="red-ui-editor-type-expression-func"></select>'+
+                        '<button id="red-ui-editor-type-expression-func-insert" class="red-ui-button" data-i18n="expressionEditor.insert"></button>'+
                     '</div>'+
-                    '<div id="node-input-expression-help"></div>'+
+                    '<div id="red-ui-editor-type-expression-help"></div>'+
                 '</div>'+
-                '<div id="node-input-expression-tab-test" class="node-input-expression-tab-content hide">'+
+                '<div id="red-ui-editor-type-expression-tab-test" class="red-ui-editor-type-expression-tab-content hide">'+
                     '<div>'+
-                        '<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+
-                        '<span style="display: inline-block; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
+                        '<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="red-ui-button red-ui-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+
+                        '<span style="display: inline-block; margin-left: 10px; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
                     '</div>'+
-                    '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="node-input-expression-test-data"></div>'+
-                    '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="node-input-expression-test-result"></div>'+
+                    '<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-data"></div>'+
+                    '<div style="display: inline-block; margin-left: 10px;  width:calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-result"></div>'+
                 '</div>'+
             '</div>'+
         '</div>'+
@@ -52,6 +52,9 @@
             var value = options.value;
             var onComplete = options.complete;
             var type = "_expression"
+            if ($("script[data-template-name='"+type+"']").length === 0) {
+                $(template).appendTo("#red-ui-editor-node-configs");
+            }
             RED.view.state(RED.state.EDITING);
             var expressionEditor;
             var testDataEditor;
@@ -74,7 +77,7 @@
                         text: RED._("common.label.done"),
                         class: "primary",
                         click: function() {
-                            $("#node-input-expression-help").text("");
+                            $("#red-ui-editor-type-expression-help").text("");
                             onComplete(expressionEditor.getValue());
                             RED.tray.close();
                         }
@@ -88,23 +91,23 @@
 
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.editor-tray-body');
-                    trayBody.addClass("node-input-expression-editor")
-                    var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form','_expression','editor');
-                    var funcSelect = $("#node-input-expression-func");
+                    var trayBody = tray.find('.red-ui-tray-body');
+                    trayBody.addClass("red-ui-editor-type-expression")
+                    var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form','_expression','editor');
+                    var funcSelect = $("#red-ui-editor-type-expression-func");
                     Object.keys(jsonata.functions).forEach(function(f) {
                         funcSelect.append($("<option></option>").val(f).text(f));
                     })
-                    funcSelect.change(function(e) {
+                    funcSelect.on("change", function(e) {
                         var f = $(this).val();
                         var args = RED._('jsonata:'+f+".args",{defaultValue:''});
                         var title = "<h5>"+f+"("+args+")</h5>";
                         var body = marked(RED._('jsonata:'+f+'.desc',{defaultValue:''}));
-                        $("#node-input-expression-help").html(title+"<p>"+body+"</p>");
+                        $("#red-ui-editor-type-expression-help").html(title+"<p>"+body+"</p>");
 
                     })
                     expressionEditor = RED.editor.createEditor({
-                        id: 'node-input-expression',
+                        id: 'red-ui-editor-type-expression',
                         value: "",
                         mode:"ace/mode/jsonata",
                         options: {
@@ -180,13 +183,13 @@
                             expressionEditor.session.removeMarker(currentFunctionMarker);
                             if (scopedFunction) {
                             //console.log(token,.map(function(t) { return t.type}));
-                                funcSelect.val(scopedFunction.value).change();
+                                funcSelect.val(scopedFunction.value).trigger("change");
                             }
                         }
                     });
 
                     dialogForm.i18n();
-                    $("#node-input-expression-func-insert").click(function(e) {
+                    $("#red-ui-editor-type-expression-func-insert").on("click", function(e) {
                         e.preventDefault();
                         var pos = expressionEditor.getCursorPosition();
                         var f = funcSelect.val();
@@ -194,7 +197,7 @@
                         expressionEditor.insertSnippet(snippet);
                         expressionEditor.focus();
                     });
-                    $("#node-input-expression-reformat").click(function(evt) {
+                    $("#red-ui-editor-type-expression-reformat").on("click", function(evt) {
                         evt.preventDefault();
                         var v = expressionEditor.getValue()||"";
                         try {
@@ -206,9 +209,9 @@
                     });
 
                     var tabs = RED.tabs.create({
-                        element: $("#node-input-expression-tabs"),
+                        element: $("#red-ui-editor-type-expression-tabs"),
                         onchange:function(tab) {
-                            $(".node-input-expression-tab-content").hide();
+                            $(".red-ui-editor-type-expression-tab-content").hide();
                             tab.content.show();
                             trayOptions.resize();
                         }
@@ -217,21 +220,21 @@
                     tabs.addTab({
                         id: 'expression-help',
                         label: RED._('expressionEditor.functionReference'),
-                        content: $("#node-input-expression-tab-help")
+                        content: $("#red-ui-editor-type-expression-tab-help")
                     });
                     tabs.addTab({
                         id: 'expression-tests',
                         label: RED._('expressionEditor.test'),
-                        content: $("#node-input-expression-tab-test")
+                        content: $("#red-ui-editor-type-expression-tab-test")
                     });
                     testDataEditor = RED.editor.createEditor({
-                        id: 'node-input-expression-test-data',
+                        id: 'red-ui-editor-type-expression-test-data',
                         value: expressionTestCache[expressionTestCacheId] || '{\n    "payload": "hello world"\n}',
                         mode:"ace/mode/json",
                         lineNumbers: false
                     });
                     var changeTimer;
-                    $(".node-input-expression-legacy").click(function(e) {
+                    $(".red-ui-editor-type-expression-legacy").on("click", function(e) {
                         e.preventDefault();
                         RED.sidebar.info.set(RED._("expressionEditor.compatModeDesc"));
                         RED.sidebar.info.show();
@@ -243,7 +246,7 @@
                         var expr;
                         var usesContext = false;
                         var legacyMode = /(^|[^a-zA-Z0-9_'"])msg([^a-zA-Z0-9_'"]|$)/.test(currentExpression);
-                        $(".node-input-expression-legacy").toggle(legacyMode);
+                        $(".red-ui-editor-type-expression-legacy").toggle(legacyMode);
                         try {
                             expr = jsonata(currentExpression);
                             expr.assign('flowContext',function(val) {
@@ -295,33 +298,33 @@
                     });
 
                     testResultEditor = RED.editor.createEditor({
-                        id: 'node-input-expression-test-result',
+                        id: 'red-ui-editor-type-expression-test-result',
                         value: "",
                         mode:"ace/mode/json",
                         lineNumbers: false,
                         readOnly: true
                     });
                     panels = RED.panels.create({
-                        id:"node-input-expression-panels",
+                        id:"red-ui-editor-type-expression-panels",
                         resize: function(p1Height,p2Height) {
-                            var p1 = $("#node-input-expression-panel-expr");
+                            var p1 = $("#red-ui-editor-type-expression-panel-expr");
                             p1Height -= $(p1.children()[0]).outerHeight(true);
                             var editorRow = $(p1.children()[1]);
                             p1Height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                            $("#node-input-expression").css("height",(p1Height-5)+"px");
+                            $("#red-ui-editor-type-expression").css("height",(p1Height-5)+"px");
                             expressionEditor.resize();
 
-                            var p2 = $("#node-input-expression-panel-info > .form-row > div:first-child");
+                            var p2 = $("#red-ui-editor-type-expression-panel-info > .form-row > div:first-child");
                             p2Height -= p2.outerHeight(true) + 20;
-                            $(".node-input-expression-tab-content").height(p2Height);
-                            $("#node-input-expression-test-data").css("height",(p2Height-5)+"px");
+                            $(".red-ui-editor-type-expression-tab-content").height(p2Height);
+                            $("#red-ui-editor-type-expression-test-data").css("height",(p2Height-5)+"px");
                             testDataEditor.resize();
-                            $("#node-input-expression-test-result").css("height",(p2Height-5)+"px");
+                            $("#red-ui-editor-type-expression-test-result").css("height",(p2Height-5)+"px");
                             testResultEditor.resize();
                         }
                     });
 
-                    $("#node-input-example-reformat").click(function(evt) {
+                    $("#node-input-example-reformat").on("click", function(evt) {
                         evt.preventDefault();
                         var v = testDataEditor.getValue()||"";
                         try {
@@ -346,6 +349,5 @@
             RED.tray.show(trayOptions);
         }
     }
-    $(template).appendTo(document.body);
     RED.editor.registerTypeEditor("_expression", definition);
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/js.js

@@ -23,6 +23,9 @@
             var value = options.value;
             var onComplete = options.complete;
             var type = "_js"
+            if ($("script[data-template-name='"+type+"']").length === 0) {
+                $(template).appendTo("#red-ui-editor-node-configs");
+            }
             RED.view.state(RED.state.EDITING);
             var expressionEditor;
             var changeTimer;
@@ -59,8 +62,8 @@
                     expressionEditor.resize();
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.editor-tray-body');
-                    var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
+                    var trayBody = tray.find('.red-ui-tray-body');
+                    var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
                     expressionEditor = RED.editor.createEditor({
                         id: 'node-input-js',
                         mode: options.mode || 'ace/mode/javascript',
@@ -96,7 +99,6 @@
             RED.tray.show(trayOptions);
         }
     }
-    $(template).appendTo(document.body);
     RED.editor.registerTypeEditor("_js", definition);
 
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js

@@ -16,13 +16,16 @@
 (function() {
 
 
-    var template = '<script type="text/x-red" data-template-name="_json"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button id="node-input-json-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></div><div class="form-row node-text-editor-row"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-json"></div></div></script>';
+    var template = '<script type="text/x-red" data-template-name="_json"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button id="node-input-json-reformat" class="red-ui-button red-ui-button-small"><span data-i18n="jsonEditor.format"></span></button></div><div class="form-row node-text-editor-row"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-json"></div></div></script>';
 
     var definition = {
         show: function(options) {
             var value = options.value;
             var onComplete = options.complete;
             var type = "_json"
+            if ($("script[data-template-name='"+type+"']").length === 0) {
+                $(template).appendTo("#red-ui-editor-node-configs");
+            }
             RED.view.state(RED.state.EDITING);
             var expressionEditor;
             var changeTimer;
@@ -74,8 +77,8 @@
                     expressionEditor.resize();
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.editor-tray-body');
-                    var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
+                    var trayBody = tray.find('.red-ui-tray-body');
+                    var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
                     expressionEditor = RED.editor.createEditor({
                         id: 'node-input-json',
                         value: "",
@@ -89,7 +92,7 @@
                         });
                         checkValid();
                     }
-                    $("#node-input-json-reformat").click(function(evt) {
+                    $("#node-input-json-reformat").on("click", function(evt) {
                         evt.preventDefault();
                         var v = expressionEditor.getValue()||"";
                         try {
@@ -112,6 +115,5 @@
             RED.tray.show(trayOptions);
         }
     }
-    $(template).appendTo(document.body);
     RED.editor.registerTypeEditor("_json", definition);
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js

@@ -17,34 +17,34 @@
 
     var toolbarTemplate = '<div style="margin-bottom: 5px">'+
         '<span class="button-group">'+
-        '<button type="button" class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
-        '<button type="button" class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
-        '<button type="button" class="editor-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
+        '<button type="button" class="red-ui-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
+        '<button type="button" class="red-ui-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
+        '<button type="button" class="red-ui-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
         '</span>'+
         '<span class="button-group">'+
-            '<button type="button" class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+
-            '<button type="button" class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+
-            '<button type="button" class="editor-button" data-style="code"><i class="fa fa-code"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="b"><i class="fa fa-bold"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="i"><i class="fa fa-italic"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="code"><i class="fa fa-code"></i></button>'+
         '</span>'+
         '<span class="button-group">'+
-            '<button type="button" class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
-            '<button type="button" class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
-            '<button type="button" class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
-            '<button type="button" class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
-            '<button type="button" class="editor-button" data-style="link"><i class="fa fa-link"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
+            '<button type="button" class="red-ui-button" data-style="link"><i class="fa fa-link"></i></button>'+
         '</span>'
     '</div>';
 
     var template = '<script type="text/x-red" data-template-name="_markdown">'+
-        '<div id="node-input-markdown-panels">'+
-        '<div id="node-input-markdown-panel-editor" class="red-ui-panel">'+
+        '<div id="red-ui-editor-type-markdown-panels">'+
+        '<div id="red-ui-editor-type-markdown-panel-editor" class="red-ui-panel">'+
             '<div style="height: 100%; margin: auto; max-width: 1000px;">'+
-                '<div id="node-input-markdown-toolbar"></div>'+
-                '<div class="node-text-editor" style="height: 100%" id="node-input-markdown"></div>'+
+                '<div id="red-ui-editor-type-markdown-toolbar"></div>'+
+                '<div class="node-text-editor" style="height: 100%" id="red-ui-editor-type-markdown"></div>'+
             '</div>'+
         '</div>'+
         '<div class="red-ui-panel">'+
-            '<div class="node-input-markdown-panel-preview node-help"></div>'+
+            '<div class="red-ui-editor-type-markdown-panel-preview red-ui-help"></div>'+
         '</div>'+
         '</script>';
 
@@ -56,6 +56,11 @@
             var value = options.value;
             var onComplete = options.complete;
             var type = "_markdown"
+            if ($("script[data-template-name='"+type+"']").length === 0) {
+                $(template).appendTo("#red-ui-editor-node-configs");
+            }
+
+
             RED.view.state(RED.state.EDITING);
             var expressionEditor;
 
@@ -88,11 +93,11 @@
 
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.editor-tray-body');
-                    trayBody.addClass("node-input-markdown-editor")
-                    var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
+                    var trayBody = tray.find('.red-ui-tray-body');
+                    trayBody.addClass("red-ui-editor-type-markdown-editor")
+                    var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
                     expressionEditor = RED.editor.createEditor({
-                        id: 'node-input-markdown',
+                        id: 'red-ui-editor-type-markdown',
                         value: value,
                         mode:"ace/mode/markdown",
                         expandable: false
@@ -101,20 +106,20 @@
                     expressionEditor.getSession().on("change", function() {
                         clearTimeout(changeTimer);
                         changeTimer = setTimeout(function() {
-                            var currentScrollTop = $(".node-input-markdown-panel-preview").scrollTop();
-                            $(".node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
-                            $(".node-input-markdown-panel-preview").scrollTop(currentScrollTop);
+                            var currentScrollTop = $(".red-ui-editor-type-markdown-panel-preview").scrollTop();
+                            $(".red-ui-editor-type-markdown-panel-preview").html(marked(expressionEditor.getValue()));
+                            $(".red-ui-editor-type-markdown-panel-preview").scrollTop(currentScrollTop);
                         },200);
                     })
                     if (options.header) {
-                        options.header.appendTo(tray.find('#node-input-markdown-title'));
+                        options.header.appendTo(tray.find('#red-ui-editor-type-markdown-title'));
                     }
 
                     if (value) {
-                        $(".node-input-markdown-panel-preview").html(marked(expressionEditor.getValue()));
+                        $(".red-ui-editor-type-markdown-panel-preview").html(marked(expressionEditor.getValue()));
                     }
                     panels = RED.panels.create({
-                        id:"node-input-markdown-panels",
+                        id:"red-ui-editor-type-markdown-panels",
                         dir: "horizontal",
                         resize: function(p1Width,p2Width) {
                             expressionEditor.resize();
@@ -123,10 +128,10 @@
                     panels.ratio(1);
 
                     $('<span class="button-group" style="float:right">'+
-                        '<button type="button" id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
+                        '<button type="button" id="node-btn-markdown-preview" class="red-ui-button toggle single"><i class="fa fa-eye"></i></button>'+
                     '</span>').appendTo(expressionEditor.toolbar);
 
-                    $("#node-btn-markdown-preview").click(function(e) {
+                    $("#node-btn-markdown-preview").on("click", function(e) {
                         e.preventDefault();
                         if ($(this).hasClass("selected")) {
                             $(this).removeClass("selected");
@@ -172,7 +177,7 @@
             var toolbar = $(toolbarTemplate).appendTo(container);
             toolbar.find('button[data-style]').each(function(el) {
                 var style = styleActions[$(this).data('style')];
-                $(this).click(function(e) {
+                $(this).on("click", function(e) {
                     e.preventDefault();
                     var current = editor.getSelectedText();
                     var range = editor.selection.getRange();
@@ -207,6 +212,5 @@
             return toolbar;
         }
     }
-    $(template).appendTo(document.body);
     RED.editor.registerTypeEditor("_markdown", definition);
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/text.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+(function() {
+
+
+    var template = '<script type="text/x-red" data-template-name="_text"><div class="form-row node-text-editor-row"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-text"></div></div></script>';
+
+    var definition = {
+        show: function(options) {
+            var value = options.value;
+            var onComplete = options.complete;
+            var type = "_text"
+            if ($("script[data-template-name='"+type+"']").length === 0) {
+                $(template).appendTo("#red-ui-editor-node-configs");
+            }
+            RED.view.state(RED.state.EDITING);
+            var expressionEditor;
+            var changeTimer;
+
+            var trayOptions = {
+                title: options.title,
+                width: options.width||"inherit",
+                buttons: [
+                    {
+                        id: "node-dialog-cancel",
+                        text: RED._("common.label.cancel"),
+                        click: function() {
+                            RED.tray.close();
+                        }
+                    },
+                    {
+                        id: "node-dialog-ok",
+                        text: RED._("common.label.done"),
+                        class: "primary",
+                        click: function() {
+                            onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
+                            RED.tray.close();
+                        }
+                    }
+                ],
+                resize: function(dimensions) {
+                    var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                    var editorRow = $("#dialog-form>div.node-text-editor-row");
+                    var height = $("#dialog-form").height();
+                    // for (var i=0;i<rows.size();i++) {
+                    //     height -= $(rows[i]).outerHeight(true);
+                    // }
+                    // height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
+                    $(".node-text-editor").css("height",height+"px");
+                    expressionEditor.resize();
+                },
+                open: function(tray) {
+                    var trayBody = tray.find('.red-ui-tray-body');
+                    var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
+                    expressionEditor = RED.editor.createEditor({
+                        id: 'node-input-text',
+                        value: "",
+                        mode:"ace/mode/"+(options.mode||"text")
+                    });
+                    expressionEditor.getSession().setValue(value||"",-1);
+                    if (options.cursor) {
+                        expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
+                    }
+                },
+                close: function() {
+                    expressionEditor.destroy();
+                    if (options.onclose) {
+                        options.onclose();
+                    }
+                },
+                show: function() {}
+            }
+            RED.tray.show(trayOptions);
+        }
+    }
+    RED.editor.registerTypeEditor("_text", definition);
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/event-log.js

@@ -15,7 +15,7 @@
  **/
 RED.eventLog = (function() {
 
-    var template = '<script type="text/x-red" data-template-name="_eventLog"><div class="form-row node-text-editor-row"><div style="height: 100%;min-height: 150px;" class="node-text-editor" id="event-log-editor"></div></div></script>';
+    var template = '<script type="text/x-red" data-template-name="_eventLog"><div class="form-row node-text-editor-row"><div style="height: 100%;min-height: 150px;" class="node-text-editor" id="red-ui-event-log-editor"></div></div></script>';
 
     var eventLogEditor;
     var backlog = [];
@@ -36,7 +36,7 @@ RED.eventLog = (function() {
     }
     return {
         init: function() {
-            $(template).appendTo(document.body);
+            $(template).appendTo("#red-ui-editor-node-configs");
             RED.actions.add("core:show-event-log",RED.eventLog.show);
         },
         show: function() {
@@ -70,10 +70,10 @@ RED.eventLog = (function() {
                     eventLogEditor.resize();
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.editor-tray-body');
-                    var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
+                    var trayBody = tray.find('.red-ui-tray-body');
+                    var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
                     eventLogEditor = RED.editor.createEditor({
-                        id: 'event-log-editor',
+                        id: 'red-ui-event-log-editor',
                         value: backlog.join("\n"),
                         lineNumbers: false,
                         readOnly: true,

packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js

@@ -94,10 +94,14 @@ RED.h = handlers;
                 }
             }
             for (var action in userKeymap) {
-                if (userKeymap.hasOwnProperty(action)) {
+                if (userKeymap.hasOwnProperty(action) && userKeymap[action]) {
                     var obj = userKeymap[action];
                     if (obj.hasOwnProperty('key')) {
-                        addHandler(obj.scope, obj.key, action, true);
+                        var scope = obj.scope;
+                        if (scope === "workspace") {
+                            scope = "red-ui-workspace";
+                        }
+                        addHandler(scope, obj.key, action, true);
                     }
                 }
             }
@@ -109,7 +113,7 @@ RED.h = handlers;
             get: getSettingsPane,
             focus: function() {
                 setTimeout(function() {
-                    $("#user-settings-tab-keyboard-filter").focus();
+                    $("#red-ui-settings-tab-keyboard-filter").trigger("focus");
                 },200);
             }
         })
@@ -391,19 +395,22 @@ RED.h = handlers;
                 $(this).toggleClass("input-error",!valid);
             })
 
-            var scopeSelect = $('<select><option value="*" data-i18n="keyboard.global"></option><option value="workspace" data-i18n="keyboard.workspace"></option></select>').appendTo(scope);
+            var scopeSelect = $('<select><option value="*" data-i18n="keyboard.global"></option><option value="red-ui-workspace" data-i18n="keyboard.workspace"></option></select>').appendTo(scope);
             scopeSelect.i18n();
+            if (object.scope === "workspace") {
+                object.scope = "red-ui-workspace";
+            }
             scopeSelect.val(object.scope||'*');
 
             var div = $('<div class="keyboard-shortcut-edit button-group-vertical"></div>').appendTo(scope);
-            var okButton = $('<button class="editor-button editor-button-small"><i class="fa fa-check"></i></button>').appendTo(div);
-            var revertButton = $('<button class="editor-button editor-button-small"><i class="fa fa-reply"></i></button>').appendTo(div);
+            var okButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-check"></i></button>').appendTo(div);
+            var revertButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-reply"></i></button>').appendTo(div);
 
-            okButton.click(function(e) {
+            okButton.on("click", function(e) {
                 e.stopPropagation();
                 endEditShortcut();
             });
-            revertButton.click(function(e) {
+            revertButton.on("click", function(e) {
                 e.stopPropagation();
                 RED.keyboard.revertToDefault(object.id);
                 container.empty();
@@ -426,7 +433,7 @@ RED.h = handlers;
                 buildShortcutRow(container,obj);
             })
 
-            keyInput.focus();
+            keyInput.trigger("focus");
         }
     }
 
@@ -510,14 +517,14 @@ RED.h = handlers;
         var scope = $('<div class="keyboard-shortcut-entry-scope">').appendTo(item);
 
         $("<span>").text(object.scope === '*'?'global':object.scope||"").appendTo(scope);
-        container.click(editShortcut);
+        container.on("click", editShortcut);
     }
 
     function getSettingsPane() {
-        var pane = $('<div id="user-settings-tab-keyboard"></div>');
+        var pane = $('<div id="red-ui-settings-tab-keyboard"></div>');
 
         $('<div class="keyboard-shortcut-entry keyboard-shortcut-list-header">'+
-        '<div class="keyboard-shortcut-entry-key keyboard-shortcut-entry-text"><input id="user-settings-tab-keyboard-filter" type="text" data-i18n="[placeholder]keyboard.filterActions"></div>'+
+        '<div class="keyboard-shortcut-entry-key keyboard-shortcut-entry-text"><input id="red-ui-settings-tab-keyboard-filter" type="text" data-i18n="[placeholder]keyboard.filterActions"></div>'+
         '<div class="keyboard-shortcut-entry-key" data-i18n="keyboard.shortcut"></div>'+
         '<div class="keyboard-shortcut-entry-scope" data-i18n="keyboard.scope"></div>'+
         '</div>').appendTo(pane);

packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js

@@ -24,7 +24,7 @@ RED.notifications = (function() {
     var myNotification = RED.notify("This is the message to display",{
         modal: true,
         fixed: true,
-        type: 'warning',
+        type: 'warning', // 'compact', 'success', 'warning', 'error'
         buttons: [
             {
                 text: "cancel",
@@ -62,7 +62,7 @@ RED.notifications = (function() {
         }
 
         if (options.modal) {
-            $("#full-shade").show();
+            $("#red-ui-full-shade").show();
         }
 
         if (currentNotifications.length > 4) {
@@ -77,14 +77,14 @@ RED.notifications = (function() {
             }
         }
         var n = document.createElement("div");
-        n.id="red-notification-"+c;
-        n.className = "notification";
+        n.id="red-ui-notification-"+c;
+        n.className = "red-ui-notification";
         n.fixed = fixed;
         if (type) {
-            n.className = "notification notification-"+type;
+            n.className = "red-ui-notification red-ui-notification-"+type;
         }
         if (options.width) {
-            var parentWidth = $("#notifications").width();
+            var parentWidth = $("#red-ui-notifications").width();
             if (options.width > parentWidth) {
                 var margin = -(options.width-parentWidth)/2;
                 $(n).css({
@@ -103,9 +103,9 @@ RED.notifications = (function() {
             $(n).append(msg);
         }
         if (options.buttons) {
-            var buttonSet = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').appendTo(n)
+            var buttonSet = $('<div class="ui-dialog-buttonset"></div>').appendTo(n)
             options.buttons.forEach(function(buttonDef) {
-                var b = $('<button>').html(buttonDef.text).click(buttonDef.click).appendTo(buttonSet);
+                var b = $('<button>').html(buttonDef.text).on("click", buttonDef.click).appendTo(buttonSet);
                 if (buttonDef.id) {
                     b.attr('id',buttonDef.id);
                 }
@@ -116,7 +116,7 @@ RED.notifications = (function() {
         }
 
 
-        $("#notifications").append(n);
+        $("#red-ui-notifications").append(n);
         if (!RED.notifications.hide) {
             $(n).slideDown(300);
         }
@@ -142,7 +142,7 @@ RED.notifications = (function() {
                     nn.parentNode.removeChild(nn);
                 }
                 if (options.modal) {
-                    $("#full-shade").hide();
+                    $("#red-ui-full-shade").hide();
                 }
             };
         })();
@@ -192,7 +192,7 @@ RED.notifications = (function() {
                     if (options.buttons) {
                         var buttonSet = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').appendTo(nn)
                         options.buttons.forEach(function(buttonDef) {
-                            var b = $('<button>').text(buttonDef.text).click(buttonDef.click).appendTo(buttonSet);
+                            var b = $('<button>').text(buttonDef.text).on("click", buttonDef.click).appendTo(buttonSet);
                             if (buttonDef.id) {
                                 b.attr('id',buttonDef.id);
                             }
@@ -211,9 +211,9 @@ RED.notifications = (function() {
                 if (nn.hidden) {
                     nn.showNotification();
                 } else if (!options || !options.silent){
-                    $(nn).addClass("notification-shake-horizontal");
+                    $(nn).addClass("red-ui-notification-shake-horizontal");
                     setTimeout(function() {
-                        $(nn).removeClass("notification-shake-horizontal");
+                        $(nn).removeClass("red-ui-notification-shake-horizontal");
                     },300);
                 }
 
@@ -221,7 +221,7 @@ RED.notifications = (function() {
         })();
 
         if (!fixed) {
-            $(n).click((function() {
+            $(n).on("click", (function() {
                 var nn = n;
                 return function() {
                     nn.close();
@@ -263,14 +263,14 @@ RED.notifications = (function() {
 
     return {
         init: function() {
-            notificationButtonWrapper = $('<li>'+
-                '<a id="btn-notifications" class="button" href="#">'+
-                '<i class="fa fa-warning"></i>'+
-                '</a>'+
-                '</li>').prependTo(".header-toolbar").hide();
-            $('#btn-notifications').click(function() {
-                showPersistent();
-            })
+            $('<div id="red-ui-notifications"></div>').appendTo("#red-ui-editor");
+
+            notificationButtonWrapper = $('<li></li>').prependTo(".red-ui-header-toolbar").hide();
+            $('<a class="button" href="#"><i class="fa fa-warning"></i></a>')
+                .appendTo(notificationButtonWrapper)
+                .on("click", function() {
+                    showPersistent();
+                })
         },
         notify: notify
     }

packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js

@@ -235,12 +235,7 @@ RED.palette.editor = (function() {
                                 if (def && def.color) {
                                     swatch.css({background:RED.utils.getNodeColor(t,def)});
                                     swatch.css({border: "1px solid "+getContrastingBorder(swatch.css('backgroundColor'))})
-
-                                } else {
-                                    swatch.css({background:"#eee",border:"1px dashed #999"})
                                 }
-                            } else {
-                                swatch.css({background:"#eee",border:"1px dashed #999"})
                             }
                         }
                         nodeEntries[module].setUseCount[setName] = inUseCount;
@@ -257,7 +252,7 @@ RED.palette.editor = (function() {
                                 setElements.enableButton.text(RED._('palette.editor.enable'));
                             }
                         }
-                        setElements.setRow.toggleClass("palette-module-set-disabled",!set.enabled);
+                        setElements.setRow.toggleClass("red-ui-palette-module-set-disabled",!set.enabled);
                     }
                 }
 
@@ -350,7 +345,7 @@ RED.palette.editor = (function() {
             catalogueLoadErrors = true;
         }
         if (catalogueCount > 1) {
-            $(".palette-module-shade-status").html(RED._('palette.editor.loading')+"<br>"+catalogueLoadStatus.length+"/"+catalogueCount);
+            $(".red-ui-palette-module-shade-status").html(RED._('palette.editor.loading')+"<br>"+catalogueLoadStatus.length+"/"+catalogueCount);
         }
         if (catalogueLoadStatus.length === catalogueCount) {
             if (catalogueLoadErrors) {
@@ -358,7 +353,7 @@ RED.palette.editor = (function() {
             }
             var delta = 250-(Date.now() - catalogueLoadStart);
             setTimeout(function() {
-                $("#palette-module-install-shade").hide();
+                $("#red-ui-palette-module-install-shade").hide();
             },Math.max(delta,0));
 
         }
@@ -370,15 +365,15 @@ RED.palette.editor = (function() {
             loadedIndex = {};
             packageList.editableList('empty');
 
-            $(".palette-module-shade-status").text(RED._('palette.editor.loading'));
+            $(".red-ui-palette-module-shade-status").text(RED._('palette.editor.loading'));
             var catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json'];
             catalogueLoadStatus = [];
             catalogueLoadErrors = false;
             catalogueCount = catalogues.length;
             if (catalogues.length > 1) {
-                $(".palette-module-shade-status").html(RED._('palette.editor.loading')+"<br>0/"+catalogues.length);
+                $(".red-ui-palette-module-shade-status").html(RED._('palette.editor.loading')+"<br>0/"+catalogues.length);
             }
-            $("#palette-module-install-shade").show();
+            $("#red-ui-palette-module-install-shade").show();
             catalogueLoadStart = Date.now();
             var handled = 0;
             catalogues.forEach(function(catalog,index) {
@@ -451,7 +446,7 @@ RED.palette.editor = (function() {
             focus: function() {
                 editorTabs.resize();
                 setTimeout(function() {
-                    filterInput.focus();
+                    filterInput.trigger("focus");
                 },200);
             }
         })
@@ -542,15 +537,15 @@ RED.palette.editor = (function() {
 
 
     function createSettingsPane() {
-        settingsPane = $('<div id="user-settings-tab-palette"></div>');
-        var content = $('<div id="palette-editor">'+
-            '<ul id="palette-editor-tabs"></ul>'+
+        settingsPane = $('<div id="red-ui-settings-tab-palette"></div>');
+        var content = $('<div id="red-ui-palette-editor">'+
+            '<ul id="red-ui-palette-editor-tabs"></ul>'+
         '</div>').appendTo(settingsPane);
 
         editorTabs = RED.tabs.create({
-            element: settingsPane.find('#palette-editor-tabs'),
+            element: settingsPane.find('#red-ui-palette-editor-tabs'),
             onchange:function(tab) {
-                content.find(".palette-editor-tab").hide();
+                content.find(".red-ui-palette-editor-tab").hide();
                 tab.content.show();
                 if (filterInput) {
                     filterInput.searchBox('value',"");
@@ -560,11 +555,11 @@ RED.palette.editor = (function() {
                 }
                 if (tab.id === 'install') {
                     if (searchInput) {
-                        searchInput.focus();
+                        searchInput.trigger("focus");
                     }
                 } else {
                     if (filterInput) {
-                        filterInput.focus();
+                        filterInput.trigger("focus");
                     }
                 }
             },
@@ -572,7 +567,7 @@ RED.palette.editor = (function() {
         });
 
 
-        var modulesTab = $('<div>',{class:"palette-editor-tab"}).appendTo(content);
+        var modulesTab = $('<div>',{class:"red-ui-palette-editor-tab"}).appendTo(content);
 
         editorTabs.addTab({
             id: 'nodes',
@@ -580,7 +575,7 @@ RED.palette.editor = (function() {
             content: modulesTab
         })
 
-        var filterDiv = $('<div>',{class:"palette-search"}).appendTo(modulesTab);
+        var filterDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(modulesTab);
         filterInput = $('<input type="text" data-i18n="[placeholder]palette.filter"></input>')
             .appendTo(filterDiv)
             .searchBox({
@@ -591,7 +586,7 @@ RED.palette.editor = (function() {
             });
 
 
-        nodeList = $('<ol>',{id:"palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({
+        nodeList = $('<ol>',{id:"red-ui-palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({
             addButton: false,
             scrollOnAdd: false,
             sort: function(A,B) {
@@ -607,22 +602,22 @@ RED.palette.editor = (function() {
             addItem: function(container,i,object) {
                 var entry = object.info;
                 if (entry) {
-                    var headerRow = $('<div>',{class:"palette-module-header"}).appendTo(container);
-                    var titleRow = $('<div class="palette-module-meta palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
+                    var headerRow = $('<div>',{class:"red-ui-palette-module-header"}).appendTo(container);
+                    var titleRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
                     $('<span>').text(entry.name).appendTo(titleRow);
-                    var metaRow = $('<div class="palette-module-meta palette-module-version"><i class="fa fa-tag"></i></div>').appendTo(headerRow);
+                    var metaRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-version"><i class="fa fa-tag"></i></div>').appendTo(headerRow);
                     var versionSpan = $('<span>').text(entry.version).appendTo(metaRow);
 
-                    var errorRow = $('<div class="palette-module-meta palette-module-errors"><i class="fa fa-warning"></i></div>').hide().appendTo(headerRow);
-                    var errorList = $('<ul class="palette-module-error-list"></ul>').appendTo(errorRow);
-                    var buttonRow = $('<div>',{class:"palette-module-meta"}).appendTo(headerRow);
-                    var setButton = $('<a href="#" class="editor-button editor-button-small palette-module-set-button"><i class="fa fa-angle-right palette-module-node-chevron"></i> </a>').appendTo(buttonRow);
+                    var errorRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-errors"><i class="fa fa-warning"></i></div>').hide().appendTo(headerRow);
+                    var errorList = $('<ul class="red-ui-palette-module-error-list"></ul>').appendTo(errorRow);
+                    var buttonRow = $('<div>',{class:"red-ui-palette-module-meta"}).appendTo(headerRow);
+                    var setButton = $('<a href="#" class="red-ui-button red-ui-button-small red-ui-palette-module-set-button"><i class="fa fa-angle-right red-ui-palette-module-node-chevron"></i> </a>').appendTo(buttonRow);
                     var setCount = $('<span>').appendTo(setButton);
-                    var buttonGroup = $('<div>',{class:"palette-module-button-group"}).appendTo(buttonRow);
+                    var buttonGroup = $('<div>',{class:"red-ui-palette-module-button-group"}).appendTo(buttonRow);
 
-                    var updateButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.update')).appendTo(buttonGroup);
+                    var updateButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').text(RED._('palette.editor.update')).appendTo(buttonGroup);
                     updateButton.attr('id','up_'+Math.floor(Math.random()*1000000000));
-                    updateButton.click(function(evt) {
+                    updateButton.on("click", function(evt) {
                         evt.preventDefault();
                         if ($(this).hasClass('disabled')) {
                             return;
@@ -631,19 +626,19 @@ RED.palette.editor = (function() {
                     })
 
 
-                    var removeButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.remove')).appendTo(buttonGroup);
+                    var removeButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').text(RED._('palette.editor.remove')).appendTo(buttonGroup);
                     removeButton.attr('id','up_'+Math.floor(Math.random()*1000000000));
-                    removeButton.click(function(evt) {
+                    removeButton.on("click", function(evt) {
                         evt.preventDefault();
                         remove(entry,container,function(err){});
                     })
                     if (!entry.local) {
                         removeButton.hide();
                     }
-                    var enableButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.disableall')).appendTo(buttonGroup);
+                    var enableButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').text(RED._('palette.editor.disableall')).appendTo(buttonGroup);
 
-                    var contentRow = $('<div>',{class:"palette-module-content"}).appendTo(container);
-                    var shade = $('<div class="palette-module-shade hide"><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(container);
+                    var contentRow = $('<div>',{class:"red-ui-palette-module-content"}).appendTo(container);
+                    var shade = $('<div class="red-ui-palette-module-shade hide"><img src="red/images/spin.svg" class="red-ui-palette-spinner"/></div>').appendTo(container);
 
                     object.elements = {
                         updateButton: updateButton,
@@ -657,7 +652,7 @@ RED.palette.editor = (function() {
                         versionSpan: versionSpan,
                         sets: {}
                     }
-                    setButton.click(function(evt) {
+                    setButton.on("click", function(evt) {
                         evt.preventDefault();
                         if (container.hasClass('expanded')) {
                             container.removeClass('expanded');
@@ -674,16 +669,16 @@ RED.palette.editor = (function() {
                     });
                     setList.forEach(function(setName) {
                         var set = entry.sets[setName];
-                        var setRow = $('<div>',{class:"palette-module-set"}).appendTo(contentRow);
-                        var buttonGroup = $('<div>',{class:"palette-module-set-button-group"}).appendTo(setRow);
+                        var setRow = $('<div>',{class:"red-ui-palette-module-set"}).appendTo(contentRow);
+                        var buttonGroup = $('<div>',{class:"red-ui-palette-module-set-button-group"}).appendTo(setRow);
                         var typeSwatches = {};
                         set.types.forEach(function(t) {
-                            var typeDiv = $('<div>',{class:"palette-module-type"}).appendTo(setRow);
-                            typeSwatches[t] = $('<span>',{class:"palette-module-type-swatch"}).appendTo(typeDiv);
-                            $('<span>',{class:"palette-module-type-node"}).text(t).appendTo(typeDiv);
+                            var typeDiv = $('<div>',{class:"red-ui-palette-module-type"}).appendTo(setRow);
+                            typeSwatches[t] = $('<span>',{class:"red-ui-palette-module-type-swatch"}).appendTo(typeDiv);
+                            $('<span>',{class:"red-ui-palette-module-type-node"}).text(t).appendTo(typeDiv);
                         })
-                        var enableButton = $('<a href="#" class="editor-button editor-button-small"></a>').appendTo(buttonGroup);
-                        enableButton.click(function(evt) {
+                        var enableButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').appendTo(buttonGroup);
+                        enableButton.on("click", function(evt) {
                             evt.preventDefault();
                             if (object.setUseCount[setName] === 0) {
                                 var currentSet = RED.nodes.registry.getNodeSet(set.id);
@@ -705,7 +700,7 @@ RED.palette.editor = (function() {
                             swatches: typeSwatches
                         };
                     });
-                    enableButton.click(function(evt) {
+                    enableButton.on("click", function(evt) {
                         evt.preventDefault();
                         if (object.totalUseCount === 0) {
                             changeNodeState(entry.name,(container.hasClass('disabled')),shade,function(xhr){
@@ -726,7 +721,7 @@ RED.palette.editor = (function() {
 
 
 
-        var installTab = $('<div>',{class:"palette-editor-tab hide"}).appendTo(content);
+        var installTab = $('<div>',{class:"red-ui-palette-editor-tab hide"}).appendTo(content);
 
         editorTabs.addTab({
             id: 'install',
@@ -734,9 +729,9 @@ RED.palette.editor = (function() {
             content: installTab
         })
 
-        var toolBar = $('<div>',{class:"palette-editor-toolbar"}).appendTo(installTab);
+        var toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
 
-        var searchDiv = $('<div>',{class:"palette-search"}).appendTo(installTab);
+        var searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
         searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
             .appendTo(searchDiv)
             .searchBox({
@@ -761,9 +756,9 @@ RED.palette.editor = (function() {
 
         $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar);
         var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
-        var sortRelevance = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
-        var sortAZ = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
-        var sortRecent = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
+        var sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
+        var sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
+        var sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
 
 
         var sortOpts = [
@@ -772,12 +767,12 @@ RED.palette.editor = (function() {
             {button: sortRecent, func: sortModulesRecent}
         ]
         sortOpts.forEach(function(opt) {
-            opt.button.click(function(e) {
+            opt.button.on("click", function(e) {
                 e.preventDefault();
                 if ($(this).hasClass("selected")) {
                     return;
                 }
-                $(".palette-editor-install-sort-option").removeClass("selected");
+                $(".red-ui-palette-editor-install-sort-option").removeClass("selected");
                 $(this).addClass("selected");
                 activeSort = opt.func;
                 refreshFilteredItems();
@@ -785,8 +780,8 @@ RED.palette.editor = (function() {
         });
 
         var refreshSpan = $('<span>').appendTo(toolBar);
-        var refreshButton = $('<a href="#" class="sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
-        refreshButton.click(function(e) {
+        var refreshButton = $('<a href="#" class="red-ui-sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
+        refreshButton.on("click", function(e) {
             e.preventDefault();
             loadedList = [];
             loadedIndex = {};
@@ -802,10 +797,10 @@ RED.palette.editor = (function() {
                     return
                 }
                 if (object.more) {
-                    container.addClass('palette-module-more');
-                    var moreRow = $('<div>',{class:"palette-module-header palette-module"}).appendTo(container);
+                    container.addClass('red-ui-palette-module-more');
+                    var moreRow = $('<div>',{class:"red-ui-palette-module-header palette-module"}).appendTo(container);
                     var moreLink = $('<a href="#"></a>').text(RED._('palette.editor.more',{count:object.more})).appendTo(moreRow);
-                    moreLink.click(function(e) {
+                    moreLink.on("click", function(e) {
                         e.preventDefault();
                         packageList.editableList('removeItem',object);
                         for (var i=object.start;i<Math.min(object.start+10,object.start+object.more);i++) {
@@ -819,15 +814,15 @@ RED.palette.editor = (function() {
                 }
                 if (object.info) {
                     var entry = object.info;
-                    var headerRow = $('<div>',{class:"palette-module-header"}).appendTo(container);
-                    var titleRow = $('<div class="palette-module-meta"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
-                    $('<span>',{class:"palette-module-name"}).text(entry.name||entry.id).appendTo(titleRow);
-                    $('<a target="_blank" class="palette-module-link"><i class="fa fa-external-link"></i></a>').attr('href',entry.url).appendTo(titleRow);
-                    var descRow = $('<div class="palette-module-meta"></div>').appendTo(headerRow);
-                    $('<div>',{class:"palette-module-description"}).text(entry.description).appendTo(descRow);
-                    var metaRow = $('<div class="palette-module-meta"></div>').appendTo(headerRow);
-                    $('<span class="palette-module-version"><i class="fa fa-tag"></i> '+entry.version+'</span>').appendTo(metaRow);
-                    $('<span class="palette-module-updated"><i class="fa fa-calendar"></i> '+formatUpdatedAt(entry.updated_at)+'</span>').appendTo(metaRow);
+                    var headerRow = $('<div>',{class:"red-ui-palette-module-header"}).appendTo(container);
+                    var titleRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
+                    $('<span>').text(entry.name||entry.id).appendTo(titleRow);
+                    $('<a target="_blank" class="red-ui-palette-module-link"><i class="fa fa-external-link"></i></a>').attr('href',entry.url).appendTo(titleRow);
+                    var descRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
+                    $('<div>',{class:"red-ui-palette-module-description"}).text(entry.description).appendTo(descRow);
+                    var metaRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
+                    $('<span class="red-ui-palette-module-version"><i class="fa fa-tag"></i> '+entry.version+'</span>').appendTo(metaRow);
+                    $('<span class="red-ui-palette-module-updated"><i class="fa fa-calendar"></i> '+formatUpdatedAt(entry.updated_at)+'</span>').appendTo(metaRow);
 
                     var duplicateType = false;
                     if (entry.types && entry.types.length > 0) {
@@ -839,13 +834,13 @@ RED.palette.editor = (function() {
                                 break;
                             }
                         }
-                        // $('<div>',{class:"palette-module-meta"}).text(entry.types.join(",")).appendTo(headerRow);
+                        // $('<div>',{class:"red-ui-palette-module-meta"}).text(entry.types.join(",")).appendTo(headerRow);
                     }
 
-                    var buttonRow = $('<div>',{class:"palette-module-meta"}).appendTo(headerRow);
-                    var buttonGroup = $('<div>',{class:"palette-module-button-group"}).appendTo(buttonRow);
-                    var installButton = $('<a href="#" class="editor-button editor-button-small"></a>').text(RED._('palette.editor.install')).appendTo(buttonGroup);
-                    installButton.click(function(e) {
+                    var buttonRow = $('<div>',{class:"red-ui-palette-module-meta"}).appendTo(headerRow);
+                    var buttonGroup = $('<div>',{class:"red-ui-palette-module-button-group"}).appendTo(buttonRow);
+                    var installButton = $('<a href="#" class="red-ui-button red-ui-button-small"></a>').text(RED._('palette.editor.install')).appendTo(buttonGroup);
+                    installButton.on("click", function(e) {
                         e.preventDefault();
                         if (!$(this).hasClass('disabled')) {
                             install(entry,container,function(xhr) {});
@@ -875,7 +870,7 @@ RED.palette.editor = (function() {
             }
         });
 
-        $('<div id="palette-module-install-shade" class="palette-module-shade hide"><div class="palette-module-shade-status"></div><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(installTab);
+        $('<div id="red-ui-palette-module-install-shade" class="red-ui-palette-module-shade hide"><div class="red-ui-palette-module-shade-status"></div><img src="red/images/spin.svg" class="red-ui-palette-spinner"/></div>').appendTo(installTab);
     }
     function update(entry,version,container,done) {
         if (RED.settings.theme('palette.editable') === false) {
@@ -894,11 +889,11 @@ RED.palette.editor = (function() {
                 },
                 {
                     text: RED._("palette.editor.confirm.button.update"),
-                    class: "primary palette-module-install-confirm-button-update",
+                    class: "primary red-ui-palette-module-install-confirm-button-update",
                     click: function() {
                         var spinner = RED.utils.addSpinnerOverlay(container, true);
                         var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
-                        $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).click(function(evt) {
+                        $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                             evt.preventDefault();
                             RED.actions.invoke("core:show-event-log");
                         });
@@ -953,11 +948,11 @@ RED.palette.editor = (function() {
                 },
                 {
                     text: RED._("palette.editor.confirm.button.remove"),
-                    class: "primary palette-module-install-confirm-button-remove",
+                    class: "primary red-ui-palette-module-install-confirm-button-remove",
                     click: function() {
                         var spinner = RED.utils.addSpinnerOverlay(container, true);
                         var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
-                        $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).click(function(evt) {
+                        $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                             evt.preventDefault();
                             RED.actions.invoke("core:show-event-log");
                         });
@@ -1009,7 +1004,7 @@ RED.palette.editor = (function() {
         if (entry.url) {
             buttons.push({
                 text: RED._("palette.editor.confirm.button.review"),
-                class: "primary palette-module-install-confirm-button-install",
+                class: "primary red-ui-palette-module-install-confirm-button-install",
                 click: function() {
                     var url = entry.url||"";
                     window.open(url);
@@ -1018,12 +1013,12 @@ RED.palette.editor = (function() {
         }
         buttons.push({
             text: RED._("palette.editor.confirm.button.install"),
-            class: "primary palette-module-install-confirm-button-install",
+            class: "primary red-ui-palette-module-install-confirm-button-install",
             click: function() {
                 var spinner = RED.utils.addSpinnerOverlay(container, true);
 
                 var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
-                $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).click(function(evt) {
+                $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                     evt.preventDefault();
                     RED.actions.invoke("core:show-event-log");
                 });

packages/node_modules/@node-red/editor-client/src/js/ui/palette.js

@@ -23,43 +23,43 @@ RED.palette = (function() {
     var sidebarControls;
 
     function createCategory(originalCategory,rootCategory,category,ns) {
-        if ($("#palette-base-category-"+rootCategory).length === 0) {
+        if ($("#red-ui-palette-base-category-"+rootCategory).length === 0) {
             createCategoryContainer(originalCategory,rootCategory, ns+":palette.label."+rootCategory);
         }
-        $("#palette-container-"+rootCategory).show();
-        if ($("#palette-"+category).length === 0) {
-            $("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
+        $("#red-ui-palette-container-"+rootCategory).show();
+        if ($("#red-ui-palette-"+category).length === 0) {
+            $("#red-ui-palette-base-category-"+rootCategory).append('<div id="red-ui-palette-'+category+'"></div>');
         }
     }
     function createCategoryContainer(originalCategory,category, labelId) {
         var label = RED._(labelId, {defaultValue:category});
         label = (label || category).replace(/_/g, " ");
-        var catDiv = $('<div id="palette-container-'+category+'" class="palette-category palette-close hide">'+
-            '<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
-            '<div class="palette-content" id="palette-base-category-'+category+'">'+
-            '<div id="palette-'+category+'-input"></div>'+
-            '<div id="palette-'+category+'-output"></div>'+
-            '<div id="palette-'+category+'-function"></div>'+
+        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>'+
+            '<div id="red-ui-palette-'+category+'-output"></div>'+
+            '<div id="red-ui-palette-'+category+'-function"></div>'+
             '</div>'+
-            '</div>').appendTo("#palette-container");
+            '</div>').appendTo("#red-ui-palette-container");
         catDiv.data('category',originalCategory);
         catDiv.data('label',label);
         categoryContainers[category] = {
             container: catDiv,
             close: function() {
-                catDiv.removeClass("palette-open");
-                catDiv.addClass("palette-closed");
-                $("#palette-base-category-"+category).slideUp();
-                $("#palette-header-"+category+" i").removeClass("expanded");
+                catDiv.removeClass("red-ui-palette-open");
+                catDiv.addClass("red-ui-palette-closed");
+                $("#red-ui-palette-base-category-"+category).slideUp();
+                $("#red-ui-palette-header-"+category+" i").removeClass("expanded");
             },
             open: function() {
-                catDiv.addClass("palette-open");
-                catDiv.removeClass("palette-closed");
-                $("#palette-base-category-"+category).slideDown();
-                $("#palette-header-"+category+" i").addClass("expanded");
+                catDiv.addClass("red-ui-palette-open");
+                catDiv.removeClass("red-ui-palette-closed");
+                $("#red-ui-palette-base-category-"+category).slideDown();
+                $("#red-ui-palette-header-"+category+" i").addClass("expanded");
             },
             toggle: function() {
-                if (catDiv.hasClass("palette-open")) {
+                if (catDiv.hasClass("red-ui-palette-open")) {
                     categoryContainers[category].close();
                 } else {
                     categoryContainers[category].open();
@@ -67,7 +67,7 @@ RED.palette = (function() {
             }
         };
 
-        $("#palette-header-"+category).on('click', function(e) {
+        $("#red-ui-palette-header-"+category).on('click', function(e) {
             categoryContainers[category].toggle();
         });
     }
@@ -85,17 +85,17 @@ RED.palette = (function() {
         var displayLines = [];
 
         var currentLine = words[0];
-        var currentLineWidth = RED.view.calculateTextWidth(currentLine, "palette_label", 0);
+        var currentLineWidth = RED.view.calculateTextWidth(currentLine, "red-ui-palette-label", 0);
 
         for (var i=1;i<words.length;i++) {
-            var newWidth = RED.view.calculateTextWidth(currentLine+" "+words[i], "palette_label", 0);
+            var newWidth = RED.view.calculateTextWidth(currentLine+" "+words[i], "red-ui-palette-label", 0);
             if (newWidth < nodeWidth) {
                 currentLine += " "+words[i];
                 currentLineWidth = newWidth;
             } else {
                 displayLines.push(currentLine);
                 currentLine = words[i];
-                currentLineWidth = RED.view.calculateTextWidth(currentLine, "palette_label", 0);
+                currentLineWidth = RED.view.calculateTextWidth(currentLine, "red-ui-palette-label", 0);
             }
         }
         displayLines.push(currentLine);
@@ -104,10 +104,10 @@ RED.palette = (function() {
         var multiLineNodeHeight = 8+(lineHeight*displayLines.length);
         el.css({height:multiLineNodeHeight+"px"});
 
-        var labelElement = el.find(".palette_label");
+        var labelElement = el.find(".red-ui-palette-label");
         labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines));
 
-        el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px"});
+        el.find(".red-ui-palette-port").css({top:(multiLineNodeHeight/2-5)+"px"});
 
         var popOverContent;
         try {
@@ -145,7 +145,7 @@ RED.palette = (function() {
 
     function setIcon(element,sf) {
         var icon_url = RED.utils.getNodeIcon(sf._def);
-        var iconContainer = element.find(".palette_icon_container");
+        var iconContainer = element.find(".red-ui-palette-icon-container");
         RED.utils.createIconElement(icon_url, iconContainer, true);
     }
 
@@ -155,7 +155,7 @@ RED.palette = (function() {
 
     function addNodeType(nt,def) {
         var nodeTypeId = escapeNodeType(nt);
-        if ($("#palette_node_"+nodeTypeId).length) {
+        if ($("#red-ui-palette-node_"+nodeTypeId).length) {
             return;
         }
         if (exclusion.indexOf(def.category)===-1) {
@@ -165,7 +165,7 @@ RED.palette = (function() {
             var rootCategory = category.split("-")[0];
 
             var d = document.createElement("div");
-            d.id = "palette_node_"+nodeTypeId;
+            d.id = "red-ui-palette-node_"+nodeTypeId;
             d.type = nt;
 
             var label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
@@ -178,17 +178,17 @@ RED.palette = (function() {
             }
 
             $('<div/>', {
-                class: "palette_label"
-                     + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " palette_label_right" : "")
+                class: "red-ui-palette-label"
+                     + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-label-right" : "")
             }).appendTo(d);
 
-            d.className="palette_node";
+            d.className="red-ui-palette-node";
 
             if (def.icon) {
                 var icon_url = RED.utils.getNodeIcon(def);
                 var iconContainer = $('<div/>', {
-                    class: "palette_icon_container"
-                         + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " palette_icon_container_right" : "")
+                    class: "red-ui-palette-icon-container"
+                         + (((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-icon-container-right" : "")
                 }).appendTo(d);
                 RED.utils.createIconElement(icon_url, iconContainer, true);
             }
@@ -197,19 +197,19 @@ RED.palette = (function() {
 
             if (def.outputs > 0) {
                 var portOut = document.createElement("div");
-                portOut.className = "palette_port palette_port_output";
+                portOut.className = "red-ui-palette-port red-ui-palette-port-output";
                 d.appendChild(portOut);
             }
 
             if (def.inputs > 0) {
                 var portIn = document.createElement("div");
-                portIn.className = "palette_port palette_port_input";
+                portIn.className = "red-ui-palette-port red-ui-palette-port-input";
                 d.appendChild(portIn);
             }
 
             createCategory(def.category,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id);
 
-            $("#palette-"+category).append(d);
+            $("#red-ui-palette-"+category).append(d);
 
             $(d).data('category',rootCategory);
 
@@ -232,19 +232,19 @@ RED.palette = (function() {
             //     html: true,
             //     container:'body'
             // });
-            $(d).click(function() {
+            $(d).on("click", 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"));
             });
-            var chart = $("#chart");
+            var chart = $("#red-ui-workspace-chart");
             var chartOffset = chart.offset();
-            var chartSVG = $("#chart>svg").get(0);
+            var chartSVG = $("#red-ui-workspace-chart>svg").get(0);
             var activeSpliceLink;
             var mouseX;
             var mouseY;
@@ -253,16 +253,16 @@ RED.palette = (function() {
             var paletteTop;
             $(d).draggable({
                 helper: 'clone',
-                appendTo: 'body',
+                appendTo: '#red-ui-editor',
                 revert: 'invalid',
-                revertDuration: 300,
-                containment:'#main-container',
+                revertDuration: 200,
+                containment:'#red-ui-main-container',
                 start: function() {
-                    paletteWidth = $("#palette").width();
-                    paletteTop = $("#palette").parent().position().top + $("#palette-container").position().top;
+                    paletteWidth = $("#red-ui-palette").width();
+                    paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
                     RED.view.focus();
                 },
-                stop: function() { d3.select('.link_splice').classed('link_splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
+                stop: function() { d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
                 drag: function(e,ui) {
                     ui.originalPosition.left = $('#' + e.target.id).offset().left;
 
@@ -293,7 +293,7 @@ RED.palette = (function() {
 
                                 for (var i=0;i<nodes.length;i++) {
                                     var node = d3.select(nodes[i]);
-                                    if (node.classed('link_background') && !node.classed('link_link')) {
+                                    if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) {
                                         var length = nodes[i].getTotalLength();
                                         for (var j=0;j<length;j+=10) {
                                             var p = nodes[i].getPointAtLength(j);
@@ -306,12 +306,12 @@ RED.palette = (function() {
                                     }
                                 }
                                 if (activeSpliceLink && activeSpliceLink !== bestLink) {
-                                    d3.select(activeSpliceLink.parentNode).classed('link_splice',false);
+                                    d3.select(activeSpliceLink.parentNode).classed('red-ui-flow-link-splice',false);
                                 }
                                 if (bestLink) {
-                                    d3.select(bestLink.parentNode).classed('link_splice',true)
+                                    d3.select(bestLink.parentNode).classed('red-ui-flow-link-splice',true)
                                 } else {
-                                    d3.select('.link_splice').classed('link_splice',false);
+                                    d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
                                 }
                                 if (activeSpliceLink !== bestLink) {
                                     if (bestLink) {
@@ -330,7 +330,7 @@ RED.palette = (function() {
 
             var nodeInfo = null;
             if (nt.indexOf("subflow:") === 0) {
-                $(d).dblclick(function(e) {
+                $(d).on("dblclick", function(e) {
                     RED.workspaces.show(nt.substring(8));
                     e.preventDefault();
                 });
@@ -338,8 +338,8 @@ RED.palette = (function() {
             }
             setLabel(nt,$(d),label,nodeInfo);
 
-            var categoryNode = $("#palette-container-"+rootCategory);
-            if (categoryNode.find(".palette_node").length === 1) {
+            var categoryNode = $("#red-ui-palette-container-"+rootCategory);
+            if (categoryNode.find(".red-ui-palette-node").length === 1) {
                 categoryContainers[rootCategory].open();
             }
 
@@ -348,12 +348,12 @@ RED.palette = (function() {
 
     function removeNodeType(nt) {
         var nodeTypeId = escapeNodeType(nt);
-        var paletteNode = $("#palette_node_"+nodeTypeId);
-        var categoryNode = paletteNode.closest(".palette-category");
+        var paletteNode = $("#red-ui-palette-node_"+nodeTypeId);
+        var categoryNode = paletteNode.closest(".red-ui-palette-category");
         paletteNode.remove();
-        if (categoryNode.find(".palette_node").length === 0) {
+        if (categoryNode.find(".red-ui-palette-node").length === 0) {
             if (categoryNode.find("i").hasClass("expanded")) {
-                categoryNode.find(".palette-content").slideToggle();
+                categoryNode.find(".red-ui-palette-content").slideToggle();
                 categoryNode.find("i").toggleClass("expanded");
             }
         }
@@ -361,10 +361,10 @@ RED.palette = (function() {
 
     function hideNodeType(nt) {
         var nodeTypeId = escapeNodeType(nt);
-        var paletteNode = $("#palette_node_"+nodeTypeId);
+        var paletteNode = $("#red-ui-palette-node_"+nodeTypeId);
         paletteNode.hide();
-        var categoryNode = paletteNode.closest(".palette-category");
-        var cl = categoryNode.find(".palette_node");
+        var categoryNode = paletteNode.closest(".red-ui-palette-category");
+        var cl = categoryNode.find(".red-ui-palette-node");
         var c = 0;
         for (var i = 0; i < cl.length; i++) {
             if ($(cl[i]).css('display') === 'none') { c += 1; }
@@ -374,32 +374,32 @@ RED.palette = (function() {
 
     function showNodeType(nt) {
         var nodeTypeId = escapeNodeType(nt);
-        var paletteNode = $("#palette_node_"+nodeTypeId);
-        var categoryNode = paletteNode.closest(".palette-category");
+        var paletteNode = $("#red-ui-palette-node_"+nodeTypeId);
+        var categoryNode = paletteNode.closest(".red-ui-palette-category");
         categoryNode.show();
         paletteNode.show();
     }
 
     function refreshNodeTypes() {
         RED.nodes.eachSubflow(function(sf) {
-            var paletteNode = $("#palette_node_subflow_"+sf.id.replace(".","_"));
-            var portInput = paletteNode.find(".palette_port_input");
-            var portOutput = paletteNode.find(".palette_port_output");
+            var paletteNode = $("#red-ui-palette-node_subflow_"+sf.id.replace(".","_"));
+            var portInput = paletteNode.find(".red-ui-palette-port-input");
+            var portOutput = paletteNode.find(".red-ui-palette-port-output");
 
-            var paletteLabel = paletteNode.find(".palette_label");
-            paletteLabel.attr("class","palette_label"
-                 + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " palette_label_right" : "")
+            var paletteLabel = paletteNode.find(".red-ui-palette-label");
+            paletteLabel.attr("class","red-ui-palette-label"
+                 + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-label-right" : "")
              );
 
-            var paletteIconContainer = paletteNode.find(".palette_icon_container");
-            paletteIconContainer.attr("class","palette_icon_container"
-                  + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " palette_icon_container_right" : "")
+            var paletteIconContainer = paletteNode.find(".red-ui-palette-icon-container");
+            paletteIconContainer.attr("class","red-ui-palette-icon-container"
+                  + (((!sf._def.align && sf.in.length !== 0 && sf.out.length === 0) || "right" === sf._def.align) ? " red-ui-palette-icon-container-right" : "")
               );
 
 
             if (portInput.length === 0 && sf.in.length > 0) {
                 var portIn = document.createElement("div");
-                portIn.className = "palette_port palette_port_input";
+                portIn.className = "red-ui-palette-port red-ui-palette-port-input";
                 paletteNode.append(portIn);
             } else if (portInput.length !== 0 && sf.in.length === 0) {
                 portInput.remove();
@@ -407,7 +407,7 @@ RED.palette = (function() {
 
             if (portOutput.length === 0 && sf.out.length > 0) {
                 var portOut = document.createElement("div");
-                portOut.className = "palette_port palette_port_output";
+                portOut.className = "red-ui-palette-port red-ui-palette-port-output";
                 paletteNode.append(portOut);
             } else if (portOutput.length !== 0 && sf.out.length === 0) {
                 portOutput.remove();
@@ -421,17 +421,17 @@ RED.palette = (function() {
                 var category = newCategory.replace(/ /g,"_");
                 createCategory(newCategory,category,category,"node-red");
 
-                var currentCategoryNode = paletteNode.closest(".palette-category");
+                var currentCategoryNode = paletteNode.closest(".red-ui-palette-category");
                 var newCategoryNode = $("#palette-"+category);
                 newCategoryNode.append(paletteNode);
-                if (newCategoryNode.find(".palette_node").length === 1) {
+                if (newCategoryNode.find(".red-ui-palette-node").length === 1) {
                     categoryContainers[category].open();
                 }
 
                 paletteNode.data('category',newCategory);
-                if (currentCategoryNode.find(".palette_node").length === 0) {
+                if (currentCategoryNode.find(".red-ui-palette-node").length === 0) {
                     if (currentCategoryNode.find("i").hasClass("expanded")) {
-                        currentCategoryNode.find(".palette-content").slideToggle();
+                        currentCategoryNode.find(".red-ui-palette-content").slideToggle();
                         currentCategoryNode.find("i").toggleClass("expanded");
                     }
                 }
@@ -444,8 +444,8 @@ RED.palette = (function() {
 
     function filterChange(val) {
         var re = new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),'i');
-        $("#palette-container .palette_node").each(function(i,el) {
-            var currentLabel = $(el).find(".palette_label").text();
+        $("#red-ui-palette-container .red-ui-palette-node").each(function(i,el) {
+            var currentLabel = $(el).find(".red-ui-palette-label").text();
             if (val === "" || re.test(el.id) || re.test(currentLabel)) {
                 $(this).show();
             } else {
@@ -456,7 +456,7 @@ RED.palette = (function() {
         for (var category in categoryContainers) {
             if (categoryContainers.hasOwnProperty(category)) {
                 if (categoryContainers[category].container
-                        .find(".palette_node")
+                        .find(".red-ui-palette-node")
                         .filter(function() { return $(this).css('display') !== 'none'}).length === 0) {
                     categoryContainers[category].close();
                 } else {
@@ -468,6 +468,13 @@ RED.palette = (function() {
 
     function init() {
 
+        $('<img src="red/images/spin.svg" class="red-ui-palette-spinner hide"/>').appendTo("#red-ui-palette");
+        $('<div id="red-ui-palette-search" class="red-ui-palette-search hide"><input type="text" data-i18n="[placeholder]palette.filter"></input></div>').appendTo("#red-ui-palette");
+        $('<div id="red-ui-palette-container" class="red-ui-palette-scroll hide"></div>').appendTo("#red-ui-palette");
+        $('<div class="red-ui-component-footer"></div>').appendTo("#red-ui-palette");
+        $('<div id="red-ui-palette-shade" class="hide"></div>').appendTo("#red-ui-palette");
+
+
         RED.events.on('registry:node-type-added', function(nodeType) {
             var def = RED.nodes.getType(nodeType);
             addNodeType(nodeType,def);
@@ -508,25 +515,27 @@ RED.palette = (function() {
             }
         });
 
-        $("#palette > .palette-spinner").show();
+        $("#red-ui-palette > .red-ui-palette-spinner").show();
 
-        $("#palette-search input").searchBox({
+
+        $("#red-ui-palette-search input").searchBox({
             delay: 100,
             change: function() {
                 filterChange($(this).val());
             }
         })
 
-        sidebarControls = $('<div class="sidebar-control-left"><i class="fa fa-chevron-left"</div>').appendTo($("#palette"));
+        sidebarControls = $('<div class="red-ui-sidebar-control-left"><i class="fa fa-chevron-left"></i></div>').appendTo($("#red-ui-palette"));
         RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette");
 
-        sidebarControls.click(function() {
+        sidebarControls.on("click", function() {
             RED.menu.toggleSelected("menu-item-palette");
         })
-        $("#palette").on("mouseenter", function() {
+        $("#red-ui-palette").on("mouseenter", function() {
             sidebarControls.toggle("slide", { direction: "left" }, 200);
         })
-        $("#palette").on("mouseleave", function() {
+        $("#red-ui-palette").on("mouseleave", function() {
+            sidebarControls.stop(false,true);
             sidebarControls.hide();
         })
 
@@ -546,7 +555,10 @@ RED.palette = (function() {
             createCategoryContainer(category, category, "palette.label."+category);
         });
 
-        $("#palette-collapse-all").on("click", function(e) {
+
+        var paletteFooterButtons = $('<span class="button-group"></span>').appendTo("#red-ui-palette .red-ui-component-footer");
+        var paletteCollapseAll = $('<button type="button" class="red-ui-footer-button"><i class="fa fa-angle-double-up"></i></button>').appendTo(paletteFooterButtons);
+        paletteCollapseAll.on("click", function(e) {
             e.preventDefault();
             for (var cat in categoryContainers) {
                 if (categoryContainers.hasOwnProperty(cat)) {
@@ -554,9 +566,10 @@ RED.palette = (function() {
                 }
             }
         });
-        RED.popover.tooltip($("#palette-collapse-all"),RED._('palette.actions.collapse-all'));
+        RED.popover.tooltip(paletteCollapseAll,RED._('palette.actions.collapse-all'));
 
-        $("#palette-expand-all").on("click", function(e) {
+        var paletteExpandAll = $('<button type="button" class="red-ui-footer-button"><i class="fa fa-angle-double-down"></i></button>').appendTo(paletteFooterButtons);
+        paletteExpandAll.on("click", function(e) {
             e.preventDefault();
             for (var cat in categoryContainers) {
                 if (categoryContainers.hasOwnProperty(cat)) {
@@ -564,7 +577,7 @@ RED.palette = (function() {
                 }
             }
         });
-        RED.popover.tooltip($("#palette-expand-all"),RED._('palette.actions.expand-all'));
+        RED.popover.tooltip(paletteExpandAll,RED._('palette.actions.expand-all'));
 
         RED.actions.add("core:toggle-palette", function(state) {
             if (state === undefined) {
@@ -576,20 +589,20 @@ RED.palette = (function() {
     }
     function togglePalette(state) {
         if (!state) {
-            $("#main-container").addClass("palette-closed");
+            $("#red-ui-main-container").addClass("red-ui-palette-closed");
             sidebarControls.hide();
             sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
         } else {
-            $("#main-container").removeClass("palette-closed");
+            $("#red-ui-main-container").removeClass("red-ui-palette-closed");
             sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
         }
-        setTimeout(function() { $(window).resize(); } ,200);
+        setTimeout(function() { $(window).trigger("resize"); } ,200);
     }
 
 
     function getCategories() {
         var categories = [];
-        $("#palette-container .palette-category").each(function(i,d) {
+        $("#red-ui-palette-container .red-ui-palette-category").each(function(i,d) {
             categories.push({id:$(d).data('category'),label:$(d).data('label')});
         })
         return categories;

packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js

@@ -46,7 +46,6 @@ RED.projects.settings = (function() {
         }
 
         settingsVisible = true;
-        var tabContainer;
 
         var trayOptions = {
             title: RED._("sidebar.project.projectSettings.title"),
@@ -66,9 +65,9 @@ RED.projects.settings = (function() {
             open: function(tray) {
                 var project = RED.projects.getActiveProject();
 
-                var trayBody = tray.find('.editor-tray-body');
+                var trayBody = tray.find('.red-ui-tray-body');
                 var settingsContent = $('<div></div>').appendTo(trayBody);
-                var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);
+                var tabContainer = $('<div></div>',{class:"red-ui-settings-tabs-container"}).appendTo(settingsContent);
 
                 $('<ul></ul>',{id:"user-settings-tabs"}).appendTo(tabContainer);
                 var settingsTabs = RED.tabs.create({
@@ -76,7 +75,7 @@ RED.projects.settings = (function() {
                     vertical: true,
                     onchange: function(tab) {
                         setTimeout(function() {
-                            $("#user-settings-tabs-content").children().hide();
+                            tabContents.children().hide();
                             $("#" + tab.id).show();
                             if (tab.pane.focus) {
                                 tab.pane.focus();
@@ -84,19 +83,19 @@ RED.projects.settings = (function() {
                         },50);
                     }
                 });
-                var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(settingsContent);
+                var tabContents = $('<div></div>',{class:"red-ui-settings-tabs-content"}).appendTo(settingsContent);
 
                 panes.forEach(function(pane) {
                     settingsTabs.addTab({
-                        id: "project-settings-tab-"+pane.id,
+                        id: "red-ui-project-settings-tab-"+pane.id,
                         label: pane.title,
                         pane: pane
                     });
                     pane.get(project).hide().appendTo(tabContents);
                 });
                 settingsContent.i18n();
-                settingsTabs.activateTab("project-settings-tab-"+(initialTab||'main'))
-                $("#sidebar-shade").show();
+                settingsTabs.activateTab("red-ui-project-settings-tab-"+(initialTab||'main'))
+                $("#red-ui-sidebar-shade").show();
             },
             close: function() {
                 settingsVisible = false;
@@ -105,7 +104,7 @@ RED.projects.settings = (function() {
                         pane.close();
                     }
                 });
-                $("#sidebar-shade").hide();
+                $("#red-ui-sidebar-shade").hide();
 
             },
             show: function() {}
@@ -161,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) {
@@ -173,16 +172,16 @@ RED.projects.settings = (function() {
         container.empty();
         var bg = $('<span class="button-row" style="position: relative; float: right; margin-right:0;"></span>').appendTo(container);
         var input = $('<input type="text" style="width: calc(100% - 150px); margin-right: 10px;">').val(summary||"").appendTo(container);
-        $('<button class="editor-button">' + RED._("common.label.cancel") + '</button>')
+        $('<button class="red-ui-button">' + RED._("common.label.cancel") + '</button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 updateProjectSummary(activeProject.summary, container);
                 editButton.show();
             });
-        $('<button class="editor-button">' + RED._("common.label.save") + '</button>')
+        $('<button class="red-ui-button">' + RED._("common.label.save") + '</button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 var v = input.val();
                 updateProjectSummary(v, container);
@@ -223,36 +222,36 @@ 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="project-settings-tab-main" class="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>',{style:"color: #999"}).appendTo(summary);
+        var summaryContent = $('<div></div>').appendTo(summary);
         updateProjectSummary(activeProject.summary, summaryContent);
         if (RED.user.hasPermission("projects.write")) {
-            $('<button class="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.editDescription') + '</button>')
+            $('<button class="red-ui-button red-ui-button-small" style="float: right;">' + RED._('sidebar.project.editDescription') + '</button>')
                 .prependTo(summary)
-                .click(function(evt) {
+                .on("click", function(evt) {
                     evt.preventDefault();
                     editSummary(activeProject, activeProject.summary, summaryContent);
                 });
         }
         $('<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);
 
         if (RED.user.hasPermission("projects.write")) {
-            $('<button class="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.editReadme') + '</button>')
+            $('<button class="red-ui-button red-ui-button-small" style="float: right;">' + RED._('sidebar.project.editReadme') + '</button>')
                 .prependTo(description)
-                .click(function(evt) {
+                .on("click", function(evt) {
                     evt.preventDefault();
                     editDescription(activeProject, descriptionContent);
                 });
@@ -323,7 +322,7 @@ RED.projects.settings = (function() {
 
     function saveDependencies(depsList,container,dependencies,complete) {
         var activeProject = RED.projects.getActiveProject();
-        var spinner = utils.addSpinnerOverlay(container).addClass('projects-dialog-spinner-contain');
+        var spinner = utils.addSpinnerOverlay(container).addClass('red-ui-component-spinner-contain');
         var done = function(err,res) {
             spinner.remove();
             if (err) {
@@ -379,11 +378,11 @@ RED.projects.settings = (function() {
     }
 
     function createDependenciesPane(activeProject) {
-        var pane = $('<div id="project-settings-tab-deps" class="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>')
+            $('<button class="red-ui-button red-ui-button-small" style="margin-top:10px;float: right;">' + RED._("sidebar.project.projectSettings.edit") + '</button>')
                 .appendTo(pane)
-                .click(function(evt) {
+                .on("click", function(evt) {
                     evt.preventDefault();
                     editDependencies(activeProject,null,pane,depsList)
                 });
@@ -393,17 +392,17 @@ RED.projects.settings = (function() {
             addButton: false,
             addItem: function(row,index,entry) {
                 // console.log(entry);
-                var headerRow = $('<div>',{class:"palette-module-header"}).appendTo(row);
+                var headerRow = $('<div>',{class:"red-ui-palette-module-header"}).appendTo(row);
                 if (entry.label) {
                     if (entry.index === 0) {
                         headerRow.addClass("red-ui-search-empty")
                     } else {
-                        row.parent().addClass("palette-module-section");
+                        row.parent().addClass("red-ui-palette-module-section");
                     }
                     headerRow.text(entry.label);
                     // if (RED.user.hasPermission("projects.write")) {
                     //     if (entry.index === 1) {
-                    //         var addButton = $('<button class="editor-button editor-button-small palette-module-button">add to project</button>').appendTo(headerRow).click(function(evt) {
+                    //         var addButton = $('<button class="red-ui-button red-ui-button-small red-ui-palette-module-button">add to project</button>').appendTo(headerRow).on("click", function(evt) {
                     //             evt.preventDefault();
                     //             var deps = $.extend(true, {}, activeProject.dependencies);
                     //             for (var m in modulesInUse) {
@@ -414,7 +413,7 @@ RED.projects.settings = (function() {
                     //             editDependencies(activeProject,JSON.stringify(deps,"",4),pane,depsList);
                     //         });
                     //     } else if (entry.index === 3) {
-                    //         var removeButton = $('<button class="editor-button editor-button-small palette-module-button">remove from project</button>').appendTo(headerRow).click(function(evt) {
+                    //         var removeButton = $('<button class="red-ui-button red-ui-button-small red-ui-palette-module-button">remove from project</button>').appendTo(headerRow).on("click", function(evt) {
                     //             evt.preventDefault();
                     //             var deps = $.extend(true, {}, activeProject.dependencies);
                     //             for (var m in activeProject.dependencies) {
@@ -427,17 +426,17 @@ RED.projects.settings = (function() {
                     //     }
                     // }
                 } else {
-                    headerRow.addClass("palette-module-header");
+                    headerRow.addClass("red-ui-palette-module-header");
                     if (!entry.installed) {
-                        headerRow.addClass("palette-module-not-installed");
+                        headerRow.addClass("red-ui-palette-module-not-installed");
                     } else if (entry.count === 0) {
-                        headerRow.addClass("palette-module-unused");
+                        headerRow.addClass("red-ui-palette-module-unused");
                     } else if (!entry.known) {
-                        headerRow.addClass("palette-module-unknown");
+                        headerRow.addClass("red-ui-palette-module-unknown");
                     }
 
                     entry.element = headerRow;
-                    var titleRow = $('<div class="palette-module-meta palette-module-name"></div>').appendTo(headerRow);
+                    var titleRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-name"></div>').appendTo(headerRow);
                     var iconClass = "fa-cube";
                     if (!entry.installed) {
                         iconClass = "fa-warning";
@@ -445,14 +444,14 @@ RED.projects.settings = (function() {
                     var icon = $('<i class="fa '+iconClass+'"></i>').appendTo(titleRow);
                     entry.icon = icon;
                     $('<span>').text(entry.id).appendTo(titleRow);
-                    var metaRow = $('<div class="palette-module-meta palette-module-version"><i class="fa fa-tag"></i></div>').appendTo(headerRow);
+                    var metaRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-version"><i class="fa fa-tag"></i></div>').appendTo(headerRow);
                     var versionSpan = $('<span>').text(entry.version).appendTo(metaRow);
-                    metaRow = $('<div class="palette-module-meta"></div>').appendTo(headerRow);
-                    var buttons = $('<div class="palette-module-button-group"></div>').appendTo(metaRow);
+                    metaRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
+                    var buttons = $('<div class="red-ui-palette-module-button-group"></div>').appendTo(metaRow);
                     if (RED.user.hasPermission("projects.write")) {
                         if (!entry.installed && RED.settings.theme('palette.editable') !== false) {
-                            $('<a href="#" class="editor-button editor-button-small">' + RED._("sidebar.project.projectSettings.install") + '</a>').appendTo(buttons)
-                                .click(function(evt) {
+                            $('<a href="#" class="red-ui-button red-ui-button-small">' + RED._("sidebar.project.projectSettings.install") + '</a>').appendTo(buttons)
+                                .on("click", function(evt) {
                                     evt.preventDefault();
                                     RED.palette.editor.install(entry,row,function(err) {
                                         if (!err) {
@@ -472,8 +471,8 @@ RED.projects.settings = (function() {
                                     });
                                 })
                         } else if (entry.known && entry.count === 0) {
-                            $('<a href="#" class="editor-button editor-button-small">' + RED._("sidebar.project.projectSettings.removeFromProject") + '</a>').appendTo(buttons)
-                                .click(function(evt) {
+                            $('<a href="#" class="red-ui-button red-ui-button-small">' + RED._("sidebar.project.projectSettings.removeFromProject") + '</a>').appendTo(buttons)
+                                .on("click", function(evt) {
                                     evt.preventDefault();
                                     var deps = $.extend(true, {}, activeProject.dependencies);
                                     delete deps[entry.id];
@@ -488,15 +487,15 @@ RED.projects.settings = (function() {
                                     });
                                 });
                         } else if (!entry.known) {
-                            $('<a href="#" class="editor-button editor-button-small">' + RED._("sidebar.project.projectSettings.addToProject") + '</a>').appendTo(buttons)
-                                .click(function(evt) {
+                            $('<a href="#" class="red-ui-button red-ui-button-small">' + RED._("sidebar.project.projectSettings.addToProject") + '</a>').appendTo(buttons)
+                                .on("click", function(evt) {
                                     evt.preventDefault();
                                     var deps = $.extend(true, {}, activeProject.dependencies);
                                     deps[entry.id] = modulesInUse[entry.id].version;
                                     saveDependencies(depsList,row,deps,function(err) {
                                         if (!err) {
                                             buttons.remove();
-                                            headerRow.removeClass("palette-module-unknown");
+                                            headerRow.removeClass("red-ui-palette-module-unknown");
                                         } else {
                                             console.log(err);
                                         }
@@ -531,7 +530,7 @@ RED.projects.settings = (function() {
         var dialogBody;
         var filesList;
         var selected;
-        var container = $('<div class="project-file-listing-container"></div>',{style:"position: relative; min-height: 175px; height: 175px;"}).hide().appendTo(row);
+        var container = $('<div class="red-ui-projects-file-listing-container"></div>',{style:"position: relative; min-height: 175px; height: 175px;"}).hide().appendTo(row);
         var spinner = utils.addSpinnerOverlay(container);
         $.getJSON("projects/"+activeProject.name+"/files",function(result) {
             var fileNames = Object.keys(result);
@@ -579,13 +578,13 @@ RED.projects.settings = (function() {
 
     function createFileSubList(container, files, current, selectFilter, onselect, style) {
         style = style || "";
-        var list = $('<ol>',{class:"projects-dialog-file-list", style:style}).appendTo(container).editableList({
+        var list = $('<ol>',{class:"red-ui-projects-dialog-file-list", style:style}).appendTo(container).editableList({
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var header = $('<div></div>',{class:"projects-dialog-file-list-entry"}).appendTo(row);
+                var header = $('<div></div>',{class:"red-ui-projects-dialog-file-list-entry"}).appendTo(row);
                 if (entry.children) {
-                    $('<span class="projects-dialog-file-list-entry-folder"><i class="fa fa-angle-right"></i> <i class="fa fa-folder-o"></i></span>').appendTo(header);
+                    $('<span class="red-ui-projects-dialog-file-list-entry-folder"><i class="fa fa-angle-right"></i> <i class="fa fa-folder-o"></i></span>').appendTo(header);
                     if (entry.children.length > 0) {
                         var children = $('<div></div>',{style:"padding-left: 20px;"}).appendTo(row);
                         if (current.indexOf(entry.path+"/") === 0) {
@@ -595,7 +594,7 @@ RED.projects.settings = (function() {
                         }
                         createFileSubList(children,entry.children,current,selectFilter,onselect);
                         header.addClass("selectable");
-                        header.click(function(e) {
+                        header.on("click", function(e) {
                             if ($(this).hasClass("expanded")) {
                                 $(this).removeClass("expanded");
                                 children.slideUp(200);
@@ -616,20 +615,20 @@ RED.projects.settings = (function() {
                         fileIcon = "fa-book";
                     } else if (/^\.git/i.test(entry.name)) {
                         fileIcon = "fa-code-fork";
-                        header.addClass("projects-dialog-file-list-entry-file-type-git");
+                        header.addClass("red-ui-projects-dialog-file-list-entry-file-type-git");
                     }
-                    $('<span class="projects-dialog-file-list-entry-file"> <i class="fa '+fileIcon+'"></i></span>').appendTo(header);
+                    $('<span class="red-ui-projects-dialog-file-list-entry-file"> <i class="fa '+fileIcon+'"></i></span>').appendTo(header);
                     if (selectFilter(entry)) {
                         header.addClass("selectable");
                         if (entry.path === current) {
                             header.addClass("selected");
                         }
-                        header.click(function(e) {
-                            $(".projects-dialog-file-list-entry.selected").removeClass("selected");
+                        header.on("click", function(e) {
+                            $(".red-ui-projects-dialog-file-list-entry.selected").removeClass("selected");
                             $(this).addClass("selected");
                             onselect(entry.path,true);
                         })
-                        header.dblclick(function(e) {
+                        header.on("dblclick", function(e) {
                             e.preventDefault();
                             onselect(entry.path,true);
                         })
@@ -637,7 +636,7 @@ RED.projects.settings = (function() {
                         header.addClass("unselectable");
                     }
                 }
-                $('<span class="projects-dialog-file-list-entry-name" style=""></span>').text(entry.name).appendTo(header);
+                $('<span class="red-ui-projects-dialog-file-list-entry-name" style=""></span>').text(entry.name).appendTo(header);
             }
         });
         if (!style) {
@@ -654,9 +653,9 @@ RED.projects.settings = (function() {
     //
     //     var flowFileInput = $('<input id="" type="text" style="width: calc(100% - 300px);">').val(flowFile).insertAfter(flowFileLabel);
     //
-    //     var flowFileInputSearch = $('<button class="editor-button" style="margin-left: 10px"><i class="fa fa-folder-open-o"></i></button>')
+    //     var flowFileInputSearch = $('<button class="red-ui-button" style="margin-left: 10px"><i class="fa fa-folder-open-o"></i></button>')
     //         .insertAfter(flowFileInput)
-    //         .click(function(e) {
+    //         .on("click", function(e) {
     //             showProjectFileListing(activeProject,'Select flow file',flowFileInput.val(),function(result) {
     //                 flowFileInput.val(result);
     //                 checkFiles();
@@ -671,9 +670,9 @@ RED.projects.settings = (function() {
     //     flowFileLabel.hide();
     //
     //     var bg = $('<span class="button-group" style="position: relative; float: right; margin-right:0;"></span>').prependTo(container);
-    //     $('<button class="editor-button">Cancel</button>')
+    //     $('<button class="red-ui-button">Cancel</button>')
     //         .appendTo(bg)
-    //         .click(function(evt) {
+    //         .on("click", function(evt) {
     //             evt.preventDefault();
     //
     //             flowFileLabel.show();
@@ -682,9 +681,9 @@ RED.projects.settings = (function() {
     //             bg.remove();
     //             editButton.show();
     //         });
-    //     var saveButton = $('<button class="editor-button">Save</button>')
+    //     var saveButton = $('<button class="red-ui-button">Save</button>')
     //         .appendTo(bg)
-    //         .click(function(evt) {
+    //         .on("click", function(evt) {
     //             evt.preventDefault();
     //             var newFlowFile = flowFileInput.val();
     //             var newCredsFile = credentialsFileInput.val();
@@ -729,18 +728,18 @@ RED.projects.settings = (function() {
 
     function createFilesSection(activeProject,pane) {
         var title = $('<h3></h3>').text(RED._("sidebar.project.projectSettings.files")).appendTo(pane);
-        var filesContainer = $('<div class="user-settings-section"></div>').appendTo(pane);
+        var filesContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
         if (RED.user.hasPermission("projects.write")) {
-            var editFilesButton = $('<button type="button" id="project-settings-tab-settings-file-edit" class="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.projectSettings.edit') + '</button>')
+            var editFilesButton = $('<button type="button" id="red-ui-project-settings-tab-settings-file-edit" class="red-ui-button red-ui-button-small" style="float: right;">' + RED._('sidebar.project.projectSettings.edit') + '</button>')
                 .appendTo(title)
-                .click(function(evt) {
+                .on("click", function(evt) {
                     evt.preventDefault();
                     formButtons.show();
                     editFilesButton.hide();
                     // packageFileLabelText.hide();
 
                     if (!activeProject.files.package) {
-                        packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.packageCreate"));
+                        packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.packageCreate"));
                         packageFileSubLabel.show();
                     }
 
@@ -754,7 +753,7 @@ RED.projects.settings = (function() {
 
                     // credentialStateLabel.parent().hide();
                     credentialStateLabel.addClass("uneditable-input");
-                    $(".user-settings-row-credentials").show();
+                    $(".red-ui-settings-row-credentials").show();
                     credentialStateLabel.css('height','auto');
                     credentialFormRows.hide();
                     credentialSecretButtons.show();
@@ -763,19 +762,19 @@ RED.projects.settings = (function() {
         var row;
 
         // Flow files
-        row = $('<div class="user-settings-row"></div>').appendTo(filesContainer);
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(filesContainer);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.package")).appendTo(row);
         var packageFileLabel = $('<div class="uneditable-input" style="padding:0">').appendTo(row);
         var packageFileLabelText = $('<span style="display:inline-block;  padding: 6px">').text(activeProject.files.package||"package.json").appendTo(packageFileLabel);
         var packageFileInput = $('<input type="hidden">').val(activeProject.files.package||"package.json").appendTo(packageFileLabel);
 
-        var packageFileInputSearch = $('<button type="button" class="editor-button toggle single" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 36px; height: 34px; position: absolute; top: -1px; right: -1px;"><i class="fa fa-folder-open-o"></i></button>')
+        var packageFileInputSearch = $('<button type="button" class="red-ui-button toggle single" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 36px; height: 34px; position: absolute; top: -1px; right: -1px;"><i class="fa fa-folder-open-o"></i></button>')
             .hide()
             .appendTo(packageFileLabel)
-            .click(function(e) {
+            .on("click", function(e) {
                 if ($(this).hasClass('selected')) {
                     $(this).removeClass('selected');
-                    packageFileLabel.find('.project-file-listing-container').slideUp(200,function() {
+                    packageFileLabel.find('.red-ui-projects-file-listing-container').slideUp(200,function() {
                          $(this).remove();
                          packageFileLabel.css('height','');
                      });
@@ -796,7 +795,7 @@ RED.projects.settings = (function() {
                                                 packageFileSubLabel.hide();
                                             }
                                             if (close) {
-                                                $(packageFileInputSearch).click();
+                                                $(packageFileInputSearch).trigger("click");
                                             }
                                             checkFiles();
                                         });
@@ -808,9 +807,9 @@ RED.projects.settings = (function() {
                 }
             })
         RED.popover.tooltip(packageFileInputSearch,RED._("sidebar.project.projectSettings.selectFile"));
-        var packageFileSubLabel = $('<label style="margin-left: 110px" class="projects-edit-form-sublabel"><small><span class="form-warning"><i class="fa fa-warning"></i> <span class="projects-edit-form-sublabel-text"></span></small></label>').appendTo(row).hide();
+        var packageFileSubLabel = $('<label style="margin-left: 110px" class="red-ui-projects-edit-form-sublabel"><small><span class="form-warning"><i class="fa fa-warning"></i> <span class="red-ui-projects-edit-form-sublabel-text"></span></small></label>').appendTo(row).hide();
         if (!activeProject.files.package) {
-            packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
+            packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
             packageFileSubLabel.show();
         }
 
@@ -819,7 +818,7 @@ RED.projects.settings = (function() {
         var projectRoot = projectPackage.substring(0,projectPackage.length - 12);
 
         // Flow files
-        row = $('<div class="user-settings-row"></div>').appendTo(filesContainer);
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(filesContainer);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.flow")).appendTo(row);
         var flowFileLabel = $('<div class="uneditable-input" style="padding:0">').appendTo(row);
         var flowFileLabelPrefixText = $('<span style="display:inline-block; padding: 6px 0 6px 6px">').text(projectRoot).appendTo(flowFileLabel);
@@ -838,13 +837,13 @@ RED.projects.settings = (function() {
             });
         }
         var flowFileInput = $('<input type="text" style="padding-left:1px; margin-top: -2px; margin-bottom: 0;border: none;">').val(flowFileName).hide().appendTo(flowFileLabel);
-        var flowFileInputSearch = $('<button type="button" class="editor-button toggle single" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 36px; height: 34px; position: absolute; top: -1px; right: -1px;"><i class="fa fa-folder-open-o"></i></button>')
+        var flowFileInputSearch = $('<button type="button" class="red-ui-button toggle single" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; width: 36px; height: 34px; position: absolute; top: -1px; right: -1px;"><i class="fa fa-folder-open-o"></i></button>')
             .hide()
             .appendTo(flowFileLabel)
-            .click(function(e) {
+            .on("click", function(e) {
                 if ($(this).hasClass('selected')) {
                     $(this).removeClass('selected');
-                    flowFileLabel.find('.project-file-listing-container').slideUp(200,function() {
+                    flowFileLabel.find('.red-ui-projects-file-listing-container').slideUp(200,function() {
                          $(this).remove();
                          flowFileLabel.css('height','');
                      });
@@ -865,7 +864,7 @@ RED.projects.settings = (function() {
 
                                                               }
                                                               if (isDblClick) {
-                                                                  $(flowFileInputSearch).click();
+                                                                  $(flowFileInputSearch).trigger("click");
                                                               }
                                                               checkFiles();
                                                           }
@@ -879,7 +878,7 @@ RED.projects.settings = (function() {
             })
         RED.popover.tooltip(flowFileInputSearch,RED._("sidebar.project.projectSettings.selectFile"));
 
-        row = $('<div class="user-settings-row"></div>').appendTo(filesContainer);
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(filesContainer);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.credentials")).appendTo(row);
 
         var credFileName = "flows_cred.json";
@@ -942,7 +941,7 @@ RED.projects.settings = (function() {
         // }
 
 
-        row = $('<div class="user-settings-row"></div>').appendTo(filesContainer);
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(filesContainer);
 
         $('<label></label>').appendTo(row);
         var credentialStateLabel = $('<span><i class="user-settings-credentials-state-icon fa"></i> <span class="user-settings-credentials-state"></span></span>').appendTo(row);
@@ -950,9 +949,9 @@ RED.projects.settings = (function() {
 
         credentialStateLabel.css('color','#666');
         credentialSecretButtons.css('vertical-align','top');
-        var credentialSecretResetButton = $('<button type="button" class="editor-button" style="vertical-align: top; width: 36px; margin-bottom: 10px"><i class="fa fa-trash-o"></i></button>')
+        var credentialSecretResetButton = $('<button type="button" class="red-ui-button" style="vertical-align: top; width: 36px; margin-bottom: 10px"><i class="fa fa-trash-o"></i></button>')
             .appendTo(credentialSecretButtons)
-            .click(function(e) {
+            .on("click", function(e) {
                 e.preventDefault();
                 if (!$(this).hasClass('selected')) {
                     credentialSecretNewInput.val("");
@@ -974,9 +973,9 @@ RED.projects.settings = (function() {
             });
         RED.popover.tooltip(credentialSecretResetButton,RED._("sidebar.project.projectSettings.resetTheEncryptionKey"));
 
-        var credentialSecretEditButton = $('<button type="button" class="editor-button" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; vertical-align: top; width: 36px; margin-bottom: 10px"><i class="fa fa-pencil"></i></button>')
+        var credentialSecretEditButton = $('<button type="button" class="red-ui-button" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px; vertical-align: top; width: 36px; margin-bottom: 10px"><i class="fa fa-pencil"></i></button>')
             .appendTo(credentialSecretButtons)
-            .click(function(e) {
+            .on("click", function(e) {
                 e.preventDefault();
                 if (!$(this).hasClass('selected')) {
                     credentialSecretExistingInput.val("");
@@ -1006,7 +1005,7 @@ RED.projects.settings = (function() {
 
         RED.popover.tooltip(credentialSecretEditButton,RED._("sidebar.project.projectSettings.changeTheEncryptionKey"));
 
-        row = $('<div class="user-settings-row user-settings-row-credentials"></div>').hide().appendTo(filesContainer);
+        row = $('<div class="red-ui-settings-row red-ui-settings-row-credentials"></div>').hide().appendTo(filesContainer);
 
 
 
@@ -1016,7 +1015,7 @@ RED.projects.settings = (function() {
         var credentialChangeLabel = $('<div style="margin: 20px 0 10px 5px;">' + RED._("sidebar.project.projectSettings.changeTheEncryptionKey") + '</div>').hide().appendTo(credentialFormRows);
         var credentialResetLabel = $('<div style="margin: 20px 0 10px 5px;">' + RED._("sidebar.project.projectSettings.resetTheEncryptionKey") + '</div>').hide().appendTo(credentialFormRows);
 
-        var credentialSecretExistingRow = $('<div class="user-settings-row user-settings-row-credentials"></div>').appendTo(credentialFormRows);
+        var credentialSecretExistingRow = $('<div class="red-ui-settings-row red-ui-settings-row-credentials"></div>').appendTo(credentialFormRows);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.currentKey")).appendTo(credentialSecretExistingRow);
         var credentialSecretExistingInput = $('<input type="password">').appendTo(credentialSecretExistingRow)
             .on("change keyup paste",function() {
@@ -1027,7 +1026,7 @@ RED.projects.settings = (function() {
                 checkFiles();
             });
 
-        var credentialSecretNewRow = $('<div class="user-settings-row user-settings-row-credentials"></div>').appendTo(credentialFormRows);
+        var credentialSecretNewRow = $('<div class="red-ui-settings-row red-ui-settings-row-credentials"></div>').appendTo(credentialFormRows);
 
 
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.newKey")).appendTo(credentialSecretNewRow);
@@ -1051,11 +1050,11 @@ RED.projects.settings = (function() {
             credentialStateLabel.css('height','');
 
             flowFileInputSearch.removeClass('selected');
-            flowFileLabel.find('.project-file-listing-container').remove();
+            flowFileLabel.find('.red-ui-projects-file-listing-container').remove();
             flowFileLabel.css('height','');
             flowFileLabel.css('color','');
 
-            $(".user-settings-row-credentials").hide();
+            $(".red-ui-settings-row-credentials").hide();
             credentialFormRows.hide();
             credentialSecretButtons.hide();
             credentialSecretResetButton.removeClass("selected");
@@ -1065,9 +1064,9 @@ RED.projects.settings = (function() {
         }
 
         var formButtons = $('<span class="button-row" style="position: relative; float: right; margin-right:0;"></span>').hide().appendTo(filesContainer);
-        $('<button type="button" class="editor-button">' + RED._("common.label.cancel") + '</button>')
+        $('<button type="button" class="red-ui-button">' + RED._("common.label.cancel") + '</button>')
             .appendTo(formButtons)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 var projectPackage = activeProject.files.package||"package.json";
                 var projectRoot = projectPackage.substring(0,projectPackage.length - 12);
@@ -1075,7 +1074,7 @@ RED.projects.settings = (function() {
                 credFileLabelPrefixText.text(projectRoot);
                 packageFileLabelText.text(activeProject.files.package||"package.json");
                 if (!activeProject.files.package) {
-                    packageFileSubLabel.find(".projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
+                    packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
                     packageFileSubLabel.show();
                 } else {
                     packageFileSubLabel.hide();
@@ -1084,9 +1083,9 @@ RED.projects.settings = (function() {
                 credFileLabelText.text(credFileName);
                 hideEditForm();
             });
-        var saveButton = $('<button type="button" class="editor-button">' + RED._("common.label.save") + '</button>')
+        var saveButton = $('<button type="button" class="red-ui-button">' + RED._("common.label.save") + '</button>')
             .appendTo(formButtons)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 var spinner = utils.addSpinnerOverlay(filesContainer);
                 var done = function(err) {
@@ -1179,10 +1178,10 @@ RED.projects.settings = (function() {
     }
 
     function createLocalBranchListSection(activeProject,pane) {
-        var localBranchContainer = $('<div class="user-settings-section"></div>').appendTo(pane);
+        var localBranchContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
         $('<h4></h4>').text(RED._("sidebar.project.projectSettings.branches")).appendTo(localBranchContainer);
 
-        var row = $('<div class="user-settings-row projects-dialog-list"></div>').appendTo(localBranchContainer);
+        var row = $('<div class="red-ui-settings-row red-ui-projects-dialog-list"></div>').appendTo(localBranchContainer);
 
 
         var branchList = $('<ol>').appendTo(row).editableList({
@@ -1190,7 +1189,7 @@ RED.projects.settings = (function() {
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var container = $('<div class="projects-dialog-list-entry">').appendTo(row);
+                var container = $('<div class="red-ui-projects-dialog-list-entry">').appendTo(row);
                 if (entry.empty) {
                     container.addClass('red-ui-search-empty');
                     container.text(RED._("sidebar.project.projectSettings.noBranches"));
@@ -1220,11 +1219,11 @@ RED.projects.settings = (function() {
 
                 if (!entry.current) {
                     var tools = $('<span class="entry-tools">').appendTo(container);
-                    $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>')
+                    $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>')
                         .appendTo(tools)
-                        .click(function(e) {
+                        .on("click", function(e) {
                             e.preventDefault();
-                            var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain');
+                            var spinner = utils.addSpinnerOverlay(row).addClass('red-ui-component-spinner-contain');
                             var notification = RED.notify(RED._("sidebar.project.projectSettings.deleteConfirm", { name: entry.name }), {
                                 type: "warning",
                                 modal: true,
@@ -1317,20 +1316,20 @@ RED.projects.settings = (function() {
 
         createLocalBranchListSection(activeProject,pane);
 
-        var repoContainer = $('<div class="user-settings-section"></div>').appendTo(pane);
+        var repoContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
         var title = $('<h4></h4>').text(RED._("sidebar.project.projectSettings.gitRemotes")).appendTo(repoContainer);
 
-        var editRepoButton = $('<button class="editor-button editor-button-small" style="float: right; margin-right: 10px;">' + RED._("sidebar.project.projectSettings.addRemote") + '</button>')
+        var editRepoButton = $('<button class="red-ui-button red-ui-button-small" style="float: right; margin-right: 10px;">' + RED._("sidebar.project.projectSettings.addRemote") + '</button>')
             .appendTo(title)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 editRepoButton.attr('disabled',true);
                 addRemoteDialog.slideDown(200, function() {
                     addRemoteDialog[0].scrollIntoView();
                     if (isEmpty) {
                         remoteNameInput.val('origin');
-                        remoteURLInput.focus();
+                        remoteURLInput.trigger("focus");
                     } else {
-                        remoteNameInput.focus();
+                        remoteNameInput.trigger("focus");
                     }
                     validateForm();
                 });
@@ -1339,16 +1338,16 @@ RED.projects.settings = (function() {
 
         var emptyItem = { empty: true };
         var isEmpty = true;
-        var row = $('<div class="user-settings-row"></div>').appendTo(repoContainer);
-        var addRemoteDialog = $('<div class="projects-dialog-list-dialog"></div>').hide().appendTo(row);
-        row = $('<div class="user-settings-row projects-dialog-list"></div>').appendTo(repoContainer);
+        var row = $('<div class="red-ui-settings-row"></div>').appendTo(repoContainer);
+        var addRemoteDialog = $('<div class="red-ui-projects-dialog-list-dialog"></div>').hide().appendTo(row);
+        row = $('<div class="red-ui-settings-row red-ui-projects-dialog-list"></div>').appendTo(repoContainer);
         var remotesList = $('<ol>').appendTo(row);
         remotesList.editableList({
             addButton: false,
             height: 'auto',
             addItem: function(row,index,entry) {
 
-                var container = $('<div class="projects-dialog-list-entry">').appendTo(row);
+                var container = $('<div class="red-ui-projects-dialog-list-entry">').appendTo(row);
                 if (entry.empty) {
                     container.addClass('red-ui-search-empty');
                     container.text(RED._("sidebar.project.projectSettings.noRemotes"));
@@ -1365,11 +1364,11 @@ RED.projects.settings = (function() {
 
                     }
                     var tools = $('<span class="entry-tools">').appendTo(container);
-                    $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>')
+                    $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>')
                         .appendTo(tools)
-                        .click(function(e) {
+                        .on("click", function(e) {
                             e.preventDefault();
-                            var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain');
+                            var spinner = utils.addSpinnerOverlay(row).addClass('red-ui-component-spinner-contain');
                             var notification = RED.notify(RED._("sidebar.project.projectSettings.deleteRemoteConfrim", { name: entry.name }), {
                                 type: "warning",
                                 modal: true,
@@ -1462,22 +1461,22 @@ RED.projects.settings = (function() {
         var remoteNameInputChanged = false;
         var remoteURLInputChanged = false;
 
-        $('<div class="projects-dialog-list-dialog-header">').text(RED._('sidebar.project.projectSettings.addRemote2')).appendTo(addRemoteDialog);
+        $('<div class="red-ui-projects-dialog-list-dialog-header">').text(RED._('sidebar.project.projectSettings.addRemote2')).appendTo(addRemoteDialog);
 
-        row = $('<div class="user-settings-row"></div>').appendTo(addRemoteDialog);
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(addRemoteDialog);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.remoteName")).appendTo(row);
         var remoteNameInput = $('<input type="text">').appendTo(row).on("change keyup paste",function() {
             remoteNameInputChanged = true;
             validateForm();
         });
-        $('<label class="projects-edit-form-sublabel"><small>' + RED._("sidebar.project.projectSettings.nameRule") + '</small></label>').appendTo(row).find("small");
-        row = $('<div class="user-settings-row"></div>').appendTo(addRemoteDialog);
+        $('<label class="red-ui-projects-edit-form-sublabel"><small>' + RED._("sidebar.project.projectSettings.nameRule") + '</small></label>').appendTo(row).find("small");
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(addRemoteDialog);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.url")).appendTo(row);
         var remoteURLInput = $('<input type="text">').appendTo(row).on("change keyup paste",function() {
             remoteURLInputChanged = true;
             validateForm()
         });
-        var remoteURLLabel = $('<label class="projects-edit-form-sublabel"><small>' + RED._("sidebar.project.projectSettings.urlRule") +'</small></label>').appendTo(row).find("small");
+        var remoteURLLabel = $('<label class="red-ui-projects-edit-form-sublabel"><small>' + RED._("sidebar.project.projectSettings.urlRule") +'</small></label>').appendTo(row).find("small");
 
         var hideEditForm = function() {
             editRepoButton.attr('disabled',false);
@@ -1491,17 +1490,17 @@ RED.projects.settings = (function() {
         }
         var formButtons = $('<span class="button-row" style="position: relative; float: right; margin: 10px;"></span>')
             .appendTo(addRemoteDialog);
-        $('<button class="editor-button">' + RED._("common.label.cancel") + '</button>')
+        $('<button class="red-ui-button">' + RED._("common.label.cancel") + '</button>')
             .appendTo(formButtons)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 hideEditForm();
             });
-        var saveButton = $('<button class="editor-button">' + RED._("sidebar.project.projectSettings.addRemote2") + '</button>')
+        var saveButton = $('<button class="red-ui-button">' + RED._("sidebar.project.projectSettings.addRemote2") + '</button>')
             .appendTo(formButtons)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
-                var spinner = utils.addSpinnerOverlay(addRemoteDialog).addClass('projects-dialog-spinner-contain');
+                var spinner = utils.addSpinnerOverlay(addRemoteDialog).addClass('red-ui-component-spinner-contain');
 
                 var payload = {
                     name: remoteNameInput.val(),
@@ -1577,7 +1576,7 @@ RED.projects.settings = (function() {
 
 
     function createSettingsPane(activeProject) {
-        var pane = $('<div id="project-settings-tab-settings" class="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);

packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js

@@ -26,15 +26,15 @@ RED.projects.userSettings = (function() {
 
         var title = $('<h3></h3>').text(RED._("editor:sidebar.project.userSettings.committerDetail")).appendTo(pane);
 
-        var gitconfigContainer = $('<div class="user-settings-section"></div>').appendTo(pane);
-        $('<div style="color:#aaa;"></div>').appendTo(gitconfigContainer).text(RED._("editor:sidebar.project.userSettings.committerTip"));
+        var gitconfigContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
+        $('<div class="red-ui-settings-section-description"></div>').appendTo(gitconfigContainer).text(RED._("editor:sidebar.project.userSettings.committerTip"));
 
-        var row = $('<div class="user-settings-row"></div>').appendTo(gitconfigContainer);
+        var row = $('<div class="red-ui-settings-row"></div>').appendTo(gitconfigContainer);
         $('<label for=""></label>').text(RED._("editor:sidebar.project.userSettings.userName")).appendTo(row);
         gitUsernameInput = $('<input type="text">').appendTo(row);
         gitUsernameInput.val(currentGitSettings.user.name||"");
 
-        row = $('<div class="user-settings-row"></div>').appendTo(gitconfigContainer);
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(gitconfigContainer);
         $('<label for=""></label>').text(RED._("editor:sidebar.project.userSettings.email")).appendTo(row);
         gitEmailInput = $('<input type="text">').appendTo(row);
         gitEmailInput.val(currentGitSettings.user.email||"");
@@ -42,20 +42,20 @@ RED.projects.userSettings = (function() {
 
 
     function createSSHKeySection(pane) {
-        var container = $('<div class="user-settings-section"></div>').appendTo(pane);
+        var container = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
         var popover;
         var title = $('<h3></h3>').text(RED._("editor:sidebar.project.userSettings.sshKeys")).appendTo(container);
-        var subtitle = $('<div style="color:#aaa;"></div>').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip"));
+        var subtitle = $('<div class="red-ui-settings-section-description"></div>').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip"));
 
-        var addKeyButton = $('<button id="user-settings-gitconfig-add-key" class="editor-button editor-button-small" style="float: right; margin-right: 10px;">'+RED._("editor:sidebar.project.userSettings.add")+'</button>')
+        var addKeyButton = $('<button id="user-settings-gitconfig-add-key" class="red-ui-button red-ui-button-small" style="float: right; margin-right: 10px;">'+RED._("editor:sidebar.project.userSettings.add")+'</button>')
             .appendTo(subtitle)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 addKeyButton.attr('disabled',true);
                 saveButton.attr('disabled',true);
                 // bg.children().removeClass("selected");
-                // addLocalButton.click();
+                // addLocalButton.trigger("click");
                 addKeyDialog.slideDown(200);
-                keyNameInput.focus();
+                keyNameInput.trigger("focus");
             });
 
         var validateForm = function() {
@@ -89,18 +89,18 @@ RED.projects.userSettings = (function() {
             }
         };
 
-        var row = $('<div class="user-settings-row"></div>').appendTo(container);
-        var addKeyDialog = $('<div class="projects-dialog-list-dialog"></div>').hide().appendTo(row);
-        $('<div class="projects-dialog-list-dialog-header">').text(RED._("editor:sidebar.project.userSettings.addSshKey")).appendTo(addKeyDialog);
+        var row = $('<div class="red-ui-settings-row"></div>').appendTo(container);
+        var addKeyDialog = $('<div class="red-ui-projects-dialog-list-dialog"></div>').hide().appendTo(row);
+        $('<div class="red-ui-projects-dialog-list-dialog-header">').text(RED._("editor:sidebar.project.userSettings.addSshKey")).appendTo(addKeyDialog);
         var addKeyDialogBody = $('<div>').appendTo(addKeyDialog);
 
-        row = $('<div class="user-settings-row"></div>').appendTo(addKeyDialogBody);
-        $('<div style="color:#aaa;"></div>').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip"));
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(addKeyDialogBody);
+        $('<div class="red-ui-settings-section-description"></div>').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip"));
         // var bg = $('<div></div>',{class:"button-group", style:"text-align: center"}).appendTo(row);
-        // var addLocalButton = $('<button class="editor-button toggle selected">use local key</button>').appendTo(bg);
-        // var uploadButton = $('<button class="editor-button toggle">upload key</button>').appendTo(bg);
-        // var generateButton = $('<button class="editor-button toggle">generate key</button>').appendTo(bg);
-        // bg.children().click(function(e) {
+        // var addLocalButton = $('<button class="red-ui-button toggle selected">use local key</button>').appendTo(bg);
+        // var uploadButton = $('<button class="red-ui-button toggle">upload key</button>').appendTo(bg);
+        // var generateButton = $('<button class="red-ui-button toggle">generate key</button>').appendTo(bg);
+        // bg.children().on("click", function(e) {
         //     e.preventDefault();
         //     if ($(this).hasClass("selected")) {
         //         return;
@@ -124,40 +124,40 @@ RED.projects.userSettings = (function() {
         // })
 
 
-        row = $('<div class="user-settings-row"></div>').appendTo(addKeyDialogBody);
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(addKeyDialogBody);
         $('<label for=""></label>').text(RED._("editor:sidebar.project.userSettings.name")).appendTo(row);
         var keyNameInputChanged = false;
         var keyNameInput = $('<input type="text">').appendTo(row).on("change keyup paste",function() {
             keyNameInputChanged = true;
             validateForm();
         });
-        $('<label class="projects-edit-form-sublabel"><small>'+RED._("editor:sidebar.project.userSettings.nameRule")+'</small></label>').appendTo(row).find("small");
+        $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("editor:sidebar.project.userSettings.nameRule")+'</small></label>').appendTo(row).find("small");
 
         var generateKeyPane = $('<div>').appendTo(addKeyDialogBody);
-        row = $('<div class="user-settings-row"></div>').appendTo(generateKeyPane);
+        row = $('<div class="red-ui-settings-row"></div>').appendTo(generateKeyPane);
         $('<label for=""></label>').text(RED._("editor:sidebar.project.userSettings.passphrase")).appendTo(row);
         var passphraseInput = $('<input type="password">').appendTo(row).on("change keyup paste",validateForm);
-        var passphraseInputSubLabel = $('<label class="projects-edit-form-sublabel"><small>'+RED._("editor:sidebar.project.userSettings.optional")+'</small></label>').appendTo(row).find("small");
+        var passphraseInputSubLabel = $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("editor:sidebar.project.userSettings.optional")+'</small></label>').appendTo(row).find("small");
 
         // var addLocalKeyPane = $('<div>').hide().appendTo(addKeyDialogBody);
-        // row = $('<div class="user-settings-row"></div>').appendTo(addLocalKeyPane);
+        // row = $('<div class="red-ui-settings-row"></div>').appendTo(addLocalKeyPane);
         // $('<label for=""></label>').text('Public key').appendTo(row);
         // var localPublicKeyPathInput = $('<input type="text">').appendTo(row).on("change keyup paste",validateForm);
-        // $('<label class="projects-edit-form-sublabel"><small>Public key file path, for example: ~/.ssh/id_rsa.pub</small></label>').appendTo(row).find("small");
-        // row = $('<div class="user-settings-row"></div>').appendTo(addLocalKeyPane);
+        // $('<label class="red-ui-projects-edit-form-sublabel"><small>Public key file path, for example: ~/.ssh/id_rsa.pub</small></label>').appendTo(row).find("small");
+        // row = $('<div class="red-ui-settings-row"></div>').appendTo(addLocalKeyPane);
         // $('<label for=""></label>').text('Private key').appendTo(row);
         // var localPrivateKeyPathInput = $('<input type="text">').appendTo(row).on("change keyup paste",validateForm);
-        // $('<label class="projects-edit-form-sublabel"><small>Private key file path, for example: ~/.ssh/id_rsa</small></label>').appendTo(row).find("small");
+        // $('<label class="red-ui-projects-edit-form-sublabel"><small>Private key file path, for example: ~/.ssh/id_rsa</small></label>').appendTo(row).find("small");
         //
         // var uploadKeyPane = $('<div>').hide().appendTo(addKeyDialogBody);
-        // row = $('<div class="user-settings-row"></div>').appendTo(uploadKeyPane);
+        // row = $('<div class="red-ui-settings-row"></div>').appendTo(uploadKeyPane);
         // $('<label for=""></label>').text('Public key').appendTo(row);
         // var publicKeyInput = $('<textarea>').appendTo(row).on("change keyup paste",validateForm);
-        // $('<label class="projects-edit-form-sublabel"><small>Paste in public key contents, for example: ~/.ssh/id_rsa.pub</small></label>').appendTo(row).find("small");
-        // row = $('<div class="user-settings-row"></div>').appendTo(uploadKeyPane);
+        // $('<label class="red-ui-projects-edit-form-sublabel"><small>Paste in public key contents, for example: ~/.ssh/id_rsa.pub</small></label>').appendTo(row).find("small");
+        // row = $('<div class="red-ui-settings-row"></div>').appendTo(uploadKeyPane);
         // $('<label for=""></label>').text('Private key').appendTo(row);
         // var privateKeyInput = $('<textarea>').appendTo(row).on("change keyup paste",validateForm);
-        // $('<label class="projects-edit-form-sublabel"><small>Paste in private key contents, for example: ~/.ssh/id_rsa</small></label>').appendTo(row).find("small");
+        // $('<label class="red-ui-projects-edit-form-sublabel"><small>Paste in private key contents, for example: ~/.ssh/id_rsa</small></label>').appendTo(row).find("small");
 
 
 
@@ -179,17 +179,17 @@ RED.projects.userSettings = (function() {
             }
         }
         var formButtons = $('<span class="button-row" style="position: relative; float: right; margin: 10px;"></span>').appendTo(addKeyDialog);
-        $('<button class="editor-button">'+RED._("editor:sidebar.project.userSettings.cancel")+'</button>')
+        $('<button class="red-ui-button">'+RED._("editor:sidebar.project.userSettings.cancel")+'</button>')
             .appendTo(formButtons)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 hideEditForm();
             });
-        var saveButton = $('<button class="editor-button">'+RED._("editor:sidebar.project.userSettings.generate")+'</button>')
+        var saveButton = $('<button class="red-ui-button">'+RED._("editor:sidebar.project.userSettings.generate")+'</button>')
             .appendTo(formButtons)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
-                var spinner = utils.addSpinnerOverlay(addKeyDialog).addClass('projects-dialog-spinner-contain');
+                var spinner = utils.addSpinnerOverlay(addKeyDialog).addClass('red-ui-component-spinner-contain');
                 var payload = {
                     name: keyNameInput.val()
                 };
@@ -239,12 +239,12 @@ RED.projects.userSettings = (function() {
                 },payload);
             });
 
-        row = $('<div class="user-settings-row projects-dialog-list"></div>').appendTo(container);
+        row = $('<div class="red-ui-settings-row red-ui-projects-dialog-list"></div>').appendTo(container);
         var emptyItem = { empty: true };
         var expandKey = function(container,entry) {
-            var row = $('<div class="projects-dialog-ssh-public-key">',{style:"position:relative"}).appendTo(container);
+            var row = $('<div class="red-ui-projects-dialog-ssh-public-key">',{style:"position:relative"}).appendTo(container);
             var keyBox = $('<pre>',{style:"min-height: 80px"}).appendTo(row);
-            var spinner = utils.addSpinnerOverlay(keyBox).addClass('projects-dialog-spinner-contain');
+            var spinner = utils.addSpinnerOverlay(keyBox).addClass('red-ui-component-spinner-contain');
             var options = {
                 url: 'settings/user/keys/'+entry.name,
                 type: "GET",
@@ -264,9 +264,9 @@ RED.projects.userSettings = (function() {
             utils.sendRequest(options);
 
             var formButtons = $('<span class="button-row" style="position: relative; float: right; margin: 10px;"></span>').appendTo(row);
-            $('<button class="editor-button editor-button-small">'+RED._("editor:sidebar.project.userSettings.copyPublicKey")+'</button>')
+            $('<button class="red-ui-button red-ui-button-small">'+RED._("editor:sidebar.project.userSettings.copyPublicKey")+'</button>')
                 .appendTo(formButtons)
-                .click(function(evt) {
+                .on("click", function(evt) {
                     try {
                         evt.stopPropagation();
                         evt.preventDefault();
@@ -281,23 +281,23 @@ RED.projects.userSettings = (function() {
 
             return row;
         }
-        var keyList = $('<ol class="projects-dialog-ssh-key-list">').appendTo(row).editableList({
+        var keyList = $('<ol class="red-ui-projects-dialog-ssh-key-list">').appendTo(row).editableList({
             height: 'auto',
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var container = $('<div class="projects-dialog-list-entry">').appendTo(row);
+                var container = $('<div class="red-ui-projects-dialog-list-entry">').appendTo(row);
                 if (entry.empty) {
                     container.addClass('red-ui-search-empty');
                     container.text(RED._("editor:sidebar.project.userSettings.noSshKeys"));
                     return;
                 }
-                var topRow = $('<div class="projects-dialog-ssh-key-header">').appendTo(container);
+                var topRow = $('<div class="red-ui-projects-dialog-ssh-key-header">').appendTo(container);
                 $('<span class="entry-icon"><i class="fa fa-key"></i></span>').appendTo(topRow);
                 $('<span class="entry-name">').text(entry.name).appendTo(topRow);
                 var tools = $('<span class="button-row entry-tools">').appendTo(topRow);
                 var expandedRow;
-                topRow.click(function(e) {
+                topRow.on("click", function(e) {
                     if (expandedRow) {
                         expandedRow.slideUp(200,function() {
                             expandedRow.remove();
@@ -308,11 +308,11 @@ RED.projects.userSettings = (function() {
                     }
                     })
                 if (!entry.system) {
-                    $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>')
+                    $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>')
                         .appendTo(tools)
-                        .click(function(e) {
+                        .on("click", function(e) {
                             e.stopPropagation();
-                            var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain');
+                            var spinner = utils.addSpinnerOverlay(row).addClass('red-ui-component-spinner-contain');
                             var notification = RED.notify(RED._("editor:sidebar.project.userSettings.deleteConfirm", {name:entry.name}), {
                                 type: 'warning',
                                 modal: true,
@@ -389,7 +389,7 @@ RED.projects.userSettings = (function() {
     }
 
     function createSettingsPane(activeProject) {
-        var pane = $('<div id="user-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;

packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js

@@ -115,10 +115,10 @@ RED.sidebar.versionControl = (function() {
     }
 
     function createChangeEntry(row, entry, status, state) {
-        row.addClass("sidebar-version-control-change-entry");
+        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({
@@ -128,9 +128,9 @@ RED.sidebar.versionControl = (function() {
                 })
                 var toolbar = $('<div style="float: right; margin: 5px; height: 50px;"></div>').appendTo(container);
 
-                $('<button class="editor-button editor-button-small"></button>').text(entry.button.label)
+                $('<button class="red-ui-button red-ui-button-small"></button>').text(entry.button.label)
                     .appendTo(toolbar)
-                    .click(entry.button.click);
+                    .on("click", entry.button.click);
             }
             return;
         }
@@ -139,23 +139,23 @@ RED.sidebar.versionControl = (function() {
         var icon = $('<i class=""></i>').appendTo(container);
         var entryLink = $('<a href="#">')
             .appendTo(container)
-            .click(function(e) {
+            .on("click", function(e) {
                 e.preventDefault();
                 viewFileDiff(entry,state);
             });
         var label = $('<span>').appendTo(entryLink);
 
-        var entryTools = $('<div class="sidebar-version-control-change-entry-tools">').appendTo(row);
+        var entryTools = $('<div class="red-ui-sidebar-vc-change-entry-tools">').appendTo(row);
         var bg;
         var revertButton;
         if (state === 'unstaged') {
             bg = $('<span class="button-group" style="margin-right: 5px;"></span>').appendTo(entryTools);
-            revertButton = $('<button class="editor-button editor-button-small"><i class="fa fa-reply"></i></button>')
+            revertButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-reply"></i></button>')
                 .appendTo(bg)
-                .click(function(evt) {
+                .on("click", function(evt) {
                     evt.preventDefault();
 
-                    var spinner = utils.addSpinnerOverlay(container).addClass('projects-dialog-spinner-contain');
+                    var spinner = utils.addSpinnerOverlay(container).addClass('red-ui-component-spinner-contain');
                     var notification = RED.notify(RED._("sidebar.project.versionControl.revert",{file:entry.file}), {
                         type: "warning",
                         modal: true,
@@ -205,9 +205,9 @@ RED.sidebar.versionControl = (function() {
         }
         bg = $('<span class="button-group"></span>').appendTo(entryTools);
         if (state !== 'unmerged') {
-            var stageButton = $('<button class="editor-button editor-button-small"><i class="fa fa-'+((state==='unstaged')?"plus":"minus")+'"></i></button>')
+            var stageButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-'+((state==='unstaged')?"plus":"minus")+'"></i></button>')
                 .appendTo(bg)
-                .click(function(evt) {
+                .on("click", function(evt) {
                     evt.preventDefault();
                     var activeProject = RED.projects.getActiveProject();
                     entry.spinner = utils.addSpinnerOverlay(row).addClass('projects-version-control-spinner-sidebar');
@@ -237,22 +237,22 @@ RED.sidebar.versionControl = (function() {
             container.removeClass();
             var iconClass = "";
             if (status === 'A') {
-                container.addClass("node-diff-added");
+                container.addClass("red-ui-diff-state-added");
                 iconClass = "fa-plus-square";
             } else if (status === '?') {
-                container.addClass("node-diff-unchanged");
+                container.addClass("red-ui-diff-state-unchanged");
                 iconClass = "fa-question-circle-o";
             } else if (status === 'D') {
-                container.addClass("node-diff-deleted");
+                container.addClass("red-ui-diff-state-deleted");
                 iconClass = "fa-minus-square";
             } else if (status === 'M') {
-                container.addClass("node-diff-changed");
+                container.addClass("red-ui-diff-state-changed");
                 iconClass = "fa-square";
             } else if (status === 'R') {
-                container.addClass("node-diff-changed");
+                container.addClass("red-ui-diff-state-changed");
                 iconClass = "fa-toggle-right";
             } else if (status === 'U') {
-                container.addClass("node-diff-conflicted");
+                container.addClass("red-ui-diff-state-conflicted");
                 iconClass = "fa-exclamation-triangle";
             } else {
                 iconClass = "fa-exclamation-triangle"
@@ -306,8 +306,8 @@ RED.sidebar.versionControl = (function() {
         RED.events.on("login",function() {
             refresh(true);
         });
-        sidebarContent = $('<div>', {class:"sidebar-version-control"});
-        var stackContainer = $("<div>",{class:"sidebar-version-control-stack"}).appendTo(sidebarContent);
+        sidebarContent = $('<div>', {class:"red-ui-sidebar-vc"});
+        var stackContainer = $("<div>",{class:"red-ui-sidebar-vc-stack"}).appendTo(sidebarContent);
         sections = RED.stack.create({
             container: stackContainer,
             fill: true,
@@ -322,9 +322,9 @@ RED.sidebar.versionControl = (function() {
         localChanges.content.css({height:"100%"});
 
         var bg = $('<div style="float: right"></div>').appendTo(localChanges.header);
-        var refreshButton = $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        var refreshButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 evt.stopPropagation();
                 refresh(true);
@@ -334,11 +334,11 @@ RED.sidebar.versionControl = (function() {
         emptyStagedItem = { label: RED._("sidebar.project.versionControl.none") };
         emptyMergedItem = { label: RED._("sidebar.project.versionControl.conflictResolve") };
 
-        var unstagedContent = $('<div class="sidebar-version-control-change-container"></div>').appendTo(localChanges.content);
-        var header = $('<div class="sidebar-version-control-change-header">'+RED._("sidebar.project.versionControl.localFiles")+'</div>').appendTo(unstagedContent);
-        stageAllButton = $('<button class="editor-button editor-button-small" style="float: right"><i class="fa fa-plus"></i> '+RED._("sidebar.project.versionControl.all")+'</button>')
+        var unstagedContent = $('<div class="red-ui-sidebar-vc-change-container"></div>').appendTo(localChanges.content);
+        var header = $('<div class="red-ui-sidebar-vc-change-header">'+RED._("sidebar.project.versionControl.localFiles")+'</div>').appendTo(unstagedContent);
+        stageAllButton = $('<button class="red-ui-button red-ui-button-small" style="float: right"><i class="fa fa-plus"></i> '+RED._("sidebar.project.versionControl.all")+'</button>')
             .appendTo(header)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 evt.stopPropagation();
                 var toStage = Object.keys(allChanges).filter(function(fn) {
@@ -365,13 +365,13 @@ RED.sidebar.versionControl = (function() {
 
         })
 
-        unmergedContent = $('<div class="sidebar-version-control-change-container"></div>').appendTo(localChanges.content);
+        unmergedContent = $('<div class="red-ui-sidebar-vc-change-container"></div>').appendTo(localChanges.content);
 
-        header = $('<div class="sidebar-version-control-change-header">'+RED._("sidebar.project.versionControl.unmergedChanges")+'</div>').appendTo(unmergedContent);
+        header = $('<div class="red-ui-sidebar-vc-change-header">'+RED._("sidebar.project.versionControl.unmergedChanges")+'</div>').appendTo(unmergedContent);
         bg = $('<div style="float: right"></div>').appendTo(header);
-        var abortMergeButton = $('<button class="editor-button editor-button-small" style="margin-right: 5px;">'+RED._("sidebar.project.versionControl.abortMerge")+'</button>')
+        var abortMergeButton = $('<button class="red-ui-button red-ui-button-small" style="margin-right: 5px;">'+RED._("sidebar.project.versionControl.abortMerge")+'</button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 evt.stopPropagation();
                 var spinner = utils.addSpinnerOverlay(unmergedContent);
@@ -429,9 +429,9 @@ RED.sidebar.versionControl = (function() {
         })
 
 
-        var stagedContent = $('<div class="sidebar-version-control-change-container"></div>').appendTo(localChanges.content);
+        var stagedContent = $('<div class="red-ui-sidebar-vc-change-container"></div>').appendTo(localChanges.content);
 
-        header = $('<div class="sidebar-version-control-change-header">'+RED._("sidebar.project.versionControl.changeToCommit")+'</div>').appendTo(stagedContent);
+        header = $('<div class="red-ui-sidebar-vc-change-header">'+RED._("sidebar.project.versionControl.changeToCommit")+'</div>').appendTo(stagedContent);
 
         bg = $('<div style="float: right"></div>').appendTo(header);
         var showCommitBox = function() {
@@ -452,19 +452,19 @@ RED.sidebar.versionControl = (function() {
             unstageAllButton.prop("disabled",true);
             commitButton.prop("disabled",true);
             abortMergeButton.prop("disabled",true);
-            commitMessage.focus();
+            commitMessage.trigger("focus");
         }
-        commitButton = $('<button class="editor-button editor-button-small" style="margin-right: 5px;">'+RED._("sidebar.project.versionControl.commit")+'</button>')
+        commitButton = $('<button class="red-ui-button red-ui-button-small" style="margin-right: 5px;">'+RED._("sidebar.project.versionControl.commit")+'</button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 evt.stopPropagation();
                 showCommitBox();
             });
         RED.popover.tooltip(commitButton,RED._("sidebar.project.versionControl.commitChanges"));
-        unstageAllButton = $('<button class="editor-button editor-button-small"><i class="fa fa-minus"></i> '+RED._("sidebar.project.versionControl.all")+'</button>')
+        unstageAllButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-minus"></i> '+RED._("sidebar.project.versionControl.all")+'</button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 evt.stopPropagation();
                 var toUnstage = Object.keys(allChanges).filter(function(fn) {
@@ -488,18 +488,18 @@ RED.sidebar.versionControl = (function() {
             }
         })
 
-        commitBox = $('<div class="sidebar-version-control-slide-box sidebar-version-control-slide-box-bottom"></div>').hide().appendTo(localChanges.content);
+        commitBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-bottom"></div>').hide().appendTo(localChanges.content);
 
-        var commitMessage = $('<textarea placeholder='+RED._("sidebar.project.versionControl.commitPlaceholder")+'></textarea>')
+        var commitMessage = $('<textarea></textarea>').attr("placeholder",RED._("sidebar.project.versionControl.commitPlaceholder"))
             .appendTo(commitBox)
             .on("change keyup paste",function() {
                 submitCommitButton.prop('disabled',$(this).val().trim()==="");
             });
-        var commitToolbar = $('<div class="sidebar-version-control-slide-box-toolbar button-group">').appendTo(commitBox);
+        var commitToolbar = $('<div class="red-ui-sidebar-vc-slide-box-toolbar button-group">').appendTo(commitBox);
 
-        var cancelCommitButton = $('<button class="editor-button">'+RED._("sidebar.project.versionControl.cancelCapital")+'</button>')
+        var cancelCommitButton = $('<button class="red-ui-button">'+RED._("sidebar.project.versionControl.cancelCapital")+'</button>')
             .appendTo(commitToolbar)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 commitMessage.val("");
                 unstagedContent.css("height","");
@@ -515,11 +515,11 @@ RED.sidebar.versionControl = (function() {
                 abortMergeButton.prop("disabled",false);
 
             })
-        var submitCommitButton = $('<button class="editor-button">'+RED._("sidebar.project.versionControl.commitCapital")+'</button>')
+        var submitCommitButton = $('<button class="red-ui-button">'+RED._("sidebar.project.versionControl.commitCapital")+'</button>')
             .appendTo(commitToolbar)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
-                var spinner = utils.addSpinnerOverlay(submitCommitButton).addClass('projects-dialog-spinner-sidebar');
+                var spinner = utils.addSpinnerOverlay(submitCommitButton).addClass('red-ui-component-spinner-sidebar');
                 var activeProject = RED.projects.getActiveProject();
                 RED.deploy.setDeployInflight(true);
                 utils.sendRequest({
@@ -531,7 +531,7 @@ RED.sidebar.versionControl = (function() {
                         },
                         200: function(data) {
                             spinner.remove();
-                            cancelCommitButton.click();
+                            cancelCommitButton.trigger("click");
                             refresh(true);
                         },
                         400: {
@@ -556,20 +556,20 @@ RED.sidebar.versionControl = (function() {
         });
 
         bg = $('<div style="float: right"></div>').appendTo(localHistory.header);
-        refreshButton = $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        refreshButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 evt.stopPropagation();
                 refresh(true,true);
             })
         RED.popover.tooltip(refreshButton,RED._("sidebar.project.versionControl.refreshCommitHistory"))
 
-        var localBranchToolbar = $('<div class="sidebar-version-control-change-header" style="text-align: right;"></div>').appendTo(localHistory.content);
+        var localBranchToolbar = $('<div class="red-ui-sidebar-vc-change-header" style="text-align: right;"></div>').appendTo(localHistory.content);
 
-        var localBranchButton = $('<button class="editor-button editor-button-small"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.branch")+' <span id="sidebar-version-control-local-branch"></span></button>')
+        var localBranchButton = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.branch")+' <span id="red-ui-sidebar-vc-local-branch"></span></button>')
             .appendTo(localBranchToolbar)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 if ($(this).hasClass('selected')) {
                     closeBranchBox();
@@ -587,17 +587,17 @@ RED.sidebar.versionControl = (function() {
                 }
             })
         RED.popover.tooltip(localBranchButton,RED._("sidebar.project.versionControl.changeLocalBranch"))
-        var repoStatusButton = $('<button class="editor-button editor-button-small" style="margin-left: 10px;" id="sidebar-version-control-repo-status-button">'+
-                                 '<span id="sidebar-version-control-repo-status-stats">'+
-                                    '<i class="fa fa-long-arrow-up"></i> <span id="sidebar-version-control-commits-ahead"></span> '+
-                                    '<i class="fa fa-long-arrow-down"></i> <span id="sidebar-version-control-commits-behind"></span>'+
+        var repoStatusButton = $('<button class="red-ui-button red-ui-button-small" style="margin-left: 10px;" id="red-ui-sidebar-vc-repo-status-button">'+
+                                 '<span id="red-ui-sidebar-vc-repo-status-stats">'+
+                                    '<i class="fa fa-long-arrow-up"></i> <span id="red-ui-sidebar-vc-commits-ahead"></span> '+
+                                    '<i class="fa fa-long-arrow-down"></i> <span id="red-ui-sidebar-vc-commits-behind"></span>'+
                                  '</span>'+
-                                 '<span id="sidebar-version-control-repo-status-auth-issue">'+
+                                 '<span id="red-ui-sidebar-vc-repo-status-auth-issue">'+
                                     '<i class="fa fa-warning"></i>'+
                                  '</span>'+
                                  '</button>')
             .appendTo(localBranchToolbar)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 if ($(this).hasClass('selected')) {
                     closeRemoteBox();
@@ -606,7 +606,7 @@ RED.sidebar.versionControl = (function() {
                     localCommitListShade.show();
                     $(this).addClass('selected');
                     var activeProject = RED.projects.getActiveProject();
-                    $("#sidebar-version-control-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt);
+                    $("#red-ui-sidebar-vc-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt);
                     remoteBox.show();
 
                     setTimeout(function() {
@@ -618,21 +618,21 @@ 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,
             addItem: function(row,index,entry) {
-                row.addClass('sidebar-version-control-commit-entry');
+                row.addClass('red-ui-sidebar-vc-commit-entry');
                 if (entry.url) {
-                    row.addClass('sidebar-version-control-commit-more');
+                    row.addClass('red-ui-sidebar-vc-commit-more');
                     row.text("+ "+(entry.total-entry.totalKnown)+RED._("sidebar.project.versionControl.moreCommits"));
-                    row.click(function(e) {
+                    row.on("click", function(e) {
                         e.preventDefault();
                         getCommits(entry.url,localCommitList,row,entry.limit,entry.before);
                     })
                 } else {
-                    row.click(function(e) {
+                    row.on("click", function(e) {
                         var activeProject = RED.projects.getActiveProject();
                         if (activeProject) {
                             $.getJSON("projects/"+activeProject.name+"/commits/"+entry.sha,function(result) {
@@ -648,21 +648,21 @@ RED.sidebar.versionControl = (function() {
                         }
                     });
                     var container = $('<div>').appendTo(row);
-                    $('<div class="sidebar-version-control-commit-subject">').text(entry.subject).appendTo(container);
+                    $('<div class="red-ui-sidebar-vc-commit-subject">').text(entry.subject).appendTo(container);
                     if (entry.refs) {
-                        var refDiv = $('<div class="sidebar-version-control-commit-refs">').appendTo(container);
+                        var refDiv = $('<div class="red-ui-sidebar-vc-commit-refs">').appendTo(container);
                         entry.refs.forEach(function(ref) {
                             var label = ref;
                             if (/HEAD -> /.test(ref)) {
                                 label = ref.substring(8);
                             }
-                            $('<span class="sidebar-version-control-commit-ref">').text(label).appendTo(refDiv);
+                            $('<span class="red-ui-sidebar-vc-commit-ref">').text(label).appendTo(refDiv);
                         });
-                        row.addClass('sidebar-version-control-commit-head');
+                        row.addClass('red-ui-sidebar-vc-commit-head');
                     }
-                    $('<div class="sidebar-version-control-commit-sha">').text(entry.sha.substring(0,7)).appendTo(container);
-                    // $('<div class="sidebar-version-control-commit-user">').text(entry.author).appendTo(container);
-                    $('<div class="sidebar-version-control-commit-date">').text(humanizeSinceDate(parseInt(entry.date))).appendTo(container);
+                    $('<div class="red-ui-sidebar-vc-commit-sha">').text(entry.sha.substring(0,7)).appendTo(container);
+                    // $('<div class="red-ui-sidebar-vc-commit-user">').text(entry.author).appendTo(container);
+                    $('<div class="red-ui-sidebar-vc-commit-date">').text(humanizeSinceDate(parseInt(entry.date))).appendTo(container);
                 }
             }
         });
@@ -678,9 +678,9 @@ RED.sidebar.versionControl = (function() {
                 if (done) { done() }
             },200);
         }
-        var localBranchBox = $('<div class="sidebar-version-control-slide-box sidebar-version-control-slide-box-top" style="top:30px;"></div>').hide().appendTo(localHistory.content);
+        var localBranchBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-top" style="top:30px;"></div>').hide().appendTo(localHistory.content);
 
-        $('<div class="sidebar-version-control-slide-box-header"></div>').text(RED._("sidebar.project.versionControl.changeLocalBranch")).appendTo(localBranchBox);
+        $('<div class="red-ui-sidebar-vc-slide-box-header"></div>').text(RED._("sidebar.project.versionControl.changeLocalBranch")).appendTo(localBranchBox);
 
         var localBranchList = utils.createBranchList({
             placeholder: RED._("sidebar.project.versionControl.createBranchPlaceholder"),
@@ -735,9 +735,9 @@ RED.sidebar.versionControl = (function() {
             }
         });
 
-        var remoteBox = $('<div class="sidebar-version-control-slide-box sidebar-version-control-slide-box-top" style="top:30px"></div>').hide().appendTo(localHistory.content);
+        var remoteBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-top" style="top:30px"></div>').hide().appendTo(localHistory.content);
         var closeRemoteBox = function() {
-            $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',false);
+            $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',false);
             repoStatusButton.removeClass('selected')
             remoteBox.css("height","0");
             localCommitListShade.hide();
@@ -758,12 +758,12 @@ RED.sidebar.versionControl = (function() {
                 },200);
             }
         }
-        $('<div class="sidebar-version-control-slide-box-header"></div>').text(RED._("sidebar.project.versionControl.manageRemoteBranch")).appendTo(remoteBox);
+        $('<div class="red-ui-sidebar-vc-slide-box-header"></div>').text(RED._("sidebar.project.versionControl.manageRemoteBranch")).appendTo(remoteBox);
 
         var remoteBranchRow = $('<div style="margin-bottom: 5px;"></div>').appendTo(remoteBox);
-        var remoteBranchButton = $('<button id="sidebar-version-control-repo-branch" class="sidebar-version-control-repo-action editor-button"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.remote")+': <span id="sidebar-version-control-remote-branch"></span></button>')
+        var remoteBranchButton = $('<button id="red-ui-sidebar-vc-repo-branch" class="red-ui-sidebar-vc-repo-action red-ui-button"><i class="fa fa-code-fork"></i> '+RED._("sidebar.project.versionControl.remote")+': <span id="red-ui-sidebar-vc-remote-branch"></span></button>')
             .appendTo(remoteBranchRow)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.preventDefault();
                 if ($(this).hasClass('selected')) {
                     closeRemoteBranchBox();
@@ -780,18 +780,18 @@ RED.sidebar.versionControl = (function() {
                 }
             });
 
-        $('<div id="sidebar-version-control-repo-toolbar-message" class="sidebar-version-control-slide-box-header" style="min-height: 100px;"></div>').appendTo(remoteBox);
+        $('<div id="red-ui-sidebar-vc-repo-toolbar-message" class="red-ui-sidebar-vc-slide-box-header" style="min-height: 100px;"></div>').appendTo(remoteBox);
 
 
-        var errorMessage = $('<div id="sidebar-version-control-repo-toolbar-error-message" class="sidebar-version-control-slide-box-header" style="min-height: 100px;"></div>').hide().appendTo(remoteBox);
+        var errorMessage = $('<div id="red-ui-sidebar-vc-repo-toolbar-error-message" class="red-ui-sidebar-vc-slide-box-header" style="min-height: 100px;"></div>').hide().appendTo(remoteBox);
         $('<div style="margin-top: 10px;"><i class="fa fa-warning"></i> '+RED._("sidebar.project.versionControl.unableToAccess")+'</div>').appendTo(errorMessage)
         var buttonRow = $('<div style="margin: 10px 30px; text-align: center"></div>').appendTo(errorMessage);
-        $('<button class="editor-button" style="width: 80%;"><i class="fa fa-refresh"></i> '+RED._("sidebar.project.versionControl.retry")+'</button>')
+        $('<button class="red-ui-button" style="width: 80%;"><i class="fa fa-refresh"></i> '+RED._("sidebar.project.versionControl.retry")+'</button>')
             .appendTo(buttonRow)
-            .click(function(e) {
+            .on("click", function(e) {
                 e.preventDefault();
                 var activeProject = RED.projects.getActiveProject();
-                var spinner = utils.addSpinnerOverlay(remoteBox).addClass("projects-dialog-spinner-contain");
+                var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain");
                 utils.sendRequest({
                     url: "projects/"+activeProject.name+"/branches/remote",
                     type: "GET",
@@ -824,7 +824,7 @@ RED.sidebar.versionControl = (function() {
                 });
             })
 
-        $('<div class="sidebar-version-control-slide-box-header" style="height: 20px;"><label id="sidebar-version-control-repo-toolbar-set-upstream-row" for="sidebar-version-control-repo-toolbar-set-upstream" class="hide"><input type="checkbox" id="sidebar-version-control-repo-toolbar-set-upstream"> '+RED._("sidebar.project.versionControl.setUpstreamBranch")+'</label></div>').appendTo(remoteBox);
+        $('<div class="red-ui-sidebar-vc-slide-box-header" style="height: 20px;"><label id="red-ui-sidebar-vc-repo-toolbar-set-upstream-row" for="red-ui-sidebar-vc-repo-toolbar-set-upstream" class="hide"><input type="checkbox" id="red-ui-sidebar-vc-repo-toolbar-set-upstream"> '+RED._("sidebar.project.versionControl.setUpstreamBranch")+'</label></div>').appendTo(remoteBox);
 
         var remoteBranchSubRow = $('<div style="height: 0;overflow:hidden; transition: height 0.2s ease-in-out;"></div>').hide().appendTo(remoteBranchRow);
         var remoteBranchList = utils.createBranchList({
@@ -837,20 +837,20 @@ RED.sidebar.versionControl = (function() {
             },
             container: remoteBranchSubRow,
             onselect: function(body) {
-                $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',false);
-                $("#sidebar-version-control-repo-toolbar-set-upstream").prop('disabled',false);
-                $("#sidebar-version-control-remote-branch").text(body.name+(body.create?" *":""));
+                $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',false);
+                $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('disabled',false);
+                $("#red-ui-sidebar-vc-remote-branch").text(body.name+(body.create?" *":""));
                 var activeProject = RED.projects.getActiveProject();
                 if (activeProject.git.branches.remote === body.name) {
                     delete activeProject.git.branches.remoteAlt;
                 } else {
                     activeProject.git.branches.remoteAlt = body.name;
                 }
-                $("#sidebar-version-control-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt);
+                $("#red-ui-sidebar-vc-repo-toolbar-set-upstream-row").toggle(!!activeProject.git.branches.remoteAlt);
                 closeRemoteBranchBox(function() {
                     if (!body.create) {
                         var start = Date.now();
-                        var spinner = utils.addSpinnerOverlay($('#sidebar-version-control-repo-toolbar-message')).addClass("projects-dialog-spinner-contain");
+                        var spinner = utils.addSpinnerOverlay($('#red-ui-sidebar-vc-repo-toolbar-message')).addClass("red-ui-component-spinner-contain");
                         $.getJSON("projects/"+activeProject.name+"/branches/remote/"+body.name+"/status", function(result) {
                             setTimeout(function() {
                                 updateRemoteStatus(result.commits.ahead, result.commits.behind);
@@ -859,14 +859,14 @@ RED.sidebar.versionControl = (function() {
                         })
                     } else {
                         if (!activeProject.git.branches.remote) {
-                            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.trackedUpstreamBranch"));
-                            $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked',true);
-                            $("#sidebar-version-control-repo-toolbar-set-upstream").prop('disabled',true);
+                            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.trackedUpstreamBranch"));
+                            $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked',true);
+                            $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('disabled',true);
                         } else {
-                            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.selectUpstreamBranch"));
+                            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.selectUpstreamBranch"));
                         }
-                        $("#sidebar-version-control-repo-pull").prop('disabled',true);
-                        $("#sidebar-version-control-repo-push").prop('disabled',false);
+                        $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+                        $("#red-ui-sidebar-vc-repo-push").prop('disabled',false);
                     }
                 });
             }
@@ -875,13 +875,13 @@ RED.sidebar.versionControl = (function() {
 
         var row = $('<div style="margin-bottom: 5px;"></div>').appendTo(remoteBox);
 
-        $('<button id="sidebar-version-control-repo-push" class="sidebar-version-control-repo-sub-action editor-button"><i class="fa fa-long-arrow-up"></i> <span data-i18n="sidebar.project.versionControl.push"></span></button>')
+        $('<button id="red-ui-sidebar-vc-repo-push" class="red-ui-sidebar-vc-repo-sub-action red-ui-button"><i class="fa fa-long-arrow-up"></i> <span data-i18n="sidebar.project.versionControl.push"></span></button>')
             .appendTo(row)
-            .click(function(e) {
+            .on("click", function(e) {
                 e.preventDefault();
-                var spinner = utils.addSpinnerOverlay(remoteBox).addClass("projects-dialog-spinner-contain");
+                var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain");
                 var buttonRow = $('<div style="position: relative; bottom: 60px;"></div>').appendTo(spinner);
-                $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).click(function(evt) {
+                $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                     evt.preventDefault();
                     RED.actions.invoke("core:show-event-log");
                 });
@@ -891,7 +891,7 @@ RED.sidebar.versionControl = (function() {
                 if (activeProject.git.branches.remoteAlt) {
                     url+="/"+activeProject.git.branches.remoteAlt;
                 }
-                var setUpstream = $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked');
+                var setUpstream = $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked');
                 if (setUpstream) {
                     url+="?u=true"
                 }
@@ -929,9 +929,9 @@ RED.sidebar.versionControl = (function() {
 
         var pullRemote = function(options) {
             options = options || {};
-            var spinner = utils.addSpinnerOverlay(remoteBox).addClass("projects-dialog-spinner-contain");
+            var spinner = utils.addSpinnerOverlay(remoteBox).addClass("red-ui-component-spinner-contain");
             var buttonRow = $('<div style="position: relative; bottom: 60px;"></div>').appendTo(spinner);
-            $('<button class="editor-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).click(function(evt) {
+            $('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
                 evt.preventDefault();
                 RED.actions.invoke("core:show-event-log");
             });
@@ -1012,16 +1012,16 @@ RED.sidebar.versionControl = (function() {
                 spinner.remove();
             });
         }
-        $('<button id="sidebar-version-control-repo-pull" class="sidebar-version-control-repo-sub-action editor-button"><i class="fa fa-long-arrow-down"></i> <span data-i18n="sidebar.project.versionControl.pull"></span></button>')
+        $('<button id="red-ui-sidebar-vc-repo-pull" class="red-ui-sidebar-vc-repo-sub-action red-ui-button"><i class="fa fa-long-arrow-down"></i> <span data-i18n="sidebar.project.versionControl.pull"></span></button>')
             .appendTo(row)
-            .click(function(e) {
+            .on("click", function(e) {
                 e.preventDefault();
                 pullRemote({
-                    setUpstream: $("#sidebar-version-control-repo-toolbar-set-upstream").prop('checked')
+                    setUpstream: $("#red-ui-sidebar-vc-repo-toolbar-set-upstream").prop('checked')
                 });
             });
 
-        $('<div class="component-shade sidebar-version-control-shade">').appendTo(sidebarContent);
+        $('<div class="red-ui-shade red-ui-sidebar-vc-shade">').appendTo(sidebarContent);
 
         RED.sidebar.addTab({
             id: "version-control",
@@ -1068,7 +1068,7 @@ RED.sidebar.versionControl = (function() {
         } else {
             bulkChangeSpinner = utils.addSpinnerOverlay(stagedChangesList.parent());
         }
-        bulkChangeSpinner.addClass('projects-dialog-spinner-sidebar');
+        bulkChangeSpinner.addClass('red-ui-component-spinner-sidebar');
         var body = unstaged?{files:files}:undefined;
         utils.sendRequest({
             url: "projects/"+activeProject.name+"/stage",
@@ -1163,10 +1163,10 @@ RED.sidebar.versionControl = (function() {
         }
         isMerging = !!result.merging;
         if (isMerging) {
-            sidebarContent.addClass("sidebar-version-control-merging");
+            sidebarContent.addClass("red-ui-sidebar-vc-merging");
             unmergedContent.show();
         } else {
-            sidebarContent.removeClass("sidebar-version-control-merging");
+            sidebarContent.removeClass("red-ui-sidebar-vc-merging");
             unmergedContent.hide();
         }
         unstagedChangesList.editableList('removeItem',emptyStagedItem);
@@ -1299,52 +1299,52 @@ RED.sidebar.versionControl = (function() {
             $.getJSON(url,function(result) {
                 refreshFiles(result);
 
-                $('#sidebar-version-control-local-branch').text(result.branches.local);
-                $('#sidebar-version-control-remote-branch').text(result.branches.remote||RED._("sidebar.project.versionControl.none"));
+                $('#red-ui-sidebar-vc-local-branch').text(result.branches.local);
+                $('#red-ui-sidebar-vc-remote-branch').text(result.branches.remote||RED._("sidebar.project.versionControl.none"));
 
                 var commitsAhead = result.commits.ahead || 0;
                 var commitsBehind = result.commits.behind || 0;
 
                 if (activeProject.git.hasOwnProperty('remotes')) {
                     if (result.branches.hasOwnProperty("remoteError") && result.branches.remoteError.code !== 'git_remote_gone') {
-                        $("#sidebar-version-control-repo-status-auth-issue").show();
-                        $("#sidebar-version-control-repo-status-stats").hide();
-                        $('#sidebar-version-control-repo-branch').prop('disabled',true);
-                        $("#sidebar-version-control-repo-pull").prop('disabled',true);
-                        $("#sidebar-version-control-repo-push").prop('disabled',true);
-                        $('#sidebar-version-control-repo-toolbar-message').hide();
-                        $('#sidebar-version-control-repo-toolbar-error-message').show();
+                        $("#red-ui-sidebar-vc-repo-status-auth-issue").show();
+                        $("#red-ui-sidebar-vc-repo-status-stats").hide();
+                        $('#red-ui-sidebar-vc-repo-branch').prop('disabled',true);
+                        $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+                        $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
+                        $('#red-ui-sidebar-vc-repo-toolbar-message').hide();
+                        $('#red-ui-sidebar-vc-repo-toolbar-error-message').show();
                     } else {
-                        $('#sidebar-version-control-repo-toolbar-message').show();
-                        $('#sidebar-version-control-repo-toolbar-error-message').hide();
+                        $('#red-ui-sidebar-vc-repo-toolbar-message').show();
+                        $('#red-ui-sidebar-vc-repo-toolbar-error-message').hide();
 
-                        $("#sidebar-version-control-repo-status-auth-issue").hide();
-                        $("#sidebar-version-control-repo-status-stats").show();
+                        $("#red-ui-sidebar-vc-repo-status-auth-issue").hide();
+                        $("#red-ui-sidebar-vc-repo-status-stats").show();
 
-                        $('#sidebar-version-control-repo-branch').prop('disabled',false);
+                        $('#red-ui-sidebar-vc-repo-branch').prop('disabled',false);
 
-                        $("#sidebar-version-control-repo-status-button").show();
+                        $("#red-ui-sidebar-vc-repo-status-button").show();
                         if (result.branches.hasOwnProperty('remote')) {
                             updateRemoteStatus(commitsAhead, commitsBehind);
                         } else {
-                            $('#sidebar-version-control-commits-ahead').text("");
-                            $('#sidebar-version-control-commits-behind').text("");
+                            $('#red-ui-sidebar-vc-commits-ahead').text("");
+                            $('#red-ui-sidebar-vc-commits-behind').text("");
 
-                            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.notTracking"));
-                            $("#sidebar-version-control-repo-pull").prop('disabled',true);
-                            $("#sidebar-version-control-repo-push").prop('disabled',true);
+                            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.notTracking"));
+                            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+                            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
                         }
                     }
                 } else {
-                    $("#sidebar-version-control-repo-status-button").hide();
+                    $("#red-ui-sidebar-vc-repo-status-button").hide();
                 }
                 refreshInProgress = false;
-                $('.sidebar-version-control-shade').hide();
+                $('.red-ui-sidebar-vc-shade').hide();
             }).fail(function() {
                 refreshInProgress = false;
             });
         } else {
-            $('.sidebar-version-control-shade').show();
+            $('.red-ui-sidebar-vc-shade').show();
             unstagedChangesList.editableList('empty');
             stagedChangesList.editableList('empty');
             unmergedChangesList.editableList('empty');
@@ -1353,31 +1353,31 @@ RED.sidebar.versionControl = (function() {
 
 
     function updateRemoteStatus(commitsAhead, commitsBehind) {
-        $('#sidebar-version-control-commits-ahead').text(commitsAhead);
-        $('#sidebar-version-control-commits-behind').text(commitsBehind);
+        $('#red-ui-sidebar-vc-commits-ahead').text(commitsAhead);
+        $('#red-ui-sidebar-vc-commits-behind').text(commitsBehind);
         if (isMerging) {
-            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.statusUnmergedChanged"));
-            $("#sidebar-version-control-repo-pull").prop('disabled',true);
-            $("#sidebar-version-control-repo-push").prop('disabled',true);
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.statusUnmergedChanged"));
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
         } else if (commitsAhead > 0 && commitsBehind === 0) {
-            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsAhead", {count:commitsAhead}));
-            $("#sidebar-version-control-repo-pull").prop('disabled',true);
-            $("#sidebar-version-control-repo-push").prop('disabled',false);
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsAhead", {count:commitsAhead}));
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',false);
         } else if (commitsAhead === 0 && commitsBehind > 0) {
-            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsBehind",{ count: commitsBehind }));
-            $("#sidebar-version-control-repo-pull").prop('disabled',false);
-            $("#sidebar-version-control-repo-push").prop('disabled',true);
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.commitsBehind",{ count: commitsBehind }));
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',false);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
         } else if (commitsAhead > 0 && commitsBehind > 0) {
-            $('#sidebar-version-control-repo-toolbar-message').text(
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(
                 RED._("sidebar.project.versionControl.commitsAheadAndBehind1",{ count:commitsBehind })+
                 RED._("sidebar.project.versionControl.commitsAheadAndBehind2",{ count:commitsAhead })+
                 RED._("sidebar.project.versionControl.commitsAheadAndBehind3",{ count:commitsBehind }));
-            $("#sidebar-version-control-repo-pull").prop('disabled',false);
-            $("#sidebar-version-control-repo-push").prop('disabled',true);
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',false);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
         } else if (commitsAhead === 0 && commitsBehind === 0) {
-            $('#sidebar-version-control-repo-toolbar-message').text(RED._("sidebar.project.versionControl.repositoryUpToDate"));
-            $("#sidebar-version-control-repo-pull").prop('disabled',true);
-            $("#sidebar-version-control-repo-push").prop('disabled',true);
+            $('#red-ui-sidebar-vc-repo-toolbar-message').text(RED._("sidebar.project.versionControl.repositoryUpToDate"));
+            $("#red-ui-sidebar-vc-repo-pull").prop('disabled',true);
+            $("#red-ui-sidebar-vc-repo-push").prop('disabled',true);
         }
     }
     function show() {

packages/node_modules/@node-red/editor-client/src/js/ui/search.js

@@ -147,7 +147,7 @@ RED.search = (function() {
     }
 
     function createDialog() {
-        dialog = $("<div>",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#main-container");
+        dialog = $("<div>",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#red-ui-main-container");
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
         searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({
             delay: 200,
@@ -194,7 +194,7 @@ RED.search = (function() {
         searchInput.i18n();
 
         var searchResultsDiv = $("<div>",{class:"red-ui-search-results-container"}).appendTo(dialog);
-        searchResults = $('<ol>',{id:"search-result-list", style:"position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;"}).appendTo(searchResultsDiv).editableList({
+        searchResults = $('<ol>',{style:"position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;"}).appendTo(searchResultsDiv).editableList({
             addButton: false,
             addItem: function(container,i,object) {
                 var node = object.node;
@@ -213,7 +213,7 @@ RED.search = (function() {
                     }
                     nodeDiv.css('backgroundColor',colour);
 
-                    var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
+                    var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
                     RED.utils.createIconElement(icon_url, iconContainer, true);
 
                     var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
@@ -232,7 +232,7 @@ RED.search = (function() {
                     $('<div>',{class:"red-ui-search-result-node-type"}).text(node.type).appendTo(contentDiv);
                     $('<div>',{class:"red-ui-search-result-node-id"}).text(node.id).appendTo(contentDiv);
 
-                    div.click(function(evt) {
+                    div.on("click", function(evt) {
                         evt.preventDefault();
                         reveal(node);
                     });
@@ -254,11 +254,11 @@ RED.search = (function() {
         }
         if (!visible) {
             RED.keyboard.add("*","escape",function(){hide()});
-            $("#header-shade").show();
-            $("#editor-shade").show();
-            $("#palette-shade").show();
-            $("#sidebar-shade").show();
-            $("#sidebar-separator").hide();
+            $("#red-ui-header-shade").show();
+            $("#red-ui-editor-shade").show();
+            $("#red-ui-palette-shade").show();
+            $("#red-ui-sidebar-shade").show();
+            $("#red-ui-sidebar-separator").hide();
             indexWorkspace();
             if (dialog === null) {
                 createDialog();
@@ -268,18 +268,18 @@ RED.search = (function() {
             RED.events.emit("search:open");
             visible = true;
         }
-        searchInput.focus();
+        searchInput.trigger("focus");
     }
 
     function hide() {
         if (visible) {
             RED.keyboard.remove("escape");
             visible = false;
-            $("#header-shade").hide();
-            $("#editor-shade").hide();
-            $("#palette-shade").hide();
-            $("#sidebar-shade").hide();
-            $("#sidebar-separator").show();
+            $("#red-ui-header-shade").hide();
+            $("#red-ui-editor-shade").hide();
+            $("#red-ui-palette-shade").hide();
+            $("#red-ui-sidebar-shade").hide();
+            $("#red-ui-sidebar-separator").show();
             if (dialog !== null) {
                 dialog.slideUp(200,function() {
                     searchInput.searchBox('value','');
@@ -299,10 +299,10 @@ RED.search = (function() {
 
 
 
-        $("#header-shade").on('mousedown',hide);
-        $("#editor-shade").on('mousedown',hide);
-        $("#palette-shade").on('mousedown',hide);
-        $("#sidebar-shade").on('mousedown',hide);
+        $("#red-ui-header-shade").on('mousedown',hide);
+        $("#red-ui-editor-shade").on('mousedown',hide);
+        $("#red-ui-palette-shade").on('mousedown',hide);
+        $("#red-ui-sidebar-shade").on('mousedown',hide);
     }
 
     return {

packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js

@@ -16,33 +16,8 @@
 RED.sidebar = (function() {
 
     //$('#sidebar').tabs();
-    var sidebar_tabs = RED.tabs.create({
-        id:"sidebar-tabs",
-        onchange:function(tab) {
-            $("#sidebar-content").children().hide();
-            $("#sidebar-footer").children().hide();
-            if (tab.onchange) {
-                tab.onchange.call(tab);
-            }
-            $(tab.wrapper).show();
-            if (tab.toolbar) {
-                $(tab.toolbar).show();
-            }
-        },
-        onremove: function(tab) {
-            $(tab.wrapper).hide();
-            if (tab.onremove) {
-                tab.onremove.call(tab);
-            }
-        },
-        // minimumActiveTabWidth: 70,
-        collapsible: true
-        // scrollable: true
-    });
-
-    var knownTabs = {
-
-    };
+    var sidebar_tabs;
+    var knownTabs = {};
 
     function addTab(title,content,closeable,visible) {
         var options;
@@ -62,16 +37,16 @@ RED.sidebar = (function() {
 
         delete options.closeable;
 
-        options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#sidebar-content")
+        options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#red-ui-sidebar-content")
         options.wrapper.append(options.content);
         options.wrapper.hide();
 
         if (!options.enableOnEdit) {
-            options.shade = $('<div>',{class:"sidebar-shade hide"}).appendTo(options.wrapper);
+            options.shade = $('<div>',{class:"red-ui-sidebar-shade hide"}).appendTo(options.wrapper);
         }
 
         if (options.toolbar) {
-            $("#sidebar-footer").append(options.toolbar);
+            $("#red-ui-sidebar-footer").append(options.toolbar);
             $(options.toolbar).hide();
         }
         var id = options.id;
@@ -107,110 +82,113 @@ RED.sidebar = (function() {
     var sidebarSeparator =  {};
     sidebarSeparator.dragging = false;
 
-    $("#sidebar-separator").draggable({
-            axis: "x",
-            start:function(event,ui) {
-                sidebarSeparator.closing = false;
-                sidebarSeparator.opening = false;
-                var winWidth = $(window).width();
-                sidebarSeparator.start = ui.position.left;
-                sidebarSeparator.chartWidth = $("#workspace").width();
-                sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
-                sidebarSeparator.dragging = true;
+    function setupSidebarSeparator() {
+        $("#red-ui-sidebar-separator").draggable({
+                axis: "x",
+                start:function(event,ui) {
+                    sidebarSeparator.closing = false;
+                    sidebarSeparator.opening = false;
+                    var winWidth = $("#red-ui-editor").width();
+                    sidebarSeparator.start = ui.position.left;
+                    sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
+                    sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
+                    sidebarSeparator.dragging = true;
 
-                if (!RED.menu.isSelected("menu-item-sidebar")) {
-                    sidebarSeparator.opening = true;
-                    var newChartRight = 7;
-                    $("#sidebar").addClass("closing");
-                    $("#workspace").css("right",newChartRight);
-                    $("#editor-stack").css("right",newChartRight+1);
-                    $("#sidebar").width(0);
-                    RED.menu.setSelected("menu-item-sidebar",true);
+                    if (!RED.menu.isSelected("menu-item-sidebar")) {
+                        sidebarSeparator.opening = true;
+                        var newChartRight = 7;
+                        $("#red-ui-sidebar").addClass("closing");
+                        $("#red-ui-workspace").css("right",newChartRight);
+                        $("#red-ui-editor-stack").css("right",newChartRight+1);
+                        $("#red-ui-sidebar").width(0);
+                        RED.menu.setSelected("menu-item-sidebar",true);
+                        RED.events.emit("sidebar:resize");
+                    }
+                    sidebarSeparator.width = $("#red-ui-sidebar").width();
+                },
+                drag: function(event,ui) {
+                    var d = ui.position.left-sidebarSeparator.start;
+                    var newSidebarWidth = sidebarSeparator.width-d;
+                    if (sidebarSeparator.opening) {
+                        newSidebarWidth -= 3;
+                    }
+
+                    if (newSidebarWidth > 150) {
+                        if (sidebarSeparator.chartWidth+d < 200) {
+                            ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
+                            d = ui.position.left-sidebarSeparator.start;
+                            newSidebarWidth = sidebarSeparator.width-d;
+                        }
+                    }
+
+                    if (newSidebarWidth < 150) {
+                        if (!sidebarSeparator.closing) {
+                            $("#red-ui-sidebar").addClass("closing");
+                            sidebarSeparator.closing = true;
+                        }
+                        if (!sidebarSeparator.opening) {
+                            newSidebarWidth = 150;
+                            ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
+                            d = ui.position.left-sidebarSeparator.start;
+                        }
+                    } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
+                        sidebarSeparator.closing = false;
+                        $("#red-ui-sidebar").removeClass("closing");
+                    }
+
+                    var newChartRight = sidebarSeparator.chartRight-d;
+                    $("#red-ui-workspace").css("right",newChartRight);
+                    $("#red-ui-editor-stack").css("right",newChartRight+1);
+                    $("#red-ui-sidebar").width(newSidebarWidth);
+
+                    sidebar_tabs.resize();
+                    RED.events.emit("sidebar:resize");
+                },
+                stop:function(event,ui) {
+                    sidebarSeparator.dragging = false;
+                    if (sidebarSeparator.closing) {
+                        $("#red-ui-sidebar").removeClass("closing");
+                        RED.menu.setSelected("menu-item-sidebar",false);
+                        if ($("#red-ui-sidebar").width() < 180) {
+                            $("#red-ui-sidebar").width(180);
+                            $("#red-ui-workspace").css("right",187);
+                            $("#red-ui-editor-stack").css("right",188);
+                        }
+                    }
+                    $("#red-ui-sidebar-separator").css("left","auto");
+                    $("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").width()+2)+"px");
                     RED.events.emit("sidebar:resize");
                 }
-                sidebarSeparator.width = $("#sidebar").width();
-            },
-            drag: function(event,ui) {
-                var d = ui.position.left-sidebarSeparator.start;
-                var newSidebarWidth = sidebarSeparator.width-d;
-                if (sidebarSeparator.opening) {
-                    newSidebarWidth -= 3;
-                }
+        });
 
-                if (newSidebarWidth > 150) {
-                    if (sidebarSeparator.chartWidth+d < 200) {
-                        ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
-                        d = ui.position.left-sidebarSeparator.start;
-                        newSidebarWidth = sidebarSeparator.width-d;
-                    }
-                }
-
-                if (newSidebarWidth < 150) {
-                    if (!sidebarSeparator.closing) {
-                        $("#sidebar").addClass("closing");
-                        sidebarSeparator.closing = true;
-                    }
-                    if (!sidebarSeparator.opening) {
-                        newSidebarWidth = 150;
-                        ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
-                        d = ui.position.left-sidebarSeparator.start;
-                    }
-                } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
-                    sidebarSeparator.closing = false;
-                    $("#sidebar").removeClass("closing");
-                }
-
-                var newChartRight = sidebarSeparator.chartRight-d;
-                $("#workspace").css("right",newChartRight);
-                $("#editor-stack").css("right",newChartRight+1);
-                $("#sidebar").width(newSidebarWidth);
-
-                sidebar_tabs.resize();
-                RED.events.emit("sidebar:resize");
-            },
-            stop:function(event,ui) {
-                sidebarSeparator.dragging = false;
-                if (sidebarSeparator.closing) {
-                    $("#sidebar").removeClass("closing");
-                    RED.menu.setSelected("menu-item-sidebar",false);
-                    if ($("#sidebar").width() < 180) {
-                        $("#sidebar").width(180);
-                        $("#workspace").css("right",187);
-                        $("#editor-stack").css("right",188);
-                    }
-                }
-                $("#sidebar-separator").css("left","auto");
-                $("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px");
-                RED.events.emit("sidebar:resize");
-            }
-    });
-
-    var sidebarControls = $('<div class="sidebar-control-right"><i class="fa fa-chevron-right"</div>').appendTo($("#sidebar-separator"));
-    sidebarControls.click(function() {
-        sidebarControls.hide();
-        RED.menu.toggleSelected("menu-item-sidebar");
-    })
-    $("#sidebar-separator").on("mouseenter", function() {
-        if (!sidebarSeparator.dragging) {
-            if (RED.menu.isSelected("menu-item-sidebar")) {
-                sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
-            } else {
-                sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
-            }
-            sidebarControls.toggle("slide", { direction: "right" }, 200);
-        }
-    })
-    $("#sidebar-separator").on("mouseleave", function() {
-        if (!sidebarSeparator.dragging) {
+        var sidebarControls = $('<div class="red-ui-sidebar-control-right"><i class="fa fa-chevron-right"</div>').appendTo($("#red-ui-sidebar-separator"));
+        sidebarControls.on("click", function() {
             sidebarControls.hide();
-        }
-    });
+            RED.menu.toggleSelected("menu-item-sidebar");
+        })
+        $("#red-ui-sidebar-separator").on("mouseenter", function() {
+            if (!sidebarSeparator.dragging) {
+                if (RED.menu.isSelected("menu-item-sidebar")) {
+                    sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
+                } else {
+                    sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
+                }
+                sidebarControls.toggle("slide", { direction: "right" }, 200);
+            }
+        })
+        $("#red-ui-sidebar-separator").on("mouseleave", function() {
+            if (!sidebarSeparator.dragging) {
+                sidebarControls.stop(false,true);
+                sidebarControls.hide();
+            }
+        });
+    }
 
     function toggleSidebar(state) {
         if (!state) {
-            $("#main-container").addClass("sidebar-closed");
+            $("#red-ui-main-container").addClass("red-ui-sidebar-closed");
         } else {
-            $("#main-container").removeClass("sidebar-closed");
+            $("#red-ui-main-container").removeClass("red-ui-sidebar-closed");
             sidebar_tabs.resize();
         }
         RED.events.emit("sidebar:resize");
@@ -233,6 +211,35 @@ RED.sidebar = (function() {
     }
 
     function init () {
+        setupSidebarSeparator();
+        sidebar_tabs = RED.tabs.create({
+            element: $('<ul id="red-ui-sidebar-tabs"></ul>').appendTo("#red-ui-sidebar"),
+            onchange:function(tab) {
+                $("#red-ui-sidebar-content").children().hide();
+                $("#red-ui-sidebar-footer").children().hide();
+                if (tab.onchange) {
+                    tab.onchange.call(tab);
+                }
+                $(tab.wrapper).show();
+                if (tab.toolbar) {
+                    $(tab.toolbar).show();
+                }
+            },
+            onremove: function(tab) {
+                $(tab.wrapper).hide();
+                if (tab.onremove) {
+                    tab.onremove.call(tab);
+                }
+            },
+            // minimumActiveTabWidth: 70,
+            collapsible: true
+            // scrollable: true
+        });
+
+        $('<div id="red-ui-sidebar-content"></div>').appendTo("#red-ui-sidebar");
+        $('<div id="red-ui-sidebar-footer" class="red-ui-component-footer"></div>').appendTo("#red-ui-sidebar");
+        $('<div id="red-ui-sidebar-shade" class="hide"></div>').appendTo("#red-ui-sidebar");
+
         RED.actions.add("core:toggle-sidebar",function(state){
             if (state === undefined) {
                 RED.menu.toggleSelected("menu-item-sidebar");
@@ -240,13 +247,13 @@ RED.sidebar = (function() {
                 toggleSidebar(state);
             }
         });
-        RED.popover.tooltip($("#sidebar-separator").find(".sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar");
+        RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar");
         showSidebar();
         RED.sidebar.info.init();
         RED.sidebar.config.init();
         RED.sidebar.context.init();
         // hide info bar at start if screen rather narrow...
-        if ($(window).width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); }
+        if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); }
     }
 
     return {

packages/node_modules/@node-red/editor-client/src/js/ui/state.js

@@ -24,5 +24,6 @@ RED.state = {
     IMPORT: 7,
     IMPORT_DRAGGING: 8,
     QUICK_JOINING: 9,
-    PANNING: 10
+    PANNING: 10,
+    SELECTING_NODE: 11
 }

packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+ /*!
+ RED.statusBar.add({
+     id: "widget-identifier",
+     align: "left|right",
+     element: widgetElement
+ })
+*/
+
+RED.statusBar = (function() {
+
+    var widgets = {};
+    var leftBucket;
+    var rightBucket;
+
+    function addWidget(options) {
+        widgets[options.id] = options;
+        var el = $('<span class="red-ui-statusbar-widget"></span>');
+        options.element.appendTo(el);
+        if (options.align === 'left') {
+            leftBucket.append(el);
+        } else if (options.align === 'right') {
+            rightBucket.prepend(el);
+        }
+    }
+
+    return {
+        init: function() {
+            leftBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-left">').appendTo("#red-ui-workspace-footer");
+            rightBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-right">').appendTo("#red-ui-workspace-footer");
+        },
+        add: addWidget
+    }
+
+})();

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,51 +282,51 @@ 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);
 
         }
     }
 
     function showWorkspaceToolbar(activeSubflow) {
-        var toolbar = $("#workspace-toolbar");
+        var toolbar = $("#red-ui-workspace-toolbar");
         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").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").click(function(event) {
+        $("#red-ui-subflow-output-add").on("click", function(event) {
             event.preventDefault();
             addSubflowOutput();
         });
 
-        $("#workspace-subflow-input-add").click(function(event) {
+        $("#red-ui-subflow-input-add").on("click", function(event) {
             event.preventDefault();
             addSubflowInput();
         });
 
-        $("#workspace-subflow-input-remove").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").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").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").click(function(event) {
+        $("#red-ui-subflow-delete").on("click", function(event) {
             event.preventDefault();
             var startDirty = RED.nodes.dirty();
             var historyEvent = removeSubflow(RED.workspaces.active());
@@ -429,13 +429,13 @@ RED.subflow = (function() {
 
         refreshToolbar(activeSubflow);
 
-        $("#chart").css({"margin-top": "40px"});
-        $("#workspace-toolbar").show();
+        $("#red-ui-workspace-chart").css({"margin-top": "40px"});
+        $("#red-ui-workspace-toolbar").show();
     }
 
     function hideWorkspaceToolbar() {
-        $("#workspace-toolbar").hide().empty();
-        $("#chart").css({"margin-top": "0"});
+        $("#red-ui-workspace-toolbar").hide().empty();
+        $("#red-ui-workspace-chart").css({"margin-top": "0"});
     }
 
     function removeSubflow(id) {
@@ -499,8 +499,8 @@ RED.subflow = (function() {
         RED.actions.add("core:create-subflow",createSubflow);
         RED.actions.add("core:convert-to-subflow",convertToSubflow);
 
-        $(_subflowEditTemplate).appendTo(document.body);
-        $(_subflowTemplateEditTemplate).appendTo(document.body);
+        $(_subflowEditTemplate).appendTo("#red-ui-editor-node-configs");
+        $(_subflowTemplateEditTemplate).appendTo("#red-ui-editor-node-configs");
 
     }
 

packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js

@@ -17,20 +17,20 @@ RED.sidebar.config = (function() {
 
 
     var content = document.createElement("div");
-    content.className = "sidebar-node-config";
-    content.id = "sidebar-node-config";
+    content.className = "red-ui-sidebar-node-config";
+    content.id = "red-ui-sidebar-node-config";
     content.tabIndex = 0;
 
-    $('<div class="sidebar-header"><span class="button-group">'+
-      '<a class="sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
-      '<a class="sidebar-header-button-toggle" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
+    $('<div class="red-ui-sidebar-header"><span class="button-group">'+
+      '<a class="red-ui-sidebar-header-button-toggle selected" id="red-ui-sidebar-config-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
+      '<a class="red-ui-sidebar-header-button-toggle" id="red-ui-sidebar-config-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
       '</span></div>'
     ).appendTo(content);
 
 
     var toolbar = $('<div>'+
-        '<a class="sidebar-footer-button" id="workspace-config-node-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
-        '<a class="sidebar-footer-button" id="workspace-config-node-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
+        '<a class="red-ui-footer-button" id="red-ui-sidebar-config-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
+        '<a class="red-ui-footer-button" id="red-ui-sidebar-config-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
         '</div>');
 
     var globalCategories = $("<div>").appendTo(content);
@@ -44,22 +44,25 @@ RED.sidebar.config = (function() {
     function getOrCreateCategory(name,parent,label) {
         name = name.replace(/\./i,"-");
         if (!categories[name]) {
-            var container = $('<div class="palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent);
-            var header = $('<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
+            var container = $('<div class="red-ui-palette-category red-ui-sidebar-config-category" id="red-ui-sidebar-config-category-'+name+'"></div>').appendTo(parent);
+            var header = $('<div class="red-ui-sidebar-config-tray-header red-ui-palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
             if (label) {
-                $('<span class="config-node-label"/>').text(label).appendTo(header);
+                $('<span class="red-ui-palette-node-config-label"/>').text(label).appendTo(header);
             } else {
-                $('<span class="config-node-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
+                $('<span class="red-ui-palette-node-config-label" data-i18n="sidebar.config.'+name+'">').appendTo(header);
             }
-            $('<span class="config-node-filter-info"></span>').appendTo(header);
-            category = $('<ul class="palette-content config-node-list"></ul>').appendTo(container);
+            $('<span class="red-ui-sidebar-node-config-filter-info"></span>').appendTo(header);
+            category = $('<ul class="red-ui-palette-content red-ui-sidebar-node-config-list"></ul>').appendTo(container);
+            category.on("click", function(e) {
+                $(content).find(".red-ui-palette-node").removeClass("selected");
+            });
             container.i18n();
             var icon = header.find("i");
             var result = {
                 label: label,
                 list: category,
                 size: function() {
-                    return result.list.find("li:not(.config_node_none)").length
+                    return result.list.find("li:not(.red-ui-palette-node-config-none)").length
                 },
                 open: function(snap) {
                     if (!icon.hasClass("expanded")) {
@@ -96,7 +99,7 @@ RED.sidebar.config = (function() {
             categories[name] = result;
         } else {
             if (categories[name].label !== label) {
-                categories[name].list.parent().find('.config-node-label').text(label);
+                categories[name].list.parent().find('.red-ui-palette-node-config-label').text(label);
                 categories[name].label = label;
             }
         }
@@ -119,35 +122,36 @@ RED.sidebar.config = (function() {
             })
             hiddenCount = hiddenCount - nodes.length;
             if (hiddenCount > 0) {
-                list.parent().find('.config-node-filter-info').text(RED._('sidebar.config.filtered',{count:hiddenCount})).show();
+                list.parent().find('.red-ui-sidebar-node-config-filter-info').text(RED._('sidebar.config.filtered',{count:hiddenCount})).show();
             } else {
-                list.parent().find('.config-node-filter-info').hide();
+                list.parent().find('.red-ui-sidebar-node-config-filter-info').hide();
             }
         } else {
-            list.parent().find('.config-node-filter-info').hide();
+            list.parent().find('.red-ui-sidebar-node-config-filter-info').hide();
         }
         list.empty();
         if (nodes.length === 0) {
-            $('<li class="config_node_none" data-i18n="sidebar.config.none">NONE</li>').i18n().appendTo(list);
+            $('<li class="red-ui-palette-node-config-none" data-i18n="sidebar.config.none">NONE</li>').i18n().appendTo(list);
             category.close(true);
         } else {
             var currentType = "";
             nodes.forEach(function(node) {
                 var label = RED.utils.getNodeLabel(node,node.id);
                 if (node.type != currentType) {
-                    $('<li class="config_node_type">'+node.type+'</li>').appendTo(list);
+                    $('<li class="red-ui-palette-node-config-type">'+node.type+'</li>').appendTo(list);
                     currentType = node.type;
                 }
 
-                var entry = $('<li class="palette_node config_node palette_node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
+                var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
+                var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
                 entry.data('node',node.id);
-                $('<div class="palette_label"></div>').text(label).appendTo(entry);
+                $('<div class="red-ui-palette-label"></div>').text(label).appendTo(nodeDiv);
                 if (node._def.hasUsers !== false) {
-                    var iconContainer = $('<div/>',{class:"palette_icon_container palette_icon_container_right"}).appendTo(entry);
+                    var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container red-ui-palette-icon-container-right"}).appendTo(nodeDiv);
                     if (node.users.length === 0) {
                         iconContainer.text(0);
                     } else {
-                        $('<a href="#"/>').click(function(e) {
+                        $('<a href="#"/>').on("click", function(e) {
                             e.stopPropagation();
                             e.preventDefault();
                             RED.search.show(node.id);
@@ -155,24 +159,26 @@ RED.sidebar.config = (function() {
                     }
                     RED.popover.tooltip(iconContainer,RED._('editor.nodesUse',{count:node.users.length}));
                     if (node.users.length === 0) {
-                        entry.addClass("config_node_unused");
+                        nodeDiv.addClass("red-ui-palette-node-config-unused");
                     }
                 }
-                entry.on('click',function(e) {
+                nodeDiv.on('click',function(e) {
+                    e.stopPropagation();
                     RED.view.select(false);
                     if (e.metaKey) {
                         $(this).toggleClass("selected");
                     } else {
-                        $(content).find(".palette_node").removeClass("selected");
+                        $(content).find(".red-ui-palette-node").removeClass("selected");
                         $(this).addClass("selected");
                     }
                     RED.sidebar.info.refresh(node);
                 });
-                entry.on('dblclick',function(e) {
+                nodeDiv.on('dblclick',function(e) {
+                    e.stopPropagation();
                     RED.editor.editConfig("", node.type, node.id);
                 });
                 var userArray = node.users.map(function(n) { return n.id });
-                entry.on('mouseover',function(e) {
+                nodeDiv.on('mouseover',function(e) {
                     RED.nodes.eachNode(function(node) {
                         if( userArray.indexOf(node.id) != -1) {
                             node.highlighted = true;
@@ -181,7 +187,7 @@ RED.sidebar.config = (function() {
                     });
                     RED.view.redraw();
                 });
-                entry.on('mouseout',function(e) {
+                nodeDiv.on('mouseout',function(e) {
                     RED.nodes.eachNode(function(node) {
                         if(node.highlighted) {
                             node.highlighted = false;
@@ -208,8 +214,8 @@ RED.sidebar.config = (function() {
             validList[sf.id.replace(/\./g,"-")] = true;
             getOrCreateCategory(sf.id,subflowCategories,sf.name);
         })
-        $(".workspace-config-node-category").each(function() {
-            var id = $(this).attr('id').substring("workspace-config-node-category-".length);
+        $(".red-ui-sidebar-config-category").each(function() {
+            var id = $(this).attr('id').substring("red-ui-sidebar-config-category-".length);
             if (!validList[id]) {
                 $(this).remove();
                 delete categories[id];
@@ -246,11 +252,11 @@ RED.sidebar.config = (function() {
         });
         RED.actions.add("core:show-config-tab", function() {RED.sidebar.show('config')});
         RED.actions.add("core:select-all-config-nodes", function() {
-            $(content).find(".palette_node").addClass("selected");
+            $(content).find(".red-ui-palette-node").addClass("selected");
         })
         RED.actions.add("core:delete-config-selection", function() {
             var selectedNodes = [];
-            $(content).find(".palette_node.selected").each(function() {
+            $(content).find(".red-ui-palette-node.selected").each(function() {
                 selectedNodes.push($(this).data('node'));
             });
             if (selectedNodes.length > 0) {
@@ -296,10 +302,10 @@ RED.sidebar.config = (function() {
 
 
         RED.events.on("view:selection-changed",function() {
-            $(content).find(".palette_node").removeClass("selected");
+            $(content).find(".red-ui-palette-node").removeClass("selected");
         });
 
-        $("#workspace-config-node-collapse-all").on("click", function(e) {
+        $("#red-ui-sidebar-config-collapse-all").on("click", function(e) {
             e.preventDefault();
             for (var cat in categories) {
                 if (categories.hasOwnProperty(cat)) {
@@ -307,7 +313,7 @@ RED.sidebar.config = (function() {
                 }
             }
         });
-        $("#workspace-config-node-expand-all").on("click", function(e) {
+        $("#red-ui-sidebar-config-expand-all").on("click", function(e) {
             e.preventDefault();
             for (var cat in categories) {
                 if (categories.hasOwnProperty(cat)) {
@@ -317,45 +323,45 @@ RED.sidebar.config = (function() {
                 }
             }
         });
-        $('#workspace-config-node-filter-all').on("click",function(e) {
+        $('#red-ui-sidebar-config-filter-all').on("click",function(e) {
             e.preventDefault();
             if (showUnusedOnly) {
                 $(this).addClass('selected');
-                $('#workspace-config-node-filter-unused').removeClass('selected');
+                $('#red-ui-sidebar-config-filter-unused').removeClass('selected');
                 showUnusedOnly = !showUnusedOnly;
                 refreshConfigNodeList();
             }
         });
-        $('#workspace-config-node-filter-unused').on("click",function(e) {
+        $('#red-ui-sidebar-config-filter-unused').on("click",function(e) {
             e.preventDefault();
             if (!showUnusedOnly) {
                 $(this).addClass('selected');
-                $('#workspace-config-node-filter-all').removeClass('selected');
+                $('#red-ui-sidebar-config-filter-all').removeClass('selected');
                 showUnusedOnly = !showUnusedOnly;
                 refreshConfigNodeList();
             }
         });
-        RED.popover.tooltip($('#workspace-config-node-filter-all'),"Show all config nodes");
-        RED.popover.tooltip($('#workspace-config-node-filter-unused'),"Show all unused config nodes");
+        RED.popover.tooltip($('#red-ui-sidebar-config-filter-all'),"Show all config nodes");
+        RED.popover.tooltip($('#red-ui-sidebar-config-filter-unused'),"Show all unused config nodes");
 
     }
     function show(id) {
         if (typeof id === 'boolean') {
             if (id) {
-                $('#workspace-config-node-filter-unused').click();
+                $('#red-ui-sidebar-config-filter-unused').trigger("click");
             } else {
-                $('#workspace-config-node-filter-all').click();
+                $('#red-ui-sidebar-config-filter-all').trigger("click");
             }
         }
         refreshConfigNodeList();
         if (typeof id === "string") {
-            $('#workspace-config-node-filter-all').click();
+            $('#red-ui-sidebar-config-filter-all').trigger("click");
             id = id.replace(/\./g,"-");
             setTimeout(function() {
-                var node = $(".palette_node_id_"+id);
+                var node = $(".red-ui-palette-node_id_"+id);
                 var y = node.position().top;
                 var h = node.height();
-                var scrollWindow = $(".sidebar-node-config");
+                var scrollWindow = $(".red-ui-sidebar-node-config");
                 var scrollHeight = scrollWindow.height();
 
                 if (y+h > scrollHeight) {

packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js

@@ -20,7 +20,7 @@ RED.sidebar.context = (function() {
 
     var localCache = {};
 
-
+    var flowAutoRefresh;
     var nodeSection;
     // var subflowSection;
     var flowSection;
@@ -32,17 +32,23 @@ RED.sidebar.context = (function() {
     function init() {
 
         content = $("<div>").css({"position":"relative","height":"100%"});
-        content.className = "sidebar-context"
-        // var toolbar = $('<div class="sidebar-header">'+
-        //     '</div>').appendTo(content);
+        content.className = "red-ui-sidebar-context"
 
-        var footerToolbar = $('<div>'+
-            // '<span class="button-group"><a class="sidebar-footer-button" href="#" data-i18n="[title]node-red:debug.sidebar.openWindow"><i class="fa fa-desktop"></i></a></span> ' +
-            '</div>');
+        var header = $('<div class="red-ui-sidebar-header"></div>').appendTo(content);
 
+        var autoUpdate = RED.settings.get("editor.context.refresh",false);
+        flowAutoRefresh = $('<input type="checkbox">').prop("checked",autoUpdate).appendTo(header).toggleButton({
+            baseClass: "red-ui-sidebar-header-button",
+            enabledLabel: RED._("sidebar.context.autoRefresh"),
+            disabledLabel: RED._("sidebar.context.autoRefresh")
+        }).on("change", function() {
+            var value = $(this).prop("checked");
+            RED.settings.set("editor.context.refresh",value);
+        });
 
+        var footerToolbar = $('<div></div>');
 
-        var stackContainer = $("<div>",{class:"sidebar-context-stack"}).appendTo(content);
+        var stackContainer = $("<div>",{class:"red-ui-sidebar-context-stack"}).appendTo(content);
         sections = RED.stack.create({
             container: stackContainer
         });
@@ -56,13 +62,13 @@ RED.sidebar.context = (function() {
         });
         nodeSection.expand();
         nodeSection.content.css({height:"100%"});
-        nodeSection.timestamp = $('<div class="sidebar-context-updated">&nbsp;</div>').appendTo(nodeSection.content);
-        var table = $('<table class="node-info"></table>').appendTo(nodeSection.content);
+        nodeSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').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>')
+        $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.stopPropagation();
                 evt.preventDefault();
                 updateNode(currentNode, true);
@@ -75,9 +81,9 @@ RED.sidebar.context = (function() {
         // subflowSection.expand();
         // subflowSection.content.css({height:"100%"});
         // bg = $('<div style="float: right"></div>').appendTo(subflowSection.header);
-        // $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        // $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
         //     .appendTo(bg)
-        //     .click(function(evt) {
+        //     .on("click", function(evt) {
         //         evt.stopPropagation();
         //         evt.preventDefault();
         //     })
@@ -90,16 +96,16 @@ RED.sidebar.context = (function() {
         });
         flowSection.expand();
         flowSection.content.css({height:"100%"});
-        flowSection.timestamp = $('<div class="sidebar-context-updated">&nbsp;</div>').appendTo(flowSection.content);
-        var table = $('<table class="node-info"></table>').appendTo(flowSection.content);
+        flowSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').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>')
+        $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.stopPropagation();
                 evt.preventDefault();
-                updateFlow(currentFlow);
+                updateFlow(currentFlow, true);
             })
 
         globalSection = sections.add({
@@ -108,14 +114,14 @@ RED.sidebar.context = (function() {
         });
         globalSection.expand();
         globalSection.content.css({height:"100%"});
-        globalSection.timestamp = $('<div class="sidebar-context-updated">&nbsp;</div>').appendTo(globalSection.content);
-        var table = $('<table class="node-info"></table>').appendTo(globalSection.content);
+        globalSection.timestamp = $('<div class="red-ui-sidebar-context-updated">&nbsp;</div>').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);
-        $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
+        $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
             .appendTo(bg)
-            .click(function(evt) {
+            .on("click", function(evt) {
                 evt.stopPropagation();
                 evt.preventDefault();
                 updateEntry(globalSection,"context/global","global");
@@ -137,7 +143,7 @@ RED.sidebar.context = (function() {
         });
 
         // var toggleLiveButton = $("#sidebar-context-toggle-live");
-        // toggleLiveButton.click(function(evt) {
+        // toggleLiveButton.on("click", function(evt) {
         //     evt.preventDefault();
         //     if ($(this).hasClass("selected")) {
         //         $(this).removeClass("selected");
@@ -166,8 +172,13 @@ RED.sidebar.context = (function() {
         RED.events.on("workspace:change", function(event) {
             updateFlow(RED.nodes.workspace(event.workspace));
         })
-
-        updateEntry(globalSection,"context/global","global");
+        if (autoUpdate) {
+            updateEntry(globalSection,"context/global","global");
+        } else {
+            $(globalSection.table).empty();
+            $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(globalSection.table).i18n();
+            globalSection.timestamp.html("&nbsp;");
+        }
 
     }
 
@@ -189,20 +200,25 @@ 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;");
-
         }
     }
-    function updateFlow(flow) {
+    function updateFlow(flow, force) {
         currentFlow = flow;
-        if (flow) {
-            updateEntry(flowSection,"context/flow/"+flow.id,flow.id);
+        if (force || flowAutoRefresh.prop("checked")) {
+            if (flow) {
+                updateEntry(flowSection,"context/flow/"+flow.id,flow.id);
+            } else {
+                updateEntry(flowSection)
+            }
         } else {
-            updateEntry(flowSection)
+            $(flowSection.table).empty();
+            $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(flowSection.table).i18n();
+            flowSection.timestamp.html("&nbsp;");
         }
     }
 
@@ -234,12 +250,12 @@ 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="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>');
 
-                    var refreshItem = $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).click(function(e) {
+                    var refreshItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).on("click", function(e) {
                         e.preventDefault();
                         e.stopPropagation();
                         $.getJSON(baseUrl+"/"+k+"?store="+v.store, function(data) {
@@ -256,7 +272,7 @@ RED.sidebar.context = (function() {
                             }
                         })
                     });
-                    var deleteItem = $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>').appendTo(tools).click(function(e) {
+                    var deleteItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>').appendTo(tools).on("click", function(e) {
                         e.preventDefault();
                         e.stopPropagation();
                         var popover = RED.popover.create({
@@ -268,12 +284,12 @@ RED.sidebar.context = (function() {
                                 $('<p data-i18n="sidebar.context.deleteConfirm"></p>').appendTo(content);
                                 var row = $('<p>').appendTo(content);
                                 var bg = $('<span class="button-group"></span>').appendTo(row);
-                                $('<button class="editor-button" data-i18n="common.label.cancel"></button>').appendTo(bg).click(function(e) {
+                                $('<button class="red-ui-button" data-i18n="common.label.cancel"></button>').appendTo(bg).on("click", function(e) {
                                     e.preventDefault();
                                     popover.close();
                                 });
                                 bg = $('<span class="button-group"></span>').appendTo(row);
-                                $('<button class="editor-button primary" data-i18n="common.label.delete"></button>').appendTo(bg).click(function(e) {
+                                $('<button class="red-ui-button primary" data-i18n="common.label.delete"></button>').appendTo(bg).on("click", function(e) {
                                     e.preventDefault();
                                     popover.close();
                                     $.ajax({
@@ -284,7 +300,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;
@@ -316,12 +332,12 @@ RED.sidebar.context = (function() {
                         tools: tools
                     }).appendTo(propRow.children()[1]);
                     if (contextStores.length > 1) {
-                        $("<span>",{class:"sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0]))
+                        $("<span>",{class:"red-ui-sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0]))
                     }
                 });
             }
             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());
         });
@@ -332,7 +348,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();
         }
     }
 

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
@@ -70,18 +70,18 @@ RED.sidebar.info = (function() {
         helpSection.expand();
         helpSection.content.css("padding","6px");
 
-        var tipContainer = $('<div class="node-info-tips"></div>').appendTo(content);
-        tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
-        var tipButtons = $('<div class="node-info-tips-buttons"></div>').appendTo(tipContainer);
+        var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
+        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="workspace-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
-        tipRefresh.click(function(e) {
+        var tipRefresh = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
+        tipRefresh.on("click", function(e) {
             e.preventDefault();
             tips.next();
         })
 
-        var tipClose = $('<a href="#" class="workspace-footer-button"><i class="fa fa-times"></a>').appendTo(tipButtons);
-        tipClose.click(function(e) {
+        var tipClose = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-times"></a>').appendTo(tipButtons);
+        tipClose.on("click", function(e) {
             e.preventDefault();
             RED.actions.invoke("core:toggle-show-tips");
             RED.notify(RED._("sidebar.info.showTips"));
@@ -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,12 +139,12 @@ 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);
-            var editProjectButton = $('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
+            $('<tr class="red-ui-help-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
+            var editProjectButton = $('<button class="red-ui-button red-ui-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
                 .appendTo(propRow.children()[1])
-                .click(function(evt) {
+                .on("click", function(evt) {
                     evt.preventDefault();
                     RED.projects.editProject();
                 });
@@ -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) {
@@ -268,12 +268,12 @@ RED.sidebar.info = (function() {
                                         var container = propRow.children()[1];
 
                                         var div = $('<span>',{class:""}).appendTo(container);
-                                        var nodeDiv = $('<div>',{class:"palette_node palette_node_small"}).appendTo(div);
+                                        var nodeDiv = $('<div>',{class:"red-ui-palette-node red-ui-palette-node-small"}).appendTo(div);
                                         var colour = RED.utils.getNodeColor(configNode.type,configNode._def);
                                         var icon_url = RED.utils.getNodeIcon(configNode._def);
                                         nodeDiv.css({'backgroundColor':colour, "cursor":"pointer"});
-                                        var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                                        $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
+                                        var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+                                        $('<div/>',{class:"red-ui-palette-icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
                                         var nodeContainer = $('<span></span>').css({"verticalAlign":"top","marginLeft":"6px"}).text(configLabel).appendTo(container);
 
                                         nodeDiv.on('dblclick',function() {
@@ -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,35 +332,35 @@ RED.sidebar.info = (function() {
             }
             setInfoText(infoText, infoSection.content);
 
-            $(".sidebar-node-info-stack").scrollTop(0);
-            $(".node-info-property-header").click(function(e) {
+            $(".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);
-        // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
-        // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
-        // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
-        // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+        // $('<button type="button" class="red-ui-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
 
 
 
     }
     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>')
-            .find("a").prepend('<i class="fa fa-angle-right">').click(function(e) {
+        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');
                 var el = $(this).parent().next();
@@ -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) {

packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js

@@ -16,20 +16,17 @@
 
 RED.touch = RED.touch||{};
 RED.touch.radialMenu = (function() {
-    
-    
+
+
     var touchMenu = null;
     var isActive = false;
     var isOutside = false;
     var activeOption = null;
 
-    
+
     function createRadial(obj,pos,options) {
         isActive = true;
         try {
-            var w = $("body").width();
-            var h = $("body").height();
-            
             touchMenu = d3.select("body").append("div")
                 .style({
                         position:"absolute",
@@ -43,10 +40,7 @@ RED.touch.radialMenu = (function() {
                     hide();
                     d3.event.preventDefault();
                 });
-                    
-            
 
-    
             var menu = touchMenu.append("div")
                 .style({
                         position: "absolute",
@@ -58,7 +52,7 @@ RED.touch.radialMenu = (function() {
                         background: "rgba(255,255,255,0.6)",
                         border: "1px solid #666"
                 });
-                
+
             var menuOpts = [];
             var createMenuOpt = function(x,y,opt) {
                 opt.el = menu.append("div")
@@ -74,16 +68,16 @@ RED.touch.radialMenu = (function() {
                         "text-align": "center",
                         "line-height":"50px"
                     });
-                    
+
                 opt.el.html(opt.name);
-                
+
                 if (opt.disabled) {
                     opt.el.style({"border-color":"#ccc",color:"#ccc"});
                 }
                 opt.x = x;
                 opt.y = y;
                 menuOpts.push(opt);
-                
+
                 opt.el.on('touchstart',function() {
                     opt.el.style("background","#999");
                     d3.event.preventDefault();
@@ -96,7 +90,7 @@ RED.touch.radialMenu = (function() {
                     d3.event.stopPropagation();
                 });
             }
-            
+
             var n = options.length;
             var dang = Math.max(Math.PI/(n-1),Math.PI/4);
             var ang = Math.PI;
@@ -108,7 +102,7 @@ RED.touch.radialMenu = (function() {
                 }
                 ang += dang;
             }
-            
+
 
             var hide = function() {
                 isActive = false;
@@ -116,11 +110,11 @@ RED.touch.radialMenu = (function() {
                 touchMenu.remove();
                 touchMenu = null;
             }
-                    
+
             obj.on('touchend.radial',function() {
                     obj.on('touchend.radial',null);
                     obj.on('touchmenu.radial',null);
-                    
+
                     if (activeOption) {
                         try {
                             activeOption.onselect();
@@ -133,8 +127,6 @@ RED.touch.radialMenu = (function() {
                     }
             });
 
-
-            
             obj.on('touchmove.radial',function() {
             try {
                 var touch0 = d3.event.touches.item(0);
@@ -159,20 +151,20 @@ RED.touch.radialMenu = (function() {
                     var d = Math.abs((p[0]*p[0])+(p[1]*p[1]));
                     isOutside = (d > 80*80);
                 }
-                
+
             } catch(err) {
                 RED._debug(err);
             }
 
-                
+
             });
-            
+
         } catch(err) {
             RED._debug(err);
         }
-    }    
+    }
+
 
-    
     return {
         show: createRadial,
         active: function() {
@@ -181,4 +173,3 @@ RED.touch.radialMenu = (function() {
     }
 
 })();
-

packages/node_modules/@node-red/editor-client/src/js/ui/tray.js

@@ -16,33 +16,34 @@
 RED.tray = (function() {
 
     var stack = [];
-    var editorStack = $("#editor-stack");
+    var editorStack;
     var openingTray = false;
+    var stackHidden = false;
 
     function resize() {
 
     }
     function showTray(options) {
-        var el = $('<div class="editor-tray"></div>');
-        var header = $('<div class="editor-tray-header"></div>').appendTo(el);
-        var bodyWrapper = $('<div class="editor-tray-body-wrapper"></div>').appendTo(el);
-        var body = $('<div class="editor-tray-body"></div>').appendTo(bodyWrapper);
-        var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
-        var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
-        // var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
-        // var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
+        var el = $('<div class="red-ui-tray"></div>');
+        var header = $('<div class="red-ui-tray-header"></div>').appendTo(el);
+        var bodyWrapper = $('<div class="red-ui-tray-body-wrapper"></div>').appendTo(el);
+        var body = $('<div class="red-ui-tray-body"></div>').appendTo(bodyWrapper);
+        var footer = $('<div class="red-ui-tray-footer"></div>').appendTo(el);
+        var resizer = $('<div class="red-ui-tray-resize-handle"></div>').appendTo(el);
+        // var growButton = $('<a class="red-ui-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
+        // var shrinkButton = $('<a class="red-ui-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
         if (options.title) {
             var titles = stack.map(function(e) { return e.options.title });
             titles.push(options.title);
-            var title = '<ul class="editor-tray-breadcrumbs"><li>'+titles.join("</li><li>")+'</li></ul>';
+            var title = '<ul class="red-ui-tray-breadcrumbs"><li>'+titles.join("</li><li>")+'</li></ul>';
 
-            $('<div class="editor-tray-titlebar">'+title+'</div>').appendTo(header);
+            $('<div class="red-ui-tray-titlebar">'+title+'</div>').appendTo(header);
         }
         if (options.width === Infinity) {
             options.maximized = true;
-            resizer.addClass('editor-tray-resize-maximised');
+            resizer.addClass('red-ui-tray-resize-maximised');
         }
-        var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
+        var buttonBar = $('<div class="red-ui-tray-toolbar"></div>').appendTo(header);
         var primaryButton;
         if (options.buttons) {
             for (var i=0;i<options.buttons.length;i++) {
@@ -55,7 +56,7 @@ RED.tray = (function() {
                     b.text(button.text);
                 }
                 if (button.click) {
-                    b.click((function(action) {
+                    b.on("click", (function(action) {
                         return function(evt) {
                             if (!$(this).hasClass('disabled')) {
                                 action(evt);
@@ -115,17 +116,17 @@ RED.tray = (function() {
         }
 
         function finishBuild() {
-            $("#header-shade").show();
-            $("#editor-shade").show();
-            $("#palette-shade").show();
-            $(".sidebar-shade").show();
+            $("#red-ui-header-shade").show();
+            $("#red-ui-editor-shade").show();
+            $("#red-ui-palette-shade").show();
+            $(".red-ui-sidebar-shade").show();
             tray.preferredWidth = Math.max(el.width(),500);
             if (!options.maximized) {
                 body.css({"minWidth":tray.preferredWidth-40});
             }
             if (options.width) {
-                if (options.width > $("#editor-stack").position().left-8) {
-                    options.width = $("#editor-stack").position().left-8;
+                if (options.width > $("#red-ui-editor-stack").position().left-8) {
+                    options.width = $("#red-ui-editor-stack").position().left-8;
                 }
                 el.width(options.width);
             } else {
@@ -133,15 +134,15 @@ RED.tray = (function() {
             }
 
             tray.width = el.width();
-            if (tray.width > $("#editor-stack").position().left-8) {
-                tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8);
+            if (tray.width > $("#red-ui-editor-stack").position().left-8) {
+                tray.width = Math.max(0/*tray.preferredWidth*/,$("#red-ui-editor-stack").position().left-8);
                 el.width(tray.width);
             }
 
-            // tray.body.parent().width(Math.min($("#editor-stack").position().left-8,tray.width));
+            // tray.body.parent().width(Math.min($("#red-ui-editor-stack").position().left-8,tray.width));
 
 
-            $("#main-container").scrollLeft(0);
+            $("#red-ui-main-container").scrollLeft(0);
             el.css({
                 right: -(el.width()+10)+"px",
                 transition: "right 0.25s ease"
@@ -151,7 +152,7 @@ RED.tray = (function() {
             setTimeout(function() {
                 setTimeout(function() {
                     if (!options.width) {
-                        el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
+                        el.width(Math.min(tray.preferredWidth,$("#red-ui-editor-stack").position().left-8));
                     }
                     if (options.resize) {
                         options.resize({width:el.width()});
@@ -163,7 +164,7 @@ RED.tray = (function() {
                         // Delay resetting the flag, so we don't close prematurely
                         openingTray = false;
                     },200);
-                    body.find(":focusable:first").focus();
+                    body.find(":focusable:first").trigger("focus");
 
                 },150);
                 el.css({right:0});
@@ -184,28 +185,30 @@ RED.tray = (function() {
     function handleWindowResize() {
         if (stack.length > 0) {
             var tray = stack[stack.length-1];
-            var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
-            tray.body.height(trayHeight);
-            if (tray.options.maximized || tray.width > $("#editor-stack").position().left-8) {
-                tray.width = $("#editor-stack").position().left-8;
+            if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) {
+                tray.width = $("#red-ui-editor-stack").position().left-8;
                 tray.tray.width(tray.width);
                 // tray.body.parent().width(tray.width);
             } else if (tray.width < tray.preferredWidth) {
-                tray.width = Math.min($("#editor-stack").position().left-8,tray.preferredWidth);
+                tray.width = Math.min($("#red-ui-editor-stack").position().left-8,tray.preferredWidth);
                 tray.tray.width(tray.width);
                 // tray.body.parent().width(tray.width);
             }
+            var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
+            tray.body.height(trayHeight);
             if (tray.options.resize) {
                 tray.options.resize({width:tray.width, height:trayHeight});
             }
+
         }
     }
 
     return {
         init: function init() {
-            $(window).resize(handleWindowResize);
+            editorStack = $("#red-ui-editor-stack");
+            $(window).on("resize", handleWindowResize);
             RED.events.on("sidebar:resize",handleWindowResize);
-            $("#editor-shade").click(function() {
+            $("#red-ui-editor-shade").on("click", function() {
                 if (!openingTray) {
                     var tray = stack[stack.length-1];
                     if (tray && tray.primaryButton) {
@@ -215,7 +218,19 @@ RED.tray = (function() {
             });
         },
         show: function show(options) {
-            if (stack.length > 0 && !options.overlay) {
+            if (!options) {
+                if (stack.length > 0) {
+                    var tray = stack[stack.length-1];
+                    tray.tray.css({right:0});
+                    $("#red-ui-header-shade").show();
+                    $("#red-ui-editor-shade").show();
+                    $("#red-ui-palette-shade").show();
+                    $(".red-ui-sidebar-shade").show();
+                    stackHidden = false;
+                }
+            } else if (stackHidden) {
+                throw new Error("Cannot add to stack whilst hidden");
+            } else if (stack.length > 0 && !options.overlay) {
                 var oldTray = stack[stack.length-1];
                 if (options.width === "inherit") {
                     options.width = oldTray.tray.width();
@@ -233,6 +248,19 @@ RED.tray = (function() {
             }
 
         },
+        hide: function hide() {
+            if (stack.length > 0) {
+                var tray = stack[stack.length-1];
+                tray.tray.css({
+                    right: -(tray.tray.width()+10)+"px"
+                });
+                $("#red-ui-header-shade").hide();
+                $("#red-ui-editor-shade").hide();
+                $("#red-ui-palette-shade").hide();
+                $(".red-ui-sidebar-shade").hide();
+                stackHidden = true;
+            }
+        },
         resize: handleWindowResize,
         close: function close(done) {
             if (stack.length > 0) {
@@ -248,7 +276,7 @@ RED.tray = (function() {
                     if (stack.length > 0) {
                         var oldTray = stack[stack.length-1];
                         if (!oldTray.options.overlay) {
-                            oldTray.tray.appendTo("#editor-stack");
+                            oldTray.tray.appendTo("#red-ui-editor-stack");
                             setTimeout(function() {
                                 handleWindowResize();
                                 oldTray.tray.css({right:0});
@@ -267,10 +295,10 @@ RED.tray = (function() {
                         done();
                     }
                     if (stack.length === 0) {
-                        $("#header-shade").hide();
-                        $("#editor-shade").hide();
-                        $("#palette-shade").hide();
-                        $(".sidebar-shade").hide();
+                        $("#red-ui-header-shade").hide();
+                        $("#red-ui-editor-shade").hide();
+                        $("#red-ui-palette-shade").hide();
+                        $(".red-ui-sidebar-shade").hide();
                         RED.events.emit("editor:close");
                         RED.view.focus();
                     }

packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js

@@ -45,8 +45,7 @@ RED.typeSearch = (function() {
     }
 
     function createDialog() {
-        //shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#main-container");
-        dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#main-container");
+        dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#red-ui-main-container");
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
         searchInput = $('<input type="text" id="red-ui-type-search-input">').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({
             delay: 50,
@@ -90,7 +89,7 @@ RED.typeSearch = (function() {
                         } else {
                             addCallback(n.type,true);
                         }
-                        $("#red-ui-type-search-input").val("").keyup();
+                        $("#red-ui-type-search-input").val("").trigger("keyup");
                     }
                 } else if (evt.keyCode === 13) {
                     // Enter
@@ -104,7 +103,7 @@ RED.typeSearch = (function() {
         });
 
         searchResultsDiv = $("<div>",{class:"red-ui-search-results-container"}).appendTo(dialog);
-        searchResults = $('<ol>',{id:"search-result-list", style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0;"}).appendTo(searchResultsDiv).editableList({
+        searchResults = $('<ol>',{style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0;"}).appendTo(searchResultsDiv).editableList({
             addButton: false,
             filter: function(data) {
                 if (activeFilter === "" ) {
@@ -145,7 +144,7 @@ RED.typeSearch = (function() {
                 var icon_url = RED.utils.getNodeIcon(def);
                 nodeDiv.css('backgroundColor',colour);
 
-                var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
+                var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
                 RED.utils.createIconElement(icon_url, iconContainer, false);
 
                 if (def.inputs > 0) {
@@ -162,7 +161,7 @@ RED.typeSearch = (function() {
 
                 $('<div>',{class:"red-ui-search-result-node-label"}).text(label).appendTo(contentDiv);
 
-                div.click(function(evt) {
+                div.on("click", function(evt) {
                     evt.preventDefault();
                     confirm(object);
                 });
@@ -208,13 +207,13 @@ RED.typeSearch = (function() {
             dialog.hide();
             searchResultsDiv.hide();
         }
-        $(document).off('mousedown.type-search');
-        $(document).off('mouseup.type-search');
-        $(document).off('click.type-search');
+        $(document).off('mousedown.red-ui-type-search');
+        $(document).off('mouseup.red-ui-type-search');
+        $(document).off('click.red-ui-type-search');
         setTimeout(function() {
-            $(document).on('mousedown.type-search',handleMouseActivity);
-            $(document).on('mouseup.type-search',handleMouseActivity);
-            $(document).on('click.type-search',handleMouseActivity);
+            $(document).on('mousedown.red-ui-type-search',handleMouseActivity);
+            $(document).on('mouseup.red-ui-type-search',handleMouseActivity);
+            $(document).on('click.red-ui-type-search',handleMouseActivity);
         },200);
 
         refreshTypeList(opts);
@@ -222,14 +221,14 @@ RED.typeSearch = (function() {
         cancelCallback = opts.cancel;
         RED.events.emit("type-search:open");
         //shade.show();
-        if ($("#main-container").height() - opts.y - 150 < 0) {
+        if ($("#red-ui-main-container").height() - opts.y - 150 < 0) {
             opts.y = opts.y - 235;
         }
         dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();
         searchResultsDiv.slideDown(300);
         setTimeout(function() {
             searchResultsDiv.find(".red-ui-editableList-container").scrollTop(0);
-            searchInput.focus();
+            searchInput.trigger("focus");
         },100);
     }
     function hide(fast) {
@@ -245,9 +244,9 @@ RED.typeSearch = (function() {
             }
             RED.events.emit("type-search:close");
             RED.view.focus();
-            $(document).off('mousedown.type-search');
-            $(document).off('mouseup.type-search');
-            $(document).off('click.type-search');
+            $(document).off('mousedown.red-ui-type-search');
+            $(document).off('mouseup.red-ui-type-search');
+            $(document).off('click.red-ui-type-search');
         }
     }
     function getTypeLabel(type, def) {

packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js

@@ -34,7 +34,6 @@ RED.userSettings = (function() {
             return;
         }
         settingsVisible = true;
-        var tabContainer;
 
         var trayOptions = {
             title: RED._("menu.label.userSettings"),
@@ -52,9 +51,9 @@ RED.userSettings = (function() {
                 trayWidth = dimensions.width;
             },
             open: function(tray) {
-                var trayBody = tray.find('.editor-tray-body');
+                var trayBody = tray.find('.red-ui-tray-body');
                 var settingsContent = $('<div></div>').appendTo(trayBody);
-                var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);
+                var tabContainer = $('<div></div>',{class:"red-ui-settings-tabs-container"}).appendTo(settingsContent);
 
                 $('<ul></ul>',{id:"user-settings-tabs"}).appendTo(tabContainer);
                 var settingsTabs = RED.tabs.create({
@@ -62,7 +61,7 @@ RED.userSettings = (function() {
                     vertical: true,
                     onchange: function(tab) {
                         setTimeout(function() {
-                            $("#user-settings-tabs-content").children().hide();
+                            tabContents.children().hide();
                             $("#" + tab.id).show();
                             if (tab.pane.focus) {
                                 tab.pane.focus();
@@ -70,19 +69,19 @@ RED.userSettings = (function() {
                         },50);
                     }
                 });
-                var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(settingsContent);
+                var tabContents = $('<div></div>',{class:"red-ui-settings-tabs-content"}).appendTo(settingsContent);
 
                 panes.forEach(function(pane) {
                     settingsTabs.addTab({
-                        id: "user-settings-tab-"+pane.id,
+                        id: "red-ui-settings-tab-"+pane.id,
                         label: pane.title,
                         pane: pane
                     });
                     pane.get().hide().appendTo(tabContents);
                 });
                 settingsContent.i18n();
-                settingsTabs.activateTab("user-settings-tab-"+(initialTab||'view'))
-                $("#sidebar-shade").show();
+                settingsTabs.activateTab("red-ui-settings-tab-"+(initialTab||'view'))
+                $("#red-ui-sidebar-shade").show();
             },
             close: function() {
                 settingsVisible = false;
@@ -91,7 +90,7 @@ RED.userSettings = (function() {
                         pane.close();
                     }
                 });
-                $("#sidebar-shade").hide();
+                $("#red-ui-sidebar-shade").hide();
 
             },
             show: function() {}
@@ -104,6 +103,10 @@ RED.userSettings = (function() {
 
     var viewSettings = [
         {
+            options: [
+                {setting:"editor-language",local: true, label:"menu.label.view.language",options:function(done){ done([{val:'',text:RED._('menu.label.view.browserDefault')}].concat(RED.settings.theme("languages"))) }},
+            ]
+        },{
             title: "menu.label.view.grid",
             options: [
                 {setting:"view-show-grid",oldSetting:"menu-menu-item-view-show-grid",label:"menu.label.view.showGrid",toggle:true,onchange:"core:toggle-show-grid"},
@@ -130,20 +133,46 @@ RED.userSettings = (function() {
 
     function createViewPane() {
 
-        var pane = $('<div id="user-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 || {};
 
         viewSettings.forEach(function(section) {
-            $('<h3></h3>').text(RED._(section.title)).appendTo(pane);
+            if (section.title) {
+                $('<h3></h3>').text(RED._(section.title)).appendTo(pane);
+            }
             section.options.forEach(function(opt) {
-                var initialState = currentEditorSettings.view[opt.setting];
-                var row = $('<div class="user-settings-row"></div>').appendTo(pane);
+                var initialState;
+                if (opt.local) {
+                    initialState = localStorage.getItem(opt.setting);
+                } else {
+                    initialState = currentEditorSettings.view[opt.setting];
+                }
+                var row = $('<div class="red-ui-settings-row"></div>').appendTo(pane);
                 var input;
                 if (opt.toggle) {
                     input = $('<label for="user-settings-'+opt.setting+'"><input id="user-settings-'+opt.setting+'" type="checkbox"> '+RED._(opt.label)+'</label>').appendTo(row).find("input");
                     input.prop('checked',initialState);
+                } else if (opt.options) {
+                    $('<label for="user-settings-'+opt.setting+'">'+RED._(opt.label)+'</label>').appendTo(row);
+                    var select = $('<select id="user-settings-'+opt.setting+'"></select>').appendTo(row);
+                    if (typeof opt.options === 'function') {
+                        opt.options(function(options) {
+                            options.forEach(function(opt) {
+                                var val = opt;
+                                var text = opt;
+                                if (typeof opt !== 'string') {
+                                    val = opt.val;
+                                    text = opt.text;
+                                }
+                                $('<option>').val(val).text(text).appendTo(select);
+                            })
+                        })
+                        select.val(initialState)
+                    } else {
+                        // TODO: support other option types
+                    }
                 } else {
                     $('<label for="user-settings-'+opt.setting+'">'+RED._(opt.label)+'</label>').appendTo(row);
                     $('<input id="user-settings-'+opt.setting+'" type="'+(opt.type||"text")+'">').appendTo(row).val(initialState);
@@ -155,16 +184,20 @@ RED.userSettings = (function() {
 
     function setSelected(id, value) {
         var opt = allSettings[id];
-        var currentEditorSettings = RED.settings.get('editor') || {};
-        currentEditorSettings.view = currentEditorSettings.view || {};
-        currentEditorSettings.view[opt.setting] = value;
-        RED.settings.set('editor', currentEditorSettings);
-        var callback = opt.onchange;
-        if (typeof callback === 'string') {
-            callback = RED.actions.get(callback);
-        }
-        if (callback) {
-            callback.call(opt,value);
+        if (opt.local) {
+            localStorage.setItem(opt.setting,value);
+        } else {
+            var currentEditorSettings = RED.settings.get('editor') || {};
+            currentEditorSettings.view = currentEditorSettings.view || {};
+            currentEditorSettings.view[opt.setting] = value;
+            RED.settings.set('editor', currentEditorSettings);
+            var callback = opt.onchange;
+            if (typeof callback === 'string') {
+                callback = RED.actions.get(callback);
+            }
+            if (callback) {
+                callback.call(opt,value);
+            }
         }
     }
     function toggle(id) {
@@ -202,6 +235,10 @@ RED.userSettings = (function() {
         var editorSettingsChanged = false;
         viewSettings.forEach(function(section) {
             section.options.forEach(function(opt) {
+                if (opt.local) {
+                    allSettings[opt.setting] = opt;
+                    return;
+                }
                 if (opt.oldSetting) {
                     var oldValue = RED.settings.get(opt.oldSetting);
                     if (oldValue !== undefined && oldValue !== null) {

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -26,20 +26,20 @@ RED.utils = (function() {
     function buildMessageSummaryValue(value) {
         var result;
         if (Array.isArray(value)) {
-            result = $('<span class="debug-message-object-value debug-message-type-meta"></span>').text('array['+value.length+']');
+            result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-meta"></span>').text('array['+value.length+']');
         } else if (value === null) {
-            result = $('<span class="debug-message-object-value debug-message-type-null">null</span>');
+            result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-null">null</span>');
         } else if (typeof value === 'object') {
             if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) {
-                result = $('<span class="debug-message-object-value debug-message-type-meta"></span>').text('buffer['+value.length+']');
+                result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-meta"></span>').text('buffer['+value.length+']');
             } else if (value.hasOwnProperty('type') && value.type === 'array' && value.hasOwnProperty('data')) {
-                result = $('<span class="debug-message-object-value debug-message-type-meta"></span>').text('array['+value.length+']');
+                result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-meta"></span>').text('array['+value.length+']');
             } else if (value.hasOwnProperty('type') && value.type === 'function') {
-                result = $('<span class="debug-message-object-value debug-message-type-meta"></span>').text('function');
+                result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-meta"></span>').text('function');
             } else if (value.hasOwnProperty('type') && value.type === 'number') {
-                result = $('<span class="debug-message-object-value debug-message-type-number"></span>').text(value.data);
+                result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-number"></span>').text(value.data);
             } else {
-                result = $('<span class="debug-message-object-value debug-message-type-meta">object</span>');
+                result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-meta">object</span>');
             }
         } else if (typeof value === 'string') {
             var subvalue;
@@ -48,16 +48,16 @@ RED.utils = (function() {
             } else {
                 subvalue = sanitize(value);
             }
-            result = $('<span class="debug-message-object-value debug-message-type-string"></span>').html('"'+formatString(subvalue)+'"');
+            result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-string"></span>').html('"'+formatString(subvalue)+'"');
         } else if (typeof value === 'number') {
-            result = $('<span class="debug-message-object-value debug-message-type-number"></span>').text(""+value);
+            result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-number"></span>').text(""+value);
         } else {
-            result = $('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+value);
+            result = $('<span class="red-ui-debug-msg-object-value red-ui-debug-msg-type-other"></span>').text(""+value);
         }
         return result;
     }
     function makeExpandable(el,onbuild,ontoggle,expand) {
-        el.addClass("debug-message-expandable");
+        el.addClass("red-ui-debug-msg-expandable");
         el.prop('toggle',function() {
             return function(state) {
                 var parent = el.parent();
@@ -79,7 +79,7 @@ RED.utils = (function() {
                 return false;
             }
         });
-        el.click(function(e) {
+        el.on("click", function(e) {
             var parent = $(this).parent();
             var currentState = !parent.hasClass('collapsed');
             if ($(this).prop('toggle')(!currentState)) {
@@ -105,7 +105,7 @@ RED.utils = (function() {
             e.preventDefault();
         });
         if (expand) {
-            el.click();
+            el.trigger("click");
         }
 
     }
@@ -117,16 +117,16 @@ RED.utils = (function() {
         if (!pinnedPaths.hasOwnProperty(sourceId)) {
             pinnedPaths[sourceId] = {}
         }
-        var tools = $('<span class="debug-message-tools"></span>').appendTo(obj);
-        var copyTools = $('<span class="debug-message-tools-copy button-group"></span>').appendTo(tools);
+        var tools = $('<span class="red-ui-debug-msg-tools"></span>').appendTo(obj);
+        var copyTools = $('<span class="red-ui-debug-msg-tools-copy button-group"></span>').appendTo(tools);
         if (!!key) {
-            var copyPath = $('<button class="editor-button editor-button-small"><i class="fa fa-terminal"></i></button>').appendTo(copyTools).click(function(e) {
+            var copyPath = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-terminal"></i></button>').appendTo(copyTools).on("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
                 RED.clipboard.copyText(key,copyPath,"clipboard.copyMessagePath");
             })
         }
-        var copyPayload = $('<button class="editor-button editor-button-small"><i class="fa fa-clipboard"></i></button>').appendTo(copyTools).click(function(e) {
+        var copyPayload = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-clipboard"></i></button>').appendTo(copyTools).on("click", function(e) {
             e.preventDefault();
             e.stopPropagation();
             RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue");
@@ -134,24 +134,24 @@ RED.utils = (function() {
         if (strippedKey !== undefined && strippedKey !== '') {
             var isPinned = pinnedPaths[sourceId].hasOwnProperty(strippedKey);
 
-            var pinPath = $('<button class="editor-button editor-button-small debug-message-tools-pin"><i class="fa fa-map-pin"></i></button>').appendTo(tools).click(function(e) {
+            var pinPath = $('<button class="red-ui-button red-ui-button-small red-ui-debug-msg-tools-pin"><i class="fa fa-map-pin"></i></button>').appendTo(tools).on("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
                 if (pinnedPaths[sourceId].hasOwnProperty(strippedKey)) {
                     delete pinnedPaths[sourceId][strippedKey];
                     $(this).removeClass("selected");
-                    obj.removeClass("debug-message-row-pinned");
+                    obj.removeClass("red-ui-debug-msg-row-pinned");
                 } else {
                     var rootedPath = "$"+(strippedKey[0] === '['?"":".")+strippedKey;
                     pinnedPaths[sourceId][strippedKey] = normalisePropertyExpression(rootedPath);
                     $(this).addClass("selected");
-                    obj.addClass("debug-message-row-pinned");
+                    obj.addClass("red-ui-debug-msg-row-pinned");
                 }
             }).toggleClass("selected",isPinned);
-            obj.toggleClass("debug-message-row-pinned",isPinned);
+            obj.toggleClass("red-ui-debug-msg-row-pinned",isPinned);
         }
         if (extraTools) {
-            extraTools.addClass("debug-message-tools-other");
+            extraTools.addClass("red-ui-debug-msg-tools-other");
             extraTools.appendTo(tools);
         }
     }
@@ -243,10 +243,10 @@ RED.utils = (function() {
         }
         if (format === 'raw') {
             button.text('raw');
-            element.removeClass('debug-message-buffer-string').addClass('debug-message-buffer-raw');
+            element.removeClass('red-ui-debug-msg-buffer-string').addClass('red-ui-debug-msg-buffer-raw');
         } else if (format === 'string') {
             button.text('string');
-            element.addClass('debug-message-buffer-string').removeClass('debug-message-buffer-raw');
+            element.addClass('red-ui-debug-msg-buffer-string').removeClass('red-ui-debug-msg-buffer-raw');
         }
     }
 
@@ -275,16 +275,16 @@ RED.utils = (function() {
         if (path !== undefined && rootPath !== undefined) {
              strippedKey = path.substring(rootPath.length+(path[rootPath.length]==="."?1:0));
         }
-        var element = $('<span class="debug-message-element"></span>');
+        var element = $('<span class="red-ui-debug-msg-element"></span>');
         element.collapse = function() {
-            element.find(".debug-message-expandable").parent().addClass("collapsed");
+            element.find(".red-ui-debug-msg-expandable").parent().addClass("collapsed");
         }
-        header = $('<span class="debug-message-row"></span>').appendTo(element);
+        header = $('<span class="red-ui-debug-msg-row"></span>').appendTo(element);
         if (sourceId) {
             addMessageControls(header,sourceId,path,obj,rootPath,strippedKey,tools);
         }
         if (!key) {
-            element.addClass("debug-message-top-level");
+            element.addClass("red-ui-debug-msg-top-level");
             if (sourceId) {
                 var pinned = pinnedPaths[sourceId];
                 expandPaths = [];
@@ -303,17 +303,17 @@ RED.utils = (function() {
                     expandPaths.sort();
                 }
                 element.clearPinned = function() {
-                    element.find(".debug-message-row-pinned").removeClass("debug-message-row-pinned");
+                    element.find(".red-ui-debug-msg-row-pinned").removeClass("red-ui-debug-msg-row-pinned");
                     pinnedPaths[sourceId] = {};
                 }
             }
         } else {
             if (!hideKey) {
-                $('<span class="debug-message-object-key"></span>').text(key).appendTo(header);
+                $('<span class="red-ui-debug-msg-object-key"></span>').text(key).appendTo(header);
                 $('<span>: </span>').appendTo(header);
             }
         }
-        entryObj = $('<span class="debug-message-object-value"></span>').appendTo(header);
+        entryObj = $('<span class="red-ui-debug-msg-object-value"></span>').appendTo(header);
 
         var isArray = Array.isArray(obj);
         var isArrayObject = false;
@@ -322,34 +322,34 @@ RED.utils = (function() {
             isArrayObject = true;
         }
         if (obj === null || obj === undefined) {
-            $('<span class="debug-message-type-null">'+obj+'</span>').appendTo(entryObj);
+            $('<span class="red-ui-debug-msg-type-null">'+obj+'</span>').appendTo(entryObj);
         } else if (obj.__enc__ && obj.type === 'number') {
-            e = $('<span class="debug-message-type-number debug-message-object-header"></span>').text(obj.data).appendTo(entryObj);
+            e = $('<span class="red-ui-debug-msg-type-number red-ui-debug-msg-object-header"></span>').text(obj.data).appendTo(entryObj);
         } else if (typeHint === "function" || (obj.__enc__ && obj.type === 'function')) {
-            e = $('<span class="debug-message-type-meta debug-message-object-header"></span>').text("function").appendTo(entryObj);
+            e = $('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-header"></span>').text("function").appendTo(entryObj);
         } else if (typeHint === "internal" || (obj.__enc__ && obj.type === 'internal')) {
-            e = $('<span class="debug-message-type-meta debug-message-object-header"></span>').text("[internal]").appendTo(entryObj);
+            e = $('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-header"></span>').text("[internal]").appendTo(entryObj);
         } else if (typeof obj === 'string') {
             if (/[\t\n\r]/.test(obj)) {
                 element.addClass('collapsed');
-                $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
+                $('<i class="fa fa-caret-right red-ui-debug-msg-object-handle"></i> ').prependTo(header);
                 makeExpandable(header, function() {
-                    $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').text(typeHint||'string').appendTo(header);
-                    var row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
-                    $('<pre class="debug-message-type-string"></pre>').text(obj).appendTo(row);
+                    $('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-type-header"></span>').text(typeHint||'string').appendTo(header);
+                    var row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(element);
+                    $('<pre class="red-ui-debug-msg-type-string"></pre>').text(obj).appendTo(row);
                 },function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey,expandPaths));
             }
-            e = $('<span class="debug-message-type-string debug-message-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
+            e = $('<span class="red-ui-debug-msg-type-string red-ui-debug-msg-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
             if (/^#[0-9a-f]{6}$/i.test(obj)) {
-                $('<span class="debug-message-type-string-swatch"></span>').css('backgroundColor',obj).appendTo(e);
+                $('<span class="red-ui-debug-msg-type-string-swatch"></span>').css('backgroundColor',obj).appendTo(e);
             }
 
         } else if (typeof obj === 'number') {
-            e = $('<span class="debug-message-type-number"></span>').appendTo(entryObj);
+            e = $('<span class="red-ui-debug-msg-type-number"></span>').appendTo(entryObj);
 
             if (Number.isInteger(obj) && (obj >= 0)) { // if it's a +ve integer
-                e.addClass("debug-message-type-number-toggle");
-                e.click(function(evt) {
+                e.addClass("red-ui-debug-msg-type-number-toggle");
+                e.on("click", function(evt) {
                     evt.preventDefault();
                     formatNumber($(this), obj, sourceId, path, true);
                 });
@@ -383,14 +383,14 @@ RED.utils = (function() {
             var fullLength = data.length;
 
                 if (originalLength > 0) {
-                $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
-                var arrayRows = $('<div class="debug-message-array-rows"></div>').appendTo(element);
-                element.addClass('debug-message-buffer-raw');
+                $('<i class="fa fa-caret-right red-ui-debug-msg-object-handle"></i> ').prependTo(header);
+                var arrayRows = $('<div class="red-ui-debug-msg-array-rows"></div>').appendTo(element);
+                element.addClass('red-ui-debug-msg-buffer-raw');
             }
             if (key) {
-                headerHead = $('<span class="debug-message-type-meta"></span>').text(typeHint||(type+'['+originalLength+']')).appendTo(entryObj);
+                headerHead = $('<span class="red-ui-debug-msg-type-meta"></span>').text(typeHint||(type+'['+originalLength+']')).appendTo(entryObj);
             } else {
-                headerHead = $('<span class="debug-message-object-header"></span>').appendTo(entryObj);
+                headerHead = $('<span class="red-ui-debug-msg-object-header"></span>').appendTo(entryObj);
                 $('<span>[ </span>').appendTo(headerHead);
                 var arrayLength = Math.min(originalLength,10);
                 for (i=0;i<arrayLength;i++) {
@@ -403,7 +403,7 @@ RED.utils = (function() {
                     $('<span> &hellip;</span>').appendTo(headerHead);
                 }
                 if (arrayLength === 0) {
-                    $('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
+                    $('<span class="red-ui-debug-msg-type-meta">empty</span>').appendTo(headerHead);
                 }
                 $('<span> ]</span>').appendTo(headerHead);
             }
@@ -411,20 +411,20 @@ RED.utils = (function() {
 
                 makeExpandable(header,function() {
                     if (!key) {
-                        headerHead = $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').text(typeHint||(type+'['+originalLength+']')).appendTo(header);
+                        headerHead = $('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-type-header"></span>').text(typeHint||(type+'['+originalLength+']')).appendTo(header);
                     }
                     if (type === 'buffer') {
-                        var stringRow = $('<div class="debug-message-string-rows"></div>').appendTo(element);
-                        var sr = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(stringRow);
+                        var stringRow = $('<div class="red-ui-debug-msg-string-rows"></div>').appendTo(element);
+                        var sr = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(stringRow);
                         var stringEncoding = "";
                         try {
                             stringEncoding = String.fromCharCode.apply(null, new Uint16Array(data))
                         } catch(err) {
                             console.log(err);
                         }
-                        $('<pre class="debug-message-type-string"></pre>').text(stringEncoding).appendTo(sr);
-                        var bufferOpts = $('<span class="debug-message-buffer-opts"></span>').appendTo(headerHead);
-                        var switchFormat = $('<a href="#"></a>').addClass('selected').text('raw').appendTo(bufferOpts).click(function(e) {
+                        $('<pre class="red-ui-debug-msg-type-string"></pre>').text(stringEncoding).appendTo(sr);
+                        var bufferOpts = $('<span class="red-ui-debug-msg-buffer-opts"></span>').appendTo(headerHead);
+                        var switchFormat = $('<a class="red-ui-button red-ui-button-small" href="#"></a>').text('raw').appendTo(bufferOpts).on("click", function(e) {
                             e.preventDefault();
                             e.stopPropagation();
                             formatBuffer(element,$(this),sourceId,path,true);
@@ -435,7 +435,7 @@ RED.utils = (function() {
                     var row;
                     if (fullLength <= 10) {
                         for (i=0;i<fullLength;i++) {
-                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
+                            row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(arrayRows);
                             subElements[path+"["+i+"]"] = buildMessageElement(
                                 data[i],
                                 {
@@ -454,16 +454,16 @@ RED.utils = (function() {
                     } else {
                         for (i=0;i<fullLength;i+=10) {
                             var minRange = i;
-                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
+                            row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(arrayRows);
                             header = $('<span></span>').appendTo(row);
-                            $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(header);
+                            $('<i class="fa fa-caret-right red-ui-debug-msg-object-handle"></i> ').appendTo(header);
                             makeExpandable(header, (function() {
                                 var min = minRange;
                                 var max = Math.min(fullLength-1,(minRange+9));
                                 var parent = row;
                                 return function() {
                                     for (var i=min;i<=max;i++) {
-                                        var row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(parent);
+                                        var row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(parent);
                                         subElements[path+"["+i+"]"] = buildMessageElement(
                                             data[i],
                                             {
@@ -484,10 +484,10 @@ RED.utils = (function() {
                             })(),
                             (function() { var path = path+"["+i+"]"; return function(state) {if (ontoggle) { ontoggle(path,state);}}})(),
                             checkExpanded(strippedKey,expandPaths,minRange,Math.min(fullLength-1,(minRange+9))));
-                            $('<span class="debug-message-object-key"></span>').html("["+minRange+" &hellip; "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
+                            $('<span class="red-ui-debug-msg-object-key"></span>').html("["+minRange+" &hellip; "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
                         }
                         if (fullLength < originalLength) {
-                             $('<div class="debug-message-object-entry collapsed"><span class="debug-message-object-key">['+fullLength+' &hellip; '+originalLength+']</span></div>').appendTo(arrayRows);
+                             $('<div class="red-ui-debug-msg-object-entry collapsed"><span class="red-ui-debug-msg-object-key">['+fullLength+' &hellip; '+originalLength+']</span></div>').appendTo(arrayRows);
                         }
                     }
                 },
@@ -498,13 +498,13 @@ RED.utils = (function() {
             element.addClass('collapsed');
             var keys = Object.keys(obj);
             if (key || keys.length > 0) {
-                $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
+                $('<i class="fa fa-caret-right red-ui-debug-msg-object-handle"></i> ').prependTo(header);
                 makeExpandable(header, function() {
                     if (!key) {
-                        $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').text('object').appendTo(header);
+                        $('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-type-header"></span>').text('object').appendTo(header);
                     }
                     for (i=0;i<keys.length;i++) {
-                        var row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
+                        var row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(element);
                         var newPath = path;
                         if (newPath !== undefined) {
                             if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(keys[i])) {
@@ -530,20 +530,20 @@ RED.utils = (function() {
                         ).appendTo(row);
                     }
                     if (keys.length === 0) {
-                        $('<div class="debug-message-object-entry debug-message-type-meta collapsed"></div>').text("empty").appendTo(element);
+                        $('<div class="red-ui-debug-msg-object-entry red-ui-debug-msg-type-meta collapsed"></div>').text("empty").appendTo(element);
                     }
                 },
                 function(state) {if (ontoggle) { ontoggle(path,state);}},
                 checkExpanded(strippedKey,expandPaths));
             }
             if (key) {
-                $('<span class="debug-message-type-meta"></span>').text('object').appendTo(entryObj);
+                $('<span class="red-ui-debug-msg-type-meta"></span>').text('object').appendTo(entryObj);
             } else {
-                headerHead = $('<span class="debug-message-object-header"></span>').appendTo(entryObj);
+                headerHead = $('<span class="red-ui-debug-msg-object-header"></span>').appendTo(entryObj);
                 $('<span>{ </span>').appendTo(headerHead);
                 var keysLength = Math.min(keys.length,5);
                 for (i=0;i<keysLength;i++) {
-                    $('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(headerHead);
+                    $('<span class="red-ui-debug-msg-object-key"></span>').text(keys[i]).appendTo(headerHead);
                     $('<span>: </span>').appendTo(headerHead);
                     buildMessageSummaryValue(obj[keys[i]]).appendTo(headerHead);
                     if (i < keysLength-1) {
@@ -554,12 +554,12 @@ RED.utils = (function() {
                     $('<span> &hellip;</span>').appendTo(headerHead);
                 }
                 if (keysLength === 0) {
-                    $('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
+                    $('<span class="red-ui-debug-msg-type-meta">empty</span>').appendTo(headerHead);
                 }
                 $('<span> }</span>').appendTo(headerHead);
             }
         } else {
-            $('<span class="debug-message-type-other"></span>').text(""+obj).appendTo(entryObj);
+            $('<span class="red-ui-debug-msg-type-other"></span>').text(""+obj).appendTo(entryObj);
         }
         if (exposeApi) {
             element.prop('expand', function() { return function(targetPath, state) {
@@ -722,6 +722,62 @@ RED.utils = (function() {
         return result;
     }
 
+    function setMessageProperty(msg,prop,value,createMissing) {
+        if (typeof createMissing === 'undefined') {
+            createMissing = (typeof value !== 'undefined');
+        }
+        if (prop.indexOf('msg.')===0) {
+            prop = prop.substring(4);
+        }
+        var msgPropParts = normalisePropertyExpression(prop);
+        var depth = 0;
+        var length = msgPropParts.length;
+        var obj = msg;
+        var key;
+        for (var i=0;i<length-1;i++) {
+            key = msgPropParts[i];
+            if (typeof key === 'string' || (typeof key === 'number' && !Array.isArray(obj))) {
+                if (obj.hasOwnProperty(key)) {
+                    obj = obj[key];
+                } else if (createMissing) {
+                    if (typeof msgPropParts[i+1] === 'string') {
+                        obj[key] = {};
+                    } else {
+                        obj[key] = [];
+                    }
+                    obj = obj[key];
+                } else {
+                    return null;
+                }
+            } else if (typeof key === 'number') {
+                // obj is an array
+                if (obj[key] === undefined) {
+                    if (createMissing) {
+                        if (typeof msgPropParts[i+1] === 'string') {
+                            obj[key] = {};
+                        } else {
+                            obj[key] = [];
+                        }
+                        obj = obj[key];
+                    } else {
+                        return null;
+                    }
+                } else {
+                    obj = obj[key];
+                }
+            }
+        }
+        key = msgPropParts[length-1];
+        if (typeof value === "undefined") {
+            if (typeof key === 'number' && Array.isArray(obj)) {
+                obj.splice(key,1);
+            } else {
+                delete obj[key]
+            }
+        } else {
+            obj[key] = value;
+        }
+    }
     function separateIconPath(icon) {
         var result = {module: "", file: ""};
         if (icon) {
@@ -872,9 +928,9 @@ RED.utils = (function() {
     }
 
     function addSpinnerOverlay(container,contain) {
-        var spinner = $('<div class="projects-dialog-spinner "><img src="red/images/spin.svg"/></div>').appendTo(container);
+        var spinner = $('<div class="red-ui-component-spinner "><img src="red/images/spin.svg"/></div>').appendTo(container);
         if (contain) {
-            spinner.addClass('projects-dialog-spinner-contain');
+            spinner.addClass('red-ui-component-spinner-contain');
         }
         return spinner;
     }
@@ -923,12 +979,12 @@ RED.utils = (function() {
      /**
       * Create or update an icon element and append it to iconContainer.
       * @param iconUrl - Url of icon.
-      * @param iconContainer - Icon container element with palette_icon_container class.
+      * @param iconContainer - Icon container element with red-ui-palette-icon-container class.
       * @param isLarge - Whether the icon size is large.
       */
     function createIconElement(iconUrl, iconContainer, isLarge) {
         // Removes the previous icon when icon was changed.
-        var iconElement = iconContainer.find(".palette_icon");
+        var iconElement = iconContainer.find(".red-ui-palette-icon");
         if (iconElement.length !== 0) {
             iconElement.remove();
         }
@@ -944,19 +1000,20 @@ RED.utils = (function() {
             if (fontAwesomeUnicode) {
                 var faIconElement = $('<i/>').appendTo(iconContainer);
                 var faLarge = isLarge ? "fa-lg " : "";
-                faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
+                faIconElement.addClass("red-ui-palette-icon-fa fa fa-fw " + faLarge + iconPath.file);
                 return;
             }
             // If the specified name is not defined in font-awesome, show arrow-in icon.
             iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.png"
         }
-        var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
+        var imageIconElement = $('<div/>',{class:"red-ui-palette-icon"}).appendTo(iconContainer);
         imageIconElement.css("backgroundImage", "url("+iconUrl+")");
     }
 
     return {
         createObjectElement: buildMessageElement,
         getMessageProperty: getMessageProperty,
+        setMessageProperty: setMessageProperty,
         normalisePropertyExpression: normalisePropertyExpression,
         validatePropertyExpression: validatePropertyExpression,
         separateIconPath: separateIconPath,

packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js

@@ -36,10 +36,10 @@
          if (!isShowing) {
              return;
          }
-         var navNode = navVis.selectAll(".navnode").data(RED.view.getActiveNodes(),function(d){return d.id});
+         var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id});
          navNode.exit().remove();
          navNode.enter().insert("rect")
-             .attr('class','navnode')
+             .attr('class','red-ui-navigator-node')
              .attr("pointer-events", "none");
          navNode.each(function(d) {
              d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale })
@@ -57,8 +57,8 @@
      function resizeNavBorder() {
          if (navBorder) {
              scaleFactor = RED.view.scale();
-             chartSize = [ $("#chart").width(), $("#chart").height()];
-             scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
+             chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
+             scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
              navBorder.attr('x',scrollPos[0]/nav_scale)
                       .attr('y',scrollPos[1]/nav_scale)
                       .attr('width',chartSize[0]/nav_scale/scaleFactor)
@@ -68,49 +68,40 @@
      function toggle() {
          if (!isShowing) {
              isShowing = true;
-             $("#btn-navigate").addClass("selected");
+             $("#red-ui-view-navigate").addClass("selected");
              resizeNavBorder();
              refreshNodes();
-             $("#chart").on("scroll",onScroll);
+             $("#red-ui-workspace-chart").on("scroll",onScroll);
              navContainer.fadeIn(200);
          } else {
              isShowing = false;
              navContainer.fadeOut(100);
-             $("#chart").off("scroll",onScroll);
-             $("#btn-navigate").removeClass("selected");
+             $("#red-ui-workspace-chart").off("scroll",onScroll);
+             $("#red-ui-view-navigate").removeClass("selected");
          }
      }
 
      return {
          init: function() {
 
-             $(window).resize(resizeNavBorder);
+             $(window).on("resize", resizeNavBorder);
              RED.events.on("sidebar:resize",resizeNavBorder);
              RED.actions.add("core:toggle-navigator",toggle);
              var hideTimeout;
 
              navContainer = $('<div>').css({
                  "position":"absolute",
-                 "bottom":$("#workspace-footer").height(),
+                 "bottom":$("#red-ui-workspace-footer").height(),
                  "right":0,
                  zIndex: 1
-             }).appendTo("#workspace").hide();
+             }).appendTo("#red-ui-workspace").hide();
 
              navBox = d3.select(navContainer[0])
                  .append("svg:svg")
                  .attr("width", nav_width)
                  .attr("height", nav_height)
                  .attr("pointer-events", "all")
-                 .style({
-                     position: "absolute",
-                     bottom: 0,
-                     right:0,
-                     zIndex: 101,
-                     "border-left": "1px solid #ccc",
-                     "border-top": "1px solid #ccc",
-                     background: "rgba(245,245,245,0.8)",
-                     "box-shadow": "-1px 0 3px rgba(0,0,0,0.1)"
-                 });
+                 .attr("id","red-ui-navigator-canvas")
 
              navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
                  fill:"none",
@@ -119,14 +110,14 @@
              }).on("mousedown", function() {
                  // Update these in case they have changed
                  scaleFactor = RED.view.scale();
-                 chartSize = [ $("#chart").width(), $("#chart").height()];
+                 chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
                  dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor];
                  var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
                  var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
                  navBorder.attr('x',newX).attr('y',newY);
                  isDragging = true;
-                 $("#chart").scrollLeft(newX*nav_scale*scaleFactor);
-                 $("#chart").scrollTop(newY*nav_scale*scaleFactor);
+                 $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
+                 $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
              }).on("mousemove", function() {
                  if (!isDragging) { return }
                  if (d3.event.buttons === 0) {
@@ -136,29 +127,27 @@
                  var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
                  var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
                  navBorder.attr('x',newX).attr('y',newY);
-                 $("#chart").scrollLeft(newX*nav_scale*scaleFactor);
-                 $("#chart").scrollTop(newY*nav_scale*scaleFactor);
+                 $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
+                 $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
              }).on("mouseup", function() {
                  isDragging = false;
              })
 
-             navBorder = navBox.append("rect")
-                 .attr("stroke-dasharray","5,5")
-                 .attr("pointer-events", "none")
-                 .style({
-                     stroke: "#999",
-                     strokeWidth: 1,
-                     fill: "white",
-                 });
+             navBorder = navBox.append("rect").attr("class","red-ui-navigator-border")
 
              navVis = navBox.append("svg:g")
 
+             RED.statusBar.add({
+                 id: "view-navigator",
+                 align: "right",
+                 element: $('<button class="red-ui-footer-button-toggle single" id="red-ui-view-navigate"><i class="fa fa-map-o"></i></button>')
+             })
 
-            $("#btn-navigate").click(function(evt) {
+            $("#red-ui-view-navigate").on("click", function(evt) {
                 evt.preventDefault();
                 toggle();
             })
-            RED.popover.tooltip($("#btn-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
+            RED.popover.tooltip($("#red-ui-view-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
         },
         refresh: refreshNodes,
         resize: resizeNavBorder,

packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js

@@ -28,7 +28,7 @@ RED.workspaces = (function() {
             var tabId = RED.nodes.id();
             do {
                 workspaceIndex += 1;
-            } while ($("#workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
+            } while ($("#red-ui-workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
 
             ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})};
             RED.nodes.addWorkspace(ws,targetIndex);
@@ -107,8 +107,8 @@ RED.workspaces = (function() {
                             changed = true;
                             workspace.info = info;
                         }
-                        $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('workspace-disabled',!!workspace.disabled);
-                        $("#workspace").toggleClass("workspace-disabled",!!workspace.disabled);
+                        $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
+                        $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
 
                         if (changed) {
                             var historyEvent = {
@@ -150,7 +150,7 @@ RED.workspaces = (function() {
                 tabflowEditor.resize();
             },
             open: function(tray) {
-                var trayBody = tray.find('.editor-tray-body');
+                var trayBody = tray.find('.red-ui-tray-body');
                 var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
                 $('<div class="form-row">'+
                     '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
@@ -158,9 +158,8 @@ RED.workspaces = (function() {
                 '</div>').appendTo(dialogForm);
 
                 $('<div class="form-row">'+
-                    '<label for="node-input-disabled-btn" data-i18n="editor:workspace.status"></label>'+
-                    '<button type="button" id="node-input-disabled-btn" class="editor-button"><i class="fa fa-toggle-on"></i> <span id="node-input-disabled-label"></span></button> '+
-                    '<input type="checkbox" id="node-input-disabled" style="display: none;"/>'+
+                    '<label for="node-input-disabled" data-i18n="editor:workspace.status"></label>'+
+                    '<input type="checkbox" id="node-input-disabled"/>'+
                 '</div>').appendTo(dialogForm);
 
                 var row = $('<div class="form-row node-text-editor-row">'+
@@ -173,7 +172,7 @@ RED.workspaces = (function() {
                     value: ""
                 });
 
-                $('#node-info-input-info-expand').click(function(e) {
+                $('#node-info-input-info-expand').on("click", function(e) {
                     e.preventDefault();
                     var value = tabflowEditor.getValue();
                     RED.editor.editMarkdown({
@@ -190,36 +189,16 @@ RED.workspaces = (function() {
                     })
                 });
 
-                dialogForm.find('#node-input-disabled-btn').on("click",function(e) {
-                    var i = $(this).find("i");
-                    if (i.hasClass('fa-toggle-off')) {
-                        i.addClass('fa-toggle-on');
-                        i.removeClass('fa-toggle-off');
-                        $("#node-input-disabled").prop("checked",false);
-                        $("#node-input-disabled-label").text(RED._("editor:workspace.enabled"));
-                    } else {
-                        i.addClass('fa-toggle-off');
-                        i.removeClass('fa-toggle-on');
-                        $("#node-input-disabled").prop("checked",true);
-                        $("#node-input-disabled-label").text(RED._("editor:workspace.disabled"));
-                    }
-                })
-
                 if (workspace.hasOwnProperty("disabled")) {
                     $("#node-input-disabled").prop("checked",workspace.disabled);
-                    if (workspace.disabled) {
-                        dialogForm.find("#node-input-disabled-btn i").removeClass('fa-toggle-on').addClass('fa-toggle-off');
-                        $("#node-input-disabled-label").text(RED._("editor:workspace.disabled"));
-                    } else {
-                        $("#node-input-disabled-label").text(RED._("editor:workspace.enabled"));
-                    }
                 } else {
                     workspace.disabled = false;
-                    $("#node-input-disabled-label").text(RED._("editor:workspace.enabled"));
                 }
+                $("#node-input-disabled").toggleButton({invertState: true})
+
 
                 $('<input type="text" style="display: none;" />').prependTo(dialogForm);
-                dialogForm.submit(function(e) { e.preventDefault();});
+                dialogForm.on("submit", function(e) { e.preventDefault();});
                 $("#node-input-name").val(workspace.label);
                 RED.text.bidi.prepareInput($("#node-input-name"));
                 tabflowEditor.getSession().setValue(workspace.info || "", -1);
@@ -241,7 +220,7 @@ RED.workspaces = (function() {
     var workspaceTabCount = 0;
     function createWorkspaceTabs() {
         workspace_tabs = RED.tabs.create({
-            id: "workspace-tabs",
+            id: "red-ui-workspace-tabs",
             onchange: function(tab) {
                 var event = {
                     old: activeWorkspace
@@ -250,7 +229,7 @@ RED.workspaces = (function() {
                 event.workspace = activeWorkspace;
                 RED.events.emit("workspace:change",event);
                 window.location.hash = 'flow/'+tab.id;
-                $("#workspace").toggleClass("workspace-disabled",!!tab.disabled);
+                $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!tab.disabled);
                 RED.sidebar.config.refresh();
                 RED.view.focus();
             },
@@ -268,9 +247,9 @@ RED.workspaces = (function() {
                 if (tab.type === "tab") {
                     workspaceTabCount++;
                 }
-                $('<span class="workspace-disabled-icon"><i class="fa fa-ban"></i> </span>').prependTo("#red-ui-tab-"+(tab.id.replace(".","-"))+" .red-ui-tab-label");
+                $('<span class="red-ui-workspace-disabled-icon"><i class="fa fa-ban"></i> </span>').prependTo("#red-ui-tab-"+(tab.id.replace(".","-"))+" .red-ui-tab-label");
                 if (tab.disabled) {
-                    $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('workspace-disabled');
+                    $("#red-ui-tab-"+(tab.id.replace(".","-"))).addClass('red-ui-workspace-disabled');
                 }
                 RED.menu.setDisabled("menu-item-workspace-delete",workspaceTabCount <= 1);
                 if (workspaceTabCount === 1) {
@@ -294,16 +273,16 @@ RED.workspaces = (function() {
             onselect: function(selectedTabs) {
                 RED.view.select(false)
                 if (selectedTabs.length === 0) {
-                    $("#chart svg").css({"pointer-events":"auto",filter:"none"})
-                    $("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"})
-                    $("#palette-container").css({"pointer-events":"auto",filter:"none"})
-                    $(".sidebar-shade").hide();
+                    $("#red-ui-workspace-chart svg").css({"pointer-events":"auto",filter:"none"})
+                    $("#red-ui-workspace-toolbar").css({"pointer-events":"auto",filter:"none"})
+                    $("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"})
+                    $(".red-ui-sidebar-shade").hide();
                 } else {
                     RED.view.select(false)
-                    $("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"})
-                    $("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"})
-                    $("#palette-container").css({"pointer-events":"none",filter:"opacity(60%)"})
-                    $(".sidebar-shade").show();
+                    $("#red-ui-workspace-chart svg").css({"pointer-events":"none",filter:"opacity(60%)"})
+                    $("#red-ui-workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"})
+                    $("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"})
+                    $(".red-ui-sidebar-shade").show();
                 }
             },
             minimumActiveTabWidth: 150,
@@ -316,17 +295,25 @@ RED.workspaces = (function() {
         workspaceTabCount = 0;
     }
     function showWorkspace() {
-        $("#workspace .red-ui-tabs").show()
-        $("#chart").show()
-        $("#workspace-footer").children().show()
+        $("#red-ui-workspace .red-ui-tabs").show()
+        $("#red-ui-workspace-chart").show()
+        $("#red-ui-workspace-footer").children().show()
     }
     function hideWorkspace() {
-        $("#workspace .red-ui-tabs").hide()
-        $("#chart").hide()
-        $("#workspace-footer").children().hide()
+        $("#red-ui-workspace .red-ui-tabs").hide()
+        $("#red-ui-workspace-chart").hide()
+        $("#red-ui-workspace-footer").children().hide()
     }
 
     function init() {
+        $('<ul id="red-ui-workspace-tabs"></ul>').appendTo("#red-ui-workspace");
+        $('<div id="red-ui-workspace-tabs-shade" class="hide"></div>').appendTo("#red-ui-workspace");
+        $('<div id="red-ui-workspace-chart" tabindex="1"></div>').appendTo("#red-ui-workspace");
+        $('<div id="red-ui-workspace-toolbar"></div>').appendTo("#red-ui-workspace");
+        $('<div id="red-ui-workspace-footer" class="red-ui-component-footer"></div>').appendTo("#red-ui-workspace");
+        $('<div id="red-ui-editor-shade" class="hide"></div>').appendTo("#red-ui-workspace");
+
+
         createWorkspaceTabs();
         RED.events.on("sidebar:resize",workspace_tabs.resize);
 
@@ -337,7 +324,7 @@ RED.workspaces = (function() {
             deleteWorkspace(RED.nodes.workspace(activeWorkspace));
         });
 
-        $(window).resize(function() {
+        $(window).on("resize", function() {
             workspace_tabs.resize();
         });
 

packages/node_modules/@node-red/editor-client/src/js/user.js

@@ -30,7 +30,11 @@ RED.user = (function() {
 
         dialog.dialog({
             autoOpen: false,
-            dialogClass: "ui-dialog-no-close",
+            classes: {
+                "ui-dialog": "red-ui-editor-dialog",
+                "ui-dialog-titlebar-close": "hide",
+                "ui-widget-overlay": "red-ui-editor-dialog"
+            },
             modal: true,
             closeOnEscape: !!opts.cancelable,
             width: 600,
@@ -59,7 +63,7 @@ RED.user = (function() {
                                     var r = row;
                                     return function(event) {
                                         if (event.keyCode == 13) {
-                                            r.next("div").find("input").focus();
+                                            r.next("div").find("input").trigger("focus");
                                             event.preventDefault();
                                         }
                                     }
@@ -74,7 +78,7 @@ RED.user = (function() {
 
 
                     $("#node-dialog-login-submit").button();
-                    $("#node-dialog-login-fields").submit(function(event) {
+                    $("#node-dialog-login-fields").on("submit", function(event) {
                         $("#node-dialog-login-submit").button("option","disabled",true);
                         $("#node-dialog-login-failed").hide();
                         $(".login-spinner").show();
@@ -115,7 +119,7 @@ RED.user = (function() {
                         var field = data.prompts[i];
                         var row = $("<div/>",{class:"form-row",style:"text-align: center"}).appendTo("#node-dialog-login-fields");
 
-                        var loginButton = $('<a href="#"></a>',{style: "padding: 10px"}).appendTo(row).click(function() {
+                        var loginButton = $('<a href="#"></a>',{style: "padding: 10px"}).appendTo(row).on("click", function() {
                             document.location = field.url;
                         });
                         if (field.image) {
@@ -138,7 +142,7 @@ RED.user = (function() {
 
                 }
                 if (opts.cancelable) {
-                    $("#node-dialog-login-cancel").button().click(function( event ) {
+                    $("#node-dialog-login-cancel").button().on("click", function( event ) {
                         $("#node-dialog-login").dialog('destroy').remove();
                     });
                 }
@@ -178,9 +182,9 @@ RED.user = (function() {
     }
 
     function updateUserMenu() {
-        $("#btn-usermenu-submenu li").remove();
+        $("#red-ui-header-button-user-submenu li").remove();
         if (RED.settings.user.anonymous) {
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-login",
                 label:RED._("menu.label.login"),
                 onselect: function() {
@@ -194,11 +198,11 @@ RED.user = (function() {
                 }
             });
         } else {
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-username",
                 label:"<b>"+RED.settings.user.username+"</b>"
             });
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-logout",
                 label:RED._("menu.label.logout"),
                 onselect: function() {
@@ -213,8 +217,8 @@ RED.user = (function() {
         if (RED.settings.user) {
             if (!RED.settings.editorTheme || !RED.settings.editorTheme.hasOwnProperty("userMenu")) {
 
-                var userMenu = $('<li><a id="btn-usermenu" class="button hide" data-toggle="dropdown" href="#"></a></li>')
-                    .prependTo(".header-toolbar");
+                var userMenu = $('<li><a id="red-ui-header-button-user" class="button hide" href="#"></a></li>')
+                    .prependTo(".red-ui-header-toolbar");
                 if (RED.settings.user.image) {
                     $('<span class="user-profile"></span>').css({
                         backgroundImage: "url("+RED.settings.user.image+")",
@@ -223,7 +227,7 @@ RED.user = (function() {
                     $('<i class="fa fa-user"></i>').appendTo(userMenu.find("a"));
                 }
 
-                RED.menu.init({id:"btn-usermenu",
+                RED.menu.init({id:"red-ui-header-button-user",
                     options: []
                 });
                 updateUserMenu();

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

@@ -1,29 +1,68 @@
-.ace_gutter {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-}
-.ace_scroller {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
+.red-ui-editor, .red-ui-editor-dialog {
 
-#event-log-editor {
+    .ace_read-only {
+        .ace_scroller {
+            background: $text-editor-background-disabled;
+            color: $text-editor-color-disabled;
+        }
+        .ace_cursor {
+           color: transparent !important;
+        }
+    }
+
+
+    .ace_gutter {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+    }
     .ace_scroller {
-        background: #444;
-        color: #dd9;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
     }
-    .ace_active-line {
-        background: #666 !important;
-    }
-    .ace_selection {
-        background: #999 !important;
-    }
-}
 
-.ace_tooltip {
-    background-image: none;
-    background: #fcffdc;
-    border-radius: 4px;
-    @include component-shadow;
-    border-color: $primary-border-color;
+    .ace_scroller {
+        background: $text-editor-background;
+        color: $text-editor-color;
+    }
+    .ace_marker-layer .ace_active-line {
+        background: $text-editor-active-line-background;
+    }
+    .ace_marker-layer .ace_selection {
+        background: $text-editor-selection-background;
+        border-radius: 1px;
+    }
+    .ace_gutter-cell  {
+        color: $text-editor-color;
+    }
+    .ace_gutter-active-line {
+        background: $text-editor-gutter-active-line-background;
+    }
+    .ace_gutter {
+        background: $text-editor-gutter-background;
+    }
+    .ace_tooltip {
+        font-family: $primary-font;
+        line-height: 1.4em;
+        max-width: 400px;
+        white-space: normal;
+        background-image: none;
+        background: $popover-background;
+        color: $popover-color;
+        border-radius: 4px;
+        @include component-shadow;
+        border-color: $popover-background;
+    }
+
+    #red-ui-event-log-editor {
+        .ace_scroller {
+            background: $event-log-background;
+            color: $event-log-color;
+        }
+        .ace_marker-layer .ace_active-line {
+            background: $event-log-active-line-background;
+        }
+        .ace_marker-layer .ace_selection {
+            background: $event-log-selection-background;
+        }
+    }
 }

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

@@ -0,0 +1,261 @@
+/**
+* Copyright JS Foundation and other contributors, http://js.foundation
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
+
+
+
+.red-ui-editor {
+    font-size: $primary-font-size;
+    font-family: $primary-font;
+    padding: 0;
+    margin: 0;
+    background: $primary-background;
+    color: $primary-text-color;
+    line-height: 20px;
+}
+
+#red-ui-editor {
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+}
+#red-ui-editor-node-configs {
+    display: none;
+}
+#red-ui-main-container {
+    position: absolute;
+    top:40px; left:0; bottom: 0; right:0;
+    overflow:hidden;
+}
+
+#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade  {
+    @include shade;
+    z-index: 2;
+}
+#red-ui-sidebar-shade  {
+    left: -8px;
+    top: -1px;
+    bottom: -1px;
+}
+#red-ui-full-shade {
+    @include shade;
+    z-index: 15;
+}
+.red-ui-editor,
+.red-ui-editor-dialog,
+.red-ui-menu,
+.red-ui-popover,
+.red-ui-typedInput-options,
+.red-ui-icon-picker {
+    a {
+        text-decoration: none;
+    }
+    a:hover,
+    a:focus {
+        text-decoration: none;
+    }
+
+    p {
+        margin: 0 0 10px;
+    }
+
+    small {
+        font-size: 85%;
+    }
+
+    strong {
+        font-weight: bold;
+    }
+
+    em {
+        font-style: italic;
+    }
+
+    cite {
+        font-style: normal;
+    }
+
+    ul,
+    ol {
+        padding: 0;
+        margin: 0 0 10px 25px;
+    }
+
+    ul ul,
+    ul ol,
+    ol ol,
+    ol ul {
+        margin-bottom: 0;
+    }
+
+    li {
+        line-height: 20px;
+    }
+    dl {
+        margin-bottom: 20px;
+    }
+
+    dt,
+    dd {
+        line-height: 20px;
+    }
+
+    dt {
+        font-weight: bold;
+    }
+
+    dd {
+        margin-left: 10px;
+    }
+
+    hr {
+        margin: 20px 0;
+        border: 0;
+        border-top: 1px solid $tertiary-border-color;
+    }
+
+
+
+    i.spinner {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        vertical-align: text-top;
+        margin-top: 0px;
+        background: url(images/spin.svg) no-repeat 50% 50%;
+        background-size: contain
+    }
+
+    code {
+        font-family: $monospace-font;
+        font-size: $primary-font-size;
+        padding: 0px;
+        margin: 1px;
+        color: $info-text-code-color;
+        white-space: nowrap;
+    }
+
+    pre {
+        display: block;
+        padding: 9.5px;
+        margin: 0 0 10px;
+        line-height: 20px;
+        word-break: break-all;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        background-color:$tertiary-background;
+        border: 1px solid $tertiary-border-color;
+        border-radius: 2px;
+    }
+
+    pre code {
+        padding: 0;
+        color: inherit;
+        white-space: pre;
+        white-space: pre-wrap;
+        background-color: transparent;
+        border: 0;
+    }
+
+    .pull-right {
+        float: right;
+    }
+
+    .pull-left {
+        float: left;
+    }
+    .hide {
+        display: none;
+    }
+    .show {
+        display: block;
+    }
+
+    img {
+        width: auto\9;
+        height: auto;
+        max-width: 100%;
+        vertical-align: middle;
+        border: 0;
+        -ms-interpolation-mode: bicubic;
+    }
+
+    blockquote {
+        padding: 0 0 0 15px;
+        margin: 0 0 20px;
+        border-left: 4px solid $secondary-border-color;
+        color: $secondary-text-color;
+
+        p {
+            font-size: 14px;
+            font-weight: inherit;
+            line-height: 1.25;
+            margin-bottom: 0;
+        }
+    }
+
+    table {
+        max-width: 100%;
+        background-color: transparent;
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+}
+
+.red-ui-component-spinner {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    right: 1px;
+    text-align: center;
+    padding: 40px;
+    background: $secondary-background;
+    &:before {
+      content: '';
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+      margin-right: -0.25em;
+    }
+    img {
+        display: inline-block;
+        vertical-align: middle;
+        width: 80px;
+    }
+    &.red-ui-component-spinner-sidebar {
+        background: $secondary-background;
+        padding:0;
+        img {
+            width: 40px;
+        }
+    }
+    &.projects-version-control-spinner-sidebar {
+        background: $secondary-background;
+        padding:0;
+        img {
+            width: 20px;
+        }
+    }
+
+    &.red-ui-component-spinner-contain {
+        padding: 0;
+        img {
+            width: auto;
+            height: 100%;
+            max-height: 50px;
+        }
+    }
+}

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

@@ -14,60 +14,273 @@
  * limitations under the License.
  **/
 
-$background-color: #f3f3f3;
+$primary-font: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+$primary-font-size: 14px;
+$monospace-font: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace;
 
-$form-placeholder-color: #bbbbbb;
-$form-text-color: #444;
+$primary-background: #f3f3f3;//#0ff;
+
+$secondary-background: #fff;//#ff0;
+$secondary-background-selected: #efefef;//#e9e900;
+$secondary-background-inactive: #f0f0f0;//#f0f000;
+$secondary-background-hover: #ddd;//#dd0;
+$secondary-background-disabled: #f9f9f9;//#fafa0;
+
+$tertiary-background:  #f7f7f7;//#f0f;
+
+$shadow: rgba(0, 0, 0, 0.2);
+
+// Main body text
+$primary-text-color: #555;//#0f0;
+// UI control label text
+$secondary-text-color: #888;//#00f;
+$secondary-text-color-focus: #666;//#009;
+$secondary-text-color-hover: #666;//#006;
+$secondary-text-color-active: #666;//#006;
+$secondary-text-color-selected: #666;//#00A;
+$secondary-text-color-inactive: #666;//#006;
+$secondary-text-color-disabled: #bbb;//#00C;
+$secondary-text-color-disabled-active: #999;//#009;
+$secondary-text-color-disabled-inactive: #aaa;//#00A;
+
+// Sub label text
+$tertiary-text-color: #aaa;//#90f;
+// Heading text
+$header-text-color: #444;//#f00;
+
+$text-color-warning: #AD1625;
+$text-color-green: #3a3;
+
+$primary-border-color: #bbbbbb;//#f00;
+$secondary-border-color: #dddddd;//#0f0;
+$tertiary-border-color: #ccc;//#00f;
+
+$form-background: $secondary-background;
+
+$form-placeholder-color: $tertiary-text-color;
+$form-text-color: $primary-text-color;
+$form-text-color-disabled: $secondary-text-color-disabled;
 $form-input-focus-color:  rgba(85,150,230,0.8);
-$form-input-border-color:  #ccc;
-$form-input-border-selected-color:  #aaa;
+$form-input-border-color:  $tertiary-border-color;
+$form-input-border-selected-color:  #aaa;//#f0f;
+$form-input-border-error-color: rgb(214, 97, 95);
+$form-input-background: $secondary-background;
+$form-input-background-disabled: $secondary-background-disabled;
+$form-button-background: $secondary-background-selected;
+
+$form-tips-background: #ffe;
+
+
+$text-editor-color: #4D4D4C;//#00f;
+$text-editor-background: $secondary-background;
+$text-editor-color-disabled: $secondary-text-color-inactive;
+$text-editor-background-disabled: $secondary-background-disabled;
+$text-editor-gutter-background: #f6f6f6;//#ee0;
+$text-editor-gutter-color: #777;//#00e;
+$text-editor-gutter-active-line-background: #dcdcdc;//#dd0;
+$text-editor-active-line-background: #efefef;//#ee0;
+$text-editor-selection-background: #D6D6D6;//#e0e;
+
+$event-log-background: #444;
+$event-log-color: #dd9;
+$event-log-active-line-background: #333;
+$event-log-selection-background: #999;
+
+
+
+
+$list-item-color: $primary-text-color;
+$list-item-secondary-color: $secondary-text-color;
+$list-item-background: $secondary-background;
+$list-item-background-disabled: $secondary-background-inactive;
+$list-item-background-hover: $secondary-background-hover;
+$list-item-background-selected: $secondary-background-selected;
+$list-item-border-selected: $secondary-text-color-selected;
+
+$tab-text-color-active: $header-text-color;
+$tab-text-color-inactive: $secondary-text-color-inactive;
+$tab-text-color-disabled-active: $secondary-text-color-disabled-active;
+$tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
+
+$tab-badge-color: $tertiary-text-color;
+$tab-background: $secondary-background;
+$tab-background-active: $secondary-background;
+$tab-background-selected: $secondary-background-selected;
+$tab-background-inactive: $secondary-background-inactive;
+$tab-background-hover: $secondary-background-hover;
+
+$palette-header-background: $primary-background;
+$palette-header-color: $header-text-color;
+$palette-content-background: $secondary-background;
+
+
+$workspace-button-background: $secondary-background;
+$workspace-button-background-hover: $secondary-background-hover;
+$workspace-button-background-active: $secondary-background-selected;
+
+$workspace-button-color: $secondary-text-color;
+$workspace-button-color-disabled: $secondary-text-color-disabled;
+$workspace-button-color-focus: $secondary-text-color-focus;
+$workspace-button-color-hover: $secondary-text-color-hover;
+$workspace-button-color-active: $secondary-text-color-active;
+$workspace-button-color-selected: $secondary-text-color-selected;
+
+$workspace-button-color-primary: #eee;
+$workspace-button-background-primary: #AD1625;
+$workspace-button-background-primary-hover: #6E0A1E;
+
+$workspace-button-color-focus-outline: $form-input-border-color;
+
+$shade-color: rgba(160,160,160,0.5);
+
+
+$popover-background: #333;
+$popover-color: #eee;
+$popover-button-border-color: #bbb;
+$popover-button-border-color-hover: #666;
+
+
+
+$diff-text-header-color: $secondary-text-color;
+$diff-text-header-background: #ffd;
+$diff-text-header-background-hover: #ffc;
+$diff-state-added: #009900;
+$diff-state-deleted: #f80000;
+$diff-state-changed: #f89406;
+$diff-state-changed-background: #fff2e1;
+$diff-state-unchanged: #bbb;
+$diff-state-unchanged-background: #fff;
+
+$diff-state-conflicted: purple;
+$diff-state-moved: #3f81b3;
+$diff-state-conflict: #9b45ce;
+$diff-state-conflict-background: #ffdad4;
+
+$diff-state-added-background: #e7ffe3;
+$diff-state-added-border: #b8daad;
+$diff-state-added-header-background: #c0f6c0;
+$diff-state-added-header-border: #aaeeaa;
+
+$diff-state-deleted-background: #ffe1e1;
+$diff-state-deleted-border: #e4bcbc;
+$diff-state-deleted-header-background: #ffcccc;
+$diff-state-deleted-header-border: #eebbbb;
+
+$diff-merge-header-color: #800080;
+$diff-merge-header-background: #e5f9ff;
+$diff-merge-header-border-color: #b2edff;
+
+$menuBackground: $primary-background;
+$menuDivider: $secondary-border-color;
+$menuColor: $primary-text-color;
+$menuActiveColor: $secondary-text-color-active;
+$menuActiveBackground: $secondary-background-hover;
+$menuDisabledColor: $secondary-text-color-disabled;
+$menuHoverColor: $secondary-text-color-hover;
+$menuHoverBackground: $secondary-background-hover;
+$menuCaret: $tertiary-text-color;
+
+$view-navigator-background: rgba(245,245,245,0.8);
+
+$view-lasso-stroke: #ff7f0e;
+$view-lasso-fill: rgba(20,125,255,0.1);
+
+$view-background: $secondary-background;
+$view-select-mode-background: $secondary-background-selected;
+$view-grid-color: #eee;
+
+$node-label-color: #333;
+$node-border: #999;
+$node-border-unknown: #f33;
+$node-border-placeholder: #aaa;
+$node-background-placeholder: #eee;
+
+$node-port-background: #d9d9d9;
+$node-port-background-hover: #eee;
+$node-icon-color: #fff;
+$node-icon-background-color: rgba(0,0,0,0.05);
+$node-icon-background-color-fill: #000;
+$node-icon-background-color-opacity: 0.05;
+$node-icon-border-color: #000;
+$node-icon-border-color-opacity: 0.1;
+
+
+$node-link-port-background: #eee;
+
+$node-status-error-border: rgb(145, 16, 2);
+$node-status-error-background: rgb(255, 102, 0);
+$node-status-changed-border: rgb(28, 102, 140);
+$node-status-changed-background: rgb(0, 188, 255);
+
+$node-status-colors: (
+    red: #c00,
+    green: #5a8,
+    yellow: #F9DF31,
+    blue: #53A3F3,
+    grey: #d3d3d3
+);
 
 
 $node-selected-color: #ff7f0e;
 $port-selected-color: #ff7f0e;
+
 $link-color: #888;
 $link-link-color: #ccc;
 $link-link-active-color: #ff7f0e;
 $link-subflow-color: #bbb;
 $link-unknown-color: #f00;
 
-$primary-border-color: #bbbbbb;
-$secondary-border-color: #dddddd;
+$clipboard-textarea-background: #F3E7E7;
 
-$tab-background-active: #fff;
-$tab-background-selected: #f9f9f9;
-$tab-background-inactive: #f0f0f0;
-$tab-background-hover: #ddd;
 
-$palette-header-background: #f3f3f3;
+$deploy-button-color: #eee;
+$deploy-button-color-active: #ccc;
+$deploy-button-color-disabled: #999;
+$deploy-button-background: #8C101C;
+$deploy-button-background-hover: #6E0A1E;
+$deploy-button-background-active: #4C0A17;
+$deploy-button-background-disabled: #444;
+$deploy-button-background-disabled-hover: #555;
 
-$workspace-button-background: #fff;
-$workspace-button-background-hover: #ddd;
-$workspace-button-background-active: #efefef;
-$workspace-button-color: #888;
-$workspace-button-color-disabled: #ccc;
-$workspace-button-color-focus: #999;
-$workspace-button-color-hover: #666;
-$workspace-button-color-active: #666;
-$workspace-button-color-selected: #AAA;
 
-$workspace-button-toggle-color: #999;
-$workspace-button-toggle-color-selected: #888;
-$workspace-button-toggle-color-disabled: #ddd;
+$header-background: #000;
+$header-button-background-active: #121212;
+$header-menu-color: #C7C7C7;
+$header-menu-color-disabled: #666;
+$header-menu-heading-color: #fff;
+$header-menu-sublabel-color: #aeaeae;
+$header-menu-background: #121212;
+$header-menu-item-hover: #323232;
+$header-menu-item-border-active: #777677;
+$headerMenuItemDivider: #464646;
+$headerMenuCaret: #C7C7C7;
 
-$workspace-button-color-focus-outline: rgba(85,150,230,0.2);
+$vcCommitShaColor: #c38888;
 
-$typedInput-button-background: #efefef;
-$typedInput-button-background-hover: #ddd;
-$typedInput-button-background-active: #ddd;
+$info-text-code-color: #AD1625;
+$info-text-link-color: #0088cc;
 
-$editor-button-color-primary: #eee;
-$editor-button-background-primary: #AD1625;
-$editor-button-background-primary-hover: #6E0A1E;
-$editor-button-color: #999;
-$editor-button-background: #fff;
+$dnd-background: rgba(0,0,0,0.3);
+$dnd-color: #fff;
 
-$shade-color: rgba(160,160,160,0.5);
+$notification-border-default: #325C80;
+$notification-border-success: #4B8400;
+$notification-border-warning: #D74108;
+$notification-border-error: $text-color-warning;
 
-$popover-background: #333;
-$popover-color: #eee;
+$debug-message-background: $secondary-background;
+$debug-message-background-hover: $secondary-background-selected;
+
+$debug-message-text-color: #333;
+$debug-message-text-color-meta: #a66;
+$debug-message-text-color-object-key: #792e90;
+$debug-message-text-color-msg-type-other: #2033d6;
+$debug-message-text-color-msg-type-string: #b72828;
+$debug-message-text-color-msg-type-null: #666;
+$debug-message-text-color-msg-type-meta: #666;
+$debug-message-text-color-msg-type-number: #2033d6;
+
+$debug-message-border: #eee;
+$debug-message-border-hover: #999;
+$debug-message-border-warning: #ffdf9d;
+$debug-message-border-error: #f99;

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

@@ -14,16 +14,17 @@
  * limitations under the License.
  **/
 
-.debug-window {
+.red-ui-debug-window {
     padding:0;
     margin:0;
-    background: #fff;
+    background: $secondary-background;
     line-height: 20px;
+    .red-ui-debug-msg-payload {
+        font-size: 14px;
+    }
 }
-.debug-window .debug-message-payload {
-    font-size: 14px;
-}
-.debug-content {
+
+.red-ui-debug-content {
     position: absolute;
     top: 43px;
     bottom: 0px;
@@ -31,234 +32,216 @@
     right: 0px;
     overflow-y: scroll;
 }
-.debug-filter-box {
+.red-ui-debug-filter-box {
     position:absolute;
     top: 42px;
     left: 0px;
     right: 0px;
     z-index: 20;
-    background: #f9f9f9;
+    background: $tertiary-background;
     padding: 10px;
-    border-bottom: 1px solid #ddd;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    border-bottom: 1px solid $secondary-border-color;
+    box-shadow: 0 2px 6px $shadow;
 }
-.debug-filter-row {
+.red-ui-debug-filter-row {
     .red-ui-nodeList {
         margin: 10px 0;
     }
 }
 
-.debug-message {
+.red-ui-debug-msg {
     position: relative;
-    border-bottom: 1px solid #eee;
-    border-left: 8px solid #eee;
-    border-right: 8px solid #eee;
+    border-bottom: 1px solid $debug-message-border;
+    border-left: 8px solid $debug-message-border;
+    border-right: 8px solid $debug-message-border;
     padding: 2px;
-    &>.debug-message-meta .debug-message-tools {
+    &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
         display: none;
     }
 
-    &.debug-message-hover {
-        border-right-color: #999;
-        &>.debug-message-meta .debug-message-tools {
+    &.red-ui-debug-msg-hover {
+        border-right-color: $debug-message-border-hover;
+        &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
             display: inline-block;
         }
     }
 }
-.debug-message-row {
-    .debug-message-tools-pin {
+.red-ui-debug-msg-row {
+    .red-ui-debug-msg-tools-pin {
         display: none;
     }
-    &.debug-message-row-pinned .debug-message-tools-pin {
+    &.red-ui-debug-msg-row-pinned .red-ui-debug-msg-tools-pin {
         display: inline-block;
     }
     &:hover {
-        background: #f3f3f3;
-        &>.debug-message-tools {
-            .debug-message-tools-copy {
+        background: $debug-message-background-hover;
+        &>.red-ui-debug-msg-tools {
+            .red-ui-debug-msg-tools-copy {
                 display: inline-block;
             }
-            .debug-message-tools-pin {
+            .red-ui-debug-msg-tools-pin {
                 display: inline-block;
             }
-            .debug-message-tools-other {
+            .red-ui-debug-msg-tools-other {
                 display: inline-block;
             }
         }
     }
 }
-.debug-message-meta .debug-message-tools {
-    .editor-button-small {
+.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
+    .red-ui-button-small {
         font-size: 11px;
     }
 }
-.debug-message-tools {
+.red-ui-debug-msg-tools {
     .button-group:not(:last-child) {
         margin-right: 3px;
     }
-    .editor-button-small {
+    .red-ui-button-small {
         height: 16px;
         line-height: 14px;
         font-size: 8px;
         border-radius: 1px;
         padding: 0 3px;
         min-width: 18px;
-        i.fa-terminal {
-            // terminal icon is a bit thin, so darken its color for better contrast
-            color: darken($editor-button-color, 30%) !important;
-        }
-        &.selected {
-            color: darken($workspace-button-color-selected, 10%) !important;
-            background: darken($workspace-button-background-active,10%);
-        }
     }
 }
 
-.debug-message-meta {
-    background: #fff;
+.red-ui-debug-msg-meta {
+    background: $debug-message-background;
     font-size: 11px;
-    color: #707070;
+    color: $secondary-text-color-inactive;
 }
-.debug-message-date {
+.red-ui-debug-msg-date {
     padding: 1px 5px 1px 1px;
 }
-.debug-message-topic {
+.red-ui-debug-msg-topic {
     display: block;
-    color: #a66;
+    color: $debug-message-text-color-meta;
 }
-.debug-message-name {
+.red-ui-debug-msg-name {
     padding: 1px 5px;
-    color: #707070;
+    color: $secondary-text-color-inactive;
 }
-.debug-message-tools {
+.red-ui-debug-msg-tools {
     position: absolute;
     top: 3px;
     right: 1px;
-    .debug-message-tools-copy {
+    .red-ui-debug-msg-tools-copy {
         display: none;
     }
-    .debug-message-tools-other {
+    .red-ui-debug-msg-tools-other {
         display: none;
     }
 }
-.debug-message-payload {
+.red-ui-debug-msg-payload {
     display: block;
     padding: 2px;
-    background: #fff;
+    background: $debug-message-background;
+    font-family: $monospace-font;
+    font-size: 13px !important;
 }
-.debug-message-level-log {
-    border-left-color: #eee;
-    border-right-color: #eee;
+.red-ui-debug-msg-level-log {
+    border-left-color: $debug-message-border;
+    border-right-color: $debug-message-border;
 }
-.debug-message-level-30 {
-    border-left-color: #ffdf9d;
-    border-right-color: #ffdf9d;
+.red-ui-debug-msg-level-30 {
+    border-left-color: $debug-message-border-warning;
+    border-right-color: $debug-message-border-warning;
 }
-.debug-message-level-20 {
-    border-left-color: #f99;
-    border-right-color: #f99;
+.red-ui-debug-msg-level-20 {
+    border-left-color: $debug-message-border-error;
+    border-right-color: $debug-message-border-error;
 }
-.debug-message-object-entry {
+.red-ui-debug-msg-object-entry {
     position: relative;
     padding-left: 15px;
 }
-.debug-message-element {
-    color: #333;
-    font-family: Menlo, monospace;
-    font-size: 13px !important;
+.red-ui-debug-msg-element {
+    color: $debug-message-text-color;
     line-height: 1.3em;
 }
-.debug-message-object-key {
-    color: #792e90;
+.red-ui-debug-msg-object-key {
+    color: $debug-message-text-color-object-key;
 }
-.debug-message-object-value {
+.red-ui-debug-msg-object-value {
 
 }
-.debug-message-object-handle {
-    color: #666;
+.red-ui-debug-msg-object-handle {
+    color: $secondary-text-color;
     font-size: 1em;
     width: 1em;
     text-align: center;
     transition: transform 0.1s ease-in-out;
     transform: rotate(90deg);
 }
-.debug-message-element:not(.debug-message-top-level)>.debug-message-expandable>.debug-message-object-handle {
+.red-ui-debug-msg-element:not(.red-ui-debug-msg-top-level)>.red-ui-debug-msg-expandable>.red-ui-debug-msg-object-handle {
     margin-left: -1em;
 }
-.debug-message-object-entry>.debug-message-expandable>.debug-message-object-handle {
+.red-ui-debug-msg-object-entry>.red-ui-debug-msg-expandable>.red-ui-debug-msg-object-handle {
     margin-left: -1em;
 }
-.debug-message-object-entry.collapsed>span>.debug-message-object-handle {
+.red-ui-debug-msg-object-entry.collapsed>span>.red-ui-debug-msg-object-handle {
     transform: rotate(0deg);
 }
-.debug-message-element.collapsed>span>.debug-message-object-handle {
+.red-ui-debug-msg-element.collapsed>span>.red-ui-debug-msg-object-handle {
     transform: rotate(0deg);
 }
-.debug-message-object-entry.collapsed > .debug-message-object-entry {
+.red-ui-debug-msg-object-entry.collapsed > .red-ui-debug-msg-object-entry {
     display:none;
 }
-.debug-message-element.collapsed .debug-message-object-entry {
+.red-ui-debug-msg-element.collapsed .red-ui-debug-msg-object-entry {
     display:none;
 }
-.debug-message-element:not(.collapsed)>.debug-message-expandable>.debug-message-object-value>.debug-message-object-header {
+.red-ui-debug-msg-element:not(.collapsed)>.red-ui-debug-msg-expandable>.red-ui-debug-msg-object-value>.red-ui-debug-msg-object-header {
     display:none;
 }
-.debug-message-element.collapsed .debug-message-buffer-opts {
+.red-ui-debug-msg-element.collapsed .red-ui-debug-msg-buffer-opts {
     display: none;
 }
-.debug-message-element.collapsed .debug-message-object-type-header {
+.red-ui-debug-msg-element.collapsed .red-ui-debug-msg-object-type-header {
     display:none;
 }
-.debug-message-object-entry pre {
-    font-family: Menlo, monospace;
+.red-ui-debug-msg-object-entry pre {
+    font-family: $monospace-font;
     font-size: 13px;
     line-height: 1.2em;
     margin: 0 0 0 -1em;
 }
 
-.debug-message-type-other { color: #2033d6; }
-.debug-message-type-string { color: #b72828; }
-.debug-message-type-null { color: #666; font-style: italic;}
-.debug-message-type-meta { color: #666; font-style: italic;}
-.debug-message-type-number { color: #2033d6; };
-.debug-message-type-number-toggle { cursor: pointer;}
+.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
+.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
+.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
+.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;}
+.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; };
+.red-ui-debug-msg-type-number-toggle { cursor: pointer;}
 
-.debug-message-row {
+.red-ui-debug-msg-row {
     display: block;
     padding: 4px 2px 2px;
     position: relative;
-    &.debug-message-row-pinned {
-        background: #f6f6f6;
+    &.red-ui-debug-msg-row-pinned {
+        background: $list-item-border-selected;
     }
 }
-.debug-message-expandable {
+.red-ui-debug-msg-expandable {
     cursor: pointer;
 }
-.debug-message-expandable:hover .debug-message-object-handle {
-    color: #b72828 !important;
+.red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle {
+    color:$secondary-text-color-hover;
 }
 
-.debug-message-buffer-opts a {
-    font-size: 9px;
-    color: #bbb;
-    border: 1px solid #bbb;
-    border-radius: 2px;
-    padding: 2px 5px;
+.red-ui-debug-msg-buffer-opts {
     margin-left: 5px;
 }
-.debug-message-buffer-opts a:hover {
-    text-decoration: none;
-    color: #999;
-    border: 1px solid #999;
-    background: #f3f3f3;
-}
-.debug-message-buffer-raw > .debug-message-string-rows {
+
+.red-ui-debug-msg-buffer-raw > .red-ui-debug-msg-string-rows {
     display: none;
 }
-.debug-message-buffer-string > .debug-message-array-rows {
+.red-ui-debug-msg-buffer-string > .red-ui-debug-msg-array-rows {
     display: none;
 }
-.debug-message-type-string-swatch {
+.red-ui-debug-msg-type-string-swatch {
     display: inline-block;
     width: 1.1em;
     height: 0.9em;

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

@@ -15,7 +15,7 @@
  **/
 
 
-.node-dialog-view-diff-panel {
+.red-ui-diff-panel {
     padding: 5px;
     padding-top: 30px;
     position: relative;
@@ -23,11 +23,11 @@
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
-        background: #f9f9f9;
+        background: $tertiary-background;
     }
-    .node-dialog-view-diff-diff {
+    .red-ui-diff-list {
         li {
-            background: #f9f9f9;
+            background: $tertiary-background;
             padding: 0px;
             border: none;
             min-height: 0;
@@ -38,7 +38,7 @@
         // padding-bottom: 5px;
     }
 }
-.node-diff-container {
+.red-ui-diff-container {
     position: absolute;
     top: 40px;
     right:0;
@@ -47,7 +47,7 @@
     overflow-y: scroll;
 }
 
-.node-dialog-view-diff-headers {
+.red-ui-diff-panel-headers {
     position: absolute;
     left:232px;
     right:12px;
@@ -62,7 +62,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 50%;
-        background: #f9f9f9;
+        background: $tertiary-background;
         text-align: center;
         border-top: 1px solid $secondary-border-color;
         border-color:$secondary-border-color;
@@ -73,35 +73,35 @@
     }
 }
 
-.node-diff-toolbar {
+.red-ui-diff-dialog-toolbar {
     box-sizing: border-box;
-    color: #666;
+    color: $secondary-text-color;
     text-align: right;
     padding: 8px 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border-bottom: 1px solid $secondary-border-color;
     white-space: nowrap;
 }
-.node-diff-tab {
-    background: #fff;
-    border: 1px solid #ddd;
+.red-ui-diff-list-flow {
+    background: $secondary-background;
+    border: 1px solid $secondary-border-color;
     border-radius: 1px;
     overflow: hidden;
 
     &.collapsed {
-        .node-diff-tab-title .node-diff-chevron {
+        .red-ui-diff-list-flow-title .red-ui-diff-list-chevron {
             transform: rotate(-90deg);
         }
-        .node-diff-node-entry {
+        .red-ui-diff-list-node {
             display: none;
         }
     }
 }
-.node-diff-tab-stats {
+.red-ui-diff-list-flow-stats {
     font-size: 0.9em;
 }
 
-.node-diff-chevron {
+.red-ui-diff-list-chevron {
     display: inline-block;
     width: 15px;
     text-align: center;
@@ -109,30 +109,30 @@
     transition: transform 0.1s ease-in-out;
 
 }
-.node-diff-node-entry {
+.red-ui-diff-list-node {
     margin-left: 20px;
     font-size: 0.9em;
 
     &:first-child {
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid $tertiary-border-color;
     }
     &:not(:last-child) {
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid $tertiary-border-color;
     }
 
     &.collapsed {
-        .node-diff-chevron {
+        .red-ui-diff-list-chevron {
             transform: rotate(-90deg);
         }
-        .node-diff-node-entry-properties {
+        .red-ui-diff-list-node-properties {
             display: none;
         }
     }
     &:not(.collapsed) {
-        .node-diff-node-entry-cell:not(:first-child) {
+        .red-ui-diff-list-node-cell:not(:first-child) {
             //display: none;
         }
-        .node-diff-node-entry-cell:first-child {
+        .red-ui-diff-list-node-cell:first-child {
             //width: 100%
         }
     }
@@ -150,7 +150,7 @@
         width: 100%;
     }
     td, th {
-        border-top: 1px solid #f3f3f3;
+        border-top: 1px solid $secondary-border-color;
         border-left: 1px solid $secondary-border-color;
         &:first-child {
             border-left: none;
@@ -166,18 +166,18 @@
             overflow:hidden;
         }
         &:hover {
-            background: #f9f9f9;
+            background: $secondary-background-selected;
         }
 
     }
 
     td  {
-        .node-diff-status {
+        .red-ui-diff-status {
             margin-left: 0;
         }
     }
-    tr:not(.node-diff-property-header) {
-        .node-diff-status {
+    tr:not(.red-ui-diff-list-header) {
+        .red-ui-diff-status {
             width: 12px;
             margin-left: 0;
             margin-top: 0;
@@ -186,8 +186,8 @@
         }
     }
 }
-.node-diff-three-way {
-    .node-diff-node-entry-cell {
+.red-ui-diff-three-way {
+    .red-ui-diff-list-node-cell {
         width: calc((100% - 220px) / 2);
         &:first-child {
             width: 220px;
@@ -197,8 +197,8 @@
         width:50%;
     }
 
-    .node-diff-node-entry {
-        .node-diff-node-entry-cell {
+    .red-ui-diff-list-node {
+        .red-ui-diff-list-node-cell {
             width: calc((100% + 20px - 220px) / 2);
             &:first-child {
                 width: 200px;
@@ -208,131 +208,113 @@
     }
 }
 
-.node-diff-column {
-    display:inline-block;
-    height:100%;
-    width:50%;
-    box-sizing: border-box;
-    white-space:nowrap;
-    overflow: hidden;
-    &:first-child {
-        border-right: 1px solid $secondary-border-color
-    }
-}
-
-.node-diff-tab-title {
+.red-ui-diff-list-flow-title {
     cursor: pointer;
     padding: 0;
-    // background: #f6f6f6;
     &:hover {
-        background: #f9f9f9;
+        background: $secondary-background-selected;
     }
 }
-.node-diff-tab-title-meta {
+.red-ui-diff-list-flow-title-meta {
     vertical-align: middle;
     display: inline-block;
     padding-top: 2px;
 }
-.node-diff-node-entry-header {
+.red-ui-diff-list-node-header {
     cursor: pointer;
     &:hover {
-        background: #f9f9f9;
+        background: $secondary-background-selected;
     }
 }
-.node-diff-node-entry-node {
+.red-ui-diff-list-node-icon {
     vertical-align: middle;
     display: inline-block;
     margin: 5px;
     width: 18px;
     height: 15px;
-    background: #ddd;
+    background: $form-input-background;
     border-radius: 2px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
 
-    .palette_icon {
+    .red-ui-palette-icon {
         background-position: 49% 50%;
         width: 15px;
     }
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         position: relative;
         top: -2.5px;
         left: 0px;
     }
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         width: 18px;
     }
 }
-.node-diff-tab-empty {
-    .node-diff-chevron i {
+.red-ui-diff-list-flow-empty {
+    .red-ui-diff-list-chevron i {
         display: none;
     }
-    .node-diff-tab-title {
+    .red-ui-diff-list-flow-title {
         cursor: default;
         &:hover {
             background: none;
         }
     }
 }
-.node-diff-node-deleted {
-    //background: #fadddd;
+.red-ui-diff-status-deleted {
     cursor: default !important;
-    .node-diff-status {
-        color: #f80000;
+    .red-ui-diff-status {
+        color: $diff-state-deleted;
     }
-    .node-diff-node-entry-node {
+    .red-ui-diff-list-node-node {
         opacity: 0.5;
     }
-    .node-diff-node-description {
+    .red-ui-diff-list-node-description {
         opacity: 0.5;
         text-decoration: line-through;
     }
 }
-.node-diff-node-added {
-    //background: #eefaee;
+.red-ui-diff-status-added {
     cursor: default !important;
-    .node-diff-status {
-        color: #009900;
+    .red-ui-diff-status {
+        color: $diff-state-added;
     }
 }
-.node-diff-node-moved {
-    //background: #eefaee;
-    .node-diff-status {
-        color: #3f81b3;
+.red-ui-diff-status-moved {
+    .red-ui-diff-status {
+        color: $diff-state-moved;
     }
 }
 
-.node-diff-node-changed {
-    //background: #fff2ca;
-    .node-diff-status {
-        color: #f89406;
+.red-ui-diff-status-changed {
+    .red-ui-diff-status {
+        color: $diff-state-changed;
     }
 }
-.node-diff-node-unchanged {
-    //background: #fff2ca;
-    .node-diff-status {
-        color: #bbb;
+.red-ui-diff-status-unchanged {
+    .red-ui-diff-status {
+        color: $diff-state-unchanged;
     }
 }
-.node-diff-node-conflict {
-    .node-diff-status {
-        color: #9b45ce;
+.red-ui-diff-status-conflict {
+    .red-ui-diff-status {
+        color: $diff-state-conflict;
     }
 }
-.node-diff-node-entry-title {
+.red-ui-diff-list-node-title {
     display: inline-block;
-    .node-diff-status {
+    .red-ui-diff-status {
         margin-left: 15px;
     }
 }
-.node-diff-node-entry-properties {
+.red-ui-diff-list-node-properties {
     margin: 0;
-    color: #666;
+    color: $primary-text-color;
 }
-.node-diff-status {
+.red-ui-diff-status {
     display: inline-block;
     height: 20px;
     margin-left: 5px;
@@ -341,12 +323,12 @@
     margin-bottom: 6px;
     text-align: center;
 }
-.node-diff-element {
+.red-ui-diff-list-element {
     display: inline-block;
     width: calc(100% - 20px);
 }
 
-.node-diff-node-description {
+.red-ui-diff-list-node-description {
     color: $form-text-color;
     margin-right: 5px;
     padding-top: 5px;
@@ -357,23 +339,15 @@
         clear: both;
     }
 }
-.node-diff-node-meta {
-    float: right;
-    //font-size: 0.9em;
-    color: #999;
-    margin-top: 7px;
-    margin-right: 10px;
-}
 
-.node-diff-count { color: #999}
-.node-diff-added { color: #009900}
-.node-diff-deleted { color: #f80000}
-.node-diff-changed { color: #f89406}
-.node-diff-unchanged { color: #bbb}
-.node-diff-conflicted { color: purple}
+.red-ui-diff-state-added { color: $diff-state-added; }
+.red-ui-diff-state-deleted { color: $diff-state-deleted; }
+.red-ui-diff-state-changed { color: $diff-state-changed; }
+.red-ui-diff-state-unchanged { color: $diff-state-unchanged; }
+.red-ui-diff-state-conflicted { color: $diff-state-conflicted; }
 
 
-.node-diff-node-entry-cell {
+.red-ui-diff-list-node-cell {
     display: inline-block;
     vertical-align: top;
     box-sizing: border-box;
@@ -385,35 +359,35 @@
     overflow: hidden;
     position: relative;
 }
-.node-diff-empty {
-    background: #f3f3f3;
+.red-ui-diff-empty {
+    background: $secondary-background-disabled;
     background: repeating-linear-gradient(
         20deg,
-        #fff, #fff 5px,
-        #f6f6f6 5px,
-        #f6f6f6 10px
+        $secondary-background, $secondary-background 5px,
+        $secondary-background-disabled 5px,
+        $secondary-background-disabled 10px
         );
 }
-.node-diff-node-entry-cell:first-child {
+.red-ui-diff-list-node-cell:first-child {
     border-left: none;
 }
-.node-diff-property-cell-label {
+.red-ui-diff-list-cell-label {
     margin-left: 20px;
     vertical-align: top;
     box-sizing: border-box;
     padding-left: 8px;
     width: 120px;
 }
-.node-diff-property-wires {
+.red-ui-diff-list-wires {
     display: inline-block;
-    .node-diff-node-entry-node {
+    .red-ui-diff-list-node-node {
         width: 18px;
         height: 15px;
     }
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         width: 18px;
     }
-    .palette_icon {
+    .red-ui-palette-icon {
         width: 15px;
     }
     ul,li,ol {
@@ -436,91 +410,84 @@
             width: 30px;
             text-align: center;
         }
-        & > li:not(:last-child) {
-            border-bottom: 1px solid #999;
-        }
     }
 
 }
-.node-diff-node-props .node-diff-node-entry-cell:first-child {
+.red-ui-diff-list-node-props .red-ui-diff-list-node-cell:first-child {
     padding: 6px 0px;
-    span:not(.node-diff-chevron) {
+    span:not(.red-ui-diff-list-chevron) {
         margin-left: 5px;
     }
 
 }
-.node-diff-property-cell {
-    // vertical-align: top;
-    // display:inline-block;
-    //
-    // box-sizing: border-box;
-    // padding: 1px 5px;
-    //min-height: 30px;
-
-    &.node-diff-node-changed {
-        background: #fff2e1 !important;
+.red-ui-diff-list-cell {
+    .red-ui-debug-msg-row:hover {
+        background: none;
     }
-    &.node-diff-node-conflict {
-        background: #ffdad4 !important;
+    &.red-ui-diff-status-changed {
+        background: $diff-state-changed-background;
+    }
+    &.red-ui-diff-status-conflict {
+        background: $diff-state-conflict-background;
     }
 }
 
-.node-diff-selectbox {
+label.red-ui-diff-selectbox {
     position: absolute;
     top:0;
     right:0;
     bottom:0;
     width: 35px;
     text-align: center;
-    border-left: 1px solid #eee;
+    border-left: 1px solid $secondary-border-color;
     margin:0;
-    input {
+    input[type="radio"] {
         margin-top: 8px;
     }
 
     &:hover {
-        background: #f3f3f3;
+        background: $secondary-background-hover;
     }
 }
 
-.node-diff-node-entry-conflict.node-diff-select-remote {
-    .node-diff-node-remote {
-        background: #e7ffe3;
+.red-ui-diff-list-node-conflict.red-ui-diff-select-remote {
+    .red-ui-diff-list-node-remote {
+        background: $diff-state-added-background;
         label {
-            border-left-color: #b8daad;
+            border-left-color: $diff-state-added-border;
         }
     }
-    .node-diff-node-local {
-        background: #ffe1e1;
+    .red-ui-diff-list-node-local {
+        background: $diff-state-deleted-background;
         label {
-            border-left-color: #e4bcbc;
+            border-left-color: $diff-state-deleted-border;
         }
     }
 }
-.node-diff-node-entry-conflict.node-diff-select-local {
-    .node-diff-node-local {
-        background: #e7ffe3;
+.red-ui-diff-list-node-conflict.red-ui-diff-select-local {
+    .red-ui-diff-list-node-local {
+        background: $diff-state-added-background;
         label {
-            border-left-color: #b8daad;
+            border-left-color: $diff-state-added-border;
         }
     }
-    .node-diff-node-remote {
-        background: #ffe1e1;
+    .red-ui-diff-list-node-remote {
+        background: $diff-state-deleted-background;
         label {
-            border-left-color: #e4bcbc;
+            border-left-color: $diff-state-deleted-border;
         }
     }
 }
 
 
-ul.node-dialog-configm-deploy-list {
+ul.red-ui-deploy-dialog-confirm-list {
     font-size: 0.9em;
     width: 400px;
     margin: 10px auto;
     text-align: left;
 }
 
-.node-dialog-confirm-conflict-row {
+.red-ui-deploy-dialog-confirm-conflict-row {
     img {
         vertical-align:middle;
         height: 30px;
@@ -532,6 +499,12 @@ ul.node-dialog-configm-deploy-list {
         font-size: 30px;
         width: 30px;
         margin-right: 10px;
+        &.fa-check {
+            color: $text-color-green;
+        }
+        &.fa-exclamation {
+            color: $secondary-text-color;
+        }
     }
     div {
         vertical-align: middle;
@@ -540,21 +513,21 @@ ul.node-dialog-configm-deploy-list {
     }
 }
 
-#node-diff-toolbar-resolved-conflicts .node-diff-status {
+#red-ui-diff-dialog-toolbar-resolved-conflicts .red-ui-diff-status {
     margin:0;
 }
-.node-diff-text-diff-button {
+.red-ui-diff-text-diff-button {
     float: right;
     margin: 2px 3px;
     line-height: 14px;
     height: 16px;
 
 }
-.node-text-diff {
+.red-ui-diff-text {
     height: 100%;
     overflow-y:auto;
 
-    table.node-text-diff-content {
+    table.red-ui-diff-text-content {
         margin: 10px;
         border: 1px solid $secondary-border-color;
         border-radius: 3px;
@@ -565,99 +538,100 @@ ul.node-dialog-configm-deploy-list {
             word-wrap: break-word;
         }
         td.lineno {
-            font-family: monospace;
+            font-family: $monospace-font;
             text-align: right;
-            color: #999;
-            background: #f6f6f6;
+            color: $tertiary-text-color;
+            background: $tertiary-background;
             padding: 1px 5px;
             &.added {
-                background: #c0f6c0;
+                background: $diff-state-added-header-background;
             }
             &.removed {
-                background: #ffcccc;
+                background: $diff-state-deleted-header-background;
             }
         }
         td.lineno:nth-child(3) {
             border-left: 1px solid $secondary-border-color;
         }
         td.linetext {
-            font-family: monospace;
+            font-family: $monospace-font;
             white-space: pre-wrap;
             padding: 1px 5px;
-            border-left: 1px solid #ccc;
+            border-left: 1px solid $tertiary-border-color;
             span.prefix {
                 width: 30px;
                 display: inline-block;
                 text-align: center;
-                color: #999;
+                color: $secondary-text-color;
             }
 
             &.added {
-                border-left-color: #aaeeaa
+                border-left-color: $diff-state-added-header-border;
             }
             &.removed {
-                border-left-color: #eebbbb
+                border-left-color: $diff-state-deleted-header-border;
             }
         }
         td.blank {
-            background: #f6f6f6;
+            background: $tertiary-background;
         }
         td.added {
-            background: #eefaee;
+            background: $diff-state-added-background;
         }
         td.removed {
-            background: #ffecec;
+            background: $diff-state-deleted-background;
         }
         tr.mergeHeader td {
-            color: #800080;
-            background: #e5f9ff;
+            color: $diff-merge-header-color;
+            background: $diff-merge-header-background;
             height: 26px;
             vertical-align: middle;
         }
         tr.mergeHeader-separator td {
-            color: #800080;
-            background: darken(#e5f9ff, 10%);
+            color: $diff-merge-header-color;
+            background: $diff-merge-header-border-color;
             height: 0px;
         }
         tr.mergeHeader-ours td {
-            border-top: 2px solid darken(#e5f9ff, 10%);
+            border-top: 2px solid $diff-merge-header-border-color;
         }
         tr.mergeHeader-theirs td {
-            border-bottom: 2px solid darken(#e5f9ff, 10%);
+            border-bottom: 2px solid $diff-merge-header-border-color;
         }
         td.unchanged {
-            color: #999;
+            background: $diff-state-unchanged-background;
+            color: $diff-state-unchanged;
         }
         tr.unchanged {
-            background: #fefefe;
+            background: $diff-state-unchanged-background;
         }
         tr.start-block {
-            border-top: 1px solid #f0f0f0;
+            border-top: 1px solid $secondary-border-color;
         }
         tr.end-block {
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid $secondary-border-color;
         }
-        tr.node-text-diff-file-header td {
+        tr.red-ui-diff-text-file-header td {
             .filename {
-                font-family: monospace;
+                font-family: $monospace-font;
             }
-            background: #f3f3f3;
+            background: $primary-background;
             padding: 5px 10px 5px 0;
-            color: #333;
+            color: $primary-text-color;
             cursor: pointer;
-            i.node-diff-chevron {
+            i.red-ui-diff-list-chevron {
                 width: 30px;
             }
         }
-        tr.node-text-diff-file-header.collapsed {
-            td i.node-diff-chevron {
+        tr.red-ui-diff-text-file-header.collapsed {
+            td i.red-ui-diff-list-chevron {
                 transform: rotate(-90deg);
             }
         }
-        tr.node-text-diff-commit-header td {
-            background: #f3f3f3;
+        tr.red-ui-diff-text-commit-header td {
+            background: $primary-background;
             padding: 5px 10px;
-            color: #333;
+            color: $primary-text-color;
             h3 {
                 font-size: 1.4em;
                 margin: 0;
@@ -665,7 +639,7 @@ ul.node-dialog-configm-deploy-list {
             .commit-summary {
                 border-top: 1px solid $secondary-border-color;
                 padding-top: 5px;
-                color: #999;
+                color: $secondary-text-color;
             }
             .commit-body {
                 margin-bottom:15px;
@@ -674,21 +648,21 @@ ul.node-dialog-configm-deploy-list {
             }
         }
 
-        tr.node-text-diff-header > td:not(.flow-diff) {
-            font-family: monospace;
+        tr.red-ui-diff-text-header > td:not(.red-ui-diff-flow-diff) {
+            font-family: $monospace-font;
             padding: 5px 10px;
             text-align: left;
-            color: #666;
-            background: #ffd;
+            color: $secondary-text-color;
+            background: $diff-text-header-background;
             height: 30px;
             vertical-align: middle;
-            border-top: 1px solid #f0f0f0;
-            border-bottom: 1px solid #f0f0f0;
+            border-top: 1px solid $secondary-border-color;
+            border-bottom: 1px solid $secondary-border-color;
         }
-        tr.node-text-diff-expand td {
+        tr.red-ui-diff-text-expand td {
             cursor: pointer;
             &:hover {
-                background: #ffc;
+                background: $diff-text-header-background;
             }
         }
     }

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

@@ -14,24 +14,26 @@
  * limitations under the License.
  **/
 
-#dropTarget {
+#red-ui-drop-target {
     position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
-    background: rgba(0,0,0,0.1);
+    background: $dnd-background;
     display:table;
     width: 100%;
     height: 100%;
     display: none;
     z-index:100;
-}
-#dropTarget div {
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
-    font-size: 40px;
-    color: #fff;
-}
-#dropTarget div i {
-    font-size: 80px;
+    div {
+        pointer-events: none;
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+        font-size: 40px;
+        color: $dnd-color;
+        i {
+            pointer-events: none;
+            font-size: 80px;
+        }
+    }
 }

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

@@ -14,80 +14,161 @@
  * limitations under the License.
  **/
 
+.red-ui-menu-dropdown {
+    font-family: $primary-font;
+    font-size: $primary-font-size;
+    position: absolute;
+    top: 100%;
+    width: 200px;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    margin: 2px 0 0;
+    margin-left: 0px !important;
+    padding: 5px 0;
+    list-style: none;
+    background: $menuBackground;
+    border: 1px solid $secondary-border-color;
+    box-shadow: 0 5px 10px $shadow;
+
+    &.pull-right {
+        right: 0;
+        left: auto;
+    }
+
+    .red-ui-menu-divider {
+        height: 1px;
+        margin: 9px 1px;
+        overflow: hidden;
+        background-color: $menuDivider;
+    }
+    & > li > a,
+    & > li > a:focus {
+        display: block;
+        padding: 4px 0 4px 32px;
+        clear: both;
+        font-weight: normal;
+        line-height: 20px;
+        color: $menuColor;
+        white-space: normal !important;
+        outline: none;
+    }
+
+    & > .active > a,
+    & > .active > a:hover,
+    & > .active > a:focus {
+        color: $menuActiveColor;
+        text-decoration: none;
+        background-color: $menuActiveBackground;
+        outline: 0;
+    }
+
+    & > .disabled > a,
+    & > .disabled > a:hover,
+    & > .disabled > a:focus {
+        color: $menuDisabledColor;
+    }
+
+    & > .disabled > a:hover,
+    & > .disabled > a:focus {
+        text-decoration: none;
+        cursor: default;
+        background-color: transparent;
+        background-image: none;
+    }
+
+    a {
+        .fa {
+            width: 20px;
+            margin-left: -25px;
+            margin-top: 3px;
+            text-align: center;
+        }
+        .fa-check-square {
+            display: none;
+        }
+        .fa-square {
+            display: inline-block;
+        }
+        &.active {
+            .fa-check-square {
+                display: inline-block;
+            }
+            .fa-square {
+                display: none;
+            }
+        }
+    }
 
-.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
-    background: #999;
 }
 
-.dropdown-menu {
-    background: #f3f3f3;
-    border-color: $secondary-border-color;
-    &>li>a {
-        color: #444;
+.pull-right > .red-ui-menu-dropdown {
+  right: 0;
+  left: auto;
+}
+
+
+.red-ui-menu-dropdown > li > a:hover,
+.red-ui-menu-dropdown > li > a:focus,
+.red-ui-menu-dropdown-submenu:hover > a,
+.red-ui-menu-dropdown-submenu:focus > a {
+    color: $menuHoverColor;
+    text-decoration: none;
+    background-color: $menuHoverBackground;
+}
+
+.red-ui-menu-dropdown-submenu {
+    position: relative;
+    & > .red-ui-menu-dropdown {
+        top: 0;
+        left: 100%;
+        margin-top: -6px;
+        margin-left: -1px;
+    }
+    &:hover > .red-ui-menu-dropdown {
+      display: block;
+    }
+    & > a:after {
+      display: block;
+      float: right;
+      width: 0;
+      height: 0;
+      margin-top: 5px;
+      margin-right: -10px;
+      border-color: transparent;
+      border-left-color: $menuCaret;
+      border-style: solid;
+      border-width: 5px 0 5px 5px;
+      content: " ";
+    }
+    &.pull-left {
+        float: none;
+        & > .red-ui-menu-dropdown {
+            left: -100%;
+            margin-left: 10px;
+        }
     }
 }
 
-
-.dropdown-menu * .fa-check-square {
-    display: none;
-    color: #e0e0e0;
-    margin-left: -25px;
-    margin-top: 3px;
-}
-.dropdown-menu * a.active > .fa-check-square {
-    display: inline-block;
-}
-.dropdown-menu * .fa-square {
-    display: inline-block;
-    color: #e0e0e0;
-    margin-left: -25px;
-    margin-top: 3px;
-}
-.dropdown-menu * a.active > .fa-square {
+.red-ui-menu-dropdown-submenu>a:after {
     display: none;
 }
-
-
-.dropdown-menu>li.disabled>a:hover>[class^="icon-"] {
-    background-image: url("vendor/bootstrap/img/glyphicons-halflings.png") !important;
-}
-/** Fix for unreachable dropdown menu **/
-.dropdown-menu  {
-    border-radius: 0;
-    width: 200px !important;
-    margin-left: 0px !important;
-}
-.dropdown-menu > li > a > i {
-    width: 10px;
-    text-align: center;
-    margin-left: -8px;
-}
-.dropdown-menu > li > a {
-     padding-left: 38px ;
-     text-indent: -8px ;
-     white-space: normal !important;
-}
-
-.dropdown-submenu>a:after {
-    display: none;
-}
-.dropdown-submenu>a:before {
+.red-ui-menu-dropdown-submenu>a:before {
     display: block;
     float: left;
     width: 0;
     height: 0;
     margin-top: 5px;
     margin-left: -30px;
+    /* Caret Arrow */
     border-color: transparent;
-    border-right-color: #e0e0e0;
+    border-right-color: $menuCaret;
     border-style: solid;
     border-width: 5px 5px 5px 0;
     content: " ";
 }
 
-.dropdown-submenu.disabled > a:before {
-    border-right-color: #444;
-}
-.dropdown-submenu.pull-left>.dropdown-menu {
-    border-radius: 0;
+.red-ui-menu-dropdown-submenu.disabled > a:before {
+    border-right-color: $menuCaret;
 }

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

@@ -15,7 +15,7 @@
  **/
 
 
-#editor-stack {
+#red-ui-editor-stack {
     position: absolute;
     margin: 0;
     top: 0;
@@ -24,7 +24,7 @@
     width: 0;
     z-index: 5;
 }
-.editor-tray {
+.red-ui-tray {
     position:absolute;
     margin: 0;
     top: 0;
@@ -32,37 +32,37 @@
     width: auto;
     right: -1000px;
     bottom: 0;
-    background: #fff;
+    background: $secondary-background;
     border-left: 1px solid $secondary-border-color;
     border-bottom: 1px solid $primary-border-color;
     box-sizing: content-box;
 }
-.editor-tray.open {
+.red-ui-tray.open {
     right: 0;
 }
-.editor-tray-body-wrapper {
+.red-ui-tray-body-wrapper {
     width: 100%;
     box-sizing: border-box;
     overflow: auto;
 }
-.editor-tray-body {
+.red-ui-tray-body {
     position: relative;
     box-sizing: border-box;
     padding: 0.1px; // prevent margin collapsing
-    .dialog-form,#dialog-form, #node-config-dialog-edit-form {
-        margin: 20px;
-        height: calc(100% - 40px);
-    }
+    // .dialog-form,#dialog-form, #node-config-dialog-edit-form {
+    //     margin: 20px;
+    //     height: calc(100% - 40px);
+    // }
 }
-.editor-tray-content {
+.red-ui-tray-content {
     overflow: auto;
     position: relative;
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         top: 6px;
         left: 4px;
     }
 }
-.editor-tray-header {
+.red-ui-tray-header {
     @include disable-selection;
     position: relative;
     box-sizing: border-box;
@@ -76,19 +76,29 @@
     }
 }
 
-.editor-tray-footer {
+.red-ui-tray-footer {
     @include component-footer;
     height: 35px;
+    font-size: 12px !important;
+    line-height: 35px;
+    vertical-align: middle;
 
     button {
         @include editor-button;
         padding: 3px 7px;
         font-size: 11px;
     }
-
+    .red-ui-tray-footer-left {
+        display:inline-block;
+        margin-right: 20px;
+        float:left;
+    }
+    .red-ui-tray-footer-right {
+        float: right;
+    }
 }
 
-.editor-tray-toolbar {
+.red-ui-tray-toolbar {
     text-align: right;
     padding: 6px;
 
@@ -100,11 +110,12 @@
     }
 }
 
-.editor-tray-titlebar {
+.red-ui-tray-titlebar {
+    color: $header-text-color;
     border-bottom: 1px solid $secondary-border-color;
     padding: 8px;
 }
-.editor-tray-breadcrumbs {
+.red-ui-editor ul.red-ui-tray-breadcrumbs {
     list-style-type: none;
     margin: 0;
     padding:0;
@@ -115,7 +126,7 @@
         margin:0;
 
         &:not(:last-child) {
-            color: $editor-button-color;
+            color: $workspace-button-color;
             font-weight: normal;
 
             &:after {
@@ -127,23 +138,24 @@
         }
     }
 }
-.editor-tray-resize-handle {
+.red-ui-tray-resize-handle {
     position: absolute;
     top: 0px;
     bottom: 0px;
     width: 7px;
     left: -9px;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
-    box-shadow: -1px 0 6px rgba(0,0,0,0.1);
+    box-shadow: -1px 0 6px $shadow;
 
-    &.editor-tray-resize-maximised {
-        background: $background-color;
+    &.red-ui-tray-resize-maximised {
+        background: $primary-background;
         cursor: default;
     }
 }
-.editor-tray-resize-button {
+a.red-ui-tray-resize-button,
+button.red-ui-tray-resize-button {
     @include workspace-button;
     display: block;
     height: 37px;
@@ -151,66 +163,63 @@
     border: none;
     border-bottom: 1px solid $secondary-border-color;
     margin: 0;
-    background: $background-color;
+    background: $primary-background;
     color: $workspace-button-color;
 }
-#palette-shade, #editor-shade, #header-shade, #sidebar-shade  {
-    @include shade;
-    z-index: 2;
-}
-#sidebar-shade  {
-    left: -8px;
-    top: -1px;
-    bottom: -1px;
-}
-#full-shade {
-    @include shade;
-    z-index: 15;
+
+.red-ui-editor .red-ui-tray {
+    .dialog-form, #dialog-form, #node-config-dialog-edit-form {
+        margin: 20px;
+        height: calc(100% - 40px);
+    }
 }
 
-.dialog-form,#dialog-form, #node-config-dialog-edit-form {
-    height: 100%;
-}
+.red-ui-editor,.red-ui-editor-dialog {
 
-.input-error {
-    border-color: rgb(214, 97, 95) !important;
-}
+    .dialog-form, #dialog-form, #node-config-dialog-edit-form {
+        margin: 0;
+        height:100%;
+    }
 
-.form-row {
-    clear: both;
-    color: $form-text-color;
-    margin-bottom:12px;
-}
-.form-row label {
-    display: inline-block;
-    width: 100px;
-}
-.form-row input, .form-row div[contenteditable="true"] {
-    width:70%;
-}
+    .input-error {
+        border-color: $form-input-border-error-color !important;
+    }
 
-.form-tips {
-    background: #ffe;
-    padding: 8px;
-    border-radius: 2px;
-    border: 1px solid $secondary-border-color;
-    max-width: 450px;
-}
-.form-tips code {
-    border: none;
-    padding: auto;
-}
-.form-tips a {
-    text-decoration: underline;
-}
+    .form-row {
+        clear: both;
+        color: $form-text-color;
+        margin-bottom:12px;
+    }
+    .form-row label {
+        display: inline-block;
+        width: 100px;
+    }
+    .form-row input, .form-row div[contenteditable="true"] {
+        width:70%;
+    }
+    .form-tips {
+        background: $form-tips-background;
+        padding: 8px;
+        border-radius: 2px;
+        border: 1px solid $secondary-border-color;
+        max-width: 450px;
+    }
+    .form-tips code {
+        border: none;
+        padding: auto;
+    }
+    .form-tips a {
+        text-decoration: underline;
+    }
 
-.form-warning {
-    border-color: #d6615f;
+    .form-warning {
+        border-color: $text-color-warning;
+    }
 }
 
 .node-text-editor {
     position: relative;
-    .node-text-editor-help {
+    .red-ui-editor-text-help {
         position: absolute;
         bottom: 0px;
         right: 1px;
@@ -220,20 +229,24 @@
         border-right: none;
     }
 }
-.node-text-editor-container {
-    border:1px solid #ccc;
+.red-ui-editor-text-container {
+    border:1px solid $tertiary-border-color;
     border-radius:5px;
     overflow: hidden;
-    font-size: 14px !important;
-    font-family: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace !important;
+    font-size: $primary-font-size !important;
+    font-family: $monospace-font !important;
     height: 100%;
 
-    &.node-text-editor-container-toolbar {
+    &.red-ui-editor-text-container-toolbar {
         height: calc(100% - 40px);
     }
 }
 
-.editor-button {
+a.editor-button, // Deprecated: use .red-ui-button
+button.editor-button, // Deprecated: use .red-ui-button
+a.red-ui-button,
+button.red-ui-button
+ {
     @include workspace-button;
     height: 34px;
     line-height: 32px;
@@ -248,7 +261,11 @@
 }
 
 
-.editor-button-small {
+a.editor-button-small, // Deprecated: use .red-ui-button-small
+button.editor-button-small, // Deprecated: use .red-ui-button-small
+a.red-ui-button-small,
+button.red-ui-button-small
+{
     height: 20px;
     min-width: 20px;
     line-height: 18px;
@@ -257,34 +274,21 @@
     padding: 0 5px;
 }
 
-#node-config-dialog-scope-container {
-    cursor: auto;
-    float: right;
-    font-size: 12px !important;
-    line-height: 35px;
-}
-#node-config-dialog-scope-warning {
+#red-ui-editor-config-scope-warning {
     display: inline-block;
     margin-right: 5px;
-    color: #AD1625;
+    color: $text-color-warning;
     vertical-align: middle;
 }
-#node-config-dialog-scope {
+#red-ui-editor-config-scope {
     margin: 1px 0 0 0;
     padding: 0;
     height: 22px;
     width: 200px;
 
 }
-#node-config-dialog-user-count {
-    vertical-align: middle;
-    display:inline-block;
-    margin-right: 20px;
-    float:left;
-    font-size: 12px;
-    line-height: 35px;
-}
-.node-input-expression-editor #dialog-form {
+
+.red-ui-editor .red-ui-tray .red-ui-editor-type-expression #dialog-form {
     margin: 0;
     height: 100%;
     .red-ui-panel {
@@ -296,12 +300,12 @@
         }
     }
 }
-.node-input-expression-tab-content {
+.red-ui-editor-type-expression-tab-content {
     position: relative;
     padding: 0 20px;
 }
 
-#node-input-expression-help {
+#red-ui-editor-type-expression-help {
     position: absolute;
     top: 35px;
     left:0;
@@ -311,7 +315,7 @@
     overflow: auto;
     box-sizing: border-box;
 }
-#node-input-expression-panel-info {
+#red-ui-editor-type-expression-panel-info {
     & > .form-row {
         margin: 0;
         & > div:first-child {
@@ -319,47 +323,38 @@
         }
     }
 }
-.node-input-expression-legacy, .node-input-buffer-type {
-    font-size: 0.8em;
+.red-ui-editor-type-expression-legacy {
     float: left;
-    cursor: pointer;
-    border: 1px solid white;
-    padding: 2px 5px;
-    border-radius: 2px;
-    &:hover {
-        border-color: $form-input-border-color;
-    }
 }
-.node-input-buffer-type {
-    float: none;
+.red-ui-editor-type-buffer-type {
     text-align: right;
 }
-.node-input-markdown-editor #dialog-form {
+.red-ui-editor .red-ui-tray .red-ui-editor-type-markdown-editor #dialog-form {
     margin: 0;
     height: 100%;
     .red-ui-panel {
         padding: 20px 20px 10px;
         &:last-child {
             padding-top: 60px;
-            background: #f9f9f9;
+            background: $primary-background;
 
         }
     }
 }
-.node-input-markdown-panel-preview {
+.red-ui-editor-type-markdown-panel-preview {
     padding: 10px;
-    border:1px solid #ccc;
+    border:1px solid $secondary-border-color;
     border-radius:5px;
     height: calc(100% - 21px);
     overflow-y: scroll;
-    background: #fff;
+    background: $secondary-background;
 }
 
-#clipboard-hidden {
+#red-ui-clipboard-hidden {
     position: absolute;
     top: -3000px;
 }
-.node-label-form-row {
+.form-row .red-ui-editor-node-label-form-row {
     margin: 5px 0 0 50px;
     label {
         margin-right: 20px;
@@ -372,30 +367,24 @@
     input {
         width: calc(100% - 100px);
     }
-    #node-settings-icon-module {
+    #red-ui-editor-node-icon-module {
         width: calc(55% - 50px);
     }
-    #node-settings-icon-file {
+    #red-ui-editor-node-icon-file {
         width: calc(45% - 55px);
         margin-left: 5px;
     }
 }
-.node-label-form-none {
+.red-ui-editor-node-label-form-none {
     span {
         padding-left: 50px;
         width: 100px;
-        color: #999;
+        color: $secondary-text-color;
     }
 }
 
-.ace_read-only {
-    background: #eee !important;
-    .ace_cursor {
-       color: transparent !important;
-    }
 
-}
-#node-settings-icon-button {
+#red-ui-editor-node-icon-button {
     position: relative;
     padding-left: 30px;
     width: calc(100% - 150px);
@@ -405,7 +394,7 @@
         left: 2px;
     }
 }
-#node-settings-icon {
+#red-ui-editor-node-icon {
     margin-left: 10px;
     width: calc(100% - 163px);
 }
@@ -413,7 +402,7 @@
     position: absolute;
     border: 1px solid $primary-border-color;
     box-shadow: 0 1px 6px -3px black;
-    background: white;
+    background: $secondary-background;
     z-Index: 21;
     display: none;
     select {
@@ -435,15 +424,15 @@
     cursor: pointer;
     border-radius: 4px;
     &:hover {
-        background: lighten($node-selected-color,20%);
+        background: $list-item-background-hover;
     }
     &.selected {
-        background: lighten($node-selected-color,20%);
+        background: $list-item-background-selected;
         .red-ui-search-result-node {
-            border-color: white;
+            // border-color: white;
         }
     }
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         top: 6px;
         left: 3px;
     }
@@ -452,7 +441,7 @@
     background: $palette-header-background;
     font-size: 0.9em;
     padding: 3px;
-    color: #666;
+    color: $secondary-text-color;
     clear: both;
     i {
         margin-right: 5px;
@@ -460,9 +449,11 @@
 }
 .red-ui-icon-meta {
     border-top: 1px solid $secondary-border-color;
+    background: $tertiary-background;
+    height: 24px;
     span {
         padding: 4px;
-        color: #666;
+        color: $secondary-text-color;
         font-size: 0.9em;
     }
     button {

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

@@ -14,63 +14,32 @@
  * limitations under the License.
  **/
 
-.hidden {
-    display: none;
-}
-
-.lasso {
+.nr-ui-view-lasso {
     stroke-width: 1px;
-    stroke: #ff7f0e;
-    fill: rgba(20,125,255,0.1);
+    stroke: $view-lasso-stroke;
+    fill: $view-lasso-fill;
     stroke-dasharray: 10 5;
 }
 
-.group-box {
-    stroke-width: 1px;
-    stroke: #aaaaaa;
-    fill: rgba(208, 211, 238, 0.1);
-    stroke-dasharray: 3 3;
-}
-.group-box-active {
-    fill: #fff;
-    stroke: #ff7f0e;
-}
-
-.group_label {
-    stroke-width: 0;
-    fill: #999;
-    font-size: 11px;
-    pointer-events: none;
-    -webkit-touch-callout: none;
-    @include disable-selection;
-}
-
-.pull-right {
-    margin-left: 20px;
-}
-
-.node_label_italic {
+.node_label_italic, // deprecated: use red-ui-flow-node-label-italic
+.red-ui-flow-node-label-italic {
     font-style: italic;
 }
-.node_label_unknown {
-    font-style: italic;
-    fill: #e00 !important;
+.red-ui-flow-node-label-white {
+    fill: $view-background !important;
 }
-.node_label_white {
-    fill: #eee !important;
-}
-.node_label {
+.red-ui-flow-node-label {
     stroke-width: 0;
-    fill: #333;
+    fill: $node-label-color;
     font-size: 14px;
     pointer-events: none;
     -webkit-touch-callout: none;
     @include disable-selection;
 }
 
-.port_label {
+.red-ui-flow-port-label {
     stroke-width: 0;
-    fill: #888;
+    fill: $secondary-text-color;
     font-size: 16px;
     alignment-baseline: middle;
     text-anchor: middle;
@@ -80,165 +49,164 @@
 }
 
 
-.function_label {
-    font-size: 12px;
-}
-.node {
-    stroke: #999;
+.red-ui-flow-node {
+    stroke: $node-border;
     cursor: move;
     stroke-width: 1;
 }
-.node_unknown {
-    stroke-dasharray:10,4;
-    stroke: #f33;
+.red-ui-workspace-select-mode {
+    g.red-ui-flow-node.red-ui-flow-node-hovered * {
+        cursor: pointer !important
+    }
+    g.red-ui-flow-node, g.red-ui-flow-link {
+        opacity: 0.5;
+    }
+    g.red-ui-flow-node.red-ui-flow-node-hovered:not(.red-ui-flow-node-selected) {
+        opacity: 0.9;
+        .red-ui-flow-node {
+            stroke-width: 2;
+            stroke: $node-selected-color !important;
+            stroke-dasharray: 10, 4;
+        }
+    }
 }
-.node_placeholder {
+
+.red-ui-flow-node-unknown {
     stroke-dasharray:10,4;
-    stroke: #aaa;
-    fill: #eee;
+    stroke: $node-border-unknown;
+}
+.red-ui-flow-node-placeholder {
+    stroke-dasharray:10,4;
+    stroke: $node-border-placeholder;
+    fill: $node-background-placeholder;
     opacity: 0.5;
     stroke-width: 2;
 }
-
-.tool_arrow {
-    stroke-width: 1;
-    stroke: #999;
-    fill: #999;
-    cursor: pointer;
+.red-ui-flow-node-icon-group {
+    .fa-lg {
+        stroke: none;
+        fill: $node-icon-color;
+        text-anchor: middle;
+        font-family: FontAwesome;
+    }
 }
-.node_tools {
-    fill: #ddd;
-    stroke: #999;
-    cursor: move;
-    stroke-width: 1;
-    cursor: pointer;
+.red-ui-flow-node-icon-shade {
+    stroke: none;
+    fill: $node-icon-background-color-fill;
+    fill-opacity: $node-icon-background-color-opacity;
 }
-.node_tools_hovered {
-    stroke: #ff7f0e;
-    fill: #eee;
+.red-ui-flow-node-icon-shade-border {
+    stroke-opacity: $node-icon-border-color-opacity;
+    stroke: $node-icon-border-color;
+    stroke-width: 1;
 }
 
-.node_button {
+.red-ui-flow-node-button {
     fill: inherit;
-
 }
-.port {
-    stroke: #999;
+.red-ui-flow-node-button-background {
+    fill: $node-background-placeholder;
+}
+
+.red-ui-flow-port {
+    stroke: $node-border;
     stroke-width: 1;
-    fill: #ddd;
+    fill: $node-port-background;
     cursor: crosshair;
 }
 
-.port_highlight {
-    stroke: #6DA332;
-    stroke-width: 3;
-    fill: #fff;
-    pointer-events:none;
-    fill-opacity: 0.5;
+.red-ui-flow-node-error {
+    fill: $node-status-error-background;
+    stroke: $node-status-error-border;
+    stroke-width:1px;
+    cursor: default;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+}
+.red-ui-flow-node-changed {
+    fill: $node-status-changed-background;
+    stroke: $node-status-changed-border;
+    cursor: default;
+    stroke-width:1px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
 }
 
-.node_error {
-    stroke: #ff0000;
-    stroke-width: 2;
-    fill: #ff7f0e;
+g.red-ui-flow-node-selected {
+    .red-ui-workspace-select-mode & {
+        opacity: 1;
+    }
+    .red-ui-flow-node,.red-ui-flow-subflow-port {
+        stroke-width: 2;
+        stroke: $node-selected-color !important;
+    }
 }
-
-.node_badge {
-    stroke: rgb(93, 114, 145);
-    stroke-width: 1;
-    fill: rgb(190, 209, 255);
-}
-.node_badge_label {
-    stroke-width:0;
-    fill: #fff;
-    font-size: 11px;
-    pointer-events: none;
-    -webkit-touch-callout: none;
-    @include disable-selection;
-
-}
-.node_invalid {
-    stroke: #ff0000;
-}
-.node_selected {
-    stroke-width: 2;
-    stroke: $node-selected-color !important;
-}
-.node_highlighted {
-    border-color: #dd1616 !important;
+.red-ui-flow-node-highlighted {
+    border-color: $node-selected-color !important;
     border-style: dashed !important;
-    stroke: #dd1616;
+    stroke: $node-selected-color;
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
-.node_hovered {
-}
 
-.node_subflow .node {
+.red-ui-flow-subflow .red-ui-flow-node {
     stroke-dasharray:8, 3;
 }
-.workspace-disabled {
-    .link_line {
+.red-ui-workspace-disabled {
+    .red-ui-flow-link-line {
         stroke-dasharray: 10,5 !important;
         stroke-width: 2 !important;
         stroke: $link-subflow-color;
     }
-    .node {
+    .red-ui-flow-node {
         stroke-dasharray: 10,4;
     }
 }
 
-.node_quickadd * {
-    stroke-dasharray: 12,3;
+@each $current-color in red green yellow blue grey {
+    .red-ui-flow-node-status-dot-#{$current-color} {
+        fill: map-get($node-status-colors,$current-color);
+        stroke: map-get($node-status-colors,$current-color);
+    }
+    .red-ui-flow-node-status-ring-#{$current-color} {
+        fill: $view-background;
+        stroke: map-get($node-status-colors,$current-color);
+    }
 }
 
-.node_status_label {
+.red-ui-flow-node-status-label {
     @include disable-selection;
     stroke-width: 0;
-    fill: #888;
+    fill: $secondary-text-color;
     font-size:9pt;
-    stroke:#000;
     text-anchor:start;
 }
 
-.port_hovered {
-    stroke: $port-selected-color !important;
-    fill:  $port-selected-color !important;
-}
-
-.port_quick_link {
+.red-ui-flow-port-hovered {
     stroke: $port-selected-color;
     fill:  $port-selected-color;
 }
 
-
-.subflowport {
+.red-ui-flow-subflow-port {
     stroke-dasharray: 5,5;
-    fill: #eee;
-    stroke: #999;
+    fill: $node-background-placeholder;
+    stroke: $node-border;
 }
 
-.drag_line {
+.red-ui-flow-drag-line {
     stroke: $node-selected-color !important;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 
-.drag_line_hidden {
-    stroke: $node-selected-color;
-    stroke-width: 0;
-    pointer-events: none;
-    fill: none;
-}
-
-.link_line {
+.red-ui-flow-link-line {
     stroke: $link-color;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
-.link_link {
+.red-ui-flow-link-link {
     stroke-width: 2;
     stroke-dasharray: 10,5;
     stroke: $link-link-color;
@@ -246,68 +214,70 @@
     stroke-dasharray: 15,2;
     // pointer-events: none;
 }
-.link_port {
-    fill: #eee;
+.red-ui-flow-link-port {
+    fill: $node-link-port-background;
     stroke: $link-link-color;
     stroke-width: 1;
 }
-.link_group_active .link_port {
+.red-ui-flow-link-group-active .red-ui-flow-link-port {
     stroke: $link-link-active-color;
 }
-.link_group:hover {
+.red-ui-flow-link-group:hover {
     cursor: pointer;
 }
-.link_subflow {
+.red-ui-flow-subflow-link {
     stroke: $link-subflow-color;
     stroke-dasharray: 10,5;
     stroke-width: 2;
 }
 
-.link_outline {
-    stroke: #fff;
+.red-ui-flow-link-outline {
+    stroke: $view-background;
     stroke-width: 5;
     cursor: crosshair;
     fill: none;
     pointer-events: none;
 }
-.link_background {
-    stroke: #fff;
+.red-ui-flow-link-background {
+    stroke: $view-background;
     opacity: 0;
     stroke-width: 20;
     cursor: crosshair;
     fill: none;
 }
-.link_splice > .link_line {
+.red-ui-flow-link-splice > .red-ui-flow-link-line {
     stroke-dasharray: 15,8;
 }
 
-g.link_selected path.link_line {
+g.red-ui-flow-link-selected path.red-ui-flow-link-line {
     stroke: $node-selected-color;
 }
-g.link_unknown path.link_line {
+g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     stroke: $link-unknown-color;
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
 
-@keyframes port_tooltip_fadeIn { from { opacity:0; } to { opacity:1; } }
+@keyframes red-ui-flow-port-tooltip-fadeIn { from { opacity:0; } to { opacity:1; } }
 
-.port_tooltip {
+.red-ui-flow-port-tooltip {
     opacity:0;
-    animation: 0.1s ease-in 0s 1 normal forwards port_tooltip_fadeIn;
+    animation: 0.1s ease-in 0s 1 normal forwards red-ui-flow-port-tooltip-fadeIn;
     pointer-events: none;
 
-    path {
+    path:first-child {
         fill: $popover-background;
         stroke: $popover-background;
         stroke-width: 1;
     }
 }
-.port_tooltip_label {
+.red-ui-flow-port-tooltip-label {
     stroke-width: 0;
     fill: $popover-color;
+    font-family: $primary-font;
     font-size: 12px;
     pointer-events: none;
     -webkit-touch-callout: none;
+    white-space: pre;
     @include disable-selection;
 }

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

@@ -14,279 +14,260 @@
  * limitations under the License.
  **/
 
-$activeButton: #121212;
+.button {
+    @include disable-selection;
+}
 
-$deployButton: #8C101C;
-$deployButtonHover: #6E0A1E;
-$deployButtonActive: #4C0A17;
-
-$deployDisabledButton: #444;
-$deployDisabledButtonHover: #555;
-$deployDisabledButtonActive: #444;
-
-$headerMenuBackground: #121212;
-$headerMenuItemHover: #323232;
-$headerMenuItemDivider: #464646;
-
-#header {
+#red-ui-header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 40px;
-    background: #000;
+    background: $header-background;
     box-sizing: border-box;
     padding: 0px 0px 0px 20px;
-    color: #C7C7C7;
+    color: $header-menu-color;
     font-size: 14px;
-}
 
-span.logo {
-    float: left;
-    margin-top: 5px;
-    font-size: 30px;
-    line-height: 30px;
-    text-decoration: none;
+    span.red-ui-header-logo {
+        float: left;
+        margin-top: 5px;
+        font-size: 30px;
+        line-height: 30px;
+        text-decoration: none;
 
-    span {
-        vertical-align: middle;
-        font-size: 16px !important;
-    }
-    img {
-        height: 18px;
-    }
-
-    a {
-        color: inherit;
-        &:hover {
-            text-decoration: none;
+        span {
+            vertical-align: middle;
+            font-size: 16px !important;
+            &:not(:first-child) {
+                margin-left: 5px;
+            }
         }
+        img {
+            height: 18px;
+        }
+
+        a {
+            color: inherit;
+            &:hover {
+                text-decoration: none;
+            }
+        }
+
     }
 
-}
-
-.header-toolbar {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    float: right;
-
-    > li {
-        display: inline-block;
+    .red-ui-header-toolbar {
         padding: 0;
         margin: 0;
-        position: relative;
+        list-style: none;
+        float: right;
 
-    }
-}
+        > li {
+            display: inline-block;
+            padding: 0;
+            margin: 0;
+            position: relative;
 
-.button {
-    @include disable-selection;
-}
-
-#header .button {
-    min-width: 20px;
-    text-align: center;
-    line-height: 40px;
-    display: inline-block;
-    font-size: 20px;
-    padding: 0px 12px;
-    text-decoration: none;
-    color: #C7C7C7;
-    margin: auto 5px;
-    vertical-align: middle;
-    border-left: 2px solid #000;
-    border-right: 2px solid #000;
-
-    &:hover {
-        border-color: $headerMenuItemHover;
-    }
-}
-
-#header .button-group {
-    display: inline-block;
-    margin: auto 15px;
-    vertical-align: middle;
-    clear: both;
-}
-#header .button-group > a {
-    display: inline-block;
-    position: relative;
-    float: left;
-    line-height: 22px;
-    font-size: 14px;
-    text-decoration: none;
-    padding: 4px 8px;
-    margin: 0;
-}
-
-.deploy-button {
-    background: $deployButton;
-    color: #eee !important;
-
-    &:hover {
-        background: $deployButtonHover;
-    }
-
-    &:active {
-        background: $deployButtonActive;
-        color: #ccc !important;
-    }
-}
-
-.deploy-button-spinner {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    text-align: center;
-
-    img {
-        opacity: 0.8;
-        height: 100%;
-    }
-}
-
-#btn-deploy {
-
-    padding: 4px 12px;
-
-    &.disabled {
-        cursor: default;
-        background: $deployDisabledButton;
-        color: #999 !important;
-
-        .deploy-button-content>img {
-            opacity: 0.3;
-        }
-
-        &+ #btn-deploy-options {
-            background: $deployDisabledButton;
-            color: #ddd;
-        }
-        &+ #btn-deploy-options:hover {
-            background: $deployDisabledButtonHover;
-        }
-        &+ #btn-deploy-options:active {
-            background: $deployDisabledButton;
         }
     }
 
-    .deploy-button-content>img {
-        margin-right: 8px;
+    .button {
+        min-width: 20px;
+        text-align: center;
+        line-height: 40px;
+        display: inline-block;
+        font-size: 20px;
+        padding: 0px 12px;
+        text-decoration: none;
+        color: $header-menu-color;
+        margin: auto 5px;
+        vertical-align: middle;
+        border-left: 2px solid $header-background;
+        border-right: 2px solid $header-background;
+
+        &:hover {
+            border-color: $header-menu-item-hover;
+        }
+        &:active, &.active {
+            background: $header-button-background-active;
+        }
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .button-group {
+        display: inline-block;
+        margin: auto 15px;
+        vertical-align: middle;
+        clear: both;
+        & > a {
+            display: inline-block;
+            position: relative;
+            float: left;
+            line-height: 22px;
+            font-size: 14px;
+            text-decoration: none;
+            padding: 4px 8px;
+            margin: 0;
+        }
+    }
+
+    .red-ui-deploy-button {
+        background: $deploy-button-background;
+        color: $deploy-button-color;
+
+        &:hover {
+            background: $deploy-button-background-hover;
+        }
+        &:focus {
+            outline: none;
+        }
+        &:active {
+            background: $deploy-button-background-active;
+            color: $deploy-button-color-active;
+        }
+    }
+
+    .red-ui-deploy-button-spinner {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        text-align: center;
+
+        img {
+            opacity: 0.8;
+            height: 100%;
+        }
+    }
+
+    #red-ui-header-button-deploy {
+        padding: 4px 12px;
+        &.disabled {
+            cursor: default;
+            background: $deploy-button-background-disabled;
+            color: $deploy-button-color-disabled;
+
+            .red-ui-deploy-button-content>img {
+                opacity: 0.3;
+            }
+            &+ #red-ui-header-button-deploy-options {
+                background: $deploy-button-background-disabled;
+                color: $deploy-button-color-active;
+            }
+            &+ #red-ui-header-button-deploy-options:hover {
+                background: $deploy-button-background-disabled-hover;
+            }
+            &+ #red-ui-header-button-deploy-options:active {
+                background: $deploy-button-background-disabled;
+            }
+        }
+
+        .red-ui-deploy-button-content>img {
+            margin-right: 8px;
+        }
+    }
+
+    .red-ui-deploy-button-group.open {
+        #red-ui-header-button-deploy-options {
+            background: $header-button-background-active !important;
+        }
+    }
+
+    li.open .button {
+        background: $header-button-background-active;
+        border-color: $header-button-background-active;
+    }
+
+
+    ul.red-ui-menu-dropdown {
+        background: $header-menu-background;
+        border: 1px solid $header-menu-background;
+        width: 250px !important;
+        margin-top: 0;
+        li a {
+            color: $header-menu-color;
+            padding: 3px 40px;
+            img {
+                margin-right: 10px;
+                padding: 4px;
+                border: 3px solid transparent;
+            }
+
+            &.active img {
+                border: 3px solid $header-menu-item-border-active;
+            }
+
+            span.red-ui-menu-label-container {
+                width: 180px;
+                vertical-align: top;
+                display: inline-block;
+                text-indent: 0px;
+            }
+            span.red-ui-menu-label {
+                font-size: 14px;
+                display: inline-block;
+                text-indent: 0px;
+            }
+            span.red-ui-menu-sublabel {
+                color: $header-menu-sublabel-color;
+                font-size: 13px;
+                display: inline-block;
+                text-indent: 0px;
+            }
+        }
+        > li > a:hover,
+        > li > a:focus,
+        > li:hover > a,
+        > li:focus > a {
+            background: $header-menu-item-hover !important;
+        }
+        li.red-ui-menu-divider {
+            background: $headerMenuItemDivider;
+        }
+        li.disabled a {
+            color:  $header-menu-color-disabled;
+        }
+        > li.disabled > a:hover,
+        > li.disabled > a:focus {
+            background: none !important;
+        }
+    }
+    .red-ui-menu-dropdown-submenu>a:before {
+        border-right-color: $headerMenuCaret;
+    }
+
+    /* Deploy menu customisations */
+    ul#red-ui-header-button-deploy-options-submenu {
+        width: 300px !important;
+        li a {
+            padding: 10px 30px;
+            color: $header-menu-heading-color;
+            span.red-ui-menu-label {
+                font-size: 16px;
+                display: inline-block;
+                text-indent: 0px;
+            }
+            > i.fa {
+                display: none;
+            }
+        }
+    }
+    /* User menu customisations */
+    #usermenu-item-username > .red-ui-menu-label {
+        color: $header-menu-heading-color;
+    }
+
+    #red-ui-header-button-user .user-profile {
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: inline-block;
+        width: 40px;
+        height: 35px;
+        vertical-align: middle;
     }
 }
-
-.deploy-button-group.open {
-    #btn-deploy-options {
-        background: $activeButton !important;
-    }
-}
-
-
-#header .button {
-    &:active, &.active {
-        background: $activeButton;
-    }
-    &:focus {
-        outline: none;
-    }
-}
-
-#header li.open .button {
-    background: $activeButton;
-    border-color: $activeButton;
-}
-
-
-#header ul.dropdown-menu {
-    background: $headerMenuBackground;
-    border: 1px solid rgba(0,0,0,0.2);
-    width: 250px !important;
-    margin-top: 0;
-}
-
-#header ul.dropdown-menu li a {
-    color: #C7C7C7;
-    padding: 3px 40px;
-}
-
-#header ul.dropdown-menu li a img {
-    margin-right: 10px;
-    padding: 4px;
-    border: 3px solid rgba(0,0,0,0);
-}
-
-#header ul.dropdown-menu li a.active img {
-    border: 3px solid #777677;
-}
-
-#header ul.dropdown-menu li a span.menu-label-container {
-    width: 180px;
-    vertical-align: top;
-    display: inline-block;
-    text-indent: 0px;
-}
-#header ul.dropdown-menu li a span.menu-label {
-    font-size: 14px;
-    display: inline-block;
-    text-indent: 0px;
-}
-#header ul.dropdown-menu li a span.menu-sublabel {
-    color: #aeaeae;
-    font-size: 13px;
-    display: inline-block;
-    text-indent: 0px;
-}
-
-#header ul.dropdown-menu > li:hover > a,
-#header ul.dropdown-menu > li:focus > a {
-    background: $headerMenuItemHover !important;
-}
-
-#header ul.dropdown-menu li.divider {
-    background: $headerMenuItemDivider;
-    border-bottom-color: $headerMenuItemHover;
-}
-#header ul.dropdown-menu li.disabled a {
-    color: #666;
-}
-
-#header ul.dropdown-menu > li.disabled:hover > a,
-#header ul.dropdown-menu > li.disabled:focus > a {
-    background: none !important;
-}
-
-/* Deploy menu customisations */
-#header ul#btn-deploy-options-submenu {
-    width: 300px !important;
-}
-#header ul#btn-deploy-options-submenu li a span.menu-label {
-    font-size: 16px;
-    display: inline-block;
-    text-indent: 0px;
-}
-#header ul#btn-deploy-options-submenu li a {
-    padding: 10px 30px;
-    color: #fff;
-}
-#header ul#btn-deploy-options-submenu li a > i.fa {
-    display: none !important;
-}
-
-/* User menu customisations */
-#header ul#btn-usermenu-submenu li a#btn-username > .menu-label {
-    font-size: 16px;
-    color: #fff;
-}
-
-#btn-usermenu .user-profile {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    display: inline-block;
-    width: 40px;
-    height: 35px;
-    vertical-align: middle;
-}

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

@@ -16,11 +16,11 @@
 
 .ui-widget {
     font-size: 14px !important;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+    font-family: $primary-font;
 }
 .ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
     font-size: 14px !important;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+    font-family: $primary-font;
 }
 .ui-widget input, .ui-widget div[contenteditable="true"] {
     box-shadow: none;
@@ -39,7 +39,7 @@
 
 .ui-dialog {
     border-radius: 1px;
-    background: #fff;
+    background: $secondary-background;
     padding: 0;
     @include component-shadow;
 }
@@ -51,16 +51,20 @@
 }
 .ui-dialog .ui-dialog-titlebar {
     padding: 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border: none;
-    border-bottom: 1px solid #999;
+    border-bottom: 1px solid $primary-border-color;
     border-radius: 0;
 }
+.ui-dialog .ui-dialog-buttonpane.ui-widget-content {
+    background: $tertiary-background;
+
+}
 .ui-corner-all {
     border-radius: 1px;
 }
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-    background: #f3f3f3;
+    background: $primary-background;
 }
 .ui-dialog-no-close .ui-dialog-titlebar-close {
     display: none;
@@ -80,8 +84,8 @@
     padding: 6px 14px;
     margin-right: 8px;
     border-radius: 2px;
-    color: $editor-button-color;
-    background: $editor-button-background;
+    color: $workspace-button-color;
+    background: $workspace-button-background;
 
     &.leftButton {
         float: left;
@@ -92,18 +96,18 @@
     }
 
     &.primary {
-        border-color: $editor-button-background-primary;
-        color: $editor-button-color-primary !important;
-        background: $editor-button-background-primary;
+        border-color: $workspace-button-background-primary;
+        color: $workspace-button-color-primary !important;
+        background: $workspace-button-background-primary;
         &:not(.disabled):hover {
-            border-color: $editor-button-background-primary-hover;
-            background: $editor-button-background-primary-hover;
-            color: $editor-button-color-primary !important;
+            border-color: $workspace-button-background-primary-hover;
+            background: $workspace-button-background-primary-hover;
+            color: $workspace-button-color-primary !important;
         }
         &.disabled {
             border-color: $form-input-border-color;
             color: $workspace-button-color-disabled !important;
-            background: $editor-button-background;
+            background: $workspace-button-background;
         }
     }
     &.disabled {
@@ -130,15 +134,12 @@
     border: 1px solid $form-input-border-color;
 }
 .ui-spinner input {
+    background: $form-input-background;
     margin: 0 17px 0 0;
     padding: 6px;
     border: none;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
-
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     &:focus {
         outline: none;
     }
@@ -150,3 +151,41 @@
     z-index: 100;
     opacity: 1;
 }
+
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default,
+.ui-button,
+html .ui-button.ui-state-disabled:hover,
+html .ui-button.ui-state-disabled:active {
+    border: 1px solid $secondary-border-color;
+    background: $form-button-background;
+}
+
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus,
+.ui-button:hover, .ui-button:focus {
+    border: 1px solid $secondary-border-color;
+    background: $workspace-button-background-hover;
+    color: $workspace-button-color-hover;
+}
+
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active,
+a.ui-button:active,
+.ui-button:active,
+.ui-button.ui-state-active:hover {
+    border: 1px solid $secondary-border-color;
+    background: $workspace-button-background-active;
+    font-weight: normal;
+    color: $workspace-button-color-active;
+}
+
+.ui-state-active .ui-icon, .ui-button:active .ui-icon {
+    background-image: url(../vendor/jquery/css/base/images/ui-icons_777777_256x240.png);
+}

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

@@ -14,122 +14,113 @@
  * limitations under the License.
  **/
 
-#keyboard-help-dialog {
-    font-size: 0.9em;
-    padding-top: 10px;
 
-}
-
-#user-settings-tab-keyboard .red-ui-editableList-container {
-    border-radius: 0;
-    border: none;
-    padding: 0;
-}
-
-
-.keyboard-shortcut-entry.keyboard-shortcut-list-header {
-    padding:0 5px 0 5px;
-    div {
-        color: #666 !important;
-    }
-    .red-ui-searchBox-container {
-        width: calc(100% - 20px);
-    }
-    .keyboard-shortcut-entry-scope {
-        text-align: center;
-    }
-}
-
-.keyboard-shortcut-list-header {
-    border-bottom: 1px solid $primary-border-color;
-
-}
-.keyboard-shortcut-list {
-    position: absolute;
-    top:30px;
-    left:10px;
-    right:10px;
-    bottom:10px;
-    li {
+#red-ui-settings-tab-keyboard {
+    .red-ui-editableList-container {
+        border-radius: 0;
+        border: none;
         padding: 0;
-        .red-ui-editableList-item-content {
-            padding: 8px;
-            cursor: pointer;
+    }
+    .keyboard-shortcut-list-header {
+        padding:0 5px 0 5px;
+        border-bottom: 1px solid $primary-border-color;
+        div {
+            color: $header-text-color !important;
+        }
+        .red-ui-searchBox-container {
+            width: calc(100% - 20px);
+        }
+        .keyboard-shortcut-entry-scope {
+            text-align: center;
+        }
+
+    }
+    .keyboard-shortcut-list {
+        position: absolute;
+        top:30px;
+        left:10px;
+        right:10px;
+        bottom:10px;
+        li {
+            padding: 0;
+            .red-ui-editableList-item-content {
+                padding: 8px;
+                cursor: pointer;
+            }
+        }
+        li:hover {
+            background: $list-item-background-hover;
         }
     }
-    li:hover {
-        background: #f6f6f6;
-    }
-}
-.keyboard-shortcut-entry {
-    div {
-        display: inline-block;
-    }
-    // white-space: nowrap;
+    .keyboard-shortcut-entry {
+        div {
+            display: inline-block;
+        }
+        // white-space: nowrap;
 
-    select {
-        margin: 0;
-        width: calc(100% - 30px);
-        font-size: 0.9em;
-        margin-right: 5px;
+        select {
+            margin: 0;
+            width: calc(100% - 30px);
+            font-size: 0.9em;
+            margin-right: 5px;
+        }
     }
-}
-.keyboard-shortcut-entry-key {
-    width:160px;
-    vertical-align: middle;
-    input {
-        margin:0;
-        width: calc(100% - 5px);
-    }
-}
-.keyboard-shortcut-entry-text {
-    vertical-align: middle;
-    width: calc(100% - 160px - 100px - 10px);
-    overflow: hidden;
-    i {
-        color: #ccc;
-        margin-right: 5px;
-    }
-}
-.keyboard-shortcut-entry-scope {
-    width:100px;
-    color: #999;
-    vertical-align: middle;
-    text-align: right;
-}
-.keyboard-shortcut-entry:not(.keyboard-shortcut-list-header) {
-    .keyboard-shortcut-entry-scope {
-        font-size: 0.8em;
-    }
-}
-.keyboard-shortcut-entry-unassigned {
-    color: #999;
     .keyboard-shortcut-entry-key {
-        font-style: italic;
-    }
-}
-.keyboard-shortcut-entry-expanded {
-    .keyboard-shortcut-entry-key {
-        width: 150px;
+        width:160px;
+        vertical-align: middle;
+        input {
+            margin:0;
+            width: calc(100% - 5px);
+        }
     }
     .keyboard-shortcut-entry-text {
+        vertical-align: middle;
+        width: calc(100% - 160px - 100px - 10px);
+        overflow: hidden;
+        i {
+            color: $tertiary-text-color;
+            margin-right: 5px;
+        }
     }
     .keyboard-shortcut-entry-scope {
-        width: 110px;
+        width:100px;
+        color: $tertiary-text-color;
+        vertical-align: middle;
+        text-align: right;
     }
-    span {
-        display: none;
+    .keyboard-shortcut-entry:not(.keyboard-shortcut-list-header) {
+        .keyboard-shortcut-entry-scope {
+            font-size: 0.8em;
+        }
+    }
+    .keyboard-shortcut-entry-unassigned {
+        color: $tertiary-text-color;
+        .keyboard-shortcut-entry-key {
+            font-style: italic;
+        }
+    }
+    .keyboard-shortcut-entry-expanded {
+        background: $list-item-background-selected;
+        .keyboard-shortcut-entry-key {
+            width: 150px;
+        }
+        .keyboard-shortcut-entry-text {
+        }
+        .keyboard-shortcut-entry-scope {
+            width: 110px;
+        }
+        span {
+            display: none;
+        }
     }
-}
-.keyboard-shortcut-edit  {
 }
 .help-key {
-    border: 1px solid #ddd;
+    border: 1px solid $tertiary-border-color;
     padding: 4px;
     border-radius: 3px;
-    background: #f6f6f6;
-    font-family: Courier, monospace;
-    box-shadow: #999 1px 1px 1px;
+    background: $tertiary-background;
+    font-family: $monospace-font;
+    box-shadow: $shade-color  1px 1px 1px;
 }
 .help-key-block {
     white-space: nowrap;

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

@@ -14,37 +14,141 @@
  * limitations under the License.
  **/
 
-#node-select-library {
-    overflow: hidden;
-}
-#node-select-library ul {
-    list-style: none;
-    padding: 0px;
-    margin: 2px;
-}
-#node-select-library li {
-    cursor: pointer;
-}
-#node-select-library li.list-selected {
-    background: #eee;
-}
-#node-select-library li.list-hover {
-    background: #ffffd0;
-}
-
-.clipboard-import-error {
+.red-ui-clipboard-import-error {
     pre {
         margin: 10px 0;
         border: none;
-        color: #666;
+        color: $primary-text-color;
         span {
             padding: 5px 0;
         }
         span.error {
             padding: 5px;
-            background: #e25151;
-            color: white;
+            border: 1px solid $form-input-border-error-color;
             margin: 0 1px;
         }
     }
 }
+.red-ui-clipboard-dialog-tab-clipboard {
+    padding: 10px;
+    textarea {
+         resize: none;
+         width: 100%;
+         border-radius: 4px;
+         font-family: $monospace-font !important;
+         font-size: 13px !important;
+         height: 300px;
+         line-height: 1.3em;
+         padding: 6px 10px;
+         background: $clipboard-textarea-background;
+    }
+}
+
+.red-ui-clipboard-dialog-tabs {
+    position: absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    width:120px;
+}
+
+.red-ui-clipboard-dialog-tabs-content {
+    position: absolute;
+    top: 0;
+    left: 120px;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    background: $form-input-background;
+    &>div {
+        height: 100%;
+    }
+}
+.red-ui-clipboard-dialog-box {
+    height: 400px;
+    position:relative;
+    border:1px solid $primary-border-color;
+}
+
+.red-ui-clipboard-dialog-tab-library {
+    .form-row {
+        margin-left: 10px;
+    }
+}
+
+#red-ui-clipboard-dialog {
+    form {
+        margin-bottom: 0;
+    }
+    .form-row:last-child {
+        margin-bottom: 0;
+    }
+}
+#red-ui-clipboard-dialog-tab-library-name {
+    width: calc(100% - 120px);
+}
+#red-ui-clipboard-dialog-export-tab-library-browser {
+    height: calc(100% - 60px);
+    margin-bottom: 13px;
+    border-bottom: 1px solid $primary-border-color;
+    box-sizing: border-box;
+}
+#red-ui-clipboard-dialog-import-tab-library-browser {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+
+.red-ui-library-browser {
+    position: relative;
+    height: 100%;
+    .red-ui-treeList-container {
+        background: $secondary-background;
+        border: none;
+        border-radius: 0;
+        li {
+            background: none;
+        }
+        label {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    .red-ui-editableList-border {
+        border-radius: 0;
+    }
+
+    .red-ui-treeList-label input.red-ui-treeList-input {
+        border-radius: 2px;
+        margin-top: -6px;
+        margin-bottom: -6px;
+    }
+}
+
+#red-ui-library-dialog-save-browser {
+    height: calc(100% - 60px);
+    border: 1px solid $primary-border-color;
+    margin-bottom: 10px;
+}
+#red-ui-library-dialog-load-browser {
+    // border: 1px solid $primary-border-color;
+}
+#red-ui-library-dialog-load-panes {
+    border: 1px solid $primary-border-color;
+}
+
+
+#red-ui-library-dialog-load-preview {
+    height: 100%;
+}
+
+#red-ui-library-dialog-load-preview-text {
+    box-sizing: border-box;
+}
+#red-ui-library-dialog-load-preview-details {
+    box-sizing: border-box;
+    .red-ui-help-info-row:first-child {
+        border-top: none;
+    }
+}

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

@@ -36,17 +36,10 @@
 
 }
 
-@mixin workspace-button {
-    @include disable-selection;
-    box-sizing: border-box;
-    display: inline-block;
+@mixin reset-a-style {
     color: $workspace-button-color !important;
     background: $workspace-button-background;
-    border: 1px solid $form-input-border-color;
-    text-align: center;
-    margin:0;
     text-decoration: none;
-    cursor:pointer;
 
     &.disabled, &:disabled  {
         cursor: default;
@@ -67,11 +60,23 @@
         background: $workspace-button-background-active;
         text-decoration: none;
     }
-    // &.selected:not(.disabled):not(:disabled) {
-    //     color: $workspace-button-color-selected !important;
-    //     background: $workspace-button-background-active;
-    //     background: #9f9;
-    // }
+}
+
+@mixin workspace-button {
+    @include disable-selection;
+    @include reset-a-style;
+
+    box-sizing: border-box;
+    display: inline-block;
+    border: 1px solid $form-input-border-color;
+    text-align: center;
+    margin:0;
+    cursor:pointer;
+
+    &.selected:not(.disabled):not(:disabled) {
+        color: $workspace-button-color-selected !important;
+        background: $workspace-button-background-active;
+    }
     .button-group &:not(:first-child) {
         border-left: none;
         border-top-left-radius: 0;
@@ -104,24 +109,24 @@
     }
 
     &.primary {
-        border-color: $editor-button-background-primary;
-        color: $editor-button-color-primary !important;
-        background: $editor-button-background-primary;
+        border-color: $workspace-button-background-primary;
+        color: $workspace-button-color-primary !important;
+        background: $workspace-button-background-primary;
         &.disabled, &.ui-state-disabled {
             background: none;
-            color: $editor-button-color !important;
+            color: $workspace-button-color !important;
             border-color: $form-input-border-color;
         }
         &:not(.disabled):not(.ui-button-disabled):hover {
-            border-color: $editor-button-background-primary-hover;
-            background: $editor-button-background-primary-hover;
-            color: $editor-button-color-primary !important;
+            border-color: $workspace-button-background-primary-hover;
+            background: $workspace-button-background-primary-hover;
+            color: $workspace-button-color-primary !important;
         }
     }
     &.secondary {
         background: none;
         &:not(:hover) {
-            border-color: rgba(0,0,0,0);
+            border-color: transparent;
         }
 
     }
@@ -138,32 +143,17 @@
 
 @mixin workspace-button-toggle {
     @include workspace-button;
-
-    &.single {
-        color: $workspace-button-color !important;
-        background: $workspace-button-background;
-
-        &.selected:not(.disabled):not(:disabled) {
-            color: $workspace-button-toggle-color !important;
-            background: $workspace-button-background-active;
-        }
-    }
     &:not(.single) {
-        color: $workspace-button-toggle-color !important;
-        background:$workspace-button-background-active;
         margin-bottom: 1px;
-
         &.selected:not(.disabled):not(:disabled) {
-            color: $workspace-button-toggle-color-selected !important;
-            background: $workspace-button-background;
             border-bottom-width: 2px;
             border-bottom-color: $form-input-border-selected-color;
             margin-bottom: 0;
             cursor: default;
         }
-    }
-    &.disabled,&:disabled {
-        color: $workspace-button-toggle-color-disabled !important;
+        &:not(.selected) {
+            margin-top: 1px;
+        }
     }
 }
 @mixin editor-button {
@@ -171,26 +161,8 @@
     font-size: 14px;
     padding: 6px 14px;
     margin-right: 8px;
-    color: $editor-button-color !important;
-    background: $editor-button-background;
-
-    // &.primary {
-    //     border-color: $editor-button-background-primary;
-    //     color: $editor-button-color-primary !important;
-    //     background: $editor-button-background-primary;
-    //     &.disabled, &.ui-state-disabled {
-    //         background: none;
-    //         color: $editor-button-color !important;
-    //         border-color: $form-input-border-color;
-    //     }
-    //     &:not(.disabled):not(.ui-button-disabled):hover {
-    //         border-color: $editor-button-background-primary-hover;
-    //         background: $editor-button-background-primary-hover;
-    //         color: $editor-button-color-primary !important;
-    //     }
-    // }
     &:not(.disabled):hover {
-        //color: $editor-button-color;
+        //color: $workspace-button-color;
     }
     &.disabled {
         background: none;
@@ -198,8 +170,6 @@
     &.disabled:focus {
         outline: none;
     }
-
-
     &.leftButton {
         float: left;
         margin-top: 1px;
@@ -214,14 +184,14 @@
 
 @mixin component-footer {
     border-top: 1px solid $primary-border-color;
-    background: #f3f3f3;
+    background: $primary-background;
     text-align: right;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 25px;
-    line-height: 23px;
+    line-height: 25px;
     padding: 0 10px;
     user-select: none;
 
@@ -233,10 +203,11 @@
 
 @mixin component-footer-button {
     @include workspace-button;
-    font-size: 11px;
-    line-height: 17px;
-    width: 18px;
-    height: 18px;
+    font-size: 12px;
+    line-height: 18px;
+    width: 19px;
+    height: 19px;
+    padding: 0;
     &.text-button {
         width: auto;
         padding: 0 5px;
@@ -244,10 +215,11 @@
 }
 @mixin component-footer-button-toggle {
     @include workspace-button-toggle;
-    font-size: 11px;
-    line-height: 17px;
-    height: 18px;
-    width: 18px;
+    font-size: 12px;
+    line-height: 18px;
+    height: 19px;
+    width: 19px;
+    padding: 0;
     &.text-button {
         width: auto;
         padding: 0 5px;
@@ -255,8 +227,7 @@
 }
 
 @mixin component-shadow {
-    border: 1px solid $secondary-border-color;
-    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+    box-shadow: 1px 1px 4px $shadow;
 
 }
 
@@ -269,6 +240,6 @@
     background: $shade-color;
     z-index: 5;
 }
-.component-shade {
+.red-ui-shade {
     @include shade
 }

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 
-#notifications {
+#red-ui-notifications {
     z-index: 100;
     width: 500px;
     margin-left: -250px;
@@ -22,45 +22,60 @@
     position: absolute;
     top: 1px;
 }
-.notification {
+.red-ui-notification {
     box-sizing: border-box;
     position: relative;
     padding: 14px 18px;
     margin-bottom: 4px;
-    box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
-    background-color: #fff;
-    color: #666;
-    border: 1px solid #325C80;
+    box-shadow: 0 1px 1px 1px $shadow;
+    background-color: $secondary-background;
+    color: $primary-text-color;
+    border: 1px solid $notification-border-default;
     border-left-width: 16px;
     overflow: hidden;
+    .ui-dialog-buttonset {
+        margin-top: 20px;
+    }
 }
-.notification p:first-child {
+.red-ui-notification p:first-child {
     font-size: 1.1em;
     font-weight: 400;
 }
-.notification a {
+.red-ui-notification a {
     text-decoration: none;
     &:hover {
         text-decoration: underline;
     }
 }
 
-.notification-success {
-    border-color: #4B8400;
+.red-ui-notification-success {
+    border-color: $notification-border-success;
 }
-.notification-warning {
-    border-color: #D74108;
+.red-ui-notification-warning {
+    border-color: $notification-border-warning;
 }
-.notification-error {
-    border-color: #AD1625;
+.red-ui-notification-error {
+    border-color: $notification-border-error;
 }
 
-.notification-shake-horizontal {
-    -webkit-animation: notification-shake-horizontal 0.3s steps(2, end) both;
-            animation: notification-shake-horizontal 0.3s steps(2, end) both;
+.red-ui-notification-compact {
+    p {
+        margin: 0;
+    }
+    .ui-dialog-buttonset {
+        margin-top: 0;
+        position: absolute;
+        top: 8px;
+        right: 10px;
+    }
 }
 
-@-webkit-keyframes notification-shake-horizontal {
+.red-ui-notification-shake-horizontal {
+    -webkit-animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
+            animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
+}
+
+@-webkit-keyframes red-ui-notification-shake-horizontal {
     0%,
     100% {
         -webkit-transform: translateX(0);
@@ -88,7 +103,7 @@
     //     transform: translateX(-1px);
     // }
 }
-@keyframes notification-shake-horizontal {
+@keyframes red-ui-notification-shake-horizontal {
     0%,
     100% {
         -webkit-transform: translateX(0);

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

@@ -14,11 +14,11 @@
  * limitations under the License.
  **/
 
-#user-settings-tab-palette {
+#red-ui-settings-tab-palette {
     height: 100%;
 }
 
-#palette-editor {
+#red-ui-palette-editor {
     text-align: left;
     position: absolute;
     top: 0px;
@@ -27,7 +27,7 @@
     left:0;
     padding: 0;
     box-sizing:border-box;
-    background: #fff;
+    background: $secondary-background;
 
     .red-ui-editableList-container {
         border: none;
@@ -39,21 +39,25 @@
             // border: none;
             // border-top: 1px solid $primary-border-color;
             padding: 0px;
-            .disabled {
-                background: #f3f3f3;
+            .red-ui-button {
+                min-width: 60px;
+            }
 
-                .palette-module-name {
+            .disabled {
+                // background: $secondary-background-inactive;//f3f3f3;
+
+                .red-ui-palette-module-name {
                     font-style: italic;
-                    color: #aaa;
+                    color: $tertiary-text-color;
                 }
-                .palette-module-version {
-                    color: #aaa;
+                .red-ui-palette-module-version {
+                    color: $tertiary-text-color;
                 }
-                .palette-module-errors .fa-warning {
+                .red-ui-palette-module-errors .fa-warning {
                     opacity: 0.5;
                 }
-                ul.palette-module-error-list li {
-                    color: #aaa;
+                ul.red-ui-palette-module-error-list li {
+                    color: $tertiary-text-color;
                 }
 
 
@@ -67,65 +71,55 @@
         }
 
     }
-    .palette-editor-tab {
+    .red-ui-palette-editor-tab {
         position:absolute;
         top:35px;
         left:0;
         right:0;
         bottom:0
     }
-    .palette-editor-toolbar {
-        background: #f3f3f3;
+    .red-ui-palette-editor-toolbar {
+        background: $primary-background;
         box-sizing: border-box;
         padding: 8px 10px;
         border-bottom: 1px solid $primary-border-color;
         text-align: right;
     }
-    .palette-module-shade-status {
-        color: #666;
+    .red-ui-palette-module-shade-status {
+        color: $secondary-text-color;
     }
-    .palette-module-updated {
+    .red-ui-palette-module-updated {
         margin-left: 10px;
     }
-    .palette-module-link {
+    .red-ui-palette-module-link {
         margin-left: 5px;
     }
 
-    .palette-module-description {
+    .red-ui-palette-module-description {
         margin-left: 20px;
         font-size: 0.9em;
-        color: #999;
+        color: $secondary-text-color;
     }
-    .palette-module-link {
+    .red-ui-palette-module-link {
     }
-    .palette-module-set-button-group {
+    .red-ui-palette-module-set-button-group {
     }
-    .palette-module-count {
-        border-radius: 4px;
-        background: #eee;
-        padding: 2px 8px;
-        font-size: 12px;
-    }
-    .palette-module-content {
+    .red-ui-palette-module-content {
         display: none;
         padding: 10px 3px;
     }
-    i.fa.palette-module-node-chevron {
+    i.fa.red-ui-palette-module-node-chevron {
         width: 8px;
         margin-right: 0;
         transform: rotate(0deg);
         transition: transform 0.2s ease-in-out;
     }
     .expanded {
-        i.fa.palette-module-node-chevron {
+        i.fa.red-ui-palette-module-node-chevron {
             transform: rotate(90deg);
         }
-
-        .palette-module-set-button {
-            background:#f3f3f3 !important;
-        }
     }
-    .palette-module-set {
+    .red-ui-palette-module-set {
         border:1px solid $secondary-border-color;
         border-radius: 0;
         padding: 5px;
@@ -143,35 +137,35 @@
         }
     }
 
-    .palette-module-type {
-        color: #666;
+    .red-ui-palette-module-type {
+        color: $secondary-text-color;
         padding-left: 5px;
         font-size: 0.9em;
         @include enable-selection;
     }
-    .palette-module-type-swatch {
+    .red-ui-palette-module-type-swatch {
         display: inline-block;
         width: 12px;
         height: 12px;
         border-radius: 3px;
         vertical-align: middle;
         margin-right: 5px;
-        background: #fff;
-        border: 1px solid #fff;
+        background: $primary-background;
+        border: 1px dashed $secondary-border-color;
     }
-    .palette-module-set-button-group {
+    .red-ui-palette-module-set-button-group {
         position: absolute;
         right: 4px;
         top: 4px;
     }
 
-    .palette-module-set-disabled {
-        background: #eee;
-        .palette-module-type {
-            color: #999;
+    .red-ui-palette-module-set-disabled {
+        background: $list-item-background-disabled;
+        .red-ui-palette-module-type {
+            color: $secondary-text-color-disabled-active;
         }
     }
-    .palette-module-more {
+    .red-ui-palette-module-more {
         padding: 0 !important;
         margin-top: 10px;
         margin-bottom: 10px;
@@ -180,7 +174,7 @@
             display: block;
             text-align: center;
             padding: 12px 8px;
-            color: #AD1625;
+            color: $text-color-warning;
 
             &:hover {
                 text-decoration: none;
@@ -190,11 +184,11 @@
     }
 
 }
-.palette-module-meta {
-    color: #666;
+.red-ui-palette-module-meta {
+    color: $secondary-text-color;
     position: relative;
     &.disabled {
-        color: #ccc;
+        color: $secondary-text-color-disabled;
     }
 
     .fa {
@@ -203,23 +197,17 @@
         margin-right: 5px;
     }
 }
-.palette-module-name {
+.red-ui-palette-module-name {
+    color: $primary-text-color;
     white-space: nowrap;
     @include enable-selection;
 }
-.palette-module-version, .palette-module-updated, .palette-module-link {
+.red-ui-palette-module-version, .red-ui-palette-module-updated, .red-ui-palette-module-link {
     font-style:italic;
     font-size: 0.8em;
     @include enable-selection;
 }
-.palette-module-section {
-    padding:0 !important;
-    background: #f9f9f9 !important;
-    font-size: 0.9em;
-    color: #666;
-
-}
-.palette-module-button-group {
+.red-ui-palette-module-button-group {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -227,10 +215,10 @@
         margin-left: 5px;
     }
 }
-.palette-module-meta .fa-warning {
-    color: #AD1625;
+.red-ui-palette-module-meta .fa-warning {
+    color: $text-color-warning;
 }
-ul.palette-module-error-list {
+ul.red-ui-palette-module-error-list {
     display: inline-block;
     list-style-type: none;
     margin: 0;
@@ -241,11 +229,11 @@ ul.palette-module-error-list {
     }
 }
 
-.palette-module-shade {
+.red-ui-palette-module-shade {
     @include shade;
     text-align: center;
     padding-top: 20px;
 }
-#palette-module-install-shade {
+#red-ui-palette-module-install-shade {
     padding-top: 80px;
 }

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

@@ -15,12 +15,12 @@
  **/
 
 
-#palette {
+#red-ui-palette{
     position: absolute;
     top: 0px;
     bottom: 0px;
     left:0px;
-    background: #f3f3f3;
+    background: $primary-background;
     width: 180px;
     text-align: center;
     @include disable-selection;
@@ -28,30 +28,18 @@
     transition: width 0.2s ease-in-out;
 }
 
-.palette-closed {
-    #palette { width: 8px; }
-    #palette-search { display: none; }
-    #palette-container { display: none; }
-    #palette-collapse-all { display: none; }
-    #palette-expand-all { display: none; }
-}
-
-.palette-expanded {
-    & #palette {
-        width: 380px;
-        box-shadow: 1px 0 6px rgba(0,0,0,0.1);
+.red-ui-palette-closed {
+    #red-ui-palette {
+        width: 8px;
+        .red-ui-component-footer {
+            display: none;
+        }
     }
-    & #workspace { left: 379px !important; }
-    & #palette-collapse-all { display: none; }
-    & #palette-expand-all { display: none; }
-    & #palette-container { display: none !important; }
-    & #palette-search { display: none !important; }
-    & #palette-edit { background: $workspace-button-background-active }
-    & #palette-editor { display: block !important }
+    #red-ui-palette-search { display: none; }
+    #red-ui-palette-container { display: none; }
 }
 
-
-.palette-scroll {
+.red-ui-palette-scroll {
     position: absolute;
     top: 35px;
     right: 0;
@@ -61,13 +49,13 @@
     overflow-y: auto;
     box-sizing:border-box;
 }
-#palette > .palette-spinner {
+#red-ui-palette> .red-ui-palette-spinner {
     padding-top: 80px;
 }
-.palette-search {
+.red-ui-palette-search {
     position: relative;
     overflow: hidden;
-    background: #ffffff;
+    background: $secondary-background;
     text-align: center;
     height: 35px;
     padding: 3px;
@@ -75,24 +63,18 @@
     box-sizing:border-box;
 }
 
-#palette-footer {
-    @include component-footer;
+.red-ui-palette-category {
+    border-bottom: 1px solid $secondary-border-color;
 }
-.palette-button {
-    @include component-footer-button;
-}
-
-.palette-category {
-    border-bottom: 1px solid #ccc;
-}
-.palette-content {
-    background: #fff;
+.red-ui-palette-content {
+    background: $palette-content-background;
     padding: 3px;
 }
 
-.palette-header {
+.red-ui-palette-header {
     position: relative;
     background: $palette-header-background;
+    color: $palette-header-color;
     cursor: pointer;
     text-align: left;
     padding: 9px;
@@ -104,7 +86,7 @@
         background: $palette-header-background !important;
     }
 }
-.palette-header > i {
+.red-ui-palette-header > i {
     position: absolute;
     left: 11px;
     top: 12px;
@@ -115,15 +97,16 @@
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
 }
-.palette-header i.expanded {
+.red-ui-palette-header i.expanded {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
 }
-.palette-header span {
+.red-ui-palette-header span {
     clear: both;
 }
-.palette_label {
+.red-ui-palette-label {
+    color: $node-label-color;
     font-size: 13px;
     margin: 4px 0 4px 32px;
     line-height: 20px;
@@ -131,66 +114,78 @@
     text-align: center;
     @include disable-selection;
 }
-.palette_label_right {
+.red-ui-palette-label-right {
     margin: 4px 32px 4px 0;
 }
 
-.palette_node {
-    display: block;
-    cursor:move;
-    background: #ddd;
-    margin: 10px auto;
+.red-ui-palette-node {
+    display: inline-block;
+    cursor: move;
+    background: $secondary-background;
+    margin: 5px auto;
     height: 25px;
     border-radius: 5px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     width: 120px;
     background-size: contain;
     position: relative;
+    &:first-child {
+        margin-top: 10px;
+    }
+    &:last-child {
+        margin-bottom: 10px;
+    }
 }
-.palette_node:hover {
+.red-ui-palette-node:hover {
+    margin: 4px auto;
     border-color: $node-selected-color;
-    background-color: #eee;
+    border-width: 2px;
+    &:first-child {
+        margin-top: 9px;
+    }
+    &:last-child {
+        margin-bottom: 9px;
+    }
 }
-.palette_port {
+.red-ui-palette-port {
     position: absolute;
     top:8px;
     left: -5px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    background:#d9d9d9;
+    background: $node-port-background;
     border-radius: 3px;
     width: 10px;
     height: 10px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
 }
-.palette_port_output {
+.red-ui-palette-port-output {
     left:auto;
     right: -6px;
 }
 
-.palette_node:hover .palette_port {
-    border-color: #999;
-    background-color: #eee;
+.red-ui-palette-node:hover .red-ui-palette-port {
+    background-color: $node-port-background-hover;
 }
-.palette_icon_container {
+.red-ui-palette-icon-container {
     position: absolute;
     text-align: center;
     top:0;
     bottom:0;
     left:0;
     width: 30px;
-    border-right: 1px solid rgba(0,0,0,0.1);
-    background-color: rgba(0,0,0,0.05);
+    border-right: 1px solid $node-icon-background-color;
+    background-color: $node-icon-background-color;
 }
-.palette_icon_container_right {
+.red-ui-palette-icon-container-right {
     left: auto;
     right: 0;
     border-right: none;
-    border-left: 1px solid rgba(0,0,0,0.1);
+    border-left: 1px solid $node-icon-background-color;
 }
-.palette_icon {
+.red-ui-palette-icon {
     display: inline-block;
     width: 20px;
     height: 100%;
@@ -198,13 +193,13 @@
     background-size: contain;
     background-repeat: no-repeat;
 }
-.palette_icon_fa {
+.red-ui-palette-icon-fa {
     color: white;
     position: absolute;
     top: 7px;
     left: 3px;
 }
-.palette_node_small {
+.red-ui-palette-node-small {
     display: inline-block;
     position: relative;
     width: 18px;
@@ -213,15 +208,15 @@
     vertical-align: middle;
     cursor: default;
 
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         width: 18px;
         border-right: none;
     }
-    .palette_icon {
+    .red-ui-palette-icon {
         margin-left: -1px;
         width: 15px;
     }
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         top: 2px;
         left: 1px;
     }

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

@@ -30,7 +30,7 @@
     height: 7px;
     box-sizing: border-box;
     cursor: ns-resize;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
 }
 
 
@@ -41,13 +41,13 @@
 
 .red-ui-panels.red-ui-panels-horizontal {
     height: 100%;
-    .red-ui-panel {
+    &>.red-ui-panel {
         vertical-align: top;
         display: inline-block;
         height: 100%;
         width: calc(50% - 4px);
     }
-    .red-ui-panels-separator {
+    &>.red-ui-panels-separator {
         vertical-align: top;
         border-top: none;
         border-bottom: none;

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

@@ -25,6 +25,7 @@
     color: $popover-color;
     border-radius: 4px;
     z-index: 1000;
+    font-family: $primary-font;
     font-size: 14px;
     line-height: 1.4em;
     @include component-shadow;
@@ -59,26 +60,26 @@
 }
 
 .red-ui-popover.red-ui-popover-right:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-right-color: $popover-background;
     border-width: 10px;
     margin-top: -10px;
 }
 .red-ui-popover.red-ui-popover-right:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-right-color: $popover-background;
     border-width: 11px;
     margin-top: -11px;
 }
 
 .red-ui-popover.red-ui-popover-left:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-left-color: $popover-background;
     border-width: 10px;
     margin-top: -10px;
 }
 .red-ui-popover.red-ui-popover-left:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-left-color: $popover-background;
     border-width: 11px;
     margin-top: -11px;
@@ -86,26 +87,26 @@
 
 
 .red-ui-popover.red-ui-popover-bottom:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-bottom-color: $popover-background;
     border-width: 10px;
     margin-left: -10px;
 }
 .red-ui-popover.red-ui-popover-bottom:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-bottom-color: $popover-background;
     border-width: 11px;
     margin-left: -11px;
 }
 
 .red-ui-popover.red-ui-popover-top:after {
-    border-color: rgba(136, 183, 213, 0);
+    border-color: transparent;
     border-top-color: $popover-background;
     border-width: 10px;
     margin-left: -10px;
 }
 .red-ui-popover.red-ui-popover-top:before {
-    border-color: rgba(194, 225, 245, 0);
+    border-color: transparent;
     border-top-color: $popover-background;
     border-width: 11px;
     margin-left: -11px;
@@ -140,27 +141,24 @@
 
 .red-ui-popover-key {
     font-size: 11px;
-    font-family: monospace;
+    font-family: $monospace-font;
     margin-left: 3px;
-    border: 1px solid #999;
+    border: 1px solid $popover-color;
     border-radius:3px;
     padding: 1px 2px;
 }
 
-.red-ui-popover .editor-button {
-    &:not(.primary) {
-        color: #444 !important;
-        border-color: rgba(0,0,0,0);
-    }
+.red-ui-popover a.red-ui-button,
+.red-ui-popover button.red-ui-button {
     &.primary {
-        border-color: #bbb;
+        border-color: $popover-button-border-color;
     }
-    &.primary:hover {
-        border-color: #666 !important;
+    &.primary:not(.disabled):not(.ui-button-disabled):hover {
+        border-color: $popover-button-border-color-hover;
     }
 }
 .red-ui-popover code {
     border: none;
     background: none;
-    color: #ccc;
+    color: $tertiary-text-color;
 }

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

@@ -14,28 +14,28 @@
  * limitations under the License.
  **/
 
-#projects-dialog {
+#red-ui-projects-dialog {
     .red-ui-editableList-container {
         padding: 0px;
     }
 
 }
-#project-settings-tab-settings {
+#red-ui-project-settings-tab-settings {
     overflow-y: scroll;
 }
-.sidebar-version-control-shade {
-    background: #f3f3f3;
+.red-ui-sidebar-vc-shade {
+    background: $primary-background;
 }
 
-.projects-edit-form form {
+.red-ui-projects-edit-form form {
     margin: 0;
     .form-row {
         margin-bottom: 15px;
         label {
-            color: #555;
+            color: $primary-text-color;
             width: 100%;
             display: block;
-            &.projects-edit-form-inline-label {
+            &.red-ui-projects-edit-form-inline-label {
                 font-weight: normal;
                 color: inherit;
                 width: auto;
@@ -46,87 +46,34 @@
         }
         input[type=checkbox], input[type=radio] {
             width: auto;
-            vertical-align: top;
+            vertical-align: middle;
         }
     }
 
 }
-.projects-edit-form-sublabel {
-    color: #999;
+.red-ui-projects-edit-form-sublabel {
+    color: $tertiary-text-color;
     text-align: right;
     margin-bottom: -15px;
     font-weight: normal;
 }
-.project-settings-tab-pane {
-    & * .projects-edit-form-sublabel {
+.red-ui-project-settings-tab-pane {
+    & * .red-ui-projects-edit-form-sublabel {
         margin-right: 50px;
         margin-top: -10px !important;
         margin-bottom: 5px;
     }
 }
-.projects-dialog-spinner {
-    position: absolute;
-    top: 1px;
-    bottom: 1px;
-    left: 1px;
-    right: 1px;
-    text-align: center;
-    padding: 40px;
-    background: white;
-    &:before {
-      content: '';
-      display: inline-block;
-      height: 100%;
-      vertical-align: middle;
-      margin-right: -0.25em;
-    }
-    img {
-        display: inline-block;
-        vertical-align: middle;
-        width: 80px;
-    }
-    &.projects-dialog-spinner-sidebar {
-        background: white;
-        padding:0;
-        img {
-            width: 40px;
-        }
-    }
-    &.projects-version-control-spinner-sidebar {
-        background: white;
-        padding:0;
-        img {
-            width: 20px;
-        }
-    }
 
-    &.projects-dialog-spinner-contain {
-        padding: 0;
-        img {
-            width: auto;
-            height: 100%;
-            max-height: 50px;
-        }
-    }
-
-}
-.projects-dialog-screen-start {
-    .projects-dialog-screen-start-hero {
-        // background: url(https://nodered.org/images/title-wave.png) no-repeat 0% 100% #8f0000;
-        // background-size: contain;
+.red-ui-projects-dialog-screen-start {
+    .red-ui-projects-dialog-screen-start-hero {
         text-align: center;
         font-size: 2em;
         padding: 10px;
         min-height: 60px;
-        color: #555;
-        h1 {
-            text-align: center;
-            color: #f0f0f0;
-            font-size: 2em;
-            font-weight: normal;
-        }
+        color: $primary-text-color;
     }
-    .projects-dialog-screen-start-body {
+    .red-ui-projects-dialog-screen-start-body {
         min-height: 400px;
         line-height: 1.6em;
         p {
@@ -138,27 +85,20 @@
             font-size: 1.2em;
         }
     }
-    button.editor-button {
+    button.red-ui-button {
         width: calc(50% - 80px);
         margin: 20px;
         height: auto;
         line-height: 2em;
         padding: 10px;
-        border-color: #aaa;
-        i {
-            color: #aaa;
-        }
-        &:hover i {
-            color: #999;
-        }
     }
     .button-group {
         text-align: center;
     }
 }
-.projects-dialog-screen-create {
+.red-ui-projects-dialog-screen-create {
     min-height: 500px;
-    button.projects-dialog-screen-create-type {
+    button.red-ui-projects-dialog-screen-create-type {
         height: auto;
         padding: 10px;
     }
@@ -167,14 +107,70 @@
     }
 }
 
-.projects-dialog-screen-secret {
+.red-ui-projects-dialog-screen-secret {
     min-height: auto;
 }
-.projects-dialog-project-list-container {
+
+.red-ui-projects-dialog-credentials-box {
+    width: 550px;
+    > div {
+        vertical-align: top;
+        display: inline-block;
+    }
+}
+.red-ui-projects-dialog-credentials-box-right {
+    min-height:150px;
+    box-sizing: border-box;
+    float: right;
+    width: 331px;
+    margin-left: -1px;
+    padding: 15px;
+    margin-top: -15px;
+    border: 1px solid $secondary-border-color;
+    border-radius: 3px;
+}
+.red-ui-projects-dialog-credentials-box-left {
+    width: 220px;
+    > div {
+        padding:  7px 8px 3px 8px;
+        border: 1px solid $secondary-border-color;
+        border-radius: 4px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right-color: $form-background;
+        &.disabled {
+            border-color: $form-background;
+            border-right-color:$secondary-border-color;
+        }
+        i {
+            font-size: 1.4em;
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+        label.red-ui-projects-edit-form-inline-label {
+            margin-left: 5px;
+            span {
+                vertical-align: middle;
+            }
+        }
+        input[type="radio"] {
+            vertical-align: middle;
+            margin-top:0;
+            margin-right: 10px;
+        }
+
+    }
+}
+.red-ui-projects-dialog-credentials-box-enabled {
+}
+.red-ui-projects-dialog-credentials-box-disabled {
+}
+
+.red-ui-projects-dialog-project-list-container {
     border: 1px solid $secondary-border-color;
     border-radius: 2px;
 }
-.projects-dialog-project-list-inner-container {
+.red-ui-projects-dialog-project-list-inner-container {
     height: 300px;
     overflow-y: scroll;
     position:relative;
@@ -182,100 +178,100 @@
         border: none;
     }
 }
-.projects-dialog-project-list {
+.red-ui-projects-dialog-project-list {
     li {
         padding: 0 !important;
     }
 }
-.projects-dialog-project-list-entry {
+.red-ui-projects-dialog-project-list-entry {
     padding: 12px 0;
-    border-left: 3px solid #fff;
-    border-right: 3px solid #fff;
+
+    color: $list-item-color;
+    background: $list-item-background;
+    border-left: 3px solid $list-item-background;
+    border-right: 3px solid $list-item-background;
+
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: #f9f9f9;
+            color: $form-text-color;
+            background: $list-item-background-selected;
+            border-left-color:$list-item-border-selected;
+            border-right-color:$list-item-border-selected;
         }
         i {
-            color: #999;
+            color: $secondary-text-color;
         }
     }
     &.selectable {
         cursor: pointer;
-        &:hover {
-            background: #f3f3f3;
-            // border-left-color: #aaa;
-            // border-right-color: #aaa;
+        &:hover:not(.selected) {
+            color: $form-text-color;
+            background: $list-item-background-hover;
+            border-left-color:$list-item-background-hover;
+            border-right-color:$list-item-background-hover;
         }
     }
-    .projects-dialog-project-list-entry-icon {
+    .red-ui-projects-dialog-project-list-entry-icon {
         i {
-            color: #ccc;
+            color: $tertiary-text-color;
             font-size: 2em;
 
         }
     }
     &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
+        color: $form-text-color;
+        background: $list-item-background-selected;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         display: inline-block;
         vertical-align:middle;
     }
-    .projects-dialog-project-list-entry-icon {
+    .red-ui-projects-dialog-project-list-entry-icon {
          margin: 0 10px 0 5px;
     }
-    .projects-dialog-project-list-entry-name {
+    .red-ui-projects-dialog-project-list-entry-name {
         font-size: 1.2em;
     }
-    .projects-dialog-project-list-entry-current {
+    .red-ui-projects-dialog-project-list-entry-current {
         float: right;
         margin-right: 20px;
         font-size: 0.9em;
-        color: #999;
+        color: $secondary-text-color;
         padding-top: 4px;
     }
-    .projects-dialog-project-list-entry-tools {
+    .red-ui-projects-dialog-project-list-entry-tools {
         position: absolute;
         top: 16px;
         right: 30px;
         display: none;
-        color: #999;
+        color: $secondary-text-color;
     }
     &:hover {
-        .projects-dialog-project-list-entry-tools {
+        .red-ui-projects-dialog-project-list-entry-tools {
             display: block;
         }
     }
 }
-.projects-dialog-screen-create-type.editor-button.toggle.selected:not(.disabled):not(:disabled) {
-    background: #fff !important;
-    color: #666 !important;
+.red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) {
+    color: $secondary-text-color-active !important;
 }
-.projects-dialog-screen-input-status {
+.red-ui-projects-dialog-screen-input-status {
     text-align: right;
     position: absolute;
     top: 2px;
     right: 8px;
     width: 70px;
     height: 30px;
-    color: #999;
+    color: $secondary-text-color;
 }
 
-.sidebar-version-control {
+.red-ui-sidebar-vc {
     height: 100%;
 }
-.sidebar-version-control-stack-info {
-    height: 100px;
-    box-sizing: border-box;
-    border-bottom: 1px solid $secondary-border-color;
-    color: #333;
-    i {
-        color: #999;
-    }
-}
-.sidebar-version-control-stack {
+
+.red-ui-sidebar-vc-stack {
     position: absolute;
     top: 0px;
     bottom: 0;
@@ -283,14 +279,14 @@
     right: 0;
     overflow: hidden;
 
-    .palette-category {
-        &:not(.palette-category-expanded) button {
+    .red-ui-palette-category {
+        &:not(.expanded) button {
             display: none;
         }
     }
 }
 
-#project-settings-tab-deps {
+#red-ui-project-settings-tab-deps {
     .red-ui-editableList-container {
         padding: 0;
     }
@@ -300,33 +296,31 @@
     .red-ui-editableList-item-content {
         padding: 0px 6px;
     }
-    .palette-module-header {
+    .red-ui-palette-module-header {
         padding: 6px 4px;
     }
-    .palette-module-button {
+    .red-ui-palette-module-button {
         float: right;
     }
-    .palette-module-unused {
+    .red-ui-palette-module-unused {
         & > * {
-            color: #bbb;
+            color: $secondary-text-color;
         }
-        // border: 1px dashed #bbb;
     }
-    .palette-module-unknown {
-        border: 1px dashed #aaa;
-        background: #fafafa;
+    .red-ui-palette-module-unknown {
+        border: 1px dashed $secondary-border-color;
+        background: $secondary-background-inactive;
     }
-    .palette-module-not-installed {
-        border: 1px dashed #b07575;
-        background: #fee;
+    .red-ui-palette-module-not-installed {
+        border: 1px dashed $text-color-warning;
         i.fa-warning {
-            color: #b07575; //#b72828;
+            color: $text-color-warning;
         }
     }
 }
 
 
-.project-settings-tab-pane {
+.red-ui-project-settings-tab-pane {
     position: absolute;
     top:0;
     left:0;
@@ -335,13 +329,13 @@
     overflow-y: auto;
     padding: 8px 20px 20px;
 }
-.sidebar-version-control {
+.red-ui-sidebar-vc {
     .red-ui-editableList-container {
-        background: #f9f9f9;
+        background: $tertiary-background;
         padding: 0;
         li {
             padding:0;
-            background: #fff;
+            background: $secondary-background;
         }
     }
     .red-ui-editableList-border {
@@ -350,7 +344,7 @@
     }
 }
 
-.sidebar-version-control-change-container {
+.red-ui-sidebar-vc-change-container {
     position: relative;
     height: 50%;
     box-sizing: border-box;
@@ -359,22 +353,22 @@
         // border-bottom: 1px solid $primary-border-color;
     }
 }
-.sidebar-version-control-merging {
-    .sidebar-version-control-change-container {
+.red-ui-sidebar-vc-merging {
+    .red-ui-sidebar-vc-change-container {
         height: 33%;
     }
 }
-.sidebar-version-control-slide-box {
+.red-ui-sidebar-vc-slide-box {
     position:absolute;
     bottom: 0;
     left:0;
     right:0;
     height:0;
     transition: height 0.2s ease-in-out;
-    background: #f6f6f6;
+    background: $tertiary-background;
     box-sizing: border-box;
     overflow: hidden;
-    &.sidebar-version-control-slide-box-top {
+    &.red-ui-sidebar-vc-slide-box-top {
         z-index: 4;
         top: 0px;
         left: auto;
@@ -383,15 +377,15 @@
         border-left: 1px solid $primary-border-color;
         border-right: 1px solid $primary-border-color;
         border-bottom: 1px solid $primary-border-color;
-        box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+        box-shadow: 1px 1px 4px $shadow;
 
-        color: #666;
-        background: #f6f6f6;
+        color: $primary-text-color;
+        background: $tertiary-background;
         padding: 10px;
         box-sizing: border-box;
 
     }
-    &.sidebar-version-control-slide-box-bottom {
+    &.red-ui-sidebar-vc-slide-box-bottom {
         bottom: 0px;
         border-top: 1px solid $secondary-border-color;
     }
@@ -406,7 +400,7 @@
     }
 
 }
-.projects-branch-list {
+.red-ui-projects-branch-list {
     position: relative;
     .red-ui-searchBox-container {
         border-top: 1px solid $secondary-border-color;
@@ -428,12 +422,12 @@
             padding: 0;
             li {
                 padding: 0;
-                background: #fff;
+                background: $secondary-background;
             }
         }
     }
 }
-.uneditable-input .projects-branch-list {
+.uneditable-input .red-ui-projects-branch-list {
     .red-ui-editableList {
         border-left: none;
         border-bottom: none;
@@ -444,33 +438,34 @@
         border-right: none;
     }
 }
-.sidebar-version-control-slide-box-header {
+.red-ui-sidebar-vc-slide-box-header {
     margin-bottom: 10px;
 }
 
-.sidebar-version-control-slide-box-toolbar {
+.red-ui-sidebar-vc-slide-box-toolbar {
     padding: 0 20px;
     text-align: right;
 }
-.sidebar-version-control-branch-list-entry {
+.red-ui-sidebar-vc-branch-list-entry {
     padding: 5px 8px;
-    color: #666;
+    margin: 0 1px;
+    color: $list-item-color;
+    background: $list-item-background;
+    border-left: 2px solid $list-item-background;
+    border-right: 2px solid $list-item-background;
     cursor: pointer;
     &.selected {
-        border-left-color:#999;
-        border-right-color:#999;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
-    border-left: 2px solid #fff;
-    border-right: 2px solid #fff;
-    margin: 0 1px;
     i { width: 16px; text-align: center}
     &.input-error {
         cursor: default;
     }
     &:not(.input-error):hover {
-        background: #f3f3f3;
-        border-left-color:#999;
-        border-right-color:#999;
+        background: $list-item-background-hover;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         margin-left: 5px;
@@ -478,11 +473,11 @@
     span.current {
         float: right;
         font-size: 0.8em;
-        color: #999;
+        color: $tertiary-text-color;
     }
 }
 
-.sidebar-version-control-change-entry {
+.red-ui-sidebar-vc-change-entry {
     height: 20px;
     padding: 5px 10px;
     position: relative;
@@ -496,7 +491,7 @@
             pointer-events: none;
         }
     }
-    .sidebar-version-control-change-entry-tools {
+    .red-ui-sidebar-vc-change-entry-tools {
         position: absolute;
         top: 4px;
         right: 4px;
@@ -507,19 +502,19 @@
     }
 
     &:hover {
-        .sidebar-version-control-change-entry-tools {
+        .red-ui-sidebar-vc-change-entry-tools {
             display: block;
         }
     }
-    &.node-info-none {
+    &.red-ui-help-info-node {
         text-align: center;
-        background: #fefefe;
+        background: $list-item-background;
         white-space: normal;
         height: auto;
     }
 }
 
-.sidebar-version-control-commit-entry {
+.red-ui-sidebar-vc-commit-entry {
     min-height: 20px;
     padding: 5px 10px;
     position: relative;
@@ -527,51 +522,51 @@
     overflow: hidden;
     cursor: pointer;
     &:hover {
-        background: #eee;
+        background: $secondary-background-hover;
     }
 }
-.sidebar-version-control-commit-more {
-    color: #999;
+.red-ui-sidebar-vc-commit-more {
+    color: $secondary-text-color;
     text-align: center;
     padding: 10px;
     font-style: italic;
 }
-.sidebar-version-control-commit-sha {
+.red-ui-sidebar-vc-commit-sha {
     float: right;
-    font-family: monospace;
-    color: #c38888;
+    font-family: $monospace-font;
+    color: $vcCommitShaColor;
     display: inline-block;
     font-size: 0.85em;
     margin-left: 5px;
 }
-.sidebar-version-control-commit-subject {
-    color: #666;
+.red-ui-sidebar-vc-commit-subject {
+    color: $primary-text-color;
 }
-.sidebar-version-control-commit-refs {
+.red-ui-sidebar-vc-commit-refs {
     min-height: 22px;
 }
-.sidebar-version-control-commit-ref {
-    color: #aaa;
+.red-ui-sidebar-vc-commit-ref {
+    color: $tertiary-text-color;
     font-size: 0.7em;
-    border: 1px solid #ccc;
+    border: 1px solid $tertiary-border-color;
     border-radius: 10px;
     padding: 2px 5px;
     margin-right: 5px;
 }
-.sidebar-version-control-commit-date {
-    color: #999;
+.red-ui-sidebar-vc-commit-date {
+    color: $secondary-text-color;
     font-size: 0.85em;
 }
-.sidebar-version-control-commit-user {
+.red-ui-sidebar-vc-commit-user {
     float: right;
-    color: #999;
+    color: $secondary-text-color;
     font-size: 0.85em;
 }
-.sidebar-version-control-commit-head {
+.red-ui-sidebar-vc-commit-head {
 }
-.sidebar-version-control-change-header {
-    color: #666;
-    background: #f6f6f6;
+.red-ui-sidebar-vc-change-header {
+    color: $primary-text-color;
+    background: $tertiary-background;
     padding: 4px 10px;
     height: 30px;
     box-sizing: border-box;
@@ -581,22 +576,22 @@
         transition: all 0.2s ease-in-out;
     }
 }
-.sidebar-version-control-repo-toolbar {
-    color: #666;
-    background: #f6f6f6;
+.red-ui-sidebar-vc-repo-toolbar {
+    color: $primary-text-color;
+    background: $tertiary-background;
     padding: 10px;
     box-sizing: border-box;
 }
 
-.sidebar-version-control-repo-count {
+.red-ui-sidebar-vc-repo-count {
     margin-right: 8px;
     display: none;
 }
-.sidebar-version-control-repo-action  {
+.red-ui-sidebar-vc-repo-action  {
     text-align: left;
     width: 100%;
 }
-.sidebar-version-control-repo-sub-action  {
+.red-ui-sidebar-vc-repo-sub-action  {
     width: calc(50% - 5px);
     margin-right: 5px;
     &:not(:first-child) {
@@ -605,13 +600,13 @@
     }
 }
 
-.project-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
+.red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
     border-radius: 0;
     border: none;
     border-top: 1px solid $secondary-border-color;
 
 }
-.red-ui-editableList-container .projects-dialog-file-list {
+.red-ui-editableList-container .red-ui-projects-dialog-file-list {
     .red-ui-editableList-border {
         border: none;
     }
@@ -623,66 +618,68 @@
         padding: 0;
     }
 }
-.projects-dialog-file-list-entry {
+.red-ui-projects-dialog-file-list-entry {
     padding: 3px 0;
-    border-left: 2px solid #fff;
-    border-right: 2px solid #fff;
+    border-left: 2px solid $list-item-background;
+    border-right: 2px solid $list-item-background;
+    background: $list-item-background;
+
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: #f9f9f9;
+            background: $list-item-background-selected;
         }
         i {
-            color: #999;
+            color: $secondary-text-color-selected;
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover {
-            background: #f3f3f3;
-            border-left-color:#999;
-            border-right-color:#999;
+            background: $list-item-background-hover;
+            border-left-color:$list-item-border-selected;
+            border-right-color:$list-item-border-selected;
         }
     }
     &.unselectable {
-        color: #ccc;
+        color: $secondary-text-color-disabled;
     }
 
     i {
-        color: #999;
+        color: $secondary-text-color;
         width: 16px;
         text-align: center;
     }
     &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
+        background: $list-item-background-selected;
+        border-left-color:$list-item-border-selected;
+        border-right-color:$list-item-border-selected;
     }
     span {
         display: inline-block;
         vertical-align:middle;
     }
-    .projects-dialog-file-list-entry-folder {
+    .red-ui-projects-dialog-file-list-entry-folder {
          margin: 0 10px 0 0px;
 
          .fa-angle-right {
-             color: #333;
+             color: $primary-text-color;
              transition: all 0.2s ease-in-out;
 
          }
     }
-    .projects-dialog-file-list-entry-file {
+    .red-ui-projects-dialog-file-list-entry-file {
          margin: 0 10px 0 20px;
     }
-    .projects-dialog-file-list-entry-name {
+    .red-ui-projects-dialog-file-list-entry-name {
         font-size: 1em;
     }
     &.expanded .fa-angle-right {
         transform: rotate(90deg);
     }
 }
-.projects-dialog-file-list-entry-file-type-git { color: #999 }
+.red-ui-projects-dialog-file-list-entry-file-type-git { color: $tertiary-text-color }
 
-.projects-dialog-remote-list {
+.red-ui-projects-dialog-remote-list {
     .red-ui-editableList-container {
         padding: 0;
         li {
@@ -694,87 +691,7 @@
     }
 }
 
-.projects-dialog-sshkey-list {
-    li {
-        padding: 0 !important;
-    }
-    &.projects-dialog-sshkey-list-small {
-        .projects-dialog-sshkey-list-entry {
-            padding: 6px 0;
-            i {
-                font-size: 1em;
-            }
-        }
-        .projects-dialog-sshkey-list-entry-name {
-            font-size: 1em;
-        }
-        .projects-dialog-sshkey-list-entry-current {
-            margin-right: 10px;
-            padding-top: 2px;
-        }
-    }
-}
-.red-ui-editableList-container {
-    .projects-dialog-sshkey-list {
-        li:last-child {
-            border-bottom: 0px none;
-        }
-    }
-}
-.projects-dialog-sshkey-list-entry {
-    padding: 12px 0;
-    border-left: 3px solid #fff;
-    border-right: 3px solid #fff;
-    &.sshkey-list-entry-current {
-        &:not(.selectable) {
-            background: #f9f9f9;
-        }
-        i {
-            color: #999;
-        }
-    }
-    &.selectable {
-        cursor: pointer;
-        &:hover {
-            background: #f3f3f3;
-            border-left-color: #aaa;
-            border-right-color: #aaa;
-        }
-    }
-    i {
-        color: #ccc;
-        font-size: 2em;
-
-    }
-    &.selected {
-        background: #efefef;
-        border-left-color:#999;
-        border-right-color:#999;
-    }
-    span {
-        display: inline-block;
-        vertical-align:middle;
-    }
-    .projects-dialog-sshkey-list-entry-icon {
-         margin: 0 10px 0 5px;
-    }
-    .projects-dialog-sshkey-list-entry-name {
-        font-size: 1.2em;
-    }
-    .projects-dialog-sshkey-list-entry-current {
-        float: right;
-        margin-right: 20px;
-        font-size: 0.9em;
-        color: #999;
-        padding-top: 4px;
-    }
-    .projects-dialog-sshkey-list-button-remove {
-        position: absolute;
-        right: 4px;
-    }
-}
-
-div.projects-dialog-ssh-public-key {
+div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     padding: 15px 20px 0;
     pre {
@@ -788,31 +705,31 @@ div.projects-dialog-ssh-public-key {
     }
 }
 
-.projects-dialog-ssh-key-list {
+.red-ui-projects-dialog-ssh-key-list {
     li {
         padding: 0 !important;
     }
-    .projects-dialog-ssh-key-header {
+    .red-ui-projects-dialog-ssh-key-header {
         padding: 10px 5px;
         cursor: pointer;
         &:hover {
-            background: #f3f3f3;
+            background: $list-item-background-hover;
         }
     }
 }
 
-.projects-dialog-list {
+.red-ui-projects-dialog-list {
     position: relative;
     .red-ui-editableList-container {
         padding: 1px;
-        background: #f6f6f6;
+        background: $tertiary-background;
         li:last-child {
             border-bottom: none;
         }
     }
 }
 
-.projects-dialog-list-entry {
+.red-ui-projects-dialog-list-entry {
     &.red-ui-search-empty {
         padding: 0;
     }
@@ -824,7 +741,7 @@ div.projects-dialog-ssh-public-key {
         text-align: center;
         min-width: 30px;
         vertical-align: top;
-        color: #999;
+        color: $secondary-text-color;
     }
     .entry-name {
         min-width: 250px;
@@ -833,7 +750,7 @@ div.projects-dialog-ssh-public-key {
         font-weight: bold;
     }
     .entry-detail {
-        color: #aaa;
+        color: $tertiary-text-color;
         font-size: 0.9em;
     }
 
@@ -847,14 +764,14 @@ div.projects-dialog-ssh-public-key {
         margin-right: 10px;
     }
 }
-.projects-dialog-list-dialog {
+.red-ui-projects-dialog-list-dialog {
     position: relative;
     margin-top: 10px;
     margin-bottom: 20px;
-    background: white;
+    background: $secondary-background;
     border-radius: 4px;
     border: 1px solid $secondary-border-color;
-    .projects-edit-form-sublabel {
+    .red-ui-projects-edit-form-sublabel {
         margin-top: -8px !important;
         display: block !important;
         width: auto !important;
@@ -865,11 +782,18 @@ div.projects-dialog-ssh-public-key {
         clear: both;
     }
 
-    .projects-dialog-list-dialog-header {
+    .red-ui-projects-dialog-list-dialog-header {
         font-weight: bold;
-        background: #f3f3f3;
+        background: $primary-background;
         margin-top: 0 !important;
         padding: 5px 10px;
         margin-bottom: 10px;
     }
 }
+
+#red-ui-settings-tab-gitconfig {
+    padding: 8px 20px 20px;
+}
+.red-ui-settings-section-description {
+    color: $secondary-text-color;
+}

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

@@ -19,22 +19,13 @@
     display: none;
     position: absolute;
     width: 500px;
-    background: white;
     left: 50%;
     margin-left: -250px;
     top: 0px;
     border: 1px solid $primary-border-color;
-    box-shadow: 0 0 10px rgba(0,0,0,0.4);
+    box-shadow: 0 0 10px $shadow;
+}
 
-    ol {
-    }
-}
-.red-ui-type-search-shade {
-    @include shade;
-    z-index: 20;
-    position: fixed;
-    background: rgba(255,255,255,0.05);
-}
 .red-ui-type-search {
     box-shadow: 0 1px 6px -3px black;
     background: none;
@@ -45,7 +36,7 @@
     .red-ui-search-container {
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
-        border: 1px dashed #aaa;
+        border: 1px dashed $primary-border-color;
         border-bottom: none;
         padding: 0;
     }
@@ -53,8 +44,8 @@
         display: none;
         height: 150px;
         .red-ui-editableList-container {
-            border: 1px dashed #aaa;
-            border-top: 1px solid #ccc;
+            border: 1px dashed $primary-border-color;
+            border-top: 1px solid $secondary-border-color;
         }
     }
     .red-ui-search-result {
@@ -62,14 +53,14 @@
         font-size: 13px;
         border-left-width: 3px;
         border-right-width: 3px;
-        .palette_icon_fa {
+        .red-ui-palette-icon-fa {
             position: relative;
             top: -2.5px;
             left: 0px;
         }
     }
     .red-ui-search-result-separator {
-        border-bottom: 3px solid #ddd;
+        border-bottom: 3px solid $secondary-border-color;
     }
     .red-ui-search-result-node {
         position: relative;
@@ -80,54 +71,49 @@
     .red-ui-search-result-node-port {
         position: absolute;
         border-radius: 2px;
-        border: 1px solid #999;
+        border: 1px solid $node-border;;
         width: 6px;
         height: 7px;
         top:4px;
         left:-4px;
-        background: #eee;
+        background: $node-port-background;
         box-sizing: border-box;
     }
     .red-ui-search-result-node-output{
         left: 16px;
     }
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         width: 18px;
     }
-    .palette_icon {
+    .red-ui-palette-icon {
         width: 15px;
     }
     .red-ui-search-result-description {
         margin-left:28px;
     }
     .red-ui-search-result-node-label {
-        color: #999;
+        color: $secondary-text-color;
     }
 }
 
 .red-ui-search-container {
     padding: 3px;
+    background: $form-input-background;
     border-bottom: 1px solid $secondary-border-color;
 }
 .red-ui-search-results-container {
     position:relative;
     height: 300px;
     padding: 5px;
-    background: #f9f9f9;
+    background: $primary-background;
+    .red-ui-search-results-list {
 
+    }
     .red-ui-editableList-container {
-        background: white;
         padding: 0;
-        background: #f9f9f9;
+        background: $primary-background;
         li {
             padding: 0;
-            &.selected {
-                background: #efefef;
-                .red-ui-search-result {
-                    border-left-color:#999;
-                    border-right-color:#999;
-                }
-            }
         }
     }
 }
@@ -135,22 +121,28 @@
     padding: 8px 2px 8px 5px;
     display: block;
     cursor: pointer;
-    color: $form-text-color;
-    border-left: 3px solid #fff;
-    border-right: 3px solid #fff;
+    color: $list-item-color;
+    background: $list-item-background;
+    border-left: 3px solid $list-item-background;
+    border-right: 3px solid $list-item-background;
+    li.selected & {
+        background: $list-item-background-selected;
+        border-left-color: $list-item-border-selected;
+        border-right-color: $list-item-border-selected;
+    }
     &:hover {
         text-decoration: none;
         color: $form-text-color;
-        background: #efefef;
-        border-left-color:#efefef;
-        border-right-color:#efefef;
+        background: $list-item-background-hover;
+        border-left-color:$list-item-background-hover;
+        border-right-color:$list-item-background-hover;
     }
     &:after {
         content: "";
         display: table;
         clear: both;
     }
-    .palette_icon_fa {
+    .red-ui-palette-icon-fa {
         top: 6px;
         left: 3px;
     }
@@ -161,15 +153,14 @@
     width: 30px;
     float:left;
     height: 25px;
-    background: #ddd;
     border-radius: 5px;
-    border: 1px solid #999;
+    border: 1px solid $node-border;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
 
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         border-right: none;
     }
 
@@ -179,19 +170,22 @@
     margin-right: 5px;
 }
 .red-ui-search-result-node-label {
-    color: #222;
+    color: $primary-text-color;
 }
 .red-ui-search-result-node-type {
     font-style: italic;
     font-size: 0.9em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-result-node-flow {
     float:right;
     font-size: 0.8em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-result-node-id {
     display:none;
     font-size: 0.8em;
+    color: $tertiary-text-color;
 }
 .red-ui-search-empty {
     padding: 10px;

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

@@ -14,26 +14,25 @@
  * limitations under the License.
  **/
 
-#sidebar {
+#red-ui-sidebar {
     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 0px;
     width: 315px;
-    background: #fff;
+    background: $primary-background;
     box-sizing: border-box;
     z-index: 10;
     @include component-border;
 }
 
-#sidebar.closing {
-    background: #eee;
-    border-color: #900;
+#red-ui-sidebar.closing {
     border-style: dashed;
 }
 
-#sidebar-content {
+#red-ui-sidebar-content {
     position: absolute;
+    background: $secondary-background;
     top: 35px;
     right: 0;
     bottom: 25px;
@@ -41,23 +40,23 @@
     overflow-y: auto;
 }
 
-#sidebar-separator {
+#red-ui-sidebar-separator {
     position: absolute;
     top: 5px;
     right: 315px;
     bottom:10px;
     width: 7px;
     z-index: 11;
-    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
     cursor: col-resize;
 }
 
-.sidebar-closed > #sidebar { display: none; }
-.sidebar-closed > #sidebar-separator { right: 0px !important; }
-.sidebar-closed > #workspace { right: 7px !important; }
-.sidebar-closed > #editor-stack { right: 8px !important; }
+.red-ui-sidebar-closed > #red-ui-sidebar { display: none; }
+.red-ui-sidebar-closed > #red-ui-sidebar-separator { right: 0px !important; }
+.red-ui-sidebar-closed > #red-ui-workspace { right: 7px !important; }
+.red-ui-sidebar-closed > #red-ui-editor-stack { right: 8px !important; }
 
-#sidebar .button {
+#red-ui-sidebar .button {
     @include workspace-button;
     line-height: 18px;
     font-size: 12px;
@@ -65,67 +64,79 @@
     padding: 2px 8px;
 }
 
-.sidebar-header {
-    color: #666;
+.sidebar-header, /* Deprecated -> red-ui-sidebar-header */
+.red-ui-sidebar-header {
+    color: $primary-text-color;
     text-align: right;
     padding: 8px 10px;
-    background: #f3f3f3;
+    background: $primary-background;
     border-bottom: 1px solid $secondary-border-color;
     white-space: nowrap;
 }
 
-#sidebar-footer {
-    @include component-footer;
-}
-
+/* Deprecated -> red-ui-footer-button */
 .sidebar-footer-button {
     @include component-footer-button;
 }
+/* Deprecated -> red-ui-footer-button-toggle */
 .sidebar-footer-button-toggle {
     @include component-footer-button-toggle;
 }
-.sidebar-header-button {
+
+a.sidebar-header-button,
+button.sidebar-header-button, /* Deprecated -> red-ui-sidebar-header-button */
+a.red-ui-sidebar-header-button,
+button.red-ui-sidebar-header-button {
     @include workspace-button;
     font-size: 13px;
     line-height: 13px;
     padding: 5px 8px;
+    &.toggle {
+        @include workspace-button-toggle;
+    }
 }
-.sidebar-header-button-toggle {
+
+a.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */
+button.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */
+a.red-ui-sidebar-header-button-toggle,
+button.red-ui-sidebar-header-button-toggle {
     @include workspace-button-toggle;
     font-size: 13px;
     line-height: 13px;
     padding: 5px 8px;
 }
-.sidebar-header-button:not(:first-child) {
+
+.sidebar-header-button:not(:first-child), /* Deprecated -> red-ui-sidebar-header-button */
+.red-ui-sidebar-header-button:not(:first-child) {
     border-left: none;
 }
 
-.sidebar-shade {
+.red-ui-sidebar-shade {
     @include shade;
 }
 
 
-@mixin sidebar-control {
+@mixin red-ui-sidebar-control {
     display: none;
     position: absolute;
     top: calc(50% - 26px);
 
     padding:15px 8px;
-    border:1px solid #ccc;
-    background:#f9f9f9;
-    color: #999;
+    border:1px solid $primary-border-color;
+    background:$primary-background;
+    color: $secondary-text-color;
     text-align: center;
     cursor: pointer;
 }
 
-.sidebar-control-right {
-    @include sidebar-control;
+.red-ui-sidebar-control-right {
+    @include red-ui-sidebar-control;
     right: calc(100%);
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
 }
-.sidebar-control-left {
-    @include sidebar-control;
+.red-ui-sidebar-control-left {
+    @include red-ui-sidebar-control;
     left: calc(100%);
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;

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

@@ -1,26 +1,26 @@
 /**
- * Copyright JS Foundation and other contributors, http://js.foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- **/
+* Copyright JS Foundation and other contributors, http://js.foundation
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**/
 
 @import "colors";
 @import "mixins";
 
+@import "base";
 @import "forms";
 
 @import "jquery";
-@import "bootstrap";
 @import "ace";
 
 @import "dropdownMenu";
@@ -65,87 +65,3 @@
 @import "keyboard";
 
 @import "debug";
-
-body {
-    font-size: 14px;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
-    padding-top: 100px;
-    background: $background-color;
-    color: #333333;
-}
-
-#main-container {
-    position: absolute;
-    top:40px; left:0; bottom: 0; right:0;
-    overflow:hidden;
-}
-
-i.spinner {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    line-height: 14px;
-    vertical-align: text-top;
-    margin-top: 0px;
-    background: url(images/spin.svg) no-repeat 50% 50%;
-    background-size: contain
-}
-
-code, pre {
-  padding: 0 3px 2px;
-  font-family: monospace;
-  font-size: 14px;
-  color: #333333;
-  border-radius: 1px;
-}
-
-code {
-  padding: 0px 3px 2px 3px;
-  margin: 1px;
-  color: #AD1625;
-  white-space: nowrap;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
-  border-radius: 2px;
-}
-
-pre {
-  display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
-  line-height: 20px;
-  word-break: break-all;
-  word-wrap: break-word;
-  white-space: pre;
-  white-space: pre-wrap;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
-}
-
-pre code {
-  padding: 0;
-  color: inherit;
-  white-space: pre;
-  white-space: pre-wrap;
-  background-color: transparent;
-  border: 0;
-}
-
-.hide {
-    display: none;
-}
-
-blockquote {
-    padding: 0 0 0 15px;
-    margin: 0 0 20px;
-    border-left: 4px solid #ddd;
-
-    p {
-        font-size: 14px;
-        font-weight: inherit;
-        line-height: 1.25;
-        color: #777;
-    }
-}

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

@@ -14,25 +14,39 @@
  * limitations under the License.
  **/
 
-.sidebar-node-config {
+.red-ui-sidebar-node-config {
     position: relative;
-    background: #f3f3f3;
+    background: $secondary-background;
     height: 100%;
     overflow-y:auto;
     @include disable-selection;
 }
 
-.config-node-list {
+ul.red-ui-sidebar-node-config-list {
     margin: 0;
+    padding: 0;
     list-style-type: none;
-    .palette_node {
+    li {
+        padding: 0;
+        margin: 0;
+        text-align: center;
+    }
+    .red-ui-palette-node {
         overflow: hidden;
+
         &.selected {
+            margin: 4px auto;
             border-color: $node-selected-color;
-            background-color: #eee;
+            border-width: 2px;
+            &:first-child {
+                margin-top: 9px;
+            }
+            &:last-child {
+                margin-bottom: 9px;
+            }
         }
     }
-    .palette_label {
+    .red-ui-palette-label {
         margin-left: 8px;
         line-height: 24px;
         text-align: left;
@@ -40,10 +54,10 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
-    .palette_icon_container {
+    .red-ui-palette-icon-container {
         font-size: 12px;
         line-height: 30px;
-        background-color: #e8e8e8;
+        background-color: $secondary-background-selected;
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
         a {
@@ -52,41 +66,41 @@
             bottom: 0;
             left: 0;
             right: 0;
-            color: #666;
+            color: $secondary-text-color;
             &:hover {
                 text-decoration: none;
-                background: #ccc;
+                background: $secondary-background-hover;
             }
         }
     }
 }
-.config_node {
+.red-ui-palette-node-config {
     width: 160px;
     height: 30px;
-    background: #f3f3f3;
-    color: #666;
+    background: $primary-background;
+    color: $primary-text-color;
     cursor: pointer;
 }
-.config_node_type {
-    color: #999;
+ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
+    color: $secondary-text-color;
     text-align: right;
     padding-right: 3px;
     &:not(:first-child) {
         margin-top: 20px;
     }
 }
-.config_node_none {
-    color: #ddd;
+.red-ui-palette-node-config-none {
+    color: $tertiary-text-color;
     text-align:right;
     padding-right: 3px;
 }
-.config_node_unused {
-    border-color: #aaa;
-    background: #f9f9f9;
+.red-ui-palette-node-config-unused {
+    border-color: $primary-border-color;
+    background: $secondary-background-inactive;
     border-style: dashed;
-    color: #aaa;
+    color: $tertiary-text-color;
 }
-.config-node-filter-info {
+.red-ui-sidebar-node-config-filter-info {
     position: absolute;
     top: 0;
     right:0;
@@ -95,6 +109,6 @@
     padding: 0 8px;
     background: $palette-header-background;
     font-size: 0.8em;
-    color: #999;
+    color: $secondary-text-color;
     font-weight: normal;
 }

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

@@ -14,41 +14,41 @@
  * limitations under the License.
  **/
 
-.sidebar-context-stack {
+.red-ui-sidebar-context-stack {
     position: absolute;
-    top: 0;
+    top: 42px;
     bottom: 0;
     left: 0;
     right: 0;
     overflow-y: scroll;
 
-    .palette-category {
-        &:not(.palette-category-expanded) button {
+    .red-ui-palette-category {
+        &:not(.expanded) button {
             display: none;
         }
     }
 }
 
-.sidebar-context-property {
+.red-ui-sidebar-context-property {
     position: relative;
-    .debug-message-tools {
+    .red-ui-debug-msg-tools {
         right: 0px;
         margin-right: 5px;
         display: none;
     }
-    &:hover .debug-message-tools {
+    &:hover .red-ui-debug-msg-tools {
         display: inline-block;
     }
 }
-.sidebar-context-updated {
+.red-ui-sidebar-context-updated {
     text-align: right;
     font-size: 11px;
-    color: #bbb;
+    color: $tertiary-text-color;
     padding: 1px 3px;
 }
-.sidebar-context-property-storename {
+.red-ui-sidebar-context-property-storename {
     display: block;
     font-size: 0.8em;
     font-style: italic;
-    color: #aaa;
+    color: $tertiary-text-color;
 }

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) {
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+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,12 +35,12 @@ table.node-info tr:not(.blank) {
     }
 
 }
-table.node-info tr.blank {
+table.red-ui-info-table tr.blank {
     border: none;
     th {
         text-align: left;
         font-weight: 500;
-        color: #444;
+        color: $primary-text-color;
         padding: 6px 3px 3px;
     }
     >* {
@@ -52,16 +52,16 @@ table.node-info tr.blank {
 
     a {
         display: block;
-        color: #666;
+        color: $primary-text-color;
         &:hover,&:focus {
-            color: #666;
+            color: $primary-text-color;
             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,33 +83,43 @@ 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: #aaa;
+    color: $tertiary-text-color;
 }
-table.node-info tr:not(.blank) td:first-child{
-    color: #444;
+table.red-ui-info-table tr:not(.blank) td:first-child{
+    color: $header-text-color;
     vertical-align: top;
     width: 90px;
     padding: 3px 3px 3px 6px;
-    background:#f9f9f9;
-    border-right: 1px solid #ddd;
+    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: #666;
+    color: $primary-text-color;
     overflow-y: hidden;
 }
-div.node-info {
+div.red-ui-info-table {
     margin: 5px;
 }
-.node-help {
-    font-size: 14px;
+.red-ui-help {
+    font-size: $primary-font-size;
     line-height: 1.5em;
+
+    a {
+        color: $info-text-link-color;
+        text-decoration: none;
+    }
+
+    a:hover,
+    a:focus {
+        color: $info-text-link-color;
+        text-decoration: underline;
+    }
+
+
     h1 {
         font-weight: 500;
         font-size: 1.296em;
@@ -138,24 +148,24 @@ div.node-info {
     & > span > p:first-child {
     }
     dl.message-properties {
-        border: 1px solid #ddd;
+        border: 1px solid $secondary-border-color;
         border-radius: 2px;
 
         margin: 5px auto 10px;
         &>dt {
             padding: 0px 3px 2px 3px;
-            font-family: monospace;
+            font-family: $monospace-font;
             font-weight: normal;
             margin: 5px 3px 1px;
-            color: #AD1625;
+            color: $text-color-warning;
             white-space: nowrap;
             &.optional {
                 font-style: italic;
 
             }
             .property-type {
-                font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
-                color: #666;
+                font-family: $primary-font;
+                color: $primary-text-color;
                 font-style: italic;
                 font-size: 11px;
                 float: right;
@@ -174,7 +184,7 @@ div.node-info {
     ol.node-ports {
         margin: 0;
         li {
-            border: 1px solid #ddd;
+            border: 1px solid $secondary-border-color;
             border-radius: 2px;
             list-style-position: inside;
             padding: 3px;
@@ -184,14 +194,14 @@ div.node-info {
             }
         }
     }
-    .node-info-header {
+    .red-ui-help-info-header {
         i {
             width: 10px;
             text-align: center;
             transition: transform 0.2s ease-in-out;
             margin-right: 4px;
         }
-        color: #333;
+        color: $header-text-color;
         &:hover, &:focus {
             text-decoration: none;
         }
@@ -203,7 +213,7 @@ div.node-info {
     }
 
 }
-.sidebar-node-info-stack {
+.red-ui-sidebar-info-stack {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -211,7 +221,7 @@ div.node-info {
     right: 0;
     overflow-y: scroll;
 }
-.node-info-tips {
+.red-ui-help-tips {
     display: none;
     position: absolute;
     left:0;
@@ -220,21 +230,21 @@ div.node-info {
     height: 150px;
     box-sizing: border-box;
     border-top: 1px solid $secondary-border-color;
-    background-color: #fff;
+    background-color: $secondary-background;
     padding: 20px;
-    box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.3);
+    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;
     }
-    .node-info-tips {
+    .red-ui-help-tips {
         display: block;
     }
 }
 
-.node-info-tips:before {
+.red-ui-help-tips:before {
   content: '';
   display: inline-block;
   height: 100%;
@@ -242,30 +252,30 @@ 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%;
     font-size: 16px;
     text-align: center;
     line-height: 1.9em;
-    color : #bbb;
+    color : $tertiary-text-color;
     @include disable-selection;
     cursor: default;
 }
-.node-info-tips-buttons {
+.red-ui-help-tips-buttons {
     position: absolute;
     top: 4px;
     right: 6px;
     a {
-        color: #ddd !important;
-        border-color: #d9d9d9 !important;
+        color: $secondary-text-color;
+        border-color: $secondary-border-color !important;
         margin-left: 4px;
     }
 }
 
 .node-info-property-config-node {
-    border: 1px solid #eee;
+    border: 1px solid $secondary-border-color;
     border-radius: 4px;
     padding: 2px 4px 2px;
 }

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

@@ -16,7 +16,7 @@
 
 .red-ui-tabs {
     position: relative;
-    background: #fff;
+    background: $tab-background;
     overflow: hidden;
     height: 35px;
     box-sizing: border-box;
@@ -30,7 +30,6 @@
         }
     }
     & ul {
-        //background: #9999ff;
         list-style-type: none;
         padding:0;
         margin: 0;
@@ -71,7 +70,7 @@
                 padding-left: 12px;
                 width: 100%;
                 height: 100%;
-                color: #666;
+                color: $tab-text-color-inactive;
             }
             a:hover {
                 text-decoration: none;
@@ -86,14 +85,14 @@
             &.active {
                 background: $tab-background-active;
                 font-weight: bold;
-                border-bottom: 1px solid #fff;
+                border-bottom: 1px solid $tab-background-active;
                 z-index: 2;
 
                 a {
-                    color: #333;
+                    color: $tab-text-color-active;
                 }
                 a.red-ui-tab-close {
-                    color: #aaa;
+                    color: $workspace-button-color;
                     background: $tab-background-active;
                     &:hover {
                         background: $workspace-button-background-hover !important;
@@ -111,7 +110,7 @@
                 font-weight: bold;
                 .red-ui-tabs-badge-selected {
                     display: inline;
-                    background: white;
+                    background: $tab-background;
                 }
                 .red-ui-tabs-badge-changed {
                     display: none;
@@ -159,7 +158,7 @@
         height: 100%;
         border-right: 1px solid $primary-border-color;
         margin: 0;
-        background: #f3f3f3;
+        background: $tertiary-background;
         overflow: visible;
 
         .red-ui-tabs-scroll-container {
@@ -181,10 +180,10 @@
                 border-right: 1px solid $primary-border-color;
                 height: auto;
                 &:not(:first-child) {
-                    border-top: 1px solid  $secondary-border-color;
+                    border-top: 1px solid $secondary-border-color;
                 }
                 &:last-child {
-                    border-bottom: 1px solid  $secondary-border-color;
+                    border-bottom: 1px solid $secondary-border-color;
                 }
 
                 a.red-ui-tab-label {
@@ -192,7 +191,7 @@
                 }
 
                 &.active {
-                    border-right: 1px solid #fff;
+                    border-right: 1px solid $tab-background-active;
                 }
             }
         }
@@ -213,7 +212,7 @@
     top: 0;
     right: 0;
     height: 35px;
-    background: #fff;
+    background: $tab-background;
     border-bottom: 1px solid $primary-border-color;
     z-index: 2;
 
@@ -235,7 +234,7 @@
     top: 0;
     right: 0;
     height: 35px;
-    background: #fff;
+    background: $tab-background;
     border-bottom: 1px solid $primary-border-color;
     z-index: 2;
     a {
@@ -245,13 +244,11 @@
         width: 28px;
         margin: 4px 3px 3px;
         z-index: 2;
-        &.red-ui-tab-link-button {
-            &:not(.active) {
-                background: #eee;
-            }
-        }
         &.red-ui-tab-link-button-menu {
-            border-color: white;
+            border-color: $tab-background;
+        }
+        &:not(.single):not(.selected) {
+            margin-top: 4px;
         }
     }
 }
@@ -262,7 +259,7 @@
         height: 35px;
         width: 21px;
         display: block;
-        color: $link-color;
+        color: $workspace-button-color;
         font-size: 22px;
         text-align: center;
         margin:0;
@@ -275,14 +272,12 @@
     left:0;
     a {
         border-right: 1px solid $primary-border-color;
-        // box-shadow: 8px 0px 5px -2px rgba(0,0,0,0.1);
     }
 }
 .red-ui-tab-scroll-right {
     right: 0px;
     a {
         border-left: 1px solid $primary-border-color;
-        // box-shadow: -8px 0px 5px -2px rgba(0,0,0,0.1);
     }
 
 }
@@ -324,7 +319,7 @@ i.red-ui-tab-icon {
     line-height: 28px;
     text-align: center;
     padding:0px;
-    color: #aaa;
+    color: $tab-badge-color;
 }
 
 .red-ui-tabs-badges i {
@@ -358,9 +353,10 @@ i.red-ui-tab-icon {
     line-height: 28px;
     text-align: center;
     padding: 0px;
-    color: #aaa;
+    color: $workspace-button-color;
     &:hover {
         background: $workspace-button-background-hover !important;
+        color: $workspace-button-color-hover;
         opacity: 1;
     }
 }

packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss

@@ -16,7 +16,7 @@
 .red-ui-checkboxSet {
     width: 15px;
     display: inline-block;
-    color: #888;
+    color: $secondary-text-color;
     cursor: pointer;
     input {
         display:none;
@@ -24,6 +24,6 @@
 
     &.disabled {
         pointer-events: none;
-        color: #ddd;
+        color: $secondary-text-color-disabled;
     }
 }