Adding bidi preferences (#1375)

* Fix for function node invalid spinner values

to close #1370

* better validation of spinners for inject and delay

(don’t allow negative numbers)

* remove need for declaring local min variable

.jshintrc

@@ -2,6 +2,9 @@
     "asi": true,        // allow missing semicolons
     "curly": true,      // require braces
     "eqnull": true,     // ignore ==null
+    //"eqeqeq": true,   // enforce ===
+    "freeze": true,     // don't allow override
+    "indent": 4,        // default indent of 4
     "forin": true,      // require property filtering in "for in" loops
     "immed": true,      // require immediate functions to be wrapped in ( )
     "nonbsp": true,     // warn on unexpected whitespace breaking chars
@@ -9,6 +12,8 @@
     //"unused": true,   // Check for unused functions and variables
     "loopfunc": true,   // allow functions to be defined in loops
     //"expr": true,     // allow ternery operator syntax...
+    "shadow": true,     // allow variable shadowing (re-use of names...)
     "sub": true,        // don't warn that foo['bar'] should be written as foo.bar
-    "proto": true       // allow setting of __proto__ in node < v0.12
+    "proto": true,      // allow setting of __proto__ in node < v0.12,
+    "esversion": 6      // allow es6
 }

.travis.yml

@@ -9,10 +9,8 @@ addons:
     packages:
     - g++-4.8
     - gcc-4.8
-matrix:
-  allow_failures:
-  - node_js: "7"
 node_js:
+  - "8"
   - "7"
   - "6"
   - "4"

CHANGELOG.md

@@ -1,5 +1,350 @@
+#### 0.17.5: Maintenance Release
+
+ - Add express-session missing dependency for oauth
+ - Fix improper type tests is core test cases
+ - File node: recreate write stream when file deleted Fixes #1351
+ - Add flow stopping trace messages
+ - Fix userDir test case when .config.json exists (#1350)
+ - Do not try to send msg after http request error handled Fixes #1344
+ - Fix boundary problem in range node (#1338)
+ - Modify messages in node properties to refer messages.json (#1339)
+ - Fix settings.js replacing webSocketVerifyClient by webSocketNodeVerifyClient (#1343)
+
+
+#### 0.17.4: Maintenance Release
+
+ - Add request node test case for POSTing 0
+ - Allow false and 0 in payload for httprequest (#1334)
+ - Add file extension into flow name of library automatically (#1331)
+ - Fix accessing global context from jsonata expressions Fixes #1335
+ - Disable editor whilst a deploy is inflight Fixes #1332
+ - Replace Unknown nodes with their real versions when node loaded
+ - Retry auto-install of modules that fail
+ - Fix column name in link nodes to refer language file (#1330)
+ - Use namespaces with link node title attributes i18n name Fixes #1329
+ - Tidy up GPIO pin table presentation Fixes #1328
+ - Join: count of 0 should not send on every msg
+ - Handle importing only one end of a link node pair
+ - Make sending to Debug synchronous again Fixes #1323
+ - Make send-error behaviour optional in file node
+ - Restore File In node behaviour of sending msg on error
+ - Expose context.keys within Function node
+ - JSON parser default should be not formatting output
+
+
+#### 0.17.3: Maintenance Release
+
+ - Fix flow library in menu to support period characters as flow name (#1320)
+ - editorTheme not setting custom css/scripts properly
+ - Fix missing icons for some nodes (#1321)
+ - Add reformat button to JSONata test data editor
+ - Update delay node status without spawning unnecessary intervals
+ - Avoid stringify ServerResponse and Socket in Debug node Fixes #1311
+ - Fix creating userDir other than system drive on Windows (#1317)
+ - Trigger node not handling a duration of 0 as block mode Fixes #1316
+ - Unable to config GPIO Pin 13 Fixes #1314
+
+#### 0.17.2: Maintenance Release
+
+ - Fix GPIO node labels
+
+#### 0.17.1: Maintenance Release
+
+ - Fix PI gpio to use BCM
+ - Prevent event thread contention when sending to Debug node Closes #1311
+ - Fix Bug: Can not display node icon when npm package has scope (#1305) (#1309)
+ - Clear moved flag when nodes are deployed
+
+#### 0.17: Milestone Release
+
+Runtime
+
+ - Return flow rev on reload api when api v2 enabled Closes #1273
+ - Provide single endpoint to load all node message catalogs
+ - Add .trace and .debug to Node prototype
+ - Rename oauth auth scheme to strategy as it works for openid
+ - Allow oauth schemes provide a custom verify function
+ - Add support for oauth adminAuth configs
+ - Cache auth details to save needlessly recalculating hashes
+ - Add context.keys function to list top-level keys
+ - Strip BOM character from JSON files if present Fixes #1239
+ - Version check no meta (#1243)
+ - Ensure all nodes have access to global context Fixes #1230
+ - Don't process subscription for unauthenticated comms link Fixes #851
+ - Clone credentials when passing to node Fixes #1198
+ - Resolve dir argument of getLocalNodeFiles function (#1216)
+ - Add wait for writing a library entry into a file. (#1186)
+ - Use correct Buffer.from method rather than constructor
+ - update core nodes to use newer Buffer syntax
+ - Treat missing msg properties as undefined rather than throw error Fixes #1167
+ - Allows flows to be enabled/disabled in the runtime
+ - add off option to logging settings comment
+ - Log error stack traces if verbose flag is set
+ - Extract line number if available from node load errors
+ - Add node 8 to travis (with allow failure)
+ - Shuffle promises for creating default package.json
+ - Create a package.json file in userDir if one doesn't exist
+ - autoInstallModules option must honour version/pending_version
+ - Refuse to update a non-local node module
+ - Finalise nodeSettings and update tlsConfigDisableLocalFiles
+ - Allow a node to declare what settings should be made available to the editor. (#1185)
+ - Add node whitelist function (#1184)
+ - Allow a node to declare settings that should be exported
+ - Add test coverage for deleting a flow
+ - Update tests for oauth -> strategy rename
+ - Fix the test cases which sometimes fails due to timing. (#1228)
+ - Extend timeout for the test case of installing non-existant path. (#1191)
+ - Fix loader test to expect line numbers in load errors
+ - Update ui_spec for icon module path
+ - let node installer try to save with ~ version prefix to allow minor updates
+ - Log error when non-msg-object is returned from a Function
+ - Timeout a node that fails to close - default 15s timeout
+ - Pass a 'removed' parameter to node close handler
+ - Remove event passing for icons/examples from the api layer
+ - Update general dependencies
+
+Nodes
+
+ - Do not log node errors if handled by a Catch node
+ - Fix wrong number of double quotes in CSV parsing
+ - let csv node handle ip addresses without trying to parse
+ - Update debug node to register the settings it uses
+ - Handle IncomingMessage/ServerResponse object types in debug Fixes #1202
+ - Toggling debug node enabled/disabled state should set state dirty Fixes #1203
+ - redo delay node status messages to be interval based
+ - Update delay node ui
+ - Add new msg.delay option to delay node
+ - stop delay node spamming web socket (when in fast rate limit mode)
+ - Delay/Range node help tidy up
+ - Bug fix in exec node. White spaces in arguments now works (#1285)
+ - Make exec node explicitly call SIGTERM for default
+ - Fix exec node error tests on Windows (#1234)
+ - update messages for updated exec node
+ - Make exec node spawn and exec outputs more consistent
+ - Exec node for windows environment (#1200)
+ - remove requirement for cmd in exec node config + new style info
+ - retry exec node tests
+ - let exec node take msg.kill SIG... param and pid param
+ - Third output from Exec node must be consistent for success/failure conditions
+ - exec node returns 0 on the third output if command ended without error. (#1160)
+ - exec node can be killed on demand
+ - add "split/stream" ability to file in node
+ - add port label to file node and update info
+ - Allow nodes to have translations not in core (#1183)
+ - fix tcp node new Buffer alloc size 0
+ - change pin selection table for pi gpis nodes
+ - stop using sudo for Pi gpio access
+ - adding frequency configuration to pwm output (#1206)
+ - Fix Pi GPIO debounce
+ - let Hypriot on Pi detect gpio correctly
+ - More core node info help tidy up
+ - Tidy up more core node help text
+ - Tidy up parser node edit dialogs and help text
+ - yet more core node info updates
+ - more core node info updates to newer style
+ - Update some core nodes info
+ - First pass of new node-info style
+ - MQTT new style info
+ - Fix empty extra node help content issue
+ - Handle HTTP In url that is missing its leading / Fixes #1218
+ - Add file upload support to HTTP In node
+ - HTTP Request node: add info on how to do form encoding
+ - Prevent unmodified msg.headers from breaking HTTP Request flows Closed #1015
+ - Add cookie handling to HTTP Request node
+ - Add guard against the http-request buffer fix being reverted
+ - Multipart streaming
+ - Add http-request node unit tests
+ - http request node add transport validity check and warn.
+ - Update follow_redirects to fix http_proxy handling Fixes #1172
+ - Allow statusCode/headers to be set directly within HTTP Response node
+ - let inject "between time" also fire at start - Plus new info
+ - remove repeat symbol from inject if repeat is 0
+ - Add port labels to inject node (to show types)
+ - Add buffer joiner mode to Join node
+ - Let join node auto re-assemble buffers
+ - let join also accumulate strings (and not fail)
+ - Add Pretty print option to JSON node and
+ - Fix selection of link nodes
+ - Add link label value as portLabels
+ - Add sentence about clearing retained topic on mqtt
+ - make sure MQTT client closes if redeploy during reconnect
+ - make sure MQTT client closes if redeploy during reconnect
+ - slight filed size adjust for mqtt broker port field - allow 5 digits
+ - Add help info for split node
+ - split node - in object mode allow msg.complete on its own
+ - let split of objects use key to set another property (e.g. topic)
+ - adding streaming modes into split node
+ - let split node reassemble based on a final packet. (as well as the first)
+ - Add buffer support to split node
+ - updated split/join node (split still needs work before release)
+ - Added a name icon and a description label on edit subflow window.
+ - Don't display port labels for subflow pseudo-port nodes
+ - Added a name icon and a description label on edit subflow window.
+ - tcp request - remove confusing timeout wording from info
+ - Final TCP node nits - let 0 do it's thing as per every other timeout
+ - fix tcp port not waiting as per info/previous behaviour
+ - TCP In: Fix error in timout callback (#1249)
+ - Make tcp send msg more consistent
+ - Update 31-tcpin.js (#1235)
+ - really close tcp node connection right away (if told to)
+ - clone message before send in stay connected mode
+ - Better template node help example
+ - Add option to parse Template result as JSON before sending
+ - nail trigger test for windows AND linux
+ - give up on SIGQUIT for widows test
+ - better tests for windows nodes
+ - comment out 2nd exec node kill tests
+ - fixes for grunt files tests on Windows
+ - Add events to test helper
+ - Change default value of tlsConfigDisableLocalFiles to false
+ - Add the node setting tlsConfigDisableLocalFiles for tls node. (#1190)
+ - UI to upload certificates and keys for TLS node
+ - Update trigger help
+ - let trigger node set repeated outputs
+ - Move udp sock error listener to only be instantiated once.
+ - Let watch node recurse into subdirectories
+ - Misconfigured WebSocket nodes should not register msg handlers
+ - Add websocketVerifyClient option to enable custom websocket auth Fixes #1127
+
+Editor
+
+ - Bump ACE editor to v1.2.7
+ - Add RED.utils.getNodeLabel utility function
+ - Include module name in requests for node icons
+ - Change debug message menu icon
+ - Handle empty array/objects in debug view
+ - Add per-node filter option to Debug pane
+ - Ensure debug node marked changed when button pressed
+ - Fix pop-out debug window for all the recent updates
+ - Add debug message menu
+ - Don't include msg. in debug message copied paths
+ - Format Buffer numbers as hex by default
+ - Remember formatting choices for dbg msg elements
+ - Allow debug msg elements to be pinned
+ - Only show debug tools under the debug tab
+ - Fix test for valid js identifiers in debug path construction
+ - Remove unused modified flag on debug messages
+ - Add copy path/value buttons to debug messages
+ - dont match only part of the node type (#1242)
+ - Add editorTheme.logout.redirect to allow redirect on logout Closes #1213
+ - Handle logging out and already logged-out editor Fixes #1288
+ - Fix bug: Export Subflows (#1282)
+ - destroy editor to ensure fully removed on close (function, template, comment)
+ - Don't try to nls status text starting with '.' Fixes #1258
+ - Add note of removed flows in diffConfig (#1253)
+ - Add description to flow same as subflow
+ - Allow tabs to be enabled/disabled in the editor
+ - Make H3 sections in node help collapsible
+ - Add JSON Expression editor
+ - Expression editor - clear legacy flag for blank expressions
+ - Ensure node labels are reordered properly to match outputs
+ - Add 'none' placeholder for empty port label form
+ - Don't mark a node changed when going from none to blank labels
+ - Leave a node to nls its own port labels
+ - Allow a node to override default labels
+ - Add placeholder text on label inputs and clear buttons
+ - Add port labels to Subflow nodes
+ - Keep port label form in sync with output reordering
+ - Basic node label editor
+ - Port label editor starting point
+ - Allow port labels be i18n identifiers
+ - Add inputLabels and outputLabels to node defn + Update Change node
+ - Resize port labels based on content
+ - Initial port label behaviour
+ - Allow a node to decide for itself if its button should be enabled or not
+ - Provide feedback when enable/disable node fails
+ - Add node module update api and expose in palette editor
+ - Reset palette-manager tabs when settings dialog reopened
+ - Move palette editor to settings panel
+ - Move palette editor to userSettings dialog
+ - Move view and keyboard into user settings dialog
+ - Add basic user settings panel
+ - Node status should be on by default
+ - Make theme able to load custom javascript (#1211)
+ - Allow tips to be hidden and cycled through
+ - Add info tips back to the sidebar
+ - Add buffer mode to typedInput
+ - Add typedInput binary mode icon
+ - Ensure all ace editors are destroyed in the expression editors
+ - Refresh sidebar info when tab is changed
+ - better spacing for library widget
+ - Fix gridSize for node width calculation to avoid odd resizing
+ - Redraw grid properly if gridSize changes
+ - Scroll sidebar info tab to top when changing content
+ - Ensure info tab sections are collapsible when set from palette
+ - Only show tab info if there is an active tab
+ - Only check for reordered outputs if outputMap defiend
+ - Avoid circular references when stingifying node objects
+ - Fix padding of config node edit dialog
+ - Add force-deploy option when conflict detected
+ - Hide tip box on startup if disabled
+ - Track node moves separately to node config changes
+ - Ensure ace editor instances are freed if edit cancelled
+ - Clip overly long notification messages
+ - Use queryCommandSupported not queryCommandEnabled to check for copy support
+ - Add tip to tab description editor
+ - Make tab info edit box resizable
+ - Shrink config node appearance in info table
+ - Display config nodes in Info sidebar table
+ - Ensure flow info box updates after editing flow
+ - Hide Node info section when displaying changelog
+ - Restructure info tab
+ - Provide notification when new flows deployed in the background
+ - Stop some ui elements from clearing url anchor when clicked
+ - clipboard export text stay highlighted even when button deselected
+ - ensure export clipboard keeps text selected and formatted
+ - Defer resizing tray components until they have finished building
+ - Use pre-calculated values for connection path
+ - Use textContent to avoid manual escaping
+ - Add RED.stack as a common ui component
+ - Numeric validator that accepts blank should accept undefined
+ - Add visual cue as to whether the workspace is focused
+ - Allow RED.validators.number to allow blank values as valid
+ - Support dropping json files into the editor
+ - NLS Expression/JSON editor and fix their height calculation
+ - Update JSONata to 1.2.4 Closes #1275
+ - Remember test expression data on a per-node basis
+ - NLS jsonata test messages
+ - Add JSONata expr tester and improved feedback
+ - Add $context/$flow/$global functions to jsonata
+ - Update jsonata
+
+Other
+
+ - add allow es6 to .jshintrc
+ - travis - don't allow node 8 fails, (and re-add 7)
+ - ask istanbul for more reports as default
+ - Add istanbul to Gruntfile.js (#1189)
+
+
+#### 0.16.2: Maintenance Release
+
+ - Ensure custom mustache context parent set in Template node fixes #1126
+ - Display debug node name in debug panel if its known
+ - Ensure auth-tokens are removed when no user is specified in settings
+ - Ensure all a tags have blank target in info sidebar
+ - Ensure links do not span tabs in the editor
+ - Avoid creating multiple reconnect timers in websocket node
+ - Fix inner reference in install fail message catalog entry Fixes #1120
+ - Display buffer data properly for truncated buffers under Object property
+
+#### 0.16.1: Maintenance Release
+
+ - Add colour swatches to debug when hex colour matched
+ - Nodes with hasUsers set to false should not appear unused
+ - Change hard error to verbose warning if using old node.js level
+ - Don't filter debug properties starting with _ Fixes #1117
+ - Node logged errors not displayed properly in debug pane Fixes #1116
+ - Do not look for existing nodes when checking for wires on paste Fixes #1114
+ - -v option not enabling verbose mode properly
+ - Add node.js version check on startup
+
 #### 0.16.0: Milestone Release
 
+Runtime
+
+ - Drop support for node 0.10 and 0.12
+
 Nodes
 
  - Add option to colourise debug console output Closes #1103

Gruntfile.js

@@ -41,6 +41,17 @@ module.exports = function(grunt) {
             core: { src: ["test/_spec.js","test/red/**/*_spec.js"]},
             nodes: { src: ["test/nodes/**/*_spec.js"]}
         },
+        mocha_istanbul: {
+            options: {
+                globals: ['expect'],
+                timeout: 3000,
+                ignoreLeaks: false,
+                ui: 'bdd',
+                reportFormats: ['lcov'],
+                print: 'both'
+            },
+            coverage: { src: ['test/**/*_spec.js'] }
+        },
         jshint: {
             options: {
                 jshintrc:true
@@ -112,10 +123,13 @@ module.exports = function(grunt) {
                     "editor/js/validators.js",
                     "editor/js/ui/utils.js",
                     "editor/js/ui/common/editableList.js",
+                    "editor/js/ui/common/checkboxSet.js",
                     "editor/js/ui/common/menu.js",
+                    "editor/js/ui/common/panels.js",
                     "editor/js/ui/common/popover.js",
                     "editor/js/ui/common/searchBox.js",
                     "editor/js/ui/common/tabs.js",
+                    "editor/js/ui/common/stack.js",
                     "editor/js/ui/common/typedInput.js",
                     "editor/js/ui/actions.js",
                     "editor/js/ui/deploy.js",
@@ -136,6 +150,7 @@ module.exports = function(grunt) {
                     "editor/js/ui/search.js",
                     "editor/js/ui/typeSearch.js",
                     "editor/js/ui/subflow.js",
+                    "editor/js/ui/userSettings.js",
                     "editor/js/ui/touch/radialMenu.js"
                 ],
                 dest: "public/red/red.js"
@@ -155,9 +170,13 @@ module.exports = function(grunt) {
                         // TODO: resolve relative resource paths in
                         //       bootstrap/FA/jquery
                     ],
-                    "public/vendor/jsonata/jsonata.js": [
-                        "node_modules/jsonata/jsonata.js",
+                    "public/vendor/jsonata/jsonata.min.js": [
+                        "node_modules/jsonata/jsonata-es5.min.js",
                         "editor/vendor/jsonata/formatter.js"
+                    ],
+                    "public/vendor/ace/worker-jsonata.js": [
+                        "node_modules/jsonata/jsonata-es5.min.js",
+                        "editor/vendor/jsonata/worker-jsonata.js"
                     ]
                 }
             }
@@ -167,9 +186,7 @@ module.exports = function(grunt) {
                 files: {
                     'public/red/red.min.js': 'public/red/red.js',
                     'public/red/main.min.js': 'public/red/main.js',
-                    'public/vendor/jsonata/jsonata.min.js': 'public/vendor/jsonata/jsonata.js',
                     'public/vendor/ace/mode-jsonata.js': 'editor/vendor/jsonata/mode-jsonata.js',
-                    'public/vendor/ace/worker-jsonata.js': 'editor/vendor/jsonata/worker-jsonata.js',
                     'public/vendor/ace/snippets/jsonata.js': 'editor/vendor/jsonata/snippets-jsonata.js'
                 }
             }
@@ -395,6 +412,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-chmod');
     grunt.loadNpmTasks('grunt-jsonlint');
+    grunt.loadNpmTasks('grunt-mocha-istanbul');
 
     grunt.registerMultiTask('attachCopyright', function() {
         var files = this.data.src;
@@ -415,7 +433,7 @@ module.exports = function(grunt) {
             " **/\n";
 
         if (files) {
-            for (var i=0;i<files.length;i++) {
+            for (var i=0; i<files.length; i++) {
                 var file = files[i];
                 if (!grunt.file.exists(file)) {
                     grunt.log.warn('File '+ file + ' not found');
@@ -470,4 +488,7 @@ module.exports = function(grunt) {
         'Create distribution zip file',
         ['build','clean:release','copy:release','chmod:release','compress:release']);
 
+    grunt.registerTask('coverage',
+        'Run Istanbul code test coverage task',
+        ['build','mocha_istanbul']);
 };

editor/js/history.js

@@ -175,7 +175,7 @@ RED.history = (function() {
                     n.n.x = n.ox;
                     n.n.y = n.oy;
                     n.n.dirty = true;
-                    n.n.changed = n.changed;
+                    n.n.moved = n.moved;
                 }
                 // A move could have caused a link splice
                 if (ev.links) {
@@ -191,7 +191,7 @@ RED.history = (function() {
             } else if (ev.t == "edit") {
                 for (i in ev.changes) {
                     if (ev.changes.hasOwnProperty(i)) {
-                        if (ev.node._def.defaults[i].type) {
+                        if (ev.node._def.defaults[i] && ev.node._def.defaults[i].type) {
                             // This is a config node property
                             var currentConfigNode = RED.nodes.node(ev.node[i]);
                             if (currentConfigNode) {
@@ -239,7 +239,7 @@ RED.history = (function() {
                     if (ev.outputMap) {
                         outputMap = {};
                         for (var port in ev.outputMap) {
-                            if (ev.outputMap.hasOwnProperty(port) && ev.outputMap[port] !== -1) {
+                            if (ev.outputMap.hasOwnProperty(port) && ev.outputMap[port] !== "-1") {
                                 outputMap[ev.outputMap[port]] = port;
                             }
                         }

editor/js/i18n.js

@@ -19,7 +19,7 @@ RED.i18n = (function() {
     return {
         init: function(done) {
             i18n.init({
-                resGetPath: 'locales/__ns__',
+                resGetPath: 'locales/__ns__?lng=__lng__',
                 dynamicLoad: false,
                 load:'current',
                 ns: {
@@ -37,7 +37,50 @@ RED.i18n = (function() {
 
         },
         loadCatalog: function(namespace,done) {
-            i18n.loadNamespace(namespace,done);
+            var languageList = i18n.functions.toLanguages(i18n.detectLanguage());
+            var toLoad = languageList.length;
+            languageList.forEach(function(lang) {
+                $.ajax({
+                    headers: {
+                        "Accept":"application/json"
+                    },
+                    cache: false,
+                    url: 'locales/'+namespace+'?lng='+lang,
+                    success: function(data) {
+                        i18n.addResourceBundle(lang,namespace,data);
+                        toLoad--;
+                        if (toLoad === 0) {
+                            done();
+                        }
+                    }
+                });
+            })
+
+        },
+
+        loadNodeCatalogs: function(done) {
+            var languageList = i18n.functions.toLanguages(i18n.detectLanguage());
+            var toLoad = languageList.length;
+
+            languageList.forEach(function(lang) {
+                $.ajax({
+                    headers: {
+                        "Accept":"application/json"
+                    },
+                    cache: false,
+                    url: 'locales/nodes?lng='+lang,
+                    success: function(data) {
+                        var namespaces = Object.keys(data);
+                        namespaces.forEach(function(ns) {
+                            i18n.addResourceBundle(lang,ns,data[ns]);
+                        });
+                        toLoad--;
+                        if (toLoad === 0) {
+                            done();
+                        }
+                    }
+                });
+            })
         }
     }
 })();

editor/js/keymap.json

@@ -12,7 +12,8 @@
         "ctrl-g c": "core:show-config-tab",
         "ctrl-e": "core:show-export-dialog",
         "ctrl-i": "core:show-import-dialog",
-        "ctrl-space": "core:toggle-sidebar"
+        "ctrl-space": "core:toggle-sidebar",
+        "ctrl-,": "core:show-user-settings"
     },
     "workspace": {
         "backspace": "core:delete-selection",

editor/js/main.js

@@ -24,23 +24,7 @@
             url: 'nodes',
             success: function(data) {
                 RED.nodes.setNodeList(data);
-
-                var nsCount = 0;
-                for (var i=0;i<data.length;i++) {
-                    var ns = data[i];
-                    if (ns.module != "node-red") {
-                        nsCount++;
-                        RED.i18n.loadCatalog(ns.id, function() {
-                            nsCount--;
-                            if (nsCount === 0) {
-                                loadNodes();
-                            }
-                        });
-                    }
-                }
-                if (nsCount === 0) {
-                    loadNodes();
-                }
+                RED.i18n.loadNodeCatalogs(loadNodes);
             }
         });
     }
@@ -84,6 +68,14 @@
                 RED.comms.subscribe("notification/#",function(topic,msg) {
                     var parts = topic.split("/");
                     var notificationId = parts[1];
+                    if (notificationId === "runtime-deploy") {
+                        // handled in ui/deploy.js
+                        return;
+                    }
+                    if (notificationId === "node") {
+                        // handled below
+                        return;
+                    }
                     if (msg.text) {
                         var text = RED._(msg.text,{default:msg.text});
                         if (!persistentNotifications.hasOwnProperty(notificationId)) {
@@ -101,18 +93,20 @@
                     var node = RED.nodes.node(parts[1]);
                     if (node) {
                         if (msg.hasOwnProperty("text")) {
-                            msg.text = node._(msg.text.toString(),{defaultValue:msg.text.toString()});
+                            if (msg.text[0] !== ".") {
+                                msg.text = node._(msg.text.toString(),{defaultValue:msg.text.toString()});
+                            }
                         }
                         node.status = msg;
                         node.dirty = true;
                         RED.view.redraw();
                     }
                 });
-                RED.comms.subscribe("node/#",function(topic,msg) {
+                RED.comms.subscribe("notification/node/#",function(topic,msg) {
                     var i,m;
                     var typeList;
                     var info;
-                    if (topic == "node/added") {
+                    if (topic == "notification/node/added") {
                         var addedTypes = [];
                         msg.forEach(function(m) {
                             var id = m.id;
@@ -128,7 +122,7 @@
                             typeList = "<ul><li>"+addedTypes.join("</li><li>")+"</li></ul>";
                             RED.notify(RED._("palette.event.nodeAdded", {count:addedTypes.length})+typeList,"success");
                         }
-                    } else if (topic == "node/removed") {
+                    } else if (topic == "notification/node/removed") {
                         for (i=0;i<msg.length;i++) {
                             m = msg[i];
                             info = RED.nodes.removeNodeSet(m.id);
@@ -137,7 +131,7 @@
                                 RED.notify(RED._("palette.event.nodeRemoved", {count:m.types.length})+typeList,"success");
                             }
                         }
-                    } else if (topic == "node/enabled") {
+                    } else if (topic == "notification/node/enabled") {
                         if (msg.types) {
                             info = RED.nodes.getNodeSet(msg.id);
                             if (info.added) {
@@ -152,12 +146,15 @@
                                 });
                             }
                         }
-                    } else if (topic == "node/disabled") {
+                    } else if (topic == "notification/node/disabled") {
                         if (msg.types) {
                             RED.nodes.disableNodeSet(msg.id);
                             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") {
+                        RED.notify(RED._("palette.event.nodeUpgraded", {module:msg.module,version:msg.version}),"success");
+                        RED.nodes.registry.setModulePendingUpdated(msg.module,msg.version);
                     }
                     // Refresh flow library to ensure any examples are updated
                     RED.library.loadFlowLibrary();
@@ -180,10 +177,10 @@
     function loadEditor() {
         var menuOptions = [];
         menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[
-            {id:"menu-item-view-show-grid",label:RED._("menu.label.view.showGrid"),toggle:true,onselect:"core:toggle-show-grid"},
-            {id:"menu-item-view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:"core:toggle-snap-grid"},
-            {id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:"core:toggle-status", selected: true},
-            null,
+            // {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")}}},
@@ -191,7 +188,8 @@
             //     {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-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true}
+            {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true},
+            null
         ]});
         menuOptions.push(null);
         menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[
@@ -217,31 +215,37 @@
         ]});
         menuOptions.push(null);
         if (RED.settings.theme('palette.editable') !== false) {
-            RED.palette.editor.init();
             menuOptions.push({id:"menu-item-edit-palette",label:RED._("menu.label.editPalette"),onselect:"core:manage-palette"});
             menuOptions.push(null);
         }
 
+        menuOptions.push({id:"menu-item-user-settings",label:RED._("menu.label.settings"),onselect:"core:show-user-settings"});
+        menuOptions.push(null);
+
         menuOptions.push({id:"menu-item-keyboard-shortcuts",label:RED._("menu.label.keyboardShortcuts"),onselect:"core:show-help"});
-        menuOptions.push({id:"menu-item-show-tips",label:RED._("menu.label.showTips"),toggle:true,selected:true,onselect:"core:toggle-show-tips"});
         menuOptions.push({id:"menu-item-help",
-            label: RED.settings.theme("menu.menu-item-help.label","Node-RED website"),
+            label: RED.settings.theme("menu.menu-item-help.label",RED._("menu.label.help")),
             href: RED.settings.theme("menu.menu-item-help.url","http://nodered.org/docs")
         });
         menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" });
 
 
+        RED.view.init();
+        RED.userSettings.init();
         RED.user.init();
         RED.library.init();
+        RED.keyboard.init();
         RED.palette.init();
+        if (RED.settings.theme('palette.editable') !== false) {
+            RED.palette.editor.init();
+        }
+
         RED.sidebar.init();
         RED.subflow.init();
         RED.workspaces.init();
         RED.clipboard.init();
         RED.search.init();
-        RED.view.init();
         RED.editor.init();
-        RED.keyboard.init();
         RED.diff.init();
 
         RED.menu.init({id:"btn-sidemenu",options: menuOptions});
@@ -249,13 +253,12 @@
         RED.deploy.init(RED.settings.theme("deployButton",null));
 
         RED.actions.add("core:show-about", showAbout);
-
+        RED.nodes.init();
         RED.comms.connect();
 
         $("#main-container").show();
         $(".header-toolbar").show();
 
-
         loadNodeList();
     }
 

editor/js/nodes.js

@@ -41,7 +41,20 @@ RED.nodes = (function() {
         var typeToId = {};
         var nodeDefinitions = {};
 
+        nodeDefinitions['tab'] = {
+            defaults: {
+                label: {value:""},
+                disabled: {value: false},
+                info: {value: ""}
+            }
+        };
+
+
         var exports = {
+            setModulePendingUpdated: function(module,version) {
+                moduleList[module].pending_version = version;
+                RED.events.emit("registry:module-updated",{module:module,version:version});
+            },
             getModule: function(module) {
                 return moduleList[module];
             },
@@ -78,6 +91,9 @@ RED.nodes = (function() {
                     local:ns.local,
                     sets:{}
                 };
+                if (ns.pending_version) {
+                    moduleList[ns.module].pending_version = ns.pending_version;
+                }
                 moduleList[ns.module].sets[ns.name] = ns;
                 RED.events.emit("registry:node-set-added",ns);
             },
@@ -115,6 +131,7 @@ RED.nodes = (function() {
             },
             registerNodeType: function(nt,def) {
                 nodeDefinitions[nt] = def;
+                def.type = nt;
                 if (def.category != "subflows") {
                     def.set = nodeSets[typeToId[nt]];
                     nodeSets[typeToId[nt]].added = true;
@@ -128,10 +145,15 @@ RED.nodes = (function() {
                     }
                     def["_"] = function() {
                         var args = Array.prototype.slice.call(arguments, 0);
+                        var original = args[0];
                         if (args[0].indexOf(":") === -1) {
                             args[0] = ns+":"+args[0];
                         }
-                        return RED._.apply(null,args);
+                        var result = RED._.apply(null,args);
+                        if (result === args[0]) {
+                            result = original;
+                        }
+                        return result;
                     }
 
                     // TODO: too tightly coupled into palette UI
@@ -160,6 +182,8 @@ RED.nodes = (function() {
     function addNode(n) {
         if (n.type.indexOf("subflow") !== 0) {
             n["_"] = n._def._;
+        } else {
+            n["_"] = RED._;
         }
         if (n._def.category == "config") {
             configNodes[n.id] = n;
@@ -259,12 +283,7 @@ RED.nodes = (function() {
 
     function addWorkspace(ws) {
         workspaces[ws.id] = ws;
-        ws._def = {
-            defaults: {
-                label: {value:""}
-            }
-        };
-
+        ws._def = RED.nodes.getType('tab');
         workspacesOrder.push(ws.id);
     }
     function getWorkspace(id) {
@@ -316,14 +335,6 @@ RED.nodes = (function() {
             });
             sf.name = subflowName;
         }
-        sf._def = {
-            defaults:{},
-            icon:"subflow.png",
-            category: "subflows",
-            color: "#da9",
-            inputs: sf.in.length,
-            outputs: sf.out.length
-        }
         subflows[sf.id] = sf;
         RED.nodes.registerType("subflow:"+sf.id, {
             defaults:{name:{value:""}},
@@ -336,12 +347,13 @@ RED.nodes = (function() {
             label: function() { return this.name||RED.nodes.subflow(sf.id).name },
             labelStyle: function() { return this.name?"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 },
             set:{
                 module: "node-red"
             }
         });
-
-
+        sf._def = RED.nodes.getType("subflow:"+sf.id);
     }
     function getSubflow(id) {
         return subflows[id];
@@ -418,6 +430,7 @@ RED.nodes = (function() {
         node.id = n.id;
         node.type = n.type;
         node.z = n.z;
+
         if (node.type == "unknown") {
             for (var p in n._orig) {
                 if (n._orig.hasOwnProperty(p)) {
@@ -465,6 +478,13 @@ RED.nodes = (function() {
                     node.wires[w.sourcePort].push(w.target.id);
                 }
             }
+
+            if (n.inputs > 0 && n.inputLabels && !/^\s*$/.test(n.inputLabels.join("")))  {
+                node.inputLabels = n.inputLabels.slice();
+            }
+            if (n.outputs > 0 && n.outputLabels && !/^\s*$/.test(n.outputLabels.join(""))) {
+                node.outputLabels = n.outputLabels.slice();
+            }
         }
         return node;
     }
@@ -502,16 +522,23 @@ RED.nodes = (function() {
             node.out.push(nOut);
         });
 
+        if (node.in.length > 0 && n.inputLabels && !/^\s*$/.test(n.inputLabels.join("")))  {
+            node.inputLabels = n.inputLabels.slice();
+        }
+        if (node.out.length > 0 && n.outputLabels && !/^\s*$/.test(n.outputLabels.join(""))) {
+            node.outputLabels = n.outputLabels.slice();
+        }
+
 
         return node;
     }
     /**
      * Converts the current node selection to an exportable JSON Object
      **/
-    function createExportableNodeSet(set) {
+    function createExportableNodeSet(set, exportedSubflows, exportedConfigNodes) {
         var nns = [];
-        var exportedConfigNodes = {};
-        var exportedSubflows = {};
+        exportedConfigNodes = exportedConfigNodes || {};
+        exportedSubflows = exportedSubflows || {};
         for (var n=0;n<set.length;n++) {
             var node = set[n];
             if (node.type.substring(0,8) == "subflow:") {
@@ -525,7 +552,7 @@ RED.nodes = (function() {
                             subflowSet.push(n);
                         }
                     });
-                    var exportableSubflow = createExportableNodeSet(subflowSet);
+                    var exportableSubflow = createExportableNodeSet(subflowSet, exportedSubflows, exportedConfigNodes);
                     nns = exportableSubflow.concat(nns);
                 }
             }
@@ -792,7 +819,7 @@ RED.nodes = (function() {
 
         // Add a tab if there isn't one there already
         if (defaultWorkspace == null) {
-            defaultWorkspace = { type:"tab", id:getID(), label:RED._('workspace.defaultName',{number:1})};
+            defaultWorkspace = { type:"tab", id:getID(), disabled: false, info:"",  label:RED._('workspace.defaultName',{number:1})};
             addWorkspace(defaultWorkspace);
             RED.workspaces.add(defaultWorkspace);
             new_workspaces.push(defaultWorkspace);
@@ -880,7 +907,17 @@ RED.nodes = (function() {
             if (n.type !== "workspace" && n.type !== "tab" && n.type !== "subflow") {
                 def = registry.getNodeType(n.type);
                 if (!def || def.category != "config") {
-                    var node = {x:n.x,y:n.y,z:n.z,type:0,wires:n.wires,changed:false,_config:{}};
+                    var node = {
+                        x:n.x,
+                        y:n.y,
+                        z:n.z,
+                        type:0,
+                        wires:n.wires,
+                        inputLabels: n.inputLabels,
+                        outputLabels: n.outputLabels,
+                        changed:false,
+                        _config:{}
+                    };
                     if (createNewIds) {
                         if (subflow_blacklist[n.z]) {
                             continue;
@@ -996,7 +1033,6 @@ RED.nodes = (function() {
             "link out":"links"
         }
 
-
         // Remap all wires and config node references
         for (i=0;i<new_nodes.length;i++) {
             n = new_nodes[i];
@@ -1004,11 +1040,14 @@ RED.nodes = (function() {
                 for (var w1=0;w1<n.wires.length;w1++) {
                     var wires = (n.wires[w1] instanceof Array)?n.wires[w1]:[n.wires[w1]];
                     for (var w2=0;w2<wires.length;w2++) {
-                        var existingNode = node_map[wires[w2]] || getNode(wires[w2]);
-                        if (existingNode) {
-                            var link = {source:n,sourcePort:w1,target:existingNode};
-                            addLink(link);
-                            new_links.push(link);
+                        if (node_map.hasOwnProperty(wires[w2])) {
+                            if (n.z === node_map[wires[w2]].z) {
+                                var link = {source:n,sourcePort:w1,target:node_map[wires[w2]]};
+                                addLink(link);
+                                new_links.push(link);
+                            } else {
+                                console.log("Warning: dropping link that crosses tabs:",n.id,"->",node_map[wires[w2]].id);
+                            }
                         }
                     }
                 }
@@ -1180,6 +1219,50 @@ RED.nodes = (function() {
     }
 
     return {
+        init: function() {
+            RED.events.on("registry:node-type-added",function(type) {
+                var def = registry.getNodeType(type);
+                var replaced = false;
+                var replaceNodes = [];
+                RED.nodes.eachNode(function(n) {
+                    if (n.type === "unknown" && n.name === type) {
+                        replaceNodes.push(n);
+                    }
+                });
+                RED.nodes.eachConfig(function(n) {
+                    if (n.type === "unknown" && n.name === type) {
+                        replaceNodes.push(n);
+                    }
+                });
+
+                if (replaceNodes.length > 0) {
+                    var reimportList = [];
+                    replaceNodes.forEach(function(n) {
+                        if (configNodes.hasOwnProperty(n.id)) {
+                            delete configNodes[n.id];
+                        } else {
+                            nodes.splice(nodes.indexOf(n),1);
+                        }
+                        reimportList.push(convertNode(n));
+                    });
+                    RED.view.redraw(true);
+                    var result = importNodes(reimportList,false);
+                    var newNodeMap = {};
+                    result[0].forEach(function(n) {
+                        newNodeMap[n.id] = n;
+                    });
+                    RED.nodes.eachLink(function(l) {
+                        if (newNodeMap.hasOwnProperty(l.source.id)) {
+                            l.source = newNodeMap[l.source.id];
+                        }
+                        if (newNodeMap.hasOwnProperty(l.target.id)) {
+                            l.target = newNodeMap[l.target.id];
+                        }
+                    });
+                    RED.view.redraw(true);
+                }
+            });
+        },
         registry:registry,
         setNodeList: registry.setNodeList,
 

editor/js/settings.js

@@ -102,7 +102,7 @@ RED.settings = (function () {
             url: 'settings',
             success: function (data) {
                 setProperties(data);
-                if (RED.settings.user && RED.settings.user.anonymous) {
+                if (!RED.settings.user || RED.settings.user.anonymous) {
                     RED.settings.remove("auth-tokens");
                 }
                 console.log("Node-RED: " + data.version);

editor/js/text/bidi.js

@@ -15,7 +15,9 @@
  **/
 RED.text = {};
 RED.text.bidi = (function() {
-    var textDir = "";
+    var textDir = "";    
+    var textDirPref = "auto";
+    var bidiEnabled = false;
     var LRE = "\u202A",
         RLE = "\u202B",
         PDF = "\u202C";
@@ -110,8 +112,8 @@ RED.text.bidi = (function() {
     }
 
     /**
-     * Sets the text direction preference
-     * @param dir - the text direction preference
+     * Sets the text direction
+     * @param dir - the actual text direction
      */
     function setTextDirection(dir) {
         textDir = dir;
@@ -120,9 +122,44 @@ RED.text.bidi = (function() {
         RED.palette.refresh();
         enforceTextDirectionOnPage();
     }
-
+    
+    /**
+     * Gets the bidi enabled preference
+     */
+    function getBidiEnabled() {
+        return bidiEnabled;
+    }
+        
+    /**
+     * Sets the bidi enabled preference
+     * @param state - the bidi enabled preference
+     */
+    function setBidiEnabled(state) {
+        bidiEnabled = state;
+        setTextDirection((state ? textDirPref : ""));
+    }
+    
+    /**
+     * Gets the text direction preference
+     */
+    function getTextDirPref() {        
+        return textDirPref;
+    }
+    
+    /**
+     * Sets the text direction preference
+     * @param dirPref - text direction preference
+     */
+    function setTextDirPref(dirPref) {
+        textDirPref = dirPref;
+        setTextDirection(textDirPref);
+    }
+   
     return {
-        setTextDirection: setTextDirection,
+        setBidiEnabled: setBidiEnabled,
+        setTextDirPref: setTextDirPref,
+        getBidiEnabled: getBidiEnabled,
+        getTextDirPref: getTextDirPref,
         enforceTextDirectionWithUCC: enforceTextDirectionWithUCC,
         resolveBaseTextDir: resolveBaseTextDir,
         prepareInput: prepareInput

editor/js/ui/actions.js

@@ -21,7 +21,7 @@ RED.actions = (function() {
         var result = [];
         Object.keys(actions).forEach(function(action) {
             var shortcut = RED.keyboard.getShortcut(action);
-            result.push({id:action,scope:shortcut?shortcut.scope:undefined,key:shortcut?shortcut.key:undefined})
+            result.push({id:action,scope:shortcut?shortcut.scope:undefined,key:shortcut?shortcut.key:undefined,user:shortcut?shortcut.user:undefined})
         })
         return result;
     }

editor/js/ui/clipboard.js

@@ -164,10 +164,12 @@ RED.clipboard = (function() {
         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) {
             evt.preventDefault();
             if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
+                $("#clipboard-export").focus();
                 return;
             }
             $(this).parent().children().removeClass('selected');
@@ -177,18 +179,21 @@ RED.clipboard = (function() {
             if (flow.length > 0) {
                 var nodes = JSON.parse(flow);
 
-                var format = $(this).attr('id');
+                format = $(this).attr('id');
                 if (format === 'export-format-full') {
                     flow = JSON.stringify(nodes,null,4);
                 } else {
                     flow = JSON.stringify(nodes);
                 }
                 $("#clipboard-export").val(flow);
+                $("#clipboard-export").focus();
             }
         });
+
         $("#export-range-group > a").click(function(evt) {
             evt.preventDefault();
             if ($(this).hasClass('disabled') || $(this).hasClass('selected')) {
+                $("#clipboard-export").focus();
                 return;
             }
             $(this).parent().children().removeClass('selected');
@@ -198,7 +203,8 @@ RED.clipboard = (function() {
             var nodes = null;
             if (type === 'export-range-selected') {
                 var selection = RED.view.selection();
-                nodes = RED.nodes.createExportableNodeSet(selection.nodes);
+                // Don't include the subflow meta-port nodes in the exported selection
+                nodes = RED.nodes.createExportableNodeSet(selection.nodes.filter(function(n) { return n.type !== 'subflow'}));
             } else if (type === 'export-range-flow') {
                 var activeWorkspace = RED.workspaces.active();
                 nodes = RED.nodes.filterNodes({z:activeWorkspace});
@@ -209,7 +215,7 @@ RED.clipboard = (function() {
                 nodes = RED.nodes.createCompleteNodeSet(false);
             }
             if (nodes !== null) {
-                if (RED.settings.flowFilePretty) {
+                if (format === "export-format-full") {
                     flow = JSON.stringify(nodes,null,4);
                 } else {
                     flow = JSON.stringify(nodes);
@@ -221,6 +227,7 @@ RED.clipboard = (function() {
                 $("#export-copy").addClass('disabled');
             }
             $("#clipboard-export").val(flow);
+            $("#clipboard-export").focus();
         })
 
         $("#clipboard-dialog-ok").hide();
@@ -234,7 +241,7 @@ RED.clipboard = (function() {
             $("#export-range-selected").addClass('disabled').removeClass('selected');
             $("#export-range-flow").click();
         }
-        if (RED.settings.flowFilePretty) {
+        if (format === "export-format-full") {
             $("#export-format-full").click();
         } else {
             $("#export-format-mini").click();
@@ -250,27 +257,58 @@ RED.clipboard = (function() {
             });
         dialog.dialog("option","title",RED._("clipboard.exportNodes")).dialog( "open" );
 
-        setTimeout(function() {
-            $("#clipboard-export").focus();
-            if (!document.queryCommandEnabled("copy")) {
-                $("#clipboard-dialog-cancel").hide();
-                $("#clipboard-dialog-close").show();
-            } else {
-                $("#clipboard-dialog-cancel").show();
-                $("#clipboard-dialog-copy").show();
-            }
-
-        },0);
+        $("#clipboard-export").focus();
+        if (!document.queryCommandSupported("copy")) {
+            $("#clipboard-dialog-cancel").hide();
+            $("#clipboard-dialog-close").show();
+        } else {
+            $("#clipboard-dialog-cancel").show();
+            $("#clipboard-dialog-copy").show();
+        }
     }
 
     function hideDropTarget() {
         $("#dropTarget").hide();
         RED.keyboard.remove("escape");
     }
-
+    function copyText(value,element,msg) {
+        var truncated = false;
+        if (typeof value !== "string" ) {
+            value = JSON.stringify(value, function(key,value) {
+                if (value !== null && typeof value === 'object') {
+                    if (value.__encoded__ && value.hasOwnProperty('data') && value.hasOwnProperty('length')) {
+                        truncated = value.data.length !== value.length;
+                        return value.data;
+                    }
+                }
+                return value;
+            });
+        }
+        if (truncated) {
+            msg += "_truncated";
+        }
+        $("#clipboard-hidden").val(value).select();
+        var result =  document.execCommand("copy");
+        if (result && element) {
+            var popover = RED.popover.create({
+                target: element,
+                direction: 'left',
+                size: 'small',
+                content: RED._(msg)
+            });
+            setTimeout(function() {
+                popover.close();
+            },1000);
+            popover.open();
+        }
+        return result;
+    }
     return {
         init: function() {
             setupDialogs();
+
+            $('<input type="text" id="clipboard-hidden">').appendTo("body");
+
             RED.events.on("view:selection-changed",function(selection) {
                 if (!selection.nodes) {
                     RED.menu.setDisabled("menu-item-export",true);
@@ -293,19 +331,19 @@ RED.clipboard = (function() {
             RED.events.on("search:close",function() { disabled = false; });
             RED.events.on("type-search:open",function() { disabled = true; });
             RED.events.on("type-search:close",function() { disabled = false; });
-            RED.events.on("palette-editor:open",function() { disabled = true; });
-            RED.events.on("palette-editor:close",function() { disabled = false; });
 
 
             $('#chart').on("dragenter",function(event) {
-                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
+                     $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
                     $("#dropTarget").css({display:'table'});
                     RED.keyboard.add("*", "escape" ,hideDropTarget);
                 }
             });
 
             $('#dropTarget').on("dragover",function(event) {
-                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
+                     $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
                     event.preventDefault();
                 }
             })
@@ -313,15 +351,30 @@ RED.clipboard = (function() {
                 hideDropTarget();
             })
             .on("drop",function(event) {
-                var data = event.originalEvent.dataTransfer.getData("text/plain");
+                if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1) {
+                    var data = event.originalEvent.dataTransfer.getData("text/plain");
+                    data = data.substring(data.indexOf('['),data.lastIndexOf(']')+1);
+                    RED.view.importNodes(data);
+                } else if ($.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
+                    var files = event.originalEvent.dataTransfer.files;
+                    if (files.length === 1) {
+                        var file = files[0];
+                        var reader = new FileReader();
+                        reader.onload = (function(theFile) {
+                            return function(e) {
+                                RED.view.importNodes(e.target.result);
+                            };
+                        })(file);
+                        reader.readAsText(file);
+                    }
+                }
                 hideDropTarget();
-                data = data.substring(data.indexOf('['),data.lastIndexOf(']')+1);
-                RED.view.importNodes(data);
                 event.preventDefault();
             });
 
         },
         import: importNodes,
-        export: exportNodes
+        export: exportNodes,
+        copyText: copyText
     }
 })();

editor/js/ui/common/checkboxSet.js

@@ -0,0 +1,131 @@
+/**
+ * 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($) {
+    $.widget( "nodered.checkboxSet", {
+        _create: function() {
+            var that = this;
+            this.uiElement = this.element.wrap( "<span>" ).parent();
+            this.uiElement.addClass("red-ui-checkboxSet");
+            if (this.options.parent) {
+                this.parent = this.options.parent;
+                this.parent.checkboxSet('addChild',this.element);
+            }
+            this.children = [];
+            this.partialFlag = false;
+            this.stateValue = 0;
+            var initialState = this.element.prop('checked');
+            this.options = [
+                $('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-square-o"></i></span>').appendTo(this.uiElement),
+                $('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-check-square-o"></i></span>').appendTo(this.uiElement),
+                $('<span class="red-ui-checkboxSet-option hide"><i class="fa fa-minus-square-o"></i></span>').appendTo(this.uiElement)
+            ];
+            if (initialState) {
+                this.options[1].show();
+            } else {
+                this.options[0].show();
+            }
+
+            this.element.change(function() {
+                if (this.checked) {
+                    that.options[0].hide();
+                    that.options[1].show();
+                    that.options[2].hide();
+                } else {
+                    that.options[1].hide();
+                    that.options[0].show();
+                    that.options[2].hide();
+                }
+                var isChecked = this.checked;
+                that.children.forEach(function(child) {
+                    child.checkboxSet('state',isChecked,false,true);
+                })
+            })
+            this.uiElement.click(function(e) {
+                e.stopPropagation();
+                // state returns null for a partial state. Clicking on that should
+                // result in false.
+                that.state((that.state()===false)?true:false);
+            })
+            if (this.parent) {
+                this.parent.checkboxSet('updateChild',this);
+            }
+        },
+        _destroy: function() {
+            if (this.parent) {
+                this.parent.checkboxSet('removeChild',this.element);
+            }
+        },
+        addChild: function(child) {
+            var that = this;
+            this.children.push(child);
+        },
+        removeChild: function(child) {
+            var index = this.children.indexOf(child);
+            if (index > -1) {
+                this.children.splice(index,1);
+            }
+        },
+        updateChild: function(child) {
+            var checkedCount = 0;
+            this.children.forEach(function(c,i) {
+                if (c.checkboxSet('state') === true) {
+                    checkedCount++;
+                }
+            });
+            if (checkedCount === 0) {
+
+                this.state(false,true);
+            } else if (checkedCount === this.children.length) {
+                this.state(true,true);
+            } else {
+                this.state(null,true);
+            }
+        },
+        disable: function() {
+            this.uiElement.addClass('disabled');
+        },
+        state: function(state,suppressEvent,suppressParentUpdate) {
+
+            if (arguments.length === 0) {
+                return this.partialFlag?null:this.element.is(":checked");
+            } else {
+                this.partialFlag = (state === null);
+                var trueState = this.partialFlag||state;
+                this.element.prop('checked',trueState);
+                if (state === true) {
+                    this.options[0].hide();
+                    this.options[1].show();
+                    this.options[2].hide();
+                } else if (state === false) {
+                    this.options[2].hide();
+                    this.options[1].hide();
+                    this.options[0].show();
+                } else if (state === null) {
+                    this.options[0].hide();
+                    this.options[1].hide();
+                    this.options[2].show();
+                }
+                if (!suppressEvent) {
+                    this.element.trigger('change',null);
+                }
+                if (!suppressParentUpdate && this.parent) {
+                    this.parent.checkboxSet('updateChild',this);
+                }
+            }
+        }
+    })
+
+})(jQuery);

editor/js/ui/common/editableList.js

@@ -50,9 +50,19 @@
             this.uiContainer = this.element
                 .wrap( "<div>" )
                 .parent();
-            this.topContainer = this.uiContainer.wrap("<div>").parent();
 
+            if (this.options.header) {
+                this.options.header.addClass("red-ui-editableList-header");
+                this.borderContainer = this.uiContainer.wrap("<div>").parent();
+                this.borderContainer.prepend(this.options.header);
+                this.topContainer = this.borderContainer.wrap("<div>").parent();
+            } else {
+                this.topContainer = this.uiContainer.wrap("<div>").parent();
+            }
             this.topContainer.addClass('red-ui-editableList');
+            if (this.options.class) {
+                this.topContainer.addClass(this.options.class);
+            }
 
             if (this.options.addButton !== false) {
                 var addLabel;
@@ -75,7 +85,7 @@
             if (this.element.css("position") === "absolute") {
                 ["top","left","bottom","right"].forEach(function(s) {
                     var v = that.element.css(s);
-                    if (s!=="auto" && s!=="") {
+                    if (v!=="auto" && v!=="") {
                         that.topContainer.css(s,v);
                         that.uiContainer.css(s,"0");
                         that.element.css(s,'auto');
@@ -86,6 +96,11 @@
                 this.uiContainer.css("position","absolute");
 
             }
+            if (this.options.header) {
+                this.borderContainer.addClass("red-ui-editableList-border");
+            } else {
+                this.uiContainer.addClass("red-ui-editableList-border");
+            }
             this.uiContainer.addClass("red-ui-editableList-container");
 
             this.uiHeight = this.element.height();
@@ -170,7 +185,7 @@
             var that = this;
             var count = 0;
             if (!this.activeFilter) {
-                this.element.children().show();
+                return this.element.children().show();
             }
             var items = this.items();
             items.each(function (i,el) {
@@ -273,6 +288,11 @@
                 },0);
             }
         },
+        addItems: function(items) {
+            for (var i=0; i<items.length;i++) {
+                this.addItem(items[i]);
+            }
+        },
         removeItem: function(data) {
             var items = this.element.children().filter(function(f) {
                 return data === $(this).find(".red-ui-editableList-item-content").data('data');

editor/js/ui/common/menu.js

@@ -28,7 +28,17 @@ RED.menu = (function() {
         }
 
         function setInitialState() {
-            var savedStateActive = isSavedStateActive(opt.id);
+            var savedStateActive = RED.settings.get("menu-" + opt.id);
+            if (opt.setting) {
+                // May need to migrate pre-0.17 setting
+
+                if (savedStateActive !== null) {
+                    RED.settings.set(opt.setting,savedStateActive);
+                    RED.settings.remove("menu-" + opt.id);
+                } else {
+                    savedStateActive = RED.settings.get(opt.setting);
+                }
+            }
             if (savedStateActive) {
                 link.addClass("active");
                 triggerAction(opt.id,true);
@@ -82,7 +92,8 @@ RED.menu = (function() {
             menuItems[opt.id] = opt;
 
             if (opt.onselect) {
-                link.click(function() {
+                link.click(function(e) {
+                    e.preventDefault();
                     if ($(this).parent().hasClass("disabled")) {
                         return;
                     }
@@ -140,15 +151,13 @@ RED.menu = (function() {
     }
     function createMenu(options) {
 
-        var button = $("#"+options.id);
+        var menuParent = $("#"+options.id);
 
-        //button.click(function(event) {
-        //    $("#"+options.id+"-submenu").show();
-        //    event.preventDefault();
-        //});
+        var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"});
 
-
-        var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"}).insertAfter(button);
+        if (menuParent.length === 1) {
+            topMenu.insertAfter(menuParent);
+        }
 
         var lastAddedSeparator = false;
         for (var i=0;i<options.options.length;i++) {
@@ -161,6 +170,8 @@ RED.menu = (function() {
                 }
             }
         }
+
+        return topMenu;
     }
 
     function triggerAction(id, args) {
@@ -176,18 +187,10 @@ RED.menu = (function() {
         }
     }
 
-    function isSavedStateActive(id) {
-        return RED.settings.get("menu-" + id);
-    }
-
     function isSelected(id) {
         return $("#" + id).hasClass("active");
     }
 
-    function setSavedState(id, state) {
-        RED.settings.set("menu-" + id, state);
-    }
-
     function setSelected(id,state) {
         if (isSelected(id) == state) {
             return;
@@ -201,7 +204,7 @@ RED.menu = (function() {
         if (opt && opt.onselect) {
             triggerAction(opt.id,state);
         }
-        setSavedState(id, state);
+        RED.settings.set(opt.setting||("menu-"+opt.id), state);
     }
 
     function toggleSelected(id) {

editor/js/ui/common/panels.js

@@ -0,0 +1,81 @@
+/**
+ * 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.panels = (function() {
+
+    function createPanel(options) {
+        var container = options.container || $("#"+options.id);
+        var children = container.children();
+        if (children.length !== 2) {
+            throw new Error("Container must have exactly two children");
+        }
+
+        container.addClass("red-ui-panels");
+        var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]);
+        var startPosition;
+        var panelHeights = [];
+        var modifiedHeights = false;
+        var panelRatio;
+
+        separator.draggable({
+                axis: "y",
+                containment: container,
+                scroll: false,
+                start:function(event,ui) {
+                    var height = container.height();
+                    startPosition = ui.position.top;
+                    panelHeights = [$(children[0]).height(),$(children[1]).height()];
+                },
+                drag: function(event,ui) {
+                    var height = container.height();
+                    var delta = ui.position.top-startPosition;
+                    var newHeights = [panelHeights[0]+delta,panelHeights[1]-delta];
+                    $(children[0]).height(newHeights[0]);
+                    $(children[1]).height(newHeights[1]);
+                    if (options.resize) {
+                        options.resize(newHeights[0],newHeights[1]);
+                    }
+                    ui.position.top -= delta;
+                    panelRatio = newHeights[0]/height;
+                },
+                stop:function(event,ui) {
+                    modifiedHeights = true;
+                }
+        });
+
+        return {
+            resize: function(height) {
+                var panelHeights = [$(children[0]).height(),$(children[1]).height()];
+                container.height(height);
+                if (modifiedHeights) {
+                    var topPanelHeight = panelRatio*height;
+                    var bottomPanelHeight = height - topPanelHeight - 48;
+                    panelHeights = [topPanelHeight,bottomPanelHeight];
+                    $(children[0]).height(panelHeights[0]);
+                    $(children[1]).height(panelHeights[1]);
+                }
+                if (options.resize) {
+                    options.resize(panelHeights[0],panelHeights[1]);
+                }
+            }
+        }
+    }
+
+    return {
+        create: createPanel
+    }
+})();

editor/js/ui/common/popover.js

@@ -15,26 +15,61 @@
  **/
 
 RED.popover = (function() {
-
-
+    var deltaSizes = {
+        "default": {
+            top: 10,
+            leftRight: 17,
+            leftLeft: 25
+        },
+        "small": {
+            top: 5,
+            leftRight: 8,
+            leftLeft: 16
+        }
+    }
     function createPopover(options) {
         var target = options.target;
-
+        var direction = options.direction || "right";
+        var trigger = options.trigger;
         var content = options.content;
         var delay = options.delay;
+        var width = options.width||"auto";
+        var size = options.size||"default";
+        if (!deltaSizes[size]) {
+            throw new Error("Invalid RED.popover size value:",size);
+        }
+
         var timer = null;
         var active;
         var div;
 
         var openPopup = function() {
             if (active) {
-                div = $('<div class="red-ui-popover"></div>').html(content).appendTo("body");
+                div = $('<div class="red-ui-popover red-ui-popover-'+direction+'"></div>').appendTo("body");
+                if (size !== "default") {
+                    div.addClass("red-ui-popover-size-"+size);
+                }
+                if (typeof content === 'function') {
+                    content.call(res).appendTo(div);
+                } else {
+                    div.html(content);
+                }
+                if (width !== "auto") {
+                    div.width(width);
+                }
+
+
                 var targetPos = target.offset();
                 var targetWidth = target.width();
                 var targetHeight = target.height();
 
                 var divHeight = div.height();
-                div.css({top: targetPos.top+targetHeight/2-divHeight/2-10,left:targetPos.left+targetWidth+17});
+                var divWidth = div.width();
+                if (direction === 'right') {
+                    div.css({top: targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top,left:targetPos.left+targetWidth+deltaSizes[size].leftRight});
+                } else if (direction === 'left') {
+                    div.css({top: targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top,left:targetPos.left-deltaSizes[size].leftLeft-divWidth});
+                }
 
                 div.fadeIn("fast");
             }
@@ -50,24 +85,45 @@ RED.popover = (function() {
             }
         }
 
-        target.on('mouseenter',function(e) {
-            clearTimeout(timer);
-            active = true;
-            timer = setTimeout(openPopup,delay.show);
-        });
-        target.on('mouseleave', function(e) {
-            if (timer) {
+        if (trigger === 'hover') {
+
+            target.on('mouseenter',function(e) {
                 clearTimeout(timer);
-            }
-            active = false;
-            setTimeout(closePopup,delay.hide);
-        });
+                active = true;
+                timer = setTimeout(openPopup,delay.show);
+            });
+            target.on('mouseleave', function(e) {
+                if (timer) {
+                    clearTimeout(timer);
+                }
+                active = false;
+                setTimeout(closePopup,delay.hide);
+            });
+        } else if (trigger === 'click') {
+            target.click(function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                active = !active;
+                if (!active) {
+                    closePopup();
+                } else {
+                    openPopup();
+                }
+            });
+        }
         var res = {
             setContent: function(_content) {
                 content = _content;
+            },
+            open: function () {
+                active = true;
+                openPopup();
+            },
+            close: function () {
+                active = false;
+                closePopup();
             }
         }
-        target.data('popover',res);
         return res;
 
     }

editor/js/ui/common/searchBox.js

@@ -91,6 +91,9 @@
             } else {
                 this.resultCount.text(val).show();
             }
+        },
+        change: function() {
+            this._trigger("change");
         }
     });
 })(jQuery);

editor/js/ui/common/stack.js

@@ -0,0 +1,119 @@
+/**
+ * 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.stack = (function() {
+    function createStack(options) {
+        var container = options.container;
+
+        var entries = [];
+
+        var visible = true;
+
+        return {
+            add: function(entry) {
+                entries.push(entry);
+                entry.container = $('<div class="palette-category">').appendTo(container);
+                if (!visible) {
+                    entry.container.hide();
+                }
+                var header = $('<div class="palette-header"></div>').appendTo(entry.container);
+                entry.content = $('<div></div>').appendTo(entry.container);
+                if (entry.collapsible !== false) {
+                    header.click(function() {
+                        if (options.singleExpanded) {
+                            if (!entry.isExpanded()) {
+                                for (var i=0;i<entries.length;i++) {
+                                    if (entries[i].isExpanded()) {
+                                        entries[i].collapse();
+                                    }
+                                }
+                                entry.expand();
+                            }
+                        } else {
+                            entry.toggle();
+                        }
+                    });
+                    var icon = $('<i class="fa fa-angle-down"></i>').appendTo(header);
+
+                    if (entry.expanded) {
+                        icon.addClass("expanded");
+                    } else {
+                        entry.content.hide();
+                    }
+                } else {
+                    header.css("cursor","default");
+                }
+                entry.title = $('<span></span>').html(entry.title).appendTo(header);
+
+
+
+                entry.toggle = function() {
+                    if (entry.isExpanded()) {
+                        entry.collapse();
+                        return false;
+                    } else {
+                        entry.expand();
+                        return true;
+                    }
+                };
+                entry.expand = function() {
+                    if (!entry.isExpanded()) {
+                        if (entry.onexpand) {
+                            entry.onexpand.call(entry);
+                        }
+                        icon.addClass("expanded");
+                        entry.content.slideDown(200);
+                        return true;
+                    }
+                };
+                entry.collapse = function() {
+                    if (entry.isExpanded()) {
+                        icon.removeClass("expanded");
+                        entry.content.slideUp(200);
+                        return true;
+                    }
+                };
+                entry.isExpanded = function() {
+                    return icon.hasClass("expanded");
+                };
+
+                return entry;
+
+            },
+
+            hide: function() {
+                visible = false;
+                entries.forEach(function(entry) {
+                    entry.container.hide();
+                });
+                return this;
+            },
+
+            show: function() {
+                visible = true;
+                entries.forEach(function(entry) {
+                    entry.container.show();
+                });
+                return this;
+            }
+        }
+
+    }
+
+    return {
+        create: createStack
+    }
+})();

editor/js/ui/common/tabs.js

@@ -22,10 +22,13 @@ RED.tabs = (function() {
         var currentTabWidth;
         var currentActiveTabWidth = 0;
 
-        var ul = $("#"+options.id);
+        var ul = options.element || $("#"+options.id);
         var wrapper = ul.wrap( "<div>" ).parent();
         var scrollContainer = ul.wrap( "<div>" ).parent();
         wrapper.addClass("red-ui-tabs");
+        if (options.vertical) {
+            wrapper.addClass("red-ui-tabs-vertical");
+        }
         if (options.addButton && typeof options.addButton === 'function') {
             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);
@@ -73,6 +76,9 @@ RED.tabs = (function() {
         ul.children().addClass("red-ui-tab");
 
         function onTabClick() {
+            if (options.onclick) {
+                options.onclick(tabs[$(this).attr('href').slice(1)]);
+            }
             activateTab($(this));
             return false;
         }
@@ -143,6 +149,9 @@ RED.tabs = (function() {
         }
 
         function updateTabWidths() {
+            if (options.vertical) {
+                return;
+            }
             var tabs = ul.find("li.red-ui-tab");
             var width = wrapper.width();
             var tabCount = tabs.size();
@@ -212,6 +221,7 @@ RED.tabs = (function() {
             addTab: function(tab) {
                 tabs[tab.id] = tab;
                 var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
+                li.attr('id',"red-ui-tab-"+(tab.id.replace(".","-")));
                 li.data("tabId",tab.id);
                 var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
                 if (tab.icon) {
@@ -227,6 +237,7 @@ RED.tabs = (function() {
                     closeLink.append('<i class="fa fa-times" />');
 
                     closeLink.on("click",function(event) {
+                        event.preventDefault();
                         removeTab(tab.id);
                     });
                 }
@@ -331,7 +342,7 @@ RED.tabs = (function() {
                 tabs[id].label = label;
                 var tab = ul.find("a[href='#"+id+"']");
                 tab.attr("title",label);
-                tab.find("span").text(label).attr('dir', RED.text.bidi.resolveBaseTextDir(label));
+                tab.find("span.bidiAware").text(label).attr('dir', RED.text.bidi.resolveBaseTextDir(label));
                 updateTabWidths();
             },
             order: function(order) {

editor/js/ui/common/typedInput.js

@@ -21,7 +21,31 @@
         str: {value:"str",label:"string",icon:"red/images/typedInput/az.png"},
         num: {value:"num",label:"number",icon:"red/images/typedInput/09.png",validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/},
         bool: {value:"bool",label:"boolean",icon:"red/images/typedInput/bool.png",options:["true","false"]},
-        json: {value:"json",label:"JSON",icon:"red/images/typedInput/json.png", validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}}},
+        json: {
+            value:"json",
+            label:"JSON",
+            icon:"red/images/typedInput/json.png",
+            validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}},
+            expand: function() {
+                var that = this;
+                var value = this.value();
+                try {
+                    value = JSON.stringify(JSON.parse(value),null,4);
+                } catch(err) {
+                }
+                RED.editor.editJSON({
+                    value: value,
+                    complete: function(v) {
+                        var value = v;
+                        try {
+                            value = JSON.stringify(JSON.parse(v));
+                        } catch(err) {
+                        }
+                        that.value(value);
+                    }
+                })
+            }
+        },
         re: {value:"re",label:"regular expression",icon:"red/images/typedInput/re.png"},
         date: {value:"date",label:"timestamp",hasValue:false},
         jsonata: {
@@ -38,6 +62,20 @@
                     }
                 })
             }
+        },
+        bin: {
+            value: "bin",
+            label: "buffer",
+            icon: "red/images/typedInput/bin.png",
+            expand: function() {
+                var that = this;
+                RED.editor.editBuffer({
+                    value: this.value(),
+                    complete: function(v) {
+                        that.value(v);
+                    }
+                })
+            }
         }
     };
     var nlsd = false;

editor/js/ui/deploy.js

@@ -30,6 +30,8 @@ RED.deploy = (function() {
 
     var deploymentType = "full";
 
+    var deployInflight = false;
+
     var currentDiff = null;
 
     function changeDeploymentType(type) {
@@ -88,7 +90,10 @@ RED.deploy = (function() {
               '</span></li>').prependTo(".header-toolbar");
         }
 
-        $('#btn-deploy').click(function() { save(); });
+        $('#btn-deploy').click(function(event) {
+            event.preventDefault();
+            save();
+        });
 
         RED.actions.add("core:deploy-flows",save);
 
@@ -135,7 +140,16 @@ RED.deploy = (function() {
                             if (ignoreChecked) {
                                 ignoreDeployWarnings[$( "#node-dialog-confirm-deploy-type" ).val()] = true;
                             }
-                            save(true,$( "#node-dialog-confirm-deploy-type" ).val() === "conflict");
+                            save(true,/conflict/.test($("#node-dialog-confirm-deploy-type" ).val()));
+                            $( this ).dialog( "close" );
+                        }
+                    },
+                    {
+                        id: "node-dialog-confirm-deploy-overwrite",
+                        text: RED._("deploy.confirm.button.overwrite"),
+                        class: "primary",
+                        click: function() {
+                            save(true,/conflict/.test($("#node-dialog-confirm-deploy-type" ).val()));
                             $( this ).dialog( "close" );
                         }
                     }
@@ -143,16 +157,19 @@ RED.deploy = (function() {
                 create: function() {
                     $("#node-dialog-confirm-deploy").parent().find("div.ui-dialog-buttonpane")
                         .prepend('<div style="height:0; vertical-align: middle; display:inline-block; margin-top: 13px; float:left;">'+
-                                   '<input style="vertical-align:top;" type="checkbox" id="node-dialog-confirm-deploy-hide">'+
-                                   '<label style="display:inline;" for="node-dialog-confirm-deploy-hide"> do not warn about this again</label>'+
+                                   '<input style="vertical-align:top;" type="checkbox" id="node-dialog-confirm-deploy-hide"> '+
+                                   '<label style="display:inline;" for="node-dialog-confirm-deploy-hide" data-i18n="deploy.confirm.doNotWarn"></label>'+
                                    '<input type="hidden" id="node-dialog-confirm-deploy-type">'+
                                    '</div>');
                 },
                 open: function() {
-                    if ($( "#node-dialog-confirm-deploy-type" ).val() === "conflict") {
+                    var deployType = $("#node-dialog-confirm-deploy-type" ).val();
+                    if (/conflict/.test(deployType)) {
+                        $( "#node-dialog-confirm-deploy" ).dialog('option','title', RED._('deploy.confirm.button.review'));
                         $("#node-dialog-confirm-deploy-deploy").hide();
                         $("#node-dialog-confirm-deploy-review").addClass('disabled').show();
                         $("#node-dialog-confirm-deploy-merge").addClass('disabled').show();
+                        $("#node-dialog-confirm-deploy-overwrite").toggle(deployType === "deploy-conflict");
                         currentDiff = null;
                         $("#node-dialog-confirm-deploy-conflict-checking").show();
                         $("#node-dialog-confirm-deploy-conflict-auto-merge").hide();
@@ -178,7 +195,9 @@ RED.deploy = (function() {
 
                         $("#node-dialog-confirm-deploy-hide").parent().hide();
                     } else {
+                        $( "#node-dialog-confirm-deploy" ).dialog('option','title', RED._('deploy.confirm.button.confirm'));
                         $("#node-dialog-confirm-deploy-deploy").show();
+                        $("#node-dialog-confirm-deploy-overwrite").hide();
                         $("#node-dialog-confirm-deploy-review").hide();
                         $("#node-dialog-confirm-deploy-merge").hide();
                         $("#node-dialog-confirm-deploy-hide").parent().show();
@@ -198,7 +217,33 @@ RED.deploy = (function() {
             }
         });
 
-
+        var activeNotifyMessage;
+        RED.comms.subscribe("notification/runtime-deploy",function(topic,msg) {
+            if (!activeNotifyMessage) {
+                var currentRev = RED.nodes.version();
+                if (currentRev === null || deployInflight || currentRev === msg.revision) {
+                    return;
+                }
+                var message = $('<div>'+RED._('deploy.confirm.backgroundUpdate')+
+                    '<br><br><div class="ui-dialog-buttonset">'+
+                    '<button>'+RED._('deploy.confirm.button.ignore')+'</button>'+
+                    '<button class="primary">'+RED._('deploy.confirm.button.review')+'</button>'+
+                    '</div></div>');
+                $(message.find('button')[0]).click(function(evt) {
+                    evt.preventDefault();
+                    activeNotifyMessage.close();
+                    activeNotifyMessage = null;
+                })
+                $(message.find('button')[1]).click(function(evt) {
+                    evt.preventDefault();
+                    activeNotifyMessage.close();
+                    var nns = RED.nodes.createCompleteNodeSet();
+                    resolveConflict(nns,false);
+                    activeNotifyMessage = null;
+                })
+                activeNotifyMessage = RED.notify(message,null,true);
+            }
+        });
     }
 
     function getNodeInfo(node) {
@@ -212,18 +257,7 @@ RED.deploy = (function() {
                 tabLabel = tab.label;
             }
         }
-        var label = "";
-        if (typeof node._def.label == "function") {
-            try {
-                label = node._def.label.call(node);
-            } catch(err) {
-                console.log("Definition error: "+node_def.type+".label",err);
-                label = node_def.type;
-            }
-        } else {
-            label = node._def.label;
-        }
-        label = label || node.id;
+        var label = RED.utils.getNodeLabel(node,node.id);
         return {tab:tabLabel,type:node.type,label:label};
     }
     function sortNodeInfo(A,B) {
@@ -236,12 +270,12 @@ RED.deploy = (function() {
         return 0;
     }
 
-    function resolveConflict(currentNodes) {
+    function resolveConflict(currentNodes, activeDeploy) {
         $( "#node-dialog-confirm-deploy-config" ).hide();
         $( "#node-dialog-confirm-deploy-unknown" ).hide();
         $( "#node-dialog-confirm-deploy-unused" ).hide();
         $( "#node-dialog-confirm-deploy-conflict" ).show();
-        $( "#node-dialog-confirm-deploy-type" ).val("conflict");
+        $( "#node-dialog-confirm-deploy-type" ).val(activeDeploy?"deploy-conflict":"background-conflict");
         $( "#node-dialog-confirm-deploy" ).dialog( "open" );
     }
 
@@ -326,6 +360,11 @@ RED.deploy = (function() {
                 data.rev = RED.nodes.version();
             }
 
+            deployInflight = true;
+            $("#header-shade").show();
+            $("#editor-shade").show();
+            $("#palette-shade").show();
+            $("#sidebar-shade").show();
             $.ajax({
                 url:"flows",
                 type: "POST",
@@ -350,6 +389,10 @@ RED.deploy = (function() {
                         node.dirty = true;
                         node.changed = false;
                     }
+                    if (node.moved) {
+                        node.dirty = true;
+                        node.moved = false;
+                    }
                     if(node.credentials) {
                         delete node.credentials;
                     }
@@ -373,17 +416,22 @@ RED.deploy = (function() {
                 if (xhr.status === 401) {
                     RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error");
                 } else if (xhr.status === 409) {
-                    resolveConflict(nns);
+                    resolveConflict(nns, true);
                 } else if (xhr.responseText) {
                     RED.notify(RED._("deploy.deployFailed",{message:xhr.responseText}),"error");
                 } else {
                     RED.notify(RED._("deploy.deployFailed",{message:RED._("deploy.errors.noResponse")}),"error");
                 }
             }).always(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();
                 },delta);
             });
         }

editor/js/ui/diff.js

@@ -1,52 +1,26 @@
 RED.diff = (function() {
 
     var currentDiff = {};
+    var diffVisible = false;
+    var diffList;
 
     function init() {
 
         // RED.actions.add("core:show-current-diff",showLocalDiff);
         RED.actions.add("core:show-remote-diff",showRemoteDiff);
-
         // RED.keyboard.add("*","ctrl-shift-l","core:show-current-diff");
         RED.keyboard.add("*","ctrl-shift-r","core:show-remote-diff");
 
+    }
 
-        var dialog = $('<div id="node-dialog-view-diff" class="hide"><div id="node-dialog-view-diff-headers"></div><ol id="node-dialog-view-diff-diff"></ol></div>').appendTo(document.body);
+    function buildDiffPanel(container) {
+        var diffPanel = $('<div id="node-dialog-view-diff"><div id="node-dialog-view-diff-headers"></div><ol id="node-dialog-view-diff-diff"></ol></div>').appendTo(container);
 
         var toolbar = $('<div class="node-diff-toolbar">'+
             '<span><span id="node-diff-toolbar-resolved-conflicts"></span></span> '+
-            '</div>').prependTo(dialog);
+            '</div>').prependTo(diffPanel);
 
-        $("#node-dialog-view-diff").dialog({
-            title: RED._('deploy.confirm.button.review'),
-            modal: true,
-            autoOpen: false,
-            buttons: [
-                {
-                    text: RED._("common.label.cancel"),
-                    click: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                {
-                    id: "node-diff-view-diff-merge",
-                    text: RED._("deploy.confirm.button.merge"),
-                    class: "primary disabled",
-                    click: function() {
-                        if (!$("#node-diff-view-diff-merge").hasClass('disabled')) {
-                            refreshConflictHeader();
-                            mergeDiff(currentDiff);
-                            $( this ).dialog( "close" );
-                        }
-                    }
-                }
-            ],
-            open: function() {
-                $(this).dialog({width:Math.min($(window).width(),900),height:Math.min($(window).height(),600)});
-            }
-        });
-
-        var diffList = $("#node-dialog-view-diff-diff").editableList({
+        diffList = diffPanel.find("#node-dialog-view-diff-diff").editableList({
             addButton: false,
             scrollOnAdd: false,
             addItem: function(container,i,object) {
@@ -77,7 +51,7 @@ RED.diff = (function() {
                 } else if (tab.type === 'subflow') {
                     titleSpan.html((tabForLabel.name||tabForLabel.id));
                 } else {
-                    titleSpan.html("Global nodes");
+                    titleSpan.html(RED._("diff.globalNodes"));
                 }
                 var flowStats = {
                     local: {
@@ -153,7 +127,7 @@ RED.diff = (function() {
                             }
                         }
                         $('<span class="node-diff-chevron"><i class="fa fa-angle-down"></i></span>').appendTo(originalNodeDiv);
-                        $('<span>').html("Flow Properties").appendTo(originalNodeDiv);
+                        $('<span>').html(RED._("diff.flowProperties")).appendTo(originalNodeDiv);
 
                         row.click(function(evt) {
                             evt.preventDefault();
@@ -307,6 +281,7 @@ RED.diff = (function() {
                 container.i18n();
             }
         });
+        return diffPanel;
     }
     function formatWireProperty(wires,allNodes) {
         var result = $("<div>",{class:"node-diff-property-wires"})
@@ -342,21 +317,14 @@ RED.diff = (function() {
     function createNodeIcon(node,def) {
         var nodeDiv = $("<div>",{class:"node-diff-node-entry-node"});
         var colour = def.color;
-        var icon_url = "arrow-in.png";
+        var icon_url = RED.utils.getNodeIcon(def,node);
         if (node.type === 'tab') {
             colour = "#C0DEED";
-            icon_url = "subflow.png";
-        } else if (def.category === 'config') {
-            icon_url = "cog.png";
-        } else if (node.type === 'unknown') {
-            icon_url = "alert.png";
-        } else {
-            icon_url = def.icon;
         }
         nodeDiv.css('backgroundColor',colour);
 
         var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-        $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+        $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
 
         return nodeDiv;
     }
@@ -570,6 +538,7 @@ RED.diff = (function() {
         return div;
     }
     function createNodePropertiesTable(def,node,localNodeObj,remoteNodeObj) {
+        var propertyElements = {};
         var localNode = localNodeObj.node;
         var remoteNode;
         if (remoteNodeObj) {
@@ -578,8 +547,15 @@ RED.diff = (function() {
 
         var nodePropertiesDiv = $("<div>",{class:"node-diff-node-entry-properties"});
         var nodePropertiesTable = $("<table>").appendTo(nodePropertiesDiv);
+        var nodePropertiesTableCols = $('<colgroup><col/><col/></colgroup>').appendTo(nodePropertiesTable);
+        if (remoteNode !== undefined) {
+            $("<col/>").appendTo(nodePropertiesTableCols);
+        }
+        var nodePropertiesTableBody = $("<tbody>").appendTo(nodePropertiesTable);
+
         var row;
         var localCell, remoteCell;
+        var element;
         var currentValue, localValue, remoteValue;
         var localChanged = false;
         var remoteChanged = false;
@@ -588,13 +564,14 @@ RED.diff = (function() {
         var conflict = false;
         var status;
 
-        row = $("<tr>").appendTo(nodePropertiesTable);
+        row = $("<tr>").appendTo(nodePropertiesTableBody);
         $("<td>",{class:"node-diff-property-cell-label"}).html("id").appendTo(row);
         localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
         if (localNode) {
             localCell.addClass("node-diff-node-unchanged");
             $('<span class="node-diff-status"></span>').appendTo(localCell);
-            RED.utils.createObjectElement(localNode.id).appendTo(localCell);
+            element = $('<span class="node-diff-element"></span>').appendTo(localCell);
+            propertyElements['local.id'] = RED.utils.createObjectElement(localNode.id).appendTo(element);
         } else {
             localCell.addClass("node-diff-empty");
         }
@@ -603,7 +580,8 @@ RED.diff = (function() {
             remoteCell.addClass("node-diff-node-unchanged");
             if (remoteNode) {
                 $('<span class="node-diff-status"></span>').appendTo(remoteCell);
-                RED.utils.createObjectElement(remoteNode.id).appendTo(remoteCell);
+                element = $('<span class="node-diff-element"></span>').appendTo(remoteCell);
+                propertyElements['remote.id'] = RED.utils.createObjectElement(remoteNode.id).appendTo(element);
             } else {
                 remoteCell.addClass("node-diff-empty");
             }
@@ -629,13 +607,24 @@ RED.diff = (function() {
             ) {
                 conflict = true;
             }
-            row = $("<tr>").appendTo(nodePropertiesTable);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
             $("<td>",{class:"node-diff-property-cell-label"}).html("position").appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
                 localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
                 $('<span class="node-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
-                RED.utils.createObjectElement({x:localNode.x,y:localNode.y}).appendTo(localCell);
+                element = $('<span class="node-diff-element"></span>').appendTo(localCell);
+                propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y},
+                    {
+                        path: "position",
+                        exposeApi: true,
+                        ontoggle: function(path,state) {
+                            if (propertyElements['remote.'+path]) {
+                                propertyElements['remote.'+path].prop('expand')(path,state)
+                            }
+                        }
+                    }
+                ).appendTo(element);
             } else {
                 localCell.addClass("node-diff-empty");
             }
@@ -645,7 +634,18 @@ RED.diff = (function() {
                 remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
                 if (remoteNode) {
                     $('<span class="node-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
-                    RED.utils.createObjectElement({x:remoteNode.x,y:remoteNode.y}).appendTo(remoteCell);
+                    element = $('<span class="node-diff-element"></span>').appendTo(remoteCell);
+                    propertyElements['remote.position'] = RED.utils.createObjectElement({x:remoteNode.x,y:remoteNode.y},
+                        {
+                            path: "position",
+                            exposeApi: true,
+                            ontoggle: function(path,state) {
+                                if (propertyElements['local.'+path]) {
+                                    propertyElements['local.'+path].prop('expand')(path,state);
+                                }
+                            }
+                        }
+                    ).appendTo(element);
                 } else {
                     remoteCell.addClass("node-diff-empty");
                 }
@@ -675,7 +675,7 @@ RED.diff = (function() {
             ){
                 conflict = true;
             }
-            row = $("<tr>").appendTo(nodePropertiesTable);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
             $("<td>",{class:"node-diff-property-cell-label"}).html("wires").appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
@@ -707,10 +707,14 @@ RED.diff = (function() {
                 }
             }
         }
-        var properties = Object.keys(node).filter(function(p) { return p!='z'&&p!='wires'&&p!=='x'&&p!=='y'&&p!=='id'&&p!=='type'&&(!def.defaults||!def.defaults.hasOwnProperty(p))});
+
+        var properties = Object.keys(node).filter(function(p) { return p!='inputLabels'&&p!='outputLabels'&&p!='z'&&p!='wires'&&p!=='x'&&p!=='y'&&p!=='id'&&p!=='type'&&(!def.defaults||!def.defaults.hasOwnProperty(p))});
         if (def.defaults) {
             properties = properties.concat(Object.keys(def.defaults));
         }
+        if (node.type !== 'tab') {
+            properties = properties.concat(['inputLabels','outputLabels']);
+        }
         properties.forEach(function(d) {
             localChanged = false;
             remoteChanged = false;
@@ -738,8 +742,8 @@ RED.diff = (function() {
                 conflict = true;
             }
 
-            row = $("<tr>").appendTo(nodePropertiesTable);
-            $("<td>",{class:"node-diff-property-cell-label"}).html(d).appendTo(row);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
+            var propertyNameCell = $("<td>",{class:"node-diff-property-cell-label"}).html(d).appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
                 if (!conflict) {
@@ -749,7 +753,18 @@ RED.diff = (function() {
                     localCell.addClass("node-diff-node-conflict");
                     $('<span class="node-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(localCell);
                 }
-                RED.utils.createObjectElement(localNode[d]).appendTo(localCell);
+                element = $('<span class="node-diff-element"></span>').appendTo(localCell);
+                propertyElements['local.'+d] = RED.utils.createObjectElement(localNode[d],
+                    {
+                        path: d,
+                        exposeApi: true,
+                        ontoggle: function(path,state) {
+                            if (propertyElements['remote.'+d]) {
+                                propertyElements['remote.'+d].prop('expand')(path,state)
+                            }
+                        }
+                    }
+                ).appendTo(element);
             } else {
                 localCell.addClass("node-diff-empty");
             }
@@ -763,7 +778,18 @@ RED.diff = (function() {
                         remoteCell.addClass("node-diff-node-conflict");
                         $('<span class="node-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(remoteCell);
                     }
-                    RED.utils.createObjectElement(remoteNode[d]).appendTo(remoteCell);
+                    element = $('<span class="node-diff-element"></span>').appendTo(remoteCell);
+                    propertyElements['remote.'+d] = RED.utils.createObjectElement(remoteNode[d],
+                        {
+                            path: d,
+                            exposeApi: true,
+                            ontoggle: function(path,state) {
+                                if (propertyElements['local.'+d]) {
+                                    propertyElements['local.'+d].prop('expand')(path,state)
+                                }
+                            }
+                        }
+                    ).appendTo(element);
                 } else {
                     remoteCell.addClass("node-diff-empty");
                 }
@@ -1009,186 +1035,225 @@ RED.diff = (function() {
         // console.log(conflicted);
         return diff;
     }
+
     function showDiff(diff) {
+        if (diffVisible) {
+            return;
+        }
+
         var localDiff = diff.localDiff;
         var remoteDiff = diff.remoteDiff;
         var conflicts = diff.conflicts;
         currentDiff = diff;
-        var list = $("#node-dialog-view-diff-diff");
-        list.editableList('empty');
 
-        if (remoteDiff) {
-            $("#node-diff-view-diff-merge").show();
-            if (Object.keys(conflicts).length === 0) {
-                $("#node-diff-view-diff-merge").removeClass('disabled');
-            } else {
-                $("#node-diff-view-diff-merge").addClass('disabled');
-            }
-        } else {
-            $("#node-diff-view-diff-merge").hide();
-        }
-        refreshConflictHeader();
-
-        $("#node-dialog-view-diff-headers").empty();
-        // console.log("--------------");
-        // console.log(localDiff);
-        // console.log(remoteDiff);
-        var currentConfig = localDiff.currentConfig;
-        var newConfig = localDiff.newConfig;
-        conflicts = conflicts || {};
-
-        var el = {
-            diff: localDiff,
-            def: {
-                category: 'config',
-                color: '#f0f0f0'
+        var trayOptions = {
+            title: "Review Changes", //TODO: nls
+            width: Infinity,
+            buttons: [
+                {
+                    text: RED._("common.label.cancel"),
+                    click: function() {
+                        RED.tray.close();
+                    }
+                },
+                {
+                    id: "node-diff-view-diff-merge",
+                    text: RED._("deploy.confirm.button.merge"),
+                    class: "primary disabled",
+                    click: function() {
+                        if (!$("#node-diff-view-diff-merge").hasClass('disabled')) {
+                            refreshConflictHeader();
+                            mergeDiff(currentDiff);
+                            RED.tray.close();
+                        }
+                    }
+                }
+            ],
+            resize: function(dimensions) {
+                // trayWidth = dimensions.width;
             },
-            tab: {
-                n: {},
-                nodes: currentConfig.globals
-            },
-            newTab: {
-                n: {},
-                nodes: newConfig.globals
-            }
-        };
+            open: function(tray) {
+                var trayBody = tray.find('.editor-tray-body');
+                var diffPanel = buildDiffPanel(trayBody);
+                if (remoteDiff) {
+                    $("#node-diff-view-diff-merge").show();
+                    if (Object.keys(conflicts).length === 0) {
+                        $("#node-diff-view-diff-merge").removeClass('disabled');
+                    } else {
+                        $("#node-diff-view-diff-merge").addClass('disabled');
+                    }
+                } else {
+                    $("#node-diff-view-diff-merge").hide();
+                }
+                refreshConflictHeader();
 
-        if (remoteDiff !== undefined) {
-            $('#node-dialog-view-diff').addClass('node-diff-three-way');
+                $("#node-dialog-view-diff-headers").empty();
+                // console.log("--------------");
+                // console.log(localDiff);
+                // console.log(remoteDiff);
+                var currentConfig = localDiff.currentConfig;
+                var newConfig = localDiff.newConfig;
+                conflicts = conflicts || {};
 
-            $('<div class="node-diff-node-entry-cell"></div><div class="node-diff-node-entry-cell" data-i18n="diff.local"></div><div class="node-diff-node-entry-cell" data-i18n="diff.remote"></div>').i18n().appendTo("#node-dialog-view-diff-headers");
-            el.remoteTab = {
-                n:{},
-                nodes:remoteDiff.newConfig.globals
-            };
-            el.remoteDiff = remoteDiff;
-        } else {
-            $('#node-dialog-view-diff').removeClass('node-diff-three-way');
-        }
-
-        list.editableList('addItem',el);
-
-        var seenTabs = {};
-
-        currentConfig.tabOrder.forEach(function(tabId) {
-            var tab = currentConfig.tabs[tabId];
-            var el = {
-                diff: localDiff,
-                def: {},
-                tab:tab
-            };
-            if (newConfig.tabs.hasOwnProperty(tabId)) {
-                el.newTab = newConfig.tabs[tabId];
-            }
-            if (remoteDiff !== undefined) {
-                el.remoteTab = remoteDiff.newConfig.tabs[tabId];
-                el.remoteDiff = remoteDiff;
-            }
-            seenTabs[tabId] = true;
-            list.editableList('addItem',el)
-        });
-        newConfig.tabOrder.forEach(function(tabId) {
-            if (!seenTabs[tabId]) {
-                seenTabs[tabId] = true;
-                var tab = newConfig.tabs[tabId];
                 var el = {
                     diff: localDiff,
-                    def: {},
-                    tab:tab,
-                    newTab: tab
+                    def: {
+                        category: 'config',
+                        color: '#f0f0f0'
+                    },
+                    tab: {
+                        n: {},
+                        nodes: currentConfig.globals
+                    },
+                    newTab: {
+                        n: {},
+                        nodes: newConfig.globals
+                    }
                 };
+
                 if (remoteDiff !== undefined) {
+                    diffPanel.addClass('node-diff-three-way');
+
+                    $('<div data-i18n="diff.local"></div><div data-i18n="diff.remote"></div>').i18n().appendTo("#node-dialog-view-diff-headers");
+                    el.remoteTab = {
+                        n:{},
+                        nodes:remoteDiff.newConfig.globals
+                    };
                     el.remoteDiff = remoteDiff;
+                } else {
+                    diffPanel.removeClass('node-diff-three-way');
                 }
-                list.editableList('addItem',el)
-            }
-        });
-        if (remoteDiff !== undefined) {
-            remoteDiff.newConfig.tabOrder.forEach(function(tabId) {
-                if (!seenTabs[tabId]) {
-                    var tab = remoteDiff.newConfig.tabs[tabId];
-                    // TODO how to recognise this is a remotely added flow
+
+                diffList.editableList('addItem',el);
+
+                var seenTabs = {};
+
+                currentConfig.tabOrder.forEach(function(tabId) {
+                    var tab = currentConfig.tabs[tabId];
                     var el = {
                         diff: localDiff,
-                        remoteDiff: remoteDiff,
-                        def: {},
-                        tab:tab,
-                        remoteTab:tab
+                        def: RED.nodes.getType('tab'),
+                        tab:tab
                     };
-                    list.editableList('addItem',el)
-                }
-            });
-        }
-        var subflowId;
-        for (subflowId in currentConfig.subflows) {
-            if (currentConfig.subflows.hasOwnProperty(subflowId)) {
-                seenTabs[subflowId] = true;
-                el = {
-                    diff: localDiff,
-                    def: {
-                        defaults:{},
-                        icon:"subflow.png",
-                        category: "subflows",
-                        color: "#da9"
-                    },
-                    tab:currentConfig.subflows[subflowId]
-                }
-                if (newConfig.subflows.hasOwnProperty(subflowId)) {
-                    el.newTab = newConfig.subflows[subflowId];
-                }
-                if (remoteDiff !== undefined) {
-                    el.remoteTab = remoteDiff.newConfig.subflows[subflowId];
-                    el.remoteDiff = remoteDiff;
-                }
-                list.editableList('addItem',el)
-            }
-        }
-        for (subflowId in newConfig.subflows) {
-            if (newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
-                seenTabs[subflowId] = true;
-                el = {
-                    diff: localDiff,
-                    def: {
-                        defaults:{},
-                        icon:"subflow.png",
-                        category: "subflows",
-                        color: "#da9"
-                    },
-                    tab:newConfig.subflows[subflowId],
-                    newTab:newConfig.subflows[subflowId]
-                }
-                if (remoteDiff !== undefined) {
-                    el.remoteDiff = remoteDiff;
-                }
-                list.editableList('addItem',el)
-            }
-        }
-        if (remoteDiff !== undefined) {
-            for (subflowId in remoteDiff.newConfig.subflows) {
-                if (remoteDiff.newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
-                    el = {
-                        diff: localDiff,
-                        remoteDiff: remoteDiff,
-                        def: {
-                            defaults:{},
-                            icon:"subflow.png",
-                            category: "subflows",
-                            color: "#da9"
-                        },
-                        tab:remoteDiff.newConfig.subflows[subflowId],
-                        remoteTab: remoteDiff.newConfig.subflows[subflowId]
+                    if (newConfig.tabs.hasOwnProperty(tabId)) {
+                        el.newTab = newConfig.tabs[tabId];
                     }
-                    list.editableList('addItem',el)
+                    if (remoteDiff !== undefined) {
+                        el.remoteTab = remoteDiff.newConfig.tabs[tabId];
+                        el.remoteDiff = remoteDiff;
+                    }
+                    seenTabs[tabId] = true;
+                    diffList.editableList('addItem',el)
+                });
+                newConfig.tabOrder.forEach(function(tabId) {
+                    if (!seenTabs[tabId]) {
+                        seenTabs[tabId] = true;
+                        var tab = newConfig.tabs[tabId];
+                        var el = {
+                            diff: localDiff,
+                            def: RED.nodes.getType('tab'),
+                            tab:tab,
+                            newTab: tab
+                        };
+                        if (remoteDiff !== undefined) {
+                            el.remoteDiff = remoteDiff;
+                        }
+                        diffList.editableList('addItem',el)
+                    }
+                });
+                if (remoteDiff !== undefined) {
+                    remoteDiff.newConfig.tabOrder.forEach(function(tabId) {
+                        if (!seenTabs[tabId]) {
+                            var tab = remoteDiff.newConfig.tabs[tabId];
+                            // TODO how to recognise this is a remotely added flow
+                            var el = {
+                                diff: localDiff,
+                                remoteDiff: remoteDiff,
+                                def: RED.nodes.getType('tab'),
+                                tab:tab,
+                                remoteTab:tab
+                            };
+                            diffList.editableList('addItem',el)
+                        }
+                    });
                 }
+                var subflowId;
+                for (subflowId in currentConfig.subflows) {
+                    if (currentConfig.subflows.hasOwnProperty(subflowId)) {
+                        seenTabs[subflowId] = true;
+                        el = {
+                            diff: localDiff,
+                            def: {
+                                defaults:{},
+                                icon:"subflow.png",
+                                category: "subflows",
+                                color: "#da9"
+                            },
+                            tab:currentConfig.subflows[subflowId]
+                        }
+                        if (newConfig.subflows.hasOwnProperty(subflowId)) {
+                            el.newTab = newConfig.subflows[subflowId];
+                        }
+                        if (remoteDiff !== undefined) {
+                            el.remoteTab = remoteDiff.newConfig.subflows[subflowId];
+                            el.remoteDiff = remoteDiff;
+                        }
+                        diffList.editableList('addItem',el)
+                    }
+                }
+                for (subflowId in newConfig.subflows) {
+                    if (newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
+                        seenTabs[subflowId] = true;
+                        el = {
+                            diff: localDiff,
+                            def: {
+                                defaults:{},
+                                icon:"subflow.png",
+                                category: "subflows",
+                                color: "#da9"
+                            },
+                            tab:newConfig.subflows[subflowId],
+                            newTab:newConfig.subflows[subflowId]
+                        }
+                        if (remoteDiff !== undefined) {
+                            el.remoteDiff = remoteDiff;
+                        }
+                        diffList.editableList('addItem',el)
+                    }
+                }
+                if (remoteDiff !== undefined) {
+                    for (subflowId in remoteDiff.newConfig.subflows) {
+                        if (remoteDiff.newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
+                            el = {
+                                diff: localDiff,
+                                remoteDiff: remoteDiff,
+                                def: {
+                                    defaults:{},
+                                    icon:"subflow.png",
+                                    category: "subflows",
+                                    color: "#da9"
+                                },
+                                tab:remoteDiff.newConfig.subflows[subflowId],
+                                remoteTab: remoteDiff.newConfig.subflows[subflowId]
+                            }
+                            diffList.editableList('addItem',el)
+                        }
+                    }
+                }
+                $("#sidebar-shade").show();
+            },
+            close: function() {
+                diffVisible = false;
+                $("#sidebar-shade").hide();
+
+            },
+            show: function() {
+
             }
         }
-
-
-        $("#node-diff-filter-changed").addClass("selected");
-        $("#node-diff-filter-all").removeClass("selected");
-
-        $("#node-dialog-view-diff").dialog("open");
+        RED.tray.show(trayOptions);
     }
+
     function mergeDiff(diff) {
         var currentConfig = diff.localDiff.currentConfig;
         var localDiff = diff.localDiff;
@@ -1267,7 +1332,6 @@ RED.diff = (function() {
         RED.palette.refresh();
         RED.workspaces.refresh();
         RED.sidebar.config.refresh();
-
     }
     return {
         init: init,

editor/js/ui/keyboard.js

@@ -48,6 +48,7 @@ RED.keyboard = (function() {
         93: true
     }
     var actionToKeyMap = {}
+    var defaultKeyMap = {};
 
     // FF generates some different keycodes because reasons.
     var firefoxKeyCodeMap = {
@@ -57,20 +58,56 @@ RED.keyboard = (function() {
     }
 
     function init() {
+        var userKeymap = RED.settings.get('keymap') || {};
         $.getJSON("red/keymap.json",function(data) {
             for (var scope in data) {
                 if (data.hasOwnProperty(scope)) {
                     var keys = data[scope];
                     for (var key in keys) {
                         if (keys.hasOwnProperty(key)) {
-                            addHandler(scope,key,keys[key]);
+                            if (!userKeymap.hasOwnProperty(keys[key])) {
+                                addHandler(scope,key,keys[key],false);
+                                defaultKeyMap[keys[key]] = {
+                                    scope:scope,
+                                    key:key,
+                                    user:false
+                                };
+                            }
                         }
                     }
                 }
             }
-        })
-        RED.actions.add("core:show-help", showKeyboardHelp);
+            for (var action in userKeymap) {
+                if (userKeymap.hasOwnProperty(action)) {
+                    var obj = userKeymap[action];
+                    if (obj.hasOwnProperty('key')) {
+                        addHandler(obj.scope, obj.key, action, true);
+                    }
+                }
+            }
+        });
 
+        RED.userSettings.add({
+            id:'keyboard',
+            title: RED._("keyboard.keyboard"),
+            get: getSettingsPane,
+            focus: function() {
+                setTimeout(function() {
+                    $("#user-settings-tab-keyboard-filter").focus();
+                },200);
+            }
+        })
+    }
+
+    function revertToDefault(action) {
+        var currentAction = actionToKeyMap[action];
+        if (currentAction) {
+            removeHandler(currentAction.key);
+        }
+        if (defaultKeyMap.hasOwnProperty(action)) {
+            var obj = defaultKeyMap[action];
+            addHandler(obj.scope, obj.key, action, false);
+        }
     }
     function parseKeySpecifier(key) {
         var parts = key.toLowerCase().split("-");
@@ -126,10 +163,12 @@ RED.keyboard = (function() {
                 if (partialState) {
                     partialState = null;
                     return resolveKeyEvent(evt);
-                } else {
+                } else if (Object.keys(handler).length > 0) {
                     partialState = handler;
                     evt.preventDefault();
                     return null;
+                } else {
+                    return null;
                 }
             } else if (handler.scope && handler.scope !== "*") {
                 var target = evt.target;
@@ -174,6 +213,9 @@ RED.keyboard = (function() {
         if (typeof key === 'string') {
             if (typeof cbdown === 'string') {
                 actionToKeyMap[cbdown] = {scope:scope,key:key};
+                if (typeof ondown === 'boolean') {
+                    actionToKeyMap[cbdown].user = ondown;
+                }
             }
             var parts = key.split(" ");
             for (i=0;i<parts.length;i++) {
@@ -181,7 +223,6 @@ RED.keyboard = (function() {
                 if (parsedKey) {
                     keys.push(parsedKey);
                 } else {
-                    console.log("Unrecognised key specifier:",key)
                     return;
                 }
             }
@@ -217,7 +258,7 @@ RED.keyboard = (function() {
         var keys = [];
         var i=0;
         if (typeof key === 'string') {
-            delete actionToKeyMap[key];
+
             var parts = key.split(" ");
             for (i=0;i<parts.length;i++) {
                 var parsedKey = parseKeySpecifier(parts[i]);
@@ -249,78 +290,19 @@ RED.keyboard = (function() {
             }
             slot = slot[key];
         }
+        if (typeof slot.ondown === "string") {
+            if (typeof modifiers === 'boolean' && modifiers) {
+                actionToKeyMap[slot.ondown] = {user: modifiers}
+            } else {
+                delete actionToKeyMap[slot.ondown];
+            }
+        }
         delete slot.scope;
         delete slot.ondown;
     }
 
-    var shortcutDialog = null;
-
     var cmdCtrlKey = '<span class="help-key">'+(isMac?'&#8984;':'Ctrl')+'</span>';
 
-    function showKeyboardHelp() {
-        if (!RED.settings.theme("menu.menu-item-keyboard-shortcuts",true)) {
-            return;
-        }
-        if (!shortcutDialog) {
-            shortcutDialog = $('<div id="keyboard-help-dialog" class="hide">'+
-                '<div class="keyboard-shortcut-entry keyboard-shortcut-list-header">'+
-                    '<div class="keyboard-shortcut-entry-key">shortcut</div>'+
-                    '<div class="keyboard-shortcut-entry-key">action</div>'+
-                    '<div class="keyboard-shortcut-entry-scope">scope</div>'+
-                '</div>'+
-                '<ol id="keyboard-shortcut-list"></ol>'+
-                '</div>')
-            .appendTo("body");
-
-            var shortcutList = $('#keyboard-shortcut-list').editableList({
-                addButton: false,
-                scrollOnAdd: false,
-                addItem: function(container,i,object) {
-                    var item = $('<div class="keyboard-shortcut-entry">').appendTo(container);
-
-                    var key = $('<div class="keyboard-shortcut-entry-key">').appendTo(item);
-                    if (object.key) {
-                        key.append(formatKey(object.key));
-                    } else {
-                        item.addClass("keyboard-shortcut-entry-unassigned");
-                        key.html(RED._('keyboard.unassigned'));
-                    }
-
-                    var text = object.id.replace(/(^.+:([a-z]))|(-([a-z]))/g,function() {
-                        if (arguments[5] === 0) {
-                            return arguments[2].toUpperCase();
-                        } else {
-                            return " "+arguments[4].toUpperCase();
-                        }
-                    });
-                    var label = $('<div>').html(text).appendTo(item);
-                    if (object.scope) {
-                        $('<div class="keyboard-shortcut-entry-scope">').html(object.scope).appendTo(item);
-                    }
-
-
-                },
-            });
-            var shortcuts = RED.actions.list();
-            shortcuts.sort(function(A,B) {
-                return A.id.localeCompare(B.id);
-            });
-            shortcuts.forEach(function(s) {
-                shortcutList.editableList('addItem',s);
-            })
-
-            shortcutDialog.dialog({
-                modal: true,
-                autoOpen: false,
-                width: "800",
-                height: "400",
-                title:RED._("keyboard.title"),
-                resizable: false
-            });
-        }
-
-        shortcutDialog.dialog("open");
-    }
     function formatKey(key) {
         var formattedKey = isMac?key.replace(/ctrl-?/,"&#8984;"):key;
         formattedKey = isMac?formattedKey.replace(/alt-?/,"&#8997;"):key;
@@ -332,6 +314,207 @@ RED.keyboard = (function() {
         return '<span class="help-key-block"><span class="help-key">'+formattedKey.split(" ").join('</span> <span class="help-key">')+'</span></span>';
     }
 
+    function validateKey(key) {
+        key = key.trim();
+        var parts = key.split(" ");
+        for (i=0;i<parts.length;i++) {
+            var parsedKey = parseKeySpecifier(parts[i]);
+            if (!parsedKey) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function editShortcut(e) {
+        e.preventDefault();
+        var container = $(this);
+        var object = container.data('data');
+
+
+        if (!container.hasClass('keyboard-shortcut-entry-expanded')) {
+            endEditShortcut();
+
+            var key = container.find(".keyboard-shortcut-entry-key");
+            var scope = container.find(".keyboard-shortcut-entry-scope");
+            container.addClass('keyboard-shortcut-entry-expanded');
+
+            var keyInput = $('<input type="text">').attr('placeholder',RED._('keyboard.unassigned')).val(object.key||"").appendTo(key);
+            keyInput.on("keyup",function(e) {
+                if (e.keyCode === 13) {
+                    return endEditShortcut();
+                }
+                var currentVal = $(this).val();
+                currentVal = currentVal.trim();
+                var valid = (currentVal === "" || RED.keyboard.validateKey(currentVal));
+                $(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);
+            scopeSelect.i18n();
+            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);
+
+            okButton.click(function(e) {
+                e.stopPropagation();
+                endEditShortcut();
+            });
+            revertButton.click(function(e) {
+                e.stopPropagation();
+                RED.keyboard.revertToDefault(object.id);
+                container.empty();
+                container.removeClass('keyboard-shortcut-entry-expanded');
+                var shortcut = RED.keyboard.getShortcut(object.id);
+                var userKeymap = RED.settings.get('keymap') || {};
+                delete userKeymap[object.id];
+                RED.settings.set('keymap',userKeymap);
+
+                var obj = {
+                    id:object.id,
+                    scope:shortcut?shortcut.scope:undefined,
+                    key:shortcut?shortcut.key:undefined,
+                    user:shortcut?shortcut.user:undefined
+                }
+                buildShortcutRow(container,obj);
+            })
+
+            keyInput.focus();
+        }
+    }
+
+    function endEditShortcut(cancel) {
+        var container = $('.keyboard-shortcut-entry-expanded');
+        if (container.length === 1) {
+            var object = container.data('data');
+            var keyInput = container.find(".keyboard-shortcut-entry-key input");
+            var scopeSelect = container.find(".keyboard-shortcut-entry-scope select");
+            if (!cancel) {
+                var key = keyInput.val().trim();
+                var scope = scopeSelect.val();
+                var valid = (key === "" || RED.keyboard.validateKey(key));
+                if (valid) {
+                    var current = RED.keyboard.getShortcut(object.id);
+                    if ((!current && key) || (current && (current.scope !== scope || current.key !== key))) {
+                        var keyDiv = container.find(".keyboard-shortcut-entry-key");
+                        var scopeDiv = container.find(".keyboard-shortcut-entry-scope");
+                        keyDiv.empty();
+                        scopeDiv.empty();
+                        if (object.key) {
+                            RED.keyboard.remove(object.key,true);
+                        }
+                        container.find(".keyboard-shortcut-entry-text i").css("opacity",1);
+                        if (key === "") {
+                            keyDiv.parent().addClass("keyboard-shortcut-entry-unassigned");
+                            keyDiv.append($('<span>').text(RED._('keyboard.unassigned'))  );
+                            delete object.key;
+                            delete object.scope;
+                        } else {
+                            keyDiv.parent().removeClass("keyboard-shortcut-entry-unassigned");
+                            keyDiv.append(RED.keyboard.formatKey(key))
+                            $("<span>").text(scope).appendTo(scopeDiv);
+                            object.key = key;
+                            object.scope = scope;
+                            RED.keyboard.add(object.scope,object.key,object.id,true);
+                        }
+                        var userKeymap = RED.settings.get('keymap') || {};
+                        userKeymap[object.id] = RED.keyboard.getShortcut(object.id);
+                        RED.settings.set('keymap',userKeymap);
+                    }
+                }
+            }
+            keyInput.remove();
+            scopeSelect.remove();
+            $('.keyboard-shortcut-edit').remove();
+            container.removeClass('keyboard-shortcut-entry-expanded');
+        }
+    }
+
+    function buildShortcutRow(container,object) {
+        var item = $('<div class="keyboard-shortcut-entry">').appendTo(container);
+        container.data('data',object);
+
+        var text = object.id.replace(/(^.+:([a-z]))|(-([a-z]))/g,function() {
+            if (arguments[5] === 0) {
+                return arguments[2].toUpperCase();
+            } else {
+                return " "+arguments[4].toUpperCase();
+            }
+        });
+        var label = $('<div>').addClass("keyboard-shortcut-entry-text").text(text).appendTo(item);
+
+        var user = $('<i class="fa fa-user"></i>').prependTo(label);
+
+        if (!object.user) {
+            user.css("opacity",0);
+        }
+
+        var key = $('<div class="keyboard-shortcut-entry-key">').appendTo(item);
+        if (object.key) {
+            key.append(RED.keyboard.formatKey(object.key));
+        } else {
+            item.addClass("keyboard-shortcut-entry-unassigned");
+            key.append($('<span>').text(RED._('keyboard.unassigned'))  );
+        }
+
+        var scope = $('<div class="keyboard-shortcut-entry-scope">').appendTo(item);
+
+        $("<span>").text(object.scope === '*'?'global':object.scope||"").appendTo(scope);
+        container.click(editShortcut);
+    }
+
+    function getSettingsPane() {
+        var pane = $('<div id="user-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" data-i18n="keyboard.shortcut"></div>'+
+        '<div class="keyboard-shortcut-entry-scope" data-i18n="keyboard.scope"></div>'+
+        '</div>').appendTo(pane);
+
+        pane.find("input").searchBox({
+            delay: 100,
+            change: function() {
+                var filterValue = $(this).val().trim();
+                if (filterValue === "") {
+                    shortcutList.editableList('filter', null);
+                } else {
+                    filterValue = filterValue.replace(/\s/g,"");
+                    shortcutList.editableList('filter', function(data) {
+                        return data.id.toLowerCase().replace(/^.*:/,"").replace("-","").indexOf(filterValue) > -1;
+                    })
+                }
+            }
+        });
+
+        var shortcutList = $('<ol class="keyboard-shortcut-list"></ol>').css({
+            position: "absolute",
+            top: "32px",
+            bottom: "0",
+            left: "0",
+            right: "0"
+        }).appendTo(pane).editableList({
+            addButton: false,
+            scrollOnAdd: false,
+            addItem: function(container,i,object) {
+                buildShortcutRow(container,object);
+            },
+
+        });
+        var shortcuts = RED.actions.list();
+        shortcuts.sort(function(A,B) {
+            var Aid = A.id.replace(/^.*:/,"").replace(/[ -]/g,"").toLowerCase();
+            var Bid = B.id.replace(/^.*:/,"").replace(/[ -]/g,"").toLowerCase();
+            return Aid.localeCompare(Bid);
+        });
+        shortcuts.forEach(function(s) {
+            shortcutList.editableList('addItem',s);
+        });
+        return pane;
+    }
+
     return {
         init: init,
         add: addHandler,
@@ -339,7 +522,9 @@ RED.keyboard = (function() {
         getShortcut: function(actionName) {
             return actionToKeyMap[actionName];
         },
-        formatKey: formatKey
+        revertToDefault: revertToDefault,
+        formatKey: formatKey,
+        validateKey: validateKey
     }
 
 })();

editor/js/ui/library.js

@@ -110,7 +110,7 @@ RED.library = (function() {
         function buildFileList(root,data) {
             var ul = document.createElement("ul");
             var li;
-            for (var i=0;i<data.length;i++) {
+            for (var i=0; i<data.length; i++) {
                 var v = data[i];
                 if (typeof v === "string") {
                     // directory
@@ -157,7 +157,7 @@ RED.library = (function() {
             return ul;
         }
 
-        $('#node-input-name').css("width","60%").after(
+        $('#node-input-name').css("width","66%").after(
             '<div class="btn-group" style="margin-left: 5px;">'+
             '<a id="node-input-'+options.type+'-lookup" class="editor-button" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
             '<ul class="dropdown-menu pull-right" role="menu">'+
@@ -166,8 +166,6 @@ RED.library = (function() {
             '</ul></div>'
         );
 
-
-
         $('#node-input-'+options.type+'-menu-open-library').click(function(e) {
             $("#node-select-library").children().remove();
             var bc = $("#node-dialog-library-breadcrumbs");
@@ -264,7 +262,7 @@ RED.library = (function() {
                     class: "primary",
                     click: function() {
                         if (selectedLibraryItem) {
-                            for (var i=0;i<options.fields.length;i++) {
+                            for (var i=0; i<options.fields.length; i++) {
                                 var field = options.fields[i];
                                 $("#node-input-"+field).val(selectedLibraryItem[field]);
                             }
@@ -327,7 +325,7 @@ RED.library = (function() {
             }
             var queryArgs = [];
             var data = {};
-            for (var i=0;i<options.fields.length;i++) {
+            for (var i=0; i<options.fields.length; i++) {
                 var field = options.fields[i];
                 if (field == "name") {
                     data.name = name;

editor/js/ui/notifications.js

@@ -36,7 +36,11 @@ RED.notify = (function() {
             n.className = "notification notification-"+type;
         }
         n.style.display = "none";
-        n.innerHTML = msg;
+        if (typeof msg === "string") {
+            n.innerHTML = msg;
+        } else {
+            $(n).append(msg);
+        }
         $("#notifications").append(n);
         $(n).slideDown(300);
         n.close = (function() {
@@ -52,7 +56,11 @@ RED.notify = (function() {
         n.update = (function() {
             var nn = n;
             return function(msg,timeout) {
-                nn.innerHTML = msg;
+                if (typeof msg === "string") {
+                    nn.innerHTML = msg;
+                } else {
+                    $(nn).empty().append(msg);
+                }
                 if (timeout !== undefined && timeout > 0) {
                     window.clearTimeout(nn.timeoutid);
                     nn.timeoutid = window.setTimeout(nn.close,timeout);

editor/js/ui/palette.js

@@ -22,7 +22,7 @@ RED.palette = (function() {
     var categoryContainers = {};
 
     function createCategoryContainer(category, label){
-        label = label || category.replace("_", " ");
+        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+'">'+
@@ -101,7 +101,7 @@ RED.palette = (function() {
             if (label != type) {
                 l = "<p><b>"+RED.text.bidi.enforceTextDirectionWithUCC(label)+"</b><br/><i>"+type+"</i></p>";
             }
-            popOverContent = $(l+(info?info:$("script[data-help-name$='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
+            popOverContent = $(l+(info?info:$("script[data-help-name='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
                                 .filter(function(n) {
                                     return (this.nodeType == 1 && this.nodeName == "P") || (this.nodeType == 3 && this.textContent.trim().length > 0)
                                 }).slice(0,2);
@@ -127,7 +127,7 @@ RED.palette = (function() {
         }
         if (exclusion.indexOf(def.category)===-1) {
 
-            var category = def.category.replace(" ","_");
+            var category = def.category.replace(/ /g,"_");
             var rootCategory = category.split("-")[0];
 
             var d = document.createElement("div");
@@ -149,14 +149,9 @@ RED.palette = (function() {
 
 
             if (def.icon) {
-                var icon_url = "arrow-in.png";
-                try {
-                    icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
-                } catch(err) {
-                    console.log("Definition error: "+nt+".icon",err);
-                }
+                var icon_url = RED.utils.getNodeIcon(def);
                 var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
-                $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+                $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
             }
 
             d.style.backgroundColor = def.color;
@@ -190,11 +185,14 @@ RED.palette = (function() {
             $("#palette-"+category).append(d);
             d.onmousedown = function(e) { e.preventDefault(); };
 
-            RED.popover.create({
+            var popover = RED.popover.create({
                 target:$(d),
+                trigger: "hover",
+                width: "300px",
                 content: "hi",
                 delay: { show: 750, hide: 50 }
             });
+            $(d).data('popover',popover);
 
             // $(d).popover({
             //     title:d.type,
@@ -210,10 +208,9 @@ RED.palette = (function() {
                 if (nt.indexOf("subflow:") === 0) {
                     helpText = marked(RED.nodes.subflow(nt.substring(8)).info||"");
                 } else {
-                    helpText = $("script[data-help-name$='"+d.type+"']").html()||"";
+                    helpText = $("script[data-help-name='"+d.type+"']").html()||"";
                 }
-                var help = '<div class="node-help">'+helpText+"</div>";
-                RED.sidebar.info.set(help);
+                RED.sidebar.info.set(helpText);
             });
             var chart = $("#chart");
             var chartOffset = chart.offset();
@@ -236,7 +233,7 @@ RED.palette = (function() {
                     // it here makes me sad
                     //console.log(ui.helper.position());
                     ui.position.left += 17.5;
-                    
+
                     if (def.inputs > 0 && def.outputs > 0) {
                         mouseX = ui.position.left+(ui.helper.width()/2) - chartOffset.left + chart.scrollLeft();
                         mouseY = ui.position.top+(ui.helper.height()/2) - chartOffset.top + chart.scrollTop();

editor/js/ui/search.js

@@ -27,19 +27,11 @@ RED.search = (function() {
     var results = [];
 
     function indexNode(n) {
-        var l = "";
-        if (n._def && n._def.label) {
-            l = n._def.label;
-            try {
-                l = (typeof l === "function" ? l.call(n) : l);
-                if (l) {
-                    l = (""+l).toLowerCase();
-                    index[l] = index[l] || {};
-                    index[l][n.id] = {node:n,label:l}
-                }
-            } catch(err) {
-                console.log("Definition error: "+n.type+".label",err);
-            }
+        var l = RED.utils.getNodeLabel(n);
+        if (l) {
+            l = (""+l).toLowerCase();
+            index[l] = index[l] || {};
+            index[l][n.id] = {node:n,label:l}
         }
         l = l||n.label||n.name||n.id||"";
 
@@ -133,7 +125,7 @@ RED.search = (function() {
     function createDialog() {
         dialog = $("<div>",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#main-container");
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
-        searchInput = $('<input type="text" placeholder="search your flows">').appendTo(searchDiv).searchBox({
+        searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({
             delay: 200,
             change: function() {
                 search($(this).val());
@@ -174,6 +166,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({
@@ -189,25 +182,14 @@ RED.search = (function() {
 
                     var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
                     var colour = def.color;
-                    var icon_url = "arrow-in.png";
+                    var icon_url = RED.utils.getNodeIcon(def,node);
                     if (node.type === 'tab') {
                         colour = "#C0DEED";
-                        icon_url = "subflow.png";
-                    } else if (def.category === 'config') {
-                        icon_url = "cog.png";
-                    } else if (node.type === 'unknown') {
-                        icon_url = "alert.png";
-                    } else {
-                        try {
-                            icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
-                        } catch(err) {
-                            console.log("Definition error: "+nt+".icon",err);
-                        }
                     }
                     nodeDiv.css('backgroundColor',colour);
 
                     var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                    $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+                    $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
 
                     var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
                     if (node.z) {
@@ -284,8 +266,6 @@ RED.search = (function() {
 
         RED.events.on("editor:open",function() { disabled = true; });
         RED.events.on("editor:close",function() { disabled = false; });
-        RED.events.on("palette-editor:open",function() { disabled = true; });
-        RED.events.on("palette-editor:close",function() { disabled = false; });
         RED.events.on("type-search:open",function() { disabled = true; });
         RED.events.on("type-search:close",function() { disabled = false; });
 

editor/js/ui/tab-config.js

@@ -113,7 +113,7 @@ RED.sidebar.config = (function() {
         if (showUnusedOnly) {
             var hiddenCount = nodes.length;
             nodes = nodes.filter(function(n) {
-                return n.users.length === 0;
+                return n._def.hasUsers!==false && n.users.length === 0;
             })
             hiddenCount = hiddenCount - nodes.length;
             if (hiddenCount > 0) {
@@ -131,19 +131,7 @@ RED.sidebar.config = (function() {
         } else {
             var currentType = "";
             nodes.forEach(function(node) {
-                var label = "";
-                if (typeof node._def.label == "function") {
-                    try {
-                        label = node._def.label.call(node);
-                    } catch(err) {
-                        console.log("Definition error: "+node._def.type+".label",err);
-                        label = node._def.type;
-                    }
-
-                } else {
-                    label = node._def.label;
-                }
-                label = label || node.id;
+                var label = RED.utils.getNodeLabel(node,node.id);
                 if (node.type != currentType) {
                     $('<li class="config_node_type">'+node.type+'</li>').appendTo(list);
                     currentType = node.type;
@@ -151,10 +139,11 @@ RED.sidebar.config = (function() {
 
                 var entry = $('<li class="palette_node config_node palette_node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
                 $('<div class="palette_label"></div>').text(label).appendTo(entry);
-
-                var iconContainer = $('<div/>',{class:"palette_icon_container  palette_icon_container_right"}).text(node.users.length).appendTo(entry);
-                if (node.users.length === 0) {
-                    entry.addClass("config_node_unused");
+                if (node._def.hasUsers !== false) {
+                    var iconContainer = $('<div/>',{class:"palette_icon_container  palette_icon_container_right"}).text(node.users.length).appendTo(entry);
+                    if (node.users.length === 0) {
+                        entry.addClass("config_node_unused");
+                    }
                 }
                 entry.on('click',function(e) {
                     RED.sidebar.info.refresh(node);

editor/js/ui/tab-info.js

@@ -26,15 +26,57 @@ RED.sidebar.info = (function() {
         smartypants: false
     });
 
-    var content = document.createElement("div");
-    content.style.paddingTop = "4px";
-    content.style.paddingLeft = "4px";
-    content.style.paddingRight = "4px";
-    content.className = "sidebar-node-info"
+    var content;
+    var sections;
+    var nodeSection;
+    var infoSection;
+    var tipBox;
 
-    var propertiesExpanded = false;
+    var expandedSections = {
+        "property": false
+    };
 
     function init() {
+
+        content = document.createElement("div");
+        content.className = "sidebar-node-info"
+
+        RED.actions.add("core:show-info-tab",show);
+
+        var stackContainer = $("<div>",{class:"sidebar-node-info-stack"}).appendTo(content);
+
+        sections = RED.stack.create({
+            container: stackContainer
+        }).hide();
+
+        nodeSection = sections.add({
+            title: RED._("sidebar.info.node"),
+            collapsible: false
+        });
+        infoSection = sections.add({
+            title: RED._("sidebar.info.information"),
+            collapsible: false
+        });
+        infoSection.content.css("padding","6px");
+        infoSection.container.css("border-bottom","none");
+
+        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 tipRefresh = $('<a href="#" class="workspace-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
+        tipRefresh.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) {
+            e.preventDefault();
+            RED.actions.invoke("core:toggle-show-tips");
+            RED.notify(RED._("sidebar.info.showTips"));
+        });
+
         RED.sidebar.addTab({
             id: "info",
             label: RED._("sidebar.info.label"),
@@ -42,7 +84,12 @@ RED.sidebar.info = (function() {
             content: content,
             enableOnEdit: true
         });
-        RED.actions.add("core:show-info-tab",show);
+        if (tips.enabled()) {
+            tips.start();
+        } else {
+            tips.stop();
+        }
+
     }
 
     function show() {
@@ -66,89 +113,154 @@ RED.sidebar.info = (function() {
         return value;
     }
 
+    function addTargetToExternalLinks(el) {
+        $(el).find("a").each(function(el) {
+            var href = $(this).attr('href');
+            if (/^https?:/.test(href)) {
+                $(this).attr('target','_blank');
+            }
+        });
+        return el;
+    }
     function refresh(node) {
-        tips.stop();
-        $(content).empty();
+        sections.show();
+        $(nodeSection.content).empty();
+        $(infoSection.content).empty();
+
         var table = $('<table class="node-info"></table>');
         var tableBody = $('<tbody>').appendTo(table);
-        $('<tr class="blank"><td colspan="2">'+RED._("sidebar.info.node")+'</td></tr>').appendTo(tableBody);
-        if (node.type != "subflow" && node.name) {
-            $('<tr><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
-        }
-        $("<tr><td>"+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>").appendTo(tableBody);
-        $("<tr><td>"+RED._("sidebar.info.id")+"</td><td>&nbsp;"+node.id+"</td></tr>").appendTo(tableBody);
-
-        var m = /^subflow(:(.+))?$/.exec(node.type);
+        var propRow;
         var subflowNode;
-        if (m) {
-            if (m[2]) {
-                subflowNode = RED.nodes.subflow(m[2]);
-            } else {
-                subflowNode = node;
+        if (node.type === "tab") {
+            nodeSection.title.html(RED._("sidebar.info.flow"));
+            propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.tabName")+'</td><td></td></tr>').appendTo(tableBody);
+            $(propRow.children()[1]).html('&nbsp;'+(node.label||""))
+            propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.id")+"</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.status")+'</td><td></td></tr>').appendTo(tableBody);
+            $(propRow.children()[1]).html((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
+        } else {
+            nodeSection.title.html(RED._("sidebar.info.node"));
+            if (node.type !== "subflow" && node.name) {
+                $('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
             }
+            $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>").appendTo(tableBody);
+            propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.id")+"</td><td></td></tr>").appendTo(tableBody);
+            RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
 
-            $('<tr class="blank"><td colspan="2">'+RED._("sidebar.info.subflow")+'</td></tr>').appendTo(tableBody);
+            var m = /^subflow(:(.+))?$/.exec(node.type);
 
-            var userCount = 0;
-            var subflowType = "subflow:"+subflowNode.id;
-            RED.nodes.eachNode(function(n) {
-                if (n.type === subflowType) {
-                    userCount++;
-                }
-            });
-            $('<tr><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><td>"+RED._("sidebar.info.instances")+"</td><td>"+userCount+"</td></tr>").appendTo(tableBody);
-        }
+            if (!m && node.type != "subflow" && node.type != "comment") {
+                if (node._def) {
+                    var count = 0;
+                    var defaults = node._def.defaults;
+                    for (var n in defaults) {
+                        if (n != "name" && defaults.hasOwnProperty(n)) {
+                            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);
+                            if (defaults[n].type) {
+                                var configNode = RED.nodes.node(val);
+                                if (!configNode) {
+                                    RED.utils.createObjectElement(undefined).appendTo(propRow.children()[1]);
+                                } else {
+                                    var configLabel = RED.utils.getNodeLabel(configNode,val);
+                                    var container = propRow.children()[1];
 
-        if (!m && node.type != "subflow" && node.type != "comment") {
-            $('<tr class="blank"><td colspan="2"><a href="#" class="node-info-property-header"><i style="width: 10px; text-align: center;" class="fa fa-caret-'+(propertiesExpanded?"down":"right")+'"></i> '+RED._("sidebar.info.properties")+'</a></td></tr>').appendTo(tableBody);
-            if (node._def) {
-                for (var n in node._def.defaults) {
-                    if (n != "name" && node._def.defaults.hasOwnProperty(n)) {
-                        var val = node[n];
-                        var type = typeof val;
-                        var propRow = $('<tr class="node-info-property-row'+(propertiesExpanded?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody);
-                        RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
+                                    var div = $('<span>',{class:""}).appendTo(container);
+                                    var nodeDiv = $('<div>',{class:"palette_node palette_node_small"}).appendTo(div);
+                                    var colour = configNode._def.color;
+                                    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 nodeContainer = $('<span></span>').css({"verticalAlign":"top","marginLeft":"6px"}).html(configLabel).appendTo(container);
+
+                                    nodeDiv.on('dblclick',function() {
+                                        RED.editor.editConfig("", configNode.type, configNode.id);
+                                    })
+
+                                }
+                            } else {
+                                RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
+                            }
+                        }
+                    }
+                    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);
                     }
                 }
             }
+
+            if (m) {
+                if (m[2]) {
+                    subflowNode = RED.nodes.subflow(m[2]);
+                } else {
+                    subflowNode = node;
+                }
+
+                $('<tr class="blank"><th colspan="2">'+RED._("sidebar.info.subflow")+'</th></tr>').appendTo(tableBody);
+
+                var userCount = 0;
+                var subflowType = "subflow:"+subflowNode.id;
+                RED.nodes.eachNode(function(n) {
+                    if (n.type === subflowType) {
+                        userCount++;
+                    }
+                });
+                $('<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._("sidebar.info.instances")+"</td><td>"+userCount+'</td></tr>').appendTo(tableBody);
+            }
         }
-        $(table).appendTo(content);
-        $("<hr/>").appendTo(content);
-        if (!subflowNode && node.type != "comment") {
-            var helpText = $("script[data-help-name$='"+node.type+"']").html()||"";
-            $('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(helpText)+'">'+helpText+'</span></div>').appendTo(content);
+        $(table).appendTo(nodeSection.content);
+
+        var infoText = "";
+
+        if (!subflowNode && node.type !== "comment" && node.type !== "tab") {
+            var helpText = $("script[data-help-name='"+node.type+"']").html()||"";
+            infoText = helpText;
+        } else if (node.type === "tab") {
+            infoText = marked(node.info||"");
         }
+
         if (subflowNode) {
-            $('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.info||"")+'">'+marked(subflowNode.info||"")+'</span></div>').appendTo(content);
+            infoText = infoText + marked(subflowNode.info||"");
         } else if (node._def && node._def.info) {
             var info = node._def.info;
             var textInfo = (typeof info === "function" ? info.call(node) : info);
-            $('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(textInfo)+'">'+marked(textInfo)+'</span></div>').appendTo(content);
-            //$('<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';
+            // TODO: help
+            infoText = infoText + marked(textInfo);
+        }
+        if (infoText) {
+            setInfoText(infoText);
         }
 
-        $(".node-info-property-header").click(function(e) {
-            var icon = $(this).find("i");
-            if (icon.hasClass("fa-caret-right")) {
-                icon.removeClass("fa-caret-right");
-                icon.addClass("fa-caret-down");
-                $(".node-info-property-row").show();
-                propertiesExpanded = true;
-            } else {
-                icon.addClass("fa-caret-right");
-                icon.removeClass("fa-caret-down");
-                $(".node-info-property-row").hide();
-                propertiesExpanded = false;
-            }
 
+        $(".node-info-property-header").click(function(e) {
             e.preventDefault();
+            expandedSections["property"] = !expandedSections["property"];
+            $(this).toggleClass("expanded",expandedSections["property"]);
+            $(".node-info-property-row").toggle(expandedSections["property"]);
         });
     }
-
-
+    function setInfoText(infoText) {
+        var info = addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(infoSection.content);
+        info.find(".bidiAware").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) {
+                e.preventDefault();
+                var isExpanded = $(this).hasClass('expanded');
+                var el = $(this).parent().next();
+                while(el.length === 1 && el[0].nodeName !== foldingHeader) {
+                    el.toggle(!isExpanded);
+                    el = el.next();
+                }
+                $(this).toggleClass('expanded',!isExpanded);
+            })
+    }
     var tips = (function() {
-        var started = false;
         var enabled = true;
         var startDelay = 1000;
         var cycleDelay = 15000;
@@ -158,13 +270,11 @@ RED.sidebar.info = (function() {
 
         RED.actions.add("core:toggle-show-tips",function(state) {
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-show-tips");
+                RED.userSettings.toggle("view-show-tips");
             } else {
                 enabled = state;
                 if (enabled) {
-                    if (started) {
-                        startTips();
-                    }
+                    startTips();
                 } else {
                     stopTips();
                 }
@@ -187,23 +297,21 @@ RED.sidebar.info = (function() {
             while ((m=/(\[(.*?)\])/.exec(tip))) {
                 tip = tip.replace(m[1],RED.keyboard.formatKey(m[2]));
             }
-            $('<div class="node-info-tip hide">'+tip+'</div>').appendTo(content).fadeIn(200);
+            tipBox.html(tip).fadeIn(200);
             if (startTimeout) {
                 startTimeout = null;
                 refreshTimeout = setInterval(cycleTips,cycleDelay);
             }
         }
         function cycleTips() {
-            $(".node-info-tip").fadeOut(300,function() {
-                $(this).remove();
+            tipBox.fadeOut(300,function() {
                 setTip();
             })
         }
         function startTips() {
-            started = true;
+            $(".sidebar-node-info").addClass('show-tips');
             if (enabled) {
                 if (!startTimeout && !refreshTimeout) {
-                    $(content).html("");
                     if (tipCount === -1) {
                         do {
                             tipCount++;
@@ -214,26 +322,37 @@ RED.sidebar.info = (function() {
             }
         }
         function stopTips() {
-            started = false;
+            $(".sidebar-node-info").removeClass('show-tips');
             clearInterval(refreshTimeout);
             clearTimeout(startTimeout);
             refreshTimeout = null;
             startTimeout = null;
-            $(".node-info-tip").remove();
+        }
+        function nextTip() {
+            clearInterval(refreshTimeout);
+            startTimeout = true;
+            setTip();
         }
         return {
             start: startTips,
-            stop: stopTips
+            stop: stopTips,
+            next: nextTip,
+            enabled: function() { return enabled; }
         }
     })();
 
     function clear() {
-        tips.start();
+        sections.hide();
+        //
     }
 
     function set(html) {
-        tips.stop();
-        $(content).html(html);
+        // tips.stop();
+        sections.show();
+        nodeSection.container.hide();
+        $(infoSection.content).empty();
+        setInfoText(html);
+        $(".sidebar-node-info-stack").scrollTop(0);
     }
 
 
@@ -249,11 +368,18 @@ RED.sidebar.info = (function() {
                 }
             }
         } else {
-            var subflow = RED.nodes.subflow(RED.workspaces.active());
-            if (subflow) {
-                refresh(subflow);
+            var activeWS = RED.workspaces.active();
+
+            var flow = RED.nodes.workspace(activeWS) || RED.nodes.subflow(activeWS);
+            if (flow) {
+                refresh(flow);
             } else {
-                clear();
+                var workspace = RED.nodes.workspace(RED.workspaces.active());
+                if (workspace && workspace.info) {
+                    refresh(workspace);
+                } else {
+                    clear();
+                }
             }
         }
     });

editor/js/ui/tray.js

@@ -34,6 +34,10 @@ RED.tray = (function() {
         if (options.title) {
             $('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
         }
+        if (options.width === Infinity) {
+            options.maximized = true;
+            resizer.addClass('editor-tray-resize-maximised');
+        }
         var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
         var primaryButton;
         if (options.buttons) {
@@ -74,7 +78,8 @@ RED.tray = (function() {
         };
         stack.push(tray);
 
-        el.draggable({
+        if (!options.maximized) {
+            el.draggable({
                 handle: resizer,
                 axis: "x",
                 start:function(event,ui) {
@@ -103,94 +108,80 @@ RED.tray = (function() {
                     tray.width = -ui.position.left;
                 }
             });
-
-        if (options.open) {
-            options.open(el);
         }
 
-        $("#header-shade").show();
-        $("#editor-shade").show();
-        $("#palette-shade").show();
-        $(".sidebar-shade").show();
+        function finishBuild() {
+            $("#header-shade").show();
+            $("#editor-shade").show();
+            $("#palette-shade").show();
+            $(".sidebar-shade").show();
 
-        tray.preferredWidth = Math.max(el.width(),500);
-        body.css({"minWidth":tray.preferredWidth-40});
+            tray.preferredWidth = Math.max(el.width(),500);
+            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) {
+                if (options.width > $("#editor-stack").position().left-8) {
+                    options.width = $("#editor-stack").position().left-8;
+                }
+                el.width(options.width);
+            } else {
+                el.width(tray.preferredWidth);
             }
-            el.width(options.width);
-        } else {
-            el.width(tray.preferredWidth);
-        }
 
-        tray.width = el.width();
-        if (tray.width > $("#editor-stack").position().left-8) {
-            tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8);
-            el.width(tray.width);
-        }
+            tray.width = el.width();
+            if (tray.width > $("#editor-stack").position().left-8) {
+                tray.width = Math.max(0/*tray.preferredWidth*/,$("#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($("#editor-stack").position().left-8,tray.width));
 
-        el.css({
-            right: -(el.width()+10)+"px",
-            transition: "right 0.25s ease"
-        });
-        $("#workspace").scrollLeft(0);
-        handleWindowResize();
-        openingTray = true;
-        setTimeout(function() {
+            el.css({
+                right: -(el.width()+10)+"px",
+                transition: "right 0.25s ease"
+            });
+            $("#workspace").scrollLeft(0);
+            handleWindowResize();
+            openingTray = true;
             setTimeout(function() {
-                if (!options.width) {
-                    el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
-                }
-                if (options.resize) {
-                    options.resize({width:el.width()});
-                }
-                if (options.show) {
-                    options.show();
-                }
                 setTimeout(function() {
-                    // Delay resetting the flag, so we don't close prematurely
-                    openingTray = false;
-                },200);
-                body.find(":focusable:first").focus();
-
-            },150);
-            el.css({right:0});
-        },0);
-
-        // growButton.click(function(e) {
-        //     e.preventDefault();
-        //     tray.lastWidth = tray.width;
-        //     tray.width = $("#editor-stack").position().left-8;
-        //     el.width(tray.width);
-        //     if (options.resize) {
-        //         options.resize({width:tray.width});
-        //     }
-        // });
-        // shrinkButton.click(function(e) {
-        //     e.preventDefault();
-        //     if (tray.lastWidth && tray.width > tray.lastWidth) {
-        //         tray.width = tray.lastWidth;
-        //     } else if (tray.width > tray.preferredWidth) {
-        //         tray.width = tray.preferredWidth;
-        //     }
-        //     el.width(tray.width);
-        //     if (options.resize) {
-        //         options.resize({width:tray.width});
-        //     }
-        // });
+                    if (!options.width) {
+                        el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
+                    }
+                    if (options.resize) {
+                        options.resize({width:el.width()});
+                    }
+                    if (options.show) {
+                        options.show();
+                    }
+                    setTimeout(function() {
+                        // Delay resetting the flag, so we don't close prematurely
+                        openingTray = false;
+                    },200);
+                    body.find(":focusable:first").focus();
 
+                },150);
+                el.css({right:0});
+            },0);
+        }
+        if (options.open) {
+            if (options.open.length === 1) {
+                options.open(el);
+                finishBuild();
+            } else {
+                options.open(el,finishBuild);
+            }
+        } else {
+            finishBuild();
+        }
     }
 
     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-40);
-            if (tray.width > $("#editor-stack").position().left-8) {
+            tray.body.height(trayHeight);
+            if (tray.options.maximized || tray.width > $("#editor-stack").position().left-8) {
                 tray.width = $("#editor-stack").position().left-8;
                 tray.tray.width(tray.width);
                 // tray.body.parent().width(tray.width);
@@ -200,7 +191,7 @@ RED.tray = (function() {
                 // tray.body.parent().width(tray.width);
             }
             if (tray.options.resize) {
-                tray.options.resize({width:tray.width});
+                tray.options.resize({width:tray.width, height:trayHeight});
             }
         }
     }

editor/js/ui/typeSearch.js

@@ -110,20 +110,11 @@ RED.typeSearch = (function() {
 
                 var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
                 var colour = def.color;
-                var icon_url = "arrow-in.png";
-                if (def.category === 'config') {
-                    icon_url = "cog.png";
-                } else {
-                    try {
-                        icon_url = (typeof def.icon === "function" ? def.icon.call({}) : def.icon);
-                    } catch(err) {
-                        console.log("Definition error: "+object.type+".icon",err);
-                    }
-                }
+                var icon_url = RED.utils.getNodeIcon(def);
                 nodeDiv.css('backgroundColor',colour);
 
                 var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
-                $('<div/>',{class:"palette_icon",style:"background-image: url(icons/"+icon_url+")"}).appendTo(iconContainer);
+                $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
 
                 if (def.inputs > 0) {
                     $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);
@@ -245,7 +236,7 @@ RED.typeSearch = (function() {
         var items = [];
         RED.nodes.registry.getNodeTypes().forEach(function(t) {
             var def = RED.nodes.getType(t);
-            if (def.category !== 'config' && t !== 'unknown') {
+            if (def.category !== 'config' && t !== 'unknown' && t !== 'tab') {
                 items.push({type:t,def: def, label:getTypeLabel(t,def)});
             }
         });

editor/js/ui/userSettings.js

@@ -0,0 +1,249 @@
+/**
+ * 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.userSettings = (function() {
+
+    var trayWidth = 700;
+    var settingsVisible = false;
+
+    var panes = [];
+
+    function addPane(options) {
+        panes.push(options);
+    }
+
+    function show(initialTab) {
+        if (settingsVisible) {
+            return;
+        }
+        settingsVisible = true;
+        var tabContainer;
+
+        var trayOptions = {
+            title: RED._("menu.label.userSettings"),
+            buttons: [
+                {
+                    id: "node-dialog-ok",
+                    text: RED._("common.label.close"),
+                    class: "primary",
+                    click: function() {
+                        RED.tray.close();
+                    }
+                }
+            ],
+            resize: function(dimensions) {
+                trayWidth = dimensions.width;
+            },
+            open: function(tray) {
+                var trayBody = tray.find('.editor-tray-body');
+                var settingsContent = $('<div></div>').appendTo(trayBody);
+                var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);
+
+                $('<ul></ul>',{id:"user-settings-tabs"}).appendTo(tabContainer);
+                var settingsTabs = RED.tabs.create({
+                    id: "user-settings-tabs",
+                    vertical: true,
+                    onchange: function(tab) {
+                        setTimeout(function() {
+                            $("#user-settings-tabs-content").children().hide();
+                            $("#" + tab.id).show();
+                            if (tab.pane.focus) {
+                                tab.pane.focus();
+                            }
+                        },50);
+                    }
+                });
+                var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(settingsContent);
+
+                panes.forEach(function(pane) {
+                    settingsTabs.addTab({
+                        id: "user-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();
+            },
+            close: function() {
+                settingsVisible = false;
+                panes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close();
+                    }
+                });
+                $("#sidebar-shade").hide();
+
+            },
+            show: function() {}
+        }
+        if (trayWidth !== null) {
+            trayOptions.width = trayWidth;
+        }
+        RED.tray.show(trayOptions);
+    }
+
+    var viewSettings = [
+        {
+            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"},
+                {setting:"view-snap-grid",oldSetting:"menu-menu-item-view-snap-grid",label:"menu.label.view.snapGrid",toggle:true,onchange:"core:toggle-snap-grid"},
+                {setting:"view-grid-size",label:"menu.label.view.gridSize",type:"number",default: 20, onchange:RED.view.gridSize}
+            ]
+        },
+        {
+            title: "menu.label.nodes",
+            options: [
+                {setting:"view-node-status",oldSetting:"menu-menu-item-status",label:"menu.label.displayStatus",default: true, toggle:true,onchange:"core:toggle-status"}
+            ]
+        },
+        {
+            title: "menu.label.other",
+            options: [
+                {setting:"view-show-tips",oldSettings:"menu-menu-item-show-tips",label:"menu.label.showTips",toggle:true,default:true,onchange:"core:toggle-show-tips"}
+            ]
+        }
+    ];
+
+    var allSettings = {};
+
+    function createViewPane() {
+
+        var pane = $('<div id="user-settings-tab-view" class="node-help"></div>');
+
+        viewSettings.forEach(function(section) {
+            $('<h3></h3>').text(RED._(section.title)).appendTo(pane);
+            section.options.forEach(function(opt) {
+                var initialState = RED.settings.get(opt.setting);
+                var row = $('<div class="user-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 {
+                    $('<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);
+                }
+            });
+        })
+        addBidiPreferences(pane);
+        return pane;
+    }
+    
+    function addBidiPreferences(pane) {
+        $('<h3></h3>').text(RED._("menu.label.bidi")).appendTo(pane);                
+        var row;
+        
+        // Bidi enabled toggle
+        row = $('<div class="user-settings-row"></div>').appendTo(pane);
+        var input = $('<label for="user-settings-view-bidi-enabled"><input id="user-settings-view-bidi-enabled" type="checkbox"> '+RED._("menu.label.bidiSupport") +'</label>').appendTo(row).find("input");
+        input.prop('checked',RED.text.bidi.getBidiEnabled());
+        
+        // Text Direction combo
+        row = $('<div class="user-settings-row"></div>').appendTo(pane);
+        $('<label for="user-settings-view-text-direction">'+RED._("menu.label.view.textDir")+'</label>').appendTo(row);
+        var select = $('<select id="user-settings-view-text-direction"><option value="ltr">' + RED._("menu.label.view.ltr") + '</option><option value="rtl">'  + RED._("menu.label.view.rtl") + '</option><option value="auto">'  + RED._("menu.label.view.auto") + '</option></select>').appendTo(row);        
+        select.val(RED.text.bidi.getTextDirPref());
+        select.prop('disabled', !RED.text.bidi.getBidiEnabled());
+        
+        input.change(function() {
+            RED.text.bidi.setBidiEnabled(input.prop('checked'));
+            select.prop('disabled', !RED.text.bidi.getBidiEnabled());
+        });
+        select.change(function() {
+            RED.text.bidi.setTextDirPref(select.val());
+        });
+    }
+
+    function setSelected(id, value) {
+        var opt = allSettings[id];
+        RED.settings.set(opt.setting,value);
+        var callback = opt.onchange;
+        if (typeof callback === 'string') {
+            callback = RED.actions.get(callback);
+        }
+        if (callback) {
+            callback.call(opt,value);
+        }
+    }
+    function toggle(id) {
+        var opt = allSettings[id];
+        var state = RED.settings.get(opt.setting);
+        setSelected(id,!state);
+    }
+
+
+    function init() {
+        RED.actions.add("core:show-user-settings",show);
+        RED.actions.add("core:show-help", function() { show('keyboard')});
+
+        addPane({
+            id:'view',
+            title: RED._("menu.label.view.view"),
+            get: createViewPane,
+            close: function() {
+                viewSettings.forEach(function(section) {
+                    section.options.forEach(function(opt) {
+                        var input = $("#user-settings-"+opt.setting);
+                        if (opt.toggle) {
+                            setSelected(opt.setting,input.prop('checked'));
+                        } else {
+                            setSelected(opt.setting,input.val());
+                        }
+                    });
+                })
+            }
+        })
+
+        viewSettings.forEach(function(section) {
+            section.options.forEach(function(opt) {
+                if (opt.oldSetting) {
+                    var oldValue = RED.settings.get(opt.oldSetting);
+                    if (oldValue !== undefined && oldValue !== null) {
+                        RED.settings.set(opt.setting,oldValue);
+                        RED.settings.remove(opt.oldSetting);
+                    }
+                }
+                allSettings[opt.setting] = opt;
+                if (opt.onchange) {
+                    var value = RED.settings.get(opt.setting);
+                    if (value === null && opt.hasOwnProperty('default')) {
+                        value = opt.default;
+                        RED.settings.set(opt.setting,value);
+                    }
+
+                    var callback = opt.onchange;
+                    if (typeof callback === 'string') {
+                        callback = RED.actions.get(callback);
+                    }
+                    if (callback) {
+                        callback.call(opt,value);
+                    }
+                }
+            });
+        });
+
+    }
+    return {
+        init: init,
+        toggle: toggle,
+        show: show,
+        add: addPane
+    };
+})();

editor/js/ui/utils.js

@@ -31,7 +31,7 @@ RED.utils = (function() {
             result = $('<span class="debug-message-object-value debug-message-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>').html('buffer['+value.data.length+']');
+                result = $('<span class="debug-message-object-value debug-message-type-meta"></span>').html('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>').html('array['+value.length+']');
             } else {
@@ -50,40 +50,240 @@ RED.utils = (function() {
         }
         return result;
     }
-    function makeExpandable(el,onexpand) {
+    function makeExpandable(el,onbuild,ontoggle,expand) {
         el.addClass("debug-message-expandable");
+        el.prop('toggle',function() {
+            return function(state) {
+                var parent = el.parent();
+                if (parent.hasClass('collapsed')) {
+                    if (state) {
+                        if (onbuild && !parent.hasClass('built')) {
+                            onbuild();
+                            parent.addClass('built');
+                        }
+                        parent.removeClass('collapsed');
+                        return true;
+                    }
+                } else {
+                    if (!state) {
+                        parent.addClass('collapsed');
+                        return true;
+                    }
+                }
+                return false;
+            }
+        });
         el.click(function(e) {
             var parent = $(this).parent();
-            if (parent.hasClass('collapsed')) {
-                if (onexpand && !parent.hasClass('built')) {
-                    onexpand();
-                    parent.addClass('built');
+            var currentState = !parent.hasClass('collapsed');
+            if ($(this).prop('toggle')(!currentState)) {
+                if (ontoggle) {
+                    ontoggle(!currentState);
                 }
-                parent.removeClass('collapsed');
-            } else {
-                parent.addClass('collapsed');
             }
+            // if (parent.hasClass('collapsed')) {
+            //     if (onbuild && !parent.hasClass('built')) {
+            //         onbuild();
+            //         parent.addClass('built');
+            //     }
+            //     if (ontoggle) {
+            //         ontoggle(true);
+            //     }
+            //     parent.removeClass('collapsed');
+            // } else {
+            //     parent.addClass('collapsed');
+            //     if (ontoggle) {
+            //         ontoggle(false);
+            //     }
+            // }
             e.preventDefault();
         });
+        if (expand) {
+            el.click();
+        }
+
     }
 
-    function buildMessageElement(obj,key,typeHint,hideKey) {
+    var pinnedPaths = {};
+    var formattedPaths = {};
+
+    function addMessageControls(obj,sourceId,key,msg,rootPath,strippedKey) {
+        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);
+        if (!!key) {
+            var copyPath = $('<button class="editor-button editor-button-small"><i class="fa fa-terminal"></i></button>').appendTo(copyTools).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) {
+            e.preventDefault();
+            e.stopPropagation();
+            RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue");
+        })
+        if (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) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (pinnedPaths[sourceId].hasOwnProperty(strippedKey)) {
+                    delete pinnedPaths[sourceId][strippedKey];
+                    $(this).removeClass("selected");
+                    obj.removeClass("debug-message-row-pinned");
+                } else {
+                    var rootedPath = "$"+(strippedKey[0] === '['?"":".")+strippedKey;
+                    pinnedPaths[sourceId][strippedKey] = normalisePropertyExpression(rootedPath);
+                    $(this).addClass("selected");
+                    obj.addClass("debug-message-row-pinned");
+                }
+            }).toggleClass("selected",isPinned);
+            obj.toggleClass("debug-message-row-pinned",isPinned);
+        }
+    }
+    function checkExpanded(strippedKey,expandPaths,minRange,maxRange) {
+        if (expandPaths && expandPaths.length > 0) {
+            if (strippedKey === '' && minRange === undefined) {
+                return true;
+            }
+            for (var i=0;i<expandPaths.length;i++) {
+                var p = expandPaths[i];
+                if (p.indexOf(strippedKey) === 0 && (p[strippedKey.length] === "." ||  p[strippedKey.length] === "[") ) {
+
+                    if (minRange !== undefined && p[strippedKey.length] === "[") {
+                        var subkey = p.substring(strippedKey.length);
+                        var m = (/\[(\d+)\]/.exec(subkey));
+                        if (m) {
+                            var index = parseInt(m[1]);
+                            return minRange<=index && index<=maxRange;
+                        }
+                    } else {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+
+    function formatNumber(element,obj,sourceId,path,cycle,initialFormat) {
+        var format = (formattedPaths[sourceId] && formattedPaths[sourceId][path]) || initialFormat || "dec";
+        if (cycle) {
+            if (format === 'dec') {
+                if ((obj.toString().length===13) && (obj<=2147483647000)) {
+                    format = 'dateMS';
+                } else if ((obj.toString().length===10) && (obj<=2147483647)) {
+                    format = 'dateS';
+                } else {
+                    format = 'hex'
+                }
+            } else if (format === 'dateMS' || format == 'dateS') {
+                format = 'hex';
+            } else {
+                format = 'dec';
+            }
+            formattedPaths[sourceId] = formattedPaths[sourceId]||{};
+            formattedPaths[sourceId][path] = format;
+        } else if (initialFormat !== undefined){
+            formattedPaths[sourceId] = formattedPaths[sourceId]||{};
+            formattedPaths[sourceId][path] = format;
+        }
+        if (format === 'dec') {
+            element.text(""+obj);
+        } else if (format === 'dateMS') {
+            element.text((new Date(obj)).toISOString());
+        } else if (format === 'dateS') {
+            element.text((new Date(obj*1000)).toISOString());
+        } else if (format === 'hex') {
+            element.text("0x"+(obj).toString(16));
+        }
+    }
+
+    function formatBuffer(element,button,sourceId,path,cycle) {
+        var format = (formattedPaths[sourceId] && formattedPaths[sourceId][path]) || "raw";
+        if (cycle) {
+            if (format === 'raw') {
+                format = 'string';
+            } else {
+                format = 'raw';
+            }
+            formattedPaths[sourceId] = formattedPaths[sourceId]||{};
+            formattedPaths[sourceId][path] = format;
+        }
+        if (format === 'raw') {
+            button.text('raw');
+            element.removeClass('debug-message-buffer-string').addClass('debug-message-buffer-raw');
+        } else if (format === 'string') {
+            button.text('string');
+            element.addClass('debug-message-buffer-string').removeClass('debug-message-buffer-raw');
+        }
+    }
+
+    function buildMessageElement(obj,options) {
+        options = options || {};
+        var key = options.key;
+        var typeHint = options.typeHint;
+        var hideKey = options.hideKey;
+        var path = options.path;
+        var sourceId = options.sourceId;
+        var rootPath = options.rootPath;
+        var expandPaths = options.expandPaths;
+        var ontoggle = options.ontoggle;
+        var exposeApi = options.exposeApi;
+
+        var subElements = {};
         var i;
         var e;
         var entryObj;
+        var expandableHeader;
         var header;
         var headerHead;
         var value;
+        var strippedKey;
+        if (path !== undefined && rootPath !== undefined) {
+             strippedKey = path.substring(rootPath.length+(path[rootPath.length]==="."?1:0));
+        }
         var element = $('<span class="debug-message-element"></span>');
+        element.collapse = function() {
+            element.find(".debug-message-expandable").parent().addClass("collapsed");
+        }
+        header = $('<span class="debug-message-row"></span>').appendTo(element);
+        if (sourceId) {
+            addMessageControls(header,sourceId,path,obj,rootPath,strippedKey);
+        }
         if (!key) {
             element.addClass("debug-message-top-level");
-        }
-
-        header = $('<span></span>').appendTo(element);
-
-        if (key && !hideKey) {
-            $('<span class="debug-message-object-key"></span>').text(key).appendTo(header);
-            $('<span>: </span>').appendTo(header);
+            if (sourceId) {
+                var pinned = pinnedPaths[sourceId];
+                expandPaths = [];
+                if (pinned) {
+                    for (var pinnedPath in pinned) {
+                        if (pinned.hasOwnProperty(pinnedPath)) {
+                            try {
+                                var res = getMessageProperty({$:obj},pinned[pinnedPath]);
+                                if (res !== undefined) {
+                                    expandPaths.push(pinnedPath);
+                                }
+                            } catch(err) {
+                            }
+                        }
+                    }
+                    expandPaths.sort();
+                }
+                element.clearPinned = function() {
+                    element.find(".debug-message-row-pinned").removeClass("debug-message-row-pinned");
+                    pinnedPaths[sourceId] = {};
+                }
+            }
+        } else {
+            if (!hideKey) {
+                $('<span class="debug-message-object-key"></span>').text(key).appendTo(header);
+                $('<span>: </span>').appendTo(header);
+            }
         }
         entryObj = $('<span class="debug-message-object-value"></span>').appendTo(header);
 
@@ -104,29 +304,25 @@ RED.utils = (function() {
                     $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html(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);
-                });
+                },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);
+            if (/^#[0-9a-f]{6}$/i.test(obj)) {
+                $('<span class="debug-message-type-string-swatch"></span>').css('backgroundColor',obj).appendTo(e);
             }
-            $('<span class="debug-message-type-string debug-message-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
-
 
         } else if (typeof obj === 'number') {
-            e = $('<span class="debug-message-type-number"></span>').text(""+obj).appendTo(entryObj);
+            e = $('<span class="debug-message-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) {
-                    var format = $(this).data('format') || "date";
-                    if (format === 'dec') {
-                        $(this).text(""+obj).data('format','date');
-                    } else if ((format === 'date') && (obj.toString().length===13) && (obj<=2147483647000)) {
-                        $(this).text((new Date(obj)).toISOString()).data('format','hex');
-                    } else if ((format === 'date') && (obj.toString().length===10) && (obj<=2147483647)) {
-                        $(this).text((new Date(obj*1000)).toISOString()).data('format','hex');
-                    } else {
-                        $(this).text("0x"+(obj).toString(16)).data('format','dec');
-                    }
                     evt.preventDefault();
+                    formatNumber($(this), obj, sourceId, path, true);
                 });
             }
+            formatNumber(e,obj,sourceId,path,false,typeHint==='hex'?'hex':undefined);
+
         } else if (isArray) {
             element.addClass('collapsed');
 
@@ -144,76 +340,22 @@ RED.utils = (function() {
                 if (originalLength === undefined) {
                     originalLength = data.length;
                 }
+                if (data.__encoded__) {
+                    data = data.data;
+                }
                 type = obj.type.toLowerCase();
             } else if (/buffer/.test(typeHint)) {
                 type = 'buffer';
             }
             var fullLength = data.length;
 
-            if (originalLength > 0) {
+                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');
-                makeExpandable(header,function() {
-                    if (!key) {
-                        headerHead = $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html(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 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);
-                        $('<a href="#"></a>').addClass('selected').html('raw').appendTo(bufferOpts).click(function(e) {
-                            if ($(this).text() === 'raw') {
-                                $(this).text('string');
-                                element.addClass('debug-message-buffer-string').removeClass('debug-message-buffer-raw');
-                            } else {
-                                $(this).text('raw');
-                                element.removeClass('debug-message-buffer-string').addClass('debug-message-buffer-raw');
-                            }
-                            e.preventDefault();
-                            e.stopPropagation();
-                        })
-                    }
-                    var row;
-                    if (fullLength <= 10) {
-                        for (i=0;i<fullLength;i++) {
-                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
-                            buildMessageElement(data[i],""+i,false).appendTo(row);
-                        }
-                    } else {
-                        for (i=0;i<fullLength;i+=10) {
-                            var minRange = i;
-                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
-                            header = $('<span></span>').appendTo(row);
-                            $('<i class="fa fa-caret-right debug-message-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);
-                                        buildMessageElement(data[i],""+i,false).appendTo(row);
-                                    }
-                                }
-                            })());
-                            $('<span class="debug-message-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);
-                        }
-                    }
-                });
             }
             if (key) {
-                headerHead = $('<span class="debug-message-type-meta f"></span>').html(typeHint||(type+'['+originalLength+']')).appendTo(entryObj);
+                headerHead = $('<span class="debug-message-type-meta"></span>').html(typeHint||(type+'['+originalLength+']')).appendTo(entryObj);
             } else {
                 headerHead = $('<span class="debug-message-object-header"></span>').appendTo(entryObj);
                 $('<span>[ </span>').appendTo(headerHead);
@@ -232,7 +374,93 @@ RED.utils = (function() {
                 }
                 $('<span> ]</span>').appendTo(headerHead);
             }
+            if (originalLength > 0) {
 
+                makeExpandable(header,function() {
+                    if (!key) {
+                        headerHead = $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html(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 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').html('raw').appendTo(bufferOpts).click(function(e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            formatBuffer(element,$(this),sourceId,path,true);
+                        });
+                        formatBuffer(element,switchFormat,sourceId,path,false);
+
+                    }
+                    var row;
+                    if (fullLength <= 10) {
+                        for (i=0;i<fullLength;i++) {
+                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
+                            subElements[path+"["+i+"]"] = buildMessageElement(
+                                data[i],
+                                {
+                                    key: ""+i,
+                                    typeHint: type==='buffer'?'hex':false,
+                                    hideKey: false,
+                                    path: path+"["+i+"]",
+                                    sourceId: sourceId,
+                                    rootPath: rootPath,
+                                    expandPaths: expandPaths,
+                                    ontoggle: ontoggle,
+                                    exposeApi: exposeApi
+                                }
+                            ).appendTo(row);
+                        }
+                    } else {
+                        for (i=0;i<fullLength;i+=10) {
+                            var minRange = i;
+                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
+                            header = $('<span></span>').appendTo(row);
+                            $('<i class="fa fa-caret-right debug-message-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);
+                                        subElements[path+"["+i+"]"] = buildMessageElement(
+                                            data[i],
+                                            {
+                                                key: ""+i,
+                                                typeHint: type==='buffer'?'hex':false,
+                                                hideKey: false,
+                                                path: path+"["+i+"]",
+                                                sourceId: sourceId,
+                                                rootPath: rootPath,
+                                                expandPaths: expandPaths,
+                                                ontoggle: ontoggle,
+                                                exposeApi: exposeApi
+
+                                            }
+                                        ).appendTo(row);
+                                    }
+                                }
+                            })(),
+                            (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);
+                        }
+                        if (fullLength < originalLength) {
+                             $('<div class="debug-message-object-entry collapsed"><span class="debug-message-object-key">['+fullLength+' &hellip; '+originalLength+']</span></div>').appendTo(arrayRows);
+                        }
+                    }
+                },
+                function(state) {if (ontoggle) { ontoggle(path,state);}},
+                checkExpanded(strippedKey,expandPaths));
+            }
         } else if (typeof obj === 'object') {
             element.addClass('collapsed');
             var keys = Object.keys(obj);
@@ -244,12 +472,36 @@ RED.utils = (function() {
                     }
                     for (i=0;i<keys.length;i++) {
                         var row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
-                        buildMessageElement(obj[keys[i]],keys[i],false).appendTo(row);
+                        var newPath = path;
+                        if (newPath) {
+                            if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(keys[i])) {
+                                newPath += (newPath.length > 0?".":"")+keys[i];
+                            } else {
+                                newPath += "[\""+keys[i].replace(/"/,"\\\"")+"\"]"
+                            }
+                        }
+                        subElements[newPath] = buildMessageElement(
+                            obj[keys[i]],
+                            {
+                                key: keys[i],
+                                typeHint: false,
+                                hideKey: false,
+                                path: newPath,
+                                sourceId: sourceId,
+                                rootPath: rootPath,
+                                expandPaths: expandPaths,
+                                ontoggle: ontoggle,
+                                exposeApi: exposeApi
+
+                            }
+                        ).appendTo(row);
                     }
                     if (keys.length === 0) {
                         $('<div class="debug-message-object-entry debug-message-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>').html('object').appendTo(entryObj);
@@ -276,17 +528,40 @@ RED.utils = (function() {
         } else {
             $('<span class="debug-message-type-other"></span>').text(""+obj).appendTo(entryObj);
         }
+        if (exposeApi) {
+            element.prop('expand', function() { return function(targetPath, state) {
+                if (path === targetPath) {
+                    if (header.prop('toggle')) {
+                        header.prop('toggle')(state);
+                    }
+                } else if (subElements[targetPath] && subElements[targetPath].prop('expand') ) {
+                    subElements[targetPath].prop('expand')(targetPath,state);
+                } else {
+                    for (var p in subElements) {
+                        if (subElements.hasOwnProperty(p)) {
+                            if (targetPath.indexOf(p) === 0) {
+                                if (subElements[p].prop('expand') ) {
+                                    subElements[p].prop('expand')(targetPath,state);
+                                }
+                                break;
+                            }
+                        }
+                    }
+                }
+            }});
+        }
         return element;
     }
 
-    function validatePropertyExpression(str) {
-        // This must be kept in sync with normalisePropertyExpression
-        // in red/runtime/util.js
+    function normalisePropertyExpression(str) {
+        // This must be kept in sync with validatePropertyExpression
+        // in editor/js/ui/utils.js
 
         var length = str.length;
         if (length === 0) {
-            return false;
+            throw new Error("Invalid property expression: zero-length");
         }
+        var parts = [];
         var start = 0;
         var inString = false;
         var inBox = false;
@@ -297,58 +572,75 @@ RED.utils = (function() {
             if (!inString) {
                 if (c === "'" || c === '"') {
                     if (i != start) {
-                        return false;
+                        throw new Error("Invalid property expression: unexpected "+c+" at position "+i);
                     }
                     inString = true;
                     quoteChar = c;
                     start = i+1;
                 } else if (c === '.') {
-                    if (i===0 || i===length-1) {
-                        return false;
+                    if (i===0) {
+                        throw new Error("Invalid property expression: unexpected . at position 0");
+                    }
+                    if (start != i) {
+                        v = str.substring(start,i);
+                        if (/^\d+$/.test(v)) {
+                            parts.push(parseInt(v));
+                        } else {
+                            parts.push(v);
+                        }
+                    }
+                    if (i===length-1) {
+                        throw new Error("Invalid property expression: unterminated expression");
                     }
                     // Next char is first char of an identifier: a-z 0-9 $ _
                     if (!/[a-z0-9\$\_]/i.test(str[i+1])) {
-                        return false;
+                        throw new Error("Invalid property expression: unexpected "+str[i+1]+" at position "+(i+1));
                     }
                     start = i+1;
                 } else if (c === '[') {
                     if (i === 0) {
-                        return false;
+                        throw new Error("Invalid property expression: unexpected "+c+" at position "+i);
+                    }
+                    if (start != i) {
+                        parts.push(str.substring(start,i));
                     }
                     if (i===length-1) {
-                        return false;
+                        throw new Error("Invalid property expression: unterminated expression");
                     }
                     // Next char is either a quote or a number
                     if (!/["'\d]/.test(str[i+1])) {
-                        return false;
+                        throw new Error("Invalid property expression: unexpected "+str[i+1]+" at position "+(i+1));
                     }
                     start = i+1;
                     inBox = true;
                 } else if (c === ']') {
                     if (!inBox) {
-                        return false;
+                        throw new Error("Invalid property expression: unexpected "+c+" at position "+i);
                     }
                     if (start != i) {
                         v = str.substring(start,i);
-                        if (!/^\d+$/.test(v)) {
-                            return false;
+                        if (/^\d+$/.test(v)) {
+                            parts.push(parseInt(v));
+                        } else {
+                            throw new Error("Invalid property expression: unexpected array expression at position "+start);
                         }
                     }
                     start = i+1;
                     inBox = false;
                 } else if (c === ' ') {
-                    return false;
+                    throw new Error("Invalid property expression: unexpected ' ' at position "+i);
                 }
             } else {
                 if (c === quoteChar) {
                     if (i-start === 0) {
-                        return false;
+                        throw new Error("Invalid property expression: zero-length string at position "+start);
                     }
-                    // Next char must be a ]
+                    parts.push(str.substring(start,i));
+                    // If inBox, next char must be a ]. Otherwise it may be [ or .
                     if (inBox && !/\]/.test(str[i+1])) {
-                        return false;
+                        throw new Error("Invalid property expression: unexpected array expression at position "+start);
                     } else if (!inBox && i+1!==length && !/[\[\.]/.test(str[i+1])) {
-                        return false;
+                        throw new Error("Invalid property expression: unexpected "+str[i+1]+" expression at position "+(i+1));
                     }
                     start = i+1;
                     inString = false;
@@ -357,13 +649,93 @@ RED.utils = (function() {
 
         }
         if (inBox || inString) {
+            throw new Error("Invalid property expression: unterminated expression");
+        }
+        if (start < length) {
+            parts.push(str.substring(start));
+        }
+        return parts;
+    }
+
+    function validatePropertyExpression(str) {
+        try {
+            var parts = normalisePropertyExpression(str);
+            return true;
+        } catch(err) {
             return false;
         }
-        return true;
+    }
+
+    function getMessageProperty(msg,expr) {
+        var result = null;
+        var msgPropParts;
+
+        if (typeof expr === 'string') {
+            if (expr.indexOf('msg.')===0) {
+                expr = expr.substring(4);
+            }
+            msgPropParts = normalisePropertyExpression(expr);
+        } else {
+            msgPropParts = expr;
+        }
+        var m;
+        msgPropParts.reduce(function(obj, key) {
+            result = (typeof obj[key] !== "undefined" ? obj[key] : undefined);
+            if (result === undefined && obj.hasOwnProperty('type') && obj.hasOwnProperty('data')&& obj.hasOwnProperty('length')) {
+                result = (typeof obj.data[key] !== "undefined" ? obj.data[key] : undefined);
+            }
+            return result;
+        }, msg);
+        return result;
+    }
+
+    function getNodeIcon(def,node) {
+        if (def.category === 'config') {
+            return "icons/node-red/cog.png"
+        } else if (node && node.type === 'tab') {
+            return "icons/node-red/subflow.png"
+        } else if (node && node.type === 'unknown') {
+            return "icons/node-red/alert.png"
+        } else if (node && node.type === 'subflow') {
+            return "icons/node-red/subflow.png"
+        }
+        var icon_url;
+        if (typeof def.icon === "function") {
+            try {
+                icon_url = def.icon.call(node);
+            } catch(err) {
+                console.log("Definition error: "+def.type+".icon",err);
+                icon_url = "arrow-in.png";
+            }
+        } else {
+            icon_url = def.icon;
+        }
+        return "icons/"+def.set.module+"/"+icon_url;
+    }
+
+    function getNodeLabel(node,defaultLabel) {
+        defaultLabel = defaultLabel||"";
+        var l;
+        if (node.type === 'tab') {
+            l = node.label || defaultLabel
+        } else {
+            l = node._def.label;
+            try {
+                l = (typeof l === "function" ? l.call(node) : l)||defaultLabel;
+            } catch(err) {
+                console.log("Definition error: "+node.type+".label",err);
+                l = defaultLabel;
+            }
+        }
+        return RED.text.bidi.enforceTextDirectionWithUCC(l);
     }
 
     return {
         createObjectElement: buildMessageElement,
-        validatePropertyExpression: validatePropertyExpression
+        getMessageProperty: getMessageProperty,
+        normalisePropertyExpression: normalisePropertyExpression,
+        validatePropertyExpression: validatePropertyExpression,
+        getNodeIcon: getNodeIcon,
+        getNodeLabel: getNodeLabel,
     }
 })();

editor/js/ui/view.js

@@ -70,6 +70,9 @@ RED.view = (function() {
         "grey":   "#d3d3d3"
     }
 
+    var PORT_TYPE_INPUT = 1;
+    var PORT_TYPE_OUTPUT = 0;
+
     var outer = d3.select("#chart")
         .append("svg:svg")
         .attr("width", space_width)
@@ -84,6 +87,7 @@ RED.view = (function() {
         .append("svg:g")
         .on("dblclick.zoom", null)
         .append("svg:g")
+        .attr('class','innerCanvas')
         .on("mousemove", canvasMouseMove)
         .on("mousedown", canvasMouseDown)
         .on("mouseup", canvasMouseUp)
@@ -202,38 +206,45 @@ RED.view = (function() {
         .attr("height", space_height)
         .attr("fill","#fff");
 
-    var gridScale = d3.scale.linear().range([0,space_width]).domain([0,space_width]);
     var grid = vis.append("g");
+    updateGrid();
 
-    grid.selectAll("line.horizontal").data(gridScale.ticks(space_width/gridSize)).enter()
-       .append("line")
-           .attr(
-           {
-               "class":"horizontal",
-               "x1" : 0,
-               "x2" : space_width,
-               "y1" : function(d){ return gridScale(d);},
-               "y2" : function(d){ return gridScale(d);},
-               "fill" : "none",
-               "shape-rendering" : "crispEdges",
-               "stroke" : "#eee",
-               "stroke-width" : "1px"
-           });
-    grid.selectAll("line.vertical").data(gridScale.ticks(space_width/gridSize)).enter()
-       .append("line")
-           .attr(
-           {
-               "class":"vertical",
-               "y1" : 0,
-               "y2" : space_width,
-               "x1" : function(d){ return gridScale(d);},
-               "x2" : function(d){ return gridScale(d);},
-               "fill" : "none",
-               "shape-rendering" : "crispEdges",
-               "stroke" : "#eee",
-               "stroke-width" : "1px"
-           });
-    grid.style("visibility","hidden");
+    function updateGrid() {
+        var gridTicks = [];
+        for (var i=0;i<space_width;i+=+gridSize) {
+            gridTicks.push(i);
+        }
+        grid.selectAll("line.horizontal").remove();
+        grid.selectAll("line.horizontal").data(gridTicks).enter()
+            .append("line")
+            .attr(
+                {
+                    "class":"horizontal",
+                    "x1" : 0,
+                    "x2" : space_width,
+                    "y1" : function(d){ return d;},
+                    "y2" : function(d){ return d;},
+                    "fill" : "none",
+                    "shape-rendering" : "crispEdges",
+                    "stroke" : "#eee",
+                    "stroke-width" : "1px"
+                });
+        grid.selectAll("line.vertical").remove();
+        grid.selectAll("line.vertical").data(gridTicks).enter()
+            .append("line")
+            .attr(
+                {
+                    "class":"vertical",
+                    "y1" : 0,
+                    "y2" : space_width,
+                    "x1" : function(d){ return d;},
+                    "x2" : function(d){ return d;},
+                    "fill" : "none",
+                    "shape-rendering" : "crispEdges",
+                    "stroke" : "#eee",
+                    "stroke-width" : "1px"
+                });
+    }
 
     var dragGroup = vis.append("g");
     var drag_lines = [];
@@ -384,6 +395,12 @@ RED.view = (function() {
                 }
             }
         });
+        $("#chart").focus(function() {
+            $("#workspace-tabs").addClass("workspace-focussed")
+        });
+        $("#chart").blur(function() {
+            $("#workspace-tabs").removeClass("workspace-focussed")
+        });
 
         RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
         RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});
@@ -398,21 +415,21 @@ RED.view = (function() {
 
         RED.actions.add("core:toggle-show-grid",function(state) {
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-view-show-grid");
+                RED.userSettings.toggle("view-show-grid");
             } else {
                 toggleShowGrid(state);
             }
         });
         RED.actions.add("core:toggle-snap-grid",function(state) {
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-view-snap-grid");
+                RED.userSettings.toggle("view-snap-grid");
             } else {
                 toggleSnapGrid(state);
             }
         });
         RED.actions.add("core:toggle-status",function(state) {
             if (state === undefined) {
-                RED.menu.toggleSelected("menu-item-status");
+                RED.userSettings.toggle("view-node-status");
             } else {
                 toggleStatus(state);
             }
@@ -465,7 +482,7 @@ RED.view = (function() {
                 try {
                     nn._def.onadd.call(nn);
                 } catch(err) {
-                    console.log("onadd:",err);
+                    console.log("Definition error: "+nn.type+".onadd:",err);
                 }
             }
         } else {
@@ -475,6 +492,7 @@ RED.view = (function() {
         }
 
         nn.changed = true;
+        nn.moved = true;
 
         nn.w = node_width;
         nn.h = Math.max(node_height,(nn.outputs||0) * 15);
@@ -542,11 +560,11 @@ RED.view = (function() {
                                 var drag_line = drag_lines[0];
                                 var src = null,dst,src_port;
 
-                                if (drag_line.portType === 0 && nn.inputs > 0) {
+                                if (drag_line.portType === PORT_TYPE_OUTPUT && nn.inputs > 0) {
                                     src = drag_line.node;
                                     src_port = drag_line.port;
                                     dst = nn;
-                                } else if (drag_line.portType === 1 && nn.outputs > 0) {
+                                } else if (drag_line.portType === PORT_TYPE_INPUT && nn.outputs > 0) {
                                     src = nn;
                                     dst = drag_line.node;
                                     src_port = 0;
@@ -556,10 +574,10 @@ RED.view = (function() {
                                     RED.nodes.addLink(link);
                                     historyEvent.links = [link];
                                     hideDragLines();
-                                    if (drag_line.portType === 0 && nn.outputs > 0) {
-                                        showDragLines([{node:nn,port:0,portType:0}]);
-                                    } else if (drag_line.portType === 1 && nn.inputs > 0) {
-                                        showDragLines([{node:nn,port:0,portType:1}]);
+                                    if (drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) {
+                                        showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
+                                    } else if (drag_line.portType === PORT_TYPE_INPUT && nn.inputs > 0) {
+                                        showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
                                     } else {
                                         resetMouseVars();
                                     }
@@ -569,9 +587,9 @@ RED.view = (function() {
                                 }
                             } else {
                                 if (nn.outputs > 0) {
-                                    showDragLines([{node:nn,port:0,portType:0}]);
+                                    showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
                                 } else if (nn.inputs > 0) {
-                                    showDragLines([{node:nn,port:0,portType:1}]);
+                                    showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
                                 } else {
                                     resetMouseVars();
                                 }
@@ -671,18 +689,18 @@ RED.view = (function() {
                     var links = [];
                     var existingLinks = [];
                     if (selected_link &&
-                        ((mousedown_port_type === 0 &&
+                        ((mousedown_port_type === PORT_TYPE_OUTPUT &&
                             selected_link.source === mousedown_node &&
                             selected_link.sourcePort === mousedown_port_index
                         ) ||
-                        (mousedown_port_type === 1 &&
+                        (mousedown_port_type === PORT_TYPE_INPUT &&
                             selected_link.target === mousedown_node
                         ))
                     ) {
                         existingLinks = [selected_link];
                     } else {
                         var filter;
-                        if (mousedown_port_type === 0) {
+                        if (mousedown_port_type === PORT_TYPE_OUTPUT) {
                             filter = {
                                 source:mousedown_node,
                                 sourcePort: mousedown_port_index
@@ -699,9 +717,9 @@ RED.view = (function() {
                         RED.nodes.removeLink(link);
                         links.push({
                             link:link,
-                            node: (mousedown_port_type===0)?link.target:link.source,
-                            port: (mousedown_port_type===0)?0:link.sourcePort,
-                            portType: (mousedown_port_type===0)?1:0
+                            node: (mousedown_port_type===PORT_TYPE_OUTPUT)?link.target:link.source,
+                            port: (mousedown_port_type===PORT_TYPE_OUTPUT)?0:link.sourcePort,
+                            portType: (mousedown_port_type===PORT_TYPE_OUTPUT)?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT
                         })
                     }
                     if (links.length === 0) {
@@ -722,11 +740,11 @@ RED.view = (function() {
             mousePos = mouse_position;
             for (i=0;i<drag_lines.length;i++) {
                 var drag_line = drag_lines[i];
-                var numOutputs = (drag_line.portType === 0)?(drag_line.node.outputs || 1):1;
+                var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1;
                 var sourcePort = drag_line.port;
                 var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
 
-                var sc = (drag_line.portType === 0)?1:-1;
+                var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1;
 
                 var dy = mousePos[1]-(drag_line.node.y+portY);
                 var dx = mousePos[0]-(drag_line.node.x+sc*drag_line.node.w/2);
@@ -943,33 +961,38 @@ RED.view = (function() {
             if (moving_set.length > 0) {
                 var ns = [];
                 for (var j=0;j<moving_set.length;j++) {
-                    ns.push({n:moving_set[j].n,ox:moving_set[j].ox,oy:moving_set[j].oy,changed:moving_set[j].n.changed});
-                    moving_set[j].n.dirty = true;
-                    moving_set[j].n.changed = true;
+                    var n = moving_set[j];
+                    if (n.ox !== n.n.x || n.oy !== n.n.y) {
+                        ns.push({n:n.n,ox:n.ox,oy:n.oy,moved:n.n.moved});
+                        n.n.dirty = true;
+                        n.n.moved = true;
+                    }
                 }
-                historyEvent = {t:"move",nodes:ns,dirty:RED.nodes.dirty()};
-                if (activeSpliceLink) {
-                    // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp
-                    var spliceLink = d3.select(activeSpliceLink).data()[0];
-                    RED.nodes.removeLink(spliceLink);
-                    var link1 = {
-                        source:spliceLink.source,
-                        sourcePort:spliceLink.sourcePort,
-                        target: moving_set[0].n
-                    };
-                    var link2 = {
-                        source:moving_set[0].n,
-                        sourcePort:0,
-                        target: spliceLink.target
-                    };
-                    RED.nodes.addLink(link1);
-                    RED.nodes.addLink(link2);
-                    historyEvent.links = [link1,link2];
-                    historyEvent.removedLinks = [spliceLink];
-                    updateActiveNodes();
+                if (ns.length > 0) {
+                    historyEvent = {t:"move",nodes:ns,dirty:RED.nodes.dirty()};
+                    if (activeSpliceLink) {
+                        // TODO: DRY - droppable/nodeMouseDown/canvasMouseUp
+                        var spliceLink = d3.select(activeSpliceLink).data()[0];
+                        RED.nodes.removeLink(spliceLink);
+                        var link1 = {
+                            source:spliceLink.source,
+                            sourcePort:spliceLink.sourcePort,
+                            target: moving_set[0].n
+                        };
+                        var link2 = {
+                            source:moving_set[0].n,
+                            sourcePort:0,
+                            target: spliceLink.target
+                        };
+                        RED.nodes.addLink(link1);
+                        RED.nodes.addLink(link2);
+                        historyEvent.links = [link1,link2];
+                        historyEvent.removedLinks = [spliceLink];
+                        updateActiveNodes();
+                    }
+                    RED.nodes.dirty(true);
+                    RED.history.push(historyEvent);
                 }
-                RED.nodes.dirty(true);
-                RED.history.push(historyEvent);
             }
         }
         if (mouse_mode == RED.state.MOVING || mouse_mode == RED.state.MOVING_ACTIVE) {
@@ -1046,6 +1069,7 @@ RED.view = (function() {
         selected_link = null;
     }
 
+    var lastSelection = null;
     function updateSelection() {
         var selection = {};
 
@@ -1118,8 +1142,18 @@ RED.view = (function() {
             }
         }
 
-
-        RED.events.emit("view:selection-changed",selection);
+        var selectionJSON = activeWorkspace+":"+JSON.stringify(selection,function(key,value) {
+            if (key === 'nodes') {
+                return value.map(function(n) { return n.id })
+            } else if (key === 'link') {
+                return value.source.id+":"+value.sourcePort+":"+value.target.id;
+            }
+            return value;
+        });
+        if (selectionJSON !== lastSelection) {
+            lastSelection = selectionJSON;
+            RED.events.emit("view:selection-changed",selection);
+        }
     }
 
     function endKeyboardMove() {
@@ -1127,8 +1161,8 @@ RED.view = (function() {
         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,changed:moving_set[i].n.changed});
-                moving_set[i].n.changed = true;
+                ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy,moved:moving_set[i].n.moved});
+                moving_set[i].n.moved = true;
                 moving_set[i].n.dirty = true;
                 delete moving_set[i].ox;
                 delete moving_set[i].oy;
@@ -1151,7 +1185,7 @@ RED.view = (function() {
 
             for (var i=0;i<moving_set.length;i++) {
                 node = moving_set[i];
-                node.n.changed = true;
+                node.n.moved = true;
                 node.n.dirty = true;
                 if (node.ox == null && node.oy == null) {
                     node.ox = node.n.x;
@@ -1293,15 +1327,20 @@ RED.view = (function() {
 
 
     function calculateTextWidth(str, className, offset) {
+        return calculateTextDimensions(str,className,offset,0)[0];
+    }
+
+    function calculateTextDimensions(str,className,offsetW,offsetH) {
         var sp = document.createElement("span");
         sp.className = className;
         sp.style.position = "absolute";
         sp.style.top = "-1000px";
-        sp.innerHTML = (str||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+        sp.textContent = (str||"");
         document.body.appendChild(sp);
         var w = sp.offsetWidth;
+        var h = sp.offsetHeight;
         document.body.removeChild(sp);
-        return offset+w;
+        return [offsetW+w,offsetH+h];
     }
 
     function resetMouseVars() {
@@ -1309,7 +1348,7 @@ RED.view = (function() {
         mouseup_node = null;
         mousedown_link = null;
         mouse_mode = 0;
-        mousedown_port_type = 0;
+        mousedown_port_type = PORT_TYPE_OUTPUT;
         activeSpliceLink = null;
         spliceActive = false;
         d3.select(".link_splice").classed("link_splice",false);
@@ -1366,7 +1405,7 @@ RED.view = (function() {
                         if (n.x-hw<mouse_position[0] && n.x+hw> mouse_position[0] &&
                             n.y-hh<mouse_position[1] && n.y+hh>mouse_position[1]) {
                                 mouseup_node = n;
-                                portType = mouseup_node.inputs>0?1:0;
+                                portType = mouseup_node.inputs>0?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT;
                                 portIndex = 0;
                         }
                     }
@@ -1386,11 +1425,11 @@ RED.view = (function() {
                 if (portType != drag_lines[i].portType && mouseup_node !== drag_lines[i].node) {
                     var drag_line = drag_lines[i];
                     var src,dst,src_port;
-                    if (drag_line.portType === 0) {
+                    if (drag_line.portType === PORT_TYPE_OUTPUT) {
                         src = drag_line.node;
                         src_port = drag_line.port;
                         dst = mouseup_node;
-                    } else if (drag_line.portType == 1) {
+                    } else if (drag_line.portType === PORT_TYPE_INPUT) {
                         src = mouseup_node;
                         dst = drag_line.node;
                         src_port = portIndex;
@@ -1427,10 +1466,10 @@ RED.view = (function() {
             if (mouse_mode === RED.state.QUICK_JOINING) {
                 if (addedLinks.length > 0) {
                     hideDragLines();
-                    if (portType === 1 && d.outputs > 0) {
-                        showDragLines([{node:d,port:0,portType:0}]);
-                    } else if (portType === 0 && d.inputs > 0) {
-                        showDragLines([{node:d,port:0,portType:1}]);
+                    if (portType === PORT_TYPE_INPUT && d.outputs > 0) {
+                        showDragLines([{node:d,port:0,portType:PORT_TYPE_OUTPUT}]);
+                    } else if (portType === PORT_TYPE_OUTPUT && d.inputs > 0) {
+                        showDragLines([{node:d,port:0,portType:PORT_TYPE_INPUT}]);
                     } else {
                         resetMouseVars();
                     }
@@ -1446,6 +1485,106 @@ RED.view = (function() {
         }
     }
 
+    var portLabelHoverTimeout = null;
+    var portLabelHover = null;
+
+
+    function getElementPosition(node) {
+        var d3Node = d3.select(node);
+        if (d3Node.attr('class') === 'innerCanvas') {
+            return [0,0];
+        }
+        var result = [];
+        var localPos = [0,0];
+        if (node.nodeName.toLowerCase() === 'g') {
+            var transform = d3Node.attr("transform");
+            if (transform) {
+                localPos = d3.transform(transform).translate;
+            }
+        } else {
+            localPos = [d3Node.attr("x")||0,d3Node.attr("y")||0];
+        }
+        var parentPos = getElementPosition(node.parentNode);
+        return [localPos[0]+parentPos[0],localPos[1]+parentPos[1]]
+
+    }
+
+    function getPortLabel(node,portType,portIndex) {
+        var result;
+        var nodePortLabels = (portType === PORT_TYPE_INPUT)?node.inputLabels:node.outputLabels;
+        if (nodePortLabels && nodePortLabels[portIndex]) {
+            return nodePortLabels[portIndex];
+        }
+        var portLabels = (portType === PORT_TYPE_INPUT)?node._def.inputLabels:node._def.outputLabels;
+        if (typeof portLabels === 'string') {
+            result = portLabels;
+        } else if (typeof portLabels === 'function') {
+            try {
+                result = portLabels.call(node,portIndex);
+            } catch(err) {
+                console.log("Definition error: "+node.type+"."+((portType === PORT_TYPE_INPUT)?"inputLabels":"outputLabels"),err);
+                result = null;
+            }
+        } else if ($.isArray(portLabels)) {
+            result = portLabels[portIndex];
+        }
+        return result;
+    }
+    function portMouseOver(port,d,portType,portIndex) {
+        clearTimeout(portLabelHoverTimeout);
+        var active = (mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== portType));
+        if (active && ((portType === PORT_TYPE_INPUT && ((d._def && d._def.inputLabels)||d.inputLabels)) || (portType === PORT_TYPE_OUTPUT && ((d._def && d._def.outputLabels)||d.outputLabels)))) {
+            portLabelHoverTimeout = setTimeout(function() {
+                var tooltip = getPortLabel(d,portType,portIndex);
+                if (!tooltip) {
+                    return;
+                }
+                var pos = getElementPosition(port.node());
+                portLabelHoverTimeout = null;
+                portLabelHover = vis.append("g")
+                    .attr("transform","translate("+(pos[0]+(portType===PORT_TYPE_INPUT?-2:12))+","+(pos[1]+5)+")")
+                    .attr("class","port_tooltip");
+                var lines = tooltip.split("\n");
+                var labelWidth = 0;
+                var labelHeight = 4;
+                var labelHeights = [];
+                lines.forEach(function(l) {
+                    var labelDimensions = calculateTextDimensions(l, "port_tooltip_label", 8,0);
+                    labelWidth = Math.max(labelWidth,labelDimensions[0]);
+                    labelHeights.push(0.8*labelDimensions[1]);
+                    labelHeight += 0.8*labelDimensions[1];
+                });
+
+                var labelHeight1 = (labelHeight/2)-5-2;
+                var labelHeight2 = labelHeight - 4;
+                portLabelHover.append("path").attr("d",
+                    portType===PORT_TYPE_INPUT?
+                        "M0 0 l -5 -5 v -"+(labelHeight1)+" q 0 -2 -2 -2 h -"+labelWidth+" q -2 0 -2 2 v "+(labelHeight2)+" q 0 2 2 2 h "+labelWidth+" q 2 0 2 -2 v -"+(labelHeight1)+" l 5 -5"
+                        :
+                        "M0 0 l 5 -5 v -"+(labelHeight1)+" q 0 -2 2 -2 h "+labelWidth+" q 2 0 2 2 v "+(labelHeight2)+" q 0 2 -2 2 h -"+labelWidth+" q -2 0 -2 -2 v -"+(labelHeight1)+" l -5 -5"
+                    );
+                var y = -labelHeight/2-2;
+                lines.forEach(function(l,i) {
+                    y += labelHeights[i];
+                    portLabelHover.append("svg:text").attr("class","port_tooltip_label")
+                        .attr("x", portType===PORT_TYPE_INPUT?-10:10)
+                        .attr("y", y)
+                        .attr("text-anchor",portType===PORT_TYPE_INPUT?"end":"start")
+                        .text(l)
+                });
+            },500);
+        }
+        port.classed("port_hovered",active);
+    }
+    function portMouseOut(port,d,portType,portIndex) {
+        clearTimeout(portLabelHoverTimeout);
+        if (portLabelHover) {
+            portLabelHover.remove();
+            portLabelHover = null;
+        }
+        port.classed("port_hovered",false);
+    }
+
     function nodeMouseUp(d) {
         if (dblClickPrimed && mousedown_node == d && clickElapsed > 0 && clickElapsed < 750) {
             mouse_mode = RED.state.DEFAULT;
@@ -1560,8 +1699,20 @@ RED.view = (function() {
         d3.event.stopPropagation();
     }
 
+    function isButtonEnabled(d) {
+        var buttonEnabled = true;
+        if (d._def.button.hasOwnProperty('enabled')) {
+            if (typeof d._def.button.enabled === "function") {
+                buttonEnabled = d._def.button.enabled.call(d);
+            } else {
+                buttonEnabled = d._def.button.enabled;
+            }
+        }
+        return buttonEnabled;
+    }
+
     function nodeButtonClicked(d) {
-        if (!activeSubflow && !d.changed) {
+        if (!activeSubflow) {
             if (d._def.button.toggle) {
                 d[d._def.button.toggle] = !d[d._def.button.toggle];
                 d.dirty = true;
@@ -1576,8 +1727,6 @@ RED.view = (function() {
             if (d.dirty) {
                 redraw();
             }
-        } else if (d.changed) {
-            RED.notify(RED._("notification.warning", {message:RED._("notification.warnings.undeployedChanges")}),"warning");
         } else {
             RED.notify(RED._("notification.warning", {message:RED._("notification.warnings.nodeActionDisabled")}),"warning");
         }
@@ -1640,13 +1789,13 @@ RED.view = (function() {
                             nodeMouseUp.call(this,d);
                     });
 
-                outGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10).attr("x",-5).attr("y",15)
-                    .on("mousedown", function(d,i){portMouseDown(d,1,0);} )
-                    .on("touchstart", function(d,i){portMouseDown(d,1,0);} )
-                    .on("mouseup", function(d,i){portMouseUp(d,1,0);})
-                    .on("touchend",function(d,i){portMouseUp(d,1,0);} )
-                    .on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 1)));})
-                    .on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
+                outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                    .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
+                    .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
+                    .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
+                    .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);} )
+                    .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
+                    .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
 
                 outGroup.append("svg:text").attr("class","port_label").attr("x",20).attr("y",8).style("font-size","10px").text("output");
                 outGroup.append("svg:text").attr("class","port_label port_index").attr("x",20).attr("y",24).text(function(d,i){ return i+1});
@@ -1683,13 +1832,15 @@ RED.view = (function() {
                             nodeMouseUp.call(this,d);
                     });
 
-                inGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10).attr("x",35).attr("y",15)
-                    .on("mousedown", function(d,i){portMouseDown(d,0,i);} )
-                    .on("touchstart", function(d,i){portMouseDown(d,0,i);} )
-                    .on("mouseup", function(d,i){portMouseUp(d,0,i);})
-                    .on("touchend",function(d,i){portMouseUp(d,0,i);} )
-                    .on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 0) ));})
-                    .on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
+                inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+                    .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
+                    .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
+                    .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
+                    .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);} )
+                    .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);})
+                    .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);});
+
+
                 inGroup.append("svg:text").attr("class","port_label").attr("x",18).attr("y",20).style("font-size","10px").text("input");
 
 
@@ -1730,18 +1881,11 @@ RED.view = (function() {
                     var node = d3.select(this);
                     var isLink = d.type === "link in" || d.type === "link out";
                     node.attr("id",d.id);
-                    var l = d._def.label;
-                    try {
-                        l = (typeof l === "function" ? l.call(d) : l)||"";
-                    } catch(err) {
-                        console.log("Definition error: "+d.type+".label",err);
-                        l = d.type;
-                    }
-
+                    var l = RED.utils.getNodeLabel(d);
                     if (isLink) {
                         d.w = node_height;
                     } else {
-                        d.w = Math.max(node_width,gridSize*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/gridSize)) );
+                        d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
                     }
                     d.h = Math.max(node_height,(d.outputs||0) * 15);
 
@@ -1775,10 +1919,10 @@ RED.view = (function() {
                             .attr("height",node_height-12)
                             .attr("fill",function(d) { return d._def.color;})
                             .attr("cursor","pointer")
-                            .on("mousedown",function(d) {if (!lasso && !d.changed) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
-                            .on("mouseup",function(d) {if (!lasso && !d.changed) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
-                            .on("mouseover",function(d) {if (!lasso && !d.changed) { d3.select(this).attr("fill-opacity",0.4);}})
-                            .on("mouseout",function(d) {if (!lasso  && !d.changed) {
+                            .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
+                            .on("mouseup",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
+                            .on("mouseover",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);}})
+                            .on("mouseout",function(d) {if (!lasso && isButtonEnabled(d)) {
                                 var op = 1;
                                 if (d._def.button.toggle) {
                                     op = d[d._def.button.toggle]?1:0.2;
@@ -1832,7 +1976,7 @@ RED.view = (function() {
                    //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none");
 
                     if (d._def.icon) {
-
+                        var icon_url = RED.utils.getNodeIcon(d._def,d);
                         var icon_group = node.append("g")
                             .attr("class","node_icon_group")
                             .attr("x",0).attr("y",0);
@@ -1847,7 +1991,7 @@ RED.view = (function() {
                             .attr("height",function(d){return Math.min(50,d.h-4);});
 
                         var icon = icon_group.append("image")
-                            .attr("xlink:href","icons/"+d._def.icon)
+                            .attr("xlink:href",icon_url)
                             .attr("class","node_icon")
                             .attr("x",0)
                             .attr("width","30")
@@ -1878,7 +2022,7 @@ RED.view = (function() {
                         //}
 
                         var img = new Image();
-                        img.src = "icons/"+d._def.icon;
+                        img.src = icon_url;
                         img.onload = function() {
                             icon.attr("width",Math.min(img.width,30));
                             icon.attr("height",Math.min(img.height,30));
@@ -1915,8 +2059,10 @@ RED.view = (function() {
                     //node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
 
                     //node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
-                    node.append("image").attr("class","node_error hidden").attr("xlink:href","icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
-                    node.append("image").attr("class","node_changed hidden").attr("xlink:href","icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
+
+                    //TODO: these ought to be SVG
+                    node.append("image").attr("class","node_error hidden").attr("xlink:href","icons/node-red/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
+                    node.append("image").attr("class","node_changed hidden").attr("xlink:href","icons/node-red/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
             });
 
             node.each(function(d,i) {
@@ -1925,15 +2071,9 @@ RED.view = (function() {
                         dirtyNodes[d.id] = d;
                         //if (d.x < -50) deleteSelection();  // Delete nodes if dragged back to palette
                         if (!isLink && d.resize) {
-                            var l = d._def.label;
-                            try {
-                                l = (typeof l === "function" ? l.call(d) : l)||"";
-                            } catch(err) {
-                                console.log("Definition error: "+d.type+".label",err);
-                                l = d.type;
-                            }
+                            var l = RED.utils.getNodeLabel(d);
                             var ow = d.w;
-                            d.w = Math.max(node_width,gridSize*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/gridSize)) );
+                            d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
                             d.h = Math.max(node_height,(d.outputs||0) * 15);
                             d.x += (d.w-ow)/2;
                             d.resize = false;
@@ -1965,12 +2105,12 @@ RED.view = (function() {
                             } else if (d.inputs === 1 && inputPorts.empty()) {
                                 var inputGroup = thisNode.append("g").attr("class","port_input");
                                 inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
-                                    .on("mousedown",function(d){portMouseDown(d,1,0);})
-                                    .on("touchstart",function(d){portMouseDown(d,1,0);})
-                                    .on("mouseup",function(d){portMouseUp(d,1,0);} )
-                                    .on("touchend",function(d){portMouseUp(d,1,0);} )
-                                    .on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 1) ));})
-                                    .on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
+                                    .on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
+                                    .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
+                                    .on("mouseup",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} )
+                                    .on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} )
+                                    .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
+                                    .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
                             }
 
                             var numOutputs = d.outputs;
@@ -1980,12 +2120,12 @@ RED.view = (function() {
                             var output_group = d._ports.enter().append("g").attr("class","port_output");
 
                             output_group.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
-                                .on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,0,i);}})() )
-                                .on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,0,i);}})() )
-                                .on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,0,i);}})() )
-                                .on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,0,i);}})() )
-                                .on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 0) ));})
-                                .on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
+                                .on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
+                                .on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
+                                .on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
+                                .on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
+                                .on("mouseover",(function(){var node = d; return function(d,i){portMouseOver(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})())
+                                .on("mouseout",(function(){var node = d; return function(d,i) {portMouseOut(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})());
 
                             d._ports.exit().remove();
                             if (d._ports) {
@@ -2032,21 +2172,11 @@ RED.view = (function() {
                             if (d._def.icon) {
                                 icon = thisNode.select(".node_icon");
                                 var current_url = icon.attr("xlink:href");
-                                var icon_url;
-                                if (typeof d._def.icon == "function") {
-                                    try {
-                                        icon_url = d._def.icon.call(d);
-                                    } catch(err) {
-                                        console.log("icon",err);
-                                        icon_url = "arrow-in.png";
-                                    }
-                                } else {
-                                    icon_url = d._def.icon;
-                                }
-                                if ("icons/"+icon_url != current_url) {
-                                    icon.attr("xlink:href","icons/"+icon_url);
+                                var new_url = RED.utils.getNodeIcon(d._def,d);
+                                if (new_url !== current_url) {
+                                    icon.attr("xlink:href",new_url);
                                     var img = new Image();
-                                    img.src = "icons/"+d._def.icon;
+                                    img.src = new_url;
                                     img.onload = function() {
                                         icon.attr("width",Math.min(img.width,30));
                                         icon.attr("height",Math.min(img.height,30));
@@ -2060,10 +2190,10 @@ RED.view = (function() {
 
                             thisNode.selectAll(".node_changed")
                                 .attr("x",function(d){return d.w-10})
-                                .classed("hidden",function(d) { return !d.changed; });
+                                .classed("hidden",function(d) { return !(d.changed||d.moved); });
 
                             thisNode.selectAll(".node_error")
-                                .attr("x",function(d){return d.w-10-(d.changed?13:0)})
+                                .attr("x",function(d){return d.w-10-((d.changed||d.moved)?13:0)})
                                 .classed("hidden",function(d) { return d.valid; });
 
                             thisNode.selectAll(".port_input").each(function(d,i) {
@@ -2076,10 +2206,10 @@ RED.view = (function() {
                             thisNode.selectAll(".node_icon_shade_border").attr("d",function(d){ return "M "+(("right" == d._def.align) ?0:30)+" 1 l 0 "+(d.h-2)});
 
                             thisNode.selectAll(".node_button").attr("opacity",function(d) {
-                                return (activeSubflow||d.changed)?0.4:1
+                                return (activeSubflow||!isButtonEnabled(d))?0.4:1
                             });
                             thisNode.selectAll(".node_button_button").attr("cursor",function(d) {
-                                return (activeSubflow||d.changed)?"":"pointer";
+                                return (activeSubflow||!isButtonEnabled(d))?"":"pointer";
                             });
                             thisNode.selectAll(".node_right_button").attr("transform",function(d){
                                     var x = d.w-6;
@@ -2227,10 +2357,10 @@ RED.view = (function() {
                         d.x2 = d.target.x-d.target.w/2;
                         d.y2 = d.target.y;
 
-                        return "M "+(d.source.x+d.source.w/2)+" "+(d.source.y+y)+
-                            " C "+(d.source.x+d.source.w/2+scale*node_width)+" "+(d.source.y+y+scaleY*node_height)+" "+
-                            (d.target.x-d.target.w/2-scale*node_width)+" "+(d.target.y-scaleY*node_height)+" "+
-                            (d.target.x-d.target.w/2)+" "+d.target.y;
+                        return "M "+d.x1+" "+d.y1+
+                            " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
+                            (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
+                            d.x2+" "+d.y2;
                     });
                 }
             })
@@ -2433,6 +2563,7 @@ RED.view = (function() {
                         node = new_ms[i];
                         node.n.selected = true;
                         node.n.changed = true;
+                        node.n.moved = true;
                         node.n.x -= dx - mouse_position[0];
                         node.n.y -= dy - mouse_position[1];
                         node.dx = node.n.x - mouse_position[0];
@@ -2450,7 +2581,7 @@ RED.view = (function() {
                             try {
                                 node.n._def.onadd.call(node.n);
                             } catch(err) {
-                                console.log("onadd:",err);
+                                console.log("Definition error: "+node.n.type+".onadd:",err);
                             }
                         }
 
@@ -2631,6 +2762,14 @@ RED.view = (function() {
                     RED.sidebar.config.show(id);
                 }
             }
+        },
+        gridSize: function(v) {
+            if (v === undefined) {
+                return gridSize;
+            } else {
+                gridSize = v;
+                updateGrid();
+            }
         }
 
     };

editor/js/ui/workspaces.js

@@ -28,9 +28,9 @@ RED.workspaces = (function() {
             var tabId = RED.nodes.id();
             do {
                 workspaceIndex += 1;
-            } while($("#workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
+            } while ($("#workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
 
-            ws = {type:"tab",id:tabId,label:RED._('workspace.defaultName',{number:workspaceIndex})};
+            ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})};
             RED.nodes.addWorkspace(ws);
             workspace_tabs.addTab(ws);
             workspace_tabs.activateTab(tabId);
@@ -39,6 +39,7 @@ RED.workspaces = (function() {
                 RED.nodes.dirty(true);
             }
         }
+        RED.view.focus();
         return ws;
     }
     function deleteWorkspace(ws) {
@@ -58,6 +59,7 @@ RED.workspaces = (function() {
     function showRenameWorkspaceDialog(id) {
         var workspace = RED.nodes.workspace(id);
         RED.view.state(RED.state.EDITING);
+        var tabflowEditor;
         var trayOptions = {
             title: RED._("workspace.editFlow",{name:workspace.label}),
             buttons: [
@@ -83,10 +85,30 @@ RED.workspaces = (function() {
                     text: RED._("common.label.done"),
                     click: function() {
                         var label = $( "#node-input-name" ).val();
+                        var changed = false;
+                        var changes = {};
                         if (workspace.label != label) {
-                            var changes = {
-                                label:workspace.label
-                            }
+                            changes.label = workspace.label;
+                            changed = true;
+                            workspace.label = label;
+                            workspace_tabs.renameTab(workspace.id,label);
+                        }
+                        var disabled = $("#node-input-disabled").prop("checked");
+                        if (workspace.disabled !== disabled) {
+                            changes.disabled = workspace.disabled;
+                            changed = true;
+                            workspace.disabled = disabled;
+                        }
+                        var info = tabflowEditor.getValue();
+                        if (workspace.info !== info) {
+                            changes.info = workspace.info;
+                            changed = true;
+                            workspace.info = info;
+                        }
+                        $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('workspace-disabled',workspace.disabled);
+                        // $("#workspace").toggleClass("workspace-disabled",workspace.disabled);
+
+                        if (changed) {
                             var historyEvent = {
                                 t: "edit",
                                 changes:changes,
@@ -95,14 +117,29 @@ RED.workspaces = (function() {
                             }
                             workspace.changed = true;
                             RED.history.push(historyEvent);
-                            workspace_tabs.renameTab(workspace.id,label);
                             RED.nodes.dirty(true);
                             RED.sidebar.config.refresh();
+                            var selection = RED.view.selection();
+                            if (!selection.nodes && !selection.links) {
+                                RED.sidebar.info.refresh(workspace);
+                            }
                         }
                         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")));
+                height -= 28;
+                $(".node-text-editor").css("height",height+"px");
+                tabflowEditor.resize();
+            },
             open: function(tray) {
                 var trayBody = tray.find('.editor-tray-body');
                 var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
@@ -110,16 +147,66 @@ RED.workspaces = (function() {
                     '<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>').appendTo(dialogForm);
+
+                $('<div class="form-row">'+
+                    '<label for="node-input-disabled-btn" data-i18n="editor:workspace.status"></label>'+
+                    '<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;"/>'+
+                '</div>').appendTo(dialogForm);
+
+                $('<div class="form-row node-text-editor-row">'+
+                    '<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
+                    '<div style="height:250px;" class="node-text-editor" id="node-input-info"></div>'+
+                '</div>').appendTo(dialogForm);
+                tabflowEditor = RED.editor.createEditor({
+                    id: 'node-input-info',
+                    mode: 'ace/mode/markdown',
+                    value: ""
+                });
+
+                $('<div class="form-tips" data-i18n="editor:workspace.tip"></div>').appendTo(dialogForm);
+
+                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").html(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").html(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").html(RED._("editor:workspace.disabled"));
+                    } else {
+                        $("#node-input-disabled-label").html(RED._("editor:workspace.enabled"));
+                    }
+                } else {
+                    workspace.disabled = false;
+                    $("#node-input-disabled-label").html(RED._("editor:workspace.enabled"));
+                }
+
                 $('<input type="text" style="display: none;" />').prependTo(dialogForm);
                 dialogForm.submit(function(e) { e.preventDefault();});
                 $("#node-input-name").val(workspace.label);
-                RED.text.bidi.prepareInput($("#node-input-name"))
+                RED.text.bidi.prepareInput($("#node-input-name"));
+                tabflowEditor.getSession().setValue(workspace.info || "", -1);
                 dialogForm.i18n();
             },
             close: function() {
                 if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
                     RED.view.state(RED.state.DEFAULT);
                 }
+                RED.sidebar.info.refresh(workspace);
+                tabflowEditor.destroy();
             }
         }
         RED.tray.show(trayOptions);
@@ -127,7 +214,7 @@ RED.workspaces = (function() {
 
 
     var workspace_tabs;
-    function createWorkspaceTabs(){
+    function createWorkspaceTabs() {
         workspace_tabs = RED.tabs.create({
             id: "workspace-tabs",
             onchange: function(tab) {
@@ -136,9 +223,14 @@ RED.workspaces = (function() {
                 }
                 activeWorkspace = tab.id;
                 event.workspace = activeWorkspace;
+                // $("#workspace").toggleClass("workspace-disabled",tab.disabled);
                 RED.events.emit("workspace:change",event);
                 window.location.hash = 'flow/'+tab.id;
                 RED.sidebar.config.refresh();
+                RED.view.focus();
+            },
+            onclick: function(tab) {
+                RED.view.focus();
             },
             ondblclick: function(tab) {
                 if (tab.type != "subflow") {
@@ -148,6 +240,10 @@ RED.workspaces = (function() {
                 }
             },
             onadd: function(tab) {
+                $('<span class="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.menu.setDisabled("menu-item-workspace-delete",workspace_tabs.count() == 1);
             },
             onremove: function(tab) {

editor/js/user.js

@@ -32,7 +32,7 @@ RED.user = (function() {
             autoOpen: false,
             dialogClass: "ui-dialog-no-close",
             modal: true,
-            closeOnEscape: false,
+            closeOnEscape: !!opts.cancelable,
             width: 600,
             resizable: false,
             draggable: false
@@ -43,18 +43,14 @@ RED.user = (function() {
             dataType: "json",
             url: "auth/login",
             success: function(data) {
-                if (data.type == "credentials") {
-                    var i=0;
+                var i=0;
+
+                if (data.type == "credentials") {
 
-                    if (data.image) {
-                        $("#node-dialog-login-image").attr("src",data.image);
-                    } else {
-                        $("#node-dialog-login-image").attr("src","red/images/node-red-256.png");
-                    }
                     for (;i<data.prompts.length;i++) {
                         var field = data.prompts[i];
-                        var row = $("<div/>",{id:"rrr"+i,class:"form-row"});
-                        $('<label for="node-dialog-login-'+field.id+'">'+field.label+':</label><br/>').appendTo(row);
+                        var row = $("<div/>",{class:"form-row"});
+                        $('<label for="node-dialog-login-'+field.id+'">'+RED._(field.label)+':</label><br/>').appendTo(row);
                         var input = $('<input style="width: 100%" id="node-dialog-login-'+field.id+'" type="'+field.type+'" tabIndex="'+(i+1)+'"/>').appendTo(row);
 
                         if (i<data.prompts.length-1) {
@@ -112,26 +108,72 @@ RED.user = (function() {
                         });
                         event.preventDefault();
                     });
-                    if (opts.cancelable) {
-                        $("#node-dialog-login-cancel").button().click(function( event ) {
-                            $("#node-dialog-login").dialog('destroy').remove();
+
+                } else if (data.type == "strategy") {
+                    i = 0;
+                    for (;i<data.prompts.length;i++) {
+                        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() {
+                            document.location = field.url;
                         });
+                        if (field.image) {
+                            $("<img>",{src:field.image}).appendTo(loginButton);
+                        } else if (field.label) {
+                            var label = $('<span></span>').text(field.label);
+                            if (field.icon) {
+                                $('<i></i>',{class: "fa fa-2x "+field.icon, style:"vertical-align: middle"}).appendTo(loginButton);
+                                label.css({
+                                    "verticalAlign":"middle",
+                                    "marginLeft":"8px"
+                                });
+
+                            }
+                            label.appendTo(loginButton);
+                        }
+                        loginButton.button();
                     }
+
+
                 }
-                dialog.dialog("open");
+                if (opts.cancelable) {
+                    $("#node-dialog-login-cancel").button().click(function( event ) {
+                        $("#node-dialog-login").dialog('destroy').remove();
+                    });
+                }
+
+                var loginImageSrc = data.image || "red/images/node-red-256.png";
+
+                $("#node-dialog-login-image").load(function() {
+                    dialog.dialog("open");
+                }).attr("src",loginImageSrc);
+
+
             }
         });
     }
 
     function logout() {
+        var tokens = RED.settings.get("auth-tokens");
+        var token = tokens?tokens.access_token:"";
         $.ajax({
             url: "auth/revoke",
             type: "POST",
-            data: {token:RED.settings.get("auth-tokens").access_token},
-            success: function() {
-                RED.settings.remove("auth-tokens");
+            data: {token:token}
+        }).done(function(data,textStatus,xhr) {
+            RED.settings.remove("auth-tokens");
+            if (data && data.redirect) {
+                document.location.href = data.redirect;
+            } else {
                 document.location.reload(true);
             }
+        }).fail(function(jqXHR,textStatus,errorThrown) {
+            if (jqXHR.status === 401) {
+                document.location.reload(true);
+            } else {
+                console.log(textStatus);
+            }
         })
     }
 
@@ -170,8 +212,15 @@ RED.user = (function() {
         if (RED.settings.user) {
             if (!RED.settings.editorTheme || !RED.settings.editorTheme.hasOwnProperty("userMenu")) {
 
-                $('<li><a id="btn-usermenu" class="button hide" data-toggle="dropdown" href="#"><i class="fa fa-user"></i></a></li>')
+                var userMenu = $('<li><a id="btn-usermenu" class="button hide" data-toggle="dropdown" href="#"></a></li>')
                     .prependTo(".header-toolbar");
+                if (RED.settings.user.image) {
+                    $('<span class="user-profile"></span>').css({
+                        backgroundImage: "url("+RED.settings.user.image+")",
+                    }).appendTo(userMenu.find("a"));
+                } else {
+                    $('<i class="fa fa-user"></i>').appendTo(userMenu.find("a"));
+                }
 
                 RED.menu.init({id:"btn-usermenu",
                     options: []

editor/js/validators.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 RED.validators = {
-    number: function(){return function(v) { return v!=='' && !isNaN(v);}},
+    number: function(blankAllowed){return function(v) { return (blankAllowed&&(v===''||v===undefined)) || (v!=='' && !isNaN(v));}},
     regex: function(re){return function(v) { return re.test(v);}},
     typedInput: function(ptypeName,isConfig) { return function(v) {
         var ptype = $("#node-"+(isConfig?"config-":"")+"input-"+ptypeName).val() || this[ptypeName];

editor/sass/debug.scss

@@ -36,21 +36,81 @@
     top: 42px;
     left: 0px;
     right: 0px;
+    z-index: 20;
     background: #f9f9f9;
     padding: 10px;
     border-bottom: 1px solid #ddd;
     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 .debug-filter-row {
-    text-align: right;
+    .red-ui-nodeList {
+        margin: 10px 0;
+    }
 }
 
 .debug-message {
+    position: relative;
     border-bottom: 1px solid #eee;
     border-left: 8px solid #eee;
     border-right: 8px solid #eee;
     padding: 2px;
+    &>.debug-message-meta .debug-message-tools {
+        display: none;
+    }
+
+    &.debug-message-hover {
+        border-right-color: #999;
+        &>.debug-message-meta .debug-message-tools {
+            display: inline-block;
+        }
+    }
+    .debug-message-row {
+        .debug-message-tools-pin {
+            display: none;
+        }
+        &.debug-message-row-pinned .debug-message-tools-pin {
+            display: inline-block;
+        }
+        &:hover {
+            background: #f3f3f3;
+            &>.debug-message-tools {
+                .debug-message-tools-copy {
+                    display: inline-block;
+                }
+                .debug-message-tools-pin {
+                    display: inline-block;
+                }
+            }
+        }
+    }
 }
+.debug-message-meta .debug-message-tools {
+    .editor-button-small {
+        font-size: 11px;
+    }
+}
+.debug-message-tools {
+    .button-group:not(:last-child) {
+        margin-right: 3px;
+    }
+    .editor-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;
     font-size: 10px;
@@ -67,6 +127,14 @@
     padding: 1px 5px;
     color: #777;
 }
+.debug-message-tools {
+    position: absolute;
+    top: 3px;
+    right: 1px;
+    .debug-message-tools-copy {
+        display: none;
+    }
+}
 .debug-message-payload {
     display: block;
     padding: 2px;
@@ -85,9 +153,8 @@
     border-right-color: #f99;
 }
 .debug-message-object-entry {
+    position: relative;
     padding-left: 15px;
-    padding-bottom: 3px;
-    padding-top: 3px;
 }
 .debug-message-element {
     color: #333;
@@ -153,12 +220,17 @@
 .debug-message-type-number { color: #2033d6; };
 .debug-message-type-number-toggle { cursor: pointer;}
 
+.debug-message-row {
+    display: block;
+    padding: 4px 2px 2px;
+    position: relative;
+    &.debug-message-row-pinned {
+        background: #f6f6f6;
+    }
+}
 .debug-message-expandable {
     cursor: pointer;
 }
-.debug-message-expandable:hover {
-    background: #fefefe;
-}
 .debug-message-expandable:hover .debug-message-object-handle {
     color: #b72828 !important;
 }
@@ -183,3 +255,11 @@
 .debug-message-buffer-string > .debug-message-array-rows {
     display: none;
 }
+.debug-message-type-string-swatch {
+    display: inline-block;
+    width: 1.1em;
+    height: 0.9em;
+    vertical-align: middle;
+    border-radius: 3px;
+    margin: 0 4px;
+}

editor/sass/diff.scss

@@ -16,8 +16,6 @@
 
 
 #node-dialog-view-diff {
-    height: 600px;
-
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
@@ -35,7 +33,6 @@
             border: none;
             min-height: 0;
         }
-
     }
     .red-ui-editableList-item-content {
         padding: 5px;
@@ -44,19 +41,23 @@
 }
 #node-dialog-view-diff-headers {
     position: absolute;
-    left:17px;
-    right:32px;
+    left:237px;
+    right:18px;
     top: 55px;
     height: 25px;
-    .node-diff-node-entry-cell:not(:first-child) {
+    div {
+        height: 25px;
+        display: inline-block;
+        box-sizing: border-box;
+        width: 50%;
         background: #f9f9f9;
         text-align: center;
         border-top: 1px solid $secondary-border-color;
         border-color:$secondary-border-color;
+        border-left: 1px solid $secondary-border-color;
     }
-    .node-diff-node-entry-cell:last-child {
+    div:last-child {
         border-right: 1px solid $secondary-border-color;
-
     }
 }
 
@@ -106,10 +107,10 @@
     font-size: 0.9em;
 
     &:first-child {
-        border-top: 1px solid #eee;
+        border-top: 1px solid $secondary-border-color;
     }
     &:not(:last-child) {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid $secondary-border-color;
     }
 
     &.collapsed {
@@ -132,14 +133,21 @@
     table {
         border-collapse: collapse;
         table-layout:fixed;
-        
-        // Fix for table-layout: fixed on safari:
-        max-width: none;
-        width: auto;
-        min-width: 100%;
+        width: calc(100% - 20px);
+        margin-left: 20px;
+    }
+    col:first-child {
+        width: 180px;
+    }
+    col:not(:first-child) {
+        width: 100%;
     }
     td, th {
-        border: 1px solid $secondary-border-color;
+        border-top: 1px solid #f3f3f3;
+        border-left: 1px solid $secondary-border-color;
+        &:first-child {
+            border-left: none;
+        }
         padding: 0 0 0 3px;
         text-align: left;
         overflow-x: auto;
@@ -150,13 +158,12 @@
             white-space:nowrap;
             overflow:hidden;
         }
+        &:hover {
+            background: #f9f9f9;
+        }
+
     }
-    td:first-child {
-        width: 140px;
-    }
-    td:not(:first-child) {
-        width: calc( 100% - 140px);
-    }
+
     td  {
         .node-diff-status {
             margin-left: 0;
@@ -179,8 +186,8 @@
             width: 220px;
         }
     }
-    td:not(:first-child) {
-        width: calc( (100% - 140px) / 2);
+    col:not(:first-child) {
+        width:50%;
     }
 
     .node-diff-node-entry {
@@ -210,6 +217,9 @@
     cursor: pointer;
     padding: 0;
     // background: #f6f6f6;
+    &:hover {
+        background: #f9f9f9;
+    }
 }
 .node-diff-tab-title-meta {
     vertical-align: middle;
@@ -218,6 +228,9 @@
 }
 .node-diff-node-entry-header {
     cursor: pointer;
+    &:hover {
+        background: #f9f9f9;
+    }
 }
 .node-diff-node-entry-node {
     vertical-align: middle;
@@ -247,6 +260,9 @@
     }
     .node-diff-tab-title {
         cursor: default;
+        &:hover {
+            background: none;
+        }
     }
 }
 .node-diff-node-deleted {
@@ -301,7 +317,7 @@
     }
 }
 .node-diff-node-entry-properties {
-    margin: 5px ;
+    margin: 0;
     color: #666;
 }
 .node-diff-status {
@@ -313,6 +329,10 @@
     margin-bottom: 6px;
     text-align: center;
 }
+.node-diff-element {
+    display: inline-block;
+    width: calc(100% - 20px);
+}
 
 .node-diff-node-description {
     color: $form-text-color;
@@ -346,7 +366,7 @@
     box-sizing: border-box;
     width: calc( (100% - 20px) / 2);
     height: 32px;
-    border-left: 1px solid #eee;
+    border-left: 1px solid $secondary-border-color;
     padding-top: 2px;
     white-space: nowrap;
     overflow: hidden;

editor/sass/dragdrop.scss

@@ -23,6 +23,7 @@
     width: 100%;
     height: 100%;
     display: none;
+    z-index:100;
 }
 #dropTarget div {
     display: table-cell;
@@ -34,4 +35,3 @@
 #dropTarget div i {
     font-size: 80px;
 }
-

editor/sass/editor.scss

@@ -46,7 +46,16 @@
     overflow: auto;
 }
 .editor-tray-body {
-    margin: 20px;
+    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);
+    }
+}
+.editor-tray-content {
+    overflow: auto;
 }
 .editor-tray-header {
     @include disable-selection;
@@ -65,6 +74,13 @@
 .editor-tray-footer {
     @include component-footer;
     height: 35px;
+
+    button {
+        @include editor-button;
+        padding: 3px 7px;
+        font-size: 11px;
+    }
+
 }
 
 .editor-tray-toolbar {
@@ -72,48 +88,9 @@
     padding: 6px;
 
     button {
-        @include workspace-button;
-        font-size: 14px;
-        padding: 6px 14px;
-        margin-right: 8px;
-        color: $editor-button-color !important;
-        background: $editor-button-background;
-
-        &.primary {
-            border-color: $editor-button-background-primary;
-            color: $editor-button-color-primary !important;
-            background: $editor-button-background-primary;
-            &.disabled, &.ui-state-disabled {
-                background: none;
-                color: $editor-button-color !important;
-                border-color: $form-input-border-color;
-            }
-            &:not(.disabled):not(.ui-button-disabled):hover {
-                border-color: $editor-button-background-primary-hover;
-                background: $editor-button-background-primary-hover;
-                color: $editor-button-color-primary !important;
-            }
-        }
-        &:not(.disabled):hover {
-            //color: $editor-button-color;
-        }
-        &.disabled {
-            background: none;
-        }
-        &.disabled:focus {
-            outline: none;
-        }
-
-
-        &.leftButton {
-            float: left;
-            margin-top: 1px;
-        }
-        &:not(.leftButton):not(:last-child) {
-            margin-right: 16px;
-        }
-        &.ui-state-disabled {
-            opacity: 1;
+        @include editor-button;
+        &.toggle {
+            @include workspace-button-toggle;
         }
     }
 }
@@ -155,6 +132,11 @@
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
     box-shadow: -1px 0 6px rgba(0,0,0,0.1);
+
+    &.editor-tray-resize-maximised {
+        background: $background-color;
+        cursor: default;
+    }
 }
 .editor-tray-resize-button {
     @include workspace-button;
@@ -178,8 +160,7 @@
 }
 
 
-.dialog-form,#dialog-form, #dialog-config-form {
-    margin: 0;
+.dialog-form,#dialog-form, #node-config-dialog-edit-form {
     height: 100%;
 }
 
@@ -244,17 +225,6 @@
     padding: 0 5px;
 }
 
-.dialog-form {
-    .button-group {
-        .editor-button {
-            &:first-child {
-
-            }
-        }
-    }
-
-}
-
 #node-config-dialog-scope-container {
     cursor: auto;
     float: right;
@@ -282,3 +252,87 @@
     font-size: 12px;
     line-height: 35px;
 }
+.node-input-expression-editor #dialog-form {
+    margin: 0;
+    height: 100%;
+    .red-ui-panel {
+        &:first-child {
+            padding: 20px 20px 0;
+        }
+        &:last-child {
+            padding-bottom: 20px;
+        }
+    }
+}
+.node-input-expression-tab-content {
+    position: relative;
+    padding: 0 20px;
+}
+
+#node-input-expression-help {
+    position: absolute;
+    top: 35px;
+    left:0;
+    right: 0;
+    bottom:0;
+    padding: 0 20px;
+    overflow: auto;
+    box-sizing: border-box;
+}
+#node-input-expression-panel-info {
+    & > .form-row {
+        margin: 0;
+        & > div:first-child {
+            margin-top: 10px;
+        }
+    }
+}
+.node-input-expression-legacy, .node-input-buffer-type {
+    font-size: 0.8em;
+    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;
+    text-align: right;
+}
+
+#clipboard-hidden {
+    position: absolute;
+    top: -3000px;
+}
+.node-label-form-row {
+    margin: 5px 0;
+    label {
+        margin-right: 20px;
+        text-align: right;
+        width: 30px;
+    }
+    button {
+        margin-left: 10px;
+    }
+    input {
+        width: calc(100% - 100px);
+    }
+}
+.node-label-form-none {
+    span {
+        padding-left: 50px;
+        width: 100px;
+        color: #999;
+    }
+}
+
+.ace_read-only {
+    background: #eee !important;
+    .ace_cursor {
+       color: transparent !important;
+    }
+
+}

editor/sass/flow.scss

@@ -272,3 +272,25 @@ g.link_unknown path.link_line {
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
+
+@keyframes port_tooltip_fadeIn { from { opacity:0; } to { opacity:1; } }
+
+.port_tooltip {
+    opacity:0;
+    animation: 0.1s ease-in 0s 1 normal forwards port_tooltip_fadeIn;
+    pointer-events: none;
+
+    path {
+        fill: white;
+        stroke: #999;
+        stroke-width: 1;
+    }
+}
+.port_tooltip_label {
+    stroke-width: 0;
+    fill: #666;
+    font-size: 12px;
+    pointer-events: none;
+    -webkit-touch-callout: none;
+    @include disable-selection;
+}

editor/sass/header.scss

@@ -279,3 +279,13 @@ span.logo {
     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;
+}

editor/sass/keyboard.scss

@@ -19,31 +19,88 @@
     padding-top: 10px;
 
 }
+
+#user-settings-tab-keyboard .red-ui-editableList-container {
+    border-radius: 0;
+    border: none;
+    padding: 0;
+}
+
+
 .keyboard-shortcut-entry.keyboard-shortcut-list-header {
-    padding:0 30px 0 5px;
+    padding:0 5px 0 5px;
     div {
         color: #666 !important;
     }
+    .red-ui-searchBox-container {
+        width: calc(100% - 20px);
+    }
+    .keyboard-shortcut-entry-scope {
+        text-align: center;
+    }
 }
-#keyboard-shortcut-list {
+
+.keyboard-shortcut-list-header {
+    border-bottom: 1px solid $primary-border-color;
+
+}
+.keyboard-shortcut-list {
     position: absolute;
     top:30px;
     left:10px;
     right:10px;
     bottom:10px;
+    li {
+        padding: 0;
+        .red-ui-editableList-item-content {
+            padding: 8px;
+            cursor: pointer;
+        }
+    }
+    li:hover {
+        background: #f6f6f6;
+    }
 }
 .keyboard-shortcut-entry {
-    padding: 0px 20px 0 10px;
     div {
         display: inline-block;
     }
+    // white-space: nowrap;
+
+    select {
+        margin: 0;
+        width: calc(100% - 30px);
+        font-size: 0.9em;
+        margin-right: 5px;
+    }
 }
 .keyboard-shortcut-entry-key {
-    width:150px;
+    width:160px;
+    vertical-align: middle;
+    input {
+        margin:0;
+        width: calc(100% - 5px);
+    }
+}
+.keyboard-shortcut-entry-text {
+    vertical-align: middle;
+    width: calc(100% - 160px - 100px - 10px);
+    overflow: hidden;
+    i {
+        color: #ccc;
+        margin-right: 5px;
+    }
 }
 .keyboard-shortcut-entry-scope {
-    float: right;
+    width:100px;
     color: #999;
+    vertical-align: middle;
+    text-align: right;
+}
+.keyboard-shortcut-entry:not(.keyboard-shortcut-list-header) {
+    .keyboard-shortcut-entry-scope {
+        font-size: 0.8em;
+    }
 }
 .keyboard-shortcut-entry-unassigned {
     color: #999;
@@ -51,7 +108,21 @@
         font-style: italic;
     }
 }
-
+.keyboard-shortcut-entry-expanded {
+    .keyboard-shortcut-entry-key {
+        width: 150px;
+    }
+    .keyboard-shortcut-entry-text {
+    }
+    .keyboard-shortcut-entry-scope {
+        width: 110px;
+    }
+    span {
+        display: none;
+    }
+}
+.keyboard-shortcut-edit  {
+}
 .help-key {
     border: 1px solid #ddd;
     padding: 4px;

editor/sass/mixins.scss

@@ -80,12 +80,28 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }
+    .button-group-vertical & {
+        display: block;
+        min-width: 22px;
+    }
+    .button-group-vertical &:not(:first-child) {
+        border-top: none;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    .button-group-vertical &:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 
     &:focus {
         outline: 1px solid $workspace-button-color-focus-outline;
     }
 }
-
+.button-group-vertical {
+    display: inline-block;
+    vertical-align: middle;
+}
 .button-group:not(:last-child) {
     margin-right: 10px;
 }
@@ -108,7 +124,51 @@
         color: $workspace-button-toggle-color-disabled !important;
     }
 }
+@mixin editor-button {
+    @include workspace-button;
+    font-size: 14px;
+    padding: 6px 14px;
+    margin-right: 8px;
+    color: $editor-button-color !important;
+    background: $editor-button-background;
 
+    &.primary {
+        border-color: $editor-button-background-primary;
+        color: $editor-button-color-primary !important;
+        background: $editor-button-background-primary;
+        &.disabled, &.ui-state-disabled {
+            background: none;
+            color: $editor-button-color !important;
+            border-color: $form-input-border-color;
+        }
+        &:not(.disabled):not(.ui-button-disabled):hover {
+            border-color: $editor-button-background-primary-hover;
+            background: $editor-button-background-primary-hover;
+            color: $editor-button-color-primary !important;
+        }
+    }
+    &:not(.disabled):hover {
+        //color: $editor-button-color;
+    }
+    &.disabled {
+        background: none;
+    }
+    &.disabled:focus {
+        outline: none;
+    }
+
+
+    &.leftButton {
+        float: left;
+        margin-top: 1px;
+    }
+    &:not(.leftButton):not(:last-child) {
+        margin-right: 16px;
+    }
+    &.ui-state-disabled {
+        opacity: 1;
+    }
+}
 
 @mixin component-footer {
     border-top: 1px solid $primary-border-color;
@@ -164,4 +224,5 @@
     bottom: 0;
     right: 0;
     background: $shade-color;
+    z-index: 5;
 }

editor/sass/notifications.scss

@@ -32,6 +32,7 @@
     color: #666;
     border: 1px solid #325C80;
     border-left-width: 16px;
+    overflow: hidden;
 }
 .notification a {
     text-decoration: none;

editor/sass/palette-editor.scss

@@ -14,13 +14,16 @@
  * limitations under the License.
  **/
 
+#user-settings-tab-palette {
+    height: 100%;
+}
+
 #palette-editor {
     text-align: left;
-    display: none;
     position: absolute;
     top: 0px;
     right: 0;
-    bottom: 25px;
+    bottom: 0;
     left:0;
     padding: 0;
     box-sizing:border-box;
@@ -51,7 +54,7 @@
 
             }
             .red-ui-editableList-item-content {
-                padding: 12px 8px;
+                padding: 12px 16px;
             }
             &:last-child {
                 // border-bottom: 1px solid $primary-border-color;
@@ -61,7 +64,7 @@
     }
     .palette-editor-tab {
         position:absolute;
-        top:115px;
+        top:35px;
         left:0;
         right:0;
         bottom:0

editor/sass/palette.scss

@@ -114,16 +114,18 @@
 }
 .palette_label {
     font-size: 13px;
-    margin: 4px 0 4px 28px;
+    margin: 4px 0 4px 32px;
     line-height: 20px;
     overflow: hidden;
     text-align: center;
+    @include disable-selection;
 }
 .palette_label_right {
-    margin: 4px 28px 4px 0;
+    margin: 4px 32px 4px 0;
 }
 
 .palette_node {
+    display: block;
     cursor:move;
     background: #ddd;
     margin: 10px auto;
@@ -185,3 +187,22 @@
     background-size: contain;
     background-repeat: no-repeat;
 }
+
+.palette_node_small {
+    display: inline-block;
+    position: relative;
+    width: 18px;
+    height: 15px;
+    margin: 3px 0px;
+    vertical-align: middle;
+    cursor: default;
+
+    .palette_icon_container {
+        width: 18px;
+        border-right: none;
+    }
+    .palette_icon {
+        margin-left: -1px;
+        width: 15px;
+    }
+}

editor/sass/panels.scss

@@ -0,0 +1,40 @@
+/**
+ * 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-panels {
+    position: relative;
+
+    & > div {
+        // border: 1px solid red;
+        box-sizing: border-box;
+    }
+}
+
+.red-ui-panels-separator {
+    border-top: 1px solid $secondary-border-color;
+    border-bottom: 1px solid $secondary-border-color;
+    height: 7px;
+    box-sizing: border-box;
+    cursor: ns-resize;
+    background: $background-color url(images/grip.png) no-repeat 50% 50%;
+}
+
+
+.red-ui-panel {
+    overflow: auto;
+    height: calc(50% - 4px);
+}

editor/sass/popover.scss

@@ -15,39 +15,82 @@
  **/
 
 
- .red-ui-popover {
-     display: none;
-     position: absolute;
-     width: 300px;
-     padding: 10px;
-     height: auto;
-     background: #fff;
-     
-     z-index: 1000;
-     font-size: 14px;
-     line-height: 1.4em;
-     @include component-shadow;
- }
- .red-ui-popover:after, .red-ui-popover:before {
- 	right: 100%;
- 	top: 50%;
- 	border: solid transparent;
- 	content: " ";
- 	height: 0;
- 	width: 0;
- 	position: absolute;
- 	pointer-events: none;
- }
+.red-ui-popover {
+    display: none;
+    position: absolute;
+    width: auto;
+    padding: 10px;
+    height: auto;
+    background: #fff;
 
- .red-ui-popover:after {
- 	border-color: rgba(136, 183, 213, 0);
- 	border-right-color: #fff;
- 	border-width: 10px;
- 	margin-top: -10px;
- }
- .red-ui-popover:before {
- 	border-color: rgba(194, 225, 245, 0);
- 	border-right-color: $primary-border-color;
- 	border-width: 11px;
- 	margin-top: -11px;
- }
+    z-index: 1000;
+    font-size: 14px;
+    line-height: 1.4em;
+    @include component-shadow;
+}
+
+.red-ui-popover:after, .red-ui-popover:before {
+    top: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+.red-ui-popover.red-ui-popover-right:after, .red-ui-popover.red-ui-popover-right:before {
+    right: 100%;
+}
+.red-ui-popover.red-ui-popover-left:after, .red-ui-popover.red-ui-popover-left:before {
+    left: 100%;
+}
+
+
+.red-ui-popover.red-ui-popover-right:after {
+    border-color: rgba(136, 183, 213, 0);
+    border-right-color: #fff;
+    border-width: 10px;
+    margin-top: -10px;
+}
+.red-ui-popover.red-ui-popover-right:before {
+    border-color: rgba(194, 225, 245, 0);
+    border-right-color: $primary-border-color;
+    border-width: 11px;
+    margin-top: -11px;
+}
+
+.red-ui-popover.red-ui-popover-left:after {
+    border-color: rgba(136, 183, 213, 0);
+    border-left-color: #fff;
+    border-width: 10px;
+    margin-top: -10px;
+}
+.red-ui-popover.red-ui-popover-left:before {
+    border-color: rgba(194, 225, 245, 0);
+    border-left-color: $primary-border-color;
+    border-width: 11px;
+    margin-top: -11px;
+}
+
+.red-ui-popover-size-small {
+    font-size: 11px;
+    padding: 5px;
+
+    &.red-ui-popover-right:after {
+        border-width: 5px;
+        margin-top: -5px;
+    }
+    &.red-ui-popover-right:before {
+        border-width: 6px;
+        margin-top: -6px;
+    }
+
+    &.red-ui-popover-left:after {
+        border-width: 5px;
+        margin-top: -5px;
+    }
+    &.red-ui-popover-left:before {
+        border-width: 6px;
+        margin-top: -6px;
+    }
+}

editor/sass/style.scss

@@ -37,6 +37,7 @@
 @import "library";
 @import "search";
 
+@import "panels";
 @import "tabs";
 @import "tab-config";
 @import "tab-info";
@@ -45,10 +46,14 @@
 @import "palette-editor";
 @import "diff";
 
+@import "userSettings";
+
 
 @import "ui/common/editableList";
 @import "ui/common/searchBox";
 @import "ui/common/typedInput";
+@import "ui/common/nodeList";
+@import "ui/common/checkboxSet";
 
 @import "dragdrop";
 

editor/sass/tab-config.scss

@@ -25,6 +25,22 @@
  .config-node-list {
      margin: 0;
      list-style-type: none;
+
+          .palette_label {
+              margin-left: 8px;
+              line-height: 24px;
+              text-align: left;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+          }
+          .palette_icon_container {
+              font-size: 12px;
+              line-height: 30px;
+              background-color: #e8e8e8;
+              border-top-right-radius: 4px;
+              border-bottom-right-radius: 4px;
+          }
  }
  .config_node {
      width: 160px;
@@ -32,22 +48,6 @@
      background: #f3f3f3;
      color: #666;
      cursor: pointer;
-
-     .palette_label {
-         margin-left: 8px;
-         line-height: 24px;
-         text-align: left;
-         white-space: nowrap;
-         overflow: hidden;
-         text-overflow: ellipsis;
-     }
-     .palette_icon_container {
-         font-size: 12px;
-         line-height: 30px;
-         background-color: #e8e8e8;
-         border-top-right-radius: 4px;
-         border-bottom-right-radius: 4px;
-     }
 }
 .config_node_type {
     color: #999;

editor/sass/tab-info.scss

@@ -19,80 +19,248 @@
 }
 table.node-info {
     font-size: 14px;
-    margin: 0px;
-    width: 97%;
+    margin: 0 0 10px;
+    width: 100%;
 }
-table.node-info tr {
-    border: 1px solid #ddd;
+table.node-info tr:not(.blank) {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+}
+.node-info-property-expand  {
+    font-size: 0.8em;
+    text-align: right;
+    line-height: 0.9em;
+    a {
+        padding-bottom: 5px;
+    }
+
 }
 table.node-info tr.blank {
     border: none;
+    th {
+        text-align: left;
+        font-weight: 500;
+        color: #444;
+        padding: 6px 3px 3px;
+    }
+    >* {
+        padding-top: 8px;
+        border: none;
+        padding-left: 0px;
+    }
+
+
+    a {
+        display: block;
+        color: #666;
+        &:hover,&:focus {
+            color: #666;
+            text-decoration: none;
+        }
+        &:not(.expanded) {
+            .node-info-property-show-more {
+                display: inline;
+            }
+            .node-info-property-show-less {
+                display: none;
+            }
+        }
+        i {
+            width: 10px;
+            text-align: center;
+            transition: transform 0.2s ease-in-out;
+        }
+
+        &.expanded {
+            .node-info-property-show-more {
+                display: none;
+            }
+            .node-info-property-show-less {
+                display: inline;
+            }
+            i {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    &.node-info-info-row > td {
+        padding-left: 5px;
+    }
 }
-table.node-info tr.blank td {
-    padding-top: 8px;
-    border: none;
-    font-weight: bold;
-    padding-left: 0px;
-}
-table.node-info td:first-child{
+
+table.node-info tr:not(.blank) td:first-child{
     color: #666;
     vertical-align: top;
     width: 90px;
-    padding: 3px;
+    padding: 3px 3px 3px 6px;
     border-right: 1px solid #ddd;
 }
-table.node-info td:last-child{
-    padding-left: 5px;
+table.node-info tr:not(.blank) td:last-child{
+    padding: 3px 3px 3px 6px;
     color: #666;
 }
 div.node-info {
     margin: 5px;
 }
-.node-info-property-header {
-    color: #666;
-}
-.node-info-property-header:hover,
-.node-info-property-header:focus {
-    color: #666;
-    text-decoration: none;
-}
 .node-help {
     font-size: 14px;
     line-height: 1.5em;
     h1 {
-        font-weight: normal;
-        font-size: 23px;
+        font-weight: 500;
+        font-size: 1.296em;
+        line-height: 1.3em;
         margin: 8px auto;
     }
     h2 {
-        font-weight: normal;
-        font-size: 18px;
+        font-weight: 500;
+        font-size: 1.215em;
         margin: 8px auto;
+        line-height: 1.3em;
     }
     h3 {
-        font-weight: normal;
-        font-size: 16px;
-        margin: 8px auto;
+        font-weight: 500;
+        font-size: 1.138em;
+        margin: 7px auto 5px;
+        line-height: 1.3em;
     }
     h4,
     h5 {
-        font-weight: normal;
-        font-size: 14px;
-        margin: 8px auto;
+        font-weight: 500;
+        font-size: 1.067em;
+        line-height: 1.3em;
+        margin: 8px auto 5px;
     }
+    & > span > p:first-child {
+    }
+    dl.message-properties {
+        border: 1px solid #ddd;
+        border-radius: 2px;
+
+        margin: 5px auto 10px;
+        &>dt {
+            padding: 0px 3px 2px 3px;
+            font-family: monospace;
+            font-weight: normal;
+            margin: 5px 3px 1px;
+            color: #AD1625;
+            white-space: nowrap;
+            &.optional {
+                font-style: italic;
+
+            }
+            .property-type {
+                font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+                color: #666;
+                font-style: italic;
+                font-size: 11px;
+                float: right;
+            }
+            &:after {
+                content: "";
+                display: table;
+                clear: both;
+            }
+        }
+        &>dd {
+            margin: 0px 8px 2px 13px;
+            vertical-align: top;
+        }
+    }
+    ol.node-ports {
+        margin: 0;
+        li {
+            border: 1px solid #ddd;
+            border-radius: 2px;
+            list-style-position: inside;
+            padding: 3px;
+            margin-bottom: 5px;
+            dl.message-properties {
+                border: none;
+            }
+        }
+    }
+    .node-info-header {
+        i {
+            width: 10px;
+            text-align: center;
+            transition: transform 0.2s ease-in-out;
+            margin-right: 4px;
+        }
+        color: #333;
+        &:hover, &:focus {
+            text-decoration: none;
+        }
+        &.expanded {
+            i {
+                transform: rotate(90deg);
+            }
+        }
+    }
+
 }
-.node-info-tip {
+.sidebar-node-info-stack {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: scroll;
+}
+.node-info-tips {
+    display: none;
     position: absolute;
-    top: 40%;
     left:0;
     right:0;
+    bottom: 0;
+    height: 150px;
+    box-sizing: border-box;
+    border-top: 1px solid $secondary-border-color;
+    background-color: #fff;
     padding: 20px;
+    box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.3);
+    overflow-y: auto;
+}
+.sidebar-node-info.show-tips {
+    .sidebar-node-info-stack {
+        bottom: 150px;
+    }
+    .node-info-tips {
+        display: block;
+    }
+}
+
+.node-info-tips:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+  margin-right: -0.25em; /* Adjusts for spacing */
+}
+
+.node-info-tip {
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
     font-size: 16px;
     text-align: center;
     line-height: 1.9em;
     color : #bbb;
-    background-color: #fff;
     @include disable-selection;
     cursor: default;
-
+}
+.node-info-tips-buttons {
+    position: absolute;
+    top: 4px;
+    right: 6px;
+    a {
+        color: #ddd !important;
+        border-color: #d9d9d9 !important;
+        margin-left: 4px;
+    }
+}
+
+.node-info-property-config-node {
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 2px 4px 2px;
 }

editor/sass/tabs.scss

@@ -113,6 +113,50 @@
     &.red-ui-tabs-add.red-ui-tabs-scrollable {
         padding-right: 59px;
     }
+
+    &.red-ui-tabs-vertical {
+        box-sizing: border-box;
+        height: 100%;
+        border-right: 1px solid $primary-border-color;
+        margin: 0;
+        background: #f3f3f3;
+        overflow: visible;
+
+        .red-ui-tabs-scroll-container {
+            height: auto;
+            overflow-x:visible;
+            overflow-y: scroll;
+        }
+
+        & ul {
+            padding: 0;
+            height: auto;
+            border: none;
+            width: calc(100% + 1px);
+            li {
+                width: 100%;
+                display: block;
+                margin: 0;
+                border: none;
+                border-right: 1px solid $primary-border-color;
+                height: auto;
+                &:not(:first-child) {
+                    border-top: 1px solid  $secondary-border-color;
+                }
+                &:last-child {
+                    border-bottom: 1px solid  $secondary-border-color;
+                }
+
+                a.red-ui-tab-label {
+                    padding: 9px;
+                }
+
+                &.active {
+                    border-right: 1px solid #fff;
+                }
+            }
+        }
+    }
 }
 .red-ui-tab-button {
     position: absolute;

editor/sass/ui/common/checkboxSet.scss

@@ -0,0 +1,29 @@
+/**
+ * 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-checkboxSet {
+    width: 15px;
+    display: inline-block;
+    color: #888;
+    cursor: pointer;
+    input {
+        display:none;
+    }
+
+    &.disabled {
+        pointer-events: none;
+        color: #ddd;
+    }
+}

editor/sass/ui/common/editableList.scss

@@ -13,59 +13,63 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  **/
+.red-ui-editableList-border {
+    border: 1px solid $form-input-border-color;
+    border-radius: 4px;
+    .red-ui-editableList-header {
+        border-bottom: 1px solid $form-input-border-color;
+        padding: 2px 16px 2px 4px;
+        font-size: 0.9em;
+    }
+}
+.red-ui-editableList-container {
+    padding: 5px;
+    margin: 0;
+    vertical-align: middle;
+    box-sizing: border-box;
+    .red-ui-editableList-list {
+        list-style-type:none;
+        margin: 0;
+    }
+    .red-ui-editabelList-item-placeholder {
+        border: 2px dashed $secondary-border-color !important;
+    }
+    li {
+        box-sizing: border-box;
+        position: relative;
+        background: #fff;
+        margin:0;
+        padding:8px 0px;
+        border-bottom: 1px solid $secondary-border-color;
+        min-height: 20px;
+        .red-ui-editableList-item-handle {
+            position: absolute;
+            top: 50%;
+            left: 2px;
+            margin-top: -7px;
+            color: #eee;
+            cursor: move;
+        }
+        .red-ui-editableList-item-remove {
+            position: absolute;
+            top: 50%;
+            right: 0px;
+            margin-top: -9px;
+        }
+        &.ui-sortable-helper {
+            border-top: 1px solid $secondary-border-color;
+        }
+        //.red-ui-editableList-item-content { outline: 1px solid red}
 
+        &.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
+            margin-left: 22px;
+        }
+        &.red-ui-editableList-item-removable .red-ui-editableList-item-content {
+            margin-right: 28px;
+        }
+        &.red-ui-editableList-item-deleting {
+            background: #fee;
+        }
+    }
 
- .red-ui-editableList-container {
-     border: 1px solid $form-input-border-color;
-     border-radius: 4px;
-     padding: 5px;
-     margin: 0;
-     vertical-align: middle;
-     box-sizing: border-box;
-
-     .red-ui-editableList-list {
-         list-style-type:none;
-         margin: 0;
-     }
-     .red-ui-editabelList-item-placeholder {
-         border: 2px dashed $secondary-border-color !important;
-     }
-     li {
-         box-sizing: border-box;
-         position: relative;
-         background: #fff;
-         margin:0;
-         padding:8px 0px;
-         border-bottom: 1px solid $secondary-border-color;
-         min-height: 20px;
-         .red-ui-editableList-item-handle {
-             position: absolute;
-             top: 50%;
-             left: 2px;
-             margin-top: -7px;
-             color: #eee;
-             cursor: move;
-         }
-         .red-ui-editableList-item-remove {
-             position: absolute;
-             top: 50%;
-             right: 0px;
-             margin-top: -9px;
-         }
-         &.ui-sortable-helper {
-             border-top: 1px solid $secondary-border-color;
-         }
-         //.red-ui-editableList-item-content { outline: 1px solid red}
-
-         &.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
-             margin-left: 22px;
-         }
-         &.red-ui-editableList-item-removable .red-ui-editableList-item-content {
-             margin-right: 28px;
-         }
-         &.red-ui-editableList-item-deleting {
-             background: #fee;
-         }
-     }
-
- }
+}

editor/sass/ui/common/nodeList.scss

@@ -0,0 +1,65 @@
+/**
+ * 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-nodeList {
+    .red-ui-editableList-container {
+        padding: 0;
+        li {
+            padding: 2px 5px;
+            margin: 0;
+            white-space: nowrap;
+            border: none;
+            background: #fefefe;
+            &:hover {
+                background: #f0f0f0;
+            }
+
+            i.fa-angle-right {
+                text-align: center;
+                width: 15px;
+                transition: transform 0.1s ease-in-out;
+            }
+            .expandable {
+                cursor: pointer;
+            }
+            .expanded i.fa-angle-right {
+                transform: rotate(90deg);
+            }
+            .meta {
+                float: right;
+                input[type="checkbox"] {
+                    margin: 0;
+                }
+            }
+            .red-ui-editableList-item-content.disabled {
+                color: #ccc;
+            }
+            &.red-ui-editableList-section-header {
+                background: #f0f0f0;
+                .red-ui-editableList-item-content.disabled {
+                    color: #bbb;
+                }
+            }
+
+        }
+    }
+    .red-ui-editableList-header {
+        text-align: left;
+        &>span:last-child {
+            float: right;
+            font-size: 14px;
+        }
+    }
+}

editor/sass/ui/common/typedInput.scss

@@ -35,7 +35,7 @@
     }
     input {
         width: 100%;
-        padding: 0 0 0 1px;
+        padding: 0 0 0 3px;
         margin:0;
         height: 32px;
         border:none;

editor/sass/userSettings.scss

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ **/
+
+#user-settings-tabs-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 120px;
+    background: #f3f3f3;
+}
+#user-settings-tabs-content {
+    position: absolute;
+    top: 0;
+    left: 120px;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    h3:not(:first-child) {
+        border-top: 1px solid $secondary-border-color;
+        margin-top: 15px;
+        margin-bottom: 10px;
+        padding-top: 20px;
+    }
+    label {
+        display: inline-block;
+        min-width: 100px;
+        input {
+            vertical-align: top;
+            padding-bottom: 0;
+        }
+    }
+    input {
+        margin-bottom: 0;
+    }
+    input[type='number'] {
+        width: 60px;
+    }
+}
+
+#user-settings-tab-view {
+    padding: 8px 20px 20px;
+}
+.user-settings-row {
+    padding: 5px 10px 2px;
+}

editor/sass/workspace.scss

@@ -51,3 +51,32 @@
 #workspace-footer {
     @include component-footer;
 }
+
+#workspace-tabs:not(.workspace-focussed) {
+    opacity:0.8;
+    li.red-ui-tab.active a {
+        color:#666;
+    }
+}
+.workspace-disabled-icon {
+    display: none;
+}
+.workspace-disabled {
+    &.red-ui-tab {
+        border-top-style: dashed;
+        border-left-style: dashed;
+        border-right-style: dashed;
+
+        a {
+            font-style: italic;
+            color: #aaa !important;
+        }
+        &.active a {
+            font-weight: normal;
+            color: #999 !important;
+        }
+        .workspace-disabled-icon {
+            display: inline;
+        }
+    }
+}

editor/templates/index.mst

@@ -60,10 +60,6 @@
         <div id="palette-search" class="palette-search hide">
             <input type="text" data-i18n="[placeholder]palette.filter"></input>
         </div>
-        <div id="palette-editor">
-            <div class="editor-tray-header"><div class="editor-tray-titlebar"><ul class="editor-tray-breadcrumbs"><li data-i18n="palette.editor.title"></li></ul></div><div class="editor-tray-toolbar"><button id="palette-editor-close" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only primary" role="button" aria-disabled="false" data-i18n="common.label.done"></button></div></div>
-            <ul id="palette-editor-tabs"></ul>
-        </div>
         <div id="palette-container" class="palette-scroll hide"></div>
         <div id="palette-footer">
             <a class="palette-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
@@ -156,10 +152,11 @@
 
 <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" style="margin-bottom: 0px;">
-        <label for="subflow-input-info" data-i18n="subflow.info"></label>
+        <label for="subflow-input-info" data-i18n="editor:subflow.info"></label>
         <a href="https://help.github.com/articles/markdown-basics/" style="font-size: 0.8em; float: right;" data-i18n="[html]subflow.format"></a>
     </div>
     <div class="form-row node-text-editor-row">
@@ -169,17 +166,66 @@
 </script>
 
 <script type="text/x-red" data-template-name="_expression">
-    <div class="form-row node-text-editor-row">
-        <div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-expression"></div>
-    </div>
-    <div class="form-row">
-        <label for="node-input-expression-func" data-i18n="expressionEditor.functions"></label>
-        <select id="node-input-expression-func"></select>
-        <button id="node-input-expression-func-insert" class="editor-button" data-i18n="expressionEditor.insert"></button>
-        <div style="min-height: 200px;" id="node-input-expression-help"></div>
+    <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>
+        <div id="node-input-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">
+                    <div>
+                        <select id="node-input-expression-func"></select>
+                        <button id="node-input-expression-func-insert" class="editor-button" data-i18n="expressionEditor.insert"></button>
+                    </div>
+                    <div id="node-input-expression-help"></div>
+                </div>
+                <div id="node-input-expression-tab-test" class="node-input-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>
+                    </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>
+            </div>
+        </div>
+    </div>
+</script>
+<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>
+<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>
-
 
 <script src="vendor/vendor.js"></script>
 <script src="vendor/jsonata/jsonata.min.js"></script>
@@ -187,6 +233,9 @@
 <script src="vendor/ace/ext-language_tools.js"></script>
 <script src="{{ asset.red }}"></script>
 <script src="{{ asset.main }}"></script>
+{{# page.scripts }}
+<script src="{{.}}"></script>
+{{/ page.scripts }}
 
 </body>
 </html>

editor/vendor/ace/mode-properties.js

@@ -1 +1 @@
-define("ace/mode/properties_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){var e=/\\u[0-9a-fA-F]{4}|\\/;this.$rules={start:[{token:"comment",regex:/[!#].*$/},{token:"keyword",regex:/[=:]$/},{token:"keyword",regex:/[=:]/,next:"value"},{token:"constant.language.escape",regex:e},{defaultToken:"variable"}],value:[{regex:/\\$/,token:"string",next:"value"},{regex:/$/,token:"string",next:"start"},{token:"constant.language.escape",regex:e},{defaultToken:"string"}]}};r.inherits(s,i),t.PropertiesHighlightRules=s}),define("ace/mode/properties",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/properties_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./properties_highlight_rules").PropertiesHighlightRules,o=function(){this.HighlightRules=s};r.inherits(o,i),function(){this.$id="ace/mode/properties"}.call(o.prototype),t.Mode=o})
+ace.define("ace/mode/properties_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){var e=/\\u[0-9a-fA-F]{4}|\\/;this.$rules={start:[{token:"comment",regex:/[!#].*$/},{token:"keyword",regex:/[=:]$/},{token:"keyword",regex:/[=:]/,next:"value"},{token:"constant.language.escape",regex:e},{defaultToken:"variable"}],value:[{regex:/\\$/,token:"string",next:"value"},{regex:/$/,token:"string",next:"start"},{token:"constant.language.escape",regex:e},{defaultToken:"string"}]}};r.inherits(s,i),t.PropertiesHighlightRules=s}),ace.define("ace/mode/properties",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/properties_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./properties_highlight_rules").PropertiesHighlightRules,o=function(){this.HighlightRules=s,this.$behaviour=this.$defaultBehaviour};r.inherits(o,i),function(){this.$id="ace/mode/properties"}.call(o.prototype),t.Mode=o})

editor/vendor/ace/mode-sql.js

@@ -1 +1 @@
-define("ace/mode/sql_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){var e="select|insert|update|delete|from|where|and|or|group|by|order|limit|offset|having|as|case|when|else|end|type|left|right|join|on|outer|desc|asc|union|create|table|primary|key|if|foreign|not|references|default|null|inner|cross|natural|database|drop|grant",t="true|false",n="avg|count|first|last|max|min|sum|ucase|lcase|mid|len|round|rank|now|format|coalesce|ifnull|isnull|nvl",r="int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp|money|real|number|integer",i=this.createKeywordMapper({"support.function":n,keyword:e,"constant.language":t,"storage.type":r},"identifier",!0);this.$rules={start:[{token:"comment",regex:"--.*$"},{token:"comment",start:"/\\*",end:"\\*/"},{token:"string",regex:'".*?"'},{token:"string",regex:"'.*?'"},{token:"constant.numeric",regex:"[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"},{token:i,regex:"[a-zA-Z_$][a-zA-Z0-9_$]*\\b"},{token:"keyword.operator",regex:"\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|="},{token:"paren.lparen",regex:"[\\(]"},{token:"paren.rparen",regex:"[\\)]"},{token:"text",regex:"\\s+"}]},this.normalizeRules()};r.inherits(s,i),t.SqlHighlightRules=s}),define("ace/mode/sql",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/sql_highlight_rules","ace/range"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./sql_highlight_rules").SqlHighlightRules,o=e("../range").Range,u=function(){this.HighlightRules=s};r.inherits(u,i),function(){this.lineCommentStart="--",this.$id="ace/mode/sql"}.call(u.prototype),t.Mode=u})
+ace.define("ace/mode/sql_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){var e="select|insert|update|delete|from|where|and|or|group|by|order|limit|offset|having|as|case|when|else|end|type|left|right|join|on|outer|desc|asc|union|create|table|primary|key|if|foreign|not|references|default|null|inner|cross|natural|database|drop|grant",t="true|false",n="avg|count|first|last|max|min|sum|ucase|lcase|mid|len|round|rank|now|format|coalesce|ifnull|isnull|nvl",r="int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp|money|real|number|integer",i=this.createKeywordMapper({"support.function":n,keyword:e,"constant.language":t,"storage.type":r},"identifier",!0);this.$rules={start:[{token:"comment",regex:"--.*$"},{token:"comment",start:"/\\*",end:"\\*/"},{token:"string",regex:'".*?"'},{token:"string",regex:"'.*?'"},{token:"string",regex:"`.*?`"},{token:"constant.numeric",regex:"[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"},{token:i,regex:"[a-zA-Z_$][a-zA-Z0-9_$]*\\b"},{token:"keyword.operator",regex:"\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|="},{token:"paren.lparen",regex:"[\\(]"},{token:"paren.rparen",regex:"[\\)]"},{token:"text",regex:"\\s+"}]},this.normalizeRules()};r.inherits(s,i),t.SqlHighlightRules=s}),ace.define("ace/mode/sql",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/sql_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./sql_highlight_rules").SqlHighlightRules,o=function(){this.HighlightRules=s,this.$behaviour=this.$defaultBehaviour};r.inherits(o,i),function(){this.lineCommentStart="--",this.$id="ace/mode/sql"}.call(o.prototype),t.Mode=o})

editor/vendor/ace/mode-yaml.js

@@ -1 +1 @@
-define("ace/mode/yaml_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){this.$rules={start:[{token:"comment",regex:"#.*$"},{token:"list.markup",regex:/^(?:-{3}|\.{3})\s*(?=#|$)/},{token:"list.markup",regex:/^\s*[\-?](?:$|\s)/},{token:"constant",regex:"!![\\w//]+"},{token:"constant.language",regex:"[&\\*][a-zA-Z0-9-_]+"},{token:["meta.tag","keyword"],regex:/^(\s*\w.*?)(:(?:\s+|$))/},{token:["meta.tag","keyword"],regex:/(\w+?)(\s*:(?:\s+|$))/},{token:"keyword.operator",regex:"<<\\w*:\\w*"},{token:"keyword.operator",regex:"-\\s*(?=[{])"},{token:"string",regex:'["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]'},{token:"string",regex:"[|>][-+\\d\\s]*$",next:"qqstring"},{token:"string",regex:"['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']"},{token:"constant.numeric",regex:/(\b|[+\-\.])[\d_]+(?:(?:\.[\d_]*)?(?:[eE][+\-]?[\d_]+)?)/},{token:"constant.numeric",regex:/[+\-]?\.inf\b|NaN\b|0x[\dA-Fa-f_]+|0b[10_]+/},{token:"constant.language.boolean",regex:"(?:true|false|TRUE|FALSE|True|False|yes|no)\\b"},{token:"paren.lparen",regex:"[[({]"},{token:"paren.rparen",regex:"[\\])}]"}],qqstring:[{token:"string",regex:"(?=(?:(?:\\\\.)|(?:[^:]))*?:)",next:"start"},{token:"string",regex:".+"}]}};r.inherits(s,i),t.YamlHighlightRules=s}),define("ace/mode/matching_brace_outdent",["require","exports","module","ace/range"],function(e,t,n){"use strict";var r=e("../range").Range,i=function(){};(function(){this.checkOutdent=function(e,t){return/^\s+$/.test(e)?/^\s*\}/.test(t):!1},this.autoOutdent=function(e,t){var n=e.getLine(t),i=n.match(/^(\s*\})/);if(!i)return 0;var s=i[1].length,o=e.findMatchingBracket({row:t,column:s});if(!o||o.row==t)return 0;var u=this.$getIndent(e.getLine(o.row));e.replace(new r(t,0,t,s-1),u)},this.$getIndent=function(e){return e.match(/^\s*/)[0]}}).call(i.prototype),t.MatchingBraceOutdent=i}),define("ace/mode/folding/coffee",["require","exports","module","ace/lib/oop","ace/mode/folding/fold_mode","ace/range"],function(e,t,n){"use strict";var r=e("../../lib/oop"),i=e("./fold_mode").FoldMode,s=e("../../range").Range,o=t.FoldMode=function(){};r.inherits(o,i),function(){this.getFoldWidgetRange=function(e,t,n){var r=this.indentationBlock(e,n);if(r)return r;var i=/\S/,o=e.getLine(n),u=o.search(i);if(u==-1||o[u]!="#")return;var a=o.length,f=e.getLength(),l=n,c=n;while(++n<f){o=e.getLine(n);var h=o.search(i);if(h==-1)continue;if(o[h]!="#")break;c=n}if(c>l){var p=e.getLine(c).length;return new s(l,a,c,p)}},this.getFoldWidget=function(e,t,n){var r=e.getLine(n),i=r.search(/\S/),s=e.getLine(n+1),o=e.getLine(n-1),u=o.search(/\S/),a=s.search(/\S/);if(i==-1)return e.foldWidgets[n-1]=u!=-1&&u<a?"start":"","";if(u==-1){if(i==a&&r[i]=="#"&&s[i]=="#")return e.foldWidgets[n-1]="",e.foldWidgets[n+1]="","start"}else if(u==i&&r[i]=="#"&&o[i]=="#"&&e.getLine(n-2).search(/\S/)==-1)return e.foldWidgets[n-1]="start",e.foldWidgets[n+1]="","";return u!=-1&&u<i?e.foldWidgets[n-1]="start":e.foldWidgets[n-1]="",i<a?"start":""}}.call(o.prototype)}),define("ace/mode/yaml",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/yaml_highlight_rules","ace/mode/matching_brace_outdent","ace/mode/folding/coffee"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./yaml_highlight_rules").YamlHighlightRules,o=e("./matching_brace_outdent").MatchingBraceOutdent,u=e("./folding/coffee").FoldMode,a=function(){this.HighlightRules=s,this.$outdent=new o,this.foldingRules=new u};r.inherits(a,i),function(){this.lineCommentStart="#",this.getNextLineIndent=function(e,t,n){var r=this.$getIndent(t);if(e=="start"){var i=t.match(/^.*[\{\(\[]\s*$/);i&&(r+=n)}return r},this.checkOutdent=function(e,t,n){return this.$outdent.checkOutdent(t,n)},this.autoOutdent=function(e,t,n){this.$outdent.autoOutdent(t,n)},this.$id="ace/mode/yaml"}.call(a.prototype),t.Mode=a})
+ace.define("ace/mode/yaml_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){this.$rules={start:[{token:"comment",regex:"#.*$"},{token:"list.markup",regex:/^(?:-{3}|\.{3})\s*(?=#|$)/},{token:"list.markup",regex:/^\s*[\-?](?:$|\s)/},{token:"constant",regex:"!![\\w//]+"},{token:"constant.language",regex:"[&\\*][a-zA-Z0-9-_]+"},{token:["meta.tag","keyword"],regex:/^(\s*\w.*?)(:(?:\s+|$))/},{token:["meta.tag","keyword"],regex:/(\w+?)(\s*:(?:\s+|$))/},{token:"keyword.operator",regex:"<<\\w*:\\w*"},{token:"keyword.operator",regex:"-\\s*(?=[{])"},{token:"string",regex:'["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]'},{token:"string",regex:/[|>][-+\d\s]*$/,onMatch:function(e,t,n,r){var i=/^\s*/.exec(r)[0];return n.length<1?n.push(this.next):n[0]="mlString",n.length<2?n.push(i.length):n[1]=i.length,this.token},next:"mlString"},{token:"string",regex:"['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']"},{token:"constant.numeric",regex:/(\b|[+\-\.])[\d_]+(?:(?:\.[\d_]*)?(?:[eE][+\-]?[\d_]+)?)/},{token:"constant.numeric",regex:/[+\-]?\.inf\b|NaN\b|0x[\dA-Fa-f_]+|0b[10_]+/},{token:"constant.language.boolean",regex:"\\b(?:true|false|TRUE|FALSE|True|False|yes|no)\\b"},{token:"paren.lparen",regex:"[[({]"},{token:"paren.rparen",regex:"[\\])}]"}],mlString:[{token:"indent",regex:/^\s*$/},{token:"indent",regex:/^\s*/,onMatch:function(e,t,n){var r=n[1];return r>=e.length?(this.next="start",n.splice(0)):this.next="mlString",this.token},next:"mlString"},{token:"string",regex:".+"}]},this.normalizeRules()};r.inherits(s,i),t.YamlHighlightRules=s}),ace.define("ace/mode/matching_brace_outdent",["require","exports","module","ace/range"],function(e,t,n){"use strict";var r=e("../range").Range,i=function(){};(function(){this.checkOutdent=function(e,t){return/^\s+$/.test(e)?/^\s*\}/.test(t):!1},this.autoOutdent=function(e,t){var n=e.getLine(t),i=n.match(/^(\s*\})/);if(!i)return 0;var s=i[1].length,o=e.findMatchingBracket({row:t,column:s});if(!o||o.row==t)return 0;var u=this.$getIndent(e.getLine(o.row));e.replace(new r(t,0,t,s-1),u)},this.$getIndent=function(e){return e.match(/^\s*/)[0]}}).call(i.prototype),t.MatchingBraceOutdent=i}),ace.define("ace/mode/folding/coffee",["require","exports","module","ace/lib/oop","ace/mode/folding/fold_mode","ace/range"],function(e,t,n){"use strict";var r=e("../../lib/oop"),i=e("./fold_mode").FoldMode,s=e("../../range").Range,o=t.FoldMode=function(){};r.inherits(o,i),function(){this.getFoldWidgetRange=function(e,t,n){var r=this.indentationBlock(e,n);if(r)return r;var i=/\S/,o=e.getLine(n),u=o.search(i);if(u==-1||o[u]!="#")return;var a=o.length,f=e.getLength(),l=n,c=n;while(++n<f){o=e.getLine(n);var h=o.search(i);if(h==-1)continue;if(o[h]!="#")break;c=n}if(c>l){var p=e.getLine(c).length;return new s(l,a,c,p)}},this.getFoldWidget=function(e,t,n){var r=e.getLine(n),i=r.search(/\S/),s=e.getLine(n+1),o=e.getLine(n-1),u=o.search(/\S/),a=s.search(/\S/);if(i==-1)return e.foldWidgets[n-1]=u!=-1&&u<a?"start":"","";if(u==-1){if(i==a&&r[i]=="#"&&s[i]=="#")return e.foldWidgets[n-1]="",e.foldWidgets[n+1]="","start"}else if(u==i&&r[i]=="#"&&o[i]=="#"&&e.getLine(n-2).search(/\S/)==-1)return e.foldWidgets[n-1]="start",e.foldWidgets[n+1]="","";return u!=-1&&u<i?e.foldWidgets[n-1]="start":e.foldWidgets[n-1]="",i<a?"start":""}}.call(o.prototype)}),ace.define("ace/mode/yaml",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/yaml_highlight_rules","ace/mode/matching_brace_outdent","ace/mode/folding/coffee"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./yaml_highlight_rules").YamlHighlightRules,o=e("./matching_brace_outdent").MatchingBraceOutdent,u=e("./folding/coffee").FoldMode,a=function(){this.HighlightRules=s,this.$outdent=new o,this.foldingRules=new u,this.$behaviour=this.$defaultBehaviour};r.inherits(a,i),function(){this.lineCommentStart="#",this.getNextLineIndent=function(e,t,n){var r=this.$getIndent(t);if(e=="start"){var i=t.match(/^.*[\{\(\[]\s*$/);i&&(r+=n)}return r},this.checkOutdent=function(e,t,n){return this.$outdent.checkOutdent(t,n)},this.autoOutdent=function(e,t,n){this.$outdent.autoOutdent(t,n)},this.$id="ace/mode/yaml"}.call(a.prototype),t.Mode=a})

editor/vendor/ace/snippets/handlebars.js

@@ -1 +1 @@
-define("ace/snippets/handlebars",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="handlebars"})
+ace.define("ace/snippets/handlebars",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="handlebars"})

editor/vendor/ace/snippets/javascript.js

@@ -1 +1 @@
-define("ace/snippets/javascript",["require","exports","module"],function(e,t,n){"use strict";t.snippetText='# Prototype\nsnippet proto\n	${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) {\n		${4:// body...}\n	};\n# Function\nsnippet fun\n	function ${1?:function_name}(${2:argument}) {\n		${3:// body...}\n	}\n# Anonymous Function\nregex /((=)\\s*|(:)\\s*|(\\()|\\b)/f/(\\))?/\nsnippet f\n	function${M1?: ${1:functionName}}($2) {\n		${0:$TM_SELECTED_TEXT}\n	}${M2?;}${M3?,}${M4?)}\n# Immediate function\ntrigger \\(?f\\(\nendTrigger \\)?\nsnippet f(\n	(function(${1}) {\n		${0:${TM_SELECTED_TEXT:/* code */}}\n	}(${1}));\n# if\nsnippet if\n	if (${1:true}) {\n		${0}\n	}\n# if ... else\nsnippet ife\n	if (${1:true}) {\n		${2}\n	} else {\n		${0}\n	}\n# tertiary conditional\nsnippet ter\n	${1:/* condition */} ? ${2:a} : ${3:b}\n# switch\nsnippet switch\n	switch (${1:expression}) {\n		case \'${3:case}\':\n			${4:// code}\n			break;\n		${5}\n		default:\n			${2:// code}\n	}\n# case\nsnippet case\n	case \'${1:case}\':\n		${2:// code}\n		break;\n	${3}\n\n# while (...) {...}\nsnippet wh\n	while (${1:/* condition */}) {\n		${0:/* code */}\n	}\n# try\nsnippet try\n	try {\n		${0:/* code */}\n	} catch (e) {}\n# do...while\nsnippet do\n	do {\n		${2:/* code */}\n	} while (${1:/* condition */});\n# Object Method\nsnippet :f\nregex /([,{[])|^\\s*/:f/\n	${1:method_name}: function(${2:attribute}) {\n		${0}\n	}${3:,}\n# setTimeout function\nsnippet setTimeout\nregex /\\b/st|timeout|setTimeo?u?t?/\n	setTimeout(function() {${3:$TM_SELECTED_TEXT}}, ${1:10});\n# Get Elements\nsnippet gett\n	getElementsBy${1:TagName}(\'${2}\')${3}\n# Get Element\nsnippet get\n	getElementBy${1:Id}(\'${2}\')${3}\n# console.log (Firebug)\nsnippet cl\n	console.log(${1});\n# return\nsnippet ret\n	return ${1:result}\n# for (property in object ) { ... }\nsnippet fori\n	for (var ${1:prop} in ${2:Things}) {\n		${0:$2[$1]}\n	}\n# hasOwnProperty\nsnippet has\n	hasOwnProperty(${1})\n# docstring\nsnippet /**\n	/**\n	 * ${1:description}\n	 *\n	 */\nsnippet @par\nregex /^\\s*\\*\\s*/@(para?m?)?/\n	@param {${1:type}} ${2:name} ${3:description}\nsnippet @ret\n	@return {${1:type}} ${2:description}\n# JSON.parse\nsnippet jsonp\n	JSON.parse(${1:jstr});\n# JSON.stringify\nsnippet jsons\n	JSON.stringify(${1:object});\n# self-defining function\nsnippet sdf\n	var ${1:function_name} = function(${2:argument}) {\n		${3:// initial code ...}\n\n		$1 = function($2) {\n			${4:// main code}\n		};\n	}\n# singleton\nsnippet sing\n	function ${1:Singleton} (${2:argument}) {\n		// the cached instance\n		var instance;\n\n		// rewrite the constructor\n		$1 = function $1($2) {\n			return instance;\n		};\n		\n		// carry over the prototype properties\n		$1.prototype = this;\n\n		// the instance\n		instance = new $1();\n\n		// reset the constructor pointer\n		instance.constructor = $1;\n\n		${3:// code ...}\n\n		return instance;\n	}\n# class\nsnippet class\nregex /^\\s*/clas{0,2}/\n	var ${1:class} = function(${20}) {\n		$40$0\n	};\n	\n	(function() {\n		${60:this.prop = ""}\n	}).call(${1:class}.prototype);\n	\n	exports.${1:class} = ${1:class};\n# \nsnippet for-\n	for (var ${1:i} = ${2:Things}.length; ${1:i}--; ) {\n		${0:${2:Things}[${1:i}];}\n	}\n# for (...) {...}\nsnippet for\n	for (var ${1:i} = 0; $1 < ${2:Things}.length; $1++) {\n		${3:$2[$1]}$0\n	}\n# for (...) {...} (Improved Native For-Loop)\nsnippet forr\n	for (var ${1:i} = ${2:Things}.length - 1; $1 >= 0; $1--) {\n		${3:$2[$1]}$0\n	}\n\n\n#modules\nsnippet def\n	define(function(require, exports, module) {\n	"use strict";\n	var ${1/.*\\///} = require("${1}");\n	\n	$TM_SELECTED_TEXT\n	});\nsnippet req\nguard ^\\s*\n	var ${1/.*\\///} = require("${1}");\n	$0\nsnippet requ\nguard ^\\s*\n	var ${1/.*\\/(.)/\\u$1/} = require("${1}").${1/.*\\/(.)/\\u$1/};\n	$0\n',t.scope="javascript"})
+ace.define("ace/snippets/javascript",["require","exports","module"],function(e,t,n){"use strict";t.snippetText='# Prototype\nsnippet proto\n	${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) {\n		${4:// body...}\n	};\n# Function\nsnippet fun\n	function ${1?:function_name}(${2:argument}) {\n		${3:// body...}\n	}\n# Anonymous Function\nregex /((=)\\s*|(:)\\s*|(\\()|\\b)/f/(\\))?/\nsnippet f\n	function${M1?: ${1:functionName}}($2) {\n		${0:$TM_SELECTED_TEXT}\n	}${M2?;}${M3?,}${M4?)}\n# Immediate function\ntrigger \\(?f\\(\nendTrigger \\)?\nsnippet f(\n	(function(${1}) {\n		${0:${TM_SELECTED_TEXT:/* code */}}\n	}(${1}));\n# if\nsnippet if\n	if (${1:true}) {\n		${0}\n	}\n# if ... else\nsnippet ife\n	if (${1:true}) {\n		${2}\n	} else {\n		${0}\n	}\n# tertiary conditional\nsnippet ter\n	${1:/* condition */} ? ${2:a} : ${3:b}\n# switch\nsnippet switch\n	switch (${1:expression}) {\n		case \'${3:case}\':\n			${4:// code}\n			break;\n		${5}\n		default:\n			${2:// code}\n	}\n# case\nsnippet case\n	case \'${1:case}\':\n		${2:// code}\n		break;\n	${3}\n\n# while (...) {...}\nsnippet wh\n	while (${1:/* condition */}) {\n		${0:/* code */}\n	}\n# try\nsnippet try\n	try {\n		${0:/* code */}\n	} catch (e) {}\n# do...while\nsnippet do\n	do {\n		${2:/* code */}\n	} while (${1:/* condition */});\n# Object Method\nsnippet :f\nregex /([,{[])|^\\s*/:f/\n	${1:method_name}: function(${2:attribute}) {\n		${0}\n	}${3:,}\n# setTimeout function\nsnippet setTimeout\nregex /\\b/st|timeout|setTimeo?u?t?/\n	setTimeout(function() {${3:$TM_SELECTED_TEXT}}, ${1:10});\n# Get Elements\nsnippet gett\n	getElementsBy${1:TagName}(\'${2}\')${3}\n# Get Element\nsnippet get\n	getElementBy${1:Id}(\'${2}\')${3}\n# console.log (Firebug)\nsnippet cl\n	console.log(${1});\n# return\nsnippet ret\n	return ${1:result}\n# for (property in object ) { ... }\nsnippet fori\n	for (var ${1:prop} in ${2:Things}) {\n		${0:$2[$1]}\n	}\n# hasOwnProperty\nsnippet has\n	hasOwnProperty(${1})\n# docstring\nsnippet /**\n	/**\n	 * ${1:description}\n	 *\n	 */\nsnippet @par\nregex /^\\s*\\*\\s*/@(para?m?)?/\n	@param {${1:type}} ${2:name} ${3:description}\nsnippet @ret\n	@return {${1:type}} ${2:description}\n# JSON.parse\nsnippet jsonp\n	JSON.parse(${1:jstr});\n# JSON.stringify\nsnippet jsons\n	JSON.stringify(${1:object});\n# self-defining function\nsnippet sdf\n	var ${1:function_name} = function(${2:argument}) {\n		${3:// initial code ...}\n\n		$1 = function($2) {\n			${4:// main code}\n		};\n	}\n# singleton\nsnippet sing\n	function ${1:Singleton} (${2:argument}) {\n		// the cached instance\n		var instance;\n\n		// rewrite the constructor\n		$1 = function $1($2) {\n			return instance;\n		};\n		\n		// carry over the prototype properties\n		$1.prototype = this;\n\n		// the instance\n		instance = new $1();\n\n		// reset the constructor pointer\n		instance.constructor = $1;\n\n		${3:// code ...}\n\n		return instance;\n	}\n# class\nsnippet class\nregex /^\\s*/clas{0,2}/\n	var ${1:class} = function(${20}) {\n		$40$0\n	};\n	\n	(function() {\n		${60:this.prop = ""}\n	}).call(${1:class}.prototype);\n	\n	exports.${1:class} = ${1:class};\n# \nsnippet for-\n	for (var ${1:i} = ${2:Things}.length; ${1:i}--; ) {\n		${0:${2:Things}[${1:i}];}\n	}\n# for (...) {...}\nsnippet for\n	for (var ${1:i} = 0; $1 < ${2:Things}.length; $1++) {\n		${3:$2[$1]}$0\n	}\n# for (...) {...} (Improved Native For-Loop)\nsnippet forr\n	for (var ${1:i} = ${2:Things}.length - 1; $1 >= 0; $1--) {\n		${3:$2[$1]}$0\n	}\n\n\n#modules\nsnippet def\n	define(function(require, exports, module) {\n	"use strict";\n	var ${1/.*\\///} = require("${1}");\n	\n	$TM_SELECTED_TEXT\n	});\nsnippet req\nguard ^\\s*\n	var ${1/.*\\///} = require("${1}");\n	$0\nsnippet requ\nguard ^\\s*\n	var ${1/.*\\/(.)/\\u$1/} = require("${1}").${1/.*\\/(.)/\\u$1/};\n	$0\n',t.scope="javascript"})

editor/vendor/ace/snippets/markdown.js

@@ -1 +1 @@
-define("ace/snippets/markdown",["require","exports","module"],function(e,t,n){"use strict";t.snippetText='# Markdown\n\n# Includes octopress (http://octopress.org/) snippets\n\nsnippet [\n	[${1:text}](http://${2:address} "${3:title}")\nsnippet [*\n	[${1:link}](${2:`@*`} "${3:title}")${4}\n\nsnippet [:\n	[${1:id}]: http://${2:url} "${3:title}"\nsnippet [:*\n	[${1:id}]: ${2:`@*`} "${3:title}"\n\nsnippet ![\n	![${1:alttext}](${2:/images/image.jpg} "${3:title}")\nsnippet ![*\n	![${1:alt}](${2:`@*`} "${3:title}")${4}\n\nsnippet ![:\n	![${1:id}]: ${2:url} "${3:title}"\nsnippet ![:*\n	![${1:id}]: ${2:`@*`} "${3:title}"\n\nsnippet ===\nregex /^/=+/=*//\n	${PREV_LINE/./=/g}\n	\n	${0}\nsnippet ---\nregex /^/-+/-*//\n	${PREV_LINE/./-/g}\n	\n	${0}\nsnippet blockquote\n	{% blockquote %}\n	${1:quote}\n	{% endblockquote %}\n\nsnippet blockquote-author\n	{% blockquote ${1:author}, ${2:title} %}\n	${3:quote}\n	{% endblockquote %}\n\nsnippet blockquote-link\n	{% blockquote ${1:author} ${2:URL} ${3:link_text} %}\n	${4:quote}\n	{% endblockquote %}\n\nsnippet bt-codeblock-short\n	```\n	${1:code_snippet}\n	```\n\nsnippet bt-codeblock-full\n	``` ${1:language} ${2:title} ${3:URL} ${4:link_text}\n	${5:code_snippet}\n	```\n\nsnippet codeblock-short\n	{% codeblock %}\n	${1:code_snippet}\n	{% endcodeblock %}\n\nsnippet codeblock-full\n	{% codeblock ${1:title} lang:${2:language} ${3:URL} ${4:link_text} %}\n	${5:code_snippet}\n	{% endcodeblock %}\n\nsnippet gist-full\n	{% gist ${1:gist_id} ${2:filename} %}\n\nsnippet gist-short\n	{% gist ${1:gist_id} %}\n\nsnippet img\n	{% img ${1:class} ${2:URL} ${3:width} ${4:height} ${5:title_text} ${6:alt_text} %}\n\nsnippet youtube\n	{% youtube ${1:video_id} %}\n\n# The quote should appear only once in the text. It is inherently part of it.\n# See http://octopress.org/docs/plugins/pullquote/ for more info.\n\nsnippet pullquote\n	{% pullquote %}\n	${1:text} {" ${2:quote} "} ${3:text}\n	{% endpullquote %}\n',t.scope="markdown"})
+ace.define("ace/snippets/markdown",["require","exports","module"],function(e,t,n){"use strict";t.snippetText='# Markdown\n\n# Includes octopress (http://octopress.org/) snippets\n\nsnippet [\n	[${1:text}](http://${2:address} "${3:title}")\nsnippet [*\n	[${1:link}](${2:`@*`} "${3:title}")${4}\n\nsnippet [:\n	[${1:id}]: http://${2:url} "${3:title}"\nsnippet [:*\n	[${1:id}]: ${2:`@*`} "${3:title}"\n\nsnippet ![\n	![${1:alttext}](${2:/images/image.jpg} "${3:title}")\nsnippet ![*\n	![${1:alt}](${2:`@*`} "${3:title}")${4}\n\nsnippet ![:\n	![${1:id}]: ${2:url} "${3:title}"\nsnippet ![:*\n	![${1:id}]: ${2:`@*`} "${3:title}"\n\nsnippet ===\nregex /^/=+/=*//\n	${PREV_LINE/./=/g}\n	\n	${0}\nsnippet ---\nregex /^/-+/-*//\n	${PREV_LINE/./-/g}\n	\n	${0}\nsnippet blockquote\n	{% blockquote %}\n	${1:quote}\n	{% endblockquote %}\n\nsnippet blockquote-author\n	{% blockquote ${1:author}, ${2:title} %}\n	${3:quote}\n	{% endblockquote %}\n\nsnippet blockquote-link\n	{% blockquote ${1:author} ${2:URL} ${3:link_text} %}\n	${4:quote}\n	{% endblockquote %}\n\nsnippet bt-codeblock-short\n	```\n	${1:code_snippet}\n	```\n\nsnippet bt-codeblock-full\n	``` ${1:language} ${2:title} ${3:URL} ${4:link_text}\n	${5:code_snippet}\n	```\n\nsnippet codeblock-short\n	{% codeblock %}\n	${1:code_snippet}\n	{% endcodeblock %}\n\nsnippet codeblock-full\n	{% codeblock ${1:title} lang:${2:language} ${3:URL} ${4:link_text} %}\n	${5:code_snippet}\n	{% endcodeblock %}\n\nsnippet gist-full\n	{% gist ${1:gist_id} ${2:filename} %}\n\nsnippet gist-short\n	{% gist ${1:gist_id} %}\n\nsnippet img\n	{% img ${1:class} ${2:URL} ${3:width} ${4:height} ${5:title_text} ${6:alt_text} %}\n\nsnippet youtube\n	{% youtube ${1:video_id} %}\n\n# The quote should appear only once in the text. It is inherently part of it.\n# See http://octopress.org/docs/plugins/pullquote/ for more info.\n\nsnippet pullquote\n	{% pullquote %}\n	${1:text} {" ${2:quote} "} ${3:text}\n	{% endpullquote %}\n',t.scope="markdown"})

editor/vendor/ace/snippets/properties.js

@@ -1 +1 @@
-define("ace/snippets/properties",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="properties"})
+ace.define("ace/snippets/properties",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="properties"})

editor/vendor/ace/snippets/text.js

@@ -1 +1 @@
-define("ace/snippets/text",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="text"})
+ace.define("ace/snippets/text",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="text"})

editor/vendor/ace/snippets/yaml.js

@@ -1 +1 @@
-define("ace/snippets/yaml",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="yaml"})
+ace.define("ace/snippets/yaml",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="yaml"})

editor/vendor/ace/theme-chrome.js

@@ -1 +1 @@
-define("ace/theme/chrome",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-chrome",t.cssText='.ace-chrome .ace_gutter {background: #ebebeb;color: #333;overflow : hidden;}.ace-chrome .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-chrome {background-color: #FFFFFF;color: black;}.ace-chrome .ace_cursor {color: black;}.ace-chrome .ace_invisible {color: rgb(191, 191, 191);}.ace-chrome .ace_constant.ace_buildin {color: rgb(88, 72, 246);}.ace-chrome .ace_constant.ace_language {color: rgb(88, 92, 246);}.ace-chrome .ace_constant.ace_library {color: rgb(6, 150, 14);}.ace-chrome .ace_invalid {background-color: rgb(153, 0, 0);color: white;}.ace-chrome .ace_fold {}.ace-chrome .ace_support.ace_function {color: rgb(60, 76, 114);}.ace-chrome .ace_support.ace_constant {color: rgb(6, 150, 14);}.ace-chrome .ace_support.ace_type,.ace-chrome .ace_support.ace_class.ace-chrome .ace_support.ace_other {color: rgb(109, 121, 222);}.ace-chrome .ace_variable.ace_parameter {font-style:italic;color:#FD971F;}.ace-chrome .ace_keyword.ace_operator {color: rgb(104, 118, 135);}.ace-chrome .ace_comment {color: #236e24;}.ace-chrome .ace_comment.ace_doc {color: #236e24;}.ace-chrome .ace_comment.ace_doc.ace_tag {color: #236e24;}.ace-chrome .ace_constant.ace_numeric {color: rgb(0, 0, 205);}.ace-chrome .ace_variable {color: rgb(49, 132, 149);}.ace-chrome .ace_xml-pe {color: rgb(104, 104, 91);}.ace-chrome .ace_entity.ace_name.ace_function {color: #0000A2;}.ace-chrome .ace_heading {color: rgb(12, 7, 255);}.ace-chrome .ace_list {color:rgb(185, 6, 144);}.ace-chrome .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}.ace-chrome .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-chrome .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-chrome .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-chrome .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.07);}.ace-chrome .ace_gutter-active-line {background-color : #dcdcdc;}.ace-chrome .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-chrome .ace_storage,.ace-chrome .ace_keyword,.ace-chrome .ace_meta.ace_tag {color: rgb(147, 15, 128);}.ace-chrome .ace_string.ace_regex {color: rgb(255, 0, 0)}.ace-chrome .ace_string {color: #1A1AA6;}.ace-chrome .ace_entity.ace_other.ace_attribute-name {color: #994409;}.ace-chrome .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}';var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)})
+ace.define("ace/theme/chrome",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-chrome",t.cssText='.ace-chrome .ace_gutter {background: #ebebeb;color: #333;overflow : hidden;}.ace-chrome .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-chrome {background-color: #FFFFFF;color: black;}.ace-chrome .ace_cursor {color: black;}.ace-chrome .ace_invisible {color: rgb(191, 191, 191);}.ace-chrome .ace_constant.ace_buildin {color: rgb(88, 72, 246);}.ace-chrome .ace_constant.ace_language {color: rgb(88, 92, 246);}.ace-chrome .ace_constant.ace_library {color: rgb(6, 150, 14);}.ace-chrome .ace_invalid {background-color: rgb(153, 0, 0);color: white;}.ace-chrome .ace_fold {}.ace-chrome .ace_support.ace_function {color: rgb(60, 76, 114);}.ace-chrome .ace_support.ace_constant {color: rgb(6, 150, 14);}.ace-chrome .ace_support.ace_type,.ace-chrome .ace_support.ace_class.ace-chrome .ace_support.ace_other {color: rgb(109, 121, 222);}.ace-chrome .ace_variable.ace_parameter {font-style:italic;color:#FD971F;}.ace-chrome .ace_keyword.ace_operator {color: rgb(104, 118, 135);}.ace-chrome .ace_comment {color: #236e24;}.ace-chrome .ace_comment.ace_doc {color: #236e24;}.ace-chrome .ace_comment.ace_doc.ace_tag {color: #236e24;}.ace-chrome .ace_constant.ace_numeric {color: rgb(0, 0, 205);}.ace-chrome .ace_variable {color: rgb(49, 132, 149);}.ace-chrome .ace_xml-pe {color: rgb(104, 104, 91);}.ace-chrome .ace_entity.ace_name.ace_function {color: #0000A2;}.ace-chrome .ace_heading {color: rgb(12, 7, 255);}.ace-chrome .ace_list {color:rgb(185, 6, 144);}.ace-chrome .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}.ace-chrome .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-chrome .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-chrome .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-chrome .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.07);}.ace-chrome .ace_gutter-active-line {background-color : #dcdcdc;}.ace-chrome .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-chrome .ace_storage,.ace-chrome .ace_keyword,.ace-chrome .ace_meta.ace_tag {color: rgb(147, 15, 128);}.ace-chrome .ace_string.ace_regex {color: rgb(255, 0, 0)}.ace-chrome .ace_string {color: #1A1AA6;}.ace-chrome .ace_entity.ace_other.ace_attribute-name {color: #994409;}.ace-chrome .ace_indent-guide {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;}';var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)})

editor/vendor/ace/theme-tomorrow.js

@@ -1 +1 @@
-define("ace/theme/tomorrow",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-tomorrow",t.cssText=".ace-tomorrow .ace_gutter {background: #f6f6f6;color: #4D4D4C}.ace-tomorrow .ace_print-margin {width: 1px;background: #f6f6f6}.ace-tomorrow {background-color: #FFFFFF;color: #4D4D4C}.ace-tomorrow .ace_cursor {color: #AEAFAD}.ace-tomorrow .ace_marker-layer .ace_selection {background: #D6D6D6}.ace-tomorrow.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FFFFFF;}.ace-tomorrow .ace_marker-layer .ace_step {background: rgb(255, 255, 0)}.ace-tomorrow .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #D1D1D1}.ace-tomorrow .ace_marker-layer .ace_active-line {background: #EFEFEF}.ace-tomorrow .ace_gutter-active-line {background-color : #dcdcdc}.ace-tomorrow .ace_marker-layer .ace_selected-word {border: 1px solid #D6D6D6}.ace-tomorrow .ace_invisible {color: #D1D1D1}.ace-tomorrow .ace_keyword,.ace-tomorrow .ace_meta,.ace-tomorrow .ace_storage,.ace-tomorrow .ace_storage.ace_type,.ace-tomorrow .ace_support.ace_type {color: #8959A8}.ace-tomorrow .ace_keyword.ace_operator {color: #3E999F}.ace-tomorrow .ace_constant.ace_character,.ace-tomorrow .ace_constant.ace_language,.ace-tomorrow .ace_constant.ace_numeric,.ace-tomorrow .ace_keyword.ace_other.ace_unit,.ace-tomorrow .ace_support.ace_constant,.ace-tomorrow .ace_variable.ace_parameter {color: #F5871F}.ace-tomorrow .ace_constant.ace_other {color: #666969}.ace-tomorrow .ace_invalid {color: #FFFFFF;background-color: #C82829}.ace-tomorrow .ace_invalid.ace_deprecated {color: #FFFFFF;background-color: #8959A8}.ace-tomorrow .ace_fold {background-color: #4271AE;border-color: #4D4D4C}.ace-tomorrow .ace_entity.ace_name.ace_function,.ace-tomorrow .ace_support.ace_function,.ace-tomorrow .ace_variable {color: #4271AE}.ace-tomorrow .ace_support.ace_class,.ace-tomorrow .ace_support.ace_type {color: #C99E00}.ace-tomorrow .ace_heading,.ace-tomorrow .ace_markup.ace_heading,.ace-tomorrow .ace_string {color: #718C00}.ace-tomorrow .ace_entity.ace_name.ace_tag,.ace-tomorrow .ace_entity.ace_other.ace_attribute-name,.ace-tomorrow .ace_meta.ace_tag,.ace-tomorrow .ace_string.ace_regexp,.ace-tomorrow .ace_variable {color: #C82829}.ace-tomorrow .ace_comment {color: #8E908C}.ace-tomorrow .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bdu3f/BwAlfgctduB85QAAAABJRU5ErkJggg==) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)})
+ace.define("ace/theme/tomorrow",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-tomorrow",t.cssText=".ace-tomorrow .ace_gutter {background: #f6f6f6;color: #4D4D4C}.ace-tomorrow .ace_print-margin {width: 1px;background: #f6f6f6}.ace-tomorrow {background-color: #FFFFFF;color: #4D4D4C}.ace-tomorrow .ace_cursor {color: #AEAFAD}.ace-tomorrow .ace_marker-layer .ace_selection {background: #D6D6D6}.ace-tomorrow.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FFFFFF;}.ace-tomorrow .ace_marker-layer .ace_step {background: rgb(255, 255, 0)}.ace-tomorrow .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #D1D1D1}.ace-tomorrow .ace_marker-layer .ace_active-line {background: #EFEFEF}.ace-tomorrow .ace_gutter-active-line {background-color : #dcdcdc}.ace-tomorrow .ace_marker-layer .ace_selected-word {border: 1px solid #D6D6D6}.ace-tomorrow .ace_invisible {color: #D1D1D1}.ace-tomorrow .ace_keyword,.ace-tomorrow .ace_meta,.ace-tomorrow .ace_storage,.ace-tomorrow .ace_storage.ace_type,.ace-tomorrow .ace_support.ace_type {color: #8959A8}.ace-tomorrow .ace_keyword.ace_operator {color: #3E999F}.ace-tomorrow .ace_constant.ace_character,.ace-tomorrow .ace_constant.ace_language,.ace-tomorrow .ace_constant.ace_numeric,.ace-tomorrow .ace_keyword.ace_other.ace_unit,.ace-tomorrow .ace_support.ace_constant,.ace-tomorrow .ace_variable.ace_parameter {color: #F5871F}.ace-tomorrow .ace_constant.ace_other {color: #666969}.ace-tomorrow .ace_invalid {color: #FFFFFF;background-color: #C82829}.ace-tomorrow .ace_invalid.ace_deprecated {color: #FFFFFF;background-color: #8959A8}.ace-tomorrow .ace_fold {background-color: #4271AE;border-color: #4D4D4C}.ace-tomorrow .ace_entity.ace_name.ace_function,.ace-tomorrow .ace_support.ace_function,.ace-tomorrow .ace_variable {color: #4271AE}.ace-tomorrow .ace_support.ace_class,.ace-tomorrow .ace_support.ace_type {color: #C99E00}.ace-tomorrow .ace_heading,.ace-tomorrow .ace_markup.ace_heading,.ace-tomorrow .ace_string {color: #718C00}.ace-tomorrow .ace_entity.ace_name.ace_tag,.ace-tomorrow .ace_entity.ace_other.ace_attribute-name,.ace-tomorrow .ace_meta.ace_tag,.ace-tomorrow .ace_string.ace_regexp,.ace-tomorrow .ace_variable {color: #C82829}.ace-tomorrow .ace_comment {color: #8E908C}.ace-tomorrow .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bdu3f/BwAlfgctduB85QAAAABJRU5ErkJggg==) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)})

editor/vendor/jsonata/formatter.js

@@ -107,30 +107,51 @@
     jsonata.format = formatExpression;
     jsonata.functions =
     {
-        '$append':{ args:['array','array'] },
-        '$average':{ args:['value'] },
-        '$boolean':{ args:['value'] },
-        '$count':{ args:['array'] },
-        '$exists':{ args:['value'] },
-        '$join':{ args:['array','separator'] },
-        '$keys':{ args:['object'] },
-        '$length':{ args:['string'] },
-        '$lookup':{ args:['object','key'] },
-        '$lowercase':{ args:['string'] },
-        '$map':{ args:[] },
-        '$max':{ args:['array'] },
-        '$min':{ args:['array'] },
-        '$not':{ args:['value'] },
-        '$number':{ args:['value'] },
-        '$reduce':{ args:[] },
-        '$split':{ args:['string','separator','limit'] },
-        '$spread':{ args:['object'] },
-        '$string':{ args:['value'] },
-        '$substring':{ args:['string','start','length'] },
-        '$substringAfter':{ args:['string','chars'] },
-        '$substringBefore':{ args:['string','chars'] },
-        '$sum':{ args:['array'] },
-        '$uppercase':{ args:['string'] }
+        '$abs':{ args:[ 'number' ]},
+        '$append':{ args:[ 'array1', 'array2' ]},
+        '$average':{ args:[ 'array' ]},
+        '$base64decode':{ args:[  ]},
+        '$base64encode':{ args:[  ]},
+        '$boolean':{ args:[ 'arg' ]},
+        '$ceil':{ args:[ 'number' ]},
+        '$contains':{ args:[ 'str', 'pattern' ]},
+        '$count':{ args:[ 'array' ]},
+        '$each':{ args:[ 'object', 'function' ]},
+        '$exists':{ args:[ 'arg' ]},
+        '$filter':{ args:[ 'array', 'function' ]},
+        '$floor':{ args:[ 'number' ]},
+        '$join':{ args:[ 'array', 'separator' ]},
+        '$keys':{ args:[ 'object' ]},
+        '$length':{ args:[ 'str' ]},
+        '$lookup':{ args:[ 'object', 'key' ]},
+        '$lowercase':{ args:[ 'str' ]},
+        '$map':{ args:[ 'array', 'function' ]},
+        '$match':{ args:[ 'str', 'pattern', 'limit' ]},
+        '$max':{ args:[ 'array' ]},
+        '$min':{ args:[ 'array' ]},
+        '$not':{ args:[ 'arg' ]},
+        '$now':{ args:[  ]},
+        '$number':{ args:[ 'arg' ]},
+        '$power':{ args:[ 'base', 'exponent' ]},
+        '$random':{ args:[  ]},
+        '$reduce':{ args:[ 'array', 'function' , 'init' ]},
+        '$replace':{ args:[ 'str', 'pattern', 'replacement', 'limit' ]},
+        '$reverse':{ args:[ 'array' ]},
+        '$round':{ args:[ 'number', 'precision' ]},
+        '$shuffle':{ args:[ 'array' ]},
+        '$sift':{ args:[ 'object', 'function' ]},
+        '$sort':{ args:[ 'array', 'function' ]},
+        '$split':{ args:[ 'str', 'separator', 'limit' ]},
+        '$spread':{ args:[ 'object' ]},
+        '$sqrt':{ args:[ 'number' ]},
+        '$string':{ args:[ 'arg' ]},
+        '$substring':{ args:[ 'str', 'start', 'length' ]},
+        '$substringAfter':{ args:[ 'str', 'chars' ]},
+        '$substringBefore':{ args:[ 'str', 'chars' ]},
+        '$sum':{ args:[ 'array' ]},
+        '$trim':{ args:[ 'str' ]},
+        '$uppercase':{ args:[ 'str' ]},
+        '$zip':{ args:[ 'array1' ]}
     }
     jsonata.getFunctionSnippet = function(fn) {
         var snippetText = "";

editor/vendor/jsonata/mode-jsonata.js

@@ -1,4 +1,4 @@
-define("ace/mode/jsonata",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules","ace/worker/worker_client","ace/mode/text"], function(require, exports, module) {
+ace.define("ace/mode/jsonata",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules","ace/worker/worker_client","ace/mode/text"], function(require, exports, module) {
 
     "use strict";
 
@@ -18,13 +18,13 @@ define("ace/mode/jsonata",["require","exports","module","ace/lib/oop","ace/mode/
 
         var keywordMapper = this.createKeywordMapper({
             "keyword.operator":
-                "and|or|in",
+            "and|or|in",
             "constant.language":
-                "null|Infinity|NaN|undefined",
+            "null|Infinity|NaN|undefined",
             "constant.language.boolean":
-                "true|false",
+            "true|false",
             "storage.type":
-                "function"
+            "function"
         }, "identifier");
         this.$rules = {
             "start" : [
@@ -47,33 +47,33 @@ define("ace/mode/jsonata",["require","exports","module","ace/lib/oop","ace/mode/
                     regex : /[+-]?\d[\d_]*(?:(?:\.\d*)?(?:[eE][+-]?\d+)?)?\b/
                 },
                 {   token: "keyword",
-                    regex: /λ/
-                },
-                {
-                    token: "keyword",
-                    regex: jsonataFunctions
-                },
-                {
-                    token : keywordMapper,
-                    regex : "[a-zA-Z\\$_\u00a1-\uffff][a-zA-Z\\d\\$_\u00a1-\uffff]*"
-                },
-                {
-                    token : "punctuation.operator",
-                    regex : /[.](?![.])/
-                },
-                {
-                    token : "keyword.operator",
-                    regex : /\|\||<=|>=|\.\.|\*\*|!=|:=|[=<>`!$%&*+\-~\/^]/,
-                    next  : "start"
-                },
-                {
-                    token : "punctuation.operator",
-                    regex : /[?:,;.]/,
-                    next  : "start"
-                },
-                {
-                    token : "paren.lparen",
-                    regex : /[\[({]/,
+                regex: /λ/
+            },
+            {
+                token: "keyword",
+                regex: jsonataFunctions
+            },
+            {
+                token : keywordMapper,
+                regex : "[a-zA-Z\\$_\u00a1-\uffff][a-zA-Z\\d\\$_\u00a1-\uffff]*"
+            },
+            {
+                token : "punctuation.operator",
+                regex : /[.](?![.])/
+            },
+            {
+                token : "keyword.operator",
+                regex : /\|\||<=|>=|\.\.|\*\*|!=|:=|[=<>`!$%&*+\-~\/^]/,
+                next  : "start"
+            },
+            {
+                token : "punctuation.operator",
+                regex : /[?:,;.]/,
+                next  : "start"
+            },
+            {
+                token : "paren.lparen",
+                regex : /[\[({]/,
                     next  : "start"
                 },
                 {

editor/vendor/jsonata/snippets-jsonata.js

@@ -1,11 +1,11 @@
-define("ace/snippets/jsonata",["require","exports","module"], function(require, exports, module) {
-"use strict";
-var snippetText = "";
-for (var fn in jsonata.functions) {
-	if (jsonata.functions.hasOwnProperty(fn)) {
-		snippetText += "# "+fn+"\nsnippet "+fn+"\n\t"+jsonata.getFunctionSnippet(fn)+"\n"
+ace.define("ace/snippets/jsonata",["require","exports","module"], function(require, exports, module) {
+	"use strict";
+	var snippetText = "";
+	for (var fn in jsonata.functions) {
+		if (jsonata.functions.hasOwnProperty(fn)) {
+			snippetText += "# "+fn+"\nsnippet "+fn+"\n\t"+jsonata.getFunctionSnippet(fn)+"\n"
+		}
 	}
-}
-exports.snippetText = snippetText;
-exports.scope = "jsonata";
+	exports.snippetText = snippetText;
+	exports.scope = "jsonata";
 });

nodes/core/analysis/72-sentiment.html

@@ -22,11 +22,22 @@
 </script>
 
 <script type="text/x-red" data-help-name="sentiment">
-    <p>Analyses the <code>msg.payload</code> and adds a <code>msg.sentiment</code> object
-    that contains the resulting AFINN-111 sentiment score as <code>msg.sentiment.score</code>.</p>
+    <p>Analyses the <code>payload</code> and adds a <code>sentiment</code> object.</p>
+    <h3>Outputs</h3>
+    <dl class="message-properties">
+        <dt>sentiment <span class="property-type">object</span></dt>
+        <dd>contains the resulting AFINN-111 sentiment.</dd>
+        <dt>sentiment.score <span class="property-type">number</span></dt>
+        <dd>the sentiment score.</dd>
+    </dl>
+    <h3>Inputs</h3>
+    <dl class="message-properties">
+        <dt>overrides <span class="property-type">object</span></dt>
+        <dd>an object of word score overrides can be supplied - <code>{ word:score,... }</code>.</dd>
+    </dl>
+    <h3>Details</h3>
     <p>A score greater than zero is positive and less than zero is negative.</p>
     <p>The score typically ranges from -5 to +5, but can go higher and lower.</p>
-    <p>An object of word score overrides can be supplied as <code>msg.overrides</code>.</p>
     <p>See <a href="https://github.com/thisandagain/sentiment/blob/master/README.md" target="_blank">the Sentiment docs here</a>.</p>
 </script>
 

nodes/core/core/20-inject.html

@@ -88,7 +88,7 @@
     <div class="form-row inject-time-row hidden" id="inject-time-row-time">
         <span data-i18n="inject.at"></span> <input id="inject-time-time" value="12:00"></input><br/>
         <div id="inject-time-time-days" class="inject-time-days">
-            <div style="display: inline-block; vertical-align: top;margin-right: 5px;">on </div>
+            <div style="display: inline-block; vertical-align: top;margin-right: 5px;" data-i18n="inject.on"></div>
             <div style="display:inline-block;">
                 <div>
                     <label><input type='checkbox' checked value='1'/> <span data-i18n="inject.days.0"></span></label>
@@ -150,22 +150,26 @@
     }
 </style>
 <script type="text/x-red" data-help-name="inject">
-    <p>Pressing the button on the left side of the node allows a message on a topic
-       to be injected into the flow.</p>
-    <p>The payload defaults to the current time in millisecs since 1970, but can
-       also be set to various other javascript types.</p>
-    <p>The repeat function allows the payload to be sent on the required schedule.</p>
-    <p>The <i>Inject once at start</i> option actually waits a short interval before firing
-       to give other nodes a chance to instantiate properly.</p>
-    <p>The <i>Flow</i> and <i>Global</i> options allow one to inject a flow or global
-        context value.
-    </p>
-    <p><b>Note: </b>"Interval between times" and "at a specific time" uses cron.
-       This means that 20 minutes will be at the next hour, 20 minutes past and
-       40 minutes past - not in 20 minutes time. If you want every 20 minutes
-       from now - use the "interval" option.</p>
-    <p><b>Note: </b>all string input is escaped. To add a carriage return to a string
-    you should use a following function.</p>
+<p>Injects a message into a flow either manually or at regular intervals. The message
+payload can be a variety of types, including strings, JavaScript objects or the current time.</p>
+<h3>Outputs</h3>
+<dl class="message-properties">
+    <dt>payload<span class="property-type">various</span></dt>
+    <dd>The configured payload of the message.</dd>
+    <dt class="optional">topic <span class="property-type">string</span></dt>
+    <dd>An optional property that can be configured in the node.</dd>
+</dl>
+<h3>Details</h3>
+<p>The Inject node can initiate a flow with a specific payload value.
+The default payload is a timestamp of the current time in millisecs since January 1st, 1970.</p>
+<p>The node also supports injecting strings, numbers, booleans, JavaScript objects, or flow/global context values.</p>
+<p>By default, the node is triggered manually by clicking on its button within the editor. It can also be set to
+inject at regular intervals or according to a schedule.</p>
+<p>It can also be configured to inject once each time the flows are started.</p>
+<p><b>Note</b>: The <i>"Interval between times"</i> and <i>"at a specific time"</i> options use the standard cron system.
+This means that 20 minutes will be at the next hour, 20 minutes past and 40 minutes past - not in 20 minutes time.
+If you want every 20 minutes from now - use the <i>"interval"</i> option.</p>
+<p><b>Note</b>: To include a newline in a string you must use a Function node to create the payload.</p>
 </script>
 
 <script type="text/javascript">
@@ -177,13 +181,25 @@
             topic: {value:""},
             payload: {value:"", validate: RED.validators.typedInput("payloadType")},
             payloadType: {value:"date"},
-            repeat: {value:""},
+            repeat: {value:"", validate:function(v) { return ((v === "") || (RED.validators.number(v) && (v >= 0))) }},
             crontab: {value:""},
             once: {value:false}
         },
+        icon: "inject.png",
         inputs:0,
         outputs:1,
-        icon: "inject.png",
+        outputLabels: function(index) {
+            var labels = { str:"string", num:"number", bool:"boolean", json:"object", flow:"flow context", global:"global context" };
+            var lab = labels[this.payloadType] || this.payloadType;
+            if (lab === "object") {
+                try {
+                    lab = typeof JSON.parse(this.payload);
+                    if (lab === "object") {
+                        if (Array.isArray(JSON.parse(this.payload))) { lab = "Array"; }
+                    }
+                } catch(e) { lab = "Invalid JSON Object"; }
+            }
+            return lab; },
         label: function() {
             var suffix = "";
             // if fire once then add small indication
@@ -191,7 +207,7 @@
                 suffix = " ¹";
             }
             // but replace with repeat one if set to repeat
-            if (this.repeat || this.crontab) {
+            if ((this.repeat && this.repeat != 0) || this.crontab) {
                 suffix = " ↻";
             }
             if (this.name) {
@@ -240,7 +256,7 @@
             $("#node-input-payload").typedInput({
                 default: 'str',
                 typeField: $("#node-input-payloadType"),
-                types:['flow','global','str','num','bool','json','date']
+                types:['flow','global','str','num','bool','json','bin','date']
             });
 
             $("#inject-time-type-select").change(function() {
@@ -248,7 +264,7 @@
                 var id = $("#inject-time-type-select").val();
                 $(".inject-time-row").hide();
                 $("#inject-time-row-"+id).show();
-                if ((id == "none") || (id == "interval")) {
+                if ((id == "none") || (id == "interval") || (id == "interval-time")) {
                     $("#node-once").show();
                 }
                 else {
@@ -258,7 +274,7 @@
             });
 
             $(".inject-time-times").each(function() {
-                for (var i=0;i<24;i++) {
+                for (var i=0; i<24; i++) {
                     var l = (i<10?"0":"")+i+":00";
                     $(this).append($("<option></option>").val(i).text(l));
                 }
@@ -268,7 +284,7 @@
                 var start = Number($("#inject-time-interval-time-start").val());
                 var end = Number($("#inject-time-interval-time-end").val());
                 $("#inject-time-interval-time-end option").remove();
-                for (var i=start+1;i<25;i++) {
+                for (var i=start+1; i<25; i++) {
                     var l = (i<10?"0":"")+i+":00";
                     if (i==24) {
                         l = "00:00";
@@ -492,8 +508,19 @@
             $("#node-input-crontab").val(crontab);
         },
         button: {
+            enabled: function() {
+                return !this.changed
+            },
             onclick: function() {
-                var label = (this.name||this.payload).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+                if (this.changed) {
+                    return RED.notify(RED._("notification.warning", {message:RED._("notification.warnings.undeployedChanges")}),"warning");
+                }
+                var label = (this.name||this.payload);
+                if (label.length > 30) {
+                    label = label.substring(0,50)+"...";
+                }
+                label = label.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+
                 if (this.payloadType === "date") { label = this._("inject.timestamp"); }
                 if (this.payloadType === "none") { label = this._("inject.blank"); }
                 var node = this;

nodes/core/core/25-catch.html

@@ -1,18 +1,3 @@
-<!--
-  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.
--->
 
 <script type="text/x-red" data-template-name="catch">
     <div class="form-row">
@@ -41,25 +26,28 @@
 </script>
 <script type="text/x-red" data-help-name="catch">
     <p>Catch errors thrown by nodes on the same tab.</p>
-    <p>If a node throws a error whilst handling a message, the flow will typically
+    <h3>Outputs</h3>
+    <dl class="message-properties">
+        <dt>error.message <span class="property-type">string</span></dt>
+        <dd>the error message.</dd>
+        <dt>error.source.id <span class="property-type">string</span></dt>
+        <dd>the id of the node that threw the error.</dd>
+        <dt>error.source.type <span class="property-type">string</span></dt>
+        <dd>the type of the node that threw the error.</dd>
+        <dt>error.source.name <span class="property-type">string</span></dt>
+        <dd>the name, if set, of the node that threw the error.</dd>
+    </dl>
+    <h3>Details</h3>
+    <p>If a node throws an error whilst handling a message, the flow will typically
        halt. This node can be used to catch those errors and handle them with a
        dedicated flow.</p>
-    <p>The node will catch errors thrown by any node on the same tab. If there
-       are multiple catch nodes on a tab, they will all get triggered.</p>
+    <p>By default, the node will catch errors thrown by any node on the same tab. Alternatively
+    it can be targetted at specific nodes.</p>
+    <p>When an error is thrown, all matching catch nodes will receive the message.</p>
     <p>If an error is thrown within a subflow, the error will get handled by any
-       catch nodes within the subflow. If none exists, the error is propagated
+       catch nodes within the subflow. If none exists, the error will be propagated
        up to the tab the subflow instance is on.</p>
-    <p>The message sent by this node will be the original message if the node that
-       threw the error provided it. The message will have an <code>error</code>
-       property with the following attributes:
-       <ul>
-        <li><code>message</code> : the error message</li>
-        <li><code>source.id</code> : the id of the node that threw the error</li>
-        <li><code>source.type</code> : the type of the node that threw the error</li>
-        <li><code>source.name</code> : the name, if set, of the node that threw the error</li>
-       </ul>
-   </p>
-   <p>If the message already had a <code>error</code> property, it is copied to <code>_error</code>.</p>
+   <p>If the message already has a <code>error</code> property, it is copied to <code>_error</code>.</p>
 </script>
 <style>
 #node-input-catch-target-container {
@@ -123,7 +111,7 @@
                 var editorRow = $("#dialog-form>div.node-input-target-row");
                 height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
                 $("#node-input-catch-target-container-div").css("height",height+"px");
-            }
+            };
 
             function createNodeList() {
                 var scope = node.scope || [];
@@ -233,11 +221,11 @@
 
             $("#node-input-target-sort-type").click(function(e) {
                 e.preventDefault();
-                sortNodeList('sublabel')
+                sortNodeList('sublabel');
             });
             $("#node-input-target-node-checkbox-all").change(function() {
                 $(".node-input-target-node-checkbox").prop('checked',this.checked);
-            })
+            });
 
 
 
@@ -251,7 +239,7 @@
                 }
                 node.resize();
             });
-            if (this.scope == null) {
+            if (this.scope === null) {
                 $("#node-input-scope-select").val("all");
             } else {
                 $("#node-input-scope-select").val("target");
@@ -269,7 +257,7 @@
                     if ($(this).prop("checked")) {
                         node.scope.push($(this).data('node-id'));
                     }
-                })
+                });
             }
         },
         oneditresize: function(size) {