Bug 1419076 - Make the console sidebar resizable. r=nchevobbe
authorMike Park <mikeparkms@gmail.com>
Wed, 22 Nov 2017 16:14:35 -0500
changeset 394252 df9a033ef32dabe0fcece282bdc9e556719cb824
parent 394251 6cbc9082c4352078036b20f7fff27f93c13fcdf0
child 394253 ea36d9fc714fe2e7eac0289f1fefe8aa98cdb3f4
push id97840
push userbtara@mozilla.com
push dateWed, 29 Nov 2017 23:10:41 +0000
treeherdermozilla-inbound@d1234e287ab0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1419076
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1419076 - Make the console sidebar resizable. r=nchevobbe MozReview-Commit-ID: 3xhbF4JFq4P
devtools/client/themes/webconsole.css
devtools/client/webconsole/new-console-output/components/SideBar.js
devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1172,16 +1172,17 @@ body #output-container {
   overflow: hidden;
 }
 
 .webconsole-output-wrapper {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr;
   height: 100%;
+  width: 100vw;
 }
 
 /* Object Inspector */
 .webconsole-output-wrapper .object-inspector.tree {
   /*
    * Make the arrow the same color and approximately the same size of the twisty icon.
    * Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
    */
@@ -1197,11 +1198,15 @@ body #output-container {
 .theme-dark .webconsole-output-wrapper .object-inspector.tree {
   --arrow-fill-color: #7F7E81;
 }
 
 .sidebar {
   display: flex;
   grid-row: 1 / -1;
   grid-column: -1 / -2;
-  min-width: 200px;
   background-color: var(--theme-sidebar-background);
 }
+
+.split-box.vert.sidebar {
+  /* Set to prevent the sidebar from extending past the right edge of the page */
+  width: unset;
+}
\ No newline at end of file
--- a/devtools/client/webconsole/new-console-output/components/SideBar.js
+++ b/devtools/client/webconsole/new-console-output/components/SideBar.js
@@ -1,35 +1,41 @@
 /* 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/. */
 "use strict";
 
-const { Component } = require("devtools/client/shared/vendor/react");
+const { Component, createFactory } = 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 { connect } = require("devtools/client/shared/vendor/react-redux");
+const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
 
 class SideBar extends Component {
   static get propTypes() {
     return {
       sidebarVisible: PropTypes.bool
     };
   }
 
   render() {
     let {
       sidebarVisible,
     } = this.props;
 
     return (
       sidebarVisible ?
-        dom.aside({
+        SplitBox({
           className: "sidebar",
-        }, "Sidebar WIP")
+          endPanel: dom.aside({}, "Sidebar WIP"),
+          endPanelControl: true,
+          initialSize: "200px",
+          minSize: "100px",
+          vert: true,
+        })
         : null
     );
   }
 }
 
 function mapStateToProps(state, props) {
   return {
     sidebarVisible: state.ui.sidebarVisible,
--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -186,28 +186,28 @@ NewConsoleOutputWrapper.prototype = {
 
       let filterBar = FilterBar({
         serviceContainer: {
           attachRefToHud
         }
       });
 
       let sideBar = SideBar({
-        serviceContainer
+        serviceContainer,
       });
 
       let provider = createElement(
         Provider,
         { store },
         dom.div(
           {className: "webconsole-output-wrapper"},
+          consoleOutput,
           filterBar,
-          consoleOutput,
           sideBar
-      ));
+        ));
       this.body = ReactDOM.render(provider, this.parentNode);
 
       this.jsterm.focus();
     });
   },
 
   dispatchMessageAdd: function (message, waitForResponse) {
     // Wait for the message to render to resolve with the DOM node.