Bug 1419078 - Add a close button to the console sidebar. r=nchevobbe

MozReview-Commit-ID: EAEr3uuhgkd

--HG--
extra : rebase_source : 8d8561b8d05147e995fcdf17073704f7f2188810

devtools/client/themes/webconsole.css

@@ -767,6 +767,8 @@ a.learn-more-link.webconsole-learn-more-link {
   --icon-top-margin: 3px;
   --object-inspector-hover-background: transparent;
   --attachment-margin-block-end: 3px;
+  --primary-toolbar-height: 29px;
+  --close-button-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 /* Webconsole specific theme variables */
@@ -1209,4 +1211,31 @@ body #output-container {
 .split-box.vert.sidebar {
   /* Set to prevent the sidebar from extending past the right edge of the page */
   width: unset;
+}
+
+.sidebar-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  width: 100%;
+}
+
+.webconsole-sidebar-toolbar {
+  grid-row: 1 / 2;
+  min-height: var(--primary-toolbar-height);
+  display: flex;
+  justify-content: end;
+}
+
+.sidebar-contents {
+  grid-row: 2 / 3;
+}
+
+.webconsole-sidebar-toolbar .sidebar-close-button {
+  padding: 4px 0;
+  margin: 0;
+  margin-inline-end: -3px;
+}
+
+.sidebar-close-button::before {
+  background-image: var(--close-button-image);
 }

devtools/client/webconsole/new-console-output/components/SideBar.js

@@ -7,25 +7,52 @@ const { Component, createFactory } = require("devtools/client/shared/vendor/reac
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
+const actions = require("devtools/client/webconsole/new-console-output/actions/index");
 const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
 
 class SideBar extends Component {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       sidebarVisible: PropTypes.bool
     };
   }
 
+  constructor(props) {
+    super(props);
+    this.onClickSidebarToggle = this.onClickSidebarToggle.bind(this);
+  }
+
+  onClickSidebarToggle() {
+    this.props.dispatch(actions.sidebarToggle());
+  }
+
   render() {
     let {
       sidebarVisible,
     } = this.props;
 
+    let endPanel = dom.aside({
+      className: "sidebar-wrapper"
+    },
+      dom.header({
+        className: "devtools-toolbar webconsole-sidebar-toolbar"
+      },
+        dom.button({
+          className: "devtools-button sidebar-close-button",
+          onClick: this.onClickSidebarToggle
+        })
+      ),
+      dom.aside({
+        className: "sidebar-contents"
+      }, "Sidebar WIP")
+    );
+
     return (
       sidebarVisible ?
         SplitBox({
           className: "sidebar",
-          endPanel: dom.aside({}, "Sidebar WIP"),
+          endPanel,
           endPanelControl: true,
           initialSize: "200px",
           minSize: "100px",

devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_close_sidebar.js

@@ -3,7 +3,7 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-// Test that the sidebar is hidden when the console is cleared.
+// Test that the sidebar is hidden for all methods of closing it.
 
 "use strict";
 
@@ -49,6 +49,17 @@ add_task(async function () {
   await waitFor(() => findMessages(hud, "").length == 0);
   sidebar = hud.ui.document.querySelector(".sidebar");
   ok(!sidebar, "Sidebar hidden after console.clear()");
+
+  await showSidebar(hud);
+
+  info("Click the close button");
+  let closeButton = hud.ui.document.querySelector(".sidebar-close-button");
+  let wrapper = hud.ui.document.querySelector(".webconsole-output-wrapper");
+  let onSidebarShown = waitForNodeMutation(wrapper, { childList: true });
+  closeButton.click();
+  await onSidebarShown;
+  sidebar = hud.ui.document.querySelector(".sidebar");
+  ok(!sidebar, "Sidebar hidden after clicking on close button");
 });
 
 async function showSidebar(hud) {