Bug 1457067 - Part 1: Implement so as to toggle the options panel if click 'Settings' on the meatball menu. r=jdescottes, a=RyanVM
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 11 May 2018 07:35:22 +0900
changeset 473327 b3f260301d0e1e4441bb1e6ae9bbb93bc6f487db
parent 473326 7c3cfe766b3771262df0256b2bbcd240fa09fe3a
child 473328 d7cc3e2fa65b9a59ed4280aa178fa7cf08f004e7
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, RyanVM
bugs1457067
milestone61.0
Bug 1457067 - Part 1: Implement so as to toggle the options panel if click 'Settings' on the meatball menu. r=jdescottes, a=RyanVM MozReview-Commit-ID: 3ST6EtMuA2F
devtools/client/framework/components/toolbox-toolbar.js
devtools/client/framework/toolbox.js
--- a/devtools/client/framework/components/toolbox-toolbar.js
+++ b/devtools/client/framework/components/toolbox-toolbar.js
@@ -51,16 +51,18 @@ class ToolboxToolbar extends Component {
       // when clicking outside them?
       //
       // This is a tri-state value that may be true/false or undefined where
       // undefined means that the option is not relevant in this context
       // (i.e. we're not in a browser toolbox).
       disableAutohide: PropTypes.bool,
       // Function to select a tool based on its id.
       selectTool: PropTypes.func,
+      // Function to turn the options panel on / off.
+      toggleOptions: PropTypes.func.isRequired,
       // Function to turn the split console on / off.
       toggleSplitConsole: PropTypes.func,
       // Function to turn the disable pop-up autohide behavior on / off.
       toggleNoAutohide: PropTypes.func,
       // Function to completely close the toolbox.
       closeToolbox: PropTypes.func,
       // Keep a record of what button is focused.
       focusButton: PropTypes.func,
@@ -229,16 +231,18 @@ function renderSeparator() {
  *         Is the split console currently visible?
  *        toolbox is undocked, for example.
  * @param {boolean|undefined} disableAutohide
  *        Are we disabling the behavior where pop-ups are automatically
  *        closed when clicking outside them?
  *        (Only defined for the browser toolbox.)
  * @param {Function} selectTool
  *        Function to select a tool based on its id.
+ * @param {Function} toggleOptions
+ *        Function to turn the options panel on / off.
  * @param {Function} toggleSplitConsole
  *        Function to turn the split console on / off.
  * @param {Function} toggleNoAutohide
  *        Function to turn the disable pop-up autohide behavior on / off.
  * @param {Function} closeToolbox
  *        Completely close the toolbox.
  * @param {Function} focusButton
  *        Keep a record of the currently focused button.
@@ -314,18 +318,20 @@ function renderToolboxControls(props) {
  * @param {string} props.currentHostType
  *        The current docking configuration.
  * @param {boolean} isSplitConsoleActive
  *        Is the split console currently visible?
  * @param {boolean|undefined} disableAutohide
  *        Are we disabling the behavior where pop-ups are automatically
  *        closed when clicking outside them.
  *        (Only defined for the browser toolbox.)
- * @param {Function} props.selectTool
+ * @param {Function} selectTool
  *        Function to select a tool based on its id.
+ * @param {Function} toggleOptions
+ *        Function to turn the options panel on / off.
  * @param {Function} toggleSplitConsole
  *        Function to turn the split console on / off.
  * @param {Function} toggleNoAutohide
  *        Function to turn the disable pop-up autohide behavior on / off.
  * @param {Object} props.L10N
  *        Localization interface.
  * @param {Object} props.toolbox
  *        The devtools toolbox. Used by the Menu component to determine which
@@ -334,17 +340,17 @@ function renderToolboxControls(props) {
 function showMeatballMenu(
   menuButton,
   {
     currentToolId,
     hostTypes,
     currentHostType,
     isSplitConsoleActive,
     disableAutohide,
-    selectTool,
+    toggleOptions,
     toggleSplitConsole,
     toggleNoAutohide,
     L10N,
     toolbox,
   }
 ) {
   const menu = new Menu({ id: "toolbox-meatball-menu" });
 
@@ -397,17 +403,17 @@ function showMeatballMenu(
     }));
   }
 
   // Settings
   menu.append(new MenuItem({
     id: "toolbox-meatball-menu-settings",
     label: L10N.getStr("toolbox.meatballMenu.settings.label"),
     accelerator: L10N.getStr("toolbox.help.key"),
-    click: () => selectTool("options"),
+    click: () => toggleOptions(),
   }));
 
   if (menu.items.length) {
     menu.append(new MenuItem({ type: "separator" }));
   }
 
   // Getting started
   menu.append(new MenuItem({
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -158,16 +158,17 @@ function Toolbox(target, selectedTool, h
   this._onPickerStarted = this._onPickerStarted.bind(this);
   this._onPickerStopped = this._onPickerStopped.bind(this);
   this._onInspectObject = this._onInspectObject.bind(this);
   this._onNewSelectedNodeFront = this._onNewSelectedNodeFront.bind(this);
   this.updatePickerButton = this.updatePickerButton.bind(this);
   this.selectTool = this.selectTool.bind(this);
   this._pingTelemetrySelectTool = this._pingTelemetrySelectTool.bind(this);
   this.toggleSplitConsole = this.toggleSplitConsole.bind(this);
+  this.toggleOptions = this.toggleOptions.bind(this);
 
   this._target.on("close", this.destroy);
 
   if (!selectedTool) {
     selectedTool = Services.prefs.getCharPref(this._prefs.LAST_TOOL);
   }
   this._defaultToolId = selectedTool;
 
@@ -836,27 +837,17 @@ Toolbox.prototype = {
     button.isVisible = this._commandIsVisible(button);
 
     EventEmitter.decorate(button);
 
     return button;
   },
 
   _buildOptions: function() {
-    let selectOptions = event => {
-      // Flip back to the last used panel if we are already
-      // on the options panel.
-      if (this.currentToolId === "options" &&
-          gDevTools.getToolDefinition(this.lastUsedToolId)) {
-        this.selectTool(this.lastUsedToolId, "toggle_settings_off");
-      } else {
-        this.selectTool("options", "toggle_settings_on");
-      }
-    };
-    this.shortcuts.on(L10N.getStr("toolbox.help.key"), selectOptions);
+    this.shortcuts.on(L10N.getStr("toolbox.help.key"), this.toggleOptions);
   },
 
   _splitConsoleOnKeypress: function(e) {
     if (e.keyCode === KeyCodes.DOM_VK_ESCAPE) {
       this.toggleSplitConsole();
       // If the debugger is paused, don't let the ESC key stop any pending
       // navigation.
       if (this._threadClient.state == "paused") {
@@ -1140,16 +1131,17 @@ Toolbox.prototype = {
   },
 
   _mountReactComponent: function() {
     // Ensure the toolbar doesn't try to render until the tool is ready.
     const element = this.React.createElement(this.ToolboxController, {
       L10N,
       currentToolId: this.currentToolId,
       selectTool: this.selectTool,
+      toggleOptions: this.toggleOptions,
       toggleSplitConsole: this.toggleSplitConsole,
       toggleNoAutohide: this.toggleNoAutohide,
       closeToolbox: this.destroy,
       focusButton: this._onToolbarFocus,
       toolbox: this,
       onTabsOrderUpdated: this._onTabsOrderUpdated,
     });
 
@@ -2031,16 +2023,31 @@ Toolbox.prototype = {
              this.closeSplitConsole() :
              this.openSplitConsole();
     }
 
     return promise.resolve();
   },
 
   /**
+   * Toggles the options panel.
+   * If the option panel is already selected then select the last selected panel.
+   */
+  toggleOptions: function() {
+    // Flip back to the last used panel if we are already
+    // on the options panel.
+    if (this.currentToolId === "options" &&
+        gDevTools.getToolDefinition(this.lastUsedToolId)) {
+      this.selectTool(this.lastUsedToolId, "toggle_settings_off");
+    } else {
+      this.selectTool("options", "toggle_settings_on");
+    }
+  },
+
+  /**
    * Tells the target tab to reload.
    */
   reloadTarget: function(force) {
     this.target.activeTab.reload({ force: force });
   },
 
   /**
    * Loads the tool next to the currently selected tool.