Make diff tool a maximised tray rather than dialog

editor/js/ui/diff.js

@@ -1,52 +1,32 @@
 RED.diff = (function() {
 
     var currentDiff = {};
+    var diffVisible = false;
+    var diffList;
 
     function init() {
 
         // RED.actions.add("core:show-current-diff",showLocalDiff);
         RED.actions.add("core:show-remote-diff",showRemoteDiff);
-
         // RED.keyboard.add("*","ctrl-shift-l","core:show-current-diff");
         RED.keyboard.add("*","ctrl-shift-r","core:show-remote-diff");
 
 
-        var dialog = $('<div id="node-dialog-view-diff" class="hide"><div id="node-dialog-view-diff-headers"></div><ol id="node-dialog-view-diff-diff"></ol></div>').appendTo(document.body);
+        // RED.actions.add("core:show-current-diff",showLocalDiff);
+        RED.actions.add("core:show-test-flow-diff",showTestFlowDiff);
+        // RED.keyboard.add("*","ctrl-shift-l","core:show-current-diff");
+        RED.keyboard.add("*","ctrl-shift-f","core:show-test-flow-diff");
+
+    }
+
+    function buildDiffPanel() {
+        var diffPanel = $('<div id="node-dialog-view-diff"><div id="node-dialog-view-diff-headers"></div><ol id="node-dialog-view-diff-diff"></ol></div>');
 
         var toolbar = $('<div class="node-diff-toolbar">'+
             '<span><span id="node-diff-toolbar-resolved-conflicts"></span></span> '+
-            '</div>').prependTo(dialog);
+            '</div>').prependTo(diffPanel);
 
-        $("#node-dialog-view-diff").dialog({
+        diffList = diffPanel.find("#node-dialog-view-diff-diff").editableList({
-            title: RED._('deploy.confirm.button.review'),
-            modal: true,
-            autoOpen: false,
-            buttons: [
-                {
-                    text: RED._("common.label.cancel"),
-                    click: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                {
-                    id: "node-diff-view-diff-merge",
-                    text: RED._("deploy.confirm.button.merge"),
-                    class: "primary disabled",
-                    click: function() {
-                        if (!$("#node-diff-view-diff-merge").hasClass('disabled')) {
-                            refreshConflictHeader();
-                            mergeDiff(currentDiff);
-                            $( this ).dialog( "close" );
-                        }
-                    }
-                }
-            ],
-            open: function() {
-                $(this).dialog({width:Math.min($(window).width(),900),height:Math.min($(window).height(),600)});
-            }
-        });
-
-        var diffList = $("#node-dialog-view-diff-diff").editableList({
             addButton: false,
             scrollOnAdd: false,
             addItem: function(container,i,object) {
@@ -307,6 +287,7 @@ RED.diff = (function() {
                 container.i18n();
             }
         });
+        return diffPanel;
     }
     function formatWireProperty(wires,allNodes) {
         var result = $("<div>",{class:"node-diff-property-wires"})
@@ -572,6 +553,12 @@ RED.diff = (function() {
 
         var nodePropertiesDiv = $("<div>",{class:"node-diff-node-entry-properties"});
         var nodePropertiesTable = $("<table>").appendTo(nodePropertiesDiv);
+        var nodePropertiesTableCols = $('<colgroup><col/><col/></colgroup>').appendTo(nodePropertiesTable);
+        if (remoteNode !== undefined) {
+            $("<col/>").appendTo(nodePropertiesTableCols);
+        }
+        var nodePropertiesTableBody = $("<tbody>").appendTo(nodePropertiesTable);
+
         var row;
         var localCell, remoteCell;
         var element;
@@ -583,7 +570,7 @@ RED.diff = (function() {
         var conflict = false;
         var status;
 
-        row = $("<tr>").appendTo(nodePropertiesTable);
+        row = $("<tr>").appendTo(nodePropertiesTableBody);
         $("<td>",{class:"node-diff-property-cell-label"}).html("id").appendTo(row);
         localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
         if (localNode) {
@@ -626,7 +613,7 @@ RED.diff = (function() {
             ) {
                 conflict = true;
             }
-            row = $("<tr>").appendTo(nodePropertiesTable);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
             $("<td>",{class:"node-diff-property-cell-label"}).html("position").appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
@@ -694,7 +681,7 @@ RED.diff = (function() {
             ){
                 conflict = true;
             }
-            row = $("<tr>").appendTo(nodePropertiesTable);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
             $("<td>",{class:"node-diff-property-cell-label"}).html("wires").appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
@@ -761,8 +748,8 @@ RED.diff = (function() {
                 conflict = true;
             }
 
-            row = $("<tr>").appendTo(nodePropertiesTable);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
-            $("<td>",{class:"node-diff-property-cell-label"}).html(d).appendTo(row);
+            var propertyNameCell = $("<td>",{class:"node-diff-property-cell-label"}).html(d).appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
                 if (!conflict) {
@@ -1056,185 +1043,223 @@ RED.diff = (function() {
     }
 
     function showDiff(diff) {
+        if (diffVisible) {
+            return;
+        }
+
         var localDiff = diff.localDiff;
         var remoteDiff = diff.remoteDiff;
         var conflicts = diff.conflicts;
         currentDiff = diff;
-        var list = $("#node-dialog-view-diff-diff");
-        list.editableList('empty');
 
-        if (remoteDiff) {
+        var trayOptions = {
-            $("#node-diff-view-diff-merge").show();
+            title: "Review Changes", //TODO: nls
-            if (Object.keys(conflicts).length === 0) {
+            width: Infinity,
-                $("#node-diff-view-diff-merge").removeClass('disabled');
+            buttons: [
-            } else {
+                {
-                $("#node-diff-view-diff-merge").addClass('disabled');
+                    text: RED._("common.label.cancel"),
-            }
+                    click: function() {
-        } else {
+                        RED.tray.close();
-            $("#node-diff-view-diff-merge").hide();
+                    }
-        }
+                },
-        refreshConflictHeader();
+                {
-
+                    id: "node-diff-view-diff-merge",
-        $("#node-dialog-view-diff-headers").empty();
+                    text: RED._("deploy.confirm.button.merge"),
-        // console.log("--------------");
+                    class: "primary disabled",
-        // console.log(localDiff);
+                    click: function() {
-        // console.log(remoteDiff);
+                        if (!$("#node-diff-view-diff-merge").hasClass('disabled')) {
-        var currentConfig = localDiff.currentConfig;
+                            refreshConflictHeader();
-        var newConfig = localDiff.newConfig;
+                            mergeDiff(currentDiff);
-        conflicts = conflicts || {};
+                            RED.tray.close();
-
+                        }
-        var el = {
+                    }
-            diff: localDiff,
+                }
-            def: {
+            ],
-                category: 'config',
+            resize: function(dimensions) {
-                color: '#f0f0f0'
+                // trayWidth = dimensions.width;
             },
-            tab: {
+            open: function(tray) {
-                n: {},
+                var trayBody = tray.find('.editor-tray-body');
-                nodes: currentConfig.globals
+                var diffPanel = buildDiffPanel().appendTo(trayBody);
-            },
+                if (remoteDiff) {
-            newTab: {
+                    $("#node-diff-view-diff-merge").show();
-                n: {},
+                    if (Object.keys(conflicts).length === 0) {
-                nodes: newConfig.globals
+                        $("#node-diff-view-diff-merge").removeClass('disabled');
-            }
+                    } else {
-        };
+                        $("#node-diff-view-diff-merge").addClass('disabled');
+                    }
+                } else {
+                    $("#node-diff-view-diff-merge").hide();
+                }
+                refreshConflictHeader();
 
-        if (remoteDiff !== undefined) {
+                $("#node-dialog-view-diff-headers").empty();
-            $('#node-dialog-view-diff').addClass('node-diff-three-way');
+                // console.log("--------------");
+                // console.log(localDiff);
+                // console.log(remoteDiff);
+                var currentConfig = localDiff.currentConfig;
+                var newConfig = localDiff.newConfig;
+                conflicts = conflicts || {};
 
-            $('<div class="node-diff-node-entry-cell"></div><div class="node-diff-node-entry-cell" data-i18n="diff.local"></div><div class="node-diff-node-entry-cell" data-i18n="diff.remote"></div>').i18n().appendTo("#node-dialog-view-diff-headers");
-            el.remoteTab = {
-                n:{},
-                nodes:remoteDiff.newConfig.globals
-            };
-            el.remoteDiff = remoteDiff;
-        } else {
-            $('#node-dialog-view-diff').removeClass('node-diff-three-way');
-        }
-
-        list.editableList('addItem',el);
-
-        var seenTabs = {};
-
-        currentConfig.tabOrder.forEach(function(tabId) {
-            var tab = currentConfig.tabs[tabId];
-            var el = {
-                diff: localDiff,
-                def: RED.nodes.getType('tab'),
-                tab:tab
-            };
-            if (newConfig.tabs.hasOwnProperty(tabId)) {
-                el.newTab = newConfig.tabs[tabId];
-            }
-            if (remoteDiff !== undefined) {
-                el.remoteTab = remoteDiff.newConfig.tabs[tabId];
-                el.remoteDiff = remoteDiff;
-            }
-            seenTabs[tabId] = true;
-            list.editableList('addItem',el)
-        });
-        newConfig.tabOrder.forEach(function(tabId) {
-            if (!seenTabs[tabId]) {
-                seenTabs[tabId] = true;
-                var tab = newConfig.tabs[tabId];
                 var el = {
                     diff: localDiff,
-                    def: RED.nodes.getType('tab'),
+                    def: {
-                    tab:tab,
+                        category: 'config',
-                    newTab: tab
+                        color: '#f0f0f0'
+                    },
+                    tab: {
+                        n: {},
+                        nodes: currentConfig.globals
+                    },
+                    newTab: {
+                        n: {},
+                        nodes: newConfig.globals
+                    }
                 };
+
                 if (remoteDiff !== undefined) {
+                    diffPanel.addClass('node-diff-three-way');
+
+                    $('<div class="node-diff-node-entry-cell"></div><div class="node-diff-node-entry-cell" data-i18n="diff.local"></div><div class="node-diff-node-entry-cell" data-i18n="diff.remote"></div>').i18n().appendTo("#node-dialog-view-diff-headers");
+                    el.remoteTab = {
+                        n:{},
+                        nodes:remoteDiff.newConfig.globals
+                    };
                     el.remoteDiff = remoteDiff;
+                } else {
+                    diffPanel.removeClass('node-diff-three-way');
                 }
-                list.editableList('addItem',el)
+
-            }
+                diffList.editableList('addItem',el);
-        });
+
-        if (remoteDiff !== undefined) {
+                var seenTabs = {};
-            remoteDiff.newConfig.tabOrder.forEach(function(tabId) {
+
-                if (!seenTabs[tabId]) {
+                currentConfig.tabOrder.forEach(function(tabId) {
-                    var tab = remoteDiff.newConfig.tabs[tabId];
+                    var tab = currentConfig.tabs[tabId];
-                    // TODO how to recognise this is a remotely added flow
                     var el = {
                         diff: localDiff,
-                        remoteDiff: remoteDiff,
                         def: RED.nodes.getType('tab'),
-                        tab:tab,
+                        tab:tab
-                        remoteTab:tab
                     };
-                    list.editableList('addItem',el)
+                    if (newConfig.tabs.hasOwnProperty(tabId)) {
-                }
+                        el.newTab = newConfig.tabs[tabId];
-            });
-        }
-        var subflowId;
-        for (subflowId in currentConfig.subflows) {
-            if (currentConfig.subflows.hasOwnProperty(subflowId)) {
-                seenTabs[subflowId] = true;
-                el = {
-                    diff: localDiff,
-                    def: {
-                        defaults:{},
-                        icon:"subflow.png",
-                        category: "subflows",
-                        color: "#da9"
-                    },
-                    tab:currentConfig.subflows[subflowId]
-                }
-                if (newConfig.subflows.hasOwnProperty(subflowId)) {
-                    el.newTab = newConfig.subflows[subflowId];
-                }
-                if (remoteDiff !== undefined) {
-                    el.remoteTab = remoteDiff.newConfig.subflows[subflowId];
-                    el.remoteDiff = remoteDiff;
-                }
-                list.editableList('addItem',el)
-            }
-        }
-        for (subflowId in newConfig.subflows) {
-            if (newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
-                seenTabs[subflowId] = true;
-                el = {
-                    diff: localDiff,
-                    def: {
-                        defaults:{},
-                        icon:"subflow.png",
-                        category: "subflows",
-                        color: "#da9"
-                    },
-                    tab:newConfig.subflows[subflowId],
-                    newTab:newConfig.subflows[subflowId]
-                }
-                if (remoteDiff !== undefined) {
-                    el.remoteDiff = remoteDiff;
-                }
-                list.editableList('addItem',el)
-            }
-        }
-        if (remoteDiff !== undefined) {
-            for (subflowId in remoteDiff.newConfig.subflows) {
-                if (remoteDiff.newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
-                    el = {
-                        diff: localDiff,
-                        remoteDiff: remoteDiff,
-                        def: {
-                            defaults:{},
-                            icon:"subflow.png",
-                            category: "subflows",
-                            color: "#da9"
-                        },
-                        tab:remoteDiff.newConfig.subflows[subflowId],
-                        remoteTab: remoteDiff.newConfig.subflows[subflowId]
                     }
-                    list.editableList('addItem',el)
+                    if (remoteDiff !== undefined) {
+                        el.remoteTab = remoteDiff.newConfig.tabs[tabId];
+                        el.remoteDiff = remoteDiff;
+                    }
+                    seenTabs[tabId] = true;
+                    diffList.editableList('addItem',el)
+                });
+                newConfig.tabOrder.forEach(function(tabId) {
+                    if (!seenTabs[tabId]) {
+                        seenTabs[tabId] = true;
+                        var tab = newConfig.tabs[tabId];
+                        var el = {
+                            diff: localDiff,
+                            def: RED.nodes.getType('tab'),
+                            tab:tab,
+                            newTab: tab
+                        };
+                        if (remoteDiff !== undefined) {
+                            el.remoteDiff = remoteDiff;
+                        }
+                        diffList.editableList('addItem',el)
+                    }
+                });
+                if (remoteDiff !== undefined) {
+                    remoteDiff.newConfig.tabOrder.forEach(function(tabId) {
+                        if (!seenTabs[tabId]) {
+                            var tab = remoteDiff.newConfig.tabs[tabId];
+                            // TODO how to recognise this is a remotely added flow
+                            var el = {
+                                diff: localDiff,
+                                remoteDiff: remoteDiff,
+                                def: RED.nodes.getType('tab'),
+                                tab:tab,
+                                remoteTab:tab
+                            };
+                            diffList.editableList('addItem',el)
+                        }
+                    });
                 }
+                var subflowId;
+                for (subflowId in currentConfig.subflows) {
+                    if (currentConfig.subflows.hasOwnProperty(subflowId)) {
+                        seenTabs[subflowId] = true;
+                        el = {
+                            diff: localDiff,
+                            def: {
+                                defaults:{},
+                                icon:"subflow.png",
+                                category: "subflows",
+                                color: "#da9"
+                            },
+                            tab:currentConfig.subflows[subflowId]
+                        }
+                        if (newConfig.subflows.hasOwnProperty(subflowId)) {
+                            el.newTab = newConfig.subflows[subflowId];
+                        }
+                        if (remoteDiff !== undefined) {
+                            el.remoteTab = remoteDiff.newConfig.subflows[subflowId];
+                            el.remoteDiff = remoteDiff;
+                        }
+                        diffList.editableList('addItem',el)
+                    }
+                }
+                for (subflowId in newConfig.subflows) {
+                    if (newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
+                        seenTabs[subflowId] = true;
+                        el = {
+                            diff: localDiff,
+                            def: {
+                                defaults:{},
+                                icon:"subflow.png",
+                                category: "subflows",
+                                color: "#da9"
+                            },
+                            tab:newConfig.subflows[subflowId],
+                            newTab:newConfig.subflows[subflowId]
+                        }
+                        if (remoteDiff !== undefined) {
+                            el.remoteDiff = remoteDiff;
+                        }
+                        diffList.editableList('addItem',el)
+                    }
+                }
+                if (remoteDiff !== undefined) {
+                    for (subflowId in remoteDiff.newConfig.subflows) {
+                        if (remoteDiff.newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
+                            el = {
+                                diff: localDiff,
+                                remoteDiff: remoteDiff,
+                                def: {
+                                    defaults:{},
+                                    icon:"subflow.png",
+                                    category: "subflows",
+                                    color: "#da9"
+                                },
+                                tab:remoteDiff.newConfig.subflows[subflowId],
+                                remoteTab: remoteDiff.newConfig.subflows[subflowId]
+                            }
+                            diffList.editableList('addItem',el)
+                        }
+                    }
+                }
+                $("#sidebar-shade").show();
+            },
+            close: function() {
+                diffVisible = false;
+                $("#sidebar-shade").hide();
+
+            },
+            show: function() {
+
             }
         }
-
+        RED.tray.show(trayOptions);
-
-        $("#node-diff-filter-changed").addClass("selected");
-        $("#node-diff-filter-all").removeClass("selected");
-
-        $("#node-dialog-view-diff").dialog("open");
     }
+
     function mergeDiff(diff) {
         var currentConfig = diff.localDiff.currentConfig;
         var localDiff = diff.localDiff;

editor/js/ui/tray.js

@@ -34,6 +34,10 @@ RED.tray = (function() {
         if (options.title) {
             $('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
         }
+        if (options.width === Infinity) {
+            options.maximized = true;
+            resizer.addClass('editor-tray-resize-maximised');
+        }
         var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
         var primaryButton;
         if (options.buttons) {
@@ -74,7 +78,8 @@ RED.tray = (function() {
         };
         stack.push(tray);
 
-        el.draggable({
+        if (!options.maximized) {
+            el.draggable({
                 handle: resizer,
                 axis: "x",
                 start:function(event,ui) {
@@ -103,6 +108,7 @@ RED.tray = (function() {
                     tray.width = -ui.position.left;
                 }
             });
+        }
 
         function finishBuild() {
             $("#header-shade").show();
@@ -175,7 +181,7 @@ RED.tray = (function() {
             var tray = stack[stack.length-1];
             var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
             tray.body.height(trayHeight);
-            if (tray.width > $("#editor-stack").position().left-8) {
+            if (tray.options.maximized || tray.width > $("#editor-stack").position().left-8) {
                 tray.width = $("#editor-stack").position().left-8;
                 tray.tray.width(tray.width);
                 // tray.body.parent().width(tray.width);

editor/js/ui/utils.js

@@ -531,8 +531,10 @@ RED.utils = (function() {
         if (exposeApi) {
             element.prop('expand', function() { return function(targetPath, state) {
                 if (path === targetPath) {
-                    header.prop('toggle')(state);
+                    if (header.prop('toggle')) {
-                } else if (subElements[targetPath]) {
+                        header.prop('toggle')(state);
+                    }
+                } else if (subElements[targetPath] && subElements[targetPath].prop('expand') ) {
                     subElements[targetPath].prop('expand')(targetPath,state);
                 }
             }});

editor/sass/diff.scss

@@ -16,8 +16,6 @@
 
 
 #node-dialog-view-diff {
-    height: 600px;
-
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
@@ -132,11 +130,7 @@
     table {
         border-collapse: collapse;
         table-layout:fixed;
-
+        width: 100%;
-        // Fix for table-layout: fixed on safari:
-        max-width: none;
-        width: auto;
-        min-width: 100%;
     }
     td, th {
         border: 1px solid $secondary-border-color;
@@ -150,12 +144,16 @@
             white-space:nowrap;
             overflow:hidden;
         }
+        &:hover {
+            background: #f9f9f9;
+        }
+
     }
-    td:first-child {
+    col:first-child {
         width: 140px;
     }
-    td:not(:first-child) {
+    col:not(:first-child) {
-        width: calc( 100% - 140px);
+        width: 100%;
     }
     td  {
         .node-diff-status {
@@ -179,8 +177,8 @@
             width: 220px;
         }
     }
-    td:not(:first-child) {
+    col:not(:first-child) {
-        width: calc( (100% - 140px) / 2);
+        width:50%;
     }
 
     .node-diff-node-entry {
@@ -210,6 +208,9 @@
     cursor: pointer;
     padding: 0;
     // background: #f6f6f6;
+    &:hover {
+        background: #f9f9f9;
+    }
 }
 .node-diff-tab-title-meta {
     vertical-align: middle;
@@ -218,6 +219,9 @@
 }
 .node-diff-node-entry-header {
     cursor: pointer;
+    &:hover {
+        background: #f9f9f9;
+    }
 }
 .node-diff-node-entry-node {
     vertical-align: middle;
@@ -247,6 +251,9 @@
     }
     .node-diff-tab-title {
         cursor: default;
+        &:hover {
+            background: none;
+        }
     }
 }
 .node-diff-node-deleted {

editor/sass/editor.scss

@@ -132,6 +132,11 @@
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
     box-shadow: -1px 0 6px rgba(0,0,0,0.1);
+
+    &.editor-tray-resize-maximised {
+        background: $background-color;
+        cursor: default;
+    }
 }
 .editor-tray-resize-button {
     @include workspace-button;