From e910f3915daeef9ef33cb378d72ed0563682457e Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 2 Sep 2021 10:33:43 +0100
Subject: [PATCH] Initial refactor of edit dialogs to separate panes

---
 Gruntfile.js                                  |    2 +-
 .../@node-red/editor-client/src/js/nodes.js   |   19 +-
 .../editor-client/src/js/ui/editor.js         | 1852 ++++-------------
 .../js/ui/{common => editors}/colorPicker.js  |    2 +-
 .../src/js/ui/editors/iconPicker.js           |   99 +
 .../src/js/ui/editors/panes/appearance.js     |  515 +++++
 .../src/js/ui/editors/panes/description.js    |   71 +
 .../src/js/ui/editors/panes/properties.js     |  190 ++
 .../src/js/ui/editors/panes/subflowModule.js  |  181 ++
 .../js/ui/editors/panes/subflowProperties.js  |   68 +
 .../editor-client/src/js/ui/group.js          |    6 +-
 .../editor-client/src/js/ui/library.js        |    2 +-
 .../editor-client/src/js/ui/subflow.js        |  191 +-
 13 files changed, 1519 insertions(+), 1679 deletions(-)
 rename packages/node_modules/@node-red/editor-client/src/js/ui/{common => editors}/colorPicker.js (99%)
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/iconPicker.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
 create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js

diff --git a/Gruntfile.js b/Gruntfile.js
index df9939a8c..261f0c72b 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -162,7 +162,6 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js",
-                    "packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/actions.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js",
@@ -182,6 +181,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/editor.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/*.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/editors/*.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/*.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/event-log.js",
diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
index e623b3b0f..2d442eea9 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js
@@ -592,18 +592,17 @@ RED.nodes = (function() {
             inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
             outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
             oneditprepare: function() {
-                RED.subflow.buildEditForm("subflow",this);
-                RED.subflow.buildPropertiesForm(this);
+                if (this.type !== 'subflow') {
+                    // Whilst this definition is used for both template and instance
+                    // nodes, the work to build the edit form for the template nodes
+                    // is handled elsewhere.
+                    RED.subflow.buildEditForm("subflow",this);
+                }
             },
             oneditresize: function(size) {
-                // var rows = $(".dialog-form>div:not(.node-input-env-container-row)");
-                var height = size.height;
-                // for (var i=0; i<rows.size(); i++) {
-                //     height -= $(rows[i]).outerHeight(true);
-                // }
-                // var editorRow = $("#dialog-form>div.node-input-env-container-row");
-                // height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                $("ol.red-ui-editor-subflow-env-list").editableList('height',height);
+                if (this.type === 'subflow') {
+                    $("#node-input-env-container").editableList('height',size.height - 80);
+                }
             },
             set:{
                 module: "node-red"
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index d1cc3ed80..a2841cdde 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -20,19 +20,16 @@
 RED.editor = (function() {
 
     var editStack = [];
+    var buildingEditDialog = false;
     var editing_node = null;
     var editing_config_node = null;
-    var subflowEditor;
 
     var customEditTypes = {};
+    var editPanes = {};
+    var filteredEditPanes = [];
 
     var editTrayWidthCache = {};
 
-    function getCredentialsURL(nodeType, nodeID) {
-        var dashedType = nodeType.replace(/\s+/g, '-');
-        return  'credentials/' + dashedType + "/" + nodeID;
-    }
-
     /**
      * Validate a node
      * @param node - the node being validated
@@ -160,7 +157,6 @@ RED.editor = (function() {
         return valid;
     }
 
-
     function validateNodeEditor(node,prefix) {
         for (var prop in node._def.defaults) {
             if (node._def.defaults.hasOwnProperty(prop)) {
@@ -398,74 +394,95 @@ RED.editor = (function() {
         }
     }
 
-    /**
-     * Update the node credentials from the edit form
-     * @param node - the node containing the credentials
-     * @param credDefinition - definition of the credentials
-     * @param prefix - prefix of the input fields
-     * @return {boolean} whether anything has changed
-     */
-    function updateNodeCredentials(node, credDefinition, prefix) {
-        var changed = false;
-        if (!node.credentials) {
-            node.credentials = {_:{}};
-        } else if (!node.credentials._) {
-            node.credentials._ = {};
-        }
-
-        for (var cred in credDefinition) {
-            if (credDefinition.hasOwnProperty(cred)) {
-                var input = $("#" + prefix + '-' + cred);
-                if (input.length > 0) {
-                    var value = input.val();
-                    if (credDefinition[cred].type == 'password') {
-                        node.credentials['has_' + cred] = (value !== "");
-                        if (value == '__PWRD__') {
-                            continue;
-                        }
-                        changed = true;
-
-                    }
-                    node.credentials[cred] = value;
-                    if (value != node.credentials._[cred]) {
-                        changed = true;
-                    }
-                }
-            }
-        }
-        return changed;
-    }
-
     /**
      * Prepare all of the editor dialog fields
+     * @param trayBody - the tray body to populate
+     * @param nodeEditPanes - array of edit pane ids to add to the dialog
      * @param node - the node being edited
      * @param definition - the node definition
      * @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
+     * @param default - the id of the tab to show by default
      */
-    function prepareEditDialog(node,definition,prefix,done) {
-        for (var d in definition.defaults) {
-            if (definition.defaults.hasOwnProperty(d)) {
-                if (definition.defaults[d].type) {
-                    if (!definition.defaults[d]._type.array) {
-                        var configTypeDef = RED.nodes.getType(definition.defaults[d].type);
-                        if (configTypeDef && configTypeDef.category === 'config') {
-                            if (configTypeDef.exclusive) {
-                                prepareConfigNodeButton(node,d,definition.defaults[d].type,prefix);
-                            } else {
-                                prepareConfigNodeSelect(node,d,definition.defaults[d].type,prefix);
-                            }
-                        } else {
-                            console.log("Unknown type:", definition.defaults[d].type);
-                            preparePropertyEditor(node,d,prefix,definition.defaults);
-                        }
-                    }
-                } else {
-                    preparePropertyEditor(node,d,prefix,definition.defaults);
-                }
-                attachPropertyChangeHandler(node,definition.defaults,d,prefix);
-            }
-        }
+    function prepareEditDialog(trayBody, nodeEditPanes, node, definition, prefix, defaultTab, done) {
+        var finishedBuilding = false;
         var completePrepare = function() {
+
+            var editorTabEl = $('<ul></ul>').appendTo(trayBody);
+            var editorContent = $('<div></div>').appendTo(trayBody);
+
+            var editorTabs = RED.tabs.create({
+                element:editorTabEl,
+                onchange:function(tab) {
+                    editorContent.children().hide();
+                    if (tab.onchange) {
+                        tab.onchange.call(tab);
+                    }
+                    tab.content.show();
+                    if (finishedBuilding) {
+                        RED.tray.resize();
+                    }
+                },
+                collapsible: true,
+                menu: false
+            });
+
+            var activeEditPanes = [];
+            nodeEditPanes.forEach(function(id) {
+                try {
+                    var editPaneDefinition = editPanes[id];
+                    if (editPaneDefinition) {
+                        if (typeof editPaneDefinition === 'function') {
+                            editPaneDefinition = editPaneDefinition.call(editPaneDefinition);
+                        }
+                        var editTab = {
+                            id: id,
+                            label: editPaneDefinition.label,
+                            name: editPaneDefinition.name,
+                            iconClass: editPaneDefinition.iconClass,
+                            content: editPaneDefinition.create.call(editPaneDefinition,editorContent,node).hide(),
+                            onchange: function() {
+                                if (editPaneDefinition.onchange) {
+                                    editPaneDefinition.onchange.call(editPaneDefinition,node)
+                                }
+                            }
+                        }
+                        editorTabs.addTab(editTab);
+                        activeEditPanes.push(editPaneDefinition);
+                    } else {
+                        console.warn("Unregisted edit pane:",id)
+                    }
+                } catch(err) {
+                    console.log(id,err);
+                }
+            });
+
+            for (var d in definition.defaults) {
+                if (definition.defaults.hasOwnProperty(d)) {
+                    if (definition.defaults[d].type) {
+                        if (!definition.defaults[d]._type.array) {
+                            var configTypeDef = RED.nodes.getType(definition.defaults[d].type);
+                            if (configTypeDef && configTypeDef.category === 'config') {
+                                if (configTypeDef.exclusive) {
+                                    prepareConfigNodeButton(node,d,definition.defaults[d].type,prefix);
+                                } else {
+                                    prepareConfigNodeSelect(node,d,definition.defaults[d].type,prefix);
+                                }
+                            } else {
+                                console.log("Unknown type:", definition.defaults[d].type);
+                                preparePropertyEditor(node,d,prefix,definition.defaults);
+                            }
+                        }
+                    } else {
+                        preparePropertyEditor(node,d,prefix,definition.defaults);
+                    }
+                    attachPropertyChangeHandler(node,definition.defaults,d,prefix);
+                }
+            }
+
+            if (!/^subflow:/.test(definition.type)) {
+                populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
+            }
+
             if (definition.oneditprepare) {
                 try {
                     definition.oneditprepare.call(node);
@@ -474,6 +491,7 @@ RED.editor = (function() {
                     console.log(err.stack);
                 }
             }
+
             // Now invoke any change handlers added to the fields - passing true
             // to prevent full node validation from being triggered each time
             for (var d in definition.defaults) {
@@ -503,8 +521,12 @@ RED.editor = (function() {
                 }
             }
             validateNodeEditor(node,prefix);
+            finishedBuilding = true;
+            if (defaultTab) {
+                editorTabs.activateTab(defaultTab);
+            }
             if (done) {
-                done();
+                done(activeEditPanes);
             }
         }
         if (definition.credentials || /^subflow:/.test(definition.type) || (node.type === "group")) {
@@ -512,13 +534,14 @@ RED.editor = (function() {
                 populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
                 completePrepare();
             } else {
-                getNodeCredentials(node.type, node.id, function(data) {
+                var nodeType = node.type;
+                if  (/^subflow:/.test(nodeType)) {
+                    nodeType = "subflow"
+                }
+                getNodeCredentials(nodeType, node.id, function(data) {
                     if (data) {
                         node.credentials = data;
                         node.credentials._ = $.extend(true,{},data);
-                        if (!/^subflow:/.test(definition.type)) {
-                            populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
-                        }
                     }
                     completePrepare();
                 });
@@ -598,13 +621,6 @@ RED.editor = (function() {
             $(this).attr("data-i18n",keys.join(";"));
         });
 
-        if (type === "subflow-template") {
-            // This is the 'edit properties' dialog for a subflow template
-            // TODO: this needs to happen later in the dialog open sequence
-            //       so that credentials can be loaded prior to building the form
-            RED.subflow.buildEditForm(type,node);
-        }
-
         // Add dummy fields to prevent 'Enter' submitting the form in some
         // cases, and also prevent browser auto-fill of password
         //  - the elements cannot be hidden otherwise Chrome will ignore them.
@@ -617,506 +633,147 @@ RED.editor = (function() {
         return dialogForm;
     }
 
-    function refreshLabelForm(container,node) {
-
-        var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
-        var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
-
-        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
-        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
-
-        var inputCount;
-        var formInputs = $("#node-input-inputs").val();
-        if (formInputs === undefined) {
-            if (node.type === 'subflow') {
-                inputCount = node.in.length;
-            } else {
-                inputCount = node.inputs || node._def.inputs || 0;
-            }
-        } else {
-            inputCount = Math.min(1,Math.max(0,parseInt(formInputs)));
-            if (isNaN(inputCount)) {
-                inputCount = 0;
-            }
-        }
-
-        var children = inputsDiv.children();
-        var childCount = children.length;
-        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
-            childCount--;
-        }
-
-        if (childCount < inputCount) {
-            if (childCount === 0) {
-                // remove the 'none' placeholder
-                $(children[0]).remove();
-            }
-            for (i = childCount;i<inputCount;i++) {
-                buildLabelRow("input",i,"",inputPlaceholder).appendTo(inputsDiv);
-            }
-        } else if (childCount > inputCount) {
-            for (i=inputCount;i<childCount;i++) {
-                $(children[i]).remove();
-            }
-            if (inputCount === 0) {
-                buildLabelRow().appendTo(inputsDiv);
-            }
-        }
-
-        var outputCount;
-        var i;
-        var formOutputs = $("#node-input-outputs").val();
-
-        if (formOutputs === undefined) {
-            if (node.type === 'subflow') {
-                outputCount = node.out.length;
-            } else {
-                inputCount = node.outputs || node._def.outputs || 0;
-            }
-        } else if (isNaN(formOutputs)) {
-            var outputMap = JSON.parse(formOutputs);
-            var keys = Object.keys(outputMap);
-            children = outputsDiv.children();
-            childCount = children.length;
-            if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
-                childCount--;
-            }
-
-            outputCount = 0;
-            var rows = [];
-            keys.forEach(function(p) {
-                var row = $("#red-ui-editor-node-label-form-output-"+p).parent();
-                if (row.length === 0 && outputMap[p] !== -1) {
-                    if (childCount === 0) {
-                        $(children[0]).remove();
-                        childCount = -1;
+    function handleEditSave(editing_node, editState) {
+        var d;
+        if (editing_node._def.oneditsave) {
+            var oldValues = {};
+            for (d in editing_node._def.defaults) {
+                if (editing_node._def.defaults.hasOwnProperty(d)) {
+                    if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") {
+                        oldValues[d] = editing_node[d];
+                    } else {
+                        oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v;
                     }
-                    row = buildLabelRow("output",p,"",outputPlaceholder);
+                }
+            }
+
+            try {
+                var rc = editing_node._def.oneditsave.call(editing_node);
+                if (rc === true) {
+                    editState.changed = true;
+                }
+            } catch(err) {
+                console.warn("oneditsave",editing_node.id,editing_node.type,err.toString());
+            }
+
+            for (d in editing_node._def.defaults) {
+                if (editing_node._def.defaults.hasOwnProperty(d)) {
+                    if (oldValues[d] === null || typeof oldValues[d] === "string" || typeof oldValues[d] === "number") {
+                        if (oldValues[d] !== editing_node[d]) {
+                            editState.changes[d] = oldValues[d];
+                            editState.changed = true;
+                        }
+                    } else if (editing_node.type !== 'group' || d !== "nodes") {
+                        if (JSON.stringify(oldValues[d]) !== JSON.stringify(editing_node[d])) {
+                            editState.changes[d] = oldValues[d];
+                            editState.changed = true;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    function defaultConfigNodeSort(A,B) {
+        if (A.__label__ < B.__label__) {
+            return -1;
+        } else if (A.__label__ > B.__label__) {
+            return 1;
+        }
+        return 0;
+    }
+
+    function updateConfigNodeSelect(name,type,value,prefix) {
+        // if prefix is null, there is no config select to update
+        if (prefix) {
+            var button = $("#"+prefix+"-edit-"+name);
+            if (button.length) {
+                if (value) {
+                    button.text(RED._("editor.configEdit"));
                 } else {
-                    row.detach();
+                    button.text(RED._("editor.configAdd"));
                 }
-                if (outputMap[p] !== -1) {
-                    outputCount++;
-                    rows.push({i:parseInt(outputMap[p]),r:row});
-                }
-            });
-            rows.sort(function(A,B) {
-                return A.i-B.i;
-            })
-            rows.forEach(function(r,i) {
-                r.r.find("label").text((i+1)+".");
-                r.r.appendTo(outputsDiv);
-            })
-            if (rows.length === 0) {
-                buildLabelRow("output",i,"").appendTo(outputsDiv);
+                $("#"+prefix+"-"+name).val(value);
             } else {
 
-            }
-        } else {
-            outputCount = Math.max(0,parseInt(formOutputs));
-        }
-        children = outputsDiv.children();
-        childCount = children.length;
-        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
-            childCount--;
-        }
-        if (childCount < outputCount) {
-            if (childCount === 0) {
-                // remove the 'none' placeholder
-                $(children[0]).remove();
-            }
-            for (i = childCount;i<outputCount;i++) {
-                buildLabelRow("output",i,"").appendTo(outputsDiv);
-            }
-        } else if (childCount > outputCount) {
-            for (i=outputCount;i<childCount;i++) {
-                $(children[i]).remove();
-            }
-            if (outputCount === 0) {
-                buildLabelRow().appendTo(outputsDiv);
-            }
-        }
-    }
-    function buildLabelRow(type, index, value, placeHolder) {
-        var result = $('<div>',{class:"red-ui-editor-node-label-form-row"});
-        if (type === undefined) {
-            $('<span>').text(RED._("editor.noDefaultLabel")).appendTo(result);
-            result.addClass("red-ui-editor-node-label-form-none");
-        } else {
-            result.addClass("");
-            var id = "red-ui-editor-node-label-form-"+type+"-"+index;
-            $('<label>',{for:id}).text((index+1)+".").appendTo(result);
-            var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
-            var clear = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
-            clear.on("click", function(evt) {
-                evt.preventDefault();
-                input.val("");
-            })
-        }
-        return result;
-    }
-    function showIconPicker(container, backgroundColor, iconPath, faOnly, done) {
-        var picker = $('<div class="red-ui-icon-picker">');
-        var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(picker);
-        searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({
-            delay: 50,
-            change: function() {
-                var searchTerm = $(this).val().trim();
-                if (searchTerm === "") {
-                    iconList.find(".red-ui-icon-list-module").show();
-                    iconList.find(".red-ui-icon-list-icon").show();
-                } else {
-                    iconList.find(".red-ui-icon-list-module").hide();
-                    iconList.find(".red-ui-icon-list-icon").each(function(i,n) {
-                        if ($(n).data('icon').indexOf(searchTerm) === -1) {
-                            $(n).hide();
-                        } else {
-                            $(n).show();
-                        }
-                    });
+                var select = $("#"+prefix+"-"+name);
+                var node_def = RED.nodes.getType(type);
+                select.children().remove();
+
+                var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
+                if (!activeWorkspace) {
+                    activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
                 }
-            }
-        });
 
-        var row = $('<div>').appendTo(picker);
-        var iconList = $('<div class="red-ui-icon-list">').appendTo(picker);
-        var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker);
-        var summary = $('<span>').appendTo(metaRow);
-        var resetButton = $('<button type="button" class="red-ui-button red-ui-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
-            e.preventDefault();
-            iconPanel.hide();
-            done(null);
-        });
-        if (!backgroundColor && faOnly) {
-            iconList.addClass("red-ui-icon-list-dark");
-        }
-        setTimeout(function() {
-            var iconSets = RED.nodes.getIconSets();
-            Object.keys(iconSets).forEach(function(moduleName) {
-                if (faOnly && (moduleName !== "font-awesome")) {
-                    return;
-                }
-                var icons = iconSets[moduleName];
-                if (icons.length > 0) {
-                    // selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
-                    var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
-                    $('<i class="fa fa-cube"></i>').prependTo(header);
-                    icons.forEach(function(icon) {
-                        var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
-                        var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
-                        var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
-                        iconDiv.data('icon',icon_url);
-                        if (backgroundColor) {
-                            nodeDiv.css({
-                                'backgroundColor': backgroundColor
-                            });
-                            var borderColor = RED.utils.getDarkerColor(backgroundColor);
-                            if (borderColor !== backgroundColor) {
-                                nodeDiv.css('border-color',borderColor)
-                            }
+                var configNodes = [];
 
-                        }
-                        var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
-                        RED.utils.createIconElement(icon_url, iconContainer, true);
-
-                        if (iconPath.module === moduleName && iconPath.file === icon) {
-                            iconDiv.addClass("selected");
-                        }
-                        iconDiv.on("mouseover", function() {
-                            summary.text(icon);
-                        })
-                        iconDiv.on("mouseout", function() {
-                            summary.html("&nbsp;");
-                        })
-                        iconDiv.on("click", function() {
-                            iconPanel.hide();
-                            done(moduleName+"/"+icon);
-                        })
-                    })
-                }
-            });
-            setTimeout(function() {
-                spinner.remove();
-            },50);
-        },300);
-        var spinner = RED.utils.addSpinnerOverlay(iconList,true);
-        var iconPanel = RED.popover.panel(picker);
-        iconPanel.show({
-            target: container
-        })
-
-
-        picker.slideDown(100);
-        searchInput.trigger("focus");
-    }
-
-    function buildAppearanceForm(container,node) {
-        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
-
-        var i,row;
-
-        if (node.type === "subflow") {
-            var categoryRow = $("<div/>", {
-                class: "form-row"
-            }).appendTo(dialogForm);
-            $("<label/>", {
-                for: "subflow-appearance-input-category",
-                "data-i18n": "editor:subflow.category"
-            }).appendTo(categoryRow);
-            var categorySelector = $("<select/>", {
-                id: "subflow-appearance-input-category"
-            }).css({
-                width: "250px"
-            }).appendTo(categoryRow);
-            $("<input/>", {
-                type: "text",
-                id: "subflow-appearance-input-custom-category"
-            }).css({
-                display: "none",
-                "margin-left": "10px",
-                width: "calc(100% - 250px)"
-            }).appendTo(categoryRow);
-
-            var categories = RED.palette.getCategories();
-            categories.sort(function(A,B) {
-                return A.label.localeCompare(B.label);
-            })
-            categories.forEach(function(cat) {
-                categorySelector.append($("<option/>").val(cat.id).text(cat.label));
-            })
-            categorySelector.append($("<option/>").attr('disabled',true).text("---"));
-            categorySelector.append($("<option/>").val("_custom_").text(RED._("palette.addCategory")));
-
-            $("#subflow-appearance-input-category").on("change", function() {
-                var val = $(this).val();
-                if (val === "_custom_") {
-                    $("#subflow-appearance-input-category").width(120);
-                    $("#subflow-appearance-input-custom-category").show();
-                } else {
-                    $("#subflow-appearance-input-category").width(250);
-                    $("#subflow-appearance-input-custom-category").hide();
-                }
-            })
-
-            $("#subflow-appearance-input-category").val(node.category||"subflows");
-            var userCount = 0;
-            var subflowType = "subflow:"+node.id;
-
-            // RED.nodes.eachNode(function(n) {
-            //     if (n.type === subflowType) {
-            //         userCount++;
-            //     }
-            // });
-            $("#red-ui-editor-subflow-user-count")
-                .text(RED._("subflow.subflowInstances", {count:node.instances.length})).show();
-        }
-
-        $('<div class="form-row">'+
-            '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
-            '<span style="margin-right: 2px;"/>'+
-            '<input type="checkbox" id="node-input-show-label"/>'+
-        '</div>').appendTo(dialogForm);
-
-        $("#node-input-show-label").toggleButton({
-            enabledLabel: RED._("editor.show"),
-            disabledLabel: RED._("editor.hide")
-        })
-
-        if (!node.hasOwnProperty("l")) {
-            // Show label if type not link
-            node.l = !/^link (in|out)$/.test(node._def.type);
-        }
-        $("#node-input-show-label").prop("checked",node.l).trigger("change");
-
-        if (node.type === "subflow") {
-            // subflow template can select its color
-            var color = node.color ? node.color : "#DDAA99";
-            var colorRow = $("<div/>", {
-                class: "form-row"
-            }).appendTo(dialogForm);
-            $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
-
-            var recommendedColors = [
-                "#DDAA99",
-                "#3FADB5", "#87A980", "#A6BBCF",
-                "#AAAA66", "#C0C0C0", "#C0DEED",
-                "#C7E9C0", "#D7D7A0", "#D8BFD8",
-                "#DAC4B4", "#DEB887", "#DEBD5C",
-                "#E2D96E", "#E6E0F8", "#E7E7AE",
-                "#E9967A", "#F3B567", "#FDD0A2",
-                "#FDF0C2", "#FFAAAA", "#FFCC66",
-                "#FFF0F0", "#FFFFFF"
-            ]
-
-            RED.colorPicker.create({
-                id: "red-ui-editor-node-color",
-                value: color,
-                palette: recommendedColors,
-                sortPalette: function (a, b) {return a.l - b.l;}
-            }).appendTo(colorRow);
-
-            $("#red-ui-editor-node-color").on('change', function(ev) {
-                // Horribly out of scope...
-                var colour = $(this).val();
-                nodeDiv.css('backgroundColor',colour);
-                var borderColor = RED.utils.getDarkerColor(colour);
-                if (borderColor !== colour) {
-                    nodeDiv.css('border-color',borderColor)
-                }
-            })
-        }
-
-
-        // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
-        if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
-            var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
-            $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
-
-            var iconButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(iconRow);
-            $('<i class="fa fa-caret-down"></i>').appendTo(iconButton);
-            var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
-            var colour = RED.utils.getNodeColor(node.type, node._def);
-            var icon_url = RED.utils.getNodeIcon(node._def,node);
-            nodeDiv.css('backgroundColor',colour);
-            var borderColor = RED.utils.getDarkerColor(colour);
-            if (borderColor !== colour) {
-                nodeDiv.css('border-color',borderColor)
-            }
-
-            var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
-            RED.utils.createIconElement(icon_url, iconContainer, true);
-
-            iconButton.on("click", function(e) {
-                e.preventDefault();
-                var iconPath;
-                var icon = $("#red-ui-editor-node-icon").val()||"";
-                if (icon) {
-                    iconPath = RED.utils.separateIconPath(icon);
-                } else {
-                    iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
-                }
-                var backgroundColor = RED.utils.getNodeColor(node.type, node._def);
-                if (node.type === "subflow") {
-                    backgroundColor = $("#red-ui-editor-node-color").val();
-                }
-                showIconPicker(iconButton,backgroundColor,iconPath,false,function(newIcon) {
-                    $("#red-ui-editor-node-icon").val(newIcon||"");
-                    var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
-                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                RED.nodes.eachConfig(function(config) {
+                    if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
+                        var label = RED.utils.getNodeLabel(config,config.id);
+                        config.__label__ = label+(config.d?" ["+RED._("workspace.disabled")+"]":"");
+                        configNodes.push(config);
+                    }
                 });
-            });
-
-            RED.popover.tooltip(iconButton, function() {
-                return $("#red-ui-editor-node-icon").val() || RED._("editor.default");
-            })
-            $('<input type="hidden" id="red-ui-editor-node-icon">').val(node.icon).appendTo(iconRow);
-        }
-
-
-        $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
-
-        var inputCount = node.inputs || node._def.inputs || 0;
-        var outputCount = node.outputs || node._def.outputs || 0;
-        if (node.type === 'subflow') {
-            inputCount = node.in.length;
-            outputCount = node.out.length;
-        }
-
-        var inputLabels = node.inputLabels || [];
-        var outputLabels = node.outputLabels || [];
-
-        var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
-        var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
-
-        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelInputs"></span><div id="red-ui-editor-node-label-form-inputs"></div></div>').appendTo(dialogForm);
-        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
-        if (inputCount > 0) {
-            for (i=0;i<inputCount;i++) {
-                buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
-            }
-        } else {
-            buildLabelRow().appendTo(inputsDiv);
-        }
-        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelOutputs"></span><div id="red-ui-editor-node-label-form-outputs"></div></div>').appendTo(dialogForm);
-        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
-        if (outputCount > 0) {
-            for (i=0;i<outputCount;i++) {
-                buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
-            }
-        } else {
-            buildLabelRow().appendTo(outputsDiv);
-        }
-    }
-
-
-    function updateLabels(editing_node, changes, outputMap) {
-        var inputLabels = $("#red-ui-editor-node-label-form-inputs").children().find("input");
-        var outputLabels = $("#red-ui-editor-node-label-form-outputs").children().find("input");
-
-        var hasNonBlankLabel = false;
-        var changed = false;
-        var newValue = inputLabels.map(function() {
-            var v = $(this).val();
-            hasNonBlankLabel = hasNonBlankLabel || v!== "";
-            return v;
-        }).toArray().slice(0,editing_node.inputs);
-        if ((editing_node.inputLabels === undefined && hasNonBlankLabel) ||
-            (editing_node.inputLabels !== undefined && JSON.stringify(newValue) !== JSON.stringify(editing_node.inputLabels))) {
-            changes.inputLabels = editing_node.inputLabels;
-            editing_node.inputLabels = newValue;
-            changed = true;
-        }
-        hasNonBlankLabel = false;
-        newValue = new Array(editing_node.outputs);
-        outputLabels.each(function() {
-            var index = $(this).attr('id').substring("red-ui-editor-node-label-form-output-".length);
-            if (outputMap && outputMap.hasOwnProperty(index)) {
-                index = parseInt(outputMap[index]);
-                if (index === -1) {
-                    return;
+                var configSortFn = defaultConfigNodeSort;
+                if (typeof node_def.sort == "function") {
+                    configSortFn = node_def.sort;
                 }
+                try {
+                    configNodes.sort(configSortFn);
+                } catch(err) {
+                    console.log("Definition error: "+node_def.type+".sort",err);
+                }
+
+                configNodes.forEach(function(cn) {
+                    $('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'></option>').text(RED.text.bidi.enforceTextDirectionWithUCC(cn.__label__)).appendTo(select);
+                    delete cn.__label__;
+                });
+
+                select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
+                window.setTimeout(function() { select.trigger("change");},50);
             }
-            var v = $(this).val();
-            hasNonBlankLabel = hasNonBlankLabel || v!== "";
-            newValue[index] = v;
-        });
-
-        if ((editing_node.outputLabels === undefined && hasNonBlankLabel) ||
-            (editing_node.outputLabels !== undefined && JSON.stringify(newValue) !== JSON.stringify(editing_node.outputLabels))) {
-            changes.outputLabels = editing_node.outputLabels;
-            editing_node.outputLabels = newValue;
-            changed = true;
         }
-        return changed;
     }
 
-    function buildDescriptionForm(container,node) {
-        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
-        var toolbarRow = $('<div></div>').appendTo(dialogForm);
-        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
-        $('<div style="height: 100%" class="node-text-editor" id="node-info-input-info-editor" ></div>').appendTo(row);
-        var nodeInfoEditor = RED.editor.createEditor({
-            id: "node-info-input-info-editor",
-            mode: 'ace/mode/markdown',
-            value: ""
+    function getNodeCredentials(type, id, done) {
+        var timeoutNotification;
+        var intialTimeout = setTimeout(function() {
+            timeoutNotification = RED.notify($('<p data-i18n="[prepend]editor.loadCredentials">  <img src="red/images/spin.svg"/></p>').i18n(),{fixed: true})
+        },800);
+
+        var dashedType = type.replace(/\s+/g, '-');
+        var credentialsUrl = 'credentials/' + dashedType + "/" + id;
+
+        $.ajax({
+            url: credentialsUrl,
+            dataType: 'json',
+            success: function(data) {
+                if (timeoutNotification) {
+                    timeoutNotification.close();
+                    timeoutNotification = null;
+                }
+                clearTimeout(intialTimeout);
+                done(data);
+            },
+            error: function(jqXHR,status,error) {
+                if (timeoutNotification) {
+                    timeoutNotification.close();
+                    timeoutNotification = null;
+                }
+                clearTimeout(intialTimeout);
+                RED.notify(RED._("editor.errors.credentialLoadFailed"),"error")
+                done(null);
+            },
+            timeout: 30000,
         });
-        if (node.info) {
-            nodeInfoEditor.getSession().setValue(node.info, -1);
-        }
-        node.infoEditor = nodeInfoEditor;
-        return nodeInfoEditor;
     }
-var buildingEditDialog = false;
 
     function showEditDialog(node, defaultTab) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
         var editing_node = node;
-        var isDefaultIcon;
-        var defaultIcon;
-        var nodeInfoEditor;
-        var finishedBuilding = false;
         var skipInfoRefreshOnClose = false;
+        var activeEditPanes = [];
 
         editStack.push(node);
         RED.view.state(RED.state.EDITING);
@@ -1124,6 +781,7 @@ var buildingEditDialog = false;
         if (node.type.substring(0,8) == "subflow:") {
             type = "subflow";
         }
+
         var trayOptions = {
             title: getEditStackTitle(),
             buttons: [
@@ -1195,281 +853,40 @@ var buildingEditDialog = false;
                     text: RED._("common.label.done"),
                     class: "primary",
                     click: function() {
-                        var changes = {};
-                        var changed = false;
+                        var editState = {
+                            changes: {},
+                            changed: false,
+                            outputMap: null
+                        }
                         var wasDirty = RED.nodes.dirty();
-                        var d;
-                        var outputMap;
 
-                        if (editing_node._def.oneditsave) {
-                            var oldValues = {};
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") {
-                                        oldValues[d] = editing_node[d];
-                                    } else {
-                                        oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v;
-                                    }
-                                }
-                            }
-                            try {
-                                var rc = editing_node._def.oneditsave.call(editing_node);
-                                if (rc === true) {
-                                    changed = true;
-                                }
-                            } catch(err) {
-                                console.warn("oneditsave",editing_node.id,editing_node.type,err.toString());
-                            }
+                        handleEditSave(editing_node,editState)
 
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    if (oldValues[d] === null || typeof oldValues[d] === "string" || typeof oldValues[d] === "number") {
-                                        if (oldValues[d] !== editing_node[d]) {
-                                            changes[d] = oldValues[d];
-                                            changed = true;
-                                        }
-                                    } else {
-                                        if (JSON.stringify(oldValues[d]) !== JSON.stringify(editing_node[d])) {
-                                            changes[d] = oldValues[d];
-                                            changed = true;
-                                        }
-                                    }
-                                }
+                        activeEditPanes.forEach(function(pane) {
+                            if (pane.apply) {
+                                pane.apply.call(pane, editing_node, editState);
                             }
-                        }
+                        })
 
-                        var newValue;
-                        if (editing_node._def.defaults) {
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    var input = $("#node-input-"+d);
-                                    if (input.attr('type') === "checkbox") {
-                                        newValue = input.prop('checked');
-                                    } else if (input.prop("nodeName") === "select" && input.attr("multiple") === "multiple") {
-                                        // An empty select-multiple box returns null.
-                                        // Need to treat that as an empty array.
-                                        newValue = input.val();
-                                        if (newValue == null) {
-                                            newValue = [];
-                                        }
-                                    } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
-                                        newValue = input.text();
-                                    } else {
-                                        newValue = input.val();
-                                    }
-                                    if (newValue != null) {
-                                        if (d === "outputs") {
-                                            if  (newValue.trim() === "") {
-                                                continue;
-                                            }
-                                            if (isNaN(newValue)) {
-                                                outputMap = JSON.parse(newValue);
-                                                var outputCount = 0;
-                                                var outputsChanged = false;
-                                                var keys = Object.keys(outputMap);
-                                                keys.forEach(function(p) {
-                                                    if (isNaN(p)) {
-                                                        // New output;
-                                                        outputCount ++;
-                                                        delete outputMap[p];
-                                                    } else {
-                                                        outputMap[p] = outputMap[p]+"";
-                                                        if (outputMap[p] !== "-1") {
-                                                            outputCount++;
-                                                            if (outputMap[p] !== p) {
-                                                                // Output moved
-                                                                outputsChanged = true;
-                                                            } else {
-                                                                delete outputMap[p];
-                                                            }
-                                                        } else {
-                                                            // Output removed
-                                                            outputsChanged = true;
-                                                        }
-                                                    }
-                                                });
+                        var removedLinks = updateNodeProperties(editing_node, editState.outputMap);
 
-                                                newValue = outputCount;
-                                                if (outputsChanged) {
-                                                    changed = true;
-                                                }
-                                            } else {
-                                                newValue = parseInt(newValue);
-                                            }
-                                        }
-                                        if (editing_node._def.defaults[d].type) {
-                                            if (newValue == "_ADD_") {
-                                                newValue = "";
-                                            }
-                                        }
-                                        if (editing_node[d] != newValue) {
-                                            if (editing_node._def.defaults[d].type) {
-                                                // Change to a related config node
-                                                var configNode = RED.nodes.node(editing_node[d]);
-                                                if (configNode) {
-                                                    var users = configNode.users;
-                                                    users.splice(users.indexOf(editing_node),1);
-                                                    RED.events.emit("nodes:change",configNode);
-                                                }
-                                                configNode = RED.nodes.node(newValue);
-                                                if (configNode) {
-                                                    configNode.users.push(editing_node);
-                                                    RED.events.emit("nodes:change",configNode);
-                                                }
-                                            }
-                                            changes[d] = editing_node[d];
-                                            editing_node[d] = newValue;
-                                            changed = true;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                        if (editing_node._def.credentials) {
-                            var prefix = 'node-input';
-                            var credDefinition = editing_node._def.credentials;
-                            var credsChanged = updateNodeCredentials(editing_node,credDefinition,prefix);
-                            changed = changed || credsChanged;
-                        }
-                        // if (editing_node.hasOwnProperty("_outputs")) {
-                        //     outputMap = editing_node._outputs;
-                        //     delete editing_node._outputs;
-                        //     if (Object.keys(outputMap).length > 0) {
-                        //         changed = true;
-                        //     }
-                        // }
-                        var removedLinks = updateNodeProperties(editing_node,outputMap);
-
-                        if (updateLabels(editing_node, changes, outputMap)) {
-                            changed = true;
-                        }
-
-                        if (!editing_node._def.defaults || !editing_node._def.defaults.hasOwnProperty("icon")) {
-                            var icon = $("#red-ui-editor-node-icon").val()||""
-                            if (!isDefaultIcon) {
-                                if (icon !== editing_node.icon) {
-                                    changes.icon = editing_node.icon;
-                                    editing_node.icon = icon;
-                                    changed = true;
-                                }
-                            } else {
-                                if (icon !== "" && icon !== defaultIcon) {
-                                    changes.icon = editing_node.icon;
-                                    editing_node.icon = icon;
-                                    changed = true;
-                                } else {
-                                    var iconPath = RED.utils.getDefaultNodeIcon(editing_node._def, editing_node);
-                                    var currentDefaultIcon = iconPath.module+"/"+iconPath.file;
-                                    if (defaultIcon !== currentDefaultIcon) {
-                                        changes.icon = editing_node.icon;
-                                        editing_node.icon = currentDefaultIcon;
-                                        changed = true;
-                                    }
-                                }
-                            }
-                        }
-
-                        if (!$("#node-input-show-label").prop('checked')) {
-                            // Not checked - hide label
-                            if (!/^link (in|out)$/.test(node.type)) {
-                                // Not a link node - default state is true
-                                if (node.l !== false) {
-                                    changes.l = node.l
-                                    changed = true;
-                                }
-                                node.l = false;
-                            } else {
-                                // A link node - default state is false
-                                if (node.hasOwnProperty('l') && node.l) {
-                                    changes.l = node.l
-                                    changed = true;
-                                }
-                                delete node.l;
-                            }
-                        } else {
-                            // Checked - show label
-                            if (!/^link (in|out)$/.test(node.type)) {
-                                // Not a link node - default state is true
-                                if (node.hasOwnProperty('l') && !node.l) {
-                                    changes.l = node.l
-                                    changed = true;
-                                }
-                                delete node.l;
-                            } else {
-                                if (!node.l) {
-                                    changes.l = node.l
-                                    changed = true;
-                                }
-                                node.l = true;
-                            }
-                        }
                         if ($("#node-input-node-disabled").prop('checked')) {
                             if (node.d !== true) {
-                                changes.d = node.d;
-                                changed = true;
+                                editState.changes.d = node.d;
+                                editState.changed = true;
                                 node.d = true;
                             }
                         } else {
                             if (node.d === true) {
-                                changes.d = node.d;
-                                changed = true;
+                                editState.changes.d = node.d;
+                                editState.changed = true;
                                 delete node.d;
                             }
                         }
 
                         node.resize = true;
 
-                        var oldInfo = node.info;
-                        if (nodeInfoEditor) {
-                            var newInfo = nodeInfoEditor.getValue();
-                            if (!!oldInfo) {
-                                // Has existing info property
-                                if (newInfo.trim() === "") {
-                                    // New value is blank - remove the property
-                                    changed = true;
-                                    changes.info = oldInfo;
-                                    delete node.info;
-                                } else if (newInfo !== oldInfo) {
-                                    // New value is different
-                                    changed = true;
-                                    changes.info = oldInfo;
-                                    node.info = newInfo;
-                                }
-                            } else {
-                                // No existing info
-                                if (newInfo.trim() !== "") {
-                                    // New value is not blank
-                                    changed = true;
-                                    changes.info = undefined;
-                                    node.info = newInfo;
-                                }
-                            }
-                        }
-
-                        if (type === "subflow") {
-                            var old_env = editing_node.env;
-                            var new_env = RED.subflow.exportSubflowInstanceEnv(editing_node);
-                            if (new_env && new_env.length > 0) {
-                                new_env.forEach(function(prop) {
-                                    if (prop.type === "cred") {
-                                        editing_node.credentials = editing_node.credentials || {_:{}};
-                                        editing_node.credentials[prop.name] = prop.value;
-                                        editing_node.credentials['has_'+prop.name] = (prop.value !== "");
-                                        if (prop.value !== '__PWRD__') {
-                                            changed = true;
-                                        }
-                                        delete prop.value;
-                                    }
-                                });
-                            }
-                            if (!isSameObj(old_env, new_env)) {
-                                editing_node.env = new_env;
-                                changes.env = editing_node.env;
-                                changed = true;
-                            }
-                        }
-
-                        if (changed) {
+                        if (editState.changed) {
                             var wasChanged = editing_node.changed;
                             editing_node.changed = true;
                             RED.nodes.dirty(true);
@@ -1493,13 +910,13 @@ var buildingEditDialog = false;
                             var historyEvent = {
                                 t:'edit',
                                 node:editing_node,
-                                changes:changes,
+                                changes:editState.changes,
                                 links:removedLinks,
                                 dirty:wasDirty,
                                 changed:wasChanged
                             };
-                            if (outputMap) {
-                                historyEvent.outputMap = outputMap;
+                            if (editState.outputMap) {
+                                historyEvent.outputMap = editState.outputMap;
                             }
                             if (subflowInstances) {
                                 historyEvent.subflow = {
@@ -1520,14 +937,12 @@ var buildingEditDialog = false;
                 editTrayWidthCache[type] = dimensions.width;
                 $(".red-ui-tray-content").height(dimensions.height - 50);
                 var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
-                if (editing_node && editing_node._def.oneditresize) {
-                    try {
-                        editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
-                    } catch(err) {
-                        console.log("oneditresize",editing_node.id,editing_node.type,err.toString());
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane,editing_node, size);
                     }
-                }
-                if (nodeInfoEditor) {nodeInfoEditor.resize();} //markdown editor doesnt size up without this - idkw!?
+                })
             },
             open: function(tray, done) {
                 if (editing_node.hasOwnProperty('outputs')) {
@@ -1546,96 +961,19 @@ var buildingEditDialog = false;
                     invertState: true
                 })
 
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
-
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-                var ns;
-                if (node._def.set.module === "node-red") {
-                    ns = "node-red";
-                } else {
-                    ns = node._def.set.id;
-                }
-                var iconPath = RED.utils.getDefaultNodeIcon(node._def,node);
-                defaultIcon = iconPath.module+"/"+iconPath.file;
-                if (node.icon && node.icon !== defaultIcon) {
-                    isDefaultIcon = false;
-                } else {
-                    isDefaultIcon = true;
-                }
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-properties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node);
-                editorTabs.addTab(nodePropertiesTab);
-
+                var nodeEditPanes = ['editor-tab-properties'];
                 if (/^subflow:/.test(node.type)) {
-                    var subflowPropertiesTab = {
-                        id: "editor-subflow-envProperties",
-                        label: RED._("editor-tab.envProperties"),
-                        name: RED._("editor-tab.envProperties"),
-                        content: $('<div>', {id:"editor-subflow-envProperties-content",class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                        iconClass: "fa fa-list"
-                    };
-                    editorTabs.addTab(subflowPropertiesTab);
-                    // This tab is populated by the oneditprepare function of this
-                    // subflow. That ensures it is done *after* any credentials
-                    // have been loaded for the instance.
+                    nodeEditPanes.push("editor-tab-envProperties");
                 }
-
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty('info'))  {
-                    var descriptionTab = {
-                        id: "editor-tab-description",
-                        label: RED._("editor-tab.description"),
-                        name: RED._("editor-tab.description"),
-                        content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                        iconClass: "fa fa-file-text-o",
-                        onchange: function() {
-                            nodeInfoEditor.focus();
-                        }
-                    };
-                    editorTabs.addTab(descriptionTab);
-                    nodeInfoEditor = buildDescriptionForm(descriptionTab.content,node);
+                    nodeEditPanes.push('editor-tab-description');
                 }
+                nodeEditPanes.push("editor-tab-appearance");
 
-                var appearanceTab = {
-                    id: "editor-tab-appearance",
-                    label: RED._("editor-tab.appearance"),
-                    name: RED._("editor-tab.appearance"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-object-group",
-                    onchange: function() {
-                        refreshLabelForm(this.content,node);
-                    }
-                };
-                buildAppearanceForm(appearanceTab.content,node);
-                editorTabs.addTab(appearanceTab);
-
-                prepareEditDialog(node,node._def,"node-input", function() {
+                prepareEditDialog(trayBody, nodeEditPanes,node,node._def,"node-input", defaultTab, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
                     trayBody.i18n();
-                    finishedBuilding = true;
-                    if (defaultTab) {
-                        editorTabs.activateTab(defaultTab);
-                    }
+                    trayFooter.i18n();
                     buildingEditDialog = false;
                     done();
                 });
@@ -1648,10 +986,13 @@ var buildingEditDialog = false;
                     RED.sidebar.info.refresh(editing_node);
                 }
                 RED.workspaces.refresh();
-                if (nodeInfoEditor) {
-                    nodeInfoEditor.destroy();
-                    nodeInfoEditor = null;
-                }
+
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_node);
+                    }
+                })
+
                 RED.view.redraw(true);
                 editStack.pop();
             },
@@ -1693,15 +1034,8 @@ var buildingEditDialog = false;
         var adding = (id == "_ADD_");
         var node_def = RED.nodes.getType(type);
         var editing_config_node = RED.nodes.node(id);
-        var nodeInfoEditor;
-        var finishedBuilding = false;
+        var activeEditPanes = [];
 
-        var ns;
-        if (node_def.set.module === "node-red") {
-            ns = "node-red";
-        } else {
-            ns = node_def.set.id;
-        }
         var configNodeScope = ""; // default to global
         var activeSubflow = RED.nodes.subflow(RED.workspaces.active());
         if (activeSubflow) {
@@ -1729,14 +1063,13 @@ var buildingEditDialog = false;
             title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
             resize: function(dimensions) {
                 $(".red-ui-tray-content").height(dimensions.height - 50);
-                if (editing_config_node && editing_config_node._def.oneditresize) {
-                    var form = $("#node-config-dialog-edit-form");
-                    try {
-                        editing_config_node._def.oneditresize.call(editing_config_node,{width:form.width(),height:form.height()});
-                    } catch(err) {
-                        console.log("oneditresize",editing_config_node.id,editing_config_node.type,err.toString());
+                var form = $("#node-config-dialog-edit-form");
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane, editing_config_node, size);
                     }
-                }
+                })
             },
             open: function(tray, done) {
                 var trayHeader = tray.find(".red-ui-tray-header");
@@ -1756,52 +1089,14 @@ var buildingEditDialog = false;
                 }
                 trayFooter.append('<span class="red-ui-tray-footer-right"><span id="red-ui-editor-config-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="red-ui-editor-config-scope"></select></span>');
 
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
 
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-cproperties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                editorTabs.addTab(nodePropertiesTab);
-                buildEditForm(nodePropertiesTab.content,"node-config-dialog-edit-form",type,ns);
-
-                if (!node_def.defaults || !node_def.defaults.hasOwnProperty('info'))  {
-                    var descriptionTab = {
-                        id: "editor-tab-description",
-                        label: RED._("editor-tab.description"),
-                        name: RED._("editor-tab.description"),
-                        content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                        iconClass: "fa fa-file-text-o",
-                        onchange: function() {
-                            nodeInfoEditor.focus();
-                        }
-                    };
-                    editorTabs.addTab(descriptionTab);
-                    nodeInfoEditor = buildDescriptionForm(descriptionTab.content,editing_config_node);
+                var nodeEditPanes = [ 'editor-tab-properties' ];
+                if (!editing_config_node._def.defaults || !editing_config_node._def.defaults.hasOwnProperty('info'))  {
+                    nodeEditPanes.push('editor-tab-description');
                 }
 
-
-                prepareEditDialog(editing_config_node,node_def,"node-config-input", function() {
+                prepareEditDialog(trayBody, nodeEditPanes, editing_config_node, node_def, "node-config-input", null, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
                     if (editing_config_node._def.exclusive) {
                         $("#red-ui-editor-config-scope").hide();
                     } else {
@@ -1852,17 +1147,19 @@ var buildingEditDialog = false;
                     }
                     trayBody.i18n();
                     trayFooter.i18n();
-                    finishedBuilding = true;
                     buildingEditDialog = false;
                     done();
                 });
             },
             close: function() {
                 RED.workspaces.refresh();
-                if (nodeInfoEditor) {
-                    nodeInfoEditor.destroy();
-                    nodeInfoEditor = null;
-                }
+
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_config_node);
+                    }
+                })
+
                 editStack.pop();
             },
             show: function() {
@@ -1908,6 +1205,11 @@ var buildingEditDialog = false;
                 text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"),
                 class: "primary",
                 click: function() {
+                    var editState = {
+                        changes: {},
+                        changed: false,
+                        outputMap: null
+                    };
                     var configProperty = name;
                     var configId = editing_config_node.id;
                     var configType = type;
@@ -1915,7 +1217,6 @@ var buildingEditDialog = false;
                     var configTypeDef = RED.nodes.getType(configType);
                     var d;
                     var input;
-                    var scope = $("#red-ui-editor-config-scope").val();
 
                     if (configTypeDef.oneditsave) {
                         try {
@@ -1959,31 +1260,15 @@ var buildingEditDialog = false;
                         }
                     }
 
-                    if (nodeInfoEditor) {
-                        editing_config_node.info = nodeInfoEditor.getValue();
-
-                        var oldInfo = editing_config_node.info;
-                        if (nodeInfoEditor) {
-                            var newInfo = nodeInfoEditor.getValue();
-                            if (!!oldInfo) {
-                                // Has existing info property
-                                if (newInfo.trim() === "") {
-                                    // New value is blank - remove the property
-                                    delete editing_config_node.info;
-                                } else if (newInfo !== oldInfo) {
-                                    // New value is different
-                                    editing_config_node.info = newInfo;
-                                }
-                            } else {
-                                // No existing info
-                                if (newInfo.trim() !== "") {
-                                    // New value is not blank
-                                    editing_config_node.info = newInfo;
-                                }
-                            }
+                    activeEditPanes.forEach(function(pane) {
+                        if (pane.apply) {
+                            pane.apply.call(pane, editing_config_node, editState);
                         }
-                    }
+                    })
+
                     editing_config_node.label = configTypeDef.label;
+
+                    var scope = $("#red-ui-editor-config-scope").val();
                     editing_config_node.z = scope;
 
                     if ($("#node-config-input-node-disabled").prop('checked')) {
@@ -2024,9 +1309,6 @@ var buildingEditDialog = false;
                         RED.nodes.add(editing_config_node);
                     }
 
-                    if (configTypeDef.credentials) {
-                        updateNodeCredentials(editing_config_node,configTypeDef.credentials,"node-config-input");
-                    }
                     validateNode(editing_config_node);
                     var validatedNodes = {};
                     validatedNodes[editing_config_node.id] = true;
@@ -2115,75 +1397,13 @@ var buildingEditDialog = false;
         RED.tray.show(trayOptions);
     }
 
-    function defaultConfigNodeSort(A,B) {
-        if (A.__label__ < B.__label__) {
-            return -1;
-        } else if (A.__label__ > B.__label__) {
-            return 1;
-        }
-        return 0;
-    }
-
-    function updateConfigNodeSelect(name,type,value,prefix) {
-        // if prefix is null, there is no config select to update
-        if (prefix) {
-            var button = $("#"+prefix+"-edit-"+name);
-            if (button.length) {
-                if (value) {
-                    button.text(RED._("editor.configEdit"));
-                } else {
-                    button.text(RED._("editor.configAdd"));
-                }
-                $("#"+prefix+"-"+name).val(value);
-            } else {
-
-                var select = $("#"+prefix+"-"+name);
-                var node_def = RED.nodes.getType(type);
-                select.children().remove();
-
-                var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
-                if (!activeWorkspace) {
-                    activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
-                }
-
-                var configNodes = [];
-
-                RED.nodes.eachConfig(function(config) {
-                    if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
-                        var label = RED.utils.getNodeLabel(config,config.id);
-                        config.__label__ = label+(config.d?" ["+RED._("workspace.disabled")+"]":"");
-                        configNodes.push(config);
-                    }
-                });
-                var configSortFn = defaultConfigNodeSort;
-                if (typeof node_def.sort == "function") {
-                    configSortFn = node_def.sort;
-                }
-                try {
-                    configNodes.sort(configSortFn);
-                } catch(err) {
-                    console.log("Definition error: "+node_def.type+".sort",err);
-                }
-
-                configNodes.forEach(function(cn) {
-                    $('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'></option>').text(RED.text.bidi.enforceTextDirectionWithUCC(cn.__label__)).appendTo(select);
-                    delete cn.__label__;
-                });
-
-                select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
-                window.setTimeout(function() { select.trigger("change");},50);
-            }
-        }
-    }
-
     function showEditSubflowDialog(subflow) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
         var editing_node = subflow;
+        var activeEditPanes = [];
         editStack.push(subflow);
         RED.view.state(RED.state.EDITING);
-        var subflowEditor;
-        var finishedBuilding = false;
         var trayOptions = {
             title: getEditStackTitle(),
             buttons: [
@@ -2200,65 +1420,27 @@ var buildingEditDialog = false;
                     text: RED._("common.label.done"),
                     click: function() {
                         var i;
-                        var changes = {};
-                        var changed = false;
+                        var editState = {
+                            changes: {},
+                            changed: false,
+                            outputMap: null
+                        }
                         var wasDirty = RED.nodes.dirty();
 
+                        activeEditPanes.forEach(function(pane) {
+                            if (pane.apply) {
+                                pane.apply.call(pane, editing_node, editState);
+                            }
+                        })
+
                         var newName = $("#subflow-input-name").val();
 
                         if (newName != editing_node.name) {
-                            changes['name'] = editing_node.name;
+                            editState.changes['name'] = editing_node.name;
                             editing_node.name = newName;
-                            changed = true;
+                            editState.changed = true;
                         }
 
-                        var newDescription = subflowEditor.getValue();
-
-                        if (newDescription != editing_node.info) {
-                            changes['info'] = editing_node.info;
-                            editing_node.info = newDescription;
-                            changed = true;
-                        }
-                        if (updateLabels(editing_node, changes, null)) {
-                            changed = true;
-                        }
-                        var icon = $("#red-ui-editor-node-icon").val()||"";
-                        if ((editing_node.icon === undefined && icon !== "node-red/subflow.svg") ||
-                            (editing_node.icon !== undefined && editing_node.icon !== icon)) {
-                            changes.icon = editing_node.icon;
-                            editing_node.icon = icon;
-                            changed = true;
-                        }
-                        var newCategory = $("#subflow-appearance-input-category").val().trim();
-                        if (newCategory === "_custom_") {
-                            newCategory = $("#subflow-appearance-input-custom-category").val().trim();
-                            if (newCategory === "") {
-                                newCategory = editing_node.category;
-                            }
-                        }
-                        if (newCategory === 'subflows') {
-                            newCategory = '';
-                        }
-                        if (newCategory != editing_node.category) {
-                            changes['category'] = editing_node.category;
-                            editing_node.category = newCategory;
-                            changed = true;
-                        }
-
-                        var oldColor = editing_node.color;
-                        var newColor =  $("#red-ui-editor-node-color").val();
-                        if (oldColor !== newColor) {
-                            editing_node.color = newColor;
-                            changes.color = newColor;
-                            changed = true;
-                            RED.utils.clearNodeColorCache();
-                            if (editing_node.type === "subflow") {
-                                var nodeDefinition = RED.nodes.getType(
-                                    "subflow:" + editing_node.id
-                                );
-                                nodeDefinition["color"] = newColor;
-                            }
-                        }
 
                         var old_env = editing_node.env;
                         var new_env = RED.subflow.exportSubflowTemplateEnv($("#node-input-env-container").editableList("items"));
@@ -2270,7 +1452,7 @@ var buildingEditDialog = false;
                                     editing_node.credentials[prop.name] = prop.value;
                                     editing_node.credentials['has_'+prop.name] = (prop.value !== "");
                                     if (prop.value !== '__PWRD__') {
-                                        changed = true;
+                                        editState.changed = true;
                                     }
                                     delete prop.value;
                                 }
@@ -2279,19 +1461,13 @@ var buildingEditDialog = false;
 
                         if (!isSameObj(old_env, new_env)) {
                             editing_node.env = new_env;
-                            changes.env = editing_node.env;
-                            changed = true;
+                            editState.changes.env = editing_node.env;
+                            editState.changed = true;
                         }
 
-                        var newMeta = RED.subflow.exportSubflowModuleProperties(editing_node);
 
-                        if (!isSameObj(editing_node.meta,newMeta)) {
-                            changes.meta = editing_node.meta;
-                            editing_node.meta = newMeta;
-                            changed = true;
-                        }
 
-                        if (changed) {
+                        if (editState.changed) {
                             var wasChanged = editing_node.changed;
                             editing_node.changed = true;
                             validateNode(editing_node);
@@ -2314,7 +1490,7 @@ var buildingEditDialog = false;
                             var historyEvent = {
                                 t:'edit',
                                 node:editing_node,
-                                changes:changes,
+                                changes:editState.changes,
                                 dirty:wasDirty,
                                 changed:wasChanged,
                                 subflow: {
@@ -2329,20 +1505,16 @@ var buildingEditDialog = false;
                     }
                 }
             ],
-            resize: function(size) {
-                $(".red-ui-tray-content").height(size.height - 50);
-                var envContainer = $("#node-input-env-container");
-                if (envContainer.length) {
-                    // var form = $(".red-ui-tray-content form").height(size.height - 50 - 40);
-                    var rows = $("#dialog-form>div:not(#subflow-env-tabs-content)");
-                    var height = size.height;
-                    for (var i=0; i<rows.size(); i++) {
-                        height -= $(rows[i]).outerHeight(true);
+            resize: function(dimensions) {
+                $(".red-ui-tray-content").height(dimensions.height - 50);
+
+                var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane,editing_node, size);
                     }
-                    // var editorRow = $("#dialog-form>div.node-input-env-container-row");
-                    // height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-                    $("#node-input-env-container").editableList('height',height-95);
-                }
+                })
             },
             open: function(tray, done) {
                 var trayFooter = tray.find(".red-ui-tray-footer");
@@ -2352,100 +1524,26 @@ var buildingEditDialog = false;
                 var trayBody = tray.find('.red-ui-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
-                if (editing_node.type === "subflow") {
-                    var span = $("<span/>").css({
-                        "margin-left": "10px"
-                    }).appendTo(trayFooterLeft);
-                    $("<i/>", {
-                        class: "fa fa-info-circle"
-                    }).appendTo(span);
-                    $("<span/>").text(" ").appendTo(span);
-                    $("<i/>", {
-                        id: "red-ui-editor-subflow-user-count"
-                    }).appendTo(span);
-                }
+                $('<span style="margin-left: 10px"><i class="fa fa-info-circle"></i> <i id="red-ui-editor-subflow-user-count"></i></span>').appendTo(trayFooterLeft);
 
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                 }
 
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
+                var nodeEditPanes = [
+                    'editor-tab-properties',
+                    'editor-tab-subflow-module',
+                    'editor-tab-description',
+                    'editor-tab-appearance'
+                ];
 
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-properties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                editorTabs.addTab(nodePropertiesTab);
-
-                var moduleTab = {
-                    id: "editor-tab-module",
-                    label: RED._("editor-tab.module"),
-                    name: RED._("editor-tab.module"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cube",
-                };
-                editorTabs.addTab(moduleTab);
-                RED.subflow.buildModuleForm(moduleTab.content, editing_node);
-
-                var descriptionTab = {
-                    id: "editor-tab-description",
-                    label: RED._("editor-tab.description"),
-                    name: RED._("editor-tab.description"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-file-text-o",
-                    onchange: function() {
-                        subflowEditor.focus();
-                    }
-                };
-                editorTabs.addTab(descriptionTab);
-                subflowEditor = buildDescriptionForm(descriptionTab.content,editing_node);
-
-                var appearanceTab = {
-                    id: "editor-tab-appearance",
-                    label: RED._("editor-tab.appearance"),
-                    name: RED._("editor-tab.appearance"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-object-group",
-                    onchange: function() {
-                        refreshLabelForm(this.content,editing_node);
-                    }
-                };
-                buildAppearanceForm(appearanceTab.content,editing_node);
-                editorTabs.addTab(appearanceTab);
-
-                buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node);
-                trayBody.i18n();
-                getNodeCredentials("subflow", subflow.id, function(data) {
-                    if (data) {
-                        subflow.credentials = data;
-                        subflow.credentials._ = $.extend(true,{},data);
-                    }
+                prepareEditDialog(trayBody, nodeEditPanes, subflow, subflow._def, "node-input", null, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
                     $("#subflow-input-name").val(subflow.name);
                     RED.text.bidi.prepareInput($("#subflow-input-name"));
-
-                    finishedBuilding = true;
+                    trayBody.i18n();
+                    trayFooter.i18n();
                     buildingEditDialog = false;
-
                     done();
                 });
             },
@@ -2455,8 +1553,11 @@ var buildingEditDialog = false;
                 }
                 RED.sidebar.info.refresh(editing_node);
                 RED.workspaces.refresh();
-                subflowEditor.destroy();
-                subflowEditor = null;
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_node);
+                    }
+                })
                 editStack.pop();
                 editing_node = null;
             },
@@ -2466,44 +1567,14 @@ var buildingEditDialog = false;
         RED.tray.show(trayOptions);
     }
 
-    function getNodeCredentials(type, id, done) {
-        var timeoutNotification;
-        var intialTimeout = setTimeout(function() {
-            timeoutNotification = RED.notify($('<p data-i18n="[prepend]editor.loadCredentials">  <img src="red/images/spin.svg"/></p>').i18n(),{fixed: true})
-        },800);
-
-        $.ajax({
-            url: getCredentialsURL(type,id),
-            dataType: 'json',
-            success: function(data) {
-                if (timeoutNotification) {
-                    timeoutNotification.close();
-                    timeoutNotification = null;
-                }
-                clearTimeout(intialTimeout);
-                done(data);
-            },
-            error: function(jqXHR,status,error) {
-                if (timeoutNotification) {
-                    timeoutNotification.close();
-                    timeoutNotification = null;
-                }
-                clearTimeout(intialTimeout);
-                RED.notify(RED._("editor.errors.credentialLoadFailed"),"error")
-                done(null);
-            },
-            timeout: 30000,
-        });
-    }
-
     function showEditGroupDialog(group) {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
         var editing_node = group;
         editStack.push(group);
         RED.view.state(RED.state.EDITING);
-        var nodeInfoEditor;
-        var finishedBuilding = false;
+        var activeEditPanes = [];
+
         var trayOptions = {
             title: getEditStackTitle(),
             buttons: [
@@ -2519,154 +1590,29 @@ var buildingEditDialog = false;
                     class: "primary",
                     text: RED._("common.label.done"),
                     click: function() {
-                        var changes = {};
-                        var changed = false;
+                        var editState = {
+                            changes: {},
+                            changed: false,
+                            outputMap: null
+                        }
                         var wasDirty = RED.nodes.dirty();
-                        var d;
-                        var outputMap;
 
-                        if (editing_node._def.oneditsave) {
-                            var oldValues = {};
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") {
-                                        oldValues[d] = editing_node[d];
-                                    } else {
-                                        oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v;
-                                    }
-                                }
-                            }
-                            try {
-                                var rc = editing_node._def.oneditsave.call(editing_node);
-                                if (rc === true) {
-                                    changed = true;
-                                }
-                            } catch(err) {
-                                console.warn("oneditsave",editing_node.id,editing_node.type,err.toString());
-                            }
+                        handleEditSave(editing_node,editState);
 
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    if (oldValues[d] === null || typeof oldValues[d] === "string" || typeof oldValues[d] === "number") {
-                                        if (oldValues[d] !== editing_node[d]) {
-                                            changes[d] = oldValues[d];
-                                            changed = true;
-                                        }
-                                    } else if (d !== "nodes") {
-                                        if (JSON.stringify(oldValues[d]) !== JSON.stringify(editing_node[d])) {
-                                            changes[d] = oldValues[d];
-                                            changed = true;
-                                        }
-                                    }
-                                }
+                        activeEditPanes.forEach(function(pane) {
+                            if (pane.apply) {
+                                pane.apply.call(pane, editing_node, editState);
                             }
-                        }
+                        })
 
-                        var newValue;
-                        if (editing_node._def.defaults) {
-                            for (d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    var input = $("#node-input-"+d);
-                                    if (input.attr('type') === "checkbox") {
-                                        newValue = input.prop('checked');
-                                    } else if (input.prop("nodeName") === "select" && input.attr("multiple") === "multiple") {
-                                        // An empty select-multiple box returns null.
-                                        // Need to treat that as an empty array.
-                                        newValue = input.val();
-                                        if (newValue == null) {
-                                            newValue = [];
-                                        }
-                                    } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
-                                        newValue = input.text();
-                                    } else {
-                                        newValue = input.val();
-                                    }
-                                    if (newValue != null) {
-                                        if (editing_node._def.defaults[d].type) {
-                                            if (newValue == "_ADD_") {
-                                                newValue = "";
-                                            }
-                                        }
-                                        if (editing_node[d] != newValue) {
-                                            if (editing_node._def.defaults[d].type) {
-                                                // Change to a related config node
-                                                var configNode = RED.nodes.node(editing_node[d]);
-                                                if (configNode) {
-                                                    var users = configNode.users;
-                                                    users.splice(users.indexOf(editing_node),1);
-                                                    RED.events.emit("nodes:change",configNode);
-                                                }
-                                                configNode = RED.nodes.node(newValue);
-                                                if (configNode) {
-                                                    configNode.users.push(editing_node);
-                                                    RED.events.emit("nodes:change",configNode);
-                                                }
-                                            }
-                                            changes[d] = editing_node[d];
-                                            editing_node[d] = newValue;
-                                            changed = true;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        var oldInfo = editing_node.info;
-                        if (nodeInfoEditor) {
-                            var newInfo = nodeInfoEditor.getValue();
-                            if (!!oldInfo) {
-                                // Has existing info property
-                                if (newInfo.trim() === "") {
-                                    // New value is blank - remove the property
-                                    changed = true;
-                                    changes.info = oldInfo;
-                                    delete editing_node.info;
-                                } else if (newInfo !== oldInfo) {
-                                    // New value is different
-                                    changed = true;
-                                    changes.info = oldInfo;
-                                    editing_node.info = newInfo;
-                                }
-                            } else {
-                                // No existing info
-                                if (newInfo.trim() !== "") {
-                                    // New value is not blank
-                                    changed = true;
-                                    changes.info = undefined;
-                                    editing_node.info = newInfo;
-                                }
-                            }
-                        }
-                        {
-                            var old_env = editing_node.env;
-                            var new_env = RED.subflow.exportSubflowInstanceEnv(editing_node);
-                            if (new_env && new_env.length > 0) {
-                                new_env.forEach(function(prop) {
-                                    if (prop.type === "cred") {
-                                        editing_node.credentials = editing_node.credentials || {_:{}};
-                                        editing_node.credentials[prop.name] = prop.value;
-                                        editing_node.credentials['has_'+prop.name] = (prop.value !== "");
-                                        if (prop.value !== '__PWRD__') {
-                                            changed = true;
-                                        }
-                                        delete prop.value;
-                                    }
-                                });
-                            }
-                            if (!isSameObj(old_env, new_env)) {
-                                editing_node.env = new_env;
-                                changes.env = editing_node.env;
-                                changed = true;
-                            }
-                        }
-                        if (changed) {
+                        if (editState.changed) {
                             var wasChanged = editing_node.changed;
                             editing_node.changed = true;
                             RED.nodes.dirty(true);
                             var historyEvent = {
                                 t:'edit',
                                 node:editing_node,
-                                changes:changes,
+                                changes:editState.changes,
                                 dirty:wasDirty,
                                 changed:wasChanged
                             };
@@ -2679,27 +1625,16 @@ var buildingEditDialog = false;
                     }
                 }
             ],
-            resize: function(size) {
-                editTrayWidthCache['group'] = size.width;
-                $(".red-ui-tray-content").height(size.height - 50);
-                // var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
-                // if (editing_node && editing_node._def.oneditresize) {
-                //     try {
-                //         editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
-                //     } catch(err) {
-                //         console.log("oneditresize",editing_node.id,editing_node.type,err.toString());
-                //     }
-                // }
-                var envContainer = $("#red-ui-editor-group-env-list");
-                if (envContainer.length) {
-                    var rows = $("#dialog-form>div:not(#group-env-tabs-content)");
-                    var height = size.height;
-                    for (var i=0; i<rows.size(); i++) {
-                        height -= $(rows[i]).outerHeight(true);
+            resize: function(dimensions) {
+                editTrayWidthCache['group'] = dimensions.width;
+                $(".red-ui-tray-content").height(dimensions.height - 50);
+                var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
+                var size = {width:form.width(),height:form.height()};
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.resize) {
+                        pane.resize.call(pane,editing_node, size);
                     }
-                    $("#red-ui-editor-group-env-list").editableList('height',height-30);
-                }
-
+                })
             },
             open: function(tray, done) {
                 var trayFooter = tray.find(".red-ui-tray-footer");
@@ -2709,63 +1644,13 @@ var buildingEditDialog = false;
                 var trayBody = tray.find('.red-ui-tray-body');
                 trayBody.parent().css('overflow','hidden');
 
-                var editorTabEl = $('<ul></ul>').appendTo(trayBody);
-                var editorContent = $('<div></div>').appendTo(trayBody);
-
-                var editorTabs = RED.tabs.create({
-                    element:editorTabEl,
-                    onchange:function(tab) {
-                        editorContent.children().hide();
-                        if (tab.onchange) {
-                            tab.onchange.call(tab);
-                        }
-                        tab.content.show();
-                        if (finishedBuilding) {
-                            RED.tray.resize();
-                        }
-                    },
-                    collapsible: true,
-                    menu: false
-                });
-
-                var nodePropertiesTab = {
-                    id: "editor-tab-properties",
-                    label: RED._("editor-tab.properties"),
-                    name: RED._("editor-tab.properties"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-cog"
-                };
-                buildEditForm(nodePropertiesTab.content,"dialog-form","group","node-red",group);
-
-                editorTabs.addTab(nodePropertiesTab);
-
-                var groupPropertiesTab = {
-                    id: "editor-group-envProperties",
-                    label: RED._("editor-tab.envProperties"),
-                    name: RED._("editor-tab.envProperties"),
-                    content: $('<div>', {
-                        id: "editor-group-envProperties-content",
-                        class: "red-ui-tray-content"
-                    }).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-list",
-                };
-                editorTabs.addTab(groupPropertiesTab);
-
-                var descriptionTab = {
-                    id: "editor-tab-description",
-                    label: RED._("editor-tab.description"),
-                    name: RED._("editor-tab.description"),
-                    content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
-                    iconClass: "fa fa-file-text-o",
-                    onchange: function() {
-                        nodeInfoEditor.focus();
-                    }
-                };
-                editorTabs.addTab(descriptionTab);
-                nodeInfoEditor = buildDescriptionForm(descriptionTab.content,editing_node);
-                prepareEditDialog(group,group._def,"node-input", function() {
+                var nodeEditPanes = [
+                    'editor-tab-properties',
+                    'editor-tab-description'
+                ];
+                prepareEditDialog(trayBody, nodeEditPanes, group,group._def,"node-input", null, function(_activeEditPanes) {
+                    activeEditPanes = _activeEditPanes;
                     trayBody.i18n();
-                    finishedBuilding = true;
                     buildingEditDialog = false;
                     done();
                 });
@@ -2776,8 +1661,11 @@ var buildingEditDialog = false;
                     RED.view.state(RED.state.DEFAULT);
                 }
                 RED.sidebar.info.refresh(editing_node);
-                nodeInfoEditor.destroy();
-                nodeInfoEditor = null;
+                activeEditPanes.forEach(function(pane) {
+                    if (pane.close) {
+                        pane.close.call(pane,editing_node);
+                    }
+                })
                 editStack.pop();
                 editing_node = null;
             },
@@ -2807,8 +1695,6 @@ var buildingEditDialog = false;
         }
     }
 
-
-
     return {
         init: function() {
             if(window.ace) { window.ace.config.set('basePath', 'vendor/ace'); }
@@ -2843,9 +1729,9 @@ var buildingEditDialog = false;
         editBuffer: function(options) { showTypeEditor("_buffer", options) },
         buildEditForm: buildEditForm,
         validateNode: validateNode,
-        updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo
+        updateNodeProperties: updateNodeProperties,
 
-        showIconPicker:showIconPicker,
+        showIconPicker: function() { RED.editor.iconPicker.show.apply(null,arguments); },
 
         /**
          * Show a type editor.
@@ -2878,6 +1764,14 @@ var buildingEditDialog = false;
         },
         get customEditTypes() {
             return customEditTypes;
+        },
+
+        registerEditorPane: function(type, definition, filter) {
+            if (filter) {
+                filteredEditPanes.push({type, definition, filter})
+            } else {
+                editPanes[type] = definition;
+            }
         }
     }
 })();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/colorPicker.js
similarity index 99%
rename from packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js
rename to packages/node_modules/@node-red/editor-client/src/js/ui/editors/colorPicker.js
index 3616bade4..4b2e19e5c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/colorPicker.js
@@ -1,4 +1,4 @@
-RED.colorPicker = (function() {
+RED.editor.colorPicker = RED.colorPicker = (function() {
 
     function create(options) {
         var color = options.value;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/iconPicker.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/iconPicker.js
new file mode 100644
index 000000000..d6879d4d8
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/iconPicker.js
@@ -0,0 +1,99 @@
+RED.editor.iconPicker = (function() {
+    function showIconPicker(container, backgroundColor, iconPath, faOnly, done) {
+        var picker = $('<div class="red-ui-icon-picker">');
+        var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(picker);
+        searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({
+            delay: 50,
+            change: function() {
+                var searchTerm = $(this).val().trim();
+                if (searchTerm === "") {
+                    iconList.find(".red-ui-icon-list-module").show();
+                    iconList.find(".red-ui-icon-list-icon").show();
+                } else {
+                    iconList.find(".red-ui-icon-list-module").hide();
+                    iconList.find(".red-ui-icon-list-icon").each(function(i,n) {
+                        if ($(n).data('icon').indexOf(searchTerm) === -1) {
+                            $(n).hide();
+                        } else {
+                            $(n).show();
+                        }
+                    });
+                }
+            }
+        });
+
+        var row = $('<div>').appendTo(picker);
+        var iconList = $('<div class="red-ui-icon-list">').appendTo(picker);
+        var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker);
+        var summary = $('<span>').appendTo(metaRow);
+        var resetButton = $('<button type="button" class="red-ui-button red-ui-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
+            e.preventDefault();
+            iconPanel.hide();
+            done(null);
+        });
+        if (!backgroundColor && faOnly) {
+            iconList.addClass("red-ui-icon-list-dark");
+        }
+        setTimeout(function() {
+            var iconSets = RED.nodes.getIconSets();
+            Object.keys(iconSets).forEach(function(moduleName) {
+                if (faOnly && (moduleName !== "font-awesome")) {
+                    return;
+                }
+                var icons = iconSets[moduleName];
+                if (icons.length > 0) {
+                    // selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
+                    var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
+                    $('<i class="fa fa-cube"></i>').prependTo(header);
+                    icons.forEach(function(icon) {
+                        var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
+                        var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
+                        var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
+                        iconDiv.data('icon',icon_url);
+                        if (backgroundColor) {
+                            nodeDiv.css({
+                                'backgroundColor': backgroundColor
+                            });
+                            var borderColor = RED.utils.getDarkerColor(backgroundColor);
+                            if (borderColor !== backgroundColor) {
+                                nodeDiv.css('border-color',borderColor)
+                            }
+
+                        }
+                        var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+                        RED.utils.createIconElement(icon_url, iconContainer, true);
+
+                        if (iconPath.module === moduleName && iconPath.file === icon) {
+                            iconDiv.addClass("selected");
+                        }
+                        iconDiv.on("mouseover", function() {
+                            summary.text(icon);
+                        })
+                        iconDiv.on("mouseout", function() {
+                            summary.html("&nbsp;");
+                        })
+                        iconDiv.on("click", function() {
+                            iconPanel.hide();
+                            done(moduleName+"/"+icon);
+                        })
+                    })
+                }
+            });
+            setTimeout(function() {
+                spinner.remove();
+            },50);
+        },300);
+        var spinner = RED.utils.addSpinnerOverlay(iconList,true);
+        var iconPanel = RED.popover.panel(picker);
+        iconPanel.show({
+            target: container
+        })
+
+
+        picker.slideDown(100);
+        searchInput.trigger("focus");
+    }
+    return {
+        show: showIconPicker
+    }
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
new file mode 100644
index 000000000..2d8c3ca00
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js
@@ -0,0 +1,515 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-appearance", function() {
+        return {
+            label: RED._("editor-tab.appearance"),
+            name: RED._("editor-tab.appearance"),
+            iconClass: "fa fa-object-group",
+            create: function(container, node) {
+                this.content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                buildAppearanceForm(this.content,node);
+
+                if (node.type === 'subflow') {
+                    this.defaultIcon = "node-red/subflow.svg";
+                } else {
+                    var iconPath = RED.utils.getDefaultNodeIcon(node._def,node);
+                    this.defaultIcon = iconPath.module+"/"+iconPath.file;
+                    if (node.icon && node.icon !== this.defaultIcon) {
+                        this.isDefaultIcon = false;
+                    } else {
+                        this.isDefaultIcon = true;
+                    }
+                }
+                return this.content;
+            },
+            resize: function(node, size) {
+
+            },
+            close: function(node) {
+
+            },
+            show: function(node) {
+                refreshLabelForm(this.content, node);
+            },
+            apply: function(node, editState) {
+                if (updateLabels(node, editState.changes, editState.outputMap)) {
+                    editState.changed = true;
+                }
+                if (!node._def.defaults || !node._def.defaults.hasOwnProperty("icon")) {
+                    var icon = $("#red-ui-editor-node-icon").val()||""
+                    if (!this.isDefaultIcon) {
+                        if (icon !== node.icon) {
+                            editState.changes.icon = node.icon;
+                            node.icon = icon;
+                            editState.changed = true;
+                        }
+                    } else {
+                        if (icon !== "" && icon !== this.defaultIcon) {
+                            editState.changes.icon = node.icon;
+                            node.icon = icon;
+                            editState.changed = true;
+                        } else {
+                            var iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
+                            var currentDefaultIcon = iconPath.module+"/"+iconPath.file;
+                            if (this.defaultIcon !== currentDefaultIcon) {
+                                editState.changes.icon = node.icon;
+                                node.icon = currentDefaultIcon;
+                                editState.changed = true;
+                            }
+                        }
+                    }
+                }
+                if (node.type === "subflow") {
+                    var newCategory = $("#subflow-appearance-input-category").val().trim();
+                    if (newCategory === "_custom_") {
+                        newCategory = $("#subflow-appearance-input-custom-category").val().trim();
+                        if (newCategory === "") {
+                            newCategory = node.category;
+                        }
+                    }
+                    if (newCategory === 'subflows') {
+                        newCategory = '';
+                    }
+                    if (newCategory != node.category) {
+                        editState.changes['category'] = node.category;
+                        node.category = newCategory;
+                        editState.changed = true;
+                    }
+
+                    var oldColor = node.color;
+                    var newColor =  $("#red-ui-editor-node-color").val();
+                    if (oldColor !== newColor) {
+                        editState.changes.color = node.color;
+                        node.color = newColor;
+                        editState.changed = true;
+                        RED.utils.clearNodeColorCache();
+                        if (node.type === "subflow") {
+                            var nodeDefinition = RED.nodes.getType(
+                                "subflow:" + node.id
+                            );
+                            nodeDefinition["color"] = newColor;
+                        }
+                    }
+
+
+
+                }
+                if (!$("#node-input-show-label").prop('checked')) {
+                    // Not checked - hide label
+                    if (!/^link (in|out)$/.test(node.type)) {
+                        // Not a link node - default state is true
+                        if (node.l !== false) {
+                            editState.changes.l = node.l
+                            editState.changed = true;
+                        }
+                        node.l = false;
+                    } else {
+                        // A link node - default state is false
+                        if (node.hasOwnProperty('l') && node.l) {
+                            editState.changes.l = node.l
+                            editState.changed = true;
+                        }
+                        delete node.l;
+                    }
+                } else {
+                    // Checked - show label
+                    if (!/^link (in|out)$/.test(node.type)) {
+                        // Not a link node - default state is true
+                        if (node.hasOwnProperty('l') && !node.l) {
+                            editState.changes.l = node.l
+                            editState.changed = true;
+                        }
+                        delete node.l;
+                    } else {
+                        if (!node.l) {
+                            editState.changes.l = node.l
+                            editState.changed = true;
+                        }
+                        node.l = true;
+                    }
+                }
+            }
+        }
+    });
+
+    function buildAppearanceForm(container,node) {
+        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
+
+        var i,row;
+
+        if (node.type === "subflow") {
+            var categoryRow = $("<div/>", {
+                class: "form-row"
+            }).appendTo(dialogForm);
+            $("<label/>", {
+                for: "subflow-appearance-input-category",
+                "data-i18n": "editor:subflow.category"
+            }).appendTo(categoryRow);
+            var categorySelector = $("<select/>", {
+                id: "subflow-appearance-input-category"
+            }).css({
+                width: "250px"
+            }).appendTo(categoryRow);
+            $("<input/>", {
+                type: "text",
+                id: "subflow-appearance-input-custom-category"
+            }).css({
+                display: "none",
+                "margin-left": "10px",
+                width: "calc(100% - 250px)"
+            }).appendTo(categoryRow);
+
+            var categories = RED.palette.getCategories();
+            categories.sort(function(A,B) {
+                return A.label.localeCompare(B.label);
+            })
+            categories.forEach(function(cat) {
+                categorySelector.append($("<option/>").val(cat.id).text(cat.label));
+            })
+            categorySelector.append($("<option/>").attr('disabled',true).text("---"));
+            categorySelector.append($("<option/>").val("_custom_").text(RED._("palette.addCategory")));
+
+            $("#subflow-appearance-input-category").on("change", function() {
+                var val = $(this).val();
+                if (val === "_custom_") {
+                    $("#subflow-appearance-input-category").width(120);
+                    $("#subflow-appearance-input-custom-category").show();
+                } else {
+                    $("#subflow-appearance-input-category").width(250);
+                    $("#subflow-appearance-input-custom-category").hide();
+                }
+            })
+
+            $("#subflow-appearance-input-category").val(node.category||"subflows");
+            var userCount = 0;
+            var subflowType = "subflow:"+node.id;
+
+            // RED.nodes.eachNode(function(n) {
+            //     if (n.type === subflowType) {
+            //         userCount++;
+            //     }
+            // });
+            $("#red-ui-editor-subflow-user-count")
+                .text(RED._("subflow.subflowInstances", {count:node.instances.length})).show();
+        }
+
+        $('<div class="form-row">'+
+            '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
+            '<span style="margin-right: 2px;"/>'+
+            '<input type="checkbox" id="node-input-show-label"/>'+
+        '</div>').appendTo(dialogForm);
+
+        $("#node-input-show-label").toggleButton({
+            enabledLabel: RED._("editor.show"),
+            disabledLabel: RED._("editor.hide")
+        })
+
+        if (!node.hasOwnProperty("l")) {
+            // Show label if type not link
+            node.l = !/^link (in|out)$/.test(node._def.type);
+        }
+        $("#node-input-show-label").prop("checked",node.l).trigger("change");
+
+        if (node.type === "subflow") {
+            // subflow template can select its color
+            var color = node.color ? node.color : "#DDAA99";
+            var colorRow = $("<div/>", {
+                class: "form-row"
+            }).appendTo(dialogForm);
+            $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
+
+            var recommendedColors = [
+                "#DDAA99",
+                "#3FADB5", "#87A980", "#A6BBCF",
+                "#AAAA66", "#C0C0C0", "#C0DEED",
+                "#C7E9C0", "#D7D7A0", "#D8BFD8",
+                "#DAC4B4", "#DEB887", "#DEBD5C",
+                "#E2D96E", "#E6E0F8", "#E7E7AE",
+                "#E9967A", "#F3B567", "#FDD0A2",
+                "#FDF0C2", "#FFAAAA", "#FFCC66",
+                "#FFF0F0", "#FFFFFF"
+            ]
+
+            RED.editor.colorPicker.create({
+                id: "red-ui-editor-node-color",
+                value: color,
+                palette: recommendedColors,
+                sortPalette: function (a, b) {return a.l - b.l;}
+            }).appendTo(colorRow);
+
+            $("#red-ui-editor-node-color").on('change', function(ev) {
+                // Horribly out of scope...
+                var colour = $(this).val();
+                nodeDiv.css('backgroundColor',colour);
+                var borderColor = RED.utils.getDarkerColor(colour);
+                if (borderColor !== colour) {
+                    nodeDiv.css('border-color',borderColor)
+                }
+            })
+        }
+
+
+        // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
+        if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
+            var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
+            $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
+
+            var iconButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(iconRow);
+            $('<i class="fa fa-caret-down"></i>').appendTo(iconButton);
+            var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
+            var colour = RED.utils.getNodeColor(node.type, node._def);
+            var icon_url = RED.utils.getNodeIcon(node._def,node);
+            nodeDiv.css('backgroundColor',colour);
+            var borderColor = RED.utils.getDarkerColor(colour);
+            if (borderColor !== colour) {
+                nodeDiv.css('border-color',borderColor)
+            }
+
+            var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+            RED.utils.createIconElement(icon_url, iconContainer, true);
+
+            iconButton.on("click", function(e) {
+                e.preventDefault();
+                var iconPath;
+                var icon = $("#red-ui-editor-node-icon").val()||"";
+                if (icon) {
+                    iconPath = RED.utils.separateIconPath(icon);
+                } else {
+                    iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
+                }
+                var backgroundColor = RED.utils.getNodeColor(node.type, node._def);
+                if (node.type === "subflow") {
+                    backgroundColor = $("#red-ui-editor-node-color").val();
+                }
+                RED.editor.iconPicker.show(iconButton,backgroundColor,iconPath,false,function(newIcon) {
+                    $("#red-ui-editor-node-icon").val(newIcon||"");
+                    var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
+                    RED.utils.createIconElement(icon_url, iconContainer, true);
+                });
+            });
+
+            RED.popover.tooltip(iconButton, function() {
+                return $("#red-ui-editor-node-icon").val() || RED._("editor.default");
+            })
+            $('<input type="hidden" id="red-ui-editor-node-icon">').val(node.icon).appendTo(iconRow);
+        }
+
+
+        $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
+
+        var inputCount = node.inputs || node._def.inputs || 0;
+        var outputCount = node.outputs || node._def.outputs || 0;
+        if (node.type === 'subflow') {
+            inputCount = node.in.length;
+            outputCount = node.out.length;
+        }
+
+        var inputLabels = node.inputLabels || [];
+        var outputLabels = node.outputLabels || [];
+
+        var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
+        var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
+
+        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelInputs"></span><div id="red-ui-editor-node-label-form-inputs"></div></div>').appendTo(dialogForm);
+        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
+        if (inputCount > 0) {
+            for (i=0;i<inputCount;i++) {
+                buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
+            }
+        } else {
+            buildLabelRow().appendTo(inputsDiv);
+        }
+        $('<div class="form-row"><span style="margin-left: 50px;" data-i18n="editor.labelOutputs"></span><div id="red-ui-editor-node-label-form-outputs"></div></div>').appendTo(dialogForm);
+        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
+        if (outputCount > 0) {
+            for (i=0;i<outputCount;i++) {
+                buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
+            }
+        } else {
+            buildLabelRow().appendTo(outputsDiv);
+        }
+    }
+
+    function refreshLabelForm(container,node) {
+
+        var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
+        var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
+
+        var inputsDiv = $("#red-ui-editor-node-label-form-inputs");
+        var outputsDiv = $("#red-ui-editor-node-label-form-outputs");
+
+        var inputCount;
+        var formInputs = $("#node-input-inputs").val();
+        if (formInputs === undefined) {
+            if (node.type === 'subflow') {
+                inputCount = node.in.length;
+            } else {
+                inputCount = node.inputs || node._def.inputs || 0;
+            }
+        } else {
+            inputCount = Math.min(1,Math.max(0,parseInt(formInputs)));
+            if (isNaN(inputCount)) {
+                inputCount = 0;
+            }
+        }
+
+        var children = inputsDiv.children();
+        var childCount = children.length;
+        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
+            childCount--;
+        }
+
+        if (childCount < inputCount) {
+            if (childCount === 0) {
+                // remove the 'none' placeholder
+                $(children[0]).remove();
+            }
+            for (i = childCount;i<inputCount;i++) {
+                buildLabelRow("input",i,"",inputPlaceholder).appendTo(inputsDiv);
+            }
+        } else if (childCount > inputCount) {
+            for (i=inputCount;i<childCount;i++) {
+                $(children[i]).remove();
+            }
+            if (inputCount === 0) {
+                buildLabelRow().appendTo(inputsDiv);
+            }
+        }
+
+        var outputCount;
+        var i;
+        var formOutputs = $("#node-input-outputs").val();
+
+        if (formOutputs === undefined) {
+            if (node.type === 'subflow') {
+                outputCount = node.out.length;
+            } else {
+                inputCount = node.outputs || node._def.outputs || 0;
+            }
+        } else if (isNaN(formOutputs)) {
+            var outputMap = JSON.parse(formOutputs);
+            var keys = Object.keys(outputMap);
+            children = outputsDiv.children();
+            childCount = children.length;
+            if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
+                childCount--;
+            }
+
+            outputCount = 0;
+            var rows = [];
+            keys.forEach(function(p) {
+                var row = $("#red-ui-editor-node-label-form-output-"+p).parent();
+                if (row.length === 0 && outputMap[p] !== -1) {
+                    if (childCount === 0) {
+                        $(children[0]).remove();
+                        childCount = -1;
+                    }
+                    row = buildLabelRow("output",p,"",outputPlaceholder);
+                } else {
+                    row.detach();
+                }
+                if (outputMap[p] !== -1) {
+                    outputCount++;
+                    rows.push({i:parseInt(outputMap[p]),r:row});
+                }
+            });
+            rows.sort(function(A,B) {
+                return A.i-B.i;
+            })
+            rows.forEach(function(r,i) {
+                r.r.find("label").text((i+1)+".");
+                r.r.appendTo(outputsDiv);
+            })
+            if (rows.length === 0) {
+                buildLabelRow("output",i,"").appendTo(outputsDiv);
+            } else {
+
+            }
+        } else {
+            outputCount = Math.max(0,parseInt(formOutputs));
+        }
+        children = outputsDiv.children();
+        childCount = children.length;
+        if (childCount === 1 && $(children[0]).hasClass('red-ui-editor-node-label-form-none')) {
+            childCount--;
+        }
+        if (childCount < outputCount) {
+            if (childCount === 0) {
+                // remove the 'none' placeholder
+                $(children[0]).remove();
+            }
+            for (i = childCount;i<outputCount;i++) {
+                buildLabelRow("output",i,"").appendTo(outputsDiv);
+            }
+        } else if (childCount > outputCount) {
+            for (i=outputCount;i<childCount;i++) {
+                $(children[i]).remove();
+            }
+            if (outputCount === 0) {
+                buildLabelRow().appendTo(outputsDiv);
+            }
+        }
+    }
+
+    function buildLabelRow(type, index, value, placeHolder) {
+        var result = $('<div>',{class:"red-ui-editor-node-label-form-row"});
+        if (type === undefined) {
+            $('<span>').text(RED._("editor.noDefaultLabel")).appendTo(result);
+            result.addClass("red-ui-editor-node-label-form-none");
+        } else {
+            result.addClass("");
+            var id = "red-ui-editor-node-label-form-"+type+"-"+index;
+            $('<label>',{for:id}).text((index+1)+".").appendTo(result);
+            var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
+            var clear = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
+            clear.on("click", function(evt) {
+                evt.preventDefault();
+                input.val("");
+            })
+        }
+        return result;
+    }
+
+    function updateLabels(node, changes, outputMap) {
+        var inputLabels = $("#red-ui-editor-node-label-form-inputs").children().find("input");
+        var outputLabels = $("#red-ui-editor-node-label-form-outputs").children().find("input");
+
+        var hasNonBlankLabel = false;
+        var changed = false;
+        var newValue = inputLabels.map(function() {
+            var v = $(this).val();
+            hasNonBlankLabel = hasNonBlankLabel || v!== "";
+            return v;
+        }).toArray().slice(0,node.inputs);
+        if ((node.inputLabels === undefined && hasNonBlankLabel) ||
+            (node.inputLabels !== undefined && JSON.stringify(newValue) !== JSON.stringify(node.inputLabels))) {
+            changes.inputLabels = node.inputLabels;
+            node.inputLabels = newValue;
+            changed = true;
+        }
+        hasNonBlankLabel = false;
+        newValue = new Array(node.outputs);
+        outputLabels.each(function() {
+            var index = $(this).attr('id').substring("red-ui-editor-node-label-form-output-".length);
+            if (outputMap && outputMap.hasOwnProperty(index)) {
+                index = parseInt(outputMap[index]);
+                if (index === -1) {
+                    return;
+                }
+            }
+            var v = $(this).val();
+            hasNonBlankLabel = hasNonBlankLabel || v!== "";
+            newValue[index] = v;
+        });
+
+        if ((node.outputLabels === undefined && hasNonBlankLabel) ||
+            (node.outputLabels !== undefined && JSON.stringify(newValue) !== JSON.stringify(node.outputLabels))) {
+            changes.outputLabels = node.outputLabels;
+            node.outputLabels = newValue;
+            changed = true;
+        }
+        return changed;
+    }
+
+
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
new file mode 100644
index 000000000..e7402e5ab
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js
@@ -0,0 +1,71 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-description", function() {
+        return {
+            label: RED._("editor-tab.description"),
+            name: RED._("editor-tab.description"),
+            iconClass: "fa fa-file-text-o",
+
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                this.editor = buildDescriptionForm(content,node);
+                return content;
+            },
+            resize: function(node, size) {
+                this.editor.resize();
+            },
+            close: function(node) {
+                this.editor.destroy();
+                this.editor = null;
+            },
+            show: function() {
+                this.editor.focus();
+            },
+            apply: function(node, editState) {
+                var oldInfo = node.info;
+                var newInfo = this.editor.getValue();
+                if (!!oldInfo) {
+                    // Has existing info property
+                    if (newInfo.trim() === "") {
+                        // New value is blank - remove the property
+                        editState.changed = true;
+                        editState.changes.info = oldInfo;
+                        delete node.info;
+                    } else if (newInfo !== oldInfo) {
+                        // New value is different
+                        editState.changed = true;
+                        editState.changes.info = oldInfo;
+                        node.info = newInfo;
+                    }
+                } else {
+                    // No existing info
+                    if (newInfo.trim() !== "") {
+                        // New value is not blank
+                        editState.changed = true;
+                        editState.changes.info = undefined;
+                        node.info = newInfo;
+                    }
+                }
+            }
+        }
+    });
+
+    function buildDescriptionForm(container,node) {
+        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
+        var toolbarRow = $('<div></div>').appendTo(dialogForm);
+        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
+        var editorId = "node-info-input-info-editor-"+Math.floor(1000*Math.random());
+        $('<div style="height: 100%" class="node-text-editor" id="'+editorId+'" ></div>').appendTo(row);
+        var nodeInfoEditor = RED.editor.createEditor({
+            id: editorId,
+            mode: 'ace/mode/markdown',
+            value: ""
+        });
+        if (node.info) {
+            nodeInfoEditor.getSession().setValue(node.info, -1);
+        }
+        node.infoEditor = nodeInfoEditor;
+        return nodeInfoEditor;
+    }
+
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
new file mode 100644
index 000000000..4c568649d
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
@@ -0,0 +1,190 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-properties", function() {
+        return {
+            label: RED._("editor-tab.properties"),
+            name: RED._("editor-tab.properties"),
+            iconClass: "fa fa-cog",
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+
+                var nodeType = node.type;
+                if (node.type === "subflow") {
+                    nodeType = "subflow-template";
+                } else if (node.type.substring(0,8) == "subflow:") {
+                    nodeType = "subflow";
+                }
+
+                var i18nNamespace;
+                if (node._def.set.module === "node-red") {
+                    i18nNamespace = "node-red";
+                } else {
+                    i18nNamespace = node._def.set.id;
+                }
+
+                var formStyle = "dialog-form";
+                this.inputClass = "node-input";
+                if (node._def.category === "config" && nodeType !== "group") {
+                    this.inputClass = "node-config-input";
+                    formStyle = "node-config-dialog-edit-form";
+                }
+                RED.editor.buildEditForm(content,formStyle,nodeType,i18nNamespace,node);
+
+                if (nodeType === "subflow-template") {
+                    // This is the 'edit properties' dialog for a subflow template
+                    // TODO: this needs to happen later in the dialog open sequence
+                    //       so that credentials can be loaded prior to building the form
+                    RED.subflow.buildEditForm("subflow-template", node);
+                }
+
+                return content;
+            },
+            resize: function(node, size) {
+                if (node && node._def.oneditresize) {
+                    try {
+                        node._def.oneditresize.call(node,size);
+                    } catch(err) {
+                        console.log("oneditresize",node.id,node.type,err.toString());
+                    }
+                }
+            },
+            close: function(node) {
+
+            },
+            apply: function(editing_node, editState) {
+                var newValue;
+                if (editing_node._def.defaults) {
+                    for (d in editing_node._def.defaults) {
+                        if (editing_node._def.defaults.hasOwnProperty(d)) {
+                            var input = $("#"+this.inputClass+"-"+d);
+                            if (input.attr('type') === "checkbox") {
+                                newValue = input.prop('checked');
+                            } else if (input.prop("nodeName") === "select" && input.attr("multiple") === "multiple") {
+                                // An empty select-multiple box returns null.
+                                // Need to treat that as an empty array.
+                                newValue = input.val();
+                                if (newValue == null) {
+                                    newValue = [];
+                                }
+                            } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
+                                newValue = input.text();
+                            } else {
+                                newValue = input.val();
+                            }
+                            if (newValue != null) {
+                                if (d === "outputs") {
+                                    if  (newValue.trim() === "") {
+                                        continue;
+                                    }
+                                    if (isNaN(newValue)) {
+                                        editState.outputMap = JSON.parse(newValue);
+                                        var outputCount = 0;
+                                        var outputsChanged = false;
+                                        var keys = Object.keys(editState.outputMap);
+                                        keys.forEach(function(p) {
+                                            if (isNaN(p)) {
+                                                // New output;
+                                                outputCount ++;
+                                                delete editState.outputMap[p];
+                                            } else {
+                                                editState.outputMap[p] = editState.outputMap[p]+"";
+                                                if (editState.outputMap[p] !== "-1") {
+                                                    outputCount++;
+                                                    if (editState.outputMap[p] !== p) {
+                                                        // Output moved
+                                                        outputsChanged = true;
+                                                    } else {
+                                                        delete editState.outputMap[p];
+                                                    }
+                                                } else {
+                                                    // Output removed
+                                                    outputsChanged = true;
+                                                }
+                                            }
+                                        });
+
+                                        newValue = outputCount;
+                                        if (outputsChanged) {
+                                            editState.changed = true;
+                                        }
+                                    } else {
+                                        newValue = parseInt(newValue);
+                                    }
+                                }
+                                if (editing_node._def.defaults[d].type) {
+                                    if (newValue == "_ADD_") {
+                                        newValue = "";
+                                    }
+                                }
+                                if (editing_node[d] != newValue) {
+                                    if (editing_node._def.defaults[d].type) {
+                                        // Change to a related config node
+                                        var configNode = RED.nodes.node(editing_node[d]);
+                                        if (configNode) {
+                                            var users = configNode.users;
+                                            users.splice(users.indexOf(editing_node),1);
+                                            RED.events.emit("nodes:change",configNode);
+                                        }
+                                        configNode = RED.nodes.node(newValue);
+                                        if (configNode) {
+                                            configNode.users.push(editing_node);
+                                            RED.events.emit("nodes:change",configNode);
+                                        }
+                                    }
+                                    editState.changes[d] = editing_node[d];
+                                    editing_node[d] = newValue;
+                                    editState.changed = true;
+                                }
+                            }
+                        }
+                    }
+                }
+                if (editing_node._def.credentials) {
+                    var credDefinition = editing_node._def.credentials;
+                    var credsChanged = updateNodeCredentials(editing_node,credDefinition,this.inputClass);
+                    editState.changed = editState.changed || credsChanged;
+                }
+            }
+        }
+    });
+
+    /**
+     * Update the node credentials from the edit form
+     * @param node - the node containing the credentials
+     * @param credDefinition - definition of the credentials
+     * @param prefix - prefix of the input fields
+     * @return {boolean} whether anything has changed
+     */
+    function updateNodeCredentials(node, credDefinition, prefix) {
+        var changed = false;
+        if (!node.credentials) {
+            node.credentials = {_:{}};
+        } else if (!node.credentials._) {
+            node.credentials._ = {};
+        }
+
+        for (var cred in credDefinition) {
+            if (credDefinition.hasOwnProperty(cred)) {
+                var input = $("#" + prefix + '-' + cred);
+                if (input.length > 0) {
+                    var value = input.val();
+                    if (credDefinition[cred].type == 'password') {
+                        node.credentials['has_' + cred] = (value !== "");
+                        if (value == '__PWRD__') {
+                            continue;
+                        }
+                        changed = true;
+
+                    }
+                    node.credentials[cred] = value;
+                    if (value != node.credentials._[cred]) {
+                        changed = true;
+                    }
+                }
+            }
+        }
+        return changed;
+    }
+
+
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
new file mode 100644
index 000000000..4636862f6
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js
@@ -0,0 +1,181 @@
+(function() {
+    var _subflowModulePaneTemplate = '<form class="dialog-form form-horizontal" autocomplete="off">'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-module" data-i18n="[append]editor:subflow.module"><i class="fa fa-cube"></i> </label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-module" data-i18n="[placeholder]common.label.name">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-type" data-i18n="[append]editor:subflow.type"> </label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-type">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-version" data-i18n="[append]editor:subflow.version"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-version" data-i18n="[placeholder]editor:subflow.versionPlaceholder">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-desc" data-i18n="[append]editor:subflow.desc"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-desc">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-license" data-i18n="[append]editor:subflow.license"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-license">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-author" data-i18n="[append]editor:subflow.author"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-author" data-i18n="[placeholder]editor:subflow.authorPlaceholder">'+
+        '</div>'+
+        '<div class="form-row">'+
+            '<label for="subflow-input-module-keywords" data-i18n="[append]editor:subflow.keys"></label>'+
+            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-keywords" data-i18n="[placeholder]editor:subflow.keysPlaceholder">'+
+        '</div>'+
+    '</form>';
+
+    RED.editor.registerEditorPane("editor-tab-subflow-module", function() {
+        return {
+            label: RED._("editor-tab.module"),
+            name: RED._("editor-tab.module"),
+            iconClass: "fa fa-cube",
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                buildModuleForm(content, node);
+                return content;
+            },
+            resize: function(node, size) {
+            },
+            close: function(node) {
+
+            },
+            apply: function(node, editState) {
+                var newMeta = exportSubflowModuleProperties(node);
+                if (!isSameObj(node.meta,newMeta)) {
+                    editState.changes.meta = node.meta;
+                    node.meta = newMeta;
+                    editState.changed = true;
+                }
+            }
+        }
+    });
+
+    function isSameObj(env0, env1) {
+        return (JSON.stringify(env0) === JSON.stringify(env1));
+    }
+
+    function setupInputValidation(input,validator) {
+        var errorTip;
+        var validateTimeout;
+
+        var validateFunction = function() {
+            if (validateTimeout) {
+                return;
+            }
+            validateTimeout = setTimeout(function() {
+                var error = validator(input.val());
+                // if (!error && errorTip) {
+                //     errorTip.close();
+                //     errorTip = null;
+                // } else if (error && !errorTip) {
+                //     errorTip = RED.popover.create({
+                //         tooltip: true,
+                //         target:input,
+                //         size: "small",
+                //         direction: "bottom",
+                //         content: error,
+                //     }).open();
+                // }
+                input.toggleClass("input-error",!!error);
+                validateTimeout = null;
+            })
+        }
+        input.on("change keyup paste", validateFunction);
+    }
+
+    function buildModuleForm(container, node) {
+        $(_subflowModulePaneTemplate).appendTo(container);
+        var moduleProps = node.meta || {};
+        [
+            'module',
+            'type',
+            'version',
+            'author',
+            'desc',
+            'keywords',
+            'license'
+        ].forEach(function(property) {
+            $("#subflow-input-module-"+property).val(moduleProps[property]||"")
+        })
+        $("#subflow-input-module-type").attr("placeholder",node.id);
+
+        setupInputValidation($("#subflow-input-module-module"), function(newValue) {
+            newValue = newValue.trim();
+            var isValid = newValue.length < 215;
+            isValid = isValid && !/^[._]/.test(newValue);
+            isValid = isValid && !/[A-Z]/.test(newValue);
+            if (newValue !== encodeURIComponent(newValue)) {
+                var m = /^@([^\/]+)\/([^\/]+)$/.exec(newValue);
+                if (m) {
+                    isValid = isValid && (m[1] === encodeURIComponent(m[1]) && m[2] === encodeURIComponent(m[2]))
+                } else {
+                    isValid = false;
+                }
+            }
+            return isValid?"":"Invalid module name"
+        })
+        setupInputValidation($("#subflow-input-module-version"), function(newValue) {
+            newValue = newValue.trim();
+            var isValid = newValue === "" ||
+                          /^(\d|[1-9]\d*)\.(\d|[1-9]\d*)\.(\d|[1-9]\d*)(-(0|[1-9A-Za-z-][0-9A-Za-z-]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9A-Za-z-][0-9A-Za-z-]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*)?(\+[0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*)?$/.test(newValue);
+            return isValid?"":"Invalid version number"
+        })
+
+        var licenses = ["none", "Apache-2.0", "BSD-3-Clause", "BSD-2-Clause", "GPL-2.0", "GPL-3.0", "MIT", "MPL-2.0", "CDDL-1.0", "EPL-2.0"];
+        var typedLicenses = {
+            types: licenses.map(function(l) {
+                return {
+                    value: l,
+                    label: l === "none" ? RED._("editor:subflow.licenseNone") : l,
+                    hasValue: false
+                };
+            })
+        }
+        typedLicenses.types.push({
+            value:"_custom_", label:RED._("editor:subflow.licenseOther"), icon:"red/images/typedInput/az.svg"
+        })
+        if (!moduleProps.license) {
+            typedLicenses.default = "none";
+        } else if (licenses.indexOf(moduleProps.license) > -1) {
+            typedLicenses.default = moduleProps.license;
+        } else {
+            typedLicenses.default = "_custom_";
+        }
+        $("#subflow-input-module-license").typedInput(typedLicenses)
+    }
+    function exportSubflowModuleProperties(node) {
+        var value;
+        var moduleProps = {};
+        [
+            'module',
+            'type',
+            'version',
+            'author',
+            'desc',
+            'keywords'
+        ].forEach(function(property) {
+            value = $("#subflow-input-module-"+property).val().trim();
+            if (value) {
+                moduleProps[property] = value;
+            }
+        })
+        var selectedLicenseType = $("#subflow-input-module-license").typedInput("type");
+
+        if (selectedLicenseType === '_custom_') {
+            value = $("#subflow-input-module-license").val();
+            if (value) {
+                moduleProps.license = value;
+            }
+        } else if (selectedLicenseType !== "none") {
+            moduleProps.license = selectedLicenseType;
+        }
+        return moduleProps;
+    }
+
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
new file mode 100644
index 000000000..f9071fac8
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js
@@ -0,0 +1,68 @@
+;(function() {
+
+    RED.editor.registerEditorPane("editor-tab-envProperties", function() {
+        return {
+            label: RED._("editor-tab.envProperties"),
+            name: RED._("editor-tab.envProperties"),
+            iconClass: "fa fa-list",
+            create: function(container, node) {
+                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
+                var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(content);
+                var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
+                this.list = $('<ol></ol>').appendTo(listContainer);
+                RED.subflow.buildPropertiesList(this.list, node);
+                return content;
+            },
+            resize: function(node, size) {
+                this.list.editableList('height',size.height);
+            },
+            close: function(node) {
+
+            },
+            apply: function(node, editState) {
+                var old_env = node.env;
+                var new_env = RED.subflow.exportSubflowInstanceEnv(node);
+
+                // Get the values from the Properties table tab
+                var items = this.list.editableList('items');
+                items.each(function (i,el) {
+                    var data = el.data('data');
+                    var item;
+                    if (data.nameField && data.valueField) {
+                        item = {
+                            name: data.nameField.val(),
+                            value: data.valueField.typedInput("value"),
+                            type: data.valueField.typedInput("type")
+                        }
+                        if (item.name.trim() !== "") {
+                            new_env.push(item);
+                        }
+                    }
+                });
+
+
+                if (new_env && new_env.length > 0) {
+                    new_env.forEach(function(prop) {
+                        if (prop.type === "cred") {
+                            node.credentials = node.credentials || {_:{}};
+                            node.credentials[prop.name] = prop.value;
+                            node.credentials['has_'+prop.name] = (prop.value !== "");
+                            if (prop.value !== '__PWRD__') {
+                                editState.changed = true;
+                            }
+                            delete prop.value;
+                        }
+                    });
+                }
+                if (!isSameObj(old_env, new_env)) {
+                    node.env = new_env;
+                    editState.changes.env = node.env;
+                    editState.changed = true;
+                }
+            }
+        }
+    });
+    function isSameObj(env0, env1) {
+        return (JSON.stringify(env0) === JSON.stringify(env1));
+    }
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
index 7a56de563..114bb7207 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js
@@ -100,7 +100,7 @@ RED.group = (function() {
             RED.subflow.buildPropertiesForm(this);
 
             var style = this.style || {};
-            RED.colorPicker.create({
+            RED.editor.colorPicker.create({
                 id:"node-input-style-stroke",
                 value: style.stroke || defaultGroupStyle.stroke || "#a4a4a4",
                 palette: colorPalette,
@@ -111,7 +111,7 @@ RED.group = (function() {
                 none: true,
                 opacity: style.hasOwnProperty('stroke-opacity')?style['stroke-opacity']:(defaultGroupStyle.hasOwnProperty('stroke-opacity')?defaultGroupStyle['stroke-opacity']:1.0)
             }).appendTo("#node-input-row-style-stroke");
-            RED.colorPicker.create({
+            RED.editor.colorPicker.create({
                 id:"node-input-style-fill",
                 value: style.fill || defaultGroupStyle.fill ||"none",
                 palette: colorPalette,
@@ -128,7 +128,7 @@ RED.group = (function() {
                 value:style["label-position"] || "nw"
             }).appendTo("#node-input-row-style-label-position");
 
-            RED.colorPicker.create({
+            RED.editor.colorPicker.create({
                 id:"node-input-style-color",
                 value: style.color || defaultGroupStyle.color ||"#a4a4a4",
                 palette: colorPalette,
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
index 8e77ae0f5..ee176dee2 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
@@ -536,7 +536,7 @@ RED.library = (function() {
     //             evt.preventDefault();
     //             var icon = libraryFields['icon'].input.val() || "";
     //             var iconPath = (icon ? RED.utils.separateIconPath(icon) : {});
-    //             RED.editor.showIconPicker(iconButton, null, iconPath, true, function (newIcon) {
+    //             RED.editor.iconPicker.show(iconButton, null, iconPath, true, function (newIcon) {
     //                 iconButton.empty();
     //                 var path = newIcon || "";
     //                 var newPath = RED.utils.separateIconPath(path);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
index e2a982462..de40ea939 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js
@@ -37,7 +37,7 @@ RED.subflow = (function() {
         '<div id="subflow-env-tabs-content">'+
             '<div id="subflow-env-tab-edit">'+
                 '<div class="form-row node-input-env-container-row" id="subflow-input-edit-ui">'+
-                    '<ol class="red-ui-editor-subflow-env-list" id="node-input-env-container"></ol>'+
+                    '<ol id="node-input-env-container"></ol>'+
                     '<div class="node-input-env-locales-row"><i class="fa fa-language"></i> <select id="subflow-input-env-locale"></select></div>'+
                 '</div>'+
             '</div>'+
@@ -47,37 +47,6 @@ RED.subflow = (function() {
         '</div>'+
         '</script>';
 
-    var _subflowModulePaneTemplate = '<form class="dialog-form form-horizontal" autocomplete="off">'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-module" data-i18n="[append]editor:subflow.module"><i class="fa fa-cube"></i> </label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-module" data-i18n="[placeholder]common.label.name">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-type" data-i18n="[append]editor:subflow.type"> </label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-type">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-version" data-i18n="[append]editor:subflow.version"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-version" data-i18n="[placeholder]editor:subflow.versionPlaceholder">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-desc" data-i18n="[append]editor:subflow.desc"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-desc">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-license" data-i18n="[append]editor:subflow.license"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-license">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-author" data-i18n="[append]editor:subflow.author"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-author" data-i18n="[placeholder]editor:subflow.authorPlaceholder">'+
-        '</div>'+
-        '<div class="form-row">'+
-            '<label for="subflow-input-module-keywords" data-i18n="[append]editor:subflow.keys"></label>'+
-            '<input style="width: calc(100% - 110px)" type="text" id="subflow-input-module-keywords" data-i18n="[placeholder]editor:subflow.keysPlaceholder">'+
-        '</div>'+
-    '</form>';
-
     function findAvailableSubflowIOPosition(subflow,isInput) {
         var pos = {x:50,y:30};
         if (!isInput) {
@@ -909,7 +878,6 @@ RED.subflow = (function() {
      * Create interface for controlling env var UI definition
      */
     function buildEnvControl(envList,node) {
-
         var tabs = RED.tabs.create({
             id: "subflow-env-tabs",
             onchange: function(tab) {
@@ -1174,7 +1142,7 @@ RED.subflow = (function() {
              evt.preventDefault();
              var icon = ui.icon || "";
              var iconPath = (icon ? RED.utils.separateIconPath(icon) : {});
-             RED.editor.showIconPicker(iconButton, null, iconPath, true, function (newIcon) {
+             RED.editor.iconPicker.show(iconButton, null, iconPath, true, function (newIcon) {
                  iconButton.empty();
                  var path = newIcon || "";
                  var newPath = RED.utils.separateIconPath(path);
@@ -1898,25 +1866,11 @@ RED.subflow = (function() {
                         env.push(item);
                     }
                 }
-            })
-        }
-        // Second, get the values from the Properties table tab
-        var kind = isGroup ? "group" : (isTab ? "tab" : "subflow");
-        var items = $("#red-ui-editor-"+kind+"-env-list").editableList('items');
-        items.each(function (i,el) {
-            var data = el.data('data');
-            var item;
-            if (data.nameField && data.valueField) {
-                item = {
-                    name: data.nameField.val(),
-                    value: data.valueField.typedInput("value"),
-                    type: data.valueField.typedInput("type")
-                }
-                if (item.name.trim() !== "") {
+                if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
                     env.push(item);
                 }
             }
-        });
+        })
         return env;
     }
 
@@ -1948,6 +1902,8 @@ RED.subflow = (function() {
 
     function buildEditForm(type,node) {
         if (type === "subflow-template") {
+            // This is called by the `properties` edit pane when
+            // editing a subflow template.
             buildPropertiesList($('#node-input-env-container'), node);
         } else  if (type === "subflow") {
             // This gets called by the subflow type `oneditprepare` function
@@ -1956,135 +1912,6 @@ RED.subflow = (function() {
         }
     }
 
-    function buildPropertiesForm(node) {
-        var kind = (node.type === "group") ? "group" : ((node.type === "tab") ? "tab": "subflow");
-        var container = $("#editor-"+kind+"-envProperties-content");
-        var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container);
-        var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
-        var list = $('<ol id="red-ui-editor-'+kind+'-env-list" class="red-ui-editor-subflow-env-list"></ol>').appendTo(listContainer);
-        buildPropertiesList(list, node);
-    }
-
-    function setupInputValidation(input,validator) {
-        var errorTip;
-        var validateTimeout;
-
-        var validateFunction = function() {
-            if (validateTimeout) {
-                return;
-            }
-            validateTimeout = setTimeout(function() {
-                var error = validator(input.val());
-                // if (!error && errorTip) {
-                //     errorTip.close();
-                //     errorTip = null;
-                // } else if (error && !errorTip) {
-                //     errorTip = RED.popover.create({
-                //         tooltip: true,
-                //         target:input,
-                //         size: "small",
-                //         direction: "bottom",
-                //         content: error,
-                //     }).open();
-                // }
-                input.toggleClass("input-error",!!error);
-                validateTimeout = null;
-            })
-        }
-        input.on("change keyup paste", validateFunction);
-    }
-
-    function buildModuleForm(container, node) {
-        $(_subflowModulePaneTemplate).appendTo(container);
-        var moduleProps = node.meta || {};
-        [
-            'module',
-            'type',
-            'version',
-            'author',
-            'desc',
-            'keywords',
-            'license'
-        ].forEach(function(property) {
-            $("#subflow-input-module-"+property).val(moduleProps[property]||"")
-        })
-        $("#subflow-input-module-type").attr("placeholder",node.id);
-
-        setupInputValidation($("#subflow-input-module-module"), function(newValue) {
-            newValue = newValue.trim();
-            var isValid = newValue.length < 215;
-            isValid = isValid && !/^[._]/.test(newValue);
-            isValid = isValid && !/[A-Z]/.test(newValue);
-            if (newValue !== encodeURIComponent(newValue)) {
-                var m = /^@([^\/]+)\/([^\/]+)$/.exec(newValue);
-                if (m) {
-                    isValid = isValid && (m[1] === encodeURIComponent(m[1]) && m[2] === encodeURIComponent(m[2]))
-                } else {
-                    isValid = false;
-                }
-            }
-            return isValid?"":"Invalid module name"
-        })
-        setupInputValidation($("#subflow-input-module-version"), function(newValue) {
-            newValue = newValue.trim();
-            var isValid = newValue === "" ||
-                          /^(\d|[1-9]\d*)\.(\d|[1-9]\d*)\.(\d|[1-9]\d*)(-(0|[1-9A-Za-z-][0-9A-Za-z-]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9A-Za-z-][0-9A-Za-z-]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*)?(\+[0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*)?$/.test(newValue);
-            return isValid?"":"Invalid version number"
-        })
-
-        var licenses = ["none", "Apache-2.0", "BSD-3-Clause", "BSD-2-Clause", "GPL-2.0", "GPL-3.0", "MIT", "MPL-2.0", "CDDL-1.0", "EPL-2.0"];
-        var typedLicenses = {
-            types: licenses.map(function(l) {
-                return {
-                    value: l,
-                    label: l === "none" ? RED._("editor:subflow.licenseNone") : l,
-                    hasValue: false
-                };
-            })
-        }
-        typedLicenses.types.push({
-            value:"_custom_", label:RED._("editor:subflow.licenseOther"), icon:"red/images/typedInput/az.svg"
-        })
-        if (!moduleProps.license) {
-            typedLicenses.default = "none";
-        } else if (licenses.indexOf(moduleProps.license) > -1) {
-            typedLicenses.default = moduleProps.license;
-        } else {
-            typedLicenses.default = "_custom_";
-        }
-        $("#subflow-input-module-license").typedInput(typedLicenses)
-    }
-
-    function exportSubflowModuleProperties(node) {
-        var value;
-        var moduleProps = {};
-        [
-            'module',
-            'type',
-            'version',
-            'author',
-            'desc',
-            'keywords'
-        ].forEach(function(property) {
-            value = $("#subflow-input-module-"+property).val().trim();
-            if (value) {
-                moduleProps[property] = value;
-            }
-        })
-        var selectedLicenseType = $("#subflow-input-module-license").typedInput("type");
-
-        if (selectedLicenseType === '_custom_') {
-            value = $("#subflow-input-module-license").val();
-            if (value) {
-                moduleProps.license = value;
-            }
-        } else if (selectedLicenseType !== "none") {
-            moduleProps.license = selectedLicenseType;
-        }
-        return moduleProps;
-    }
-
-
     return {
         init: init,
         createSubflow: createSubflow,
@@ -2095,14 +1922,10 @@ RED.subflow = (function() {
         removeOutput: removeSubflowOutput,
         removeStatus: removeSubflowStatus,
 
-
         buildEditForm: buildEditForm,
-        buildPropertiesForm: buildPropertiesForm,
-        buildModuleForm: buildModuleForm,
+        buildPropertiesList: buildPropertiesList,
 
         exportSubflowTemplateEnv: exportEnvList,
         exportSubflowInstanceEnv: exportSubflowInstanceEnv,
-        exportSubflowModuleProperties: exportSubflowModuleProperties
-
     }
 })();