IDEX-3783 Refinement in Console panel UI

plugin-machine/che-plugin-machine-ext-client/src/main/java/org/eclipse/che/ide/extension/machine/client/MachineResources.java

@@ -137,6 +137,8 @@ interface Css extends CssResource {
 
         String machineStatus();
 
+        String machineLabel();
+
         String processIcon();
 
         String processButton();

plugin-machine/che-plugin-machine-ext-client/src/main/java/org/eclipse/che/ide/extension/machine/client/processes/ProcessTreeRenderer.java

@@ -83,8 +83,6 @@ private SpanElement createMachineElement(final MachineDto machine) {
             devLabel.setTextContent(locale.viewProcessesDevTitle());
             root.appendChild(devLabel);
         }
-        Element nameElement = Elements.createSpanElement();
-        nameElement.setTextContent(machine.getName());
 
         SpanElement newTerminalButton = Elements.createSpanElement(resources.getCss().processButton());
         newTerminalButton.setTextContent("+");
@@ -99,7 +97,7 @@ private SpanElement createMachineElement(final MachineDto machine) {
         Element statusElement = Elements.createSpanElement(resources.getCss().machineStatus());
         root.appendChild(statusElement);
 
-        Tooltip.create((elemental.dom.Element)statusElement,
+        Tooltip.create((elemental.dom.Element) statusElement,
                 BOTTOM,
                 MIDDLE,
                 locale.viewMachineRunningTooltip());
@@ -123,13 +121,37 @@ public void handleEvent(Event event) {
         newTerminalButton.addEventListener(Event.CLICK, new EventListener() {
             @Override
             public void handleEvent(Event event) {
+                event.stopPropagation();
+                event.preventDefault();
+
                 if (addTerminalClickHandler != null) {
                     addTerminalClickHandler.onAddTerminalClick(machine.getId());
                 }
             }
         }, true);
 
+        /**
+         * This listener cancels mouse events on '+' button and prevents the jitter of the selection in the tree.
+         */
+        EventListener blockMouseListener = new EventListener() {
+            @Override
+            public void handleEvent(Event event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+
+        /**
+         * Prevent jitter when pressing mouse on '+' button.
+         */
+        newTerminalButton.addEventListener(Event.MOUSEDOWN, blockMouseListener, true);
+        newTerminalButton.addEventListener(Event.MOUSEUP, blockMouseListener, true);
+        newTerminalButton.addEventListener(Event.CLICK, blockMouseListener, true);
+        newTerminalButton.addEventListener(Event.DBLCLICK, blockMouseListener, true);
+
 
+        Element nameElement = Elements.createSpanElement(resources.getCss().machineLabel());
+        nameElement.setTextContent(machine.getName());
         root.appendChild(nameElement);
 
         return root;
@@ -155,25 +177,28 @@ private SpanElement createCommandElement(ProcessTreeNode node) {
 
     private SpanElement createTerminalElement(ProcessTreeNode node) {
         SpanElement root = Elements.createSpanElement();
-        root.appendChild(createCloseElement(node));
 
         SpanElement iconElement = Elements.createSpanElement();
         SVGImage icon = new SVGImage(resources.terminal());
-        iconElement.appendChild((Node)icon.getElement());
+        iconElement.appendChild((Node) icon.getElement());
         iconElement.setClassName(resources.getCss().processIcon());
         root.appendChild(iconElement);
 
+        root.appendChild(createCloseElement(node));
+
         Element nameElement = Elements.createSpanElement();
         nameElement.setTextContent(node.getName());
         root.appendChild(nameElement);
+
         return root;
     }
 
     private SpanElement createCloseElement(final ProcessTreeNode node) {
-        SpanElement closeButton = Elements.createSpanElement();
+        SpanElement closeButton = Elements.createSpanElement(resources.getCss().processesPanelCloseButtonForProcess());
+
         SVGImage icon = new SVGImage(partStackUIResources.closeIcon());
-        icon.setClassNameBaseVal(resources.getCss().processesPanelCloseButtonForProcess());
         closeButton.appendChild((Node) icon.getElement());
+
         Tooltip.create((elemental.dom.Element)closeButton,
                        BOTTOM,
                        MIDDLE,
@@ -187,11 +212,13 @@ public void handleEvent(Event event) {
                 }
             }
         }, true);
+
         return closeButton;
     }
 
     private SpanElement createStopProcessElement(final ProcessTreeNode node) {
         SpanElement stopProcessButton = Elements.createSpanElement(resources.getCss().processesPanelStopButtonForProcess());
+
         Tooltip.create((elemental.dom.Element) stopProcessButton,
                 BOTTOM,
                 MIDDLE,
@@ -205,6 +232,7 @@ public void handleEvent(Event event) {
                 }
             }
         }, true);
+
         return stopProcessButton;
     }
 

plugin-machine/che-plugin-machine-ext-client/src/main/resources/org/eclipse/che/ide/extension/machine/client/machine.css

@@ -18,6 +18,7 @@
 @eval outputFontColor org.eclipse.che.ide.api.theme.Style.theme.getOutputFontColor();
 @eval editorTabIconColor org.eclipse.che.ide.api.theme.Style.getEditorTabIconColor();
 @eval outputBoxShadow org.eclipse.che.ide.api.theme.Style.theme.outputBoxShadow();
+@eval processTreeDevLabel org.eclipse.che.ide.api.theme.Style.theme.processTreeDevLabel();
 
 @external .terminal, .terminal-cursor;
 
@@ -240,6 +241,10 @@
     line-height: 18px;
 }
 
+.processTree .machineLabel {
+    font-weight: bold;
+}
+
 .processTree .machineStatus {
     float: right;
     width: 10px;
@@ -265,7 +270,7 @@
     color: categoryHeaderButtonColor;
     border: 1px solid categoryHeaderButtonColor;
     margin: 3px 6px 0 5px;
-    width: 13px;
+    width: 14px;
     height: 13px;
     opacity: 0.5;
     font-size: 13px;
@@ -282,7 +287,8 @@
     stroke: categoryHeaderButtonHoverColor;
 }
 
-.processButton:hover, .sshButton:hover {
+.processButton:hover,
+.sshButton:hover {
     filter: brightness(120%);
     -webkit-filter: brightness(120%);
 }
@@ -304,6 +310,10 @@
     fill: iconColor;
 }
 
+.processTree div[selected="true"] .processIcon svg path {
+    fill: activeIconColor;
+}
+
 .processNavigation {
     outline: none;
 }
@@ -325,27 +335,11 @@ div.processHeaderTitle {
     color: successColor !important;
 }
 
-.processesPanelCloseButtonForProcess {
-    cursor: pointer;
-    opacity: 0.5;
-    padding: 6px 7px;
-    float: right;
-    fill: editorTabIconColor;
-    margin-right: 1px;
-    margin-top: -1px;
-}
-
-.processesPanelCloseButtonForProcess g,
-.processesPanelCloseButtonForProcess path {
-    fill: editorTabIconColor;
-}
-
 .processesPanelStopButtonForProcess {
-    display: none;
     float: right;
     background-color: editorTabIconColor;
     opacity: 0.3;
-    margin: 4px 6px 0 5px;
+    margin: 4px 5px 0 5px;
     width: 10px;
     height: 10px;
     border-radius: 2px;
@@ -357,7 +351,31 @@ div.processHeaderTitle {
     opacity: 0.5;
 }
 
-.selectedProcess img.processesPanelCloseButtonForProcess,
-.selectedProcess span.processesPanelStopButtonForProcess {
-    display: block;
+.processesPanelCloseButtonForProcess {
+    float: right;
+}
+
+.processesPanelCloseButtonForProcess svg {
+    cursor: pointer;
+    opacity: 0.5;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-left: 8px;
+    padding-right: 9px;
+    float: right;
+    fill: editorTabIconColor;
 }
+
+.processesPanelCloseButtonForProcess svg g,
+.processesPanelCloseButtonForProcess svg path {
+    fill: editorTabIconColor;
+}
+
+.processTree div[selected="true"] .processesPanelCloseButtonForProcess svg,
+.processesPanelCloseButtonForProcess:HOVER svg {
+    opacity: 1;
+}
+
+.selectedProcess {
+
+}