Bug 1457067 - Part 1: Implement so as to toggle the options panel if click 'Settings' on the meatball menu. r?jdescottes
MozReview-Commit-ID: 3ST6EtMuA2F
--- a/devtools/client/framework/components/ToolboxToolbar.js
+++ b/devtools/client/framework/components/ToolboxToolbar.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
@@ -159,16 +159,17 @@ function Toolbox(target, selectedTool, h
this._onPickerStopped = this._onPickerStopped.bind(this);
this._onInspectObject = this._onInspectObject.bind(this);
this._onNewSelectedNodeFront = this._onNewSelectedNodeFront.bind(this);
this._onToolSelected = this._onToolSelected.bind(this);
this.updateToolboxButtonsVisibility = this.updateToolboxButtonsVisibility.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;
@@ -835,27 +836,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") {
@@ -1139,16 +1130,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,
});
@@ -2043,16 +2035,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.