Merge branch 'master' into pr_3744

Fix clear pinned paths of debug sidebar menu

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 Editor
 
+ - Move all colours to CSS variables (#3692) @bonanitech
  - Fix clicking on node in workspace to hide context menu (#3696) @knolleary
  - Fix credential type input item of subflow template (#3703) @HiroyasuNishiyama
  - Add option flag `reimport` to `importNodes` (#3718) @Steve-Mcl
@@ -22,6 +23,7 @@ Editor
 
 Runtime
 
+ - Allow flows to be stopped and started manually (#3719) @knolleary
  - Import default export if node is a transpiled es module (#3669) @dschmidt
  - Leave Monaco theme commented out by default (#3704) @bonanitech
 

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

@@ -101,7 +101,10 @@ module.exports = {
         }
         themeSettings = null;
         theme = settings.editorTheme || {};
-        themeContext.asset.vendorMonaco = ((theme.codeEditor || {}).lib === "monaco") ? "vendor/monaco/monaco-bootstrap.js" : "";
+        themeContext.asset.vendorMonaco = "vendor/monaco/monaco-bootstrap.js"
+        if (theme.codeEditor && theme.codeEditor.lib === 'ace') {
+            themeContext.asset.vendorMonaco = ''
+        }
         activeTheme = theme.theme;
     },
 

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

@@ -300,6 +300,10 @@
         "modifiedFlowsDesc": "Only deploys flows that contain changed nodes",
         "modifiedNodes": "Modified Nodes",
         "modifiedNodesDesc": "Only deploys nodes that have changed",
+        "startFlows": "Start",
+        "startFlowsDesc": "Start Flows",
+        "stopFlows": "Stop",
+        "stopFlowsDesc": "Stop Flows",
         "restartFlows": "Restart Flows",
         "restartFlowsDesc": "Restarts the current deployed flows",
         "successfulDeploy": "Successfully deployed",

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

@@ -169,6 +169,10 @@
         }
     },
     "notification": {
+        "state": {
+            "flowsStopped": "フローを停止しました",
+            "flowsStarted": "フローを開始しました"
+        },
         "warning": "<strong>警告</strong>: __message__",
         "warnings": {
             "undeployedChanges": "ノードの変更をデプロイしていません",
@@ -296,6 +300,10 @@
         "modifiedFlowsDesc": "変更したノードを含むフローのみデプロイ",
         "modifiedNodes": "変更したノード",
         "modifiedNodesDesc": "変更したノードのみデプロイ",
+        "startFlows": "開始",
+        "startFlowsDesc": "フローを開始",
+        "stopFlows": "停止",
+        "stopFlowsDesc": "フローを停止",
         "restartFlows": "フローを再起動",
         "restartFlowsDesc": "デプロイされた現在のフローを再起動",
         "successfulDeploy": "デプロイが成功しました",
@@ -685,7 +693,8 @@
             "showHelp": "ヘルプを表示",
             "showInOutline": "アウトラインに表示",
             "showTopics": "トピックを表示",
-            "noHelp": "ヘルプのトピックが未選択"
+            "noHelp": "ヘルプのトピックが未選択",
+            "changeLog": "更新履歴"
         },
         "config": {
             "name": "設定ノードを表示",
@@ -845,7 +854,7 @@
                 "pushFailed": "リモートに新しいコミットがあるため、プッシュに失敗しました。プルしてマージしてから、再度プッシュしてください。",
                 "push": "プッシュ",
                 "pull": "プル",
-                "unablePull": "<p>リモートの変更のプル失敗：ステージングされていないローカルの変更を上書きされてしまいます。</p><p>変更をコミットしてから再度実行してください。</p>",
+                "unablePull": "<p>リモートの変更のプル失敗：ステージングされていないローカルの変更が上書きされてしまいます。</p><p>変更をコミットしてから再度実行してください。</p>",
                 "showUnstagedChanges": "ステージングされていない変更を表示",
                 "connectionFailed": "リモートリポジトリに接続できません: ",
                 "pullUnrelatedHistory": "<p>リモートに関連のないコミット履歴があります。</p><p>本当に変更をプルしてローカルリポジトリに反映しますか？</p>",
@@ -1159,7 +1168,8 @@
         "takeATour": "ツアーを開始",
         "start": "開始",
         "next": "次へ",
-	"tours": "ツアー"
+        "welcomeTours": "ウェルカムツアー",
+        "tours": "ツアー"
     },
     "diagnostics": {
         "title": "システム情報"
@@ -1336,6 +1346,8 @@
         "new-project": "新しいプロジェクト",
         "open-project": "プロジェクトを開く",
         "show-project-settings": "プロジェクト設定を表示",
-        "show-version-control-tab": "バージョンコントロールタブを表示"
+        "show-version-control-tab": "バージョンコントロールタブを表示",
+        "start-flows": "フローを開始",
+        "stop-flows": "フローを停止"
     }
 }

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

@@ -3,16 +3,12 @@
         "alt-shift-p":"core:manage-palette",
         "ctrl-f": "core:search",
         "ctrl-shift-f": "core:list-flows",
-        "ctrl-+": "core:zoom-in",
-        "ctrl--": "core:zoom-out",
-        "ctrl-0": "core:zoom-reset",
-        "ctrl-enter": "core:confirm-edit-tray",
-        "ctrl-escape": "core:cancel-edit-tray",
         "ctrl-d": "core:deploy-flows",
-        "ctrl-g i": "core:show-info-tab",
-        "ctrl-g h": "core:show-help-tab",
-        "ctrl-g d": "core:show-debug-tab",
         "ctrl-g c": "core:show-config-tab",
+        "ctrl-g d": "core:show-debug-tab",
+        "ctrl-g h": "core:show-help-tab",
+        "ctrl-g i": "core:show-info-tab",
+        "ctrl-g v": "core:show-version-control-tab",
         "ctrl-g x": "core:show-context-tab",
         "ctrl-e": "core:show-export-dialog",
         "ctrl-i": "core:show-import-dialog",
@@ -23,11 +19,8 @@
         "ctrl-alt-r": "core:show-remote-diff",
         "ctrl-alt-n": "core:new-project",
         "ctrl-alt-o": "core:open-project",
-        "ctrl-g v": "core:show-version-control-tab",
         "ctrl-shift-l": "core:show-event-log",
-        "ctrl-shift-p":"core:show-action-list",
-        "alt-w": "core:hide-flow",
-        "alt-shift-w": "core:show-last-hidden-flow"
+        "ctrl-shift-p":"core:show-action-list"
     },
     "red-ui-sidebar-node-config": {
         "backspace": "core:delete-config-selection",
@@ -93,7 +86,16 @@
         "alt-a v": "core:distribute-selection-vertically",
         "shift-f": "core:search-previous",
         "f": "core:search-next",
-        "alt-l l": "core:split-wire-with-link-nodes"
+        "alt-l l": "core:split-wire-with-link-nodes",
+        "alt-w": "core:hide-flow",
+        "alt-shift-w": "core:show-last-hidden-flow",
+        "ctrl-+": "core:zoom-in",
+        "ctrl--": "core:zoom-out",
+        "ctrl-0": "core:zoom-reset"
 
+     },
+     "red-ui-editor-stack": {
+        "ctrl-enter": "core:confirm-edit-tray",
+        "ctrl-escape": "core:cancel-edit-tray"
      }
 }

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

@@ -1664,6 +1664,7 @@ RED.nodes = (function() {
     function importNodes(newNodesObj,options) { // createNewIds,createMissingWorkspace) {
         const defOpts = { generateIds: false, addFlow: false, reimport: false, importMap: {} }
         options = Object.assign({}, defOpts, options)
+        options.importMap = options.importMap || {}
         const createNewIds = options.generateIds;
         const reimport = (!createNewIds && !!options.reimport)
         const createMissingWorkspace = options.addFlow;

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

@@ -1,4 +1,4 @@
-RED.contextMenu = (function() {
+RED.contextMenu = (function () {
 
     let menu;
     function createMenu() {
@@ -15,10 +15,6 @@ RED.contextMenu = (function() {
         //     ],
         //     width: 200,
         // })
-
-
-
-
     }
 
     function disposeMenu() {
@@ -43,33 +39,67 @@ RED.contextMenu = (function() {
         const isGroup = hasSelection && selection.nodes.length === 1 && selection.nodes[0].type === 'group'
 
         const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g
+        const offset = $("#red-ui-workspace-chart").offset()
 
+        let addX = options.x - offset.left + $("#red-ui-workspace-chart").scrollLeft()
+        let addY = options.y - offset.top + $("#red-ui-workspace-chart").scrollTop()
+
+        if (RED.view.snapGrid) {
+            const gridSize = RED.view.gridSize()
+            addX = gridSize * Math.floor(addX / gridSize)
+            addY = gridSize * Math.floor(addY / gridSize)
+        }
 
         const menuItems = [
-            { onselect: 'core:show-action-list', onpostselect: function() {} },
+            { onselect: 'core:show-action-list', onpostselect: function () { } },
             {
                 label: RED._("contextMenu.insert"),
                 options: [
                     {
                         label: RED._("contextMenu.node"),
-                        onselect: function() {
+                        onselect: function () {
                             RED.view.showQuickAddDialog({
-                                position: [ options.x - offset.left, options.y - offset.top ],
+                                position: [addX, addY],
                                 touchTrigger: true,
-                                splice: isSingleLink?selection.links[0]:undefined,
+                                splice: isSingleLink ? selection.links[0] : undefined,
                                 // spliceMultiple: isMultipleLinks
                             })
                         }
                     },
-                    {
+                    (hasSelection || hasLinks) ? {
                         label: RED._("contextMenu.junction"),
                         onselect: 'core:split-wires-with-junctions',
-                        disabled: hasSelection || !hasLinks
+                        disabled: !hasLinks
+                    } : {
+                        label: RED._("contextMenu.junction"),
+                        onselect: function () {
+                            const nn = {
+                                _def: { defaults: {} },
+                                type: 'junction',
+                                z: RED.workspaces.active(),
+                                id: RED.nodes.id(),
+                                x: addX,
+                                y: addY,
+                                w: 0, h: 0,
+                                outputs: 1,
+                                inputs: 1,
+                                dirty: true
+                            }
+                            const historyEvent = {
+                                dirty: RED.nodes.dirty(),
+                                t: 'add',
+                                junctions: [nn]
+                            }
+                            RED.nodes.addJunction(nn);
+                            RED.history.push(historyEvent);
+                            RED.nodes.dirty(true);
+                            RED.view.redraw(true)
+                        }
                     },
                     {
                         label: RED._("contextMenu.linkNodes"),
                         onselect: 'core:split-wire-with-link-nodes',
-                        disabled: hasSelection || !hasLinks
+                        disabled: !hasLinks
                     }
                 ]
 
@@ -77,28 +107,13 @@ RED.contextMenu = (function() {
 
             }
         ]
-        // menuItems.push(
-        //     {
-        //         label: (isSingleLink || isMultipleLinks)?'Insert into wire...':'Add node...',
-        //         onselect: function() {
-        //             RED.view.showQuickAddDialog({
-        //                 position: [ options.x - offset.left, options.y - offset.top ],
-        //                 touchTrigger: true,
-        //                 splice: isSingleLink?selection.links[0]:undefined,
-        //                 spliceMultiple: isMultipleLinks
-        //             })
-        //         }
-        //     },
-        // )
-        // if (hasLinks && !hasSelection) {
-        //     menuItems.push({ onselect: 'core:split-wires-with-junctions', label: 'Insert junction'})
-        // }
+
         menuItems.push(
             null,
             { onselect: 'core:undo', disabled: RED.history.list().length === 0 },
             { onselect: 'core:redo', disabled: RED.history.listRedo().length === 0 },
             null,
-            { onselect: 'core:cut-selection-to-internal-clipboard', label: RED._("keyboard.cutNode"), disabled: !hasSelection},
+            { onselect: 'core:cut-selection-to-internal-clipboard', label: RED._("keyboard.cutNode"), disabled: !hasSelection },
             { onselect: 'core:copy-selection-to-internal-clipboard', label: RED._("keyboard.copyNode"), disabled: !hasSelection },
             { onselect: 'core:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !RED.view.clipboard() },
             { onselect: 'core:delete-selection', disabled: !canDelete },
@@ -110,27 +125,34 @@ RED.contextMenu = (function() {
             menuItems.push(
                 null,
                 isGroup ?
-                  { onselect: 'core:ungroup-selection', disabled: !isGroup }
-                : { onselect: 'core:group-selection', disabled: !hasSelection }
+                    { onselect: 'core:ungroup-selection', disabled: !isGroup }
+                    : { onselect: 'core:group-selection', disabled: !hasSelection }
             )
             if (canRemoveFromGroup) {
                 menuItems.push({ onselect: 'core:remove-selection-from-group', label: RED._("menu.label.groupRemoveSelection") })
             }
 
         }
-        const offset = $("#red-ui-workspace-chart").offset()
+
+        var direction = "right";
+        var MENU_WIDTH = 500; // can not use menu width here
+        if ((options.x -$(document).scrollLeft()) >
+            ($(window).width() -MENU_WIDTH)) {
+            direction = "left";
+        }
+        
         menu = RED.menu.init({
-            direction: 'right',
+            direction: direction,
             onpreselect: function() {
                 disposeMenu()
             },
-            onpostselect: function() {
+            onpostselect: function () {
                 RED.view.focus()
             },
             options: menuItems
         });
 
-        menu.attr("id","red-ui-workspace-context-menu");
+        menu.attr("id", "red-ui-workspace-context-menu");
         menu.css({
             position: "absolute"
         })
@@ -141,34 +163,35 @@ RED.contextMenu = (function() {
         var top = options.y
         var left = options.x
 
-        if (top+menu.height()-$(document).scrollTop() > $(window).height()) {
-            top -= (top+menu.height())-$(window).height() + 22;
+        if (top + menu.height() - $(document).scrollTop() > $(window).height()) {
+            top -= (top + menu.height()) - $(window).height() + 22;
         }
-        if (left+menu.width()-$(document).scrollLeft() > $(window).width()) {
-            left -= (left+menu.width())-$(window).width() + 18;
+        if (left + menu.width() - $(document).scrollLeft() > $(window).width()) {
+            left -= (left + menu.width()) - $(window).width() + 18;
         }
         menu.css({
-            top: top+"px",
-            left: left+"px"
+            top: top + "px",
+            left: left + "px"
         })
         $(".red-ui-menu.red-ui-menu-dropdown").hide();
-        $(document).on("mousedown.red-ui-workspace-context-menu", function(evt) {
+        $(document).on("mousedown.red-ui-workspace-context-menu", function (evt) {
             if (menu && menu[0].contains(evt.target)) {
                 return
             }
             disposeMenu()
         });
         menu.show();
-
-        // menu.show({
-        //     target: $('#red-ui-main-container'),
-        //     x: options.x,
-        //     y: options.y
-        // })
-
+        // set focus to first item so that pressing escape key closes the menu
+        $("#red-ui-workspace-context-menu :first(ul) > a").trigger("focus")
 
     }
-
+    // Allow escape key hook and other editor events to close context menu
+    RED.keyboard.add("red-ui-workspace-context-menu", "escape", function () { RED.contextMenu.hide() })
+    RED.events.on("editor:open", function () { RED.contextMenu.hide() });
+    RED.events.on("search:open", function () { RED.contextMenu.hide() });
+    RED.events.on("type-search:open", function () { RED.contextMenu.hide() });
+    RED.events.on("actionList:open", function () { RED.contextMenu.hide() });
+    RED.events.on("view:selection-changed", function () { RED.contextMenu.hide() });
     return {
         show: show,
         hide: disposeMenu

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

@@ -70,8 +70,8 @@ RED.deploy = (function() {
                     null
             ]
             if (RED.settings.runtimeState && RED.settings.runtimeState.ui === true) {
-                mainMenuItems.push({id:"deploymenu-item-runtime-start", icon:"red/images/start.svg",label:"Start"/*RED._("deploy.startFlows")*/,sublabel:"Start Flows" /*RED._("deploy.startFlowsDesc")*/,onselect:"core:start-flows", visible:false})
-                mainMenuItems.push({id:"deploymenu-item-runtime-stop", icon:"red/images/stop.svg",label:"Stop"/*RED._("deploy.startFlows")*/,sublabel:"Stop Flows" /*RED._("deploy.startFlowsDesc")*/,onselect:"core:stop-flows", visible:false})
+                mainMenuItems.push({id:"deploymenu-item-runtime-start", icon:"red/images/start.svg",label:RED._("deploy.startFlows"),sublabel:RED._("deploy.startFlowsDesc"),onselect:"core:start-flows", visible:false})
+                mainMenuItems.push({id:"deploymenu-item-runtime-stop", icon:"red/images/stop.svg",label:RED._("deploy.stopFlows"),sublabel:RED._("deploy.stopFlowsDesc"),onselect:"core:stop-flows", visible:false})
             }
             mainMenuItems.push({id:"deploymenu-item-reload", icon:"red/images/deploy-reload.svg",label:RED._("deploy.restartFlows"),sublabel:RED._("deploy.restartFlowsDesc"),onselect:"core:restart-flows"})
             RED.menu.init({id:"red-ui-header-button-deploy-options", options: mainMenuItems });

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

@@ -265,13 +265,18 @@ RED.keyboard = (function() {
                 if (partialState) {
                     partialState = null;
                     return resolveKeyEvent(evt);
-                } else if (Object.keys(handler).length > 0) {
-                    partialState = handler;
-                    evt.preventDefault();
-                    return null;
-                } else {
-                    return null;
                 }
+                if (Object.keys(handler).length > 0) {
+                    // check if there's a potential combined handler initiated by this keyCode 
+                    for (let h in handler) {
+                        if (matchHandlerToEvent(evt,handler[h]) > -1) {
+                            partialState = handler;
+                            evt.preventDefault();
+                            break;
+                        }
+                    }
+                }
+                return null;
             } else {
                 var depth = Infinity;
                 var matchedHandler;

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

@@ -105,6 +105,9 @@ RED.view.tools = (function() {
                 $(document).one('keyup',endKeyboardMove);
                 endMoveSet = true;
             }
+            var dim = RED.view.dimensions();
+            var space_width = dim.width;
+            var space_height = dim.height;
             var minX = 0;
             var minY = 0;
             var node;
@@ -120,6 +123,12 @@ RED.view.tools = (function() {
                 node.n.dirty = true;
                 node.n.x += dx;
                 node.n.y += dy;
+                if ((node.n.x +node.n.w/2) >= space_width) {
+                    node.n.x = space_width -node.n.w/2;
+                }
+                if ((node.n.y +node.n.h/2) >= space_height) {
+                    node.n.y = space_height -node.n.h/2;
+                }
                 node.n.dirty = true;
                 if (node.n.type === "group") {
                     RED.group.markDirty(node.n);

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

@@ -95,6 +95,7 @@ RED.view = (function() {
     let flashingNodeId;
 
     var clipboard = "";
+    let clipboardSource
 
     // Note: these are the permitted status colour aliases. The actual RGB values
     //       are set in the CSS - flow.scss/colors.scss
@@ -628,8 +629,10 @@ RED.view = (function() {
         });
 
         RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
-        RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});
-        RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard,{generateIds: true, generateDefaultNames: true});});
+        RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection(true);deleteSelection();});
+        RED.actions.add("core:paste-from-internal-clipboard",function(){
+            importNodes(clipboard,{generateIds: clipboardSource === 'copy', generateDefaultNames: clipboardSource === 'copy'});
+        });
 
         RED.actions.add("core:detach-selected-nodes", function() { detachSelectedNodes() })
 
@@ -2149,6 +2152,9 @@ RED.view = (function() {
             }
         }
         if (mouse_mode == RED.state.IMPORT_DRAGGING) {
+            if (clipboardSource === 'cut') {
+                clipboardSource = 'copy'
+            }
             updateActiveNodes();
             RED.nodes.dirty(true);
         }
@@ -2703,7 +2709,7 @@ RED.view = (function() {
         }
     }
 
-    function copySelection() {
+    function copySelection(isCut) {
         if (mouse_mode === RED.state.SELECTING_NODE) {
             return;
         }
@@ -2767,6 +2773,7 @@ RED.view = (function() {
                 }
             }
             clipboard = JSON.stringify(nns);
+            clipboardSource = isCut ? 'cut' : 'copy'
             RED.menu.setDisabled("menu-item-edit-paste", false);
             if (nodeCount > 0) {
                 RED.notify(RED._("clipboard.nodeCopied",{count:nodeCount}),{id:"clipboard"});
@@ -3286,11 +3293,17 @@ RED.view = (function() {
 
         if (active && ((portType === PORT_TYPE_INPUT && ((d._def && d._def.inputLabels)||d.inputLabels)) || (portType === PORT_TYPE_OUTPUT && ((d._def && d._def.outputLabels)||d.outputLabels)))) {
             portLabelHoverTimeout = setTimeout(function() {
+                const n = port && port.node()
+                const nId = n && n.__data__ && n.__data__.id
+                //check see if node has been deleted since timeout started
+                if(!n || !n.parentNode || !RED.nodes.node(n.__data__.id)) {
+                    return; //node is gone!
+                }
                 var tooltip = getPortLabel(d,portType,portIndex);
                 if (!tooltip) {
                     return;
                 }
-                var pos = getElementPosition(port.node());
+                var pos = getElementPosition(n);
                 portLabelHoverTimeout = null;
                 portLabelHover = showTooltip(
                     (pos[0]+(portType===PORT_TYPE_INPUT?-2:12)),
@@ -3477,6 +3490,9 @@ RED.view = (function() {
             updateSelection();
             RED.nodes.dirty(true);
             redraw();
+            if (clipboardSource === 'cut') {
+                clipboardSource = 'copy'
+            }
             resetMouseVars();
             d3.event.stopPropagation();
             return;
@@ -3724,6 +3740,10 @@ RED.view = (function() {
             if (d.hasOwnProperty('l')?!d.l : (d.type === "link in" || d.type === "link out")) {
                 var parentNode = this.parentNode;
                 portLabelHoverTimeout = setTimeout(function() {
+                    //check see if node has been deleted since timeout started
+                    if(!parentNode || !parentNode.parentNode || !RED.nodes.node(parentNode.id)) {
+                        return; //node is gone!
+                    }
                     var tooltip;
                     if (d._def.label) {
                         tooltip = d._def.label;
@@ -4086,7 +4106,7 @@ RED.view = (function() {
         var mdn = mousedown_node;
         var options = [];
         options.push({name:"delete",disabled:(movingSet.length()===0 && selectedLinks.length() === 0),onselect:function() {deleteSelection();}});
-        options.push({name:"cut",disabled:(movingSet.length()===0),onselect:function() {copySelection();deleteSelection();}});
+        options.push({name:"cut",disabled:(movingSet.length()===0),onselect:function() {copySelection(true);deleteSelection();}});
         options.push({name:"copy",disabled:(movingSet.length()===0),onselect:function() {copySelection();}});
         options.push({name:"paste",disabled:(clipboard.length===0),onselect:function() {importNodes(clipboard, {generateIds: true, touchImport: true});}});
         options.push({name:"edit",disabled:(movingSet.length() != 1),onselect:function() { RED.editor.edit(mdn);}});
@@ -6236,6 +6256,12 @@ RED.view = (function() {
         showQuickAddDialog:showQuickAddDialog,
         calculateNodeDimensions: calculateNodeDimensions,
         getElementPosition:getElementPosition,
-        showTooltip:showTooltip
+        showTooltip:showTooltip,
+        dimensions: function() {
+            return {
+                width: space_width,
+                height: space_height
+            };
+        }
     };
 })();

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

@@ -217,6 +217,7 @@ $node-icon-border-color: #000;
 $node-icon-border-color-opacity: 0.1;
 
 $node-config-background: #f3f3f3;
+$node-config-icon-container-disabled: #aaa;
 
 $node-link-port-background: #eee;
 

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

@@ -63,11 +63,14 @@
         padding: 4px 12px 4px 12px;
     }
 
-    &.red-ui-menu-dropdown-submenus > li > a,
-    &.red-ui-menu-dropdown-submenus > li > a:focus {
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a,
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a:focus {
         padding-right: 20px;
     }
-
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a,
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a:focus {
+        padding-left: 20px;
+    }
 
 
     & > .active > a,
@@ -199,7 +202,7 @@
     width: 0;
     height: 0;
     margin-top: 5px;
-    margin-left: -30px;
+    margin-left: -15px;
     /* Caret Arrow */
     border-color: transparent;
     border-right-color: var(--red-ui-menuCaret);
@@ -220,7 +223,7 @@
         margin-right: -15px;
         /* Caret Arrow */
         border-color: transparent;
-        border-left-color: $menuCaret;
+        border-left-color: var(--red-ui-menuCaret);
         border-style: solid;
         border-width: 5px 0 5px 5px;
         content: " ";

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

@@ -191,7 +191,7 @@
         margin-top: 0;
         li a {
             color: var(--red-ui-header-menu-color);
-            padding: 3px 10px 3px 40px;
+            padding: 3px 10px 3px 30px;
             img {
                 max-width: 100%;
                 margin-right: 10px;
@@ -243,6 +243,7 @@
     }
     .red-ui-menu-dropdown-submenu>a:before {
         border-right-color: var(--red-ui-headerMenuCaret);
+        margin-left: -25px !important;
     }
 
     /* Deploy menu customisations */

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

@@ -711,7 +711,9 @@
         transform: rotate(90deg);
     }
 }
-.red-ui-projects-dialog-file-list-entry-file-type-git { color: $tertiary-text-color }
+.red-ui-projects-dialog-file-list-entry-file-type-git {
+    color: var(--red-ui-tertiary-text-color);
+}
 
 .red-ui-projects-dialog-remote-list {
     .red-ui-editableList-container {

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

@@ -84,7 +84,7 @@
     .red-ui-search-result-node-port {
         position: absolute;
         border-radius: 2px;
-        border: 1px solid $node-border;
+        border: 1px solid var(--red-ui-node-border);
         width: 6px;
         height: 7px;
         top:4px;

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

@@ -54,6 +54,9 @@ ul.red-ui-sidebar-node-config-list {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        &:not(:last-child) {
+            width: calc(100% - 38px);
+        }
     }
     .red-ui-palette-icon-container {
         font-size: 12px;
@@ -98,15 +101,15 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
 }
 .red-ui-palette-node-config-unused,.red-ui-palette-node-config-disabled {
     border-color: var(--red-ui-primary-border-color);
-    background: var(--red-ui-secondary-background-inactive);
+    background: var(--red-ui-node-config-background);
     border-style: dashed;
-    color: var(--red-ui-tertiary-text-color);
+    color: var(--red-ui-node-config-icon-container-disabled);
 }
 .red-ui-palette-node-config-disabled {
     opacity: 0.6;
     font-style: italic;
     i {
-        color: var(--red-ui-secondary-text-color);
+        color: var(--red-ui-node-port-label-color);
         margin-right: 5px;
     }
 }

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

@@ -203,6 +203,7 @@
     --red-ui-node-icon-border-color-opacity: #{$node-icon-border-color-opacity};
 
     --red-ui-node-config-background: #{$node-config-background};
+    --red-ui-node-config-icon-container-disabled: #{$node-config-icon-container-disabled};
 
     --red-ui-node-link-port-background: #{$node-link-port-background};
 

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

@@ -5,11 +5,11 @@ export default {
             titleIcon: "fa fa-map-o",
             title: {
                 "en-US": "Welcome to Node-RED 3.0 Beta 4!",
-                "ja": "Node-RED 3.0 ベータ3へようこそ!"
+                "ja": "Node-RED 3.0 ベータ4へようこそ!"
             },
             description: {
                 "en-US": "<p>This is another final beta release of Node-RED 3.0.</p><p>Let's take a moment to discover the new features in this release.</p>",
-                "ja": "<p>これはNode-RED 3.0の最後のベータリリースです。</p><p>本リリースの新機能を見つけてみましょう。</p>"
+                "ja": "<p>これはNode-RED 3.0のもう一つの最後のベータリリースです。</p><p>本リリースの新機能を見つけてみましょう。</p>"
             }
         },
         {

packages/node_modules/@node-red/nodes/core/common/21-debug.html

@@ -252,6 +252,9 @@
                     if (pathParts.length === 1) {
                         // The source node is on a flow - so can use its id to find
                         sourceNode = RED.nodes.node(o.id);
+                        if (pathParts[0] === "global") {
+                            pathParts = [];
+                        }
                     } else if (pathParts.length > 1) {
                         // Highlight the subflow instance node.
                         sourceNode = RED.nodes.node(pathParts[1]);

packages/node_modules/@node-red/nodes/core/common/lib/debug/debug-utils.js

@@ -459,30 +459,38 @@ RED.debug = (function() {
     function showMessageMenu(button,dbgMessage,sourceId) {
         activeMenuMessage = dbgMessage;
         if (!menuOptionMenu) {
-            menuOptionMenu = RED.menu.init({id:"red-ui-debug-msg-option-menu",
-                options: [
-                    {id:"red-ui-debug-msg-menu-item-collapse",label:RED._("node-red:debug.messageMenu.collapseAll"),onselect:function(){
-                        activeMenuMessage.collapse();
-                    }},
+            var opts = [
+                {id:"red-ui-debug-msg-menu-item-collapse",label:RED._("node-red:debug.messageMenu.collapseAll"),onselect:function(){
+                    activeMenuMessage.collapse();
+                }},
+            ];
+            if (activeMenuMessage.clearPinned) {
+                opts.push(
                     {id:"red-ui-debug-msg-menu-item-clear-pins",label:RED._("node-red:debug.messageMenu.clearPinned"),onselect:function(){
                         activeMenuMessage.clearPinned();
                     }},
-                    null,
-                    {id:"red-ui-debug-msg-menu-item-filter", label:RED._("node-red:debug.messageMenu.filterNode"),onselect:function(){
-                        var candidateNodes = RED.nodes.filterNodes({type:'debug'});
-                        candidateNodes.forEach(function(n) {
-                            filteredNodes[n.id] = true;
-                        });
-                        delete filteredNodes[sourceId];
-                        $("#red-ui-sidebar-debug-filterSelected").trigger("click");
-                        RED.settings.set('debug.filteredNodes',Object.keys(filteredNodes))
-                        refreshMessageList();
-                    }},
-                    {id:"red-ui-debug-msg-menu-item-clear-filter",label:RED._("node-red:debug.messageMenu.clearFilter"),onselect:function(){
-                        $("#red-ui-sidebar-debug-filterAll").trigger("click");
-                        refreshMessageList();
-                    }}
-                ]
+                );
+            }
+            opts.push(
+                null,
+                {id:"red-ui-debug-msg-menu-item-filter", label:RED._("node-red:debug.messageMenu.filterNode"),onselect:function(){
+                    var candidateNodes = RED.nodes.filterNodes({type:'debug'});
+                    candidateNodes.forEach(function(n) {
+                        filteredNodes[n.id] = true;
+                    });
+                    delete filteredNodes[sourceId];
+                    $("#red-ui-sidebar-debug-filterSelected").trigger("click");
+                    RED.settings.set('debug.filteredNodes',Object.keys(filteredNodes))
+                    refreshMessageList();
+                }},
+                {id:"red-ui-debug-msg-menu-item-clear-filter",label:RED._("node-red:debug.messageMenu.clearFilter"),onselect:function(){
+                    $("#red-ui-sidebar-debug-filterAll").trigger("click");
+                    refreshMessageList();
+                }}
+            );
+
+            menuOptionMenu = RED.menu.init({id:"red-ui-debug-msg-option-menu",
+                options: opts
             });
             menuOptionMenu.css({
                 position: "absolute"

packages/node_modules/@node-red/nodes/core/network/22-websocket.js

@@ -215,6 +215,7 @@ module.exports = function(RED) {
                 delete listenerNodes[node.fullPath];
                 node.server.close();
                 node._inputNodes = [];
+                done();
             }
             else {
                 node.closing = true;

packages/node_modules/@node-red/runtime/lib/flows/Subflow.js

@@ -390,7 +390,6 @@ class Subflow extends Flow {
             }
             name = newName;
         }
-        
 
         var parent = this.parent;
         if (parent) {

packages/node_modules/@node-red/runtime/lib/nodes/credentials.js

@@ -373,11 +373,13 @@ var api = module.exports = {
 
                     }
                 }
-                for (cred in savedCredentials) {
-                    if (savedCredentials.hasOwnProperty(cred)) {
-                        if (!newCreds.hasOwnProperty(cred)) {
-                            delete savedCredentials[cred];
-                            dirty = true;
+                if (/^subflow(:|$)/.test(nodeType)) {
+                    for (cred in savedCredentials) {
+                        if (savedCredentials.hasOwnProperty(cred)) {
+                            if (!newCreds.hasOwnProperty(cred)) {
+                                delete savedCredentials[cred];
+                                dirty = true;
+                            }
                         }
                     }
                 }

packages/node_modules/@node-red/runtime/locales/ja/runtime.json

@@ -122,6 +122,7 @@
             "stopped-flows": "フローを停止しました",
             "stopped": "停止しました",
             "stopping-error": "ノードの停止に失敗しました: __message__",
+            "updated-flows": "フローを更新しました",
             "added-flow": "フローを追加します: __label__",
             "updated-flow": "フローを更新しました: __label__",
             "removed-flow": "フローを削除しました: __label__",

test/unit/@node-red/editor-api/lib/editor/theme_spec.js

@@ -51,7 +51,7 @@ describe("api/editor/theme", function () {
         context.should.have.a.property("asset");
         context.asset.should.have.a.property("red", "red/red.min.js");
         context.asset.should.have.a.property("main", "red/main.min.js");
-        context.asset.should.have.a.property("vendorMonaco", "");
+        context.asset.should.have.a.property("vendorMonaco", "vendor/monaco/monaco-bootstrap.js");
 
         should.not.exist(theme.settings());
     });
@@ -69,16 +69,16 @@ describe("api/editor/theme", function () {
         }
     });
 
-    it("Adds monaco bootstrap when enabled", async function () {
+    it("Does not add monaco bootstrap when ace selected", async function () {
         theme.init({
             editorTheme: {
                 codeEditor: {
-                    lib: 'monaco'
+                    lib: 'ace'
                 }
             }
         });
         var context = await theme.context();
-        context.asset.should.have.a.property("vendorMonaco", "vendor/monaco/monaco-bootstrap.js");
+        context.asset.should.have.a.property("vendorMonaco", "");
     });
 
     it("picks up custom theme", async function () {