Bug 1309193 - Implement sidebar toggle button in Net Panel Toolbar;r=Honza,jsnajdr

MozReview-Commit-ID: 2mHiawLmrPy

--HG--
extra : rebase_source : b11ec02ba25e1234b5f81bbe6a46b35d45ca3a69

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

@@ -492,10 +492,6 @@ netmonitor.toolbar.clear=Clear
 # in the network toolbar for the performance analysis button.
 netmonitor.toolbar.perf=Toggle performance analysis…
 
-# LOCALIZATION NOTE (netmonitor.panesButton.tooltip): This is the tooltip for
-# the button that toggles the panes visible or hidden in the netmonitor UI.
-netmonitor.panesButton.tooltip=Toggle network info
-
 # LOCALIZATION NOTE (netmonitor.summary.url): This is the label displayed
 # in the network details headers tab identifying the URL.
 netmonitor.summary.url=Request URL:

devtools/client/netmonitor/actions/index.js

@@ -4,5 +4,6 @@
 "use strict";
 
 const filters = require("./filters");
+const sidebar = require("./sidebar");
 
-module.exports = Object.assign({}, filters);
+module.exports = Object.assign({}, filters, sidebar);

devtools/client/netmonitor/actions/moz.build

@@ -5,5 +5,6 @@
 
 DevToolsModules(
     'filters.js',
-    'index.js'
+    'index.js',
+    'sidebar.js',
 )

devtools/client/netmonitor/actions/sidebar.js

@@ -0,0 +1,49 @@
+/* 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 {
+  DISABLE_TOGGLE_BUTTON,
+  SHOW_SIDEBAR,
+  TOGGLE_SIDEBAR,
+} = require("../constants");
+
+/**
+ * Change ToggleButton disabled state.
+ *
+ * @param {boolean} disabled - expected button disabled state
+ */
+function disableToggleButton(disabled) {
+  return {
+    type: DISABLE_TOGGLE_BUTTON,
+    disabled: disabled,
+  };
+}
+
+/**
+ * Change sidebar visible state.
+ *
+ * @param {boolean} visible - expected sidebar visible state
+ */
+function showSidebar(visible) {
+  return {
+    type: SHOW_SIDEBAR,
+    visible: visible,
+  };
+}
+
+/**
+ * Toggle to show/hide sidebar.
+ */
+function toggleSidebar() {
+  return {
+    type: TOGGLE_SIDEBAR,
+  };
+}
+
+module.exports = {
+  disableToggleButton,
+  showSidebar,
+  toggleSidebar,
+};

devtools/client/netmonitor/components/moz.build

@@ -5,4 +5,5 @@
 
 DevToolsModules(
     'filter-buttons.js',
+    'toggle-button.js',
 )

devtools/client/netmonitor/components/toggle-button.js

@@ -0,0 +1,69 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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/. */
+/* globals NetMonitorView */
+"use strict";
+
+const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { L10N } = require("../l10n");
+const Actions = require("../actions/index");
+
+// Shortcuts
+const { button } = DOM;
+
+/**
+ * Button used to toggle sidebar
+ */
+function ToggleButton({
+  disabled,
+  onToggle,
+  visible,
+}) {
+  let className = ["devtools-button"];
+  if (!visible) {
+    className.push("pane-collapsed");
+  }
+  let titleMsg = visible ? L10N.getStr("collapseDetailsPane") :
+                           L10N.getStr("expandDetailsPane");
+
+  return button({
+    id: "details-pane-toggle",
+    className: className.join(" "),
+    title: titleMsg,
+    disabled: disabled,
+    tabIndex: "0",
+    onMouseDown: onToggle,
+  });
+}
+
+ToggleButton.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  visible: PropTypes.bool.isRequired,
+};
+
+module.exports = connect(
+  (state) => ({
+    disabled: state.sidebar.toggleButtonDisabled,
+    visible: state.sidebar.visible,
+  }),
+  (dispatch) => ({
+    onToggle: () => {
+      dispatch(Actions.toggleSidebar());
+
+      let requestsMenu = NetMonitorView.RequestsMenu;
+      let selectedIndex = requestsMenu.selectedIndex;
+
+      // Make sure there's a selection if the button is pressed, to avoid
+      // showing an empty network details pane.
+      if (selectedIndex == -1 && requestsMenu.itemCount) {
+        requestsMenu.selectedIndex = 0;
+      } else {
+        requestsMenu.selectedIndex = -1;
+      }
+    },
+  })
+)(ToggleButton);

devtools/client/netmonitor/constants.js

@@ -6,6 +6,9 @@
 const actionTypes = {
   TOGGLE_FILTER: "TOGGLE_FILTER",
   ENABLE_FILTER_ONLY: "ENABLE_FILTER_ONLY",
+  TOGGLE_SIDEBAR: "TOGGLE_SIDEBAR",
+  SHOW_SIDEBAR: "SHOW_SIDEBAR",
+  DISABLE_TOGGLE_BUTTON: "DISABLE_TOGGLE_BUTTON",
 };
 
 module.exports = actionTypes;

devtools/client/netmonitor/netmonitor-view.js

@@ -116,10 +116,6 @@ var NetMonitorView = {
 
     this._body = $("#body");
     this._detailsPane = $("#details-pane");
-    this._detailsPaneToggleButton = $("#details-pane-toggle");
-
-    this._collapsePaneString = L10N.getStr("collapseDetailsPane");
-    this._expandPaneString = L10N.getStr("expandDetailsPane");
 
     this._detailsPane.setAttribute("width", Prefs.networkDetailsWidth);
     this._detailsPane.setAttribute("height", Prefs.networkDetailsHeight);
@@ -143,7 +139,6 @@ var NetMonitorView = {
     Prefs.networkDetailsHeight = this._detailsPane.getAttribute("height");
 
     this._detailsPane = null;
-    this._detailsPaneToggleButton = null;
 
     for (let p of this._editorPromises.values()) {
       let editor = yield p;
@@ -172,19 +167,14 @@ var NetMonitorView = {
    *        The index of the intended selected tab in the details pane.
    */
   toggleDetailsPane: function (flags, tabIndex) {
-    let pane = this._detailsPane;
-    let button = this._detailsPaneToggleButton;
-
-    ViewHelpers.togglePane(flags, pane);
+    ViewHelpers.togglePane(flags, this._detailsPane);
 
     if (flags.visible) {
       this._body.classList.remove("pane-collapsed");
-      button.classList.remove("pane-collapsed");
-      button.setAttribute("tooltiptext", this._collapsePaneString);
+      gStore.dispatch(Actions.showSidebar(true));
     } else {
       this._body.classList.add("pane-collapsed");
-      button.classList.add("pane-collapsed");
-      button.setAttribute("tooltiptext", this._expandPaneString);
+      gStore.dispatch(Actions.showSidebar(false));
     }
 
     if (tabIndex !== undefined) {
@@ -289,9 +279,6 @@ var NetMonitorView = {
 
   _body: null,
   _detailsPane: null,
-  _detailsPaneToggleButton: null,
-  _collapsePaneString: "",
-  _expandPaneString: "",
   _editorPromises: new Map()
 };
 

devtools/client/netmonitor/netmonitor.xul

@@ -36,11 +36,8 @@
                  type="search"
                  required="true"
                  data-localization="placeholder=netmonitor.toolbar.filterFreetext.label"/>
-        <toolbarbutton id="details-pane-toggle"
-                       class="devtools-toolbarbutton"
-                       data-localization="tooltiptext=netmonitor.panesButton.tooltip"
-                       disabled="true"
-                       tabindex="0"/>
+        <html:div xmlns="http://www.w3.org/1999/xhtml"
+                  id="react-details-pane-toggle-hook"/>
       </hbox>
       <hbox id="network-table-and-sidebar"
             class="devtools-responsive-container"

devtools/client/netmonitor/reducers/index.js

@@ -5,7 +5,9 @@
 
 const { combineReducers } = require("devtools/client/shared/vendor/redux");
 const filters = require("./filters");
+const sidebar = require("./sidebar");
 
 module.exports = combineReducers({
   filters,
+  sidebar,
 });

devtools/client/netmonitor/reducers/moz.build

@@ -5,5 +5,6 @@
 
 DevToolsModules(
     'filters.js',
-    'index.js'
+    'index.js',
+    'sidebar.js',
 )

devtools/client/netmonitor/reducers/sidebar.js

@@ -0,0 +1,43 @@
+/* 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 I = require("devtools/client/shared/vendor/immutable");
+const {
+  DISABLE_TOGGLE_BUTTON,
+  SHOW_SIDEBAR,
+  TOGGLE_SIDEBAR,
+} = require("../constants");
+
+const SidebarState = I.Record({
+  toggleButtonDisabled: true,
+  visible: false,
+});
+
+function disableToggleButton(state, action) {
+  return state.set("toggleButtonDisabled", action.disabled);
+}
+
+function showSidebar(state, action) {
+  return state.set("visible", action.visible);
+}
+
+function toggleSidebar(state, action) {
+  return state.set("visible", !state.visible);
+}
+
+function sidebar(state = new SidebarState(), action) {
+  switch (action.type) {
+    case DISABLE_TOGGLE_BUTTON:
+      return disableToggleButton(state, action);
+    case SHOW_SIDEBAR:
+      return showSidebar(state, action);
+    case TOGGLE_SIDEBAR:
+      return toggleSidebar(state, action);
+    default:
+      return state;
+  }
+}
+
+module.exports = sidebar;

devtools/client/netmonitor/requests-menu-view.js

@@ -127,6 +127,8 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
   initialize: function (store) {
     dumpn("Initializing the RequestsMenuView");
 
+    this.store = store;
+
     let widgetParentEl = $("#requests-menu-contents");
     this.widget = new SideMenuWidget(widgetParentEl);
     this._splitter = $("#network-inspector-view-splitter");
@@ -765,7 +767,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     NetMonitorController.NetworkEventsHandler.clearMarkers();
     NetMonitorView.Sidebar.toggle(false);
 
-    $("#details-pane-toggle").disabled = true;
+    this.store.dispatch(Actions.disableToggleButton(true));
     $("#requests-menu-empty-notice").hidden = false;
 
     this.empty();
@@ -1078,7 +1080,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     this._updateQueue = [];
     this._addQueue = [];
 
-    $("#details-pane-toggle").disabled = !this.itemCount;
+    this.store.dispatch(Actions.disableToggleButton(!this.itemCount));
     $("#requests-menu-empty-notice").hidden = !!this.itemCount;
 
     // Make sure all the requests are sorted and filtered.

devtools/client/netmonitor/toolbar-view.js

@@ -5,6 +5,7 @@ const { createFactory, DOM } = require("devtools/client/shared/vendor/react");
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
 const FilterButtons = createFactory(require("./components/filter-buttons"));
+const ToggleButton = createFactory(require("./components/toggle-button"));
 const { L10N } = require("./l10n");
 
 // Shortcuts
@@ -15,8 +16,6 @@ const { button } = DOM;
  */
 function ToolbarView() {
   dumpn("ToolbarView was instantiated");
-
-  this._onTogglePanesPressed = this._onTogglePanesPressed.bind(this);
 }
 
 ToolbarView.prototype = {
@@ -28,6 +27,7 @@ ToolbarView.prototype = {
 
     this._clearContainerNode = $("#react-clear-button-hook");
     this._filterContainerNode = $("#react-filter-buttons-hook");
+    this._toggleContainerNode = $("#react-details-pane-toggle-hook");
 
     // clear button
     ReactDOM.render(button({
@@ -45,9 +45,10 @@ ToolbarView.prototype = {
       FilterButtons()
     ), this._filterContainerNode);
 
-    this._detailsPaneToggleButton = $("#details-pane-toggle");
-    this._detailsPaneToggleButton.addEventListener("mousedown",
-      this._onTogglePanesPressed, false);
+    ReactDOM.render(Provider(
+      { store },
+      ToggleButton()
+    ), this._toggleContainerNode);
   },
 
   /**
@@ -58,28 +59,8 @@ ToolbarView.prototype = {
 
     ReactDOM.unmountComponentAtNode(this._clearContainerNode);
     ReactDOM.unmountComponentAtNode(this._filterContainerNode);
-
-    this._detailsPaneToggleButton.removeEventListener("mousedown",
-      this._onTogglePanesPressed, false);
-  },
-
-  /**
-   * Listener handling the toggle button click event.
-   */
-  _onTogglePanesPressed: function () {
-    let requestsMenu = NetMonitorView.RequestsMenu;
-    let selectedIndex = requestsMenu.selectedIndex;
-
-    // Make sure there's a selection if the button is pressed, to avoid
-    // showing an empty network details pane.
-    if (selectedIndex == -1 && requestsMenu.itemCount) {
-      requestsMenu.selectedIndex = 0;
-    } else {
-      requestsMenu.selectedIndex = -1;
-    }
-  },
-
-  _detailsPaneToggleButton: null
+    ReactDOM.unmountComponentAtNode(this._toggleContainerNode);
+  }
 };
 
 exports.ToolbarView = ToolbarView;

devtools/client/themes/netmonitor.css

@@ -7,7 +7,8 @@
   overflow: hidden;
 }
 
-#react-clear-button-hook {
+#react-clear-button-hook,
+#react-details-pane-toggle-hook {
   display: flex;
 }
 
@@ -568,14 +569,14 @@
 
 /* Network request details */
 
-#details-pane-toggle:-moz-locale-dir(ltr),
-#details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl) {
-  list-style-image: var(--theme-pane-collapse-image);
+#details-pane-toggle:-moz-locale-dir(ltr)::before,
+#details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
+  background-image: var(--theme-pane-collapse-image);
 }
 
-#details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr),
-#details-pane-toggle:-moz-locale-dir(rtl) {
-  list-style-image: var(--theme-pane-expand-image);
+#details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
+#details-pane-toggle:-moz-locale-dir(rtl)::before {
+  background-image: var(--theme-pane-expand-image);
 }
 
 /* Network request details tabpanels */