From e1ca7a480de4481e51224bfac9c4b067b438c1e7 Mon Sep 17 00:00:00 2001 From: Brian Birtles Date: Tue, 24 Apr 2018 13:22:02 +0900 Subject: [PATCH] Bug 1455443 - Convert dock menu options to a checkbox list; r=jryans This also fixes the grouping so that the checkboxes appear before the separator as per the mockup here: https://mozilla.invisionapp.com/share/M5G8OO1ZVE4#/screens MozReview-Commit-ID: FfVNzPHEk43 --HG-- extra : rebase_source : 50f1060ab65c307a5474b40ebfb7bfaf8649070d --- .../components/toolbox-controller.js | 6 +++ .../framework/components/toolbox-toolbar.js | 40 +++++++++++++------ devtools/client/framework/toolbox.js | 6 ++- .../client/locales/en-US/toolbox.properties | 2 +- 4 files changed, 38 insertions(+), 16 deletions(-) diff --git a/devtools/client/framework/components/toolbox-controller.js b/devtools/client/framework/components/toolbox-controller.js index 4a051fea53d6..67d0c06647cf 100644 --- a/devtools/client/framework/components/toolbox-controller.js +++ b/devtools/client/framework/components/toolbox-controller.js @@ -26,6 +26,7 @@ class ToolboxController extends Component { highlightedTools: new Set(), panelDefinitions: [], hostTypes: [], + currentHostType: undefined, areDockOptionsEnabled: true, canCloseToolbox: true, isSplitConsoleActive: false, @@ -43,6 +44,7 @@ class ToolboxController extends Component { this.highlightTool = this.highlightTool.bind(this); this.unhighlightTool = this.unhighlightTool.bind(this); this.setHostTypes = this.setHostTypes.bind(this); + this.setCurrentHostType = this.setCurrentHostType.bind(this); this.setDockOptionsEnabled = this.setDockOptionsEnabled.bind(this); this.setCanCloseToolbox = this.setCanCloseToolbox.bind(this); this.setIsSplitConsoleActive = this.setIsSplitConsoleActive.bind(this); @@ -137,6 +139,10 @@ class ToolboxController extends Component { this.setState({ hostTypes }); } + setCurrentHostType(currentHostType) { + this.setState({ currentHostType }); + } + setCanCloseToolbox(canCloseToolbox) { this.setState({ canCloseToolbox }, this.updateButtonIds); } diff --git a/devtools/client/framework/components/toolbox-toolbar.js b/devtools/client/framework/components/toolbox-toolbar.js index b4c9b7bd1401..4563c98e26fd 100644 --- a/devtools/client/framework/components/toolbox-toolbar.js +++ b/devtools/client/framework/components/toolbox-toolbar.js @@ -39,6 +39,9 @@ class ToolboxToolbar extends Component { position: PropTypes.string.isRequired, switchHost: PropTypes.func.isRequired, })), + // Current docking type. Typically one of the position values in + // |hostTypes| but this is not always the case (e.g. when it is "custom"). + currentHostType: PropTypes.string, // Should the docking options be enabled? They are disabled in some // contexts such as WebIDE. areDockButtonsEnabled: PropTypes.bool, @@ -212,6 +215,8 @@ function renderSeparator() { * Position name. * @param {Function} hostTypes[].switchHost * Function to switch the host. + * @param {string} currentHostType + * The current docking configuration. * @param {boolean} areDockOptionsEnabled * They are not enabled in certain situations like when they are in the * WebIDE. @@ -298,12 +303,14 @@ function renderToolboxControls(props) { * The id of the currently selected tool. * @param {Object[]} props.hostTypes * Array of host type objects. + * This array will be empty if we shouldn't shouldn't show any dock + * options. * @param {string} props.hostTypes[].position * Position name. * @param {Function} props.hostTypes[].switchHost * Function to switch the host. - * This array will be empty if we shouldn't shouldn't show any dock - * options. + * @param {string} props.currentHostType + * The current docking configuration. * @param {boolean} isSplitConsoleActive * Is the split console currently visible? * @param {boolean|undefined} disableAutohide @@ -327,6 +334,7 @@ function showMeatballMenu( { currentToolId, hostTypes, + currentHostType, isSplitConsoleActive, disableAutohide, selectTool, @@ -340,13 +348,23 @@ function showMeatballMenu( // Dock options for (const hostType of hostTypes) { - menu.append(new MenuItem({ - id: `toolbox-meatball-menu-dock-${hostType.position}`, - label: L10N.getStr( - `toolbox.meatballMenu.dock.${hostType.position}.label` - ), - click: () => hostType.switchHost(), - })); + const l10nkey = + hostType.position === "window" + ? "separateWindow" + : hostType.position; + menu.append( + new MenuItem({ + id: `toolbox-meatball-menu-dock-${hostType.position}`, + label: L10N.getStr(`toolbox.meatballMenu.dock.${l10nkey}.label`), + click: () => hostType.switchHost(), + type: "checkbox", + checked: hostType.position === currentHostType, + }) + ); + } + + if (menu.items.length) { + menu.append(new MenuItem({ type: "separator" })); } // Split console @@ -377,10 +395,6 @@ function showMeatballMenu( })); } - if (menu.items.length) { - menu.append(new MenuItem({ type: "separator" })); - } - // Settings menu.append(new MenuItem({ id: "toolbox-meatball-menu-settings", diff --git a/devtools/client/framework/toolbox.js b/devtools/client/framework/toolbox.js index 4ff515363aa3..5c1e03e553b5 100644 --- a/devtools/client/framework/toolbox.js +++ b/devtools/client/framework/toolbox.js @@ -1094,8 +1094,7 @@ Toolbox.prototype = { let hostTypes = []; for (let type in Toolbox.HostType) { let position = Toolbox.HostType[type]; - if (position == this.hostType || - position == Toolbox.HostType.CUSTOM || + if (position == Toolbox.HostType.CUSTOM || (!sideEnabled && position == Toolbox.HostType.SIDE)) { continue; } @@ -1106,6 +1105,7 @@ Toolbox.prototype = { }); } + this.component.setCurrentHostType(this.hostType); this.component.setHostTypes(hostTypes); }, @@ -2445,6 +2445,8 @@ Toolbox.prototype = { this.emit("host-changed"); this._telemetry.log(HOST_HISTOGRAM, this._getTelemetryHostId()); + + this.component.setCurrentHostType(hostType); }, /** diff --git a/devtools/client/locales/en-US/toolbox.properties b/devtools/client/locales/en-US/toolbox.properties index 48c25ddf4ec1..0a292cad44e0 100644 --- a/devtools/client/locales/en-US/toolbox.properties +++ b/devtools/client/locales/en-US/toolbox.properties @@ -151,7 +151,7 @@ toolbox.meatballMenu.button.tooltip=Customize Developer Tools and get help # docking (or undocking) the developer tools toolbox. toolbox.meatballMenu.dock.bottom.label=Dock to bottom toolbox.meatballMenu.dock.side.label=Dock to side -toolbox.meatballMenu.dock.window.label=Undock +toolbox.meatballMenu.dock.separateWindow.label=Separate window # LOCALIZATION NOTE (toolbox.meatballMenu.{splitconsole,hideconsole}.label): # These are the labels in the "..." menu in the toolbox for toggling the split