Bug 1567370 - Add a close button to the Editor Toolbar. r=Honza.

The button display the same icon that will be used
in the console input when in inline-mode to toggle
the editor mode, active.
A test is added to ensure the button works as expected.

Differential Revision: https://phabricator.services.mozilla.com/D38622

--HG--
rename : browser/themes/shared/icons/sidebars.svg => devtools/client/themes/images/webconsole/editor.svg
extra : moz-landing-system : lando

devtools/client/jar.mn

@@ -126,6 +126,7 @@ devtools.jar:
     skin/images/rules-view-print-simulation.svg (themes/images/rules-view-print-simulation.svg)
     skin/markup.css (themes/markup.css)
     skin/webconsole.css (themes/webconsole.css)
+    skin/images/webconsole/editor.svg (themes/images/webconsole/editor.svg)
     skin/images/webconsole/input.svg (themes/images/webconsole/input.svg)
     skin/images/webconsole/navigation.svg (themes/images/webconsole/navigation.svg)
     skin/images/webconsole/return.svg (themes/images/webconsole/return.svg)

devtools/client/locales/en-US/webconsole.properties

@@ -416,3 +416,9 @@ webconsole.editor.toolbar.executeButton.label=Run
 # displayed when the editor mode is enabled (devtools.webconsole.input.editor=true).
 # Parameters: %S is the keyboard shortcut.
 webconsole.editor.toolbar.executeButton.tooltip=Run expression (%S). This won’t clear the input.
+
+# LOCALIZATION NOTE (webconsole.editor.toolbar.closeButton.tooltip)
+# Label used for the tooltip on the close button, in the editor toolbar, which is
+# displayed when the editor mode is enabled (devtools.webconsole.input.editor=true).
+# Parameters: %S is the keyboard shortcut.
+webconsole.editor.toolbar.closeButton.tooltip=Close Editor (%S)

devtools/client/themes/images/webconsole/editor.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+  <path d="M3 1h10c1.655.004 2.996 1.345 3 3v8c-.005 1.655-1.345 2.995-3 3H3c-1.656-.003-2.997-1.344-3-3V4c.007-1.654 1.346-2.993 3-3zm11 11V4c0-.552-.448-1-1-1H8v10h5c.552 0 1-.448 1-1zM2 12c0 .552.448 1 1 1h4V3H3c-.552 0-1 .448-1 1v8z"/>
+  <path d="M3.5 5h2c.276 0 .5-.224.5-.5S5.776 4 5.5 4h-2c-.276 0-.5.224-.5.5s.224.5.5.5zm0 2h2c.276 0 .5-.224.5-.5S5.776 6 5.5 6h-2c-.276 0-.5.224-.5.5s.224.5.5.5zm1 2h1c.276 0 .5-.224.5-.5S5.776 8 5.5 8h-1c-.276 0-.5.224-.5.5s.224.5.5.5z"/>
+</svg>

devtools/client/webconsole/components/App.css

@@ -218,12 +218,20 @@ body {
 .jsterm-editor .webconsole-editor-toolbar {
   grid-column: 1 / 2;
   grid-row: 2 / 3;
-  display: flex;
-  flex-direction: row;
-  justify-content: start;
+  display: grid;
+  /* We're going to have the run button, the history nav and the close button */
+  grid-template-columns: auto 1fr auto;
   height: unset;
 }
 
+.jsterm-editor .webconsole-editor-toolbar .webconsole-editor-toolbar-closeButton {
+  grid-column: -1 / -2;
+}
+
+.jsterm-editor .webconsole-editor-toolbar .webconsole-editor-toolbar-closeButton::before {
+  background-image: url(chrome://devtools/skin/images/webconsole/editor.svg);
+}
+
 .jsterm-editor .webconsole-output {
   grid-column: 2 / 3;
   grid-row: 4 / -1;

devtools/client/webconsole/components/App.js

@@ -368,6 +368,7 @@ class App extends Component {
       filterBar,
       editorMode
         ? EditorToolbar({
+            dispatch,
             editorMode,
             webConsoleUI,
           })

devtools/client/webconsole/components/Input/EditorToolbar.js

@@ -9,6 +9,7 @@ const { Component } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const actions = require("devtools/client/webconsole/actions/index");
 const { l10n } = require("devtools/client/webconsole/utils/messages");
 const Services = require("Services");
 const isMacOS = Services.appinfo.OS === "Darwin";
@@ -18,11 +19,12 @@ class EditorToolbar extends Component {
     return {
       webConsoleUI: PropTypes.object.isRequired,
       editorMode: PropTypes.bool,
+      dispatch: PropTypes.func.isRequired,
     };
   }
 
   render() {
-    const { editorMode, webConsoleUI } = this.props;
+    const { editorMode, webConsoleUI, dispatch } = this.props;
 
     if (!editorMode) {
       return null;
@@ -43,7 +45,16 @@ class EditorToolbar extends Component {
           onClick: () => webConsoleUI.jsterm.execute(),
         },
         l10n.getStr("webconsole.editor.toolbar.executeButton.label")
-      )
+      ),
+      dom.button({
+        className:
+          "devtools-button webconsole-editor-toolbar-closeButton checked",
+        title: l10n.getFormatStr(
+          "webconsole.editor.toolbar.closeButton.tooltip",
+          [isMacOS ? "Cmd + B" : "Ctrl + B"]
+        ),
+        onClick: () => dispatch(actions.editorToggle()),
+      })
     );
   }
 }

devtools/client/webconsole/test/mochitest/browser_jsterm_editor_toolbar.js

@@ -61,6 +61,21 @@ async function performTests() {
     isInputFocused(hud),
     "input is still focused after clicking the Run button"
   );
+
+  info("Test that clicking the close button works as expected");
+  const closeButton = toolbar.querySelector(
+    ".webconsole-editor-toolbar-closeButton"
+  );
+  const closeKeyShortcut =
+    (Services.appinfo.OS === "Darwin" ? "Cmd" : "Ctrl") + " + B";
+  is(
+    closeButton.title,
+    `Close Editor (${closeKeyShortcut})`,
+    "Close button has expected title"
+  );
+  closeButton.click();
+  await waitFor(() => !isEditorModeEnabled(hud));
+  ok(true, "Editor mode is disabled when clicking on the close button");
 }
 
 function getEditorToolbar(hud) {