зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1444301 - Move dock functions to a new meatball menu; r=jryans
MozReview-Commit-ID: IfFsiZnmw74 --HG-- extra : rebase_source : 1072f4402fd7d329eebfd3a68af5bac2ed7059cb
This commit is contained in:
Brian Birtles
Родитель
fa87e6a363
Коммит
972c14594f
|
|
@ -26,7 +26,7 @@ class ToolboxController extends Component {
|
|||
highlightedTools: new Set(),
|
||||
panelDefinitions: [],
|
||||
hostTypes: [],
|
||||
areDockButtonsEnabled: true,
|
||||
areDockOptionsEnabled: true,
|
||||
canCloseToolbox: true,
|
||||
canRender: false,
|
||||
buttonIds: [],
|
||||
|
|
@ -42,7 +42,7 @@ class ToolboxController extends Component {
|
|||
this.unhighlightTool = this.unhighlightTool.bind(this);
|
||||
this.setOptionsPanel = this.setOptionsPanel.bind(this);
|
||||
this.setHostTypes = this.setHostTypes.bind(this);
|
||||
this.setDockButtonsEnabled = this.setDockButtonsEnabled.bind(this);
|
||||
this.setDockOptionsEnabled = this.setDockOptionsEnabled.bind(this);
|
||||
this.setCanCloseToolbox = this.setCanCloseToolbox.bind(this);
|
||||
this.setCanRender = this.setCanRender.bind(this);
|
||||
this.setPanelDefinitions = this.setPanelDefinitions.bind(this);
|
||||
|
|
@ -69,7 +69,6 @@ class ToolboxController extends Component {
|
|||
toolboxButtons,
|
||||
panelDefinitions,
|
||||
optionsPanel,
|
||||
hostTypes,
|
||||
canCloseToolbox,
|
||||
} = this.state;
|
||||
|
||||
|
|
@ -80,7 +79,6 @@ class ToolboxController extends Component {
|
|||
...panelDefinitions.map(({id}) => id),
|
||||
...toolboxButtons.filter(btn => !btn.isInStartContainer).map(({id}) => id),
|
||||
optionsPanel ? optionsPanel.id : null,
|
||||
...hostTypes.map(({position}) => "toolbox-dock-" + position),
|
||||
canCloseToolbox ? "toolbox-close" : null
|
||||
].filter(id => id)
|
||||
});
|
||||
|
|
@ -134,12 +132,12 @@ class ToolboxController extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
setDockButtonsEnabled(areDockButtonsEnabled) {
|
||||
this.setState({ areDockButtonsEnabled }, this.updateButtonIds);
|
||||
setDockOptionsEnabled(areDockOptionsEnabled) {
|
||||
this.setState({ areDockOptionsEnabled });
|
||||
}
|
||||
|
||||
setHostTypes(hostTypes) {
|
||||
this.setState({ hostTypes }, this.updateButtonIds);
|
||||
this.setState({ hostTypes });
|
||||
}
|
||||
|
||||
setCanCloseToolbox(canCloseToolbox) {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
|||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
const {div, button} = dom;
|
||||
|
||||
const Menu = require("devtools/client/framework/menu");
|
||||
const MenuItem = require("devtools/client/framework/menu-item");
|
||||
const ToolboxTab = createFactory(require("devtools/client/framework/components/toolbox-tab"));
|
||||
const ToolboxTabs = createFactory(require("devtools/client/framework/components/toolbox-tabs"));
|
||||
|
||||
|
|
@ -75,7 +77,7 @@ class ToolboxToolbar extends Component {
|
|||
renderToolboxButtonsEnd(this.props),
|
||||
renderOptions(this.props),
|
||||
renderSeparator(),
|
||||
renderDockButtons(this.props)
|
||||
renderToolboxControls(this.props)
|
||||
)
|
||||
)
|
||||
: div(containerProps);
|
||||
|
|
@ -193,8 +195,7 @@ function renderSeparator() {
|
|||
}
|
||||
|
||||
/**
|
||||
* Render the dock buttons, and handle all the cases for what type of host the toolbox
|
||||
* is attached to. The following props are expected.
|
||||
* Render the toolbox control buttons. The following props are expected:
|
||||
*
|
||||
* @param {string} focusedButton
|
||||
* The id of the focused button.
|
||||
|
|
@ -204,7 +205,7 @@ function renderSeparator() {
|
|||
* Position name.
|
||||
* @param {Function} hostTypes[].switchHost
|
||||
* Function to switch the host.
|
||||
* @param {boolean} areDockButtonsEnabled
|
||||
* @param {boolean} areDockOptionsEnabled
|
||||
* They are not enabled in certain situations like when they are in the
|
||||
* WebIDE.
|
||||
* @param {boolean} canCloseToolbox
|
||||
|
|
@ -217,35 +218,32 @@ function renderSeparator() {
|
|||
* @param {Object} L10N
|
||||
* Localization interface.
|
||||
*/
|
||||
function renderDockButtons(props) {
|
||||
function renderToolboxControls(props) {
|
||||
const {
|
||||
focusedButton,
|
||||
closeToolbox,
|
||||
hostTypes,
|
||||
focusButton,
|
||||
L10N,
|
||||
areDockButtonsEnabled,
|
||||
areDockOptionsEnabled,
|
||||
canCloseToolbox,
|
||||
} = props;
|
||||
|
||||
let buttons = [];
|
||||
const meatballMenuButtonId = "toolbox-meatball-menu-button";
|
||||
|
||||
if (areDockButtonsEnabled) {
|
||||
hostTypes.forEach(hostType => {
|
||||
const id = "toolbox-dock-" + hostType.position;
|
||||
buttons.push(button({
|
||||
id,
|
||||
onFocus: () => focusButton(id),
|
||||
className: "toolbox-dock-button devtools-button",
|
||||
title: L10N.getStr(`toolboxDockButtons.${hostType.position}.tooltip`),
|
||||
onClick: e => {
|
||||
hostType.switchHost();
|
||||
focusButton(id);
|
||||
},
|
||||
tabIndex: focusedButton === id ? "0" : "-1",
|
||||
}));
|
||||
});
|
||||
}
|
||||
const meatballMenuButton = button({
|
||||
id: meatballMenuButtonId,
|
||||
onFocus: () => focusButton(meatballMenuButtonId),
|
||||
className: "devtools-button",
|
||||
title: L10N.getStr("toolbox.meatballMenu.button.tooltip"),
|
||||
onClick: evt => {
|
||||
showMeatballMenu(evt.target, {
|
||||
...props,
|
||||
hostTypes: areDockOptionsEnabled ? hostTypes : [],
|
||||
});
|
||||
},
|
||||
tabIndex: focusedButton === meatballMenuButtonId ? "0" : "-1",
|
||||
});
|
||||
|
||||
const closeButtonId = "toolbox-close";
|
||||
|
||||
|
|
@ -263,7 +261,53 @@ function renderDockButtons(props) {
|
|||
: null;
|
||||
|
||||
return div({id: "toolbox-controls"},
|
||||
div({id: "toolbox-dock-buttons"}, ...buttons),
|
||||
meatballMenuButton,
|
||||
closeButton
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display the "..." menu (affectionately known as the meatball menu).
|
||||
*
|
||||
* @param {Object} menuButton
|
||||
* The <button> element from which the menu should pop out. The geometry
|
||||
* of this element is used to position the menu.
|
||||
* @param {Object} props
|
||||
* Properties as described below.
|
||||
* @param {Object[]} props.hostTypes
|
||||
* Array of host type objects.
|
||||
* @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 {Object} props.L10N
|
||||
* Localization interface.
|
||||
* @param {Object} props.toolbox
|
||||
* The devtools toolbox. Used by the Menu component to determine which
|
||||
* document to use.
|
||||
*/
|
||||
function showMeatballMenu(menuButton, {hostTypes, L10N, toolbox}) {
|
||||
const menu = new Menu({ id: "toolbox-meatball-menu" });
|
||||
|
||||
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(),
|
||||
}));
|
||||
}
|
||||
|
||||
// (Yes, it's true we might end up with an empty menu here. Don't worry,
|
||||
// by the end of this patch series that won't be the case.)
|
||||
|
||||
const rect = menuButton.getBoundingClientRect();
|
||||
const screenX = menuButton.ownerDocument.defaultView.mozInnerScreenX;
|
||||
const screenY = menuButton.ownerDocument.defaultView.mozInnerScreenY;
|
||||
|
||||
// Display the popup below the button.
|
||||
menu.popup(rect.left + screenX, rect.bottom + screenY, toolbox);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -491,7 +491,7 @@ Toolbox.prototype = {
|
|||
this._componentMount = this.doc.getElementById("toolbox-toolbar-mount");
|
||||
|
||||
this._mountReactComponent();
|
||||
this._buildDockButtons();
|
||||
this._buildDockOptions();
|
||||
this._buildOptions();
|
||||
this._buildTabs();
|
||||
this._applyCacheSettings();
|
||||
|
|
@ -1049,16 +1049,16 @@ Toolbox.prototype = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Build the buttons for changing hosts. Called every time
|
||||
* Build the options for changing hosts. Called every time
|
||||
* the host changes.
|
||||
*/
|
||||
_buildDockButtons: function() {
|
||||
_buildDockOptions: function() {
|
||||
if (!this._target.isLocalTab) {
|
||||
this.component.setDockButtonsEnabled(false);
|
||||
this.component.setDockOptionsEnabled(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.component.setDockButtonsEnabled(true);
|
||||
this.component.setDockOptionsEnabled(true);
|
||||
this.component.setCanCloseToolbox(this.hostType !== Toolbox.HostType.WINDOW);
|
||||
|
||||
let sideEnabled = Services.prefs.getBoolPref(this._prefs.SIDE_ENABLED);
|
||||
|
|
@ -2355,7 +2355,7 @@ Toolbox.prototype = {
|
|||
_onSwitchedHost: function({ hostType }) {
|
||||
this._hostType = hostType;
|
||||
|
||||
this._buildDockButtons();
|
||||
this._buildDockOptions();
|
||||
this._addKeysToWindow();
|
||||
|
||||
// We blurred the tools at start of switchHost, but also when clicking on
|
||||
|
|
|
|||
|
|
@ -185,6 +185,7 @@ devtools.jar:
|
|||
skin/images/dropmarker.svg (themes/images/dropmarker.svg)
|
||||
skin/boxmodel.css (themes/boxmodel.css)
|
||||
skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
|
||||
skin/images/more.svg (themes/images/more.svg)
|
||||
skin/images/pause.svg (themes/images/pause.svg)
|
||||
skin/images/play.svg (themes/images/play.svg)
|
||||
skin/images/rewind.svg (themes/images/rewind.svg)
|
||||
|
|
@ -197,9 +198,6 @@ devtools.jar:
|
|||
skin/images/tracer-icon@2x.png (themes/images/tracer-icon@2x.png)
|
||||
skin/images/toggle-tools.png (themes/images/toggle-tools.png)
|
||||
skin/images/toggle-tools@2x.png (themes/images/toggle-tools@2x.png)
|
||||
skin/images/dock-bottom.svg (themes/images/dock-bottom.svg)
|
||||
skin/images/dock-side.svg (themes/images/dock-side.svg)
|
||||
skin/images/dock-undock.svg (themes/images/dock-undock.svg)
|
||||
skin/floating-scrollbars-dark-theme.css (themes/floating-scrollbars-dark-theme.css)
|
||||
skin/floating-scrollbars-responsive-design.css (themes/floating-scrollbars-responsive-design.css)
|
||||
skin/inspector.css (themes/inspector.css)
|
||||
|
|
@ -309,4 +307,4 @@ devtools.jar:
|
|||
|
||||
# Devtools-reps
|
||||
skin/images/devtools-reps/jump-definition.svg (themes/images/devtools-reps/jump-definition.svg)
|
||||
skin/images/devtools-reps/open-inspector.svg (themes/images/devtools-reps/open-inspector.svg)
|
||||
skin/images/devtools-reps/open-inspector.svg (themes/images/devtools-reps/open-inspector.svg)
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
# 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/.
|
||||
|
||||
toolboxDockButtons.bottom.tooltip=Dock to bottom of browser window
|
||||
toolboxDockButtons.side.tooltip=Dock to side of browser window
|
||||
toolboxDockButtons.window.tooltip=Show in separate window
|
||||
|
||||
# LOCALIZATION NOTE (toolboxToggleButton.errors): Semi-colon list of plural
|
||||
# forms.
|
||||
# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
|
||||
|
|
@ -152,6 +148,17 @@ toolbox.showFrames.key=Alt+Down
|
|||
# addon developers and Firefox contributors.
|
||||
toolbox.noautohide.tooltip=Disable popup auto hide
|
||||
|
||||
# LOCALIZATION NOTE (toolbox.meatballMenu.button.tooltip): This is the tooltip
|
||||
# for the "..." button on the developer tools toolbox.
|
||||
toolbox.meatballMenu.button.tooltip=Customize Developer Tools and get help
|
||||
|
||||
# LOCALIZATION NOTE (toolbox.meatballMenu.dock.*.label): These labels are shown
|
||||
# in the "..." menu in the toolbox and represent the different arrangements for
|
||||
# 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
|
||||
|
||||
# LOCALIZATION NOTE (toolbox.closebutton.tooltip): This is the tooltip for
|
||||
# the close button the developer tools toolbox.
|
||||
toolbox.closebutton.tooltip=Close Developer Tools
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<!-- 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/. -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
|
||||
<path d="M10.004 3H.996C.999 3 1 3 1 3.002v9.996c0-.001.003.002-.004.002h9.008c-.003 0-.004 0-.004-.002V3.002c0 .001-.003-.002.004-.002zm0-1c.55 0 .996.456.996 1.002v9.996A.998.998 0 0 1 10.004 14H.996C.446 14 0 13.544 0 12.998V3.002A.998.998 0 0 1 .996 2h9.008zm-.41 8H.996v1h9.01v-1h-.41z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 627 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
|
||||
<path d="M1 2.996v9.008c0-.003 0-.004.002-.004h9.996c-.001 0 .002-.003.002.004V2.996c0 .003 0 .004-.002.004H1.002C1.003 3 1 3.003 1 2.996zm-1 0C0 2.446.456 2 1.002 2h9.996A.998.998 0 0 1 12 2.996v9.008c0 .55-.456.996-1.002.996H1.002A.998.998 0 0 1 0 12.004V2.996zm8 .413V12h1V3H8v.41z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 409 B |
|
|
@ -1,8 +0,0 @@
|
|||
<!-- 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/. -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
|
||||
<path d="M13.003 1.941H6.997c.008 0 .003.004.003.008v6.102c0 .004.004.008-.003.008h6.006c-.008 0-.003-.004-.003-.008V1.949c0-.004-.004-.008.003-.008zm0-.941c.55 0 .997.43.997.95v6.1c0 .525-.453.95-.997.95H6.997C6.447 9 6 8.57 6 8.05v-6.1c0-.525.453-.95.997-.95h6.006z"/>
|
||||
<path d="M9 9.91v-.278h1v1.183c0 .516-.453.935-.997.935H2.997c-.55 0-.997-.43-.997-.95V4.7c0-.525.444-.95 1.006-.95h2.288v.941H3.006C3 4.691 3 4.691 3 4.7v6.102c0 .004.004.008-.003.008h6.006c-.004 0-.003-.001-.003.006v-.248-.657-.278h1v1.183c0 .516-.453.935-.997.935H2.997c-.55 0-.997-.43-.997-.95V4.7c0-.525.444-.95 1.006-.95h2.288v.941H3.006C3 4.691 3 4.691 3 4.7v6.102c0 .004.004.008-.003.008h6.006c-.004 0-.003-.001-.003.006v-.248-.657z"/>
|
||||
<path d="M12.52 5H6.976v1h6.046V5zM6.5 7H2.975v1H7V7z"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 1.1 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<!-- 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/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="context-fill" d="M2 6a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2z"></path>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 443 B |
|
|
@ -5,9 +5,7 @@
|
|||
|
||||
:root {
|
||||
--close-button-image: url(chrome://devtools/skin/images/close.svg);
|
||||
--dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
|
||||
--dock-side-image: url(chrome://devtools/skin/images/dock-side.svg);
|
||||
--dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
|
||||
--more-button-image: url(chrome://devtools/skin/images/more.svg);
|
||||
|
||||
--command-paintflashing-image: url(images/command-paintflashing.svg);
|
||||
--command-screenshot-image: url(images/command-screenshot.svg);
|
||||
|
|
@ -62,8 +60,7 @@
|
|||
#toolbox-buttons-start,
|
||||
#toolbox-buttons-end,
|
||||
#toolbox-option-container,
|
||||
#toolbox-controls,
|
||||
#toolbox-dock-buttons {
|
||||
#toolbox-controls {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
|
@ -181,23 +178,14 @@
|
|||
background-image: var(--close-button-image);
|
||||
}
|
||||
|
||||
#toolbox-dock-bottom::before {
|
||||
background-image: var(--dock-bottom-image);
|
||||
}
|
||||
|
||||
#toolbox-dock-side::before {
|
||||
background-image: var(--dock-side-image);
|
||||
}
|
||||
|
||||
#toolbox-dock-window::before {
|
||||
background-image: var(--dock-undock-image);
|
||||
#toolbox-meatball-menu-button::before {
|
||||
background-image: var(--more-button-image);
|
||||
}
|
||||
|
||||
/* Command buttons */
|
||||
|
||||
.command-button,
|
||||
#toolbox-controls > button,
|
||||
#toolbox-dock-buttons > button {
|
||||
#toolbox-controls > button {
|
||||
/* !important is needed to override .devtools-button rules in common.css */
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ add_task(async function() {
|
|||
|
||||
info("Unhighlight the node by moving away from the node");
|
||||
let onNodeUnhighlight = toolbox.once("node-unhighlight");
|
||||
let btn = toolbox.doc.querySelector(".toolbox-dock-button");
|
||||
let btn = toolbox.doc.getElementById("toolbox-meatball-menu-button");
|
||||
EventUtils.synthesizeMouseAtCenter(btn, {type: "mousemove"}, view);
|
||||
|
||||
await onNodeUnhighlight;
|
||||
|
|
|
|||
|
|
@ -1687,7 +1687,8 @@ function checkDomElementHighlightingForInputs(hud, inputs) {
|
|||
|
||||
info("Unhighlight the node by moving away from the markup view");
|
||||
let onNodeUnhighlight = toolbox.once("node-unhighlight");
|
||||
let btn = inspector.toolbox.doc.querySelector(".toolbox-dock-button");
|
||||
let btn =
|
||||
inspector.toolbox.doc.getElementById("toolbox-meatball-menu-button");
|
||||
EventUtils.synthesizeMouseAtCenter(btn, {type: "mousemove"},
|
||||
inspector.toolbox.win);
|
||||
yield onNodeUnhighlight;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче