Update changelog

update packages\node_modules\@node-red\runtime\lib\index.js

.github/ISSUE_TEMPLATE/--bug_report.md

@@ -0,0 +1,39 @@
+---
+name: Bug report
+about: Reproducable software issues in the core of Node-RED
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+<!--
+This issue tracker is for problems with the Node-RED runtime, the editor or the core nodes.
+
+If your issue is:
+  - a general 'how-to' type question,
+  - a feature request or suggestion for a change,
+  - or problems with 3rd party (`node-red-contrib-`) nodes
+
+please use the [Node-RED Forum](https://discourse.nodered.org) or [slack team](https://nodered.org/slack).
+
+You could also consider asking a question on [Stack Overflow](https://stackoverflow.com/questions/tagged/node-red) and tag it `node-red`.
+
+That way the whole Node-RED user community can help, rather than rely on the core development team.
+
+To help us understand the issue, please fill-in as much of the following information as you can:
+-->
+
+### What are the steps to reproduce?
+
+### What happens?
+
+### What do you expect to happen?
+
+### Please tell us about your environment:
+
+- [ ] Node-RED version:
+- [ ] node.js version:
+- [ ] npm version:
+- [ ] Platform/OS:
+- [ ] Browser:

.github/ISSUE_TEMPLATE/-anything-else.md

@@ -0,0 +1,14 @@
+---
+name: Anything Else
+about: Something that is not a bug report
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+Please use the [Node-RED Forum](https://discourse.nodered.org) or [slack team](https://nodered.org/slack).
+
+You could also consider asking a question on [Stack Overflow](https://stackoverflow.com/questions/tagged/node-red) and tag it `node-red`.
+
+That way the whole Node-RED user community can help, rather than rely on the core development team.

.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"

API.md

@@ -0,0 +1,15 @@
+Node-RED Modules
+---
+
+Node-RED provides a set of node modules that implement different parts of the
+application.
+
+Module | Description
+-------|-------
+[node-red](node-red.html) | the main module that pulls together all of the internal modules and provides the executable version of Node-RED
+[@node-red/editor-api](@node-red_editor-api.html) | an Express application that serves the Node-RED editor and provides the Admin HTTP API
+[@node-red/runtime](@node-red_runtime.html) | the core runtime of Node-RED
+[@node-red/util](@node-red_util.html) | common utilities for the Node-RED runtime and editor modules
+@node-red/registry | the internal node registry
+@node-red/nodes | the default set of core nodes
+@node-red/editor-client | the client-side resources of the Node-RED editor application

CHANGELOG.md

@@ -1,3 +1,239 @@
+#### 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
+
+#### 0.20.4: Maintenance Release
+
+- Switch media-typer to content-type module Fixes #2122 #2123
+- Use userObj.username and not .name for ssh key lookup Closes #2109
+- Ensure mqtt message handlers are tidied up properly on partial deploy
+- Update package dependencies
+- Fix encoding menu in file node #2125
+- Update ACE to 1.4.3-src-min-noconflict Fixes #2106
+- Fix creating missing package.json when existing project imported Fixes #2115
+- Allow subflow instance to override env var with falsey values Fixes #2113
+- Prevent wire from normal node to link virtual port Fixes #2114
+- Add explanation to the help text on the new feature to build query string from msg.payload #2116
+- Bump bcrypt to latest
+- Add Korean locales files for nodes #2100
+- Add error message if catalog is invalid json
+- Reduce udp out timeout to be less than default inject at start #2127
+
+#### 0.20.3: Maintenance Release
+
+- Do not dynamically add/remove upgrade listener in ws nodes
+- Avoid env var reference loops and support $parent. prefix Fixes #2099
+- Ensure config.\_flow is non-enumerable so is ignored by JSON.stringify
+- Block loading ACE from cdn
+
+#### 0.20.2: Maintenance Release
+
+ - Filter out duplicate nodes when importing a flow
+ - Handle node configs with multiple external scripts properly
+
+#### 0.20.1: Maintenance Release
+
+ - Ensure all subflow instances are stopped when flow stopping Fixes #2095
+ - modify name of korean locale forders #2091
+ - Ensure node names are sanitized before being presented
+ - Subflow status node must pass status to parent flow Fixes #2087
+ - fix problem on displaying option label on Firefox #2090
+
+#### 0.20.0: Milestone Release
+
+Runtime
+ - Pass complete status to Status node and filter to editor
+ - Ensure flows wait for all nodes to close before restarting Fixes #2067
+ - Fix git clone with password protected key
+ - Allow a project to be located below the root of repo
+ - Detect the cloning of an empty git repo properly
+ - Fix use of custom auth strategy plugins
+ - Remove remnants of when library in git/index Fixes #2057
+ - Clear subflow status on close
+ - Add exportGlobalContextKeys to prevent exposing functionGlobalContext keys
+ - Add --no-audit and --no-update-notifier flags to npm commands to reduce workload
+ - Add envVarExcludes setting to block named env vars
+ - Update settings.js docs on userDir to match reality Fixes #2082
+ - Add Korean Language
+
+
+Editor
+ - Automatic placing of node icon according to input/output counts
+ - Transfer placeholder and type to generated TypedInput field
+ - Hitting enter in Comment node name field clicks markdown button
+ - Shift status text left if no shape specified
+ - Better align node status text to status dot
+ - Handle treeList labels as text not html
+ - Change subflow edit dialog titles
+ - Resize subflow edit dialog properly
+ - Add flow list button to tab bar
+ - Handle node name as unsanitized text in debug sidebar
+
+Nodes
+
+ - HTTP Request: Add Digest and Bearer Auth modes to http request node (#2061)
+ - HTTP Request: Add multipart/form-data support to http request node (#2076)
+ - TCP: include session/event info in status events
+ - WebSocket: include session/event info in status events
+ - Add i18n support for port label of inject/exec/httprequest/file nodes
+ - Join node: handle merged objects with repeated properties and honour parts
+ - JSON node: handle single booleans and numbers
+ - File node: add encoding support to file in/out node (#2066)
+
+#### 0.20.0-beta.5: Beta Release
+
+Runtime
+
+ - Bump dependencies
+ - Allow `$parent` access of flow context
+ - Make Node.\_flow a writeable property
+ - Do not propagate Flow.getNode to parent when called from outside flow
+ - Add support of subflow env var
+
+Editor
+
+ - Properly sanitize node names in deploy warning dialogs
+ - Fix XSS issues in library ui code
+ - Add env type to subflow env var types
+ - Display parent subflow properties in edit dialog
+ - Fix direction value of subflow output
+ - Add Status Node to Subflow to allow subflow-specific status Closes #597
+ - Better handling of multiple flow merges Fixes #2039
+
+Nodes
+
+ - Various translation updates
+ - Catch: Add 'catch uncaught only' mode. Closes #1747
+ - Link: scroll to current flow in node list
+ - HTTPRequest: add option to urlencode cookies
+ - HTTPRequest: option to use msg.payload as query params on GET. #1981
+ - Debug: Add local time display option to numerics in debug window
+ - MQTT: Add parsed JSON output option
+
+#### 0.20.0-beta.4: Beta Release
+
+Runtime
+
+ - Bump JSONata to 1.6.4
+ - Add Flow.getSetting for resolving env-var properties
+ - Refactor Subflow logic into own class
+ - Restore RED.auth to node-red module api
+ - Tidy up when usage in Flow and Node
+
+Editor
+
+ - German translation
+ - Change default dropdown appearance and sidebar tab menu handling
+ - Handle multiple-select box when nothing selected Fixes #2021
+ - Handle i18n properly when key is a valid sub-identifier Fixes #2028
+ - Avoid duplicate links when missing node type installed Fixes #2032
+ - Add View Tools
+ - Don't collapse version control header when clicking refresh
+ - Add fast entry via keyboard for string of nodes
+ - Check for undeployed change before showing open project dialog
+ - Add placeholder node when in quick-add mode
+ - Move nodes to top-left corner when converting to subflow
+
+Nodes
+
+ - Debug: Allow debug edit expression to be sent to status
+ - WebSocket: Fix missing translated help
+
+
+#### 0.20.0-beta.3: Beta Release
+
+Editor
+
+ - Update palette manager view properly when module updated
+ - Add TreeList common widget
+ - Fix visual jump when opening Comment editor on Safari Part of #2008
+ - Fix vertical align of markdown editor in Safari Fixes #2008
+ - Avoid marking node as changed if label state is default Fixes #2009
+ - Highlight port on node hover while joining
+ - Support drag-wiring of link nodes
+ - Allow TypeSearch to include a filter option
+ - Improve diff colouring
+ - Allow sections to toggle in 2-element stack
+ - Add support for ${} env var syntax when skipping validation Closes #1980
+ - i18 support for markdown editor tooltip
+ - Add RED.editor.registerTypeEditor for custom type editors
+ - Tidy up markdown toolbar handling across all editors
+ - Added validation while export into library
+ - Reuse notification boxes rather than stack multiple of the same type
+ - Make ssh key dialog accessible when opened from new proj dialog
+
+Runtime
+
+ - Bump JSONata to 1.6.4 Fixes #2023
+ - Add audit logging to admin api
+ - Fix failure of RED.require #2010
+ - Allow oauth strategy callback method to be customised Closes #1998
+ - Ensure fs context cache is flushed on close Fixes #2001
+ - Fix library Buffer( to Buffer.alloc( for node 10
+ - Catch file-not-found on startup when non-existant flow file specified
+ - Actively expire login sesssions and notify user
+ - Add quotation marks for basic auth challenge #1976
+
+Nodes
+
+ - Change: remove promises to improve performance
+ - Debug: add ability to apply JSONata expression to message
+ - Join: remove promises to improve performance
+ - JSON: delete msg.schema before sending msg to avoid conflicts
+ - Link: update UI to use common TreeList widget
+ - Switch: remove promises to improve performance
+
 #### 0.20.0-beta.2: Beta Release
 
  - Split Node-RED internals into multiple sub-modules
@@ -91,6 +327,9 @@ Nodes
  - Watch: add msg.filename so can feed direct to file in node
  - WebSocket: preserve \_session on msg but don't send as part of wholemsg
 
+#### 0.19.6: Maintenance Release
+
+ - Fix encoding of file node from binary to utf8 - #2051
 
 #### 0.19.5: Maintenance Release
 

Gruntfile.js

@@ -15,6 +15,7 @@
  **/
 
 var path = require("path");
+var fs = require("fs-extra");
 
 module.exports = function(grunt) {
 
@@ -144,13 +145,16 @@ 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",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/palette.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js",
@@ -179,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"
@@ -220,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'
                 }]
             }
         },
@@ -350,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,
@@ -436,18 +434,21 @@ module.exports = function(grunt) {
         jsdoc : {
             modules: {
                 src: [
+                    'API.md',
                     'packages/node_modules/node-red/lib/red.js',
                     'packages/node_modules/@node-red/runtime/lib/index.js',
                     'packages/node_modules/@node-red/runtime/lib/api/*.js',
                     'packages/node_modules/@node-red/runtime/lib/events.js',
                     'packages/node_modules/@node-red/util/**/*.js',
-                    ],
+                    'packages/node_modules/@node-red/editor-api/lib/index.js',
+                    'packages/node_modules/@node-red/editor-api/lib/auth/index.js'
+                ],
                 options: {
                     destination: 'docs',
                     configure: './jsdoc.json'
                 }
             },
-            editor: {
+            _editor: {
                 src: [
                     'packages/node_modules/@node-red/editor-client/src/js'
                     ],
@@ -552,6 +553,13 @@ module.exports = function(grunt) {
         });
     });
 
+    grunt.registerTask('verifyUiTestDependencies', function() {
+        if (!fs.existsSync(path.join("node_modules", "chromedriver"))) {
+            grunt.fail.fatal('You need to run "npm install chromedriver@2" before running UI test.');
+            return false;
+        }
+    });
+
     grunt.registerTask('setDevEnv',
         'Sets NODE_ENV=development so non-minified assets are used',
             function () {
@@ -572,7 +580,7 @@ module.exports = function(grunt) {
 
     grunt.registerTask('test-ui',
         'Builds editor content then runs unit tests on editor ui',
-        ['build','jshint:editor','webdriver:all']);
+        ['verifyUiTestDependencies','build','jshint:editor','webdriver:all']);
 
     grunt.registerTask('test-nodes',
         'Runs unit tests on core nodes',
@@ -601,5 +609,5 @@ module.exports = function(grunt) {
 
     grunt.registerTask('docs',
         'Generates API documentation',
-        ['jsdoc','jsdoc2md']);
+        ['jsdoc']);
 };

jsdoc.json

@@ -15,7 +15,6 @@
     },
     "templates": {
         "systemName": "Node-RED Runtime API",
-        "theme":"yeti",
         "footer": "",
         "copyright": "Released under the Apache License v2.0",
         "default": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "0.20.0-beta.2",
+    "version": "1.0.0-beta.2",
     "description": "A visual tool for wiring the Internet of Things",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -24,61 +24,59 @@
         }
     ],
     "dependencies": {
-        "ajv": "6.6.1",
+        "ajv": "6.10.0",
         "basic-auth": "2.0.1",
         "bcryptjs": "2.4.3",
-        "body-parser": "1.18.3",
+        "body-parser": "1.19.0",
         "cheerio": "0.22.0",
         "clone": "2.1.2",
-        "cookie": "0.3.1",
-        "cookie-parser": "1.4.3",
+        "content-type": "1.0.4",
+        "cookie": "0.4.0",
+        "cookie-parser": "1.4.4",
         "cors": "2.8.5",
-        "cron": "1.5.1",
-        "denque": "1.4.0",
-        "express": "4.16.4",
-        "express-session": "1.15.6",
-        "fs-extra": "7.0.1",
+        "cron": "1.7.1",
+        "denque": "1.4.1",
+        "express": "4.17.0",
+        "express-session": "1.16.1",
+        "fs-extra": "8.0.1",
         "fs.notify": "0.0.4",
         "hash-sum": "1.0.2",
         "https-proxy-agent": "2.2.1",
-        "i18next": "12.1.0",
+        "i18next": "15.1.2",
+        "iconv-lite": "0.4.24",
         "is-utf8": "0.2.1",
-        "js-yaml": "3.12.0",
+        "js-yaml": "3.13.1",
         "json-stringify-safe": "5.0.1",
-        "jsonata": "1.5.4",
-        "media-typer": "1.0.1",
-        "memorystore": "1.6.0",
-        "micromatch": "3.1.10",
-        "mime": "2.4.0",
+        "jsonata": "1.6.4",
+        "memorystore": "1.6.1",
+        "mime": "2.4.3",
         "mqtt": "2.18.8",
         "multer": "1.4.1",
         "mustache": "3.0.1",
-        "node-red-node-email": "1.0.*",
+        "node-red-node-email": "^1.4.0",
         "node-red-node-feedparser": "^0.1.14",
-        "node-red-node-rbe": "0.2.*",
-        "node-red-node-sentiment": "^0.1.0",
-        "node-red-node-tail": "^0.0.1",
-        "node-red-node-twitter": "^1.1.0",
+        "node-red-node-rbe": "^0.2.4",
+        "node-red-node-sentiment": "^0.1.3",
+        "node-red-node-tail": "^0.0.2",
+        "node-red-node-twitter": "^1.1.4",
         "nopt": "4.0.1",
         "oauth2orize": "1.11.0",
-        "on-headers": "1.0.1",
+        "on-headers": "1.0.2",
         "passport": "0.4.0",
         "passport-http-bearer": "1.0.1",
         "passport-oauth2-client-password": "0.1.2",
-        "raw-body": "2.3.3",
+        "raw-body": "2.4.0",
         "request": "2.88.0",
-        "semver": "5.6.0",
-        "sentiment": "2.1.0",
-        "uglify-js": "3.4.9",
+        "semver": "6.0.0",
+        "uglify-js": "3.5.15",
         "when": "3.7.8",
-        "ws": "1.1.5",
+        "ws": "6.2.1",
         "xml2js": "0.4.19"
     },
     "optionalDependencies": {
-        "bcrypt": "~2.0.0"
+        "bcrypt": "3.0.6"
     },
     "devDependencies": {
-        "chromedriver": "2.43.1",
         "grunt": "~1.0.3",
         "grunt-chmod": "~1.1.1",
         "grunt-cli": "~1.3.2",
@@ -108,12 +106,12 @@
         "should": "^8.4.0",
         "sinon": "1.17.7",
         "stoppable": "^1.1.0",
-        "supertest": "3.3.0",
+        "supertest": "3.4.2",
         "wdio-chromedriver-service": "^0.1.5",
         "wdio-mocha-framework": "^0.6.4",
         "wdio-spec-reporter": "^0.1.5",
         "webdriverio": "^4.14.1",
-        "node-red-node-test-helper": "node-red/node-red-node-test-helper",
+        "node-red-node-test-helper": "^0.2.2",
         "jsdoc-nr-template": "node-red/jsdoc-nr-template"
     },
     "engines": {

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

@@ -14,6 +14,11 @@
  * limitations under the License.
  **/
 
+
+/**
+ * @mixin @node-red/editor-api_auth
+ */
+
 var passport = require("passport");
 var oauth2orize = require("oauth2orize");
 
@@ -44,7 +49,14 @@ function init(_settings,storage) {
         Tokens.init(mergedAdminAuth,storage);
     }
 }
-
+/**
+ * Returns an Express middleware function that ensures the user making a request
+ * has the necessary permission.
+ *
+ * @param {String} permission - the permission required for the request, such as `flows.write`
+ * @return {Function} - an Express middleware
+ * @memberof @node-red/editor-api_auth
+ */
 function needsPermission(permission) {
     return function(req,res,next) {
         if (settings && settings.adminAuth) {
@@ -187,7 +199,7 @@ function genericStrategy(adminApp,strategy) {
     if (/^post$/i.test(options.callbackMethod)) {
         callbackMethodFunc = adminApp.post;
     }
-    callbackMethodFunc('/auth/strategy/callback',
+    callbackMethodFunc.call(adminApp,'/auth/strategy/callback',
         passport.authenticate(strategy.name, {session:false, failureRedirect: settings.httpAdminRoot }),
         completeGenerateStrategyAuth
     );

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

@@ -15,6 +15,7 @@
  **/
 
 var ws = require("ws");
+var url = require("url");
 
 var log = require("@node-red/util").log; // TODO: separate module
 var Tokens;
@@ -187,27 +188,27 @@ function start() {
         Users.default().then(function(_anonymousUser) {
             anonymousUser = _anonymousUser;
             var webSocketKeepAliveTime = settings.webSocketKeepAliveTime || 15000;
-            var path = settings.httpAdminRoot || "/";
-            path = (path.slice(0,1) != "/" ? "/":"") + path + (path.slice(-1) == "/" ? "":"/") + "comms";
-            wsServer = new ws.Server({
-                server:server,
-                path:path,
-                // Disable the deflate option due to this issue
-                //  https://github.com/websockets/ws/pull/632
-                // that is fixed in the 1.x release of the ws module
-                // that we cannot currently pickup as it drops node 0.10 support
-                //perMessageDeflate: false
-            });
-
+            var commsPath = settings.httpAdminRoot || "/";
+            commsPath = (commsPath.slice(0,1) != "/" ? "/":"") + commsPath + (commsPath.slice(-1) == "/" ? "":"/") + "comms";
+            wsServer = new ws.Server({ noServer: true });
             wsServer.on('connection',function(ws) {
                 var commsConnection = new CommsConnection(ws);
             });
-
-
             wsServer.on('error', function(err) {
                 log.warn(log._("comms.error-server",{message:err.toString()}));
             });
 
+            server.on('upgrade', function upgrade(request, socket, head) {
+                const pathname = url.parse(request.url).pathname;
+                if (pathname === commsPath) {
+                    wsServer.handleUpgrade(request, socket, head, function done(ws) {
+                        wsServer.emit('connection', ws, request);
+                    });
+                }
+                // Don't destroy the socket as other listeners may want to handle the
+                // event.
+            });
+
             lastSentTime = Date.now();
 
             heartbeatTimer = setInterval(function() {

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/lib/index.js

@@ -14,6 +14,16 @@
  * limitations under the License.
  **/
 
+
+ /**
+  * This module provides an Express application to serve the Node-RED editor.
+  *
+  * It implements the Node-RED HTTP Admin API the Editor uses to interact
+  * with the Node-RED runtime.
+  *
+  * @namespace @node-red/editor-api
+  */
+
 var express = require("express");
 var bodyParser = require("body-parser");
 var util = require('util');
@@ -28,6 +38,15 @@ var adminApp;
 var server;
 var editor;
 
+
+/**
+ * Initialise the module.
+ * @param  {Object}     settings   The runtime settings
+ * @param  {HTTPServer} server     An instance of HTTP Server
+ * @param  {Storage}    storage    An instance of Node-RED Storage
+ * @param  {Runtime}    runtimeAPI An instance of Node-RED Runtime
+ * @memberof @node-red/editor-api
+ */
 function init(settings,_server,storage,runtimeAPI) {
     server = _server;
     if (settings.httpAdminRoot !== false) {
@@ -80,6 +99,12 @@ function init(settings,_server,storage,runtimeAPI) {
         adminApp = null;
     }
 }
+
+/**
+ * Start the module.
+ * @return {Promise} resolves when the application is ready to handle requests
+ * @memberof @node-red/editor-api
+ */
 function start() {
     if (editor) {
         return editor.start();
@@ -87,6 +112,12 @@ function start() {
         return when.resolve();
     }
 }
+
+/**
+ * Stop the module.
+ * @return {Promise} resolves when the application is stopped
+ * @memberof @node-red/editor-api
+ */
 function stop() {
     if (editor) {
         editor.stop();
@@ -97,8 +128,18 @@ module.exports = {
     init: init,
     start: start,
     stop: stop,
+
+    /**
+    * @memberof @node-red/editor-api
+    * @mixes @node-red/editor-api_auth
+    */
     auth: {
         needsPermission: auth.needsPermission
     },
+    /**
+     * The Express app used to serve the Node-RED Editor
+     * @type ExpressApplication
+     * @memberof @node-red/editor-api
+     */
     get httpAdmin() { return adminApp; }
 };

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

@@ -21,6 +21,8 @@ var i18n = require("@node-red/util").i18n; // TODO: separate module
 
 module.exports = {
     errorHandler: function(err,req,res,next) {
+        //TODO: why this when rejectHandler also?!
+
         if (err.message === "request entity too large") {
             log.error(err);
         } else {
@@ -39,7 +41,9 @@ module.exports = {
         return lang;
     },
     rejectHandler: function(req,res,err) {
-        res.status(err.status||500).json({
+        //TODO: why this when errorHandler also?!
+        log.audit({event: "api.error",error:err.code||"unexpected_error",message:err.message||err.toString()},req);
+        res.status(err.status||400).json({
             code: err.code||"unexpected_error",
             message: err.message||err.toString()
         });

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

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-api",
-    "version": "0.20.0-beta.2",
+    "version": "1.0.0-beta.2",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,22 +16,25 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "0.20.0-beta.2",
-        "@node-red/editor-client": "0.20.0-beta.2",
+        "@node-red/util": "1.0.0-beta.2",
+        "@node-red/editor-client": "1.0.0-beta.2",
         "bcryptjs": "2.4.3",
-        "body-parser": "1.18.3",
+        "body-parser": "1.19.0",
         "clone": "2.1.2",
         "cors": "2.8.5",
-        "express-session": "1.15.6",
-        "express": "4.16.4",
-        "memorystore": "1.6.0",
-        "mime": "2.4.0",
+        "express-session": "1.16.1",
+        "express": "4.17.0",
+        "memorystore": "1.6.1",
+        "mime": "2.4.3",
         "mustache": "3.0.1",
         "oauth2orize": "1.11.0",
         "passport-http-bearer": "1.0.1",
         "passport-oauth2-client-password": "0.1.2",
         "passport": "0.4.0",
         "when": "3.7.8",
-        "ws": "1.1.5"
+        "ws": "6.2.1"
+    },
+    "optionalDependencies": {
+        "bcrypt": "3.0.5"
     }
 }

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

@@ -0,0 +1,823 @@
+{
+  "common" : {
+    "label" : {
+      "name" : "Name",
+      "ok" : "OK",
+      "done" : "Fertig",
+      "cancel" : "Abbrechen",
+      "delete" : "Löschen",
+      "close" : "Schließen",
+      "load" : "Laden",
+      "save" : "Speichern",
+      "import" : "Import",
+      "export" : "Exportieren",
+      "back" : "Zurück",
+      "next" : "Weiter",
+      "clone" : "Projekt duplizieren",
+      "cont" : "Weiter"
+    }
+  },
+  "workspace" : {
+    "defaultName" : "Flow __number__",
+    "editFlow" : "Flow bearbeiten: __name__",
+    "confirmDelete" : "Löschen bestätigen",
+    "delete" : "Sind Sie wirklich sicher, dass Sie '__label__' löschen wollen?",
+    "dropFlowHere" : "Hier können Sie den Flow fallen lassen.",
+    "status" : "Status",
+    "enabled" : "Aktiviert",
+    "disabled" : "Inaktiviert",
+    "info" : "Beschreibung",
+    "tip" : "Beschreibung akzeptiert Markdown und wird auf der Registerkarte Info angezeigt."
+  },
+  "menu" : {
+    "label" : {
+      "view" : {
+        "view" : "Ansicht",
+        "grid" : "Gitter",
+        "showGrid" : "Raster anzeigen",
+        "snapGrid" : "Einrasten am Raster",
+        "gridSize" : "Rastergröße",
+        "textDir" : "Textrichtung",
+        "defaultDir" : "Standard",
+        "ltr" : "Links-nach-rechts",
+        "rtl" : "Von rechts nach links",
+        "auto" : "Kontextuell"
+      },
+      "sidebar" : {
+        "show" : "Seitenleiste anzeigen"
+      },
+      "settings" : "Einstellungen",
+      "userSettings" : "Benutzereinstellungen",
+      "nodes" : "Nodes",
+      "displayStatus" : "Nodestatus anzeigen",
+      "displayConfig" : "Konfigurations-Node",
+      "import" : "Import",
+      "export" : "Exportieren",
+      "search" : "Flows durchsuchen",
+      "searchInput" : "durchsuchen Sie Ihre Flows",
+      "subflows" : "Subflow",
+      "createSubflow" : "Subflow erstellen",
+      "selectionToSubflow" : "Auswahl für Subflow",
+      "flows" : "Flows",
+      "add" : "Hinzufügen",
+      "rename" : "Umbenennen",
+      "delete" : "Löschen",
+      "keyboardShortcuts" : "Tastaturkurzbefehle",
+      "login" : "Anmelden",
+      "logout" : "Abmelden",
+      "editPalette" : "Palette verwalten",
+      "other" : "Sonstige",
+      "showTips" : "Tipps anzeigen",
+      "help" : "Node-RED-Website",
+      "projects" : "Projekte",
+      "projects-new" : "Neu",
+      "projects-open" : "Öffnen",
+      "projects-settings" : "Projekteinstellungen"
+    }
+  },
+  "user" : {
+    "loggedInAs" : "Angemeldet als __name__",
+    "username" : "Benutzername",
+    "password" : "Kennwort",
+    "login" : "Anmelden",
+    "loginFailed" : "Anmeldung fehlgeschlagen",
+    "notAuthorized" : "Keine Berechtigung",
+    "errors" : {
+      "settings" : "Sie müssen angemeldet sein, um auf die Einstellungen zuzugreifen.",
+      "deploy" : "Sie müssen angemeldet sein, um Änderungen anwenden zu können.",
+      "notAuthorized" : "Sie müssen angemeldet sein, um diese Aktion ausführen zu können."
+    }
+  },
+  "notification" : {
+    "warning" : "<strong> Warnung </strong>: __message__",
+    "warnings" : {
+      "undeployedChanges" : "Node hat nicht implementierte Änderungen",
+      "nodeActionDisabled" : "In Subflow inaktivierte Nodeaktionen",
+      "missing-types" : "<p> Die Flows wurden aufgrund fehlender Nodetypen gestoppt. </p>",
+      "restartRequired" : "Node-RED muss erneut gestartet werden, damit aufgerüstete Module aktiviert werden können",
+      "credentials_load_failed" : "<p> Die Flows wurden gestoppt, da die Berechtigungsnachweise nicht entschlüsselt werden konnten. </p> <p> Die Datei mit dem Datenflowberechtigungsnachweis ist verschlüsselt, aber der Verschlüsselungsschlüssel des Projekts fehlt oder ist ungültig. </p>",
+      "credentials_load_failed_reset" : "<p> Die Berechtigungsnachweise konnten nicht entschlüsselt werden </p> <p> Die Datei mit dem Flow-Berechtigungsnachweis ist verschlüsselt, aber der Chiffrierschlüssel des Projekts fehlt oder ist ungültig. </p> <p> Die Datei des Flow-Berechtigungsnachweises wird bei der nächsten Implementierung zurückgesetzt. Alle vorhandenen Datenflowberechtigungsnachweise werden gelöscht. </p>",
+      "missing_flow_file" : "<p> Die Projektflowdatei wurde nicht gefunden. </p> <p> Das Projekt ist nicht mit einer Flow-Datei konfiguriert. </p>",
+      "missing_package_file" : "<p> Die Projektpaketdatei wurde nicht gefunden. </p> <p> In dem Projekt fehlt eine Datei 'package.json'. </p>",
+      "project_empty" : "<p> Das Projekt ist leer. </p> <p> Möchten Sie eine Standardgruppe von Projektdateien erstellen? <br/> Andernfalls müssen Sie Dateien außerhalb des Editors manuell zum Projekt hinzufügen. </p>",
+      "project_not_found" : "<p> Das Projekt '__project__' wurde nicht gefunden. </p>",
+      "git_merge_conflict" : "<p> Das automatische Zusammenführen von Änderungen ist fehlgeschlagen. </p> <p> Beheben Sie die nicht zusammengeführten Konflikte und schreiben Sie die Ergebnisse fest. </p>"
+    },
+    "error" : "<strong> Fehler </strong>: __message__",
+    "errors" : {
+      "lostConnection" : "Verbindung zum Server verloren, Verbindung wird erneut hergestellt ...",
+      "lostConnectionReconnect" : "Verbindung zum Server verloren, Verbindung in __time__s wird wieder hergestellt.",
+      "lostConnectionTry" : "Jetzt testen",
+      "cannotAddSubflowToItself" : "Subflow kann nicht zu sich selbst hinzugefügt werden",
+      "cannotAddCircularReference" : "Subflow kann nicht hinzugefügt werden-zirkuläre Referenz wurde erkannt",
+      "unsupportedVersion" : "<p> Verwenden einer nicht unterstützten Version von Node.js </p> <p> Sie sollten ein Upgrade auf das neueste LTS-Release von Node.js durchführen. </p>",
+      "failedToAppendNode" : "<p> Fehler beim Laden von '__module__' </p> <p> __error__ </p>"
+    },
+    "project" : {
+      "change-branch" : "Wechseln Sie in die lokale Verzweigung '__project__'.",
+      "merge-abort" : "Git-Zusammenführung abgebrochen",
+      "loaded" : "Projekt '__project__' geladen",
+      "updated" : "Projekt '__project__' aktualisiert",
+      "pull" : "Projekt '__project__' erneut geladen",
+      "revert" : "Projekt '__project__' erneut geladen",
+      "merge-complete" : "Git-Zusammenführung abgeschlossen"
+    },
+    "label" : {
+      "manage-project-dep" : "Projektabhängigkeiten verwalten",
+      "setup-cred" : "Berechtigungsnachweise einrichten",
+      "setup-project" : "Projektdateien konfigurieren",
+      "create-default-package" : "Standardpaketdatei erstellen",
+      "no-thanks" : "Nein danke",
+      "create-default-project" : "Standardprojektdateien erstellen",
+      "show-merge-conflicts" : "Zusammenführungskonflikte anzeigen"
+    }
+  },
+  "clipboard" : {
+    "clipboard" : "Zwischenablage",
+    "nodes" : "Nodes",
+    "pasteNodes" : "Nodes hier einfügen",
+    "importNodes" : "Nodes importieren",
+    "exportNodes" : "Nodes in Zwischenablage exportieren",
+    "importUnrecognised" : "Importierter Typ nicht erkannt:",
+    "importUnrecognised_plural" : "Importierte Typen nicht erkannt:",
+    "nodesExported" : "Nodes, die in die Zwischenablage exportiert wurden",
+    "nodeCopied" : "__count__ Node kopiert",
+    "nodeCopied_plural" : "__count__ Nodes kopiert",
+    "invalidFlow" : "Ungültiger Nachrichtenflow: __message__",
+    "export" : {
+      "selected" : "Ausgewählte Nodes",
+      "current" : "Aktueller Flow",
+      "all" : "alle Flows",
+      "compact" : "kompakt",
+      "formatted" : "formatiert",
+      "copy" : "In Zwischenablage exportieren"
+    },
+    "import" : {
+      "import" : "Importieren in",
+      "newFlow" : "neuer Flow"
+    },
+    "copyMessagePath" : "Pfad kopiert",
+    "copyMessageValue" : "Wert kopiert",
+    "copyMessageValue_truncated" : "Abgeschnittene Wert kopiert"
+  },
+  "deploy" : {
+    "deploy" : "deploy",
+    "full" : "Voll",
+    "fullDesc" : "Implementiert alles im Arbeitsbereich",
+    "modifiedFlows" : "Geänderte Flows",
+    "modifiedFlowsDesc" : "Implementiert nur Flows, die geänderte Nodes enthalten.",
+    "modifiedNodes" : "Geänderte Nodes",
+    "modifiedNodesDesc" : "Implementiert nur Nodes, die sich geändert haben.",
+    "successfulDeploy" : "Erfolgreich implementiert",
+    "deployFailed" : "Deploy fehlgeschlagen: __message__",
+    "unusedConfigNodes" : "Sie haben einige nicht verwendete Konfigurations-Nodes.",
+    "unusedConfigNodesLink" : "Klicken Sie hier, um sie zu sehen",
+    "errors" : {
+      "noResponse" : "Keine Antwort vom Server"
+    },
+    "confirm" : {
+      "button" : {
+        "ignore" : "Ignorieren",
+        "confirm" : "Deploy bestätigen",
+        "review" : "Änderungen prüfen",
+        "cancel" : "Abbrechen",
+        "merge" : "Zusammenführen",
+        "overwrite" : "Ignorieren & deployen"
+      },
+      "undeployedChanges" : "Sie haben nicht implementierte Änderungen.\n\nWenn Sie diese Seite verlassen, gehen diese Änderungen verloren.",
+      "improperlyConfigured" : "Der Arbeitsbereich enthält einige Nodes, die nicht ordnungsgemäß konfiguriert sind:",
+      "unknown" : "Der Arbeitsbereich enthält einige unbekannte Node-Typen:",
+      "confirm" : "Sind Sie sicher, dass Sie deployen möchten?",
+      "doNotWarn" : "warnen Sie nicht noch einmal.",
+      "conflict" : "Auf dem Server wird eine aktuellere Gruppe von Datenflüssen ausgeführt.",
+      "backgroundUpdate" : "Die Datenflüsse auf dem Server wurden aktualisiert.",
+      "conflictChecking" : "Überprüfen Sie, ob die Änderungen automatisch gemischt werden können.",
+      "conflictAutoMerge" : "Die Änderungen enthalten keine Konflikte und können automatisch gemischt werden.",
+      "conflictManualMerge" : "Zu den Änderungen gehören Konflikte, die aufgelöst werden müssen, bevor sie implementiert werden können.",
+      "plusNMore" : "+ __count__ mehr"
+    }
+  },
+  "diff" : {
+    "unresolvedCount" : "__count__ unaufgelöster Konflikt",
+    "unresolvedCount_plural" : "__count__ unaufgelöste Konflikte",
+    "globalNodes" : "Globale Nodes",
+    "flowProperties" : "Flow-Eigenschaften",
+    "type" : {
+      "added" : "hinzugefügt",
+      "changed" : "geändert",
+      "unchanged" : "unverändert",
+      "deleted" : "gelöscht",
+      "flowDeleted" : "Flow gelöscht",
+      "flowAdded" : "Flow hinzugefügt",
+      "movedTo" : "verschoben zu __id__",
+      "movedFrom" : "verschoben von __id__"
+    },
+    "nodeCount" : "__count__, Node",
+    "nodeCount_plural" : "__count__-Nodes",
+    "local" : "Lokale Änderungen",
+    "remote" : "Ferne Änderungen",
+    "reviewChanges" : "Änderungen prüfen",
+    "noBinaryFileShowed" : "Der Inhalt der Binärdatei kann nicht angezeigt",
+    "viewCommitDiff" : "Änderungen festschreiben",
+    "compareChanges" : "Änderungen vergleichen",
+    "saveConflict" : "Konfliktlösung speichern",
+    "conflictHeader" : "<span> __resolved__ </span>  von  <span> __unresolved__ </span>  -Konflikten behoben",
+    "commonVersionError" : "Allgemeine Version enthält keine gültige JSON-Datei:",
+    "oldVersionError" : "Alte Version enthält keine gültige JSON-Datei:",
+    "newVersionError" : "Neue Version enthält keine gültige JSON-Datei:"
+  },
+  "subflow" : {
+    "editSubflow" : "Flowschablone bearbeiten: __name__",
+    "edit" : "Flowsschablone bearbeiten",
+    "subflowInstances" : "Es ist __count__ Instanz dieser Subflow-Vorlage vorhanden.",
+    "subflowInstances_plural" : "Es gibt __count__ Instanzen dieser Subflow-Vorlage.",
+    "editSubflowProperties" : "Eigenschaften bearbeiten",
+    "input" : "Eingaben:",
+    "output" : "Ausgaben:",
+    "deleteSubflow" : "Subflow löschen",
+    "info" : "Beschreibung",
+    "category" : "Kategorie",
+    "format" : "Markdown-Format",
+    "errors" : {
+      "noNodesSelected" : "<strong> Subflow kann nicht erstellt werden </strong>: Es wurden keine Nodes ausgewählt.",
+      "multipleInputsToSelection" : "<strong> Subflow kann nicht erstellt werden </strong>: Mehrere Eingaben zur Auswahl"
+    }
+  },
+  "editor" : {
+    "configEdit" : "Bearbeiten",
+    "configAdd" : "Hinzufügen",
+    "configUpdate" : "Aktualisieren",
+    "configDelete" : "Löschen",
+    "nodesUse" : "__count__node verwendet diese Konfiguration",
+    "nodesUse_plural" : "__count__ -Nodes verwenden diese Konfiguration",
+    "addNewConfig" : "Neuen __type__config-Node hinzufügen",
+    "editNode" : "__type__ Node bearbeiten",
+    "editConfig" : "__type__config-Node bearbeiten",
+    "addNewType" : "Neuen __type__ hinzufügen ...",
+    "nodeProperties" : "Node-Eigenschaften",
+    "portLabels" : "Node-Einstellungen",
+    "labelInputs" : "Eingänge",
+    "labelOutputs" : "Ausgänge",
+    "settingIcon" : "Symbol",
+    "noDefaultLabel" : "keine",
+    "defaultLabel" : "Standardbeschriftung verwenden",
+    "searchIcons" : "Suchsymbole",
+    "useDefault" : "Standardwert verwenden",
+    "errors" : {
+      "scopeChange" : "Wenn Sie den Geltungsbereich ändern, wird er für Nodes in anderen Nachrichtenflüssen, die ihn verwenden, nicht verfügbar sein."
+    }
+  },
+  "keyboard" : {
+    "title" : "Tastaturkurzbefehle",
+    "keyboard" : "Tastatur",
+    "filterActions" : "Filteraktionen",
+    "shortcut" : "Direktaufruf",
+    "scope" : "Bereich",
+    "unassigned" : "Nicht zugeordnet",
+    "global" : "global",
+    "workspace" : "Arbeitsbereich",
+    "selectAll" : "Alle Nodes auswählen",
+    "selectAllConnected" : "Alle verbundenen Nodes auswählen",
+    "addRemoveNode" : "Node aus Auswahl hinzufügen/entfernen",
+    "editSelected" : "Ausgewählten Node bearbeiten",
+    "deleteSelected" : "Ausgewählte Node oder ausgewählten Link löschen",
+    "importNode" : "Node importieren",
+    "exportNode" : "Node exportieren",
+    "nudgeNode" : "Ausgewählte Nodes verschieben (1px)",
+    "moveNode" : "Ausgewählte Nodes verschieben (20px)",
+    "toggleSidebar" : "Seitenleiste ein-/ausschalten",
+    "copyNode" : "Ausgewählte Nodes kopieren",
+    "cutNode" : "Ausgewählte Nodes ausschneiden",
+    "pasteNode" : "Node einfügen",
+    "undoChange" : "Letzte Änderung rückgängig machen",
+    "searchBox" : "Suchfeld öffnen",
+    "managePalette" : "Palette verwalten"
+  },
+  "library" : {
+    "library" : "Bibliothek",
+    "openLibrary" : "Bibliothek öffnen ...",
+    "saveToLibrary" : "In Bibliothek speichern ...",
+    "typeLibrary" : "__type__, Bibliothek",
+    "unnamedType" : "Unbenannt __type__",
+    "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__",
+    "types": {
+        "examples" : "Beispiele"
+    }
+  },
+  "palette" : {
+    "noInfo" : "Keine Informationen verfügbar",
+    "filter" : "Filter Nodes",
+    "search" : "Suchmodule",
+    "addCategory" : "Neu hinzufügen ...",
+    "label" : {
+      "subflows" : "Subflows",
+      "input" : "Eingabe",
+      "output" : "Ausgabe",
+      "function" : "Funktion",
+      "social" : "Soziale",
+      "storage" : "Speicher",
+      "analysis" : "Analyse",
+      "advanced" : "fortgeschritten"
+    },
+    "event" : {
+      "nodeAdded" : "Node zur Palette hinzugefügt:",
+      "nodeAdded_plural" : "Die Nodes wurde der Palette hinzugefügt.",
+      "nodeRemoved" : "Node aus Palette entfernt:",
+      "nodeRemoved_plural" : "Nodes aus Palette entfernt:",
+      "nodeEnabled" : "Node aktiviert:",
+      "nodeEnabled_plural" : "Nodes aktiviert:",
+      "nodeDisabled" : "Node inaktiviert:",
+      "nodeDisabled_plural" : "Nodes inaktiviert:",
+      "nodeUpgraded" : "Node-Modul __module__ aktualisiert auf Version __version__"
+    },
+    "editor" : {
+      "title" : "Palette verwalten",
+      "palette" : "Palette",
+      "times" : {
+        "seconds" : "Vor Sekunden",
+        "minutes" : "Minuten vor",
+        "minutesV" : "__count__ Minuten",
+        "hoursV" : "__count__ Stunde ago",
+        "hoursV_plural" : "__count__hours ago",
+        "daysV" : "__count__ Tag ago",
+        "daysV_plural" : "__count__ Tage",
+        "weeksV" : "__count__ Woche vor",
+        "weeksV_plural" : "__count__wochen ago",
+        "monthsV" : "__count__ Monat vor",
+        "monthsV_plural" : "__count__ Monaten",
+        "yearsV" : "__count__ Jahr",
+        "yearsV_plural" : "__count__ Jahren",
+        "yearMonthsV" : "____ Jahr, __count__ Monat",
+        "yearMonthsV_plural" : "____ Jahr, __count__ Monaten",
+        "yearsMonthsV" : "____ Jahre, __count__ Monat vor",
+        "yearsMonthsV_plural" : "____ Jahre, __count__ Monaten"
+      },
+      "nodeCount" : "__label__, Node",
+      "nodeCount_plural" : "__label__ Nodes",
+      "moduleCount" : "__count__ Modul verfügbar",
+      "moduleCount_plural" : "__count__-Module verfügbar",
+      "inuse" : "im Gebrauch",
+      "enableall" : "alle aktivieren",
+      "disableall" : "Alle inaktivieren",
+      "enable" : "aktivieren",
+      "disable" : "inaktivieren",
+      "remove" : "entfernen",
+      "update" : "Update auf __version__",
+      "updated" : "aktualisiert",
+      "install" : "installieren",
+      "installed" : "installiert",
+      "loading" : "Kataloge werden geladen ...",
+      "tab-nodes" : "Nodes",
+      "tab-install" : "installieren",
+      "sort" : "Sortierung:",
+      "sortAZ" : "a-z",
+      "sortRecent" : "kürzlich",
+      "more" : "+ __count__ mehr",
+      "errors" : {
+        "catalogLoadFailed" : "<p> Fehler beim Laden des Node-Katalogs. </p> <p> Weitere Informationen finden Sie in der Browserkonsole. </p>",
+        "installFailed" : "<p> Installation fehlgeschlagen: __module__ </p> <p> __message__ </p> <p> Überprüfen Sie das Protokoll auf weitere Informationen. </p>",
+        "removeFailed" : "<p> Entfernen fehlgeschlagen: __module__ </p> <p> __message__ </p> <p> Überprüfen Sie das Protokoll auf weitere Informationen. </p>",
+        "updateFailed" : "<p> Aktualisierung fehlgeschlagen: __module__ </p> <p> __message__ </p> <p> Überprüfen Sie das Protokoll auf weitere Informationen. </p>",
+        "enableFailed" : "<p> Fehlgeschlagene Aktivierung: __module__ </p> <p> __message__ </p> <p> Überprüfen Sie das Protokoll auf weitere Informationen. </p>",
+        "disableFailed" : "<p> Inaktivieren fehlgeschlagen: __module__ </p> <p> __message__ </p> <p> Überprüfen Sie das Protokoll auf weitere Informationen. </p>"
+      },
+      "confirm" : {
+        "install" : {
+          "body" : "<p> Installieren von '__module__' </p> <p> Vor der Installation von lesen Sie bitte die Dokumentation des Nodes. Einige Nodes haben Abhängigkeiten, die nicht automatisch aufgelöst werden können und einen Neustart von 'Node-RED' erfordern. </p>",
+          "title" : "Nodes installieren"
+        },
+        "remove" : {
+          "body" : "<p> Entfernen von '__module__' </p> <p>-Der Node deinstalliert ihn aus Node-RED. Der Node kann weiterhin Ressourcen verwenden, bis Node-RED erneut gestartet wird. </p>",
+          "title" : "Nodes entfernen"
+        },
+        "update" : {
+          "body" : "<p> Aktualisieren von '__module__' </p> <p> Für die Aktualisierung des Nodes ist ein Neustart von 'Node-RED' erforderlich, damit die Aktualisierung abgeschlossen werden kann. Dies muss manuell geschehen. </p>",
+          "title" : "Nodes aktualisieren"
+        },
+        "cannotUpdate" : {
+          "body" : "Es ist eine Aktualisierung für diesen Node verfügbar, aber sie ist nicht an einer Position installiert, die vom Palettenmanager aktualisiert werden kann. <br/> <br/> Weitere Informationen zum Aktualisieren dieses Nodes finden Sie in der Dokumentation."
+        },
+        "button" : {
+          "review" : "Node-Informationen öffnen",
+          "install" : "installieren",
+          "remove" : "Entfernen",
+          "update" : "Aktualisieren"
+        }
+      }
+    }
+  },
+  "sidebar" : {
+    "info" : {
+      "name" : "Node-Informationen",
+      "tabName" : "Name",
+      "label" : "info",
+      "node" : "Node",
+      "type" : "Typ",
+      "id" : "ID",
+      "status" : "Status",
+      "enabled" : "Aktiviert",
+      "disabled" : "Inaktiviert",
+      "subflow" : "Subflow",
+      "instances" : "Exemplare",
+      "properties" : "Eigenschaften",
+      "info" : "Informationen",
+      "blank" : "leer",
+      "null" : "null",
+      "showMore" : "Weitere anzeigen",
+      "showLess" : "Weniger anzeigen",
+      "flow" : "Flow",
+      "selection" : "Auswahl",
+      "nodes" : "__count__ Nodes",
+      "flowDesc" : "Beschreibung des Flows",
+      "subflowDesc" : "Beschreibung des Subflows",
+      "nodeHelp" : "Node-Hilfe",
+      "none" : "Keine",
+      "arrayItems" : "__count__ items",
+      "showTips" : "Sie können die Tipps in der Anzeige \"Einstellungen\" öffnen."
+    },
+    "config" : {
+      "name" : "Konfigurations-Node",
+      "label" : "Konfiguration",
+      "global" : "Bei allen Flows",
+      "none" : "keine",
+      "subflows" : "Subflows",
+      "flows" : "Flows",
+      "filterUnused" : "Nicht verwendet",
+      "filterAll" : "alle",
+      "filtered" : "__count__ verdeckt"
+    },
+    "context" : {
+      "name" : "Kontextdaten",
+      "label" : "Kontext",
+      "none" : "keine ausgewählt",
+      "refresh" : "Aktualisierung zum Laden",
+      "empty" : "leer",
+      "node" : "Node",
+      "flow" : "Flow",
+      "global" : "Global"
+    },
+    "palette" : {
+      "name" : "Palettenverwaltung",
+      "label" : "Palette"
+    },
+    "project" : {
+      "label" : "Projekt",
+      "name" : "Projekt",
+      "description" : "Beschreibung",
+      "dependencies" : "Abhängigkeiten",
+      "settings" : "Einstellungen",
+      "noSummaryAvailable" : "Keine Zusammenfassung verfügbar",
+      "editDescription" : "Projektbeschreibung bearbeiten",
+      "editDependencies" : "Projektabhängigkeiten bearbeiten",
+      "editReadme" : "README.md bearbeiten",
+      "projectSettings" : {
+        "edit" : "bearbeiten",
+        "none" : "Keine",
+        "install" : "installieren",
+        "removeFromProject" : "Aus Projekt entfernen",
+        "addToProject" : "zu Projekt hinzufügen",
+        "files" : "Dateien",
+        "flow" : "Flow",
+        "credentials" : "Berechtigungsnachweis",
+        "invalidEncryptionKey" : "Ungültiger Chiffrierschlüssel",
+        "encryptionEnabled" : "Verschlüsselung aktiviert",
+        "encryptionDisabled" : "Verschlüsselung inaktiviert",
+        "setTheEncryptionKey" : "Legen Sie den Verschlüsselungsschlüssel fest:",
+        "resetTheEncryptionKey" : "Setzt den Verschlüsselungsschlüssel zurück:",
+        "changeTheEncryptionKey" : "Ändern Sie den Verschlüsselungsschlüssel:",
+        "currentKey" : "Aktueller Schlüssel",
+        "newKey" : "Neuer Schlüssel",
+        "credentialsAlert" : "Dadurch werden alle vorhandenen Berechtigungsnachweise gelöscht.",
+        "versionControl" : "Versionssteuerung",
+        "branches" : "Verzweigungen",
+        "noBranches" : "Keine Verzweigungen",
+        "deleteConfirm" : "Sind Sie sicher, dass Sie die lokale Verzweigung '__name__' löschen wollen? Dies kann nicht rückgängig gemacht werden.",
+        "unmergedConfirm" : "Die lokale Verzweigung '__name__' enthält nicht zusammengeführte Änderungen, die verloren gehen. Sind Sie sicher, dass Sie ihn löschen möchten?",
+        "deleteUnmergedBranch" : "Nicht zusammengeführte Verzweigung löschen",
+        "gitRemotes" : "Git Remotes",
+        "addRemote" : "ferne hinzufügen",
+        "addRemote2" : "Ferne hinzufügen",
+        "remoteName" : "Ferner Name",
+        "nameRule" : "Darf nur A-Z 0-9 _ enthalten.",
+        "url" : "URL",
+        "urlRule" : "https://, ssh:// oder file://",
+        "urlRule2" : "Geben Sie den Benutzernamen/das Kennwort nicht in die URL ein.",
+        "noRemotes" : "Keine Remotes",
+        "deleteRemoteConfrim" : "Sind Sie sicher, dass Sie den fernen '__name__' löschen möchten?",
+        "deleteRemote" : "Ferne löschen"
+      },
+      "userSettings" : {
+        "committerDetail" : "Committer-Details",
+        "committerTip" : "Leer Wert für Systemstandardwert belassen",
+        "userName" : "Benutzername",
+        "email" : "E-Mail",
+        "sshKeys" : "SSH-Schlüssel",
+        "sshKeysTip" : "Ermöglicht es Ihnen, sichere Verbindungen zu fernen Git-Repositorys zu erstellen.",
+        "add" : "Schlüssel hinzufügen",
+        "addSshKey" : "SSH-Schlüssel hinzufügen",
+        "addSshKeyTip" : "Ein neues öffentungs-/privates Schlüsselpaar generieren",
+        "name" : "Name",
+        "nameRule" : "Darf nur A-Z 0-9 _ enthalten.",
+        "passphrase" : "Kennphrase",
+        "passphraseShort" : "Kennphrase zu kurz",
+        "optional" : "Optional",
+        "cancel" : "Abbrechen",
+        "generate" : "Schlüssel generieren",
+        "noSshKeys" : "Keine SSH-Schlüssel",
+        "copyPublicKey" : "Öffentlichen Schlüssel in Zwischenablage kopieren",
+        "delete" : "Löschtaste",
+        "gitConfig" : "Git-Konfiguration",
+        "deleteConfirm" : "Sind Sie sicher, dass der SSH-Schlüssel __name__ gelöscht werden soll? Dies kann nicht rückgängig gemacht werden."
+      },
+      "versionControl" : {
+        "unstagedChanges" : "Nicht zwischengespeicherte Änderungen",
+        "stagedChanges" : "Gespeichte Änderungen",
+        "resolveConflicts" : "Konflikte auflösen",
+        "head" : "HEAD",
+        "staged" : "Zwischengelagert",
+        "unstaged" : "Nicht zwischengespeichert",
+        "local" : "Lokal",
+        "remote" : "Fern",
+        "revert" : "Sind Sie sicher, dass die Änderungen auf '__file__' zurückgesetzt werden sollen? Dies kann nicht rückgängig gemacht werden.",
+        "revertChanges" : "Änderungen zurücksetzen",
+        "localChanges" : "Lokale Änderungen",
+        "none" : "Keine",
+        "conflictResolve" : "Alle Konflikte wurden aufgelöst. Festschreiben der Änderungen, um den Mischvorgang abzuschließen.",
+        "localFiles" : "Lokale Dateien",
+        "all" : "alle",
+        "unmergedChanges" : "Nicht zusammengeführte Änderungen",
+        "abortMerge" : "Zusammenführen abbrechen",
+        "commit" : "Festschreiben",
+        "changeToCommit" : "Änderungen beim Festschreiben",
+        "commitPlaceholder" : "Geben Sie Ihre Festschreibungsnachricht",
+        "cancelCapital" : "Abbrechen",
+        "commitCapital" : "Festschreiben",
+        "commitHistory" : "Protokoll festschreiben",
+        "branch" : "Verzweigung:",
+        "moreCommits" : " weitere Commit (s)",
+        "changeLocalBranch" : "Lokale Verzweigung ändern",
+        "createBranchPlaceholder" : "Verzweigung suchen oder erstellen",
+        "upstream" : "Upstream",
+        "localOverwrite" : "Sie haben lokale Änderungen, die überschrieben werden, indem Sie die Verzweigung ändern. Sie müssen diese Änderungen zuerst festschreiben oder rückgängig machen.",
+        "manageRemoteBranch" : "Ferne Verzweigung verwalten",
+        "unableToAccess" : "Zugriff auf fernes Repository nicht möglich",
+        "retry" : "Retry",
+        "setUpstreamBranch" : "Als vorgeschaltete Verzweigung festlegen",
+        "createRemoteBranchPlaceholder" : "Ferne Verzweigung suchen oder erstellen",
+        "trackedUpstreamBranch" : "Die erstellte Verzweigung wird als überwachte Upstream-Verzweigung festgelegt.",
+        "selectUpstreamBranch" : "Die Verzweigung wird erstellt. Wählen Sie diese Option aus, um sie als überwachte Upstream-Verzweigung festzulegen",
+        "pushFailed" : "Push ist fehlgeschlagen, da die ferne Commit-COMMs-COMMs (COMM Zuerst ziehen und mischen, dann erneut drücken.",
+        "push" : "Push",
+        "pull" : "Pull",
+        "unablePull" : "<p> Ferne Änderungen können nicht gezogen werden. Die nicht zwischengespeicherten lokalen Änderungen werden überschrieben. </p> <p> Die Änderungen festschreiben und die Anforderung wiederholen. </p>",
+        "showUnstagedChanges" : "Nicht zwischengespeicherte Änderungen anzeigen",
+        "connectionFailed" : "Verbindung zum fernen Repository konnte nicht hergestellt werden: ",
+        "pullUnrelatedHistory" : "<p> Das ferne Protokoll der Festschreibungen hat einen nicht zugehörigen Verlauf. </p> <p> Sind Sie sicher, dass Sie die Änderungen in Ihr lokales Repository ziehen möchten? </p>",
+        "pullChanges" : "Änderungen extrahieren",
+        "history" : "Verlauf",
+        "daysAgo" : "__count__ Tag ago",
+        "daysAgo_plural" : "__count__ Tage",
+        "hoursAgo" : "__count__ Stunde ago",
+        "hoursAgo_plural" : "__count__hours ago",
+        "minsAgo" : "__count__ min ago",
+        "minsAgo_plural" : "__count__ mins ago",
+        "secondsAgo" : "Sekunden zurück",
+        "notTracking" : "Ihre lokale Verzweigung verfolgt derzeit keine ferne Verzweigung.",
+        "statusUnmergedChanged" : "In Ihrem Repository sind nicht zusammengeführte Änderungen vorhanden. Sie müssen die Konflikte beheben und das Ergebnis festschreiben.",
+        "repositoryUpToDate" : "Ihr Repository ist auf dem neuesten Stand.",
+        "commitsAhead" : "Ihr Repository ist __count__commit vor der fernen. Sie können diese Festschreibung jetzt übertragen.",
+        "commitsAhead_plural" : "Ihr Repository ist __count__ ist vor der fernen Commits festgeschrieben. Sie können diese Commits jetzt verschieben.",
+        "commitsBehind" : "Ihr Projektarchiv ist __count__ hinter der Fernbedienung. Sie können diese Festschreibung jetzt extrahieren.",
+        "commitsBehind_plural" : "Ihr Repository ist __count__ ist hinter der Fernbedienung festgeschrieben. Sie können diese Commits jetzt extrahieren.",
+        "commitsAheadAndBehind1" : "Ihr Projektarchiv ist __count__commit hinter und ",
+        "commitsAheadAndBehind1_plural" : "Ihr Repository ist __count__ schreibt sich zurück und ",
+        "commitsAheadAndBehind2" : "__count__ wird vor der fernen festgeschrieben. ",
+        "commitsAheadAndBehind2_plural" : "__count__ schreibt vor der fernen Funktion fest. ",
+        "commitsAheadAndBehind3" : "Sie müssen die ferne Festschreibung nach unten ziehen, bevor Sie sie drücken.",
+        "commitsAheadAndBehind3_plural" : "Sie müssen die fernen Festschreibungen vor dem Pusdrücken zurückziehen."
+      }
+    }
+  },
+  "typedInput" : {
+    "type" : {
+      "str" : "String",
+      "num" : "Number",
+      "re" : "Regulärer Ausdruck",
+      "bool" : "boolean",
+      "json" : "JSON",
+      "bin" : "Buffer",
+      "date" : "timestamp",
+      "jsonata" : "Ausdruck",
+      "env" : "env, Variable"
+    }
+  },
+  "editableList" : {
+    "add" : "hinzufügen"
+  },
+  "search" : {
+    "empty" : "Keine Übereinstimmungen gefunden",
+    "addNode" : "Node hinzufügen ..."
+  },
+  "expressionEditor" : {
+    "functions" : "Funktionen",
+    "functionReference" : "Funktionsreferenz",
+    "insert" : "Einfügen",
+    "title" : "JSONata-Ausdruckseditor",
+    "test" : "Test",
+    "data" : "Beispielnachricht",
+    "result" : "Ergebnis",
+    "format" : "Formatiere Ausdruck",
+    "compatMode" : "Kompatibilitätsmodus aktiviert",
+    "compatModeDesc" : "<h3> JSONata-Kompatibilitätsmodus </h3> <p>  Der aktuelle Ausdruck scheint immer noch auf  <code> msg </code>  zu verweisen, so dass er im Kompatibilitätsmodus ausgewertet wird. Aktualisieren Sie den Ausdruck so, dass  <code> msg </code>  nicht verwendet wird, da dieser Modus in der Zukunft entfernt wird. </p> <p>  Wenn die JSONata-Unterstützung zuerst zu Node-RED hinzugefügt wurde, ist der Ausdruck erforderlich, um auf das Objekt  <code> msg </code>  zu verweisen. Beispiel:  <code> msg.payload </code>  würde für den Zugriff auf die Nutzdaten verwendet. </p> <p>  Das ist nicht mehr erforderlich, da der Ausdruck direkt anhand der Nachricht ausgewertet wird. Um auf die Nutzdaten zugreifen zu können, muss der Ausdruck nur  <code> Nutzdaten </code> sein. </p>",
+    "noMatch" : "Kein übereinstimmende Ergebnisse",
+    "errors" : {
+      "invalid-expr" : "Ungültiger JSONata-Ausdruck:\n  __message__",
+      "invalid-msg" : "Ungültiges Beispiel für JSON-Nachricht:\n  __message__",
+      "context-unsupported" : "Kontextfunktionen können nicht getestet werden\n $flowContext oder $globalContext",
+      "eval" : "Fehler beim Auswerten des Ausdrucks\n  __message__"
+    }
+  },
+  "jsEditor" : {
+    "title" : "JavaScript-Editor"
+  },
+  "jsonEditor" : {
+    "title" : "JSON-Editor",
+    "format" : "Formatiere JSON"
+  },
+  "markdownEditor" : {
+    "title" : "Markdown-Editor"
+  },
+  "bufferEditor" : {
+    "title" : "Buffereditor",
+    "modeString" : "Als UTF-8-Zeichenfolge bearbeiten",
+    "modeArray" : "Als JSON-Array bearbeiten",
+    "modeDesc" : "<h3> Buffereditor </h3> <p> Der Buffertyp wird als JSON-Array mit Bytewerten gespeichert. Der Editor versucht, den eingegebenen Wert als JSON-Array zu parsen. Wenn es sich nicht um ein gültiges JSON handelt, wird es als UTF-8-Zeichenfolge behandelt und in ein Array der einzelnen Zeichencodepunkte konvertiert. </p> <p> Beispiel: Der Wert  <code> Hello World </code>  wird in das JSON-Array konvertiert: <pre> [ 72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] </pre> </p>"
+  },
+  "projects" : {
+    "config-git" : "Git-Client konfigurieren",
+    "welcome" : {
+      "hello" : "Hallo! Wir haben 'Projekte' in 'Node-RED' eingeführt.",
+      "desc0" : "Dies ist eine neue Methode für die Verwaltung Ihrer Datenflowsdateien und die Versionssteuerung Ihrer Abläufe.",
+      "desc1" : "Um zu beginnen, können Sie Ihr erstes Projekt erstellen oder ein vorhandenes Projekt aus einem Git-Repository klonen.",
+      "desc2" : "Wenn Sie sich nicht sicher sind, können Sie das jetzt überspringen. Sie können immer noch Ihr erstes Projekt aus dem 'Projects' -Menü erstellen.",
+      "create" : "Projekt erstellen",
+      "clone" : "Repository klonen",
+      "not-right-now" : "Jetzt nicht mehr"
+    },
+    "git-config" : {
+      "setup" : "Konfigurieren Sie Ihren Versionssteuerungsclient.",
+      "desc0" : "Node-RED verwendet das Open-Source-Tool Git für die Versionssteuerung. Es protokolliert Änderungen in Ihren Projektdateien und ermöglicht es Ihnen, sie in ferne Repositorys zu übertragen.",
+      "desc1" : "Wenn Sie eine Reihe von Änderungen festschreiben, werden die Änderungen mit einem Benutzernamen und einer E-Mail-Adresse von GIT-Datensätzen vorgenommen. Der Benutzername kann alles sein, was Sie wollen-es muss nicht Ihr richtiger Name sein.",
+      "desc2" : "Ihr Git-Client ist bereits mit den unten stehenden Details konfiguriert.",
+      "desc3" : "Sie können diese Einstellungen später unter der Registerkarte \"Git config\" des Einstellungsdialogs ändern.",
+      "username" : "Benutzername",
+      "email" : "E-Mail"
+    },
+    "project-details" : {
+      "create" : "Erstellen Sie Ihr Projekt.",
+      "desc0" : "Ein Projekt wird als Git-Repository verwaltet. Es ist wesentlich einfacher, Ihre Abläufe mit anderen zu teilen und an ihnen zu arbeiten.",
+      "desc1" : "Sie können mehrere Projekte erstellen und schnell zwischen den Projekten im Editor wechseln.",
+      "desc2" : "Zu Beginn benötigt Ihr Projekt einen Namen und eine optionale Beschreibung.",
+      "already-exists" : "Das Projekt ist bereits vorhanden",
+      "must-contain" : "Darf nur A-Z 0-9 _ enthalten.",
+      "project-name" : "Projektname",
+      "desc" : "Beschreibung",
+      "opt" : "Optional"
+    },
+    "clone-project" : {
+      "clone" : "Projekt klonen",
+      "desc0" : "Wenn Sie bereits über ein Git-Repository verfügen, das ein Projekt enthält, können Sie es klonen, um es zu starten.",
+      "already-exists" : "Das Projekt ist bereits vorhanden",
+      "must-contain" : "Darf nur A-Z 0-9 _ enthalten.",
+      "project-name" : "Projektname",
+      "no-info-in-url" : "Geben Sie den Benutzernamen/das Kennwort nicht in die URL ein.",
+      "git-url" : "Git-Repository-URL",
+      "protocols" : "https://, ssh:// oder file://",
+      "auth-failed" : "Authentifizierung fehlgeschlagen",
+      "username" : "Benutzername",
+      "passwd" : "Kennwort",
+      "ssh-key" : "SSH-Schlüssel",
+      "passphrase" : "Kennphrase",
+      "ssh-key-desc" : "Bevor Sie ein Repository über ssh klonen können, müssen Sie einen SSH-Schlüssel hinzufügen, um auf diesen zu zugreifen.",
+      "ssh-key-add" : "Einen ssh-Schlüssel hinzufügen",
+      "credential-key" : "Verschlüsselungsschlüssel für Berechtigungsnachweise",
+      "cant-get-ssh-key" : "Fehler! Der ausgewählte SSH-Schlüsselpfad kann nicht abgerufen werden.",
+      "already-exists2" : "bereits vorhanden",
+      "git-error" : "Git-Fehler",
+      "connection-failed" : "Verbindung fehlgeschlagen",
+      "not-git-repo" : "Kein Git-Repository",
+      "repo-not-found" : "Repository nicht gefunden"
+    },
+    "default-files" : {
+      "create" : "Erstellen Sie Ihre Projektdateien.",
+      "desc0" : "Ein Projekt enthält Ihre Flow-Dateien, eine README-Datei und eine package.json-Datei.",
+      "desc1" : "Es kann alle anderen Dateien enthalten, die im Git-Repository verwaltet werden sollen.",
+      "desc2" : "Ihre vorhandenen Flow- und Berechtigungsnachweisdateien werden in das Projekt kopiert.",
+      "flow-file" : "Flow-Datei",
+      "credentials-file" : "Berechtigungsnachweisdatei"
+    },
+    "encryption-config" : {
+      "setup" : "Setup der Verschlüsselung Ihrer Berechtigungsnachweisdatei",
+      "desc0" : "Die Datei mit den Datenflowsberechtigungsnachweisen kann verschlüsselt werden, um ihren Inhalt sicher zu halten.",
+      "desc1" : "Wenn Sie diese Berechtigungsnachweise in einem öffentlichen Git-Repository speichern möchten, müssen Sie sie verschlüsseln, indem Sie einen geheimen Schlüsselausdruck bereitstellen.",
+      "desc2" : "Die Datei mit den Datenflowberechtigungsnachweisen ist derzeit nicht verschlüsselt.",
+      "desc3" : "Das heißt, ihr Inhalt, wie z. B. Kennwörter und Zugriffstokens, kann von jedem mit Zugriff auf die Datei gelesen werden.",
+      "desc4" : "Wenn Sie diese Berechtigungsnachweise in einem öffentlichen Git-Repository speichern möchten, müssen Sie sie verschlüsseln, indem Sie einen geheimen Schlüsselausdruck bereitstellen.",
+      "desc5" : "Ihre Datei mit den Datenflowberechtigungsnachweisen wird derzeit mit der Eigenschaft credentialSecret aus Ihrer Einstellungsdatei als Schlüssel verschlüsselt.",
+      "desc6" : "Die Datei mit den Datenflowberechtigungsnachweisen wird derzeit mit einem vom System generierten Schlüssel verschlüsselt. Sie sollten einen neuen geheimen Schlüssel für dieses Projekt angeben.",
+      "desc7" : "Der Schlüssel wird separat von den Projektdateien gespeichert. Sie müssen den Schlüssel angeben, damit dieses Projekt in einer anderen Instanz von Node-RED verwendet werden kann.",
+      "credentials" : "Berechtigungsnachweis",
+      "enable" : "Verschlüsselung aktivieren",
+      "disable" : "Verschlüsselung inaktivieren",
+      "disabled" : "inaktiviert",
+      "copy" : "Vorhandenen Schlüssel kopieren",
+      "use-custom" : "Angepasster Schlüssel verwenden",
+      "desc8" : "Die Datei mit den Berechtigungsnachweisen wird nicht verschlüsselt, und ihr Inhalt kann leicht gelesen werden.",
+      "create-project-files" : "Projektdateien erstellen",
+      "create-project" : "Projekt erstellen",
+      "already-exists" : "bereits vorhanden",
+      "git-error" : "Git-Fehler",
+      "git-auth-error" : "git-auth-Fehler"
+    },
+    "create-success" : {
+      "success" : "Sie haben Ihr erstes Projekt erfolgreich erstellt!",
+      "desc0" : "Sie können jetzt weiterhin Node-RED verwenden, wie Sie es immer haben.",
+      "desc1" : "Auf der Registerkarte \"info\" in der Seitenleiste wird angezeigt, was Ihr aktuelles aktives Projekt ist. Die Schaltfläche neben dem Namen kann für den Zugriff auf die Sicht 'Projekteinstellungen' verwendet werden.",
+      "desc2" : "Die Registerkarte 'Verlauf' in der Seitenleiste kann verwendet werden, um Dateien anzuzeigen, die sich in Ihrem Projekt geändert haben, und sie festzuschreiben. Es zeigt Ihnen eine vollständige Historie Ihrer Commits an und ermöglicht es Ihnen, Ihre Änderungen in ein fernes Repository zu übertragen."
+    },
+    "create" : {
+      "projects" : "Projekte",
+      "already-exists" : "Das Projekt ist bereits vorhanden",
+      "must-contain" : "Darf nur A-Z 0-9 _ enthalten.",
+      "no-info-in-url" : "Geben Sie den Benutzernamen/das Kennwort nicht in die URL ein.",
+      "open" : "Projekt öffnen",
+      "create" : "Projekt erstellen",
+      "clone" : "Repository klonen",
+      "project-name" : "Projektname",
+      "desc" : "Beschreibung",
+      "opt" : "Optional",
+      "flow-file" : "Flow-Datei",
+      "credentials" : "Berechtigungsnachweis",
+      "enable-encryption" : "Verschlüsselung aktivieren",
+      "disable-encryption" : "Verschlüsselung inaktivieren",
+      "encryption-key" : "Chiffrierschlüssel",
+      "desc0" : "Eine Phrase, mit der Sie Ihre Berechtigungsnachweise schützen",
+      "desc1" : "Die Datei mit den Berechtigungsnachweisen wird nicht verschlüsselt, und ihr Inhalt kann leicht gelesen werden.",
+      "git-url" : "Git-Repository-URL",
+      "protocols" : "https://, ssh:// oder file://",
+      "auth-failed" : "Authentifizierung fehlgeschlagen",
+      "username" : "Benutzername",
+      "password" : "Kennwort",
+      "ssh-key" : "SSH-Schlüssel",
+      "passphrase" : "Kennphrase",
+      "desc2" : "Bevor Sie ein Repository über ssh klonen können, müssen Sie einen SSH-Schlüssel hinzufügen, um auf diesen zu zugreifen.",
+      "add-ssh-key" : "Einen ssh-Schlüssel hinzufügen",
+      "credentials-encryption-key" : "Verschlüsselungsschlüssel für Berechtigungsnachweise",
+      "already-exists-2" : "bereits vorhanden",
+      "git-error" : "Git-Fehler",
+      "con-failed" : "Verbindung fehlgeschlagen",
+      "not-git" : "Kein Git-Repository",
+      "no-resource" : "Repository nicht gefunden",
+      "cant-get-ssh-key-path" : "Fehler! Der ausgewählte SSH-Schlüsselpfad kann nicht abgerufen werden.",
+      "unexpected_error" : "unerwarteter_Fehler"
+    },
+    "delete" : {
+      "confirm" : "Sind Sie sicher, dass Sie dieses Projekt löschen möchten?"
+    },
+    "create-project-list" : {
+      "search" : "Projekte durchsuchen",
+      "current" : "aktuell"
+    },
+    "require-clean" : {
+      "confirm" : "<p> Sie haben nicht implementierte Änderungen verloren, die verloren gehen. </p> <p> Möchten Sie fortfahren? </p>"
+    },
+    "send-req" : {
+      "auth-req" : "Authentifizierung für Repository erforderlich",
+      "username" : "Benutzername",
+      "password" : "Kennwort",
+      "passphrase" : "Kennphrase",
+      "retry" : "Retry",
+      "update-failed" : "Fehler beim Aktualisieren der Auth.",
+      "unhandled" : "Nicht behandelte Fehlerantwort"
+    },
+    "create-branch-list" : {
+      "invalid" : "Ungültige Verzweigung",
+      "create" : "Verzweigung erstellen",
+      "current" : "aktuell"
+    },
+    "create-default-file-set" : {
+      "no-active" : "Standarddatei kann ohne aktives Projekt nicht erstellt werden",
+      "no-empty" : "Für ein nicht leeres Projekt kann keine Standarddatei erstellt werden.",
+      "git-error" : "Git-Fehler"
+    },
+    "errors" : {
+      "no-username-email" : "Ihr Git-Client ist nicht mit einem Benutzernamen/einer E-Mail konfiguriert.",
+      "unexpected" : "Es ist ein unerwarteter Fehler aufgetreten",
+      "code" : "code"
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+{
+  "info" : {
+    "tip0" : "Sie können die ausgewählten Nodes oder Verbindungen mit {{ core:delete-selection }} entfernen.",
+    "tip1" : "Suche nach Nodes mit {{ core:search }}",
+    "tip2" : "{{ core:toggle-sidebar }} schaltet die Ansicht dieser Seitenleiste ein.",
+    "tip3" : "Sie können Ihre Palette von Nodes mit {{ core:manage-palette }} verwalten.",
+    "tip4" : "Ihre Flow-Konfigurations-Nodes werden in der Seitenleiste angezeigt. Es kann über das Menü oder mit {{ core:show-config-tab }} aufgerufen werden.",
+    "tip5" : "Aktiviert oder inaktiviert diese Tipps von der Option in den Einstellungen",
+    "tip6" : "Verschieben Sie die ausgewählten Nodes mit Hilfe der [left] [up] [down] und [right] Tasten. Halten Sie [Shift] gedrückt, um das Fenster weiter zu schieben",
+    "tip7" : "Wenn Sie einen Node auf eine Verbindung ziehen, wird er in die Verbindung eingefügt.",
+    "tip8" : "Die ausgewählten Nodes exportieren oder die aktuelle Registerkarte mit {{ core:show-export-dialog }}",
+    "tip9" : "Importieren Sie einen Flow, indem Sie sein JSON in den Editor ziehen oder mit {{ core:show-import-dialog }}.",
+    "tip10" : "[Umschalt] [Klicken] und ziehen Sie auf einen Node-Anschluss, um alle angeschlossenen Verbindungen oder nur die ausgewählte zu verschieben.",
+    "tip11" : "Die Registerkarte \"Info\" mit {{ core:show-info-tab }} oder der Registerkarte \"Debug\" mit {{ core:show-debug-tab }} anzeigen",
+    "tip12" : "[ctrl] [Klicken] in den Arbeitsbereich, um den Schnellhinzufügedialog zu öffnen.",
+    "tip13" : "Halten Sie [ctrl] gedrückt, wenn Sie auf einem Node-Anschluss klicken, um eine Schnellverbindung zu aktivieren.",
+    "tip14" : "Halten Sie [Umschalt] gedrückt, wenn Sie auf einen Node klicken, um auch alle verbundenen Nodes auszuwählen.",
+    "tip15" : "Halten Sie [ctrl] gedrückt, wenn Sie auf einen Node klicken, um ihn aus der aktuellen Auswahl hinzuzufügen oder zu entfernen.",
+    "tip16" : "Indexzungen wechseln mit {{ core:show-previous-tab }} und {{ core:show-next-tab }}",
+    "tip17" : "Sie können die Änderungen im Editierrahmen des Nodes mit {{ core:confirm-edit-tray }} bestätigen oder sie mit {{ core:cancel-edit-tray }} abbrechen.",
+    "tip18" : "Durch Drücken von {{ core:edit-selected-node }} wird der erste Node in der aktuellen Auswahl bearbeitet."
+  }
+}

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

@@ -0,0 +1,222 @@
+{
+  "$string" : {
+    "args" : "arg",
+    "desc" : "Transformiert den Parameter *arg* in eine Zeichenfolge mit den folgenden Transformationsregeln:\n\n -Zeichenfolgen bleiben unverändert\n -Funktionen werden in eine leere Zeichenfolge konvertiert\n -Numerische Unendlichkeit und NaN lösen einen Fehler aus, da sie nicht als JSON-Nummer dargestellt werden können.\n -Alle anderen Werte werden mit Hilfe der Funktion 'JSON.stringify' in eine JSON-Zeichenfolge konvertiert."
+  },
+  "$length" : {
+    "args" : "str",
+    "desc" : "Gibt die Anzahl der Zeichen in der Zeichenfolge `str` zurück. Es wird ein Fehler ausgelöst, wenn `str` keine Zeichenfolge ist."
+  },
+  "$substring" : {
+    "args" : "str, start [, länge]",
+    "desc" : "Gibt eine Zeichenfolge zurück, die die Zeichen im ersten Parameter `str` beginnend bei Position `start` (Null-Offset) enthält. Wenn \"length\" angegeben ist, enthält die Unterzeichenfolge maximal \"Länge\" Zeichen. Wenn `start` negativ ist, gibt es die Anzahl der Zeichen am Ende von `str`  an."
+  },
+  "$substringBefore" : {
+    "args" : "str, chars",
+    "desc" : "Gibt die Unterzeichenfolge vor dem ersten Auftreten der Zeichenfolge `chars` in `str` zurück. Falls `str` nicht `chars` enthält, gibt es `str` zurück."
+  },
+  "$substringAfter" : {
+    "args" : "str, chars",
+    "desc" : "Gibt die Unterzeichenfolge nach dem ersten Auftreten der Zeichenfolge `chars` in `str` zurück. Falls `str` nicht `chars` enthält, gibt es `str` zurück."
+  },
+  "$uppercase" : {
+    "args" : "str",
+    "desc" : "Gibt eine Zeichenfolge mit allen Zeichen von `str` zurück, die in Großbuchstaben konvertiert werden."
+  },
+  "$lowercase" : {
+    "args" : "str",
+    "desc" : "Gibt eine Zeichenfolge mit allen Zeichen von `str` in Kleinbuchstaben zurück."
+  },
+  "$trim" : {
+    "args" : "str",
+    "desc" : "Normalisiert und trimmt alle Leerzeichen in `str` durch Anwenden der folgenden Schritte:\n\n -Alle Tabulatorstopps, Wagenrückläufe und Zeilenvorschübe werden durch Leerzeichen ersetzt.\n-Zusammenhängende Folgen von Räumen werden auf einen einzigen Raum reduziert.\n-Trailing und führende Plätze werden entfernt.\n\n Wenn 'str' nicht angegeben ist (d. h. Diese Funktion wird ohne Argumente aufgerufen), dann wird der Kontextwert als Wert von `str` verwendet. Es wird ein Fehler ausgelöst, wenn `str` keine Zeichenfolge ist."
+  },
+  "$contains" : {
+    "args" : "str, Muster",
+    "desc" : "Gibt `true` zurück, wenn `str` durch `Muster` abgeglichen wird, sonst gibt es `false` zurück. Wenn 'str' nicht angegeben ist (d. h. Diese Funktion wird mit einem Argument aufgerufen), dann wird der Kontextwert als Wert von `str` verwendet. Der Parameter 'Muster' kann entweder eine Zeichenfolge oder ein regulärer Ausdruck sein."
+  },
+  "$split" : {
+    "args" : "str [, Trennzeichen] [, Grenzwert]",
+    "desc" : "Teilt den Parameter 'str' in einem Array mit Unterzeichenfolgen. Es ist ein Fehler, wenn `str` keine Zeichenfolge ist. Der optionale Parameter 'Trennzeichen' gibt die Zeichen in der `str` an, um die es entweder als Zeichenfolge oder als regulärer Ausdruck geteilt werden soll. Wenn 'Trennzeichen' nicht angegeben wird, wird die leere Zeichenfolge angenommen, und `str` wird in ein Array aus einzelnen Zeichen aufgeteilt. Es handelt sich um einen Fehler, wenn `Trennzeichen' keine Zeichenfolge ist. Der optionale Parameter 'Grenzwert' ist eine Zahl, die die maximale Anzahl von Unterzeichenfolgen angibt, die in das resultierende Array eingeschlossen werden sollen. Alle zusätzlichen Unterzeichenfolgen werden gelöscht. Wenn 'Grenzwert' nicht angegeben wird, wird ' str ` vollständig geteilt, wobei die Größe des resultierenden Arrays nicht begrenzt ist. Es handelt sich um einen Fehler, wenn `Grenzwert' keine nicht negative Zahl ist."
+  },
+  "$join" : {
+    "args" : "array [, Trennzeichen]",
+    "desc" : "Verkettet ein Array von Komponentenzeichenfolgen in eine einzelne verkettete Zeichenfolge mit jeder Komponentenzeichenfolge, die durch den optionalen Parameter 'separator' getrennt ist. Es ist ein Fehler, wenn die Eingabe `Array` ein Element enthält, das keine Zeichenfolge ist. Wenn 'Trennzeichen' nicht angegeben wird, wird davon ausgegangen, dass es sich um eine leere Zeichenfolge handelt, d. h. Zwischen den Komponentenzeichenfolgen ist kein Trennzeichen vorhanden. Es handelt sich um einen Fehler, wenn `Trennzeichen' keine Zeichenfolge ist."
+  },
+  "$match" : {
+    "args" : "str, Muster [, Grenzwert]",
+    "desc" : "Wendet die Zeichenfolge `str`  an den regulären Ausdruck `Muster` an und gibt ein Array von Objekten zurück, wobei jedes Objekt Informationen zu jedem Vorkommen einer Übereinstimmung in `str` enthält."
+  },
+  "$replace" : {
+    "args" : "str, Muster, Ersatz [, Grenzwert]",
+    "desc" : "Findet Vorkommen von `Muster` in `str` und ersetzt sie durch `Ersatz`.\n\nDer optionale Parameter 'Grenzwert' ist die maximale Anzahl an Ersetzungen."
+  },
+  "$now" : {
+    "args" : "",
+    "desc" : "Generiert einen Zeitstempel im ISO-8601-kompatiblen Format und gibt sie als Zeichenfolge zurück."
+  },
+  "$base64encode" : {
+    "args" : "Zeichenfolge",
+    "desc" : "Konvertiert eine ASCII-Zeichenfolge in eine Basis-64-Darstellung. Jedes Zeichen in der Zeichenfolge wird als Byte mit binären Daten behandelt. Dies setzt voraus, dass alle Zeichen in der Zeichenfolge im Bereich von 0x00 bis 0xFF liegen, der alle Zeichen in URI-codierten Zeichenfolgen enthält. Unicode-Zeichen außerhalb dieses Bereichs werden nicht unterstützt."
+  },
+  "$base64decode" : {
+    "args" : "Zeichenfolge",
+    "desc" : "Konvertiert die Basis-64-codierten Byte in eine Zeichenfolge unter Verwendung einer UTF-8-Unicode-Codepage."
+  },
+  "$number" : {
+    "args" : "arg",
+    "desc" : "Der Parameter 'arg' wird unter Verwendung der folgenden Regeln für das Casting in eine Zahl verwendet:\n\n -Zahlen bleiben unverändert\n -Zeichenfolgen, die eine Folge von Zeichen enthalten, die eine rechtliche JSON-Nummer darstellen, werden in diese Zahl konvertiert.\n -Alle anderen Werte bewirken, dass ein Fehler ausgelöst wird."
+  },
+  "$abs" : {
+    "args" : "Anzahl",
+    "desc" : "Gibt den absoluten Wert des Parameters 'Zahl' zurück."
+  },
+  "$floor" : {
+    "args" : "Anzahl",
+    "desc" : "Gibt den Wert von 'Zahl' auf die nächste ganze Zahl zurück, die kleiner oder gleich 'Zahl' ist."
+  },
+  "$ceil" : {
+    "args" : "Anzahl",
+    "desc" : "Gibt den Wert von 'Zahl' auf die nächste ganze Zahl zurück, die größer oder gleich 'Zahl' ist."
+  },
+  "$round" : {
+    "args" : "Zahl [, Genauigkeit]",
+    "desc" : "Gibt den Wert des Parameters `Zahl` zurück, der auf die Anzahl der Dezimalstellen gerundet wird, die durch den optionalen Parameter 'Genauigkeit' angegeben wird."
+  },
+  "$power" : {
+    "args" : "Basis, Exponent",
+    "desc" : "Gibt den Wert von `Basis` potenziert mit `Exponent` zurück."
+  },
+  "$sqrt" : {
+    "args" : "Zahl",
+    "desc" : "Gibt die Quadratwurzel des Werts des Parameters 'Zahl' zurück."
+  },
+  "$random" : {
+    "args" : "",
+    "desc" : "Gibt eine Pseudozufallszahl größer-gleich null und kleiner als eins zurück."
+  },
+  "$millis" : {
+    "args" : "",
+    "desc" : "Gibt die Anzahl der Millisekunden seit der Unix-Epoche (1. Januar 1970 (UTC)) als Zahl zurück. Alle Invocationen von `$millis ()` innerhalb einer Auswertung eines Ausdrucks geben alle denselben Wert zurück."
+  },
+  "$sum" : {
+    "args" : "Array",
+    "desc" : "Gibt die arithmetische Summe eines `Array` von Zahlen zurück. Es ist ein Fehler, wenn die Eingabe `Array` ein Element enthält, das keine Zahl ist."
+  },
+  "$max" : {
+    "args" : "Array",
+    "desc" : "Gibt die maximale Anzahl in einem `Array` von Zahlen zurück. Es ist ein Fehler, wenn die Eingabe `Array` ein Element enthält, das keine Zahl ist."
+  },
+  "$min" : {
+    "args" : "Array",
+    "desc" : "Gibt die minimale Zahl in einem `Array` von Zahlen zurück. Es ist ein Fehler, wenn die Eingabe `Array` ein Element enthält, das keine Zahl ist."
+  },
+  "$average" : {
+    "args" : "Array",
+    "desc" : "Gibt den Mittelwert eines `Array` von Zahlen zurück. Es ist ein Fehler, wenn die Eingabe `Array` ein Element enthält, das keine Zahl ist."
+  },
+  "$boolean" : {
+    "args" : "arg",
+    "desc" : "Castet das Argument mit den folgenden Regeln in einen Booleschen Wert:\n\n -` Boolean ': nicht geändert\n -` string `: leer: `false`\n -` string `: nicht leer: `true`\n -` Zahl `: ` 0 `: ` falsch `\n -` Zahl `: Nicht-Null: `true`\n -` null `: `false`\n -` array `: leer: `false`\n -` array `: enthält ein Mitglied, das auf `true` setzt: `true`\n -` array `: alle Member werden in `false` umgesetzt: `false`\n -` object `: empty: `false`\n -` object `: non-empty: `true`\n -` Funktion `: ` falsch `"
+  },
+  "$not" : {
+    "args" : "arg",
+    "desc" : "Gibt den Booleschen Wert NOT für das Argument zurück. `arg` wird zuerst in einen Booleschen Wert umgesetzt."
+  },
+  "$exists" : {
+    "args" : "arg",
+    "desc" : "Gibt den Booleschen Wert 'true' zurück, wenn der Ausdruck `arg` als Wert ausgewertet wird, oder 'false', wenn der Ausdruck nicht mit einem anderen Ausdruck übereinstimmt (z. B. ein Pfad zu einer nicht vorhandenen Feldreferenz)."
+  },
+  "$count" : {
+    "args" : "Array",
+    "desc" : "Gibt die Anzahl der Elemente in dem Array zurück."
+  },
+  "$append" : {
+    "args" : "Array, Array",
+    "desc" : "Hängen Sie zwei Arrays an."
+  },
+  "$sort" : {
+    "args" : "array [, Funktion]",
+    "desc" : "Gibt ein Array zurück, das alle Werte im Parameter 'array' enthält, aber in der Reihenfolge sortiert wird.\n\nWenn ein Vergleichsoperator 'function' angegeben wird, muss es sich um eine Funktion handeln, die zwei Parameter benötigt:\n\n` Funktion (links, rechts) `\n\nDiese Funktion wird durch den Sortieralgorithmus aufgerufen, um zwei Werte links und rechts zu vergleichen. Wenn der Wert von links nach dem Wert von rechts in der gewünschten Sortierreihenfolge platziert werden soll, muss die Funktion den Booleschen Wert 'true' zurückgeben, um einen Auslagerungsspeicher anzuzeigen. Andernfalls muss 'false' zurückgegeben werden."
+  },
+  "$reverse" : {
+    "args" : "Array",
+    "desc" : "Gibt ein Array zurück, das alle Werte aus dem Parameter 'array' enthält, aber in umgekehrter Reihenfolge."
+  },
+  "$shuffle" : {
+    "args" : "Array",
+    "desc" : "Gibt ein Array zurück, das alle Werte aus dem Parameter ` array ` enthält, aber in zufälliger Reihenfolge geschattiert ist."
+  },
+  "$zip" : {
+    "args" : "Array, ...",
+    "desc" : "Gibt ein konvolviertes (gezipptes) Array zurück, das gruppierte Arrays von Werten aus den Argumenten ` array1 ` ... ` arrayN ' aus Index 0, 1, 2 ... enthält."
+  },
+  "$keys" : {
+    "args" : "Objekt",
+    "desc" : "Gibt ein Array zurück, das die Schlüssel in dem Objekt enthält. Wenn es sich bei dem Argument um ein Array von Objekten handelt, enthält das zurückgegebene Array eine deduplizierte Liste aller Schlüssel in allen Objekten."
+  },
+  "$lookup" : {
+    "args" : "Objekt, Schlüssel",
+    "desc" : "Gibt den Wert zurück, der dem Schlüssel im Objekt zugeordnet ist. Wenn es sich bei dem ersten Argument um ein Array von Objekten handelt, werden alle Objekte im Array durchsucht, und die Werte, die mit allen Vorkommen des Schlüssels verknüpft sind, werden zurückgegeben."
+  },
+  "$spread" : {
+    "args" : "Objekt",
+    "desc" : "Teilt ein Objekt, das Schlüssel/Wert-Paare enthält, in ein Array von Objekten, von denen jedes ein einzelnes Schlüssel/Wert-Paar aus dem Eingabeobjekt hat. Wenn es sich bei dem Parameter um ein Array von Objekten handelt, enthält die resultierende Feldgruppe ein Objekt für jedes Schlüssel/Wert-Paar in jedem Objekt in der angegebenen Feldgruppe."
+  },
+  "$merge" : {
+    "args" : "array <object>",
+    "desc" : "Mischt ein Array von ` Objekten ` in ein einzelnes ` Objekt `, das alle Schlüssel/Wert-Paare aus jedem der Objekte in dem Eingabe-Array enthält. Wenn eines der Eingabeobjekte denselben Schlüssel enthält, enthält das zurückgegebene Objekt den Wert des letzten Objekts in der Feldgruppe. Es handelt sich um einen Fehler, wenn das Eingabe-Array ein Element enthält, das kein Objekt ist."
+  },
+  "$sift" : {
+    "args" : "Objekt, Funktion",
+    "desc" : "Gibt ein Objekt zurück, das nur die Schlüssel/Wert-Paare aus dem Parameter 'object' enthält, die die Prädikat ` funktion ' erfüllen, die als zweiter Parameter übergeben wird.\n\nDie Funktion ` function `, die als zweiter Parameter angegeben wird, muss die folgende Signatur aufweisen:\n\n` function (value [, key [, object]]) `"
+  },
+  "$each" : {
+    "args" : "Objekt, Funktion",
+    "desc" : "Gibt ein Array zurück, das die Werte enthält, die von der Funktion ` function ` zurückgegeben werden, wenn sie auf jedes Schlüssel/Wert-Paar im ` object ` angewendet werden."
+  },
+  "$map" : {
+    "args" : "Array, Funktion",
+    "desc" : "Gibt ein Array zurück, das die Ergebnisse der Anwendung des Parameters ` function ` auf jeden Wert im Parameter 'array' enthält.\n\nDie Funktion ` function `, die als zweiter Parameter angegeben wird, muss die folgende Signatur aufweisen:\n\n` function (value [, index [, array]]) `"
+  },
+  "$filter" : {
+    "args" : "Array, Funktion",
+    "desc" : "Gibt ein Array zurück, das nur die Werte im Parameter 'array' enthält, die das Prädikat ` funktion ` erfüllen.\n\nDie Funktion ` function `, die als zweiter Parameter angegeben wird, muss die folgende Signatur aufweisen:\n\n` function (value [, index [, array]]) `"
+  },
+  "$reduce" : {
+    "args" : "array, function [, init]",
+    "desc" : "Gibt einen aggregierten Wert zurück, der aus der Anwendung des Parameters ` function 'nacheinander auf jeden Wert in' array ` in Kombination mit dem Ergebnis der vorherigen Anwendung der Funktion angewendet wurde.\n\nDie Funktion muss zwei Argumente akzeptieren und verhält sich wie ein Infix-Operator zwischen jedem Wert innerhalb des ` Array `.\n\nDer optionale Parameter 'init' wird als Anfangswert in der Aggregation verwendet."
+  },
+  "$flowContext" : {
+    "args" : "Zeichenfolge [, Zeichenfolge]",
+    "desc" : "Ruft eine Flusskontexteigenschaft ab.\n\nDies ist eine definierte Funktion vom Typ \"Node-RED\"."
+  },
+  "$globalContext" : {
+    "args" : "Zeichenfolge [, Zeichenfolge]",
+    "desc" : "Ruft eine globale Kontexteigenschaft ab.\n\nDies ist eine definierte Funktion vom Typ \"Node-RED\"."
+  },
+  "$pad" : {
+    "args" : "string, width [, char]",
+    "desc" : "Gibt eine Kopie der ` Zeichenfolge ` mit zusätzlichen Aufenthalten zurück, falls erforderlich, so dass die Gesamtzahl der Zeichen mindestens der absolute Wert des Parameters 'width' ist.\n\nWenn ` width ` eine positive Zahl ist, wird die Zeichenfolge nach rechts aufgefüllt. Wenn sie negativ ist, wird sie nach links geplisften.\n\nDas optionale Argument 'char' gibt die Padding-Zeichen an, die verwendet werden sollen. Wenn keine Angabe gemacht wird, wird standardmäßig der Wert für das Leerzeichen angenommen."
+  },
+  "$fromMillis" : {
+    "args" : "Anzahl",
+    "desc" : "Konvertieren Sie eine Zahl, die Millisekunden seit der Unix-Epoche (1. Januar 1970 (UTC)) enthält in eine Zeitangabe im ISO 8601-Format."
+  },
+  "$formatNumber" : {
+    "args" : "Zahl, Bild [, Optionen]",
+    "desc" : "Transformiere die `Zahl` an eine Zeichenfolge und formatiert sie in eine dezimale Darstellung, wie in der 'Bild' -Zeichenfolge angegeben.\n\n Das Verhalten dieser Funktion ist mit der XPath/XQuery-Funktion fn:formatnummer konsistent, wie sie in der XPath F&O 3.1-Spezifikation definiert ist. Der Parameter für die Bildzeichenfolge definiert, wie die Zahl formatiert ist und hat die gleiche Syntax wie fn:format-number.\n\nDas optionale dritte Argument ` Optionen ` wird verwendet, um die standardmäßigen länderspezifischen Formatierungszeichen, wie z. B. das Dezimaltrennzeichen, zu überschreiben. Wenn dieses Argument angegeben wird, muss es sich um ein Objekt handeln, das Name/Wert-Paare enthält, die im Abschnitt mit dem Dezimalformat der XPath F&O 3.1-Spezifikation angegeben sind."
+  },
+  "$formatBase" : {
+    "args" : "Zahl [, Radix]",
+    "desc" : "Transformiere die `Zahl` in eine Zeichenfolge und formatiert sie in eine ganze Zahl, die in der durch das `radix` -Argument angegebenen Zahlenbasis dargestellt wird. Wenn 'radix' nicht angegeben wird, wird standardmäßig die Basis 10 verwendet. 'radix` kann zwischen 2 und 36 liegen, andernfalls wird ein Fehler ausgelöst."
+  },
+  "$toMillis" : {
+    "args" : "timestamp",
+    "desc" : "Konvertieren Sie eine Zeitangabe im ISO 8601-Format in die Anzahl der Millisekunden seit der Unix-Epoche (1. Januar 1970 (UTC)) als Zahl. Es wird ein Fehler ausgelöst, wenn die Zeichenfolge nicht das richtige Format hat."
+  },
+  "$env" : {
+    "args" : "arg",
+    "desc" : "Gibt den Wert einer Umgebungsvariablen zurück.\n\nDies ist eine definierte Funktion vom Typ \"Node-RED\"."
+  }
+}

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

@@ -24,10 +24,12 @@
         "delete": "Are you sure you want to delete '__label__'?",
         "dropFlowHere": "Drop the flow here",
         "addFlow": "Add Flow",
+        "listFlows": "List Flows",
         "status": "Status",
         "enabled": "Enabled",
         "disabled":"Disabled",
-        "info": "Description"
+        "info": "Description",
+        "selectNodes": "Click nodes to select"
     },
     "menu": {
         "label": {
@@ -41,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"
@@ -58,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",
@@ -135,7 +136,12 @@
             "updated": "Project '__project__' updated",
             "pull": "Project '__project__' reloaded",
             "revert": "Project '__project__' reverted",
-            "merge-complete": "Git merge completed"
+            "merge-complete": "Git merge completed",
+            "setupCredentials": "Setup credentials",
+            "setupProjectFiles": "Setup project files",
+            "no": "No thanks",
+            "createDefault": "Create default project files",
+            "mergeConflict": "Show merge conflicts"
         },
         "label": {
             "manage-project-dep": "Manage project dependencies",
@@ -148,6 +154,7 @@
         }
     },
     "clipboard": {
+        "clipboard": "Clipboard",
         "nodes": "Nodes",
         "node": "__count__ node",
         "node_plural": "__count__ nodes",
@@ -157,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",
@@ -176,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",
@@ -266,16 +276,22 @@
         "newVersionError": "New Version doesn't contain valid JSON:"
     },
     "subflow": {
-        "editSubflow": "Edit flow template: __name__",
-        "edit": "Edit flow template",
+        "editSubflowInstance": "Edit subflow instance: __name__",
+        "editSubflow": "Edit subflow template: __name__",
+        "edit": "Edit subflow template",
         "subflowInstances": "There is __count__ instance of this subflow template",
         "subflowInstances_plural": "There are __count__ instances of this subflow template",
         "editSubflowProperties": "edit properties",
         "input": "inputs:",
         "output": "outputs:",
+        "status": "status node",
         "deleteSubflow": "delete subflow",
         "info": "Description",
         "category": "Category",
+        "env": {
+            "restore": "Restore to subflow default",
+            "remove": "Remove environment variable"
+        },
         "errors": {
             "noNodesSelected": "<strong>Cannot create subflow</strong>: no nodes selected",
             "multipleInputsToSelection": "<strong>Cannot create subflow</strong>: multiple inputs to selection"
@@ -306,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": {
@@ -337,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",
@@ -375,7 +391,7 @@
         },
         "event": {
             "nodeAdded": "Node added to palette:",
-            "nodeAdded_plural": "Nodes added to palette",
+            "nodeAdded_plural": "Nodes added to palette:",
             "nodeRemoved": "Node removed from palette:",
             "nodeRemoved_plural": "Nodes removed from palette:",
             "nodeEnabled": "Node enabled:",
@@ -513,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",
@@ -538,14 +555,19 @@
                 "removeFromProject": "remove from project",
                 "addToProject": "add to project",
                 "files": "Files",
+                "package": "Package",
                 "flow": "Flow",
                 "credentials": "Credentials",
+                "package":"Package",
+                "packageCreate":"File will be created when changes are saved",
+                "fileNotExist":"File does not exist",
+                "selectFile": "Select File",
                 "invalidEncryptionKey": "Invalid encryption key",
                 "encryptionEnabled": "Encryption enabled",
                 "encryptionDisabled": "Encryption disabled",
-                "setTheEncryptionKey": "Set the encryption key:",
-                "resetTheEncryptionKey": "Reset the encryption key:",
-                "changeTheEncryptionKey": "Change the encryption key:",
+                "setTheEncryptionKey": "Set the encryption key",
+                "resetTheEncryptionKey": "Reset the encryption key",
+                "changeTheEncryptionKey": "Change the encryption key",
                 "currentKey": "Current key",
                 "newKey": "New key",
                 "credentialsAlert": "This will delete all existing credentials",
@@ -709,6 +731,9 @@
     "jsEditor": {
         "title": "JavaScript editor"
     },
+    "textEditor": {
+        "title": "Text editor"
+    },
     "jsonEditor": {
         "title": "JSON editor",
         "format": "format JSON"
@@ -744,6 +769,7 @@
             "desc2": "If you are not sure, you can skip this for now. You will still be able to create your first project from the 'Projects' menu at any time.",
             "create": "Create Project",
             "clone": "Clone Repository",
+            "openExistingProject": "Open existing project",
             "not-right-now": "Not right now"
         },
         "git-config": {
@@ -901,6 +927,7 @@
     "editor-tab": {
         "properties": "Properties",
         "description": "Description",
-        "appearance": "Appearance"
+        "appearance": "Appearance",
+        "env": "Environment Variables"
     }
 }

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

@@ -4,7 +4,7 @@
         "tip1" : "Search for nodes using {{core:search}}",
         "tip2" : "{{core:toggle-sidebar}} will toggle the view of this sidebar",
         "tip3" : "You can manage your palette of nodes with {{core:manage-palette}}",
-        "tip4" : "Your flow configuration nodes are listed in the sidebar panel. It can been accessed from the menu or with {{core:show-config-tab}}",
+        "tip4" : "Your flow configuration nodes are listed in the sidebar panel. It can be accessed from the menu or with {{core:show-config-tab}}",
         "tip5" : "Enable or disable these tips from the option in the settings",
         "tip6" : "Move the selected nodes using the [left] [up] [down] and [right] keys. Hold [shift] to nudge them further",
         "tip7" : "Dragging a node onto a wire will splice it into the link",

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

@@ -218,5 +218,18 @@
     "$env": {
         "args": "arg",
         "desc": "Returns the value of an environment variable.\n\nThis is a Node-RED defined function."
+    },
+    "$eval": {
+        "args": "expr [, context]",
+        "desc": "Parses and evaluates the string `expr` which contains literal JSON or a JSONata expression using the current context as the context for evaluation."
+    },
+    "$formatInteger": {
+        "args": "number, picture",
+        "desc": "Casts the `number` to a string and formats it to an integer representation as specified by the `picture` string. The picture string parameter defines how the number is formatted and has the same syntax as `fn:format-integer` from the XPath F&O 3.1 specification."
+    },
+    "$parseInteger": {
+        "args": "string, picture",
+        "desc": "Parses the contents of the `string` parameter to an integer (as a JSON number) using the format specified by the `picture` string. The `picture` string parameter has the same format as `$formatInteger`."
+
     }
 }

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

@@ -24,6 +24,7 @@
         "delete": "本当に '__label__' を削除しますか？",
         "dropFlowHere": "ここにフローをドロップしてください",
         "addFlow": "フローの追加",
+        "listFlows": "フロー一覧",
         "status": "状態",
         "enabled": "有効",
         "disabled": "無効",
@@ -58,9 +59,6 @@
             "export": "書き出し",
             "search": "ノードを検索",
             "searchInput": "ノードを検索",
-            "clipboard": "クリップボード",
-            "library": "ライブラリ",
-            "examples": "サンプル",
             "subflows": "サブフロー",
             "createSubflow": "サブフローを作成",
             "selectionToSubflow": "選択部分をサブフロー化",
@@ -107,7 +105,7 @@
             "undeployedChanges": "ノードの変更をデプロイしていません",
             "nodeActionDisabled": "ノードのアクションは無効になっています",
             "nodeActionDisabledSubflow": "ノードのアクションは、サブフロー内で無効になっています",
-            "missing-types": "不明なノードが存在するため、フローを停止しました。詳細はログを確認してください。",
+            "missing-types": "<p>不明なノードが存在するため、フローを停止しました。</p>",
             "safe-mode": "<p>セーフモードでフローを停止しました</p><p>フローを変更し、再起動するために変更をデプロイできます</p>",
             "restartRequired": "更新されたモジュールを有効化するため、Node-REDを再起動する必要があります",
             "credentials_load_failed": "<p>認証情報を復号できないため、フローを停止しました</p><p>フローの認証情報ファイルは暗号化されています。しかし、プロジェクトの暗号鍵が存在しない、または不正です</p>",
@@ -125,7 +123,7 @@
             "lostConnectionTry": "すぐに接続",
             "cannotAddSubflowToItself": "サブフロー自身を追加できません",
             "cannotAddCircularReference": "循環参照を検出したため、サブフローを追加できません",
-            "unsupportedVersion": "<p>サポートされていないバージョンのNode.jsを使用しています。</p><p><br/>最新のNode.js LTSに更新してください。</p>",
+            "unsupportedVersion": "<p>サポートされていないバージョンのNode.jsを使用しています。</p><p>最新のNode.js LTSに更新してください。</p>",
             "failedToAppendNode": "<p>'__module__'がロードできませんでした。</p><p>__error__</p>"
         },
         "project": {
@@ -135,7 +133,12 @@
             "updated": "プロジェクト'__project__'を更新しました",
             "pull": "プロジェクト'__project__'を再ロードしました",
             "revert": "プロジェクト'__project__'を取り消しました",
-            "merge-complete": "Gitマージが完了しました"
+            "merge-complete": "Gitマージが完了しました",
+            "setupCredentials": "認証情報を設定",
+            "setupProjectFiles": "プロジェクトファイルの設定",
+            "no": "結構です",
+            "createDefault": "デフォルトのプロジェクトファイルを作成",
+            "mergeConflict": "マージの衝突を表示"
         },
         "label": {
             "manage-project-dep": "プロジェクトの依存関係の管理",
@@ -148,6 +151,7 @@
         }
     },
     "clipboard": {
+        "clipboard": "クリップボード",
         "nodes": "ノード",
         "node": "__count__ 個のノード",
         "node_plural": "__count__ 個のノード",
@@ -157,7 +161,6 @@
         "flow_plural": "__count__ 個のフロー",
         "subflow": "__count__ 個のサブフロー",
         "subflow_plural": "__count__ 個のサブフロー",
-        "selectNodes": "上のテキストを選択し、クリップボードへコピーしてください",
         "pasteNodes": "JSON形式のフローデータを貼り付けてください",
         "selectFile": "読み込むファイルを選択してください",
         "importNodes": "フローをクリップボートから読み込み",
@@ -266,16 +269,22 @@
         "newVersionError": "新しいバージョンは正しいJSON形式ではありません:"
     },
     "subflow": {
-        "editSubflow": "フローのテンプレートを編集: __name__",
-        "edit": "フローのテンプレートを編集",
+        "editSubflowInstance": "サブフローインスタンスを編集: __name__",
+        "editSubflow": "サブフローのテンプレートを編集: __name__",
+        "edit": "サブフローのテンプレートを編集",
         "subflowInstances": "このサブフローのテンプレートのインスタンスが __count__ 個存在します",
         "subflowInstances_plural": "このサブフローのテンプレートのインスタンスが __count__ 個存在します",
         "editSubflowProperties": "プロパティを編集",
         "input": "入力:",
         "output": "出力:",
+        "status": "ステータスノード",
         "deleteSubflow": "サブフローを削除",
         "info": "詳細",
         "category": "カテゴリ",
+        "env": {
+            "restore": "デフォルト値に戻す",
+            "remove": "環境変数を削除"
+        },
         "errors": {
             "noNodesSelected": "<strong>サブフローを作成できません</strong>: ノードが選択されていません",
             "multipleInputsToSelection": "<strong>サブフローを作成できません</strong>: 複数の入力が選択されています"
@@ -337,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": "情報がありません",
@@ -375,7 +381,7 @@
         },
         "event": {
             "nodeAdded": "ノードをパレットへ追加しました:",
-            "nodeAdded_plural": "ノードをパレットへ追加しました",
+            "nodeAdded_plural": "ノードをパレットへ追加しました:",
             "nodeRemoved": "ノードをパレットから削除しました:",
             "nodeRemoved_plural": "ノードをパレットから削除しました:",
             "nodeEnabled": "ノードを有効化しました:",
@@ -431,7 +437,7 @@
             "more": "+ さらに __count__ 個",
             "errors": {
                 "catalogLoadFailed": "<p>ノードのカタログの読み込みに失敗しました。</p><p>詳細はブラウザのコンソールを確認してください。</p>",
-                "installFailed": "<p.追加処理が失敗しました: __module__</p><p>__message__</p><p>詳細はログを確認してください。</p>",
+                "installFailed": "<p>追加処理が失敗しました: __module__</p><p>__message__</p><p>詳細はログを確認してください。</p>",
                 "removeFailed": "<p>削除処理が失敗しました: __module__</p><p>__message__</p><p>詳細はログを確認してください。</p>",
                 "updateFailed": "<p>更新処理が失敗しました: __module__</p><p>__message__</p><p>詳細はログを確認してください。</p>",
                 "enableFailed": "<p>有効化処理が失敗しました: __module__</p><p>__message__</p><p>詳細はログを確認してください。</p>",
@@ -538,14 +544,18 @@
                 "removeFromProject": "プロジェクトから削除",
                 "addToProject": "プロジェクトへ追加",
                 "files": "ファイル",
+                "package": "パッケージ",
                 "flow": "フロー",
                 "credentials": "認証情報",
+                "packageCreate": "変更が保存された時にファイルが作成されます",
+                "fileNotExist": "ファイルが存在しません",
+                "selectFile": "ファイルを選択",
                 "invalidEncryptionKey": "不正な暗号化キー",
                 "encryptionEnabled": "暗号化が有効になっています",
                 "encryptionDisabled": "暗号化が無効になっています",
-                "setTheEncryptionKey": "暗号化キーを設定:",
-                "resetTheEncryptionKey": "暗号化キーを初期化:",
-                "changeTheEncryptionKey": "暗号化キーを変更:",
+                "setTheEncryptionKey": "暗号化キーを設定",
+                "resetTheEncryptionKey": "暗号化キーを初期化",
+                "changeTheEncryptionKey": "暗号化キーを変更",
                 "currentKey": "現在のキー",
                 "newKey": "新規のキー",
                 "credentialsAlert": "既存の認証情報は全て削除されます",
@@ -744,6 +754,7 @@
             "desc2": "とりあえずこの処理をスキップしてもかまいません。「プロジェクト」メニューから、いつでもプロジェクトの作成を開始できます。",
             "create": "プロジェクトの作成",
             "clone": "プロジェクトのクローン",
+            "openExistingProject": "既存のプロジェクトを開く",
             "not-right-now": "後にする"
         },
         "git-config": {
@@ -901,6 +912,7 @@
     "editor-tab": {
         "properties": "プロパティ",
         "description": "説明",
-        "appearance": "外観"
+        "appearance": "外観",
+        "env": "環境変数"
     }
 }

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

@@ -218,5 +218,17 @@
     "$env": {
         "args": "arg",
         "desc": "環境変数の値を返します。\n\n本関数はNode-REDの定義関数です。"
+    },
+    "$eval": {
+        "args": "expr [, context]",
+        "desc": "JSONリテラルもしくはJSONata式を表す`expr`を評価します。評価の際には現在のコンテキストをコンテキストとして用います。"
+    },
+    "$formatInteger": {
+        "args": "number, picture",
+        "desc": "`number`を`picture`指定に従って文字列に変換します。`picture`文字列は数値の変換方法をXPath F&O 3.1仕様の`fn:format-integer`に従って定義します。"
+    },
+    "$parseInteger": {
+        "args": "string, picture",
+        "desc": "`picture`文字列の指定に従って、`string`パラメータを整数(JSON数値)に変換します。`picture`文字列は`$formatInteger`と同じ形式です。"
     }
 }

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

@@ -0,0 +1,901 @@
+{
+  "common": {
+    "label": {
+      "name": "이름",
+      "ok": "확인",
+      "done": "완료",
+      "cancel": "취소",
+      "delete": "삭제",
+      "close": "닫기",
+      "load": "열기",
+      "save": "저장",
+      "import": "가져오기",
+      "export": "내보내기",
+      "back": "뒤로",
+      "next": "앞으로",
+      "clone": "프로젝트 복제",
+      "cont": "계속하기"
+    }
+  },
+  "workspace": {
+    "defaultName": "플로우 __number__",
+    "editFlow": "플로우 수정 : __name__",
+    "confirmDelete": "삭제 확인",
+    "delete": "정말로 '__label__' 을(를) 삭제하시겠습니까?",
+    "dropFlowHere": "플로우를 이곳에 가져오세요",
+    "addFlow": "플로우 추가",
+    "status": "상태",
+    "enabled": "사용가능",
+    "disabled": "사용불가능",
+    "info": "상세내역"
+  },
+  "menu": {
+    "label": {
+      "view": {
+        "view": "창",
+        "grid": "눈금선",
+        "showGrid": "눈금선 보이기",
+        "snapGrid": "노드 배치 보조 켜기",
+        "gridSize": "눈금선 크기",
+        "textDir": "텍스트 방향",
+        "defaultDir": "기본",
+        "ltr": "왼쪽 -> 오른쪽",
+        "rtl": "오른쪽 -> 왼쪽",
+        "auto": "자동배분"
+      },
+      "sidebar": {
+        "show": "우측사이드바 보이기"
+      },
+      "palette": {
+        "show": "팔렛트 보이기"
+      },
+      "settings": "설정",
+      "userSettings": "사용자 설정",
+      "nodes": "노드설정",
+      "displayStatus": "노드상태 보이기",
+      "displayConfig": "설정노드 보기",
+      "import": "가져오기",
+      "export": "내보내기",
+      "search": "플로우 겅색",
+      "searchInput": "플로우 검색",
+      "subflows": "보조 플로우",
+      "createSubflow": "보조 플로우 생성",
+      "selectionToSubflow": "보조 플로우 선택",
+      "flows": "플로우",
+      "add": "추가",
+      "rename": "이름변경",
+      "delete": "삭제",
+      "keyboardShortcuts": "단축키",
+      "login": "로그인",
+      "logout": "로그아웃",
+      "editPalette": "팔렛트 관리",
+      "other": "기타",
+      "showTips": "Tip 보기",
+      "help": "Node-RED 웹사이트",
+      "projects": "프로젝트",
+      "projects-new": "신규",
+      "projects-open": "열기",
+      "projects-settings": "프로젝트 설정",
+      "showNodeLabelDefault": "새로 추가된 노드의 라벨 보이기"
+    }
+  },
+  "actions": {
+    "toggle-navigator": "네비게이터 표시/비표시",
+    "zoom-out": "축소하기",
+    "zoom-reset": "확대/축소 초기화",
+    "zoom-in": "확대하기"
+  },
+  "user": {
+    "loggedInAs": "__name__ 에 로그인됨",
+    "username": "사용자명",
+    "password": "비밀번호",
+    "login": "로그인",
+    "loginFailed": "로그인 실패",
+    "notAuthorized": "권한이 없습니다",
+    "errors": {
+      "settings": "로그인 후 설정이 가능합니다",
+      "deploy": "로그인 후 배포가 가능합니다",
+      "notAuthorized": "이 기능은 로그인 후 사용가능합니다"
+    }
+  },
+  "notification": {
+    "warning": "<strong>경고</strong>: __message__",
+    "warnings": {
+      "undeployedChanges": "변경사항 배포가 취소되었습니다",
+      "nodeActionDisabled": "노드 실행이 비활성화 되었습니다",
+      "nodeActionDisabledSubflow": "보조 플로우에서 노드 실행이 비활성화 되었습니다",
+      "missing-types": "<p>타입이 없는 노드로인해 플로우가 중지되었습니다</p>",
+      "safe-mode": "<p>[안전모드] 플로우가 정지되었습니다.</p><p>플로우의 수정과 배포가 가능합니다. 다시 배포버튼을 누르세요.</p>",
+      "restartRequired": "업그레이드한 모듈을 유효화하기 위해 Node-RED를 재시작 합니다 ",
+      "credentials_load_failed": "<p>인증정보 복호화에 실패하여 플로우가 멈췄습니다. </p><p>인증정보는 암호화 되어있습니다. 프로젝트의 암호화 키가 깨졌거나 정상적이지 않습니다.</p>",
+      "credentials_load_failed_reset": "<p>인증정보를 복호화할 수 없습니다</p><p>인증정보는 암호화 되어있습니다. 프로젝트의 암호화 키가 깨졌거나 정상적이지 않습니다.</p><p>다음 배포시 플로우의 인증정보는 초기화 될것입니다. 기존 모든 플로우의 인증정보가 지워집니다.</p>",
+      "missing_flow_file": "<p>프로젝트 플로우 파일을 찾을 수 없습니다</p><p>프로젝트의 플로우 파일이 설정되지 않았습니다</p>",
+      "missing_package_file": "<p>프로젝트 패키지 파일을 찾을 수 없습니다</p><p>프로젝트의 package.json 파일이 없습니다</p>",
+      "project_empty": "<p>프로젝트가 누락되어 있습니다.</p><p>기본 프로젝트 파일을 만드시겠습니까?<br/>그렇지 않으면 수동으로 편집가 외부에 프로젝트 파일을 만드셔야 합니다.</p>",
+      "project_not_found": "<p>'__project__' 가 없습니다.</p>",
+      "git_merge_conflict": "<p>변경사항 자동병합에 실패했습니다.</p><p>병합되지 않은 충돌을 수정 후 재등록 하세요.</p>"
+    },
+    "error": "<strong>에러</strong>: __message__",
+    "errors": {
+      "lostConnection": "서버와 연결이 끊어졌습니다. 재접속을 시도합니다 ...",
+      "lostConnectionReconnect": "서버와 연결이 끊어졌습니다. __time__ 초 안에 재접속을 시도합니다.",
+      "lostConnectionTry": "지금 재접속",
+      "cannotAddSubflowToItself": "서브플로우 자기자신을 추가할 수 없습니다",
+      "cannotAddCircularReference": "순환참조가 발견되었습니다. 서브플로우를 추가할 수 없습니다",
+      "unsupportedVersion": "<p>지원하지 않는 Node.js를 사용하고 있습니다</p><p>Node.js LTS 버전을 사용해 주세요</p>",
+      "failedToAppendNode": "<p>'__module__' 읽어오기 실패</p><p>__error__</p>"
+    },
+    "project": {
+      "change-branch": "로컬지점으로 '__project__' 변경",
+      "merge-abort": "Git 병합을 중지했습니다.",
+      "loaded": "'__project__' 프로젝트를 열었습니다",
+      "updated": "'__project__'가 변경 되었습니다",
+      "pull": "'__project__'를 다시 가져왔습니다",
+      "revert": "'__project__'를 취소했습니다",
+      "merge-complete": "Git 병합이 완료되었습니다"
+    },
+    "label": {
+      "manage-project-dep": "프로젝트 의존성 관리",
+      "setup-cred": "인증정보 설정",
+      "setup-project": "프로젝트 파일 설정",
+      "create-default-package": "기본 패키지 파일 생성",
+      "no-thanks": "괜찮습니다",
+      "create-default-project": "기본 프로젝트 파일 생성",
+      "show-merge-conflicts": "병합 충돌 보여주기"
+    }
+  },
+  "clipboard": {
+    "clipboard": "클립보드",
+    "nodes": "노드",
+    "node": "__count__ 개의 노드",
+    "node_plural": "__count__ 개의 노드",
+    "configNode": "__count__ 개의 설정 노드",
+    "configNode_plural": "__count__ 개의 설정 노드",
+    "flow": "__count__ 개의 플로우",
+    "flow_plural": "__count__ 개의 플로우",
+    "subflow": "__count__ 개의 서브 플로우",
+    "subflow_plural": "__count__ 개의 서브 플로우",
+    "pasteNodes": "여기에 노드를 붙여넣기 하세요",
+    "selectFile": "불러올 파일을 선택하세요",
+    "importNodes": "노드 불러오기",
+    "exportNodes": "클립보드에 노드 내보내기",
+    "download": "다운로드",
+    "importUnrecognised": "알 수 없는 형식 :",
+    "importUnrecognised_plural": "알 수 없는 형식 :",
+    "nodesExported": "클립보드에 노드 내보내기",
+    "nodesImported": "불러오기 : ",
+    "nodeCopied": "__count__개의 노드가 복사 되었습니다",
+    "nodeCopied_plural": "__count__개의 노드가 복사 되었습니다",
+    "invalidFlow": "정상적지 않은 플로우 : __message__",
+    "export": {
+      "selected": "선택된 노드",
+      "current": "현재 플로우",
+      "all": "모든 플로우",
+      "compact": "압축형식",
+      "formatted": "서식유지",
+      "copy": "클립보드로 내보내기"
+    },
+    "import": {
+      "import": "가져올 위치 : ",
+      "newFlow": "새로운 플로우",
+      "errors": {
+        "notArray": "입력이 JSON 배열이 아닙니다",
+        "itemNotObject": "입력이 올바른 플로우가 아닙니다 - __index__는 노드 오브젝트가 아닙니다",
+        "missingId": "입력이 올바른 플로우가 아닙니다 - __index__의 'id' 속성이 없습니다",
+        "missingType": "입력이 올바른 플로우가 아닙니다 - __index__의 'type' 속성이 없습니다"
+      }
+    },
+    "copyMessagePath": "Path가 복사 되었습니다",
+    "copyMessageValue": "Value가 복사 되었습니다",
+    "copyMessageValue_truncated": "Truncated value가 복사 되었습니다"
+  },
+  "deploy": {
+    "deploy": "배포하기",
+    "full": "전체",
+    "fullDesc": "작업공간 내 모든 플로우를 배포합니다",
+    "modifiedFlows": "변경된 플로우",
+    "modifiedFlowsDesc": "변경사항이 있는 플로우만 배포합니다",
+    "modifiedNodes": "변경된 노드",
+    "modifiedNodesDesc": "변경사항이 있는 노드만 배포합니다",
+    "restartFlows": "플로우 재시작",
+    "restartFlowsDesc": "현재 배포된 플로우를 재시작합니다",
+    "successfulDeploy": "배포가 성공했습니다",
+    "successfulRestart": "플로우 재시작을 성공했습니다",
+    "deployFailed": "배포 실패 : __message__",
+    "unusedConfigNodes": "사용되지 않는 설정노드가 있습니다",
+    "unusedConfigNodesLink": "여기를 클릭하면 볼 수 있습니다",
+    "errors": {
+      "noResponse": "서버의 응답이 없습니다"
+    },
+    "confirm": {
+      "button": {
+        "ignore": "무시",
+        "confirm": "배포 확인",
+        "review": "변경사항 보기",
+        "cancel": "취소",
+        "merge": "병합",
+        "overwrite": "무시하고 배포하기"
+      },
+      "undeployedChanges": "배포되지 않은 변경사항이 있습니다.\n\n이 페이지를 떠나면 변경사항이 사라집니다",
+      "improperlyConfigured": "작업공간에 올바르게 구성되지 않은 노드가 있습니다 :",
+      "unknown": "작업공간에 알려지지 않는 노드타입이 있습니다 :",
+      "confirm": "배포하시겠습니까?",
+      "doNotWarn": "이 경고를 무시",
+      "conflict": "서버가 최신 플로우를 사용중입니다",
+      "backgroundUpdate": "플로우가 변경되었습니다",
+      "conflictChecking": "변경사항이 자동으로 병합될 수 있는지 확인",
+      "conflictAutoMerge": "변경사항에 충돌이 없습니다. 자동병합이 가능합니다",
+      "conflictManualMerge": "변경사항에 충돌이 있습니다. 배포하기 전에 충돌을 해결하세요",
+      "plusNMore": "+ __count__ 개 더보기"
+    }
+  },
+  "eventLog": {
+    "title": "이벤트 로그",
+    "view": "로그 보기"
+  },
+  "diff": {
+    "unresolvedCount": "__count__개의 충돌이 해결되지 않음",
+    "unresolvedCount_plural": "__count__개의 충돌이 해결되지 않음",
+    "globalNodes": "Global 노드",
+    "flowProperties": "플로우 속성",
+    "type": {
+      "added": "추가됨",
+      "changed": "변경됨",
+      "unchanged": "변경없음",
+      "deleted": "삭제됨",
+      "flowDeleted": "플로우 삭제됨",
+      "flowAdded": "플로우 추가됨",
+      "movedTo": "__id__로 이동됨",
+      "movedFrom": "__id__로 부터 이동됨"
+    },
+    "nodeCount": "__count__ 개의 노드",
+    "nodeCount_plural": "__count__ 개의 노드",
+    "local": "로컬 변경사항",
+    "remote": "원격 변경사항",
+    "reviewChanges": "변경사항 살펴보기",
+    "noBinaryFileShowed": "바이너리파일 내용을 볼수 없습니다",
+    "viewCommitDiff": "변경사항 보기",
+    "compareChanges": "변경사항 비교",
+    "saveConflict": "충돌 해결내용 저장",
+    "conflictHeader": "<span>__unresolved__</span> 개 중 <span>__resolved__</span> 충돌이 해결됨",
+    "commonVersionError": "Common Version의 JSON 형식이 올바르지 않습니다 :",
+    "oldVersionError": "Old Version의 JSON 형식이 올바르지 않습니다 :",
+    "newVersionError": "New Version의 JSON 형식이 올바르지 않습니다 :"
+  },
+  "subflow": {
+    "editSubflow": "플로우 템플릿 수정 : __name__",
+    "edit": "플로우 템플릿 수정",
+    "subflowInstances": "서브 플로우 템플릿에 __count__개의 인스턴스가 있습니다",
+    "subflowInstances_plural": "서브 플로우 템플릿에 __count__개의 인스턴스가 있습니다",
+    "editSubflowProperties": "속성 수정",
+    "input": "입력:",
+    "output": "출력:",
+    "deleteSubflow": "서브 플로우 삭제",
+    "info": "상세내역",
+    "category": "카테고리",
+    "format": "Markdown 형식",
+    "errors": {
+      "noNodesSelected": "<strong>서브 플로우를 생성할 수 없습니다</strong> : 노드가 선택되지 않았습니다",
+      "multipleInputsToSelection": "<strong>서브 플로우를 생성할 수 없습니다</strong> : 복수의 입력이 선택되었습니다"
+    }
+  },
+  "editor": {
+    "configEdit": "수정",
+    "configAdd": "추가",
+    "configUpdate": "변경",
+    "configDelete": "삭제",
+    "nodesUse": "__count__개의 노드가 이 설정을 사용중입니다",
+    "nodesUse_plural": "__count__개의 노드가 이 설정을 사용중입니다",
+    "addNewConfig": "__type__의 설정노드 추가",
+    "editNode": "__type__의 노드 수정",
+    "editConfig": "__type__의 설정노드 수정",
+    "addNewType": "__type__의 노드타입 추가 ...",
+    "nodeProperties": "노드 속성",
+    "label": "명칭",
+    "portLabels": "포트 설정",
+    "labelInputs": "입력",
+    "labelOutputs": "출력",
+    "settingIcon": "아이콘",
+    "noDefaultLabel": "없음",
+    "defaultLabel": "기본 명칭",
+    "searchIcons": "아이콘 조회",
+    "useDefault": "기본설정 사용",
+    "description": "상세 내역",
+    "show": "보이기",
+    "hide": "숨기기",
+    "errors": {
+      "scopeChange": "범위를 변경하게 되면 다른 플로우의 노드가 사용이 불가능해 집니다."
+    }
+  },
+  "keyboard": {
+    "title": "키보드 단축키",
+    "keyboard": "키보드",
+    "filterActions": "필터",
+    "shortcut": "단축키",
+    "scope": "범위",
+    "unassigned": "미할당",
+    "global": "글로벌",
+    "workspace": "작업공간",
+    "selectAll": "모든 노드 선택",
+    "selectAllConnected": "모든 연결된 노드 선택",
+    "addRemoveNode": "노드 추가/삭제",
+    "editSelected": "선택된 노드 수정",
+    "deleteSelected": "선택된 노드나 링크를 삭제",
+    "importNode": "노드 불러오기",
+    "exportNode": "노드 내보내기",
+    "nudgeNode": "선택된 노드 이동 (1px)",
+    "moveNode": "선택된 노드 이동 (20px)",
+    "toggleSidebar": "사이드바 표시/비표시",
+    "togglePalette": "팔렛트 표시/비표시",
+    "copyNode": "선택된 노드 복사",
+    "cutNode": "선택된 노드 잘라내기",
+    "pasteNode": "노드 붙여넣기",
+    "undoChange": "마지막 변경 되돌리기",
+    "searchBox": "검색창 열기",
+    "managePalette": "팔렛트 관리"
+  },
+  "library": {
+    "library": "라이브러리",
+    "openLibrary": "라이브러리 열기...",
+    "saveToLibrary": "라이브러리로 저장...",
+    "typeLibrary": "__type__ 라이브러리",
+    "unnamedType": "이름없는 __type__",
+    "dialogSaveOverwrite": "__libraryType__이 __libraryName__으로 이미 등록되어있습니다. 덮어쓸까요?",
+    "invalidFilename": "파일명이 올바르지 않습니다",
+    "savedNodes": "저장된 노드",
+    "savedType": "저장된 __type__",
+    "saveFailed": "저장 실패 : __message__",
+    "types": {
+        "examples": "예시"
+    }
+  },
+  "palette": {
+    "noInfo": "정보 없음",
+    "filter": "필터",
+    "search": "모듈 검색",
+    "addCategory": "추가 ...",
+    "label": {
+      "subflows": "서브 플로우",
+      "input": "입력",
+      "output": "출력",
+      "function": "기능",
+      "social": "소셜",
+      "storage": "저장",
+      "analysis": "분석",
+      "advanced": "그 외"
+    },
+    "actions": {
+      "collapse-all": "모든 카테고리 접기",
+      "expand-all": "모든 카테고리 펼치기"
+    },
+    "event": {
+      "nodeAdded": "팔렛트에 노드가 추가되었습니다:",
+      "nodeAdded_plural": "팔렛트에 노드가 추가되었습니다:",
+      "nodeRemoved": "팔렛트에서 노드가 삭제되었습니다:",
+      "nodeRemoved_plural": "팔렛트에서 노드가 삭제되었습니다:",
+      "nodeEnabled": "노드가 활성화 되었습니다:",
+      "nodeEnabled_plural": "노드가 활성화 되었습니다:",
+      "nodeDisabled": "노드가 비활성화 되었습니다:",
+      "nodeDisabled_plural": "노드가 비활성화 되었습니다:",
+      "nodeUpgraded": "__module__ 노드모듈이 __version__으로 업그레이드 되었습니다"
+    },
+    "editor": {
+      "title": "팔렛트 관리",
+      "palette": "팔렛트",
+      "times": {
+        "seconds": "몇초 전",
+        "minutes": "몇분 전",
+        "minutesV": "__count__분 전",
+        "hoursV": "__count__시간 전",
+        "hoursV_plural": "__count__시간 전",
+        "daysV": "__count__일 전",
+        "daysV_plural": "__count__일 전",
+        "weeksV": "__count__주 전",
+        "weeksV_plural": "__count__주 전",
+        "monthsV": "__count__달 전",
+        "monthsV_plural": "__count__달 전",
+        "yearsV": "__count__년 전",
+        "yearsV_plural": "__count__년 전",
+        "yearMonthsV": "__y__년, __count__월 전",
+        "yearMonthsV_plural": "__y__년, __count__월 전",
+        "yearsMonthsV": "__y__년, __count__월 전",
+        "yearsMonthsV_plural": "__y__년, __count__월 전"
+      },
+      "nodeCount": "__label__ 개의 노드",
+      "nodeCount_plural": "__label__ 개의 노드",
+      "moduleCount": "__count__ 개의 모듈 사용가능",
+      "moduleCount_plural": "__count__ 개의 모듈 사용가능",
+      "inuse": "사용중",
+      "enableall": "모두 활성화",
+      "disableall": "모두 비활성화",
+      "enable": "활성화",
+      "disable": "비활성화",
+      "remove": "삭제",
+      "update": "__version__으로 업데이트",
+      "updated": "업데이트 됨",
+      "install": "설치",
+      "installed": "설치됨",
+      "conflict": "충돌",
+      "conflictTip": "<p>노드타입이 이미 설치 되어 있습니다.<br/>/p><p>충돌모듈 : <code>__module__</code></p>",
+      "loading": "카탈로그 여는중...",
+      "tab-nodes": "설치된 노드",
+      "tab-install": "설치가능한 노드",
+      "sort": "정렬:",
+      "sortAZ": "a-z",
+      "sortRecent": "최근",
+      "more": "+ __count__ 개 더 보기",
+      "errors": {
+        "catalogLoadFailed": "<p>노드 카탈로그를 설치하지 못했습니다.</p><p>브라우저 콘솔로그를 참고하세요.</p>",
+        "installFailed": "<p>설치 실패 : __module__</p><p>__message__</p><p>브라우저 콘솔로그를 참고하세요.</p>",
+        "removeFailed": "<p>삭제 실패 : __module__</p><p>__message__</p><p>브라우저 콘솔로그를 참고하세요.</p>",
+        "updateFailed": "<p>업데이트 실패 : __module__</p><p>__message__</p><p>브라우저 콘솔로그를 참고하세요.</p>",
+        "enableFailed": "<p>활성화 실패 : __module__</p><p>__message__</p><p>브라우저 콘솔로그를 참고하세요.</p>",
+        "disableFailed": "<p>비활성화 실패 : __module__</p><p>__message__</p><p>브라우저 콘솔로그를 참고하세요.</p>"
+      },
+      "confirm": {
+        "install": {
+          "body": "<p>'__module__' 설치중</p><p>설치하기 전 노드 설명서를 읽으세요. 어떤 노드은 의존성이 자동으로 해결되지 않거나, Node-RED의 재시작이 필요할 수 있습니다.</p>",
+          "title": "노드 설치"
+        },
+        "remove": {
+          "body": "<p>'__module__' 삭제중</p><p>Node-RED에서 노드를 제거합니다. Node-RED가 재시작되기까지 리소스가 계속 사용될 수도 있습니다.</p>",
+          "title": "노드 삭제"
+        },
+        "update": {
+          "body": "<p>'__module__' 업데이트중</p><p>업데이트 반영을 위해 Node-RED를 수동으로 재시작해야 할 경우도 있습니다.</p>",
+          "title": "노드 변경"
+        },
+        "cannotUpdate": {
+          "body": "이 노드에 대한 업데이트가 있지만, 팔레트 관리자가 변경할 수 있는 위치에 설치되지 않았습니다.<br/><br/>이 노드를 변경하는 방법은 설명서를 참조하세요"
+        },
+        "button": {
+          "review": "노드정보 열기",
+          "install": "설치",
+          "remove": "삭제",
+          "update": "업데이트"
+        }
+      }
+    }
+  },
+  "sidebar": {
+    "info": {
+      "name": "노드정보",
+      "tabName": "이름",
+      "label": "정보",
+      "node": "노드",
+      "type": "타입",
+      "module": "모듈",
+      "id": "ID",
+      "status": "상태",
+      "enabled": "활성화",
+      "disabled": "비활성화",
+      "subflow": "서브 플로우",
+      "instances": "인스턴스",
+      "properties": "속성",
+      "info": "정보",
+      "desc": "상세 내역",
+      "blank": "공백",
+      "null": "null",
+      "showMore": "더 보기",
+      "showLess": "간단히",
+      "flow": "플로우",
+      "selection": "선택",
+      "nodes": "__count__ 개의 노드",
+      "flowDesc": "플로우 상세내역",
+      "subflowDesc": "서브 플로우 상세내역",
+      "nodeHelp": "노드 도움말",
+      "none": "없음",
+      "arrayItems": "__count__ 개의 항목",
+      "showTips": "설정에서 도움말을 열 수 있습니다. "
+    },
+    "config": {
+      "name": "노드 설정",
+      "label": "설정",
+      "global": "모든 플로우",
+      "none": "없음",
+      "subflows": "보조 플로우",
+      "flows": "플로우",
+      "filterUnused": "미사용",
+      "filterAll": "전체",
+      "filtered": "__count__ 개 숨김"
+    },
+    "context": {
+      "name": "Context 데이터",
+      "label": "context",
+      "none": "선택 없음",
+      "refresh": "새로고침",
+      "empty": "공백",
+      "node": "노드",
+      "flow": "플로우",
+      "global": "Global",
+      "deleteConfirm": "정말로 이 아이템을 지우시겠습니까?"
+    },
+    "palette": {
+      "name": "팔레트 관리",
+      "label": "팔레트"
+    },
+    "project": {
+      "label": "프로젝트",
+      "name": "프로젝트",
+      "description": "상세내역",
+      "dependencies": "의존성",
+      "settings": "설정",
+      "noSummaryAvailable": "요약 없음",
+      "editDescription": "프로젝트 상세내역 수정",
+      "editDependencies": "프로젝트 의존성 수정",
+      "editReadme": "README.md 수정",
+      "showProjectSettings": "프로젝트 설정 보이기",
+      "projectSettings": {
+        "title": "프로젝트 설정",
+        "edit": "수정",
+        "none": "없음",
+        "install": "설치",
+        "removeFromProject": "프로젝트에서 삭제",
+        "addToProject": "프로젝트에 추가",
+        "files": "파일",
+        "flow": "플로우",
+        "credentials": "인증정보",
+        "invalidEncryptionKey": "잘못된 암호화 키",
+        "encryptionEnabled": "암호화 활성화",
+        "encryptionDisabled": "암호화 비활성화",
+        "setTheEncryptionKey": "암호화 키 설정 :",
+        "resetTheEncryptionKey": "암호화 키 초기화 :",
+        "changeTheEncryptionKey": "암호화 키 변경:",
+        "currentKey": "현재 키",
+        "newKey": "새로운 키",
+        "credentialsAlert": "모든 인증정보를 삭제합니다",
+        "versionControl": "버전 관리",
+        "branches": "브랜치",
+        "noBranches": "브랜치 없음",
+        "deleteConfirm": "다시 되돌릴 수 없습니다. '__name__'의 로컬 브랜치를 삭제 히시겠습니까?",
+        "unmergedConfirm": "'__name__'의 병합되지 않은 수정사항을 잃어버릴 수 있습니다. 그래도 삭제 하시겠습니까?",
+        "deleteUnmergedBranch": "미병합 브랜치 삭제",
+        "gitRemotes": "Git 원격",
+        "addRemote": "원격 추가",
+        "addRemote2": "원격 추가",
+        "remoteName": "원격 이름",
+        "nameRule": "A-Z 0-9 _ -의 문자만 사용이 가능합니다",
+        "url": "URL",
+        "urlRule": "https://, ssh:// or file://",
+        "urlRule2": "URL안에 사용자아이디/비밀번호를 사용하지 마세요",
+        "noRemotes": "원격 없음",
+        "deleteRemoteConfrim": "원격 '__name__'를 정말로 삭제하시겠습니까?",
+        "deleteRemote": "원격 삭제"
+      },
+      "userSettings": {
+        "committerDetail": "Committer 상세내역",
+        "committerTip": "시스템 기본값을 사용하려면 비워두세요",
+        "userName": "사용자명",
+        "email": "이메일",
+        "sshKeys": "SSH키",
+        "sshKeysTip": "원격저장소에 대한 보안연결을 허용합니다",
+        "add": "키 추가",
+        "addSshKey": "SSH키 추가",
+        "addSshKeyTip": "public/private 키쌍을 추가합니다",
+        "name": "이름",
+        "nameRule": "A-Z 0-9 _ -의 문자만 사용이 가능합니다",
+        "passphrase": "암호",
+        "passphraseShort": "암호가 너무 짧습니다",
+        "optional": "선택항목",
+        "cancel": "취소",
+        "generate": "Key 생성",
+        "noSshKeys": "SSH키 없음",
+        "copyPublicKey": "클립보드로 public key 복사",
+        "delete": "키 삭제",
+        "gitConfig": "Git 설정",
+        "deleteConfirm": "다시 되돌릴 수 없습니다. __name__의 SSH키를 삭제하시겠습니까?"
+      },
+      "versionControl": {
+        "unstagedChanges": "변경사항을 언스테이징",
+        "stagedChanges": "스테이징된 변경사항",
+        "unstageChange": "스테이징 되지않은 변경사항",
+        "stageChange": "변경사항을 스테이징",
+        "unstageAllChange": "모든 변경사항 언스테이징",
+        "stageAllChange": "모든 변경사항 스테이징",
+        "commitChanges": "변경사항 커밋",
+        "resolveConflicts": "충돌 해결",
+        "head": "HEAD",
+        "staged": "스테이징 됨",
+        "unstaged": "스테이징 안됨",
+        "local": "로컬",
+        "remote": "리모트",
+        "revert": "다시 복원할 수 없습니다. '__file__'을 되돌리시겠습니까?",
+        "revertChanges": "변경사항 되돌리기",
+        "localChanges": "로컬 변경사항",
+        "none": "없음",
+        "conflictResolve": "모든 충돌이 해결되었습니다. 변경사항을 적용하여 병합을 완료하세요",
+        "localFiles": "로컬 파일",
+        "all": "전체",
+        "unmergedChanges": "병합되지 않은 변경사항",
+        "abortMerge": "병합 중단",
+        "commit": "커밋",
+        "changeToCommit": "커밋 변경사항",
+        "commitPlaceholder": "커밋 메시지를 입력하세요",
+        "cancelCapital": "취소",
+        "commitCapital": "커밋",
+        "commitHistory": "커밋 이력",
+        "branch": "브랜치 :",
+        "moreCommits": "커밋 더보기",
+        "changeLocalBranch": "로컬 브랜치 변경",
+        "createBranchPlaceholder": "브렌치 찾기/생성",
+        "upstream": "업스트림",
+        "localOverwrite": "브랜치에 반영할 변경사항이 있습니다. 변경사항을 커밋하거나, 변경내역을 취소해야 합니다",
+        "manageRemoteBranch": "원격 브랜치 관리",
+        "unableToAccess": "원격저장소에 접근할 수 없습니다",
+        "retry": "재시도",
+        "setUpstreamBranch": "업스트림 브랜치로 설정",
+        "createRemoteBranchPlaceholder": "리모드 브랜치 찾기/생성",
+        "trackedUpstreamBranch": "생성된 브랜치는 트래킹된 업스트림 브랜치로 설정됩니다",
+        "selectUpstreamBranch": "브랜치가 생성될 것입니다. 트래킹된 업스트림 브랜치로 설정하세요",
+        "pushFailed": "리모트에 최신 커밋이 있기 때문에 push할 수 없습니다. 먼저 pull과 병합을 하신 후 push하세요",
+        "push": "push",
+        "pull": "pull",
+        "unablePull": "<p>원격저장소의 변경사항을 가져올 수 없습니다, 당신의 unstaged 로컬 변경사항을 덮어씁니다.</p><p>변경사항을 적용하고 다시 시도하세요</p>",
+        "showUnstagedChanges": "unstaged 변경사항 보여주기",
+        "connectionFailed": "원격저장소 연결 불가 : ",
+        "pullUnrelatedHistory": "<p>원격저장소에 연관없는 커밋 기록이 있습니다.</p><p>모든 변경사항을 로컬 저장소로 가져 오시겠습니까?</p>",
+        "pullChanges": "Pull 변경사항",
+        "history": "이력",
+        "projectHistory": "프로젝트 이력",
+        "daysAgo": "__count__일 전",
+        "daysAgo_plural": "__count__일 전",
+        "hoursAgo": "__count__시간 전",
+        "hoursAgo_plural": "__count__시간 전",
+        "minsAgo": "__count__분 전",
+        "minsAgo_plural": "__count__분 전",
+        "secondsAgo": "몇초 전",
+        "notTracking": "당신의 로컬 브랜치는 원격브랜치를 트래킹하고 있지 않습니다",
+        "statusUnmergedChanged": "당신의 저장소는 병합되지 않은 변경사항을 가지고 있습니다. 충돌을 수정하고 결과를 커밋하세요",
+        "repositoryUpToDate": "당신의 저장소는 최신상태 입니다",
+        "commitsAhead": "당신의 저장소가 원격지보다 __count__ 커밋을 앞서 있습니다. 이제 커밋 할 수 있습니다.",
+        "commitsAhead_plural": "당신의 저장소가 원격지보다  __count__ 커밋을 앞서 있습니다. 지금 커밋할 수 있습니다.",
+        "commitsBehind": "당신의 저장소가 원격지보다 __count__ 커밋이 늦습니다. 이제 pull 할 수 있습니다.",
+        "commitsBehind_plural": "당신의 저장소가 원격지보다 __count__ 커밋이 늦습니다. 이제 pull 할 수 있습니다.",
+        "commitsAheadAndBehind1": "당신의 저장소가 __count__ 커밋이 늦고, ",
+        "commitsAheadAndBehind1_plural": "당신의 저장소가 __count__ 커밋이 늦고 ",
+        "commitsAheadAndBehind2": "__count__ 커밋이 원격지보다 앞서 있습니다. ",
+        "commitsAheadAndBehind2_plural": "__count__ 커밋이 원격지보다 앞서 있습니다.",
+        "commitsAheadAndBehind3": "push하기전에 리모트 저장소에서 pull을 먼저 수행하세요.",
+        "commitsAheadAndBehind3_plural": "push하기전에 리모트 저장소에서 pull을 먼저 수행하세요.",
+        "refreshCommitHistory": "커밋 기록 새로고침",
+        "refreshChanges": "변경사항 새로고침"
+      }
+    }
+  },
+  "typedInput": {
+    "type": {
+      "str": "string",
+      "num": "number",
+      "re": "regular expression",
+      "bool": "boolean",
+      "json": "JSON",
+      "bin": "buffer",
+      "date": "timestamp",
+      "jsonata": "expression",
+      "env": "env variable"
+    }
+  },
+  "editableList": {
+    "add": "추가"
+  },
+  "search": {
+    "empty": "결과 없음",
+    "addNode": "노드 추가 ..."
+  },
+  "expressionEditor": {
+    "functions": "기능",
+    "functionReference": "기능 참조",
+    "insert": "삽입",
+    "title": "JSONata 형식 에디터",
+    "test": "테스트",
+    "data": "예제 메세지",
+    "result": "결과",
+    "format": "형식",
+    "compatMode": "호환모드 사용",
+    "compatModeDesc": "<h3>JSONata호환 모드</h3><p> 입력된 형식은 <code>msg</code> 를 참조하고 있어, 호환모드로 평가합니다. 이 모드는 후에 폐지될 예정이니, <code>msg</code> 를 사용하지 않도록 해 주시길 바랍니다. </p><p> JSONata를 Node-RED에서 처음 지원했을 때에는 <code>msg</code> 오브젝트의 참조가 필요했습니다. 예를 들어 <code>msg.payload</code> 는 payload를 참고하기 위해 사용되었습니다. </p><p> 직접 메시지에 대하여 식을 평가하도록 되었기에, 이 형식은 사용할 수 없게 됩니다. payload를 참조하려면 단순히 <code>payload</code> 로 지정해 주십시오. </p>",
+    "noMatch": "결과 없음",
+    "errors": {
+      "invalid-expr": "유효하지 않은 JSONata 형식 :\n  __message__",
+      "invalid-msg": "유효하지 않은  예시 JSON 메세지 :\n  __message__",
+      "context-unsupported": "컨텍스트 기능을 테스트 할 수 없습니다.\n $flowContext 또는 $globalContext",
+      "eval": "형식 오류 :\n  __message__"
+    }
+  },
+  "jsEditor": {
+    "title": "자바스크립트 에디터"
+  },
+  "jsonEditor": {
+    "title": "JSON 에디터",
+    "format": "JSON 형식"
+  },
+  "markdownEditor": {
+    "title": "Markdown 에디터",
+    "format": "Markdown 형식",
+    "heading1": "제목 레벨1",
+    "heading2": "제목 레벨2",
+    "heading3": "제목 레벨3",
+    "bold": "강조",
+    "italic": "이탤릭",
+    "code": "코드",
+    "ordered-list": "번호 목차",
+    "unordered-list": "목차",
+    "quote": "인용",
+    "link": "링크",
+    "horizontal-rule": "나눔줄",
+    "toggle-preview": "미리보기 전환"
+  },
+  "bufferEditor": {
+    "title": "Buffer 에디터",
+    "modeString": "UTF-8 문자열로 처리",
+    "modeArray": "JSON 배열로 처리",
+    "modeDesc": "<h3>Buffer 에디터</h3><p>버퍼타입은 byet값의 JSON배열로 저장됩니다. 이 에디터는 입력된 값을 JSON 배열로 구문분석 합니다. 만약 유효한 JSON이 아닌경우 UTF-8 문자열로 처리되어 각 문자코드 번호의 배열로 변환됩니다.</p><p>예를들어 <code>Hello World</code> 라는 값은 다음의 JSON 배열로 변환됩니다.<pre>[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]</pre></p>"
+  },
+  "projects": {
+    "config-git": "Git client 설정",
+    "welcome": {
+      "hello": "안녕하세요. Node-RED에서 프로젝트 기능을 이용할 수 있게 되었습니다.",
+      "desc0": "플로우 파일을 관리하는 새로운 방법이며, 버전을 관리할 수 도 있습니다.",
+      "desc1": "무선 프로젝트를 작성하거나 기존의 Git저장소에서 프로젝트를 복제할 수 있습니다.",
+      "desc2": "이 기능을 건너뛰어도 상관없습니다. 언제든지 프로젝트 메뉴에서 첫번째 프로젝트를 만들 수 있습니다.",
+      "create": "프로젝트 생성",
+      "clone": "프로젝트 복제",
+      "not-right-now": "나중에"
+    },
+    "git-config": {
+      "setup": "버전관리 클라이언트를 설정합니다",
+      "desc0": "Node-RED는 오픈소스 Git로 버전관리를 할 수 있습니다. 프로젝트 파일의 변경사항을 추적하고 원격저장소로 push할 수 있습니다.",
+      "desc1": "당신이 변경사항을 커밋하면 git은 누가 변경사항을 만들었는지 사용자명과 이메일 정보를 기록합니다. 사용자명은 꼭 당신의 실명일 필요는 없습니다.",
+      "desc2": "당신의 Git 클라이언트는 아래와 같이 이미 설정되었습니다.",
+      "desc3": "당신은 git config의 설정탭에서 설정을 변경할 수 있습니다.",
+      "username": "사용자명",
+      "email": "이메일"
+    },
+    "project-details": {
+      "create": "프로젝트 생성",
+      "desc0": "프로젝트는 Git 저장소로 관리되어집니다. 다른 사람과 협업하거나 공유하기 쉬워집니다.",
+      "desc1": "당신은 여러 개의 프로젝트를 생성할 수 있고 에디터에서 프로젝트를 선택할 수 있습니다.",
+      "desc2": "시작하려면 프로젝트 이름과 프로젝트의 상세설명이 필요합니다.",
+      "already-exists": "프로젝트가 이미 존재합니다",
+      "must-contain": "A-Z 0-9 _ -의 문자만 사용이 가능합니다",
+      "project-name": "프로젝트명",
+      "desc": "상세설명",
+      "opt": "옵션"
+    },
+    "clone-project": {
+      "clone": "프로젝트 복제",
+      "desc0": "프로젝트가 있는 저장소를 가지고 있다면, 즉시 복제하여 사용할 수 있습니다.",
+      "already-exists": "프로젝트가 이미 존재합니다",
+      "must-contain": "A-Z 0-9 _ -의 문자만 사용이 가능합니다",
+      "project-name": "프로젝트명",
+      "no-info-in-url": "URL안에 사용자아이디/비밀번호를 사용하지 마세요",
+      "git-url": "Git 저장소 URL",
+      "protocols": "https://, ssh:// 혹은 file://",
+      "auth-failed": "인증 실패",
+      "username": "사용자명",
+      "passwd": "패스워드",
+      "ssh-key": "SSH키",
+      "passphrase": "패스워드",
+      "ssh-key-desc": "저장소를 복제하기 전에 접속을 위해 SSH키를 먼저 추가하세요.",
+      "ssh-key-add": "ssh키 추가",
+      "credential-key": "인증 암호화 키",
+      "cant-get-ssh-key": "에러! 선택한 SSH키 경로를 가져올 수 없습니다",
+      "already-exists2": "이미 존재합니다",
+      "git-error": "git 에러",
+      "connection-failed": "접속 실패",
+      "not-git-repo": "Git저장소가 아닙니다",
+      "repo-not-found": "저장소가 없습니다"
+    },
+    "default-files": {
+      "create": "프로젝트 파일 생성",
+      "desc0": "프로젝트는 당신의 플로우, README, package.json 파일을 포함합니다.",
+      "desc1": "Git 저장소에서 관리하고 싶은 다른 파일들을 포함할 수 있습니다.",
+      "desc2": "당신이 이미 가지고 있는 flow, 자격증명파일이 프로젝트로 복사될 것입니다.",
+      "flow-file": "플로우 파일",
+      "credentials-file": "자격증명 파일"
+    },
+    "encryption-config": {
+      "setup": "자격인증 파일의 암호화 설정",
+      "desc0": "플로우의 자격인증 파일 암호화를 통해 내용을 안전하게 유지할 수 있습니다.",
+      "desc1": "자격증명을 공용 Git저장소에 저장하려면 비밀키 구문을 제공하여 암호화 해야 합니다",
+      "desc2": "당신의 플로우 자격인증 파일은 암호화 되어 있지 않습니다.",
+      "desc3": "즉, 암호 및 액세스 토큰과 같은 내용을 파일에 액세스 할 수있는 모든 사람이 열람할 수 있습니다.",
+      "desc4": "자격증명을 공용 Git저장소에 저장하려면 비밀키 구문을 제공하여 암호화 해야 합니다",
+      "desc5": "당신의 플로우 자격증명파일은 setting파일의 credentialSecret속성으로 암호화되어 있습니다.",
+      "desc6": "당신의 플로우 자격증명파일은 시스템이 생성된 키에 의해 암호화 되어있습니다. 이 프로젝트용 새로운 비밀키를 지정해 주세요.",
+      "desc7": "키는 프로젝트파일과는 별개로 보존됩니다. 다른 Node-RED에서 이 프로젝트를 이용하려면 이 프로젝트의 키가 필요합니다.",
+      "credentials": "자격인증",
+      "enable": "암호화 활성화",
+      "disable": "암호화 비활성화",
+      "disabled": "비활성화됨",
+      "copy": "기존 키를 복사",
+      "use-custom": "커스텀키 사용",
+      "desc8": "자격증명 파일이 암호화되어 있지 않아, 간단히 해당내용이 열람될 수 있습니다.",
+      "create-project-files": "프로젝트 생성",
+      "create-project": "프로젝트 생성",
+      "already-exists": "이미 존재합니다.",
+      "git-error": "git 에러",
+      "git-auth-error": "git 인증 에러"
+    },
+    "create-success": {
+      "success": "당신의 첫번째 프로젝트 생성이 성공하였습니다.",
+      "desc0": "앞으로 이와 같이 Node-RED를 사용할 수 있습니다.",
+      "desc1": "사이드바의 '정보'탭은 현재 활성화된 프로젝트를 보여줍니다. 이름 옆에 있는 버틀을 사용하여 프로젝트 설정화면을 불러올 수 있습니다.",
+      "desc2": "사이드바의 '이력'탭은 프로젝트의 변경된 파일을 확인하고 커밋할 수 있습니다. 커밋의 전체 기록을 보여주고 변경사항을 원격 저장소에 push할 수 있습니다."
+    },
+    "create": {
+      "projects": "프로젝트",
+      "already-exists": "프로젝트가 이미 존재합니다",
+      "must-contain": "A-Z 0-9 _ -의 문자만 사용이 가능합니다",
+      "no-info-in-url": "URL안에 사용자아이디/비밀번호를 사용하지 마세요",
+      "open": "프로젝트 열기",
+      "create": "프로젝트 생성",
+      "clone": "프로젝트 복제",
+      "project-name": "프로젝트명",
+      "desc": "상세내역",
+      "opt": "옵션",
+      "flow-file": "플로우 파일",
+      "credentials": "자격증명",
+      "enable-encryption": "암호화 활성화",
+      "disable-encryption": "암호화 비활성화",
+      "encryption-key": "암호화 키",
+      "desc0": "자격증명 정보를 안전하게 하는 문구",
+      "desc1": "자격증명 파일이 암호화되어 있지 않아, 간단히 해당내용이 열람될 수 있습니다.",
+      "git-url": "Git 저장소 URL",
+      "protocols": "https://, ssh:// 혹은 file://",
+      "auth-failed": "인증 실패",
+      "username": "사용자명",
+      "password": "패스워드",
+      "ssh-key": "SSH키",
+      "passphrase": "패스워드",
+      "desc2": "저장소를 복제하기 전에 접속을 위해 SSH키를 먼저 추가하세요.",
+      "add-ssh-key": "ssh키 추가",
+      "credentials-encryption-key": "자격인증 암호화 키",
+      "already-exists-2": "이미 존재합니다",
+      "git-error": "git 에러",
+      "con-failed": "접속 실패",
+      "not-git": "git 저장소가 아닙니다",
+      "no-resource": "저장소아 없습니다",
+      "cant-get-ssh-key-path": "에러! 선택한 SSH키 경로를 가져올 수 없습니다.",
+      "unexpected_error": "예기치 않은 에러"
+    },
+    "delete": {
+      "confirm": "프로젝트를 정말 지우시겠습니까?"
+    },
+    "create-project-list": {
+      "search": "프로젝트 검색",
+      "current": "현재"
+    },
+    "require-clean": {
+      "confirm": "<p>변경사항을 배포하지 않아 내용이 손실될 수 있습니다.</p><p>계속 할까요?</p>"
+    },
+    "send-req": {
+      "auth-req": "저장소에 대한 인증이 필요합니다.",
+      "username": "사용자명",
+      "password": "패스워드",
+      "passphrase": "패스워드",
+      "retry": "재시도",
+      "update-failed": "인증 변경 실패",
+      "unhandled": "오류 응답 미처리"
+    },
+    "create-branch-list": {
+      "invalid": "올바르지 않은 브랜치",
+      "create": "브랜치 생성",
+      "current": "현재"
+    },
+    "create-default-file-set": {
+      "no-active": "활성화된 프로젝트 없이 기본 파일을 만들 수 없습니다.",
+      "no-empty": "비어있지 않은 프로젝트에 기본 파일을 만들 수 없습니다.",
+      "git-error": "git 에러"
+    },
+    "errors": {
+      "no-username-email": "당신의 Git 클라이언트에 사용자명/이메일이 설정되지 않았습니다.",
+      "unexpected": "예기치 않은 에러가 발생했습니다.",
+      "code": "코드"
+    }
+  },
+  "editor-tab": {
+    "properties": "속성",
+    "description": "상세 내역",
+    "appearance": "모양"
+  }
+}

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

@@ -0,0 +1,23 @@
+{
+    "info": {
+        "tip0": "{{core:delete-selection}}를 사용하여 선택된 노드나 링크를 삭제할 수 있습니다.",
+        "tip1": "{{core:search}}를 활용하여 노드를 검색할 수 있습니다.",
+        "tip2": "{{core:toggle-sidebar}}를 사용하여 사이드바를 표시/비표시 전환 할 수 있습니다.",
+        "tip3": "{{core:manage-palette}}를 사용하여 노드 팔레트를 관리 할 수 있습니다.",
+        "tip4": "플로우 안의 설정노드가 사이드바에 표시됩니다. 메뉴 혹은 {{core:show-config-tab}}를 사용하여 엑세스 할 수 있습니다.",
+        "tip5": "설정에서 이 팁을 활성화/비활성화 할 수 있습니다.",
+        "tip6": "[left] [up] [down] [right] 키를 사용하여 선택된 노드를 움직일 수 있습니다. [shift]키를 누른 채로 움직이면 이동폭이 늘어납니다.",
+        "tip7": "노드를 와이어 사이로 드래그 하여 연결할 수도 있습니다.",
+        "tip8": "{{core:show-export-dialog}}를 사용하여 선택한 노드 또는 현재탭을 내보낼 수 있습니다.",
+        "tip9": "JSON파일을 에디터로 드래그하거나 {{core:show-import-dialog}}를 사용하여 플로우 가져올 수 있습니다.",
+        "tip10": "[shift] [click] 하고서 드래그하여 선택한 와이어를 이동할 수 있습니다.",
+        "tip11": "{{core:show-info-tab}}를 사용하여 정보탭을 표시하거나 {{core:show-debug-tab}}를 사용하여 디버그탭을 표시할 수 있습니다.",
+        "tip12": "작업공간에서 [ctrl] [click]을 사용하여 빠른추가 대회상자를 열 수 있습니다.",
+        "tip13": "[ctrl]을 누른 상태로 노드의 포트를 클릭하여 빠르게 연결할 수 있습니다.",
+        "tip14": "[shift]를 누른 상태로 노드를 클릭하여 연결된 모든 노드를 선택할 수 있습니다.",
+        "tip15": "[ctrl]을 누른 상태로 노드를 클릭하여 현재 선택영역에 노드를 추가/제거 할 수 있습니다.",
+        "tip16": "{{core:show-previous-tab}}와 {{core:show-next-tab}}를 사용하여 탭을 전환할 수 있습니다.",
+        "tip17": "노드 편집 창에서 {{core : confirm-edit-tray}}로 변경 사항을 확인하거나 {{core : cancel-edit-tray}}로 취소 할 수 있습니다.",
+        "tip18": "{{core : edit-selected-node}}를 누르면 현재 선택 영역의 첫 번째 노드가 편집됩니다."
+    }
+}

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

@@ -0,0 +1,222 @@
+{
+    "$string": {
+        "args": "arg",
+        "desc": "다음과 같은 규칙을 사용하여 인수 *arg*를 문자열로 변환합니다. \n\n - 문자열은 변경되지 않습니다. \n - 함수는 빈 문자열로 변환됩니다. \n - 무한대와 NaN은 JSON수치로 표현할 수 없기 때문에 오류처리 됩니다. \n - 다른 모든 값은 `JSON.stringify` 함수를 사용하여 JSON 문자열로 변환됩니다."
+    },
+    "$length": {
+        "args": "str",
+        "desc": "문자열 `str`의 문자 수를 반환합니다. `str`가 문자열이 아닌 경우 에러를 반환합니다."
+    },
+    "$substring": {
+        "args": "str, start[, length]",
+        "desc": "(zero-offset)의 `start`에서 시작하는 첫번째 인수 `str`의 문자열을 반환합니다. 만약 `length`가 지정된 경우, 부분 문자열은 최대 `length`의 크기를 갖습니다. 만약 `start` 인수가 음수이면 `str`의 끝에서부터의 문자수를 나타냅니다."
+    },
+    "$substringBefore": {
+        "args": "str, chars",
+        "desc": "`str`에 `chars`문자가 처음으로 나오기 전까지의 부분문자열을 반환합니다. 만약 `chars`가 없으면 `str`을 반환합니다."
+    },
+    "$substringAfter": {
+        "args": "str, chars",
+        "desc": "`str`에 `chars`문자가 처음으로 나온 이후의 부분문자열을 반환합니다. 만약 `chars`가 없으면 `str`을 반환합니다."
+    },
+    "$uppercase": {
+        "args": "str",
+        "desc": "`str`의 문자를 대문자로 반환합니다."
+    },
+    "$lowercase": {
+        "args": "str",
+        "desc": "`str`의 문자를 소문자로 반환합니다."
+    },
+    "$trim": {
+        "args": "str",
+        "desc": "다음의 순서대로 `str`의 모든 공백을 자르고 정규화 합니다:\n\n - 모든 탭, 캐리지 리턴 및 줄 바꿈은 공백으로 대체됩니다. \n- 연속된 공백은 하나로 줄입니다.\n- 후행 및 선행 공백은 삭제됩니다.\n\n 만일 `str`이 지정되지 않으면 (예: 이 함수를 인수없이 호출), context값을 `str`의 값으로 사용합니다. `str`이 문자열이 아니면 에러가 발생합니다."
+    },
+    "$contains": {
+        "args": "str, pattern",
+        "desc": "`str`이 `pattern`과 일치하면 `true`를, 일치하지 않으면 `false`를 반환합니다. 만약 `str`이 지정되지 않으면 (예: 이 함수를 인수없이 호출), context값을 `str`의 값으로 사용합니다. `pattern` 인수는 문자열이나 정규표현으로 할 수 있습니다."
+    },
+    "$split": {
+        "args": "str[, separator][, limit]",
+        "desc": "`str`인수를 분할하여 부분문자열로 배열합니다. `str`이 문자열이 아니면 에러가 발생합니다. 생략가능한 인수 `separator`는 `str`을 분할하는 문자를 문자열 또는 정규표현으로 지정합니다. `separator`를 지정하지 않은 경우, 공백의 문자열로 간주하여 `str`은 단일 문자의 배열로 분리됩니다. `separator`가 문자열이 아니면 에러가 발생합니다. 생략가능한 인수 'limit`는 결과의 배열이 갖는 부분문자열의 최대수를 지정합니다. 이 수를 넘는 부분문자열은 파기됩니다. `limit`가 지정되지 않으면`str`은 결과 배열의 크기의 제한없이 완전히 분리됩니다. `limit`이 음수인 경우 에러가 발생합니다."
+    },
+    "$join": {
+        "args": "array[, separator]",
+        "desc": "문자열의 배열을 생략가능한 인수 `separator`로 구분한 하나의 문자열로 연결합니다. 배열 `array`가 문자열이 아닌 요소를 포함하는 경우, 에러가 발생합니다. `separator`를 지정하지 않은 경우, 공백의 문자열로 간주합니다(예: 문자열간의 `separator`없음). `separator`가 문자열이 아닌 경우, 에러가 발생합니다."
+    },
+    "$match": {
+        "args": "str, pattern [, limit]",
+        "desc": "`str`문자열에 `pattern`를 적용하여, 오브젝트 배열을 반환합니다. 배열요소의 오브젝트는 `str`중 일치하는 부분의 정보를 보유합니다."
+    },
+    "$replace": {
+        "args": "str, pattern, replacement [, limit]",
+        "desc": "`str`문자열에서 `pattern` 패턴을 검색하여, `replacement`로 대체합니다.\n\n임의이ㅡ 인수 `limit`는 대체 횟수의 상한값을 지정합니다."
+    },
+    "$now": {
+        "args": "",
+        "desc": "ISO 8601 호환 형식으로 타임 스탬프를 생성하고 이를 문자열로 반환합니다."
+    },
+    "$base64encode": {
+        "args": "string",
+        "desc": "ASCII 문자열을 base 64 표현으로 변환합니다. 문자열의 각 문자는 이진 데이터의 바이트로 처리됩니다. 이렇게 하려면 문자열의 모든 문자가 URI로 인코딩 된 문자열을 포함하고, 0x00에서 0xFF 범위에 있어야합니다. 해당 범위를 벗어난 유니 코드 문자는 지원되지 않습니다"
+    },
+    "$base64decode": {
+        "args": "string",
+        "desc": "UTF-8코드페이지를 이용하여, Base 64형식의 바이트값을 문자열로 변환합니다."
+    },
+    "$number": {
+        "args": "arg",
+        "desc": "`arg`를 다음과 같은 규칙을 사요하여 숫자로 변환합니다. :\n\n - 숫자는 변경되지 않습니다.\n – 올바른 JSON의 숫자는 숫자 그대로 변환됩니다.\n – 그 외의 형식은 에러를 발생합니다."
+    },
+    "$abs": {
+        "args": "number",
+        "desc": "`number`의 절대값을 반환합니다."
+    },
+    "$floor": {
+        "args": "number",
+        "desc": "`number`를 `number`보다 같거나 작은 정수로 내림하여 반환합니다."
+    },
+    "$ceil": {
+        "args": "number",
+        "desc": "`number`를 `number`와 같거나 큰 정수로 올림하여 반환합니다."
+    },
+    "$round": {
+        "args": "number [, precision]",
+        "desc": "인수 `number`를 반올림한 값을 반환합니다. 임의의 인수 `precision`에는 반올립에서 사용할 소수점이하의 자릿수를 지정합니다."
+    },
+    "$power": {
+        "args": "base, exponent",
+        "desc": "기수 `base`의 값을 지수 `exponent`만큼의 거듭 제곱으로 반환합니다."
+    },
+    "$sqrt": {
+        "args": "number",
+        "desc": "인수 `number`의 제곱근을 반환합니다."
+    },
+    "$random": {
+        "args": "",
+        "desc": "0이상 1미만의 의사난수를 반환합니다."
+    },
+    "$millis": {
+        "args": "",
+        "desc": "Unix Epoch (1970 년 1 월 1 일 UTC)부터 경과된 밀리 초 수를 숫자로 반환합니다. 평가대상식에 포함되는 $millis()의 모든 호출은 모두 같은 값을 반환합니다."
+    },
+    "$sum": {
+        "args": "array",
+        "desc": "숫자 배열 `array`의 합계를 반환합니다. `array`에 숫자가 아닌 요소가 있는 경우, 에러가 발생합니다."
+    },
+    "$max": {
+        "args": "array",
+        "desc": "숫자 배열 `array`에서 최대값을 반환합니다. `array`에 숫자가 아닌 요소가 있는 경우, 에러가 발생합니다."
+    },
+    "$min": {
+        "args": "array",
+        "desc": "숫자 배열 `array`에서 최소값을 반환합니다. `array`에 숫자가 아닌 요소가 있는 경우, 에러가 발생합니다."
+    },
+    "$average": {
+        "args": "array",
+        "desc": "숫자 배열 `array`에서 평균값을 반환합니다. `array`에 숫자가 아닌 요소가 있는 경우, 에러가 발생합니다."
+    },
+    "$boolean": {
+        "args": "arg",
+        "desc": "`arg` 값을 다음의 규칙에 의해 Boolean으로 변환합니다::\n\n - `Boolean` : 변환하지 않음\n - `string`: 비어있음 : `false`\n - `string`: 비어있지 않음 : `true`\n - `number`: `0` : `false`\n - `number`: 0이 아님 : `true`\n - `null` : `false`\n - `array`: 비어있음 : `false`\n - `array`: `true`로 변환된 요소를 가짐 : `true`\n - `array`: 모든 요소가 `false`로 변환 : `false`\n - `object`: 비어있음 : `false`\n - `object`: 비어있지 않음 : `true`\n - `function` : `false`"
+    },
+    "$not": {
+        "args": "arg",
+        "desc": "인수의 부정을 Boolean으로 변환합니다. `arg`는 가장먼저boolean으로 변환됩니다."
+    },
+    "$exists": {
+        "args": "arg",
+        "desc": "`arg` 식의 평가값이 존재하는 경우 `true`, 식의 평가결과가 미정의인 경우 (예: 존재하지 않는 참조필드로의 경로)는 `false`를 반환합니다."
+    },
+    "$count": {
+        "args": "array",
+        "desc": "`array`의 요소 갯수를 반환합니다."
+    },
+    "$append": {
+        "args": "array, array",
+        "desc": "두개의 `array`를 병합합니다."
+    },
+    "$sort": {
+        "args": "array [, function]",
+        "desc": "배열 `array`의 모든 값을 순서대로 정렬하여 반환합니다. \n\n 비교함수 `function`을 이용하는 경우, 비교함수는 아래와 같은 두개의 인수를 가져야 합니다. \n\n `function(left,right)` \n\n 비교함수는 left와 right의 두개의 값을 비교하기에, 값을 정렬하는 처리에서 호출됩니다. 만약 요구되는 정렬에서 left값을 right값보다 뒤로 두고싶은 경우에는, 비교함수는 치환을 나타내는 Boolean형의 ``true`를, 그렇지 않은 경우에는 `false`를 반환해야 합니다."
+    },
+    "$reverse": {
+        "args": "array",
+        "desc": "`array`에 포함된 모든 값의 순서를 역순으로 변환하여 반환합니다."
+    },
+    "$shuffle": {
+        "args": "array",
+        "desc": "`array`에 포함된 모든 값의 순서를 랜덤으로 반환합니다."
+    },
+    "$zip": {
+        "args": "array, ...",
+        "desc": "배열 `array1` ... arrayN`의 위치 0, 1, 2…. 의 값으로 구성된 convolved (zipped) 배열을 반환합니다."
+    },
+    "$keys": {
+        "args": "object",
+        "desc": "`object` 키를 포함하는 배열을 반환합니다. 인수가 오브젝트의 배열이면 반환되는 배열은 모든 오브젝트에있는 모든 키의 중복되지 않은 목록이 됩니다."
+    },
+    "$lookup": {
+        "args": "object, key",
+        "desc": "`object` 내의 `key`가 갖는 값을 반환합니다. 최초의 인수가 객체의 배열 인 경우, 배열 내의 모든 오브젝트를 검색하여, 존재하는 모든 키가 갖는 값을 반환합니다."
+    },
+    "$spread": {
+        "args": "object",
+        "desc": "`object`의 키/값 쌍별로 각 요소가 하나인 오브젝트 배열로 분할합니다. 만일 오브젝트 배열인 경우, 배열의 결과는 각 오브젝트에서 얻은 키/값 쌍의 오브젝트를 갖습니다."
+    },
+    "$merge": {
+        "args": "array<object>",
+        "desc": "`object`배열을 하나의 `object`로 병합합니다. 병합결과의 오브젝트는 입력배열내의 각 오브젝트의 키/값 쌍을 포함합니다. 입력 오브젝트가 같은 키를 가질경우, 반환 된 `object`에는 배열 마지막의 오브젝트의 키/값이 격납됩니다. 입력 배열이 오브젝트가 아닌 요소를 포함하는 경우, 에러가 발생합니다."
+    },
+    "$sift": {
+        "args": "object, function",
+        "desc": "함수 `function`을 충족시키는 `object` 인수 키/값 쌍만 포함하는 오브젝트를 반환합니다. \n\n 함수 `function` 다음과 같은 인수를 가져야 합니다 : \n\n `function(value [, key [, object]])`"
+    },
+    "$each": {
+        "args": "object, function",
+        "desc": "`object`의 각 키/값 쌍에, 함수`function`을 적용한 값의 배열을 반환합니다."
+    },
+    "$map": {
+        "args": "array, function",
+        "desc": "`array`의 각 값에 `function`을 적용한 결과로 이루어진 배열을 반환합니다. \n\n 함수 `function`은 다음과 같은 인수를 가져야 합니다.  \n\n `function(value[, index[, array]])`"
+    },
+    "$filter": {
+        "args": "array, function",
+        "desc": "`array`의 값중, 함수 `function`의 조건을 만족하는 값으로 이루어진 배열을 반환합니다. \n\n 함수 `function`은 다음과 같은 형식을 가져야 합니다.  \n\n `function(value[, index[, array]])`"
+    },
+    "$reduce": {
+        "args": "array, function [, init]",
+        "desc": "배열의 각 요소값에 함수 `function`을 연속적으로 적용하여 얻어지는 집계값을 반환합니다. `function`의 적용에는 직전의 `function`의 적용결과와 요소값이 인수로 주어집니다. \n\n 함수 `function`은 인수를 두개 뽑아, 배열의 각 요소 사이에 배치하는 중치연산자처럼 작용해야 합니다. \n\n 임의의 인수 `init`에는 집약시의 초기값을 설정합니다."
+    },
+    "$flowContext": {
+        "args": "string[, string]",
+        "desc": "플로우 컨텍스트 속성을 취득합니다."
+    },
+    "$globalContext": {
+        "args": "string[, string]",
+        "desc": "플로우의 글로벌 컨텍스트 속성을 취득합니다."
+    },
+    "$pad": {
+        "args": "string, width [, char]",
+        "desc": "문자수가 인수 `width`의 절대값이상이 되도록, 필요한 경우 여분의 패딩을 사용하여 `string`의 복사본을 반환합니다. \n\n `width`가 양수인 경우, 오른쪽으로 채워지고, 음수이면 왼쪽으로 채워집니다. \n\n 임의의 `char`인수에는 이 함수에서 사용할 패딩을 지정합니다. 지정하지 않는 경우에는, 기본값으로 공백을 사용합니다."
+    },
+    "$fromMillis": {
+        "args": "number",
+        "desc": "Unix Epoch (1970 년 1 월 1 일 UTC) 이후의 밀리 초를 나타내는 숫자를 ISO 8601 형식의 타임 스탬프 문자열로 변환합니다."
+    },
+    "$formatNumber": {
+        "args": "number, picture [, options]",
+        "desc": "`number`를 문자열로 변환하고 `picture` 문자열에 지정된 표현으로 서식을 변경합니다. \n\n 이 함수의 동작은 XPath F&O 3.1사양에 정의된 XPath/XQuery함수의 fn:format-number의 동작과 같습니다. 인수의 문자열 picture은 fn:format-number 과 같은 구문으로 수치의 서식을 정의합니다. \n\n 임의의 제3 인수 `option`은 소수점기호와 같은 기본 로케일 고유의 서식설정문자를 덮어쓰는데에 사용됩니다. 이 인수를 지정할 경우, XPath F&O 3.1사양의 수치형식에 기술되어있는 name/value 쌍을 포함하는 오브젝트여야 합니다."
+    },
+    "$formatBase": {
+        "args": "number [, radix]",
+        "desc": "`number`를 인수 `radix`에 지정한 값을 기수로하는 문자열로 변환합니다. `radix`가 지정되지 않은 경우, 기수 10이 기본값으로 설정됩니다. `radix`에는 2~36의 값을 설정할 수 있고, 그 외의 값의 경우에는 에러가 발생합니다."
+    },
+    "$toMillis": {
+        "args": "timestamp",
+        "desc": "ISO 8601 형식의 `timestamp`를 Unix Epoch (1970 년 1 월 1 일 UTC) 이후의 밀리 초 수로 변환합니다. 문자열이 올바른 형식이 아닌 경우 에러가 발생합니다."
+    },
+    "$env": {
+        "args": "arg",
+        "desc": "환경변수를 값으로 반환합니다.\n\n 이 함수는 Node-RED 정의 함수입니다."
+    }
+}

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.0-beta.2",
+    "version": "1.0.0-beta.2",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",

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

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

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

@@ -125,14 +125,20 @@ RED.history = (function() {
                         });
                     }
                 }
-                if (ev.subflow && ev.subflow.hasOwnProperty('instances')) {
-                    ev.subflow.instances.forEach(function(n) {
-                        var node = RED.nodes.node(n.id);
-                        if (node) {
-                            node.changed = n.changed;
-                            node.dirty = true;
-                        }
-                    });
+                if (ev.subflow) {
+                    if (ev.subflow.hasOwnProperty('instances')) {
+                        ev.subflow.instances.forEach(function(n) {
+                            var node = RED.nodes.node(n.id);
+                            if (node) {
+                                node.changed = n.changed;
+                                node.dirty = true;
+                            }
+                        });
+                    }
+                    if (ev.subflow.hasOwnProperty('status')) {
+                        subflow = RED.nodes.subflow(ev.subflow.id);
+                        subflow.status = ev.subflow.status;
+                    }
                 }
                 if (subflow) {
                     RED.nodes.filterNodes({type:"subflow:"+subflow.id}).forEach(function(n) {
@@ -232,6 +238,11 @@ RED.history = (function() {
                             }
                         });
                     }
+                    if (ev.subflow.hasOwnProperty('status')) {
+                        if (ev.subflow.status) {
+                            delete ev.node.status;
+                        }
+                    }
                     RED.editor.validateNode(ev.node);
                     RED.nodes.filterNodes({type:"subflow:"+ev.node.id}).forEach(function(n) {
                         n.inputs = ev.node.in.length;
@@ -262,6 +273,8 @@ RED.history = (function() {
             } else if (ev.t == "createSubflow") {
                 if (ev.nodes) {
                     RED.nodes.filterNodes({z:ev.subflow.subflow.id}).forEach(function(n) {
+                        n.x += ev.subflow.offsetX;
+                        n.y += ev.subflow.offsetY;
                         n.z = ev.activeWorkspace;
                         n.dirty = true;
                     });
@@ -288,6 +301,7 @@ RED.history = (function() {
                     RED.workspaces.order(ev.order);
                 }
             }
+
             Object.keys(modifiedTabs).forEach(function(id) {
                 var subflow = RED.nodes.subflow(id);
                 if (subflow) {
@@ -301,6 +315,7 @@ RED.history = (function() {
             RED.palette.refresh();
             RED.workspaces.refresh();
             RED.sidebar.config.refresh();
+            RED.subflow.refresh();
         }
 
     }

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',
@@ -30,12 +31,22 @@ RED.i18n = (function() {
                     defaultNs: "editor"
                 },
                 fallbackLng: ['en-US'],
-                useCookie: false
-            },function() {
+                useCookie: false,
+                returnObjectTrees: true
+            };
+            if (preferredLanguage) {
+                opts.lng = preferredLanguage;
+            }
+            i18n.init(opts,function() {
                 done();
             });
             RED["_"] = function() {
-                return i18n.t.apply(null,arguments);
+                var v = i18n.t.apply(null,arguments);
+                if (typeof v === 'string') {
+                    return v;
+                } else {
+                    return arguments[0];
+                }
             }
 
         },

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

@@ -2,6 +2,7 @@
     "*": {
         "ctrl-shift-p":"core:manage-palette",
         "ctrl-f": "core:search",
+        "ctrl-shift-f": "core:list-flows",
         "ctrl-=": "core:zoom-in",
         "ctrl--": "core:zoom-out",
         "ctrl-0": "core:zoom-reset",
@@ -22,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

@@ -358,17 +358,30 @@ RED.nodes = (function() {
         }
         subflows[sf.id] = sf;
         RED.nodes.registerType("subflow:"+sf.id, {
-            defaults:{name:{value:""}},
+            defaults:{
+                name:{value:""},
+                env:{value:[]}
+            },
             icon: function() { return sf.icon||"subflow.png" },
             category: sf.category || "subflows",
             inputs: sf.in.length,
             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 },
+            oneditresize: function(size) {
+                var rows = $("#dialog-form>div:not(.node-input-env-container-row)");
+                var height = size.height;
+                for (var i=0; i<rows.size(); i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-input-env-container-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $("#node-input-env-container").editableList('height',height-80);
+            },
             set:{
                 module: "node-red"
             }
@@ -535,6 +548,7 @@ RED.nodes = (function() {
         node.category = n.category;
         node.in = [];
         node.out = [];
+        node.env = n.env;
 
         n.in.forEach(function(p) {
             var nIn = {x:p.x,y:p.y,wires:[]};
@@ -571,6 +585,18 @@ RED.nodes = (function() {
                 node.icon = n.icon;
             }
         }
+        if (n.status) {
+            node.status = {x: n.status.x, y: n.status.y, wires:[]};
+            links.forEach(function(d) {
+                if (d.target === n.status) {
+                    if (d.source.type != "subflow") {
+                        node.status.wires.push({id:d.source.id, port:d.sourcePort})
+                    } else {
+                        node.status.wires.push({id:n.id, port:0})
+                    }
+                }
+            });
+        }
 
         return node;
     }
@@ -740,6 +766,20 @@ RED.nodes = (function() {
         if (!$.isArray(newNodes)) {
             newNodes = [newNodes];
         }
+
+        // Scan for any duplicate nodes and remove them. This is a temporary
+        // fix to help resolve corrupted flows caused by 0.20.0 where multiple
+        // copies of the flow would get loaded at the same time.
+        // If the user hit deploy they would have saved those duplicates.
+        var seenIds = {};
+        newNodes = newNodes.filter(function(n) {
+            if (seenIds[n.id]) {
+                return false;
+            }
+            seenIds[n.id] = true;
+            return true;
+        })
+
         var isInitialLoad = false;
         if (!initialLoad) {
             isInitialLoad = true;
@@ -851,6 +891,12 @@ RED.nodes = (function() {
                         output.i = i;
                         output.id = getID();
                     });
+                    if (n.status) {
+                        n.status.type = "subflow";
+                        n.status.direction = "status";
+                        n.status.z = n.id;
+                        n.status.id = getID();
+                    }
                     new_subflows.push(n);
                     addSubflow(n,createNewIds);
                 }
@@ -1018,6 +1064,7 @@ RED.nodes = (function() {
                         node.name = n.name;
                         node.outputs = subflow.out.length;
                         node.inputs = subflow.in.length;
+                        node.env = n.env;
                     } else {
                         if (!node._def) {
                             if (node.x && node.y) {
@@ -1025,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")
                                 }
@@ -1189,6 +1236,19 @@ RED.nodes = (function() {
                 });
                 delete output.wires;
             });
+            if (n.status) {
+                n.status.wires.forEach(function(wire) {
+                    var link;
+                    if (subflow_map[wire.id] && subflow_map[wire.id].id == n.id) {
+                        link = {source:n.in[wire.port], sourcePort:wire.port,target:n.status};
+                    } else {
+                        link = {source:node_map[wire.id]||subflow_map[wire.id], sourcePort:wire.port,target:n.status};
+                    }
+                    addLink(link);
+                    new_links.push(link);
+                });
+                delete n.status.wires;
+            }
         }
 
         RED.workspaces.refresh();
@@ -1306,21 +1366,23 @@ RED.nodes = (function() {
             RED.events.on("registry:node-type-added",function(type) {
                 var def = registry.getNodeType(type);
                 var replaced = false;
-                var replaceNodes = [];
+                var replaceNodes = {};
                 RED.nodes.eachNode(function(n) {
                     if (n.type === "unknown" && n.name === type) {
-                        replaceNodes.push(n);
+                        replaceNodes[n.id] = n;
                     }
                 });
                 RED.nodes.eachConfig(function(n) {
                     if (n.type === "unknown" && n.name === type) {
-                        replaceNodes.push(n);
+                        replaceNodes[n.id] = n;
                     }
                 });
 
-                if (replaceNodes.length > 0) {
+                var replaceNodeIds = Object.keys(replaceNodes);
+                if (replaceNodeIds.length > 0) {
                     var reimportList = [];
-                    replaceNodes.forEach(function(n) {
+                    replaceNodeIds.forEach(function(id) {
+                        var n = replaceNodes[id];
                         if (configNodes.hasOwnProperty(n.id)) {
                             delete configNodes[n.id];
                         } else {
@@ -1328,6 +1390,18 @@ RED.nodes = (function() {
                         }
                         reimportList.push(convertNode(n));
                     });
+
+                    // Remove any links between nodes that are going to be reimported.
+                    // This prevents a duplicate link from being added.
+                    var removeLinks = [];
+                    RED.nodes.eachLink(function(l) {
+                        if (replaceNodes.hasOwnProperty(l.source.id) && replaceNodes.hasOwnProperty(l.target.id)) {
+                            removeLinks.push(l);
+                        }
+                    });
+                    removeLinks.forEach(removeLink);
+
+
                     RED.view.redraw(true);
                     var result = importNodes(reimportList,false);
                     var newNodeMap = {};

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

@@ -28,19 +28,40 @@ var RED = (function() {
             var hasDeferred = false;
 
             var nodeConfigEls = $("<div>"+nodeConfig+"</div>");
-            nodeConfigEls.find("script").each(function(i,el) {
+            var scripts = nodeConfigEls.find("script");
+            var scriptCount = scripts.length;
+            scripts.each(function(i,el) {
                 var srcUrl = $(el).attr('src');
                 if (srcUrl && !/^\s*(https?:|\/|\.)/.test(srcUrl)) {
                     $(el).remove();
                     var newScript = document.createElement("script");
-                    newScript.onload = function() { $("body").append(nodeConfigEls); done() }
-                    $('body').append(newScript);
+                    newScript.onload = function() {
+                        scriptCount--;
+                        if (scriptCount === 0) {
+                            $("#red-ui-editor-node-configs").append(nodeConfigEls);
+                            done()
+                        }
+                    }
+                    if ($(el).attr('type') === "module") {
+                        newScript.type = "module";
+                    }
+                    $("#red-ui-editor-node-configs").append(newScript);
                     newScript.src = RED.settings.apiRootUrl+srcUrl;
                     hasDeferred = true;
+                } else {
+                    if (/\/ace.js$/.test(srcUrl) || /\/ext-language_tools.js$/.test(srcUrl)) {
+                        // Block any attempts to load ace.js from a CDN - this will
+                        // break the version of ace included in the editor.
+                        // At the time of commit, the contrib-python nodes did this.
+                        // This is a crude fix until the python nodes are fixed.
+                        console.warn("Blocked attempt to load",srcUrl,"by",moduleId)
+                        $(el).remove();
+                    }
+                    scriptCount--;
                 }
             })
             if (!hasDeferred) {
-                $("body").append(nodeConfigEls);
+                $("#red-ui-editor-node-configs").append(nodeConfigEls);
                 done();
             }
         } catch(err) {
@@ -96,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) {
@@ -211,7 +232,7 @@ var RED = (function() {
                             }
                         ]
                     } else if (msg.error === "missing-types") {
-                        text+="<ul><li>"+msg.types.join("</li><li>")+"</li></ul>";
+                        text+="<ul><li>"+msg.types.map(RED.utils.sanitize).join("</li><li>")+"</li></ul>";
                         if (!!RED.projects.getActiveProject()) {
                             options.buttons = [
                                 {
@@ -239,7 +260,7 @@ var RED = (function() {
                             if (RED.user.hasPermission("projects.write")) {
                                 options.buttons = [
                                     {
-                                        text: "Setup credentials",
+                                        text: RED._("notification.project.setupCredentials"),
                                         click: function() {
                                             persistentNotifications[notificationId].hideNotification();
                                             RED.projects.showCredentialsPrompt();
@@ -250,7 +271,7 @@ var RED = (function() {
                         } else {
                             options.buttons = [
                                 {
-                                    text: "Close",
+                                    text: RED._("common.label.close"),
                                     click: function() {
                                         persistentNotifications[notificationId].hideNotification();
                                     }
@@ -261,7 +282,7 @@ var RED = (function() {
                         if (RED.user.hasPermission("projects.write")) {
                             options.buttons = [
                                 {
-                                    text: "Setup project files",
+                                    text: RED._("notification.project.setupProjectFiles"),
                                     click: function() {
                                         persistentNotifications[notificationId].hideNotification();
                                         RED.projects.showFilesPrompt();
@@ -273,10 +294,10 @@ var RED = (function() {
                         if (RED.user.hasPermission("projects.write")) {
                             options.buttons = [
                                 {
-                                    text: "Create default package file",
+                                    text: RED._("notification.project.setupProjectFiles"),
                                     click: function() {
                                         persistentNotifications[notificationId].hideNotification();
-                                        RED.projects.createDefaultPackageFile();
+                                        RED.projects.showFilesPrompt();
                                     }
                                 }
                             ]
@@ -285,13 +306,13 @@ var RED = (function() {
                         if (RED.user.hasPermission("projects.write")) {
                             options.buttons = [
                                 {
-                                    text: "No thanks",
+                                    text: RED._("notification.project.no"),
                                     click: function() {
                                         persistentNotifications[notificationId].hideNotification();
                                     }
                                 },
                                 {
-                                    text: "Create default project files",
+                                    text: RED._("notification.project.createDefault"),
                                     click: function() {
                                         persistentNotifications[notificationId].hideNotification();
                                         RED.projects.createDefaultFileSet();
@@ -305,7 +326,7 @@ var RED = (function() {
                         if (RED.user.hasPermission("projects.write")) {
                             options.buttons = [
                                 {
-                                    text: "Show merge conflicts",
+                                    text: RED._("notification.project.mergeConflict"),
                                     click: function() {
                                         persistentNotifications[notificationId].hideNotification();
                                         RED.sidebar.versionControl.showLocalChanges();
@@ -329,12 +350,11 @@ var RED = (function() {
             var parts = topic.split("/");
             var node = RED.nodes.node(parts[1]);
             if (node) {
-                if (msg.hasOwnProperty("text")) {
-                    if (msg.text[0] !== ".") {
-                        msg.text = node._(msg.text.toString(),{defaultValue:msg.text.toString()});
-                    }
+                if (msg.hasOwnProperty("text") && /^[a-zA-Z]/.test(msg.text)) {
+                    msg.text = node._(msg.text.toString(),{defaultValue:msg.text.toString()});
                 }
                 node.status = msg;
+                node.dirtyStatus = true;
                 node.dirty = true;
                 RED.view.redraw();
             }
@@ -391,7 +411,7 @@ var RED = (function() {
                     typeList = "<ul><li>"+msg.types.join("</li><li>")+"</li></ul>";
                     RED.notify(RED._("palette.event.nodeDisabled", {count:msg.types.length})+typeList,"success");
                 }
-            } else if (topic == "node/upgraded") {
+            } else if (topic == "notification/node/upgraded") {
                 RED.notify(RED._("palette.event.nodeUpgraded", {module:msg.module,version:msg.version}),"success");
                 RED.nodes.registry.setModulePendingUpdated(msg.module,msg.version);
             }
@@ -415,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:[
@@ -424,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);
@@ -482,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 {
@@ -504,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) {
@@ -538,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"));
-                            $( 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")
@@ -327,6 +327,14 @@
         },
         length: function() {
             return this.element.children().length;
+        },
+        show: function(item) {
+            var items = this.element.children().filter(function(f) {
+                return item === $(this).find(".red-ui-editableList-item-content").data('data');
+            });
+            if (items.length > 0) {
+                this.uiContainer.scrollTop(this.uiContainer.scrollTop()+items.position().top)
+            }
         }
     });
 })(jQuery);

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,30 @@ RED.menu = (function() {
 
     }
     function createMenu(options) {
+        var topMenu = $("<ul/>",{class:"red-ui-menu red-ui-menu-dropdown pull-right"});
 
-        var menuParent = $("#"+options.id);
-
-        var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"});
-
-        if (menuParent.length === 1) {
-            topMenu.insertAfter(menuParent);
+        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();
+                    }
+                })
+            }
         }
 
         var lastAddedSeparator = false;
@@ -222,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;
@@ -262,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

@@ -15,6 +15,19 @@
  **/
 (function($) {
 
+/**
+ * options:
+ *   - minimumLength : the minimum length of text before firing a change event
+ *   - delay : delay, in ms, after a keystroke before firing change event
+ *
+ * methods:
+ *   - value([val]) - gets the current value, or, if `val` is provided, sets the value
+ *   - count - sets or clears a sub-label on the input. This can be used to provide
+ *             a feedback on the number of matches, or number of available entries to search
+ *   - change - trigger a change event
+ *
+ */
+
     $.widget( "nodered.searchBox", {
         _create: function() {
             var that = this;
@@ -22,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");
 
@@ -31,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);
@@ -47,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

@@ -36,8 +36,8 @@ RED.tabs = (function() {
         }
         if (options.addButton) {
             wrapper.addClass("red-ui-tabs-add");
-            var addButton = $('<div class="red-ui-tab-button"><a href="#"><i class="fa fa-plus"></i></a></div>').appendTo(wrapper);
-            addButton.find('a').click(function(evt) {
+            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').on("click", function(evt) {
                 evt.preventDefault();
                 if (typeof options.addButton === 'function') {
                     options.addButton();
@@ -69,7 +69,25 @@ RED.tabs = (function() {
                     RED.actions.invoke(options.addButton,{index:targetIndex});
                 }
             });
-
+        }
+        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').on("click", function(evt) {
+                evt.preventDefault();
+                if (typeof options.searchButton === 'function') {
+                    options.searchButton()
+                } else if (typeof options.searchButton === 'string') {
+                    RED.actions.invoke(options.searchButton);
+                }
+            })
+            if (typeof options.searchButton === 'string') {
+                var l = options.searchButton;
+                if (options.searchButtonCaption) {
+                    l = options.searchButtonCaption
+                }
+                RED.popover.tooltip(searchButton,l,options.searchButton);
+            }
 
         }
         var scrollLeft;
@@ -78,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");
@@ -95,7 +113,8 @@ 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) {
                         var pinnedOptions = [];
@@ -117,19 +136,26 @@ 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"
                         })
-                        collapsibleMenu.on('mouseleave', function(){ $(this).hide() });
-                        collapsibleMenu.on('mouseup', function() { $(this).hide() });
                         collapsibleMenu.appendTo("body");
                     }
                     var elementPos = selectButton.offset();
                     collapsibleMenu.css({
-                        top: (elementPos.top+selectButton.height()-20)+"px",
+                        top: (elementPos.top+selectButton.height()-2)+"px",
                         left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
                     })
+                    if (collapsibleMenu.is(":visible")) {
+                        $(document).off("click.red-ui-tabmenu");
+                    } else {
+                        $(".red-ui-menu").hide();
+                        $(document).on("click.red-ui-tabmenu", function(evt) {
+                            $(document).off("click.red-ui-tabmenu");
+                            collapsibleMenu.hide();
+                        });
+                    }
                     collapsibleMenu.toggle();
                 })
             }
@@ -323,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) {
@@ -409,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"));
@@ -423,7 +449,10 @@ RED.tabs = (function() {
             }
             delete tabs[id];
             updateTabWidths();
-            collapsibleMenu = null;
+            if (collapsibleMenu) {
+                collapsibleMenu.remove();
+                collapsibleMenu = null;
+            }
         }
 
         return {
@@ -459,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");
@@ -484,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);
                     });
@@ -518,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) {
@@ -601,7 +630,10 @@ RED.tabs = (function() {
                 setTimeout(function() {
                     updateTabWidths();
                 },10);
-                collapsibleMenu = null;
+                if (collapsibleMenu) {
+                    collapsibleMenu.remove();
+                    collapsibleMenu = null;
+                }
             },
             removeTab: removeTab,
             activateTab: activateTab,
@@ -609,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;
@@ -618,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>').html(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,9 +356,35 @@
                 for (var i=0; i<items.length;i++) {
                     this._topList.editableList('addItem',items[i]);
                 }
+                this._trigger("select")
+
             } else {
                 return this._data;
             }
+        },
+        show: function(id) {
+            for (var i=0;i<this._data.length;i++) {
+                if (this._data[i].id === id) {
+                    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;
@@ -160,14 +209,19 @@
                 that.input.css("margin"+d,0);
             });
 
+            ["type","placeholder"].forEach(function(d) {
+                var m = that.element.attr(d);
+                that.input.attr(d,m);
+            });
+
             this.uiSelect.addClass("red-ui-typedInput-container");
 
             this.element.attr('type','hidden');
 
             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);
 
@@ -194,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();
             });
@@ -207,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) {
@@ -236,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() {
@@ -252,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) {
@@ -293,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);
                 }
             })
@@ -334,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",
@@ -341,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);
                     }
@@ -357,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();
@@ -377,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'
@@ -460,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();
             }
@@ -503,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);
             }
         },
@@ -549,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) {
@@ -630,6 +708,7 @@
                                 }
                             }
                         }
+                        this.input.trigger('change',this.propertyType,this.value());
                     } else {
                         if (this.optionSelectTrigger) {
                             this.optionSelectTrigger.hide();
@@ -638,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);
         })
     }
@@ -261,18 +261,20 @@ RED.deploy = (function() {
         }
         return list;
     }
-
+    function sanitize(html) {
+        return html.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
+    }
     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",
@@ -282,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");
@@ -302,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;
@@ -353,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).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() {
@@ -373,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 (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() {
@@ -409,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};
 
@@ -420,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",
@@ -474,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) {
@@ -488,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);
                 }
@@ -498,7 +505,6 @@ RED.editor = (function() {
     }
 
     function getEditStackTitle() {
-        var title = '<ul class="editor-tray-breadcrumbs">';
         var label;
         for (var i=editStack.length-1;i<editStack.length;i++) {
             var node = editStack[i];
@@ -507,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') {
@@ -514,33 +522,174 @@ RED.editor = (function() {
             } else if (node.type === '_buffer') {
                 label = RED._("bufferEditor.title");
             } else if (node.type === 'subflow') {
-                label = RED._("subflow.editSubflow",{name:node.name})
+                label = RED._("subflow.editSubflow",{name:RED.utils.sanitize(node.name)})
             } else if (node.type.indexOf("subflow:")===0) {
                 var subflow = RED.nodes.subflow(node.type.substring(8));
-                label = RED._("subflow.editSubflow",{name:subflow.name})
+                label = RED._("subflow.editSubflowInstance",{name:RED.utils.sanitize(subflow.name)})
             } else {
                 if (typeof node._def.paletteLabel !== "undefined") {
                     try {
-                        label = (typeof node._def.paletteLabel === "function" ? node._def.paletteLabel.call(node._def) : node._def.paletteLabel)||"";
+                        label = RED.utils.sanitize((typeof node._def.paletteLabel === "function" ? node._def.paletteLabel.call(node._def) : node._def.paletteLabel)||"");
                     } catch(err) {
                         console.log("Definition error: "+node.type+".paletteLabel",err);
                     }
                 }
                 if (i === editStack.length-1) {
                     if (RED.nodes.node(node.id)) {
-                        label = RED._("editor.editNode",{type:label});
+                        label = RED._("editor.editNode",{type:RED.utils.sanitize(label)});
                     } else {
-                        label = RED._("editor.addNewConfig",{type:label});
+                        label = RED._("editor.addNewConfig",{type:RED.utils.sanitize(label)});
                     }
                 }
             }
-            title += '<li>'+label+'</li>';
         }
-        title += '</ul>';
         return label;
     }
 
-    function buildEditForm(container,formId,type,ns) {
+    function buildEnvForm(container, node) {
+        var env_container = $('#node-input-env-container');
+        env_container
+            .css({
+                'min-height':'150px',
+                'min-width':'450px'
+            })
+            .editableList({
+                addItem: function(container, i, opt) {
+                    var row = $('<div/>').appendTo(container);
+                    if (opt.parent) {
+                        $('<div/>', {
+                            class:"uneditable-input",
+                            style: "margin-left: 5px; width: calc(40% - 8px)",
+                        }).appendTo(row).text(opt.name);
+                    } else {
+                        $('<input/>', {
+                            class: "node-input-env-name",
+                            type: "text",
+                            style: "margin-left: 5px; width: calc(40% - 8px)",
+                            placeholder: RED._("common.label.name")
+                        }).appendTo(row).val(opt.name);
+                    }
+                    var valueField = $('<input/>',{
+                        class: "node-input-env-value",
+                        type: "text",
+                        style: "margin-left: 5px; width: calc(60% - 8px)"
+                    }).appendTo(row)
+
+                    valueField.typedInput({default:'str',
+                                           types:['str','num','bool','json','bin','env']
+                                          });
+
+                    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 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) {
+                        if ((opt.value !== undefined) && (opt.value !== opt.parent.value || opt.type !== opt.parent.type)) {
+                            actionButton.show();
+                        } else {
+                            actionButton.hide();
+                        }
+                        var restoreTip = RED.popover.tooltip(actionButton,RED._("subflow.env.restore"));
+                        valueField.on("change", function(evt) {
+                            var newType = valueField.typedInput('type');
+                            var newValue = valueField.typedInput('value');
+                            if (newType === opt.parent.type && newValue === opt.parent.value) {
+                                actionButton.hide();
+                            } else {
+                                actionButton.show();
+                            }
+                        })
+                        actionButton.on("click", function(evt) {
+                            evt.preventDefault();
+                            restoreTip.close();
+                            valueField.typedInput('type', opt.parent.type);
+                            valueField.typedInput('value', opt.parent.value);
+                        })
+                    } else {
+                        var removeTip = RED.popover.tooltip(actionButton,RED._("subflow.env.remove"));
+                        actionButton.on("click", function(evt) {
+                            evt.preventDefault();
+                            removeTip.close();
+                            container.parent().addClass("red-ui-editableList-item-deleting")
+                            container.fadeOut(300, function() {
+                                env_container.editableList('removeItem',opt);
+                            });
+                        });
+                    }
+                },
+                sortable: false,
+                removable: false
+            });
+        var parentEnv = {};
+        var envList = [];
+        if (/^subflow:/.test(node.type)) {
+            var subflowDef = RED.nodes.subflow(node.type.substring(8));
+            if (subflowDef.env) {
+                subflowDef.env.forEach(function(env) {
+                    var item = {
+                        name:env.name,
+                        parent: {
+                            type: env.type,
+                            value: env.value
+                        }
+                    }
+                    envList.push(item);
+                    parentEnv[env.name] = item;
+                })
+            }
+        }
+
+        if (node.env) {
+            for (var i = 0; i < node.env.length; i++) {
+                var env = node.env[i];
+                if (parentEnv.hasOwnProperty(env.name)) {
+                    parentEnv[env.name].type = env.type;
+                    parentEnv[env.name].value = env.value;
+                } else {
+                    envList.push({
+                        name: env.name,
+                        type: env.type,
+                        value: env.value
+                    });
+                }
+            }
+        }
+        envList.forEach(function(env) {
+            env_container.editableList('addItem', env);
+        })
+    }
+
+    function exportEnvList(list) {
+        if (list) {
+            var env = [];
+            list.each(function(i) {
+                var entry = $(this);
+                var item = entry.data('data');
+                var name = item.parent?item.name:entry.find(".node-input-env-name").val();
+                var valueInput = entry.find(".node-input-env-value");
+                var value = valueInput.typedInput("value");
+                var type = valueInput.typedInput("type");
+                if (!item.parent || (item.parent.value !== value || item.parent.type !== type)) {
+                    var item = {
+                        name: name,
+                        type: type,
+                        value: value
+                    };
+                    env.push(item);
+                }
+            });
+            return env;
+        }
+        return null;
+    }
+
+    function isSameEnv(env0, env1) {
+        return (JSON.stringify(env0) === JSON.stringify(env1));
+    }
+
+    function buildEditForm(container,formId,type,ns,node) {
         var dialogForm = $('<form id="'+formId+'" class="form-horizontal" autocomplete="off"></form>').appendTo(container);
         dialogForm.html($("script[data-template-name='"+type+"']").html());
         ns = ns||"node-red";
@@ -561,12 +710,17 @@ RED.editor = (function() {
             }
             $(this).attr("data-i18n",keys.join(";"));
         });
+
+        if ((type === "subflow") || (type === "subflow-template")) {
+            buildEnvForm(dialogForm, node);
+        }
+
         // Add dummy fields to prevent 'Enter' submitting the form in some
         // cases, and also prevent browser auto-fill of password
         // 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;
     }
 
@@ -575,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') {
@@ -587,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--;
         }
 
@@ -623,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();
@@ -662,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) {
@@ -683,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 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("");
             })
@@ -714,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();
@@ -749,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 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);
@@ -768,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) {
@@ -780,7 +934,7 @@ RED.editor = (function() {
                     iconDiv.on("mouseout", function() {
                         summary.html("&nbsp;");
                     })
-                    iconDiv.click(function() {
+                    iconDiv.on("click", function() {
                         hide();
                         done(moduleName+"/"+icon);
                     })
@@ -788,7 +942,7 @@ RED.editor = (function() {
             }
         });
         picker.slideDown(100);
-        searchInput.focus();
+        searchInput.trigger("focus");
     }
 
     function buildAppearanceForm(container,node) {
@@ -798,7 +952,7 @@ RED.editor = (function() {
 
         $('<div class="form-row">'+
             '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
-            '<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);
 
@@ -832,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 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);
@@ -874,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);
@@ -883,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);
@@ -895,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;
@@ -914,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) {
@@ -1085,6 +1239,13 @@ RED.editor = (function() {
                                     var input = $("#node-input-"+d);
                                     if (input.attr('type') === "checkbox") {
                                         newValue = input.prop('checked');
+                                    } else if (input.prop("nodeName") === "select" && input.attr("multiple") === "multiple") {
+                                        // An empty select-multiple box returns null.
+                                        // Need to treat that as an empty array.
+                                        newValue = input.val();
+                                        if (newValue == null) {
+                                            newValue = [];
+                                        }
                                     } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
                                         newValue = input.text();
                                     } else {
@@ -1174,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;
@@ -1261,6 +1422,16 @@ RED.editor = (function() {
                             }
                         }
 
+                        if (type === "subflow") {
+                            var old_env = editing_node.env;
+                            var new_env = exportEnvList($("#node-input-env-container").editableList("items"));
+                            if (!isSameEnv(old_env, new_env)) {
+                                editing_node.env = new_env;
+                                changes.env = editing_node.env;
+                                changed = true;
+                            }
+                        }
+
                         if (changed) {
                             var wasChanged = editing_node.changed;
                             editing_node.changed = true;
@@ -1309,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()});
@@ -1320,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);
@@ -1363,10 +1534,10 @@ 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);
+                buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node);
                 editorTabs.addTab(nodePropertiesTab);
 
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty('info'))  {
@@ -1374,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();
@@ -1388,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);
@@ -1435,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");
                 }
             });
         }
@@ -1487,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 {
@@ -1498,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);
@@ -1529,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);
@@ -1540,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();
@@ -1553,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>');
@@ -1573,7 +1744,7 @@ RED.editor = (function() {
                         if (nodeUserFlows[ws.id]) {
                             workspaceLabel = "* "+workspaceLabel;
                         }
-                        tabSelect.append('<option value="'+ws.id+'"'+(ws.id==editing_config_node.z?" selected":"")+'>'+workspaceLabel+'</option>');
+                        $('<option value="'+ws.id+'"'+(ws.id==editing_config_node.z?" selected":"")+'></option>').text(workspaceLabel).appendTo(tabSelect);
                     });
                     tabSelect.append('<option disabled data-i18n="sidebar.config.subflows"></option>');
                     RED.nodes.eachSubflow(function(ws) {
@@ -1581,24 +1752,24 @@ RED.editor = (function() {
                         if (nodeUserFlows[ws.id]) {
                             workspaceLabel = "* "+workspaceLabel;
                         }
-                        tabSelect.append('<option value="'+ws.id+'"'+(ws.id==editing_config_node.z?" selected":"")+'>'+workspaceLabel+'</option>');
+                        $('<option value="'+ws.id+'"'+(ws.id==editing_config_node.z?" selected":"")+'></option>').text(workspaceLabel).appendTo(tabSelect);
                     });
                     if (flowCount > 0) {
                         tabSelect.on('change',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();
@@ -1664,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 {
@@ -1902,12 +2073,12 @@ RED.editor = (function() {
                 }
 
                 configNodes.forEach(function(cn) {
-                    select.append('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'>'+RED.text.bidi.enforceTextDirectionWithUCC(cn.__label__)+'</option>');
+                    $('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'></option>').text(RED.text.bidi.enforceTextDirectionWithUCC(cn.__label__)).appendTo(select);
                     delete cn.__label__;
                 });
 
                 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);
             }
         }
     }
@@ -1956,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;
@@ -1979,6 +2150,14 @@ RED.editor = (function() {
                             changed = true;
                         }
 
+                        var old_env = editing_node.env;
+                        var new_env = exportEnvList($("#node-input-env-container").editableList("items"));
+                        if (!isSameEnv(old_env, new_env)) {
+                            editing_node.env = new_env;
+                            changes.env = editing_node.env;
+                            changed = true;
+                        }
+
                         RED.palette.refresh();
 
                         if (changed) {
@@ -2017,13 +2196,21 @@ RED.editor = (function() {
                     }
                 }
             ],
-            resize: function(dimensions) {
-                $(".editor-tray-content").height(dimensions.height - 50);
-                var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40);
+            resize: function(size) {
+                $(".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++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                var editorRow = $("#dialog-form>div.node-input-env-container-row");
+                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+                $("#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');
 
 
@@ -2053,17 +2240,17 @@ 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");
+                buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node);
                 editorTabs.addTab(nodePropertiesTab);
 
                 var descriptionTab = {
                     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();
@@ -2076,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);
@@ -2103,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);
@@ -2164,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();
@@ -2214,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 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({
@@ -2236,7 +2423,7 @@ RED.editor = (function() {
                     })
                 });
             }
-            var helpButton = $('<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',
@@ -2251,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,
@@ -2268,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 class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
-        '<button class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
-        '<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 class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+
-            '<button class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+
-            '<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 class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
-            '<button class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
-            '<button class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
-            '<button class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
-            '<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 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",
@@ -56,8 +56,13 @@ RED.notifications = (function() {
             type = options.type;
         }
 
+        if (options.id && persistentNotifications.hasOwnProperty(options.id)) {
+            persistentNotifications[options.id].update(msg,options);
+            return persistentNotifications[options.id];
+        }
+
         if (options.modal) {
-            $("#full-shade").show();
+            $("#red-ui-full-shade").show();
         }
 
         if (currentNotifications.length > 4) {
@@ -72,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({
@@ -98,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);
                 }
@@ -111,7 +116,7 @@ RED.notifications = (function() {
         }
 
 
-        $("#notifications").append(n);
+        $("#red-ui-notifications").append(n);
         if (!RED.notifications.hide) {
             $(n).slideDown(300);
         }
@@ -137,7 +142,7 @@ RED.notifications = (function() {
                     nn.parentNode.removeChild(nn);
                 }
                 if (options.modal) {
-                    $("#full-shade").hide();
+                    $("#red-ui-full-shade").hide();
                 }
             };
         })();
@@ -181,11 +186,13 @@ RED.notifications = (function() {
                 if (typeof options === 'number') {
                     timeout = options;
                 } else if (options !== undefined) {
-                    timeout = options.timeout;
+                    if (!options.fixed) {
+                        timeout = options.timeout || 5000;
+                    }
                     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);
                             }
@@ -203,13 +210,18 @@ RED.notifications = (function() {
                 }
                 if (nn.hidden) {
                     nn.showNotification();
+                } else if (!options || !options.silent){
+                    $(nn).addClass("red-ui-notification-shake-horizontal");
+                    setTimeout(function() {
+                        $(nn).removeClass("red-ui-notification-shake-horizontal");
+                    },300);
                 }
 
             }
         })();
 
         if (!fixed) {
-            $(n).click((function() {
+            $(n).on("click", (function() {
                 var nn = n;
                 return function() {
                     nn.close();
@@ -221,7 +233,9 @@ RED.notifications = (function() {
         currentNotifications.push(n);
         if (options.id) {
             persistentNotifications[options.id] = n;
-            notificationButtonWrapper.show();
+            if (options.fixed) {
+                notificationButtonWrapper.show();
+            }
         }
         c+=1;
         return n;
@@ -249,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);
                     }
                 }
 
@@ -289,7 +284,7 @@ RED.palette.editor = (function() {
             }
             if (moduleInfo.pending_version) {
                 nodeEntry.versionSpan.html(moduleInfo.version+' <i class="fa fa-long-arrow-right"></i> '+moduleInfo.pending_version).appendTo(nodeEntry.metaRow)
-                nodeEntry.updateButton.text(RED._('palette.editor.updated')).addClass('disabled').show();
+                nodeEntry.updateButton.text(RED._('palette.editor.updated')).addClass('disabled').css('display', 'inline-block');
             } else if (loadedIndex.hasOwnProperty(module)) {
                 if (semVerCompare(loadedIndex[module].version,moduleInfo.version) === 1) {
                     nodeEntry.updateButton.show();
@@ -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();
         });
     }
@@ -78,22 +78,24 @@ RED.palette = (function() {
         var lineHeight = 20;
         var portHeight = 10;
 
+        label = RED.utils.sanitize(label);
+
         var words = label.split(/[ -]/);
 
         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);
@@ -102,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 {
@@ -143,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);
     }
 
@@ -153,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) {
@@ -163,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];
@@ -175,13 +177,19 @@ RED.palette = (function() {
                 }
             }
 
-            $('<div/>',{class:"palette_label"+(def.align=="right"?" palette_label_right":"")}).appendTo(d);
+            $('<div/>', {
+                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=="right"?" palette_icon_container_right":"")}).appendTo(d);
+                var iconContainer = $('<div/>', {
+                    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);
             }
 
@@ -189,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);
 
@@ -224,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;
@@ -245,22 +253,18 @@ RED.palette = (function() {
             var paletteTop;
             $(d).draggable({
                 helper: 'clone',
-                appendTo: 'body',
-                revert: true,
-                revertDuration: 50,
-                containment:'#main-container',
+                appendTo: '#red-ui-editor',
+                revert: 'invalid',
+                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) {
-
-                    // TODO: this is the margin-left of palette node. Hard coding
-                    // it here makes me sad
-                    //console.log(ui.helper.position());
-                    ui.position.left += 17.5;
+                    ui.originalPosition.left = $('#' + e.target.id).offset().left;
 
                     if (def.inputs > 0 && def.outputs > 0) {
                         mouseX = ui.position.left-paletteWidth+(ui.helper.width()/2) - chartOffset.left + chart.scrollLeft();
@@ -289,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);
@@ -302,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) {
@@ -326,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();
                 });
@@ -334,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();
             }
 
@@ -344,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");
             }
         }
@@ -357,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; }
@@ -370,21 +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(".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(".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();
@@ -392,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();
@@ -406,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");
                     }
                 }
@@ -429,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 {
@@ -441,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 {
@@ -453,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);
@@ -493,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();
         })
 
@@ -531,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)) {
@@ -539,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)) {
@@ -549,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) {
@@ -561,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);
                                         }
@@ -526,12 +525,12 @@ RED.projects.settings = (function() {
 
     }
 
-    function showProjectFileListing(row,activeProject,current,filter,done) {
+    function showProjectFileListing(row,activeProject,current,selectFilter,done) {
         var dialog;
         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);
@@ -569,22 +568,23 @@ RED.projects.settings = (function() {
                 })
                 return result;
             }
-            var files = sortFiles("",files,"");
-            createFileSubList(container,files.children,current,filter,done,"height: 175px");
+            var files = sortFiles("",files,"")
+
+            createFileSubList(container,files.children,current,selectFilter,done,"height: 175px");
             spinner.remove();
         });
         return container;
     }
 
-    function createFileSubList(container, files, current, filter, onselect, style) {
+    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) {
@@ -592,9 +592,9 @@ RED.projects.settings = (function() {
                         } else {
                             children.hide();
                         }
-                        createFileSubList(children,entry.children,current,filter,onselect);
+                        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);
@@ -615,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);
-                    if (filter.test(entry.name)) {
+                    $('<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);
+                            onselect(entry.path,true);
                         })
-                        header.dblclick(function(e) {
+                        header.on("dblclick", function(e) {
                             e.preventDefault();
                             onselect(entry.path,true);
                         })
@@ -636,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) {
@@ -653,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();
@@ -670,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();
@@ -681,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();
@@ -728,23 +728,32 @@ 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 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(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.packageCreate"));
+                        packageFileSubLabel.show();
+                    }
+
+                    packageFileInputSearch.show();
+                    // packageFileInputCreate.show();
                     flowFileLabelText.hide();
                     flowFileInput.show();
                     flowFileInputSearch.show();
-                    credFileLabel.hide();
-                    credFileInput.show();
-                    flowFileInput.focus();
+
+                    flowFileInputResize();
+
                     // 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();
@@ -753,19 +762,88 @@ RED.projects.settings = (function() {
         var row;
 
         // Flow files
-        row = $('<div class="user-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 flowFileLabelText = $('<span style="display:inline-block; padding: 6px">').text(activeProject.files.flow).appendTo(flowFileLabel);
+        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 flowFileInput = $('<input id="" type="text" style="margin-bottom: 0;width: 100%; border: none;">').val(activeProject.files.flow).hide().appendTo(flowFileLabel);
-        var flowFileInputSearch = $('<button class="editor-button" 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(flowFileLabel)
-            .click(function(e) {
+            .appendTo(packageFileLabel)
+            .on("click", function(e) {
                 if ($(this).hasClass('selected')) {
                     $(this).removeClass('selected');
-                    flowFileLabel.find('.project-file-listing-container').slideUp(200,function() {
+                    packageFileLabel.find('.red-ui-projects-file-listing-container').slideUp(200,function() {
+                         $(this).remove();
+                         packageFileLabel.css('height','');
+                     });
+                    packageFileLabel.css('color','');
+                } else {
+                    $(this).addClass('selected');
+                    packageFileLabel.css('color','inherit');
+                    var fileList = showProjectFileListing(packageFileLabel,activeProject,packageFileInput.val(),
+                                        function(entry) { return entry.children || /package\.json$/.test(entry.path); },
+                                        function(result,close) {
+                                            if (result) {
+                                                packageFileInput.val(result);
+                                                packageFileLabelText.text(result);
+                                                var rootDir = result.substring(0,result.length - 12);
+                                                flowFileLabelPrefixText.text(rootDir);
+                                                credFileLabelPrefixText.text(rootDir);
+                                                flowFileInputResize();
+                                                packageFileSubLabel.hide();
+                                            }
+                                            if (close) {
+                                                $(packageFileInputSearch).trigger("click");
+                                            }
+                                            checkFiles();
+                                        });
+                    packageFileLabel.css('height','auto');
+                    setTimeout(function() {
+                        fileList.slideDown(200);
+                    },50);
+
+                }
+            })
+        RED.popover.tooltip(packageFileInputSearch,RED._("sidebar.project.projectSettings.selectFile"));
+        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(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
+            packageFileSubLabel.show();
+        }
+
+
+        var projectPackage = activeProject.files.package||"package.json";
+        var projectRoot = projectPackage.substring(0,projectPackage.length - 12);
+
+        // Flow files
+        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);
+        var flowFileName = "flows.json";
+        if (activeProject.files.flow) {
+            if (activeProject.files.flow.indexOf(projectRoot) === 0) {
+                flowFileName = activeProject.files.flow.substring(projectRoot.length);
+            } else {
+                flowFileName = activeProject.files.flow;
+            }
+        }
+        var flowFileLabelText = $('<span style="display:inline-block; padding: 6px 6px 6px 0">').text(flowFileName).appendTo(flowFileLabel);
+        var flowFileInputResize = function() {
+            flowFileInput.css({
+                "width": "calc(100% - "+(flowFileInputSearch.width() + flowFileLabelPrefixText.width())+"px)"
+            });
+        }
+        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="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)
+            .on("click", function(e) {
+                if ($(this).hasClass('selected')) {
+                    $(this).removeClass('selected');
+                    flowFileLabel.find('.red-ui-projects-file-listing-container').slideUp(200,function() {
                          $(this).remove();
                          flowFileLabel.css('height','');
                      });
@@ -773,15 +851,24 @@ RED.projects.settings = (function() {
                 } else {
                     $(this).addClass('selected');
                     flowFileLabel.css('color','inherit');
-                    var fileList = showProjectFileListing(flowFileLabel,activeProject,flowFileInput.val(), /.*\.json$/,function(result,isDblClick) {
-                        if (result) {
-                            flowFileInput.val(result);
-                        }
-                        if (isDblClick) {
-                            $(flowFileInputSearch).click();
-                        }
-                        checkFiles();
-                    });
+                    var packageFile = packageFileInput.val();
+                    var packagePrefix = packageFile.substring(0,packageFile.length - 12);
+                    var re = new RegExp("^"+packagePrefix+".*\.json$");
+                    var fileList = showProjectFileListing(flowFileLabel,
+                                                          activeProject,
+                                                          flowFileInput.val(),
+                                                          function(entry) { return !/package.json$/.test(entry.path) && re.test(entry.path) && !/_cred\.json$/.test(entry.path) },
+                                                          function(result,isDblClick) {
+                                                              if (result) {
+                                                                  flowFileInput.val(result.substring(packagePrefix.length));
+
+                                                              }
+                                                              if (isDblClick) {
+                                                                  $(flowFileInputSearch).trigger("click");
+                                                              }
+                                                              checkFiles();
+                                                          }
+                                                      );
                     flowFileLabel.css('height','auto');
                     setTimeout(function() {
                         fileList.slideDown(200);
@@ -789,26 +876,41 @@ 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 credFileLabel = $('<div class="uneditable-input">').text(activeProject.files.credentials).appendTo(row);
-        var credFileInput = $('<div class="uneditable-input">').text(activeProject.files.credentials).hide().insertAfter(credFileLabel);
+
+        var credFileName = "flows_cred.json";
+        if (activeProject.files.credentials) {
+            if (activeProject.files.flow.indexOf(projectRoot) === 0) {
+                credFileName = activeProject.files.credentials.substring(projectRoot.length);
+            } else {
+                credFileName = activeProject.files.credentials;
+            }
+        }
+
+        var credFileLabel = $('<div class="uneditable-input" style="padding:0">').appendTo(row);
+        var credFileLabelPrefixText = $('<span style="display:inline-block;padding: 6px 0 6px 6px">').text(projectRoot).appendTo(credFileLabel);
+        var credFileLabelText = $('<span style="display:inline-block; padding: 6px 6px 6px 0">').text(credFileName).appendTo(credFileLabel);
+
+        var credFileInput = $('<input type="hidden">').val(credFileName).insertAfter(credFileLabel);
 
         var checkFiles = function() {
             var saveDisabled;
             var currentFlowValue = flowFileInput.val();
             var m = /^(.+?)(\.[^.]*)?$/.exec(currentFlowValue);
             if (m) {
-                credFileInput.text(m[1]+"_cred"+(m[2]||".json"));
+                credFileLabelText.text(m[1]+"_cred"+(m[2]||".json"));
             } else if (currentFlowValue === "") {
-                credFileInput.text("");
+                credFileLabelText.text("");
             }
+            credFileInput.val(credFileLabelText.text());
             var isFlowInvalid = currentFlowValue==="" ||
                                 /\.\./.test(currentFlowValue) ||
                                 /\/$/.test(currentFlowValue);
 
-            saveDisabled = isFlowInvalid || credFileInput.text()==="";
+            saveDisabled = isFlowInvalid || credFileLabelText.text()==="";
 
             if (credentialSecretExistingInput.is(":visible")) {
                 credentialSecretExistingInput.toggleClass("input-error", credentialSecretExistingInput.val() === "");
@@ -821,22 +923,25 @@ RED.projects.settings = (function() {
 
 
             flowFileInput.toggleClass("input-error", isFlowInvalid);
-            credFileInput.toggleClass("input-error",credFileInput.text()==="");
+            // credFileInput.toggleClass("input-error",credFileInput.text()==="");
             saveButton.toggleClass('disabled',saveDisabled);
             saveButton.prop('disabled',saveDisabled);
         }
         flowFileInput.on("change keyup paste",checkFiles);
 
 
-        if (!activeProject.files.flow) {
-            $('<span class="form-warning"><i class="fa fa-warning"></i> Missing</span>').appendTo(flowFileLabelText);
-        }
-        if (!activeProject.files.credentials) {
-            $('<span class="form-warning"><i class="fa fa-warning"></i> Missing</span>').appendTo(credFileLabel);
-        }
+        // if (!activeProject.files.package) {
+        //     $('<span class="form-warning"><i class="fa fa-warning"></i> Missing</span>').appendTo(packageFileLabelText);
+        // }
+        // if (!activeProject.files.flow) {
+        //     $('<span class="form-warning"><i class="fa fa-warning"></i> Missing</span>').appendTo(flowFileLabelText);
+        // }
+        // if (!activeProject.files.credentials) {
+        //     $('<span class="form-warning"><i class="fa fa-warning"></i> Missing</span>').appendTo(credFileLabel);
+        // }
 
 
-        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);
@@ -844,9 +949,9 @@ RED.projects.settings = (function() {
 
         credentialStateLabel.css('color','#666');
         credentialSecretButtons.css('vertical-align','top');
-        var credentialSecretResetButton = $('<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("");
@@ -866,9 +971,11 @@ RED.projects.settings = (function() {
                 }
                 checkFiles();
             });
-        var credentialSecretEditButton = $('<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>')
+        RED.popover.tooltip(credentialSecretResetButton,RED._("sidebar.project.projectSettings.resetTheEncryptionKey"));
+
+        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("");
@@ -896,8 +1003,9 @@ RED.projects.settings = (function() {
                 checkFiles();
             })
 
+        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);
 
 
 
@@ -907,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() {
@@ -918,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);
@@ -930,21 +1038,23 @@ RED.projects.settings = (function() {
         var hideEditForm = function() {
             editFilesButton.show();
             formButtons.hide();
+            // packageFileLabelText.show();
+            packageFileInputSearch.hide();
+            // packageFileInputCreate.hide();
             flowFileLabelText.show();
             flowFileInput.hide();
             flowFileInputSearch.hide();
-            credFileLabel.show();
-            credFileInput.hide();
+
             // credentialStateLabel.parent().show();
             credentialStateLabel.removeClass("uneditable-input");
             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");
@@ -954,15 +1064,28 @@ RED.projects.settings = (function() {
         }
 
         var formButtons = $('<span class="button-row" style="position: relative; float: right; margin-right:0;"></span>').hide().appendTo(filesContainer);
-        $('<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);
+                flowFileLabelPrefixText.text(projectRoot);
+                credFileLabelPrefixText.text(projectRoot);
+                packageFileLabelText.text(activeProject.files.package||"package.json");
+                if (!activeProject.files.package) {
+                    packageFileSubLabel.find(".red-ui-projects-edit-form-sublabel-text").text(RED._("sidebar.project.projectSettings.fileNotExist"));
+                    packageFileSubLabel.show();
+                } else {
+                    packageFileSubLabel.hide();
+                }
+                flowFileInput.val(flowFileLabelText.text());
+                credFileLabelText.text(credFileName);
                 hideEditForm();
             });
-        var saveButton = $('<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) {
@@ -972,13 +1095,17 @@ RED.projects.settings = (function() {
                         return;
                     }
                     flowFileLabelText.text(flowFileInput.val());
-                    credFileLabel.text(credFileInput.text());
+                    credFileLabelText.text(credFileInput.val());
+                    packageFileSubLabel.hide();
                     hideEditForm();
                 }
+                var rootPath = packageFileInput.val();
+                rootPath = rootPath.substring(0,rootPath.length-12);
                 var payload = {
                     files: {
-                        flow: flowFileInput.val(),
-                        credentials: credFileInput.text()
+                        package: packageFileInput.val(),
+                        flow: rootPath+flowFileInput.val(),
+                        credentials: rootPath+credFileInput.val()
                     }
                 }
 
@@ -991,8 +1118,6 @@ RED.projects.settings = (function() {
                         payload.currentCredentialSecret = credentialSecretExistingInput.val();
                     }
                 }
-
-                // console.log(JSON.stringify(payload,null,4));
                 RED.deploy.setDeployInflight(true);
                 utils.sendRequest({
                     url: "projects/"+activeProject.name,
@@ -1053,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({
@@ -1064,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"));
@@ -1094,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,
@@ -1191,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();
                 });
@@ -1213,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"));
@@ -1239,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,
@@ -1336,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);
@@ -1365,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(),
@@ -1451,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,10 +322,11 @@ 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);
             });
         RED.popover.tooltip(refreshButton,RED._("sidebar.project.versionControl.refreshChanges"));
@@ -333,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) {
@@ -364,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);
@@ -428,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() {
@@ -451,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) {
@@ -487,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","");
@@ -514,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({
@@ -530,7 +531,7 @@ RED.sidebar.versionControl = (function() {
                         },
                         200: function(data) {
                             spinner.remove();
-                            cancelCommitButton.click();
+                            cancelCommitButton.trigger("click");
                             refresh(true);
                         },
                         400: {
@@ -555,19 +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();
@@ -585,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();
@@ -604,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() {
@@ -616,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) {
@@ -646,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);
                 }
             }
         });
@@ -676,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"),
@@ -733,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();
@@ -756,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();
@@ -778,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",
@@ -822,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({
@@ -835,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);
@@ -857,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);
                     }
                 });
             }
@@ -873,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");
                 });
@@ -889,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"
                 }
@@ -927,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");
             });
@@ -1010,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",
@@ -1066,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",
@@ -1161,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);
@@ -1297,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');
@@ -1351,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

@@ -82,9 +82,18 @@ RED.search = (function() {
 
     function search(val) {
         searchResults.editableList('empty');
+        var typeFilter;
+        var m = /(?:^| )type:([^ ]+)/.exec(val);
+        if (m) {
+            val = val.replace(/(?:^| )type:[^ ]+/,"");
+            typeFilter = m[1];
+        }
+
+        val = val.trim();
+
         selected = -1;
         results = [];
-        if (val.length > 0) {
+        if (val.length > 0 || typeFilter) {
             val = val.toLowerCase();
             var i;
             var j;
@@ -96,8 +105,10 @@ RED.search = (function() {
                 if (kpos > -1) {
                     for (j=0;j<index[key].length;j++) {
                         var node = index[key][j];
-                        nodes[node.node.id] = nodes[node.node.id] = node;
-                        nodes[node.node.id].index = Math.min(nodes[node.node.id].index||Infinity,kpos);
+                        if (!typeFilter || node.node.type === typeFilter) {
+                            nodes[node.node.id] = nodes[node.node.id] = node;
+                            nodes[node.node.id].index = Math.min(nodes[node.node.id].index||Infinity,kpos);
+                        }
                     }
                 }
             }
@@ -136,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,
@@ -183,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;
@@ -202,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);
@@ -221,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);
                     });
@@ -243,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();
@@ -257,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','');
@@ -288,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

@@ -16,34 +16,36 @@
 
 RED.subflow = (function() {
 
+    var _subflowEditTemplate = '<script type="text/x-red" data-template-name="subflow">'+
+        '<div class="form-row"><label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label><input type="text" id="node-input-name"></div>'+
+        '<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+
+        '<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+
+        '</script>';
 
-    var _subflowEditTemplate = '<script type="text/x-red" data-template-name="subflow"><div class="form-row"><label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label><input type="text" id="node-input-name"></div></script>';
     var _subflowTemplateEditTemplate = '<script type="text/x-red" data-template-name="subflow-template">'+
         '<div class="form-row"><i class="fa fa-tag"></i> <label for="subflow-input-name" data-i18n="common.label.name"></label><input type="text" id="subflow-input-name"></div>'+
         '<div class="form-row"><i class="fa fa-folder-o"></i> <label for="subflow-input-category" data-i18n="editor:subflow.category"></label><select style="width: 250px;" id="subflow-input-category"></select><input style="display:none; margin-left: 10px; width:calc(100% - 250px)" type="text" id="subflow-input-custom-category"></div>'+
+        '<div class="form-row" style="margin-bottom: 0px;"><label style="width: auto;" data-i18n="[append]editor:editor-tab.env"><i class="fa fa-th-list"></i> </label></div>'+
+        '<div class="form-row node-input-env-container-row"><ol id="node-input-env-container"></ol></div>'+
         '<div class="form-row form-tips" id="subflow-dialog-user-count"></div>'+
         '</script>';
 
-
-    function getSubflow() {
-        return RED.nodes.subflow(RED.workspaces.active());
-    }
-
     function findAvailableSubflowIOPosition(subflow,isInput) {
         var pos = {x:50,y:30};
         if (!isInput) {
             pos.x += 110;
         }
-        for (var i=0;i<subflow.out.length+subflow.in.length;i++) {
-            var port;
-            if (i < subflow.out.length) {
-                port = subflow.out[i];
-            } else {
-                port = subflow.in[i-subflow.out.length];
-            }
+        var ports = [].concat(subflow.out).concat(subflow.in);
+        if (subflow.status) {
+            ports.push(subflow.status);
+        }
+        ports.sort(function(A,B) {
+            return A.x-B.x;
+        });
+        for (var i=0; i<ports.length; i++) {
+            var port = ports[i];
             if (port.x == pos.x && port.y == pos.y) {
                 pos.x += 55;
-                i=0;
             }
         }
         return pos;
@@ -85,8 +87,9 @@ 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();
     }
 
     function removeSubflowInput() {
@@ -105,9 +108,10 @@ 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};
     }
 
@@ -147,7 +151,8 @@ 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();
     }
 
     function removeSubflowOutput(removedSubflowOutputs) {
@@ -187,10 +192,65 @@ RED.subflow = (function() {
             }
         }
         activeSubflow.changed = true;
-
+        RED.palette.refresh();
         return {subflowOutputs: removedSubflowOutputs, links: removedLinks}
     }
 
+    function addSubflowStatus() {
+        var subflow = RED.nodes.subflow(RED.workspaces.active());
+        if (subflow.status) {
+            return;
+        }
+        var position = findAvailableSubflowIOPosition(subflow,false);
+        var statusNode = {
+            type:"subflow",
+            direction:"status",
+            z:subflow.id,
+            x:position.x,
+            y:position.y,
+            id:RED.nodes.id()
+        };
+        subflow.status = statusNode;
+        subflow.dirty = true;
+        var wasDirty = RED.nodes.dirty();
+        var wasChanged = subflow.changed;
+        subflow.changed = true;
+        var result = refresh(true);
+        var historyEvent = {
+            t:'edit',
+            node:subflow,
+            dirty:wasDirty,
+            changed:wasChanged,
+            subflow: { status: true }
+        };
+        RED.history.push(historyEvent);
+        RED.view.select();
+        RED.nodes.dirty(true);
+        RED.view.redraw();
+        $("#red-ui-subflow-status").prop("checked",!!subflow.status);
+        $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
+    }
+
+    function removeSubflowStatus() {
+        var subflow = RED.nodes.subflow(RED.workspaces.active());
+        if (!subflow.status) {
+            return;
+        }
+        var subflowRemovedLinks = [];
+        RED.nodes.eachLink(function(l) {
+            if (l.target.type == "subflow" && l.target.z == subflow.id && l.target.direction == "status") {
+                subflowRemovedLinks.push(l);
+            }
+        });
+        subflowRemovedLinks.forEach(function(l) { RED.nodes.removeLink(l)});
+        delete subflow.status;
+
+        $("#red-ui-subflow-status").prop("checked",!!subflow.status);
+        $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!subflow.status);
+
+        return { links: subflowRemovedLinks }
+    }
+
     function refresh(markChange) {
         var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
         refreshToolbar(activeSubflow);
@@ -219,39 +279,54 @@ 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);
+
+            $("#red-ui-subflow-output .spinner-value").text(activeSubflow.out.length);
+
+            $("#red-ui-subflow-status").prop("checked",!!activeSubflow.status);
+            $("#red-ui-subflow-status").parent().parent().toggleClass("active",!!activeSubflow.status);
 
-            $("#workspace-subflow-output .spinner-value").text(activeSubflow.out.length);
         }
     }
 
     function showWorkspaceToolbar(activeSubflow) {
-        var toolbar = $("#workspace-toolbar");
+        var toolbar = $("#red-ui-workspace-toolbar");
         toolbar.empty();
 
-        $('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
+        // Edit properties
+        $('<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);
 
-        $('<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>'+
+        // Outputs
+        $('<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);
 
-        // $('<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" id="workspace-subflow-delete" href="#" data-i18n="[append]subflow.deleteSubflow"><i class="fa fa-trash"></i> </a>').appendTo(toolbar);
+        // Status
+        $('<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="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="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;
@@ -274,16 +349,18 @@ RED.subflow = (function() {
                 RED.view.redraw(true);
             }
         });
-        $("#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;
@@ -307,12 +384,39 @@ RED.subflow = (function() {
             }
         });
 
-        $("#workspace-subflow-edit").click(function(event) {
+        $("#red-ui-subflow-status").on("change", function(evt) {
+            if (this.checked) {
+                addSubflowStatus();
+            } else {
+                var currentStatus = activeSubflow.status;
+                var wasChanged = activeSubflow.changed;
+                var result = removeSubflowStatus();
+                if (result) {
+                    activeSubflow.changed = true;
+                    var wasDirty = RED.nodes.dirty();
+                    RED.history.push({
+                        t:'delete',
+                        links:result.links,
+                        changed: wasChanged,
+                        dirty:wasDirty,
+                        subflow: {
+                            id: activeSubflow.id,
+                            status: currentStatus
+                        }
+                    });
+                    RED.view.select();
+                    RED.nodes.dirty(true);
+                    RED.view.redraw();
+                }
+            }
+        })
+
+        $("#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());
@@ -325,12 +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) {
@@ -373,6 +478,7 @@ RED.subflow = (function() {
             subflows: [activeSubflow]
         }
     }
+
     function init() {
         RED.events.on("workspace:change",function(event) {
             var activeSubflow = RED.nodes.subflow(event.workspace);
@@ -393,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");
 
     }
 
@@ -430,6 +536,13 @@ RED.subflow = (function() {
         RED.nodes.dirty(true);
     }
 
+    function snapToGrid(x) {
+        if (RED.settings.get("editor").view['view-snap-grid']) {
+            x = Math.round(x / RED.view.gridSize()) * RED.view.gridSize();
+        }
+        return x;
+    }
+
     function convertToSubflow() {
         var selection = RED.view.selection();
         if (!selection.nodes) {
@@ -445,7 +558,6 @@ RED.subflow = (function() {
         var candidateOutputs = [];
         var candidateInputNodes = {};
 
-
         var boundingBox = [selection.nodes[0].x,
             selection.nodes[0].y,
             selection.nodes[0].x,
@@ -461,8 +573,14 @@ RED.subflow = (function() {
                 Math.max(boundingBox[3],n.y)
             ]
         }
+        var offsetX = snapToGrid(boundingBox[0] - 200);
+        var offsetY = snapToGrid(boundingBox[1] - 80);
 
-        var center = [(boundingBox[2]+boundingBox[0]) / 2,(boundingBox[3]+boundingBox[1]) / 2];
+
+        var center = [
+            snapToGrid((boundingBox[2]+boundingBox[0]) / 2),
+            snapToGrid((boundingBox[3]+boundingBox[1]) / 2)
+        ];
 
         RED.nodes.eachLink(function(link) {
             if (nodes[link.source.id] && nodes[link.target.id]) {
@@ -519,8 +637,8 @@ RED.subflow = (function() {
             in: Object.keys(candidateInputNodes).map(function(v,i) { var index = i; return {
                 type:"subflow",
                 direction:"in",
-                x:candidateInputNodes[v].x-(candidateInputNodes[v].w/2)-80,
-                y:candidateInputNodes[v].y,
+                x:snapToGrid(candidateInputNodes[v].x-(candidateInputNodes[v].w/2)-80 - offsetX),
+                y:snapToGrid(candidateInputNodes[v].y - offsetY),
                 z:subflowId,
                 i:index,
                 id:RED.nodes.id(),
@@ -528,9 +646,9 @@ RED.subflow = (function() {
             }}),
             out: candidateOutputs.map(function(v,i) { var index = i; return {
                 type:"subflow",
-                direction:"in",
-                x:v.source.x+(v.source.w/2)+80,
-                y:v.source.y,
+                direction:"out",
+                x:snapToGrid(v.source.x+(v.source.w/2)+80 - offsetX),
+                y:snapToGrid(v.source.y - offsetY),
                 z:subflowId,
                 i:index,
                 id:RED.nodes.id(),
@@ -605,6 +723,8 @@ RED.subflow = (function() {
                     return isLocalLink;
                 });
             }
+            n.x -= offsetX;
+            n.y -= offsetY;
             n.z = subflow.id;
         }
 
@@ -613,7 +733,9 @@ RED.subflow = (function() {
             nodes:[subflowInstance.id],
             links:new_links,
             subflow: {
-                subflow: subflow
+                subflow: subflow,
+                offsetX: offsetX,
+                offsetY: offsetY
             },
 
             activeWorkspace: RED.workspaces.active(),
@@ -627,8 +749,6 @@ RED.subflow = (function() {
         RED.view.redraw(true);
     }
 
-
-
     return {
         init: init,
         createSubflow: createSubflow,
@@ -636,6 +756,7 @@ RED.subflow = (function() {
         removeSubflow: removeSubflow,
         refresh: refresh,
         removeInput: removeSubflowInput,
-        removeOutput: removeSubflowOutput
+        removeOutput: removeSubflowOutput,
+        removeStatus: removeSubflowStatus
     }
 })();

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)+'">'+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,10 +45,9 @@ 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">').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({
+        searchInput = $('<input type="text" id="red-ui-type-search-input">').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({
             delay: 50,
             change: function() {
                 search($(this).val());
@@ -79,6 +78,19 @@ RED.typeSearch = (function() {
                     $(children[selected]).addClass('selected');
                     ensureSelectedIsVisible();
                     evt.preventDefault();
+                } else if ((evt.metaKey || evt.ctrlKey) && evt.keyCode === 13 ) {
+                    // (ctrl or cmd) and enter
+                    var index = Math.max(0,selected);
+                    if (index < children.length) {
+                        var n = $(children[index]).find(".red-ui-editableList-item-content").data('data');
+                        typesUsed[n.type] = Date.now();
+                        if (n.def.outputs === 0) {
+                            confirm(n);
+                        } else {
+                            addCallback(n.type,true);
+                        }
+                        $("#red-ui-type-search-input").val("").trigger("keyup");
+                    }
                 } else if (evt.keyCode === 13) {
                     // Enter
                     var index = Math.max(0,selected);
@@ -91,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 === "" ) {
@@ -132,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) {
@@ -149,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);
                 });
@@ -191,25 +203,32 @@ RED.typeSearch = (function() {
                 createDialog();
             }
             visible = true;
-            setTimeout(function() {
-                $(document).on('mousedown.type-search',handleMouseActivity);
-                $(document).on('mouseup.type-search',handleMouseActivity);
-                $(document).on('click.type-search',handleMouseActivity);
-            },200);
         } else {
             dialog.hide();
             searchResultsDiv.hide();
         }
+        $(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.red-ui-type-search',handleMouseActivity);
+            $(document).on('mouseup.red-ui-type-search',handleMouseActivity);
+            $(document).on('click.red-ui-type-search',handleMouseActivity);
+        },200);
+
         refreshTypeList(opts);
         addCallback = opts.add;
-        closeCallback = opts.close;
+        cancelCallback = opts.cancel;
         RED.events.emit("type-search:open");
         //shade.show();
+        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) {
@@ -225,12 +244,11 @@ 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) {
         var label = type;
         if (typeof def.paletteLabel !== "undefined") {
@@ -334,6 +352,7 @@ RED.typeSearch = (function() {
 
     return {
         show: show,
+        refresh: refreshTypeList,
         hide: hide
     };
 

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);
         }
     }
@@ -192,6 +192,14 @@ RED.utils = (function() {
                     format = 'hex'
                 }
             } else if (format === 'dateMS' || format == 'dateS') {
+                if ((obj.toString().length===13) && (obj<=2147483647000)) {
+                    format = 'dateML';
+                } else if ((obj.toString().length===10) && (obj<=2147483647)) {
+                    format = 'dateL';
+                } else {
+                    format = 'hex'
+                }
+            } else if (format === 'dateML' || format == 'dateL') {
                 format = 'hex';
             } else {
                 format = 'dec';
@@ -210,6 +218,12 @@ RED.utils = (function() {
             element.text((new Date(obj)).toISOString());
         } else if (format === 'dateS') {
             element.text((new Date(obj*1000)).toISOString());
+        } else if (format === 'dateML') {
+            var dd = new Date(obj);
+            element.text(dd.toLocaleString() + "  [UTC" + ( dd.getTimezoneOffset()/-60 <=0?"":"+" ) + dd.getTimezoneOffset()/-60 +"]");
+        } else if (format === 'dateL') {
+            var ddl = new Date(obj*1000);
+            element.text(ddl.toLocaleString() + "  [UTC" + ( ddl.getTimezoneOffset()/-60 <=0?"":"+" ) + ddl.getTimezoneOffset()/-60 +"]");
         } else if (format === 'hex') {
             element.text("0x"+(obj).toString(16));
         }
@@ -229,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');
         }
     }
 
@@ -261,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 = [];
@@ -289,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;
@@ -308,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);
                 });
@@ -369,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++) {
@@ -389,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);
             }
@@ -397,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);
@@ -421,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],
                                 {
@@ -440,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],
                                             {
@@ -470,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);
                         }
                     }
                 },
@@ -484,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])) {
@@ -516,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) {
@@ -540,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) {
@@ -708,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) {
@@ -858,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;
     }
@@ -909,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();
         }
@@ -930,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,
@@ -953,6 +1024,7 @@ RED.utils = (function() {
         addSpinnerOverlay: addSpinnerOverlay,
         decodeObject: decodeObject,
         parseContextKey: parseContextKey,
-        createIconElement: createIconElement
+        createIconElement: createIconElement,
+        sanitize: sanitize
     }
 })();

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/view-tools.js

@@ -0,0 +1,137 @@
+/**
+ * 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.view.tools = (function() {
+
+
+    function alignToGrid() {
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            var changedNodes = [];
+            selection.nodes.forEach(function(n) {
+                var x = n.w/2 + Math.round((n.x-n.w/2)/RED.view.gridSize())*RED.view.gridSize();
+                var y = Math.round(n.y/RED.view.gridSize())*RED.view.gridSize();
+                if (n.x !== x || n.y !== y) {
+                    changedNodes.push({
+                        n:n,
+                        ox: n.x,
+                        oy: n.y,
+                        moved: n.moved
+                    });
+                    n.x = x;
+                    n.y = y;
+                    n.dirty = true;
+                    n.moved = true;
+                }
+            });
+            if (changedNodes.length > 0) {
+                RED.history.push({t:"move",nodes:changedNodes,dirty:RED.nodes.dirty()});
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+            }
+        }
+    }
+
+    var moving_set = null;
+    var endMoveSet = false;
+    function endKeyboardMove() {
+        endMoveSet = false;
+        if (moving_set.length > 0) {
+            var ns = [];
+            for (var i=0;i<moving_set.length;i++) {
+                ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy,moved:moving_set[i].moved});
+                moving_set[i].n.moved = true;
+                moving_set[i].n.dirty = true;
+                delete moving_set[i].ox;
+                delete moving_set[i].oy;
+            }
+            RED.view.redraw();
+            RED.history.push({t:"move",nodes:ns,dirty:RED.nodes.dirty()});
+            RED.nodes.dirty(true);
+            moving_set = null;
+        }
+    }
+
+    function moveSelection(dx,dy) {
+        if (moving_set === null) {
+            var selection = RED.view.selection();
+            if (selection.nodes) {
+                moving_set = selection.nodes.map(function(n) { return {n:n}});
+            }
+        }
+        if (moving_set && moving_set.length > 0) {
+            if (!endMoveSet) {
+                $(document).one('keyup',endKeyboardMove);
+                endMoveSet = true;
+            }
+            var minX = 0;
+            var minY = 0;
+            var node;
+
+            for (var i=0;i<moving_set.length;i++) {
+                node = moving_set[i];
+                if (node.ox == null && node.oy == null) {
+                    node.ox = node.n.x;
+                    node.oy = node.n.y;
+                    node.moved = node.n.moved;
+                }
+                node.n.moved = true;
+                node.n.dirty = true;
+                node.n.x += dx;
+                node.n.y += dy;
+                node.n.dirty = true;
+                minX = Math.min(node.n.x-node.n.w/2-5,minX);
+                minY = Math.min(node.n.y-node.n.h/2-5,minY);
+            }
+
+            if (minX !== 0 || minY !== 0) {
+                for (var n = 0; n<moving_set.length; n++) {
+                    node = moving_set[n];
+                    node.n.x -= minX;
+                    node.n.y -= minY;
+                }
+            }
+            RED.view.redraw();
+        }
+    }
+
+    return {
+        init: function() {
+            RED.actions.add("core:align-selection-to-grid", alignToGrid);
+
+            RED.actions.add("core:move-selection-up", function() { moveSelection(0,-1);});
+            RED.actions.add("core:move-selection-right", function() { moveSelection(1,0);});
+            RED.actions.add("core:move-selection-down", function() { moveSelection(0,1);});
+            RED.actions.add("core:move-selection-left", function() { moveSelection(-1,0);});
+
+            RED.actions.add("core:step-selection-up", function() { moveSelection(0,-RED.view.gridSize());});
+            RED.actions.add("core:step-selection-right", function() { moveSelection(RED.view.gridSize(),0);});
+            RED.actions.add("core:step-selection-down", function() { moveSelection(0,RED.view.gridSize());});
+            RED.actions.add("core:step-selection-left", function() { moveSelection(-RED.view.gridSize(),0);});
+        },
+        /**
+         * Aligns all selected nodes to the current grid
+         */
+        alignSelectionToGrid: alignToGrid,
+        /**
+         * Moves all of the selected nodes by the specified amount
+         * @param  {Number} dx
+         * @param  {Number} dy
+         */
+        moveSelection: moveSelection
+    }
+
+})();

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,37 +273,47 @@ 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,
             scrollable: true,
             addButton: "core:add-flow",
-            addButtonCaption: RED._("workspace.addFlow")
+            addButtonCaption: RED._("workspace.addFlow"),
+            searchButton: "core:list-flows",
+            searchButtonCaption: RED._("workspace.listFlows")
         });
         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);
 
@@ -335,7 +324,7 @@ RED.workspaces = (function() {
             deleteWorkspace(RED.nodes.workspace(activeWorkspace));
         });
 
-        $(window).resize(function() {
+        $(window).on("resize", function() {
             workspace_tabs.resize();
         });
 
@@ -343,6 +332,10 @@ RED.workspaces = (function() {
         RED.actions.add("core:edit-flow",editWorkspace);
         RED.actions.add("core:remove-flow",removeWorkspace);
 
+        RED.actions.add("core:list-flows",function() {
+            RED.actions.invoke("core:search","type:tab ");
+        })
+
         hideWorkspace();
     }
 

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,71 +14,161 @@
  * limitations under the License.
  **/
 
-
-.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
-    background: #999;
-}
-
-.dropdown-menu * .fa-check-square {
+.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;
-    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 {
-    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;
+    float: left;
+    margin: 2px 0 0;
     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;
+    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-submenu>a:after {
+.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;
+        }
+    }
+}
+
+.red-ui-menu-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,157 +49,164 @@
 }
 
 
-.function_label {
-    font-size: 12px;
-}
-.node {
-    stroke: #999;
+.red-ui-flow-node {
+    stroke: $node-border;
     cursor: move;
     stroke-width: 1;
 }
-.node_unknown {
+.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;
+        }
+    }
+}
+
+.red-ui-flow-node-unknown {
     stroke-dasharray:10,4;
-    stroke: #f33;
+    stroke: $node-border-unknown;
 }
-.tool_arrow {
+.red-ui-flow-node-placeholder {
+    stroke-dasharray:10,4;
+    stroke: $node-border-placeholder;
+    fill: $node-background-placeholder;
+    opacity: 0.5;
+    stroke-width: 2;
+}
+.red-ui-flow-node-icon-group {
+    .fa-lg {
+        stroke: none;
+        fill: $node-icon-color;
+        text-anchor: middle;
+        font-family: FontAwesome;
+    }
+}
+.red-ui-flow-node-icon-shade {
+    stroke: none;
+    fill: $node-icon-background-color-fill;
+    fill-opacity: $node-icon-background-color-opacity;
+}
+.red-ui-flow-node-icon-shade-border {
+    stroke-opacity: $node-icon-border-color-opacity;
+    stroke: $node-icon-border-color;
     stroke-width: 1;
-    stroke: #999;
-    fill: #999;
-    cursor: pointer;
-}
-.node_tools {
-    fill: #ddd;
-    stroke: #999;
-    cursor: move;
-    stroke-width: 1;
-    cursor: pointer;
-}
-.node_tools_hovered {
-    stroke: #ff7f0e;
-    fill: #eee;
 }
 
-.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;
@@ -238,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,278 +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;
-    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);
+}