Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 09:15:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1450624 - Remove toolbox minimize feature; r=pbro

Browse Source 
--HG--
extra : rebase_source : ffa2e7283e61f61c693ace6c8760c50637ab3810
This commit is contained in:
Brian Birtles 2018-04-04 09:12:45 +09:00
parent 807f25f7be
commit 0ced916915
10 changed files with 3 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
browser/base/content/test/static/browser_parsable_css.js
View File

@ -79,17 +79,6 @@ if (!Services.prefs.getBoolPref("full-screen-api.unprefix.enabled")) {
});
}
// Platform can be "linux", "macosx" or "win". If omitted, the exception applies to all platforms.
let allowedImageReferences = [
// Bug 1302691
{file: "chrome://devtools/skin/images/dock-bottom-minimize@2x.png",
from: "chrome://devtools/skin/toolbox.css",
isFromDevTools: true},
{file: "chrome://devtools/skin/images/dock-bottom-maximize@2x.png",
from: "chrome://devtools/skin/toolbox.css",
isFromDevTools: true},
];
let propNameWhitelist = [
// These are CSS custom properties that we found a definition of but
// no reference to.
@ -419,18 +408,7 @@ add_task(async function checkAllTheCSS() {
for (let [image, references] of imageURIsToReferencesMap) {
if (!chromeFileExists(image)) {
for (let ref of references) {
let ignored = false;
for (let item of allowedImageReferences) {
if (image.endsWith(item.file) && ref.endsWith(item.from) &&
isDevtools == item.isFromDevTools &&
(!item.platforms || item.platforms.includes(AppConstants.platform))) {
item.used = true;
ignored = true;
break;
}
}
if (!ignored)
ok(false, "missing " + image + " referenced from " + ref);
ok(false, "missing " + image + " referenced from " + ref);
}
}
}
@ -472,7 +450,6 @@ add_task(async function checkAllTheCSS() {
}
}
checkWhitelist(whitelist);
checkWhitelist(allowedImageReferences);
checkWhitelist(propNameWhitelist);
// Clean up to avoid leaks:

8
devtools/client/framework/components/toolbox-controller.js
View File

@ -48,7 +48,6 @@ class ToolboxController extends Component {
this.setCanCloseToolbox = this.setCanCloseToolbox.bind(this);
this.setPanelDefinitions = this.setPanelDefinitions.bind(this);
this.setToolboxButtons = this.setToolboxButtons.bind(this);
this.setCanMinimize = this.setCanMinimize.bind(this);
}
shouldComponentUpdate() {
@ -162,13 +161,6 @@ class ToolboxController extends Component {
this.setState({ toolboxButtons }, this.updateButtonIds);
}
setCanMinimize(canMinimize) {
/* Bug 1177463 - The minimize button is currently hidden until we agree on
the UI for it, and until bug 1173849 is fixed too. */
// this.setState({ canMinimize });
}
render() {
return ToolboxToolbar(Object.assign({}, this.props, this.state));
}

2
devtools/client/framework/test/browser.ini
View File

@ -81,8 +81,6 @@ skip-if = os == 'win' || debug # Bug 1282269, 1448084
[browser_toolbox_hosts_telemetry.js]
[browser_toolbox_keyboard_navigation.js]
skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
[browser_toolbox_minimize.js]
skip-if = true # Bug 1177463 - Temporarily hide the minimize button
[browser_toolbox_options.js]
[browser_toolbox_options_disable_buttons.js]
[browser_toolbox_options_disable_cache-01.js]

106
devtools/client/framework/test/browser_toolbox_minimize.js
View File

@ -1,106 +0,0 @@
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that when the toolbox is displayed in a bottom host, that host can be
// minimized to just the tabbar height, and maximized again.
// Also test that while minimized, switching to a tool, clicking on the
// settings, or clicking on the selected tool's tab maximizes the toolbox again.
// Finally test that the minimize button doesn't exist in other host types.
const URL = "data:text/html;charset=utf8,test page";
const {Toolbox} = require("devtools/client/framework/toolbox");
add_task(async function () {
info("Create a test tab and open the toolbox");
let tab = await addTab(URL);
let target = TargetFactory.forTab(tab);
let toolbox = await gDevTools.showToolbox(target, "webconsole");
let button = toolbox.doc.querySelector("#toolbox-dock-bottom-minimize");
ok(button, "The minimize button exists in the default bottom host");
info("Try to minimize the toolbox");
await minimize(toolbox);
ok(parseInt(toolbox._host.frame.style.marginBottom, 10) < 0,
"The toolbox host has been hidden away with a negative-margin");
info("Try to maximize again the toolbox");
await maximize(toolbox);
ok(parseInt(toolbox._host.frame.style.marginBottom, 10) == 0,
"The toolbox host is shown again");
info("Try to minimize again using the keyboard shortcut");
await minimizeWithShortcut(toolbox);
ok(parseInt(toolbox._host.frame.style.marginBottom, 10) < 0,
"The toolbox host has been hidden away with a negative-margin");
info("Try to maximize again using the keyboard shortcut");
await maximizeWithShortcut(toolbox);
ok(parseInt(toolbox._host.frame.style.marginBottom, 10) == 0,
"The toolbox host is shown again");
info("Minimize again and switch to another tool");
await minimize(toolbox);
let onMaximized = toolbox._host.once("maximized");
await toolbox.selectTool("inspector");
await onMaximized;
info("Minimize again and click on the tab of the current tool");
await minimize(toolbox);
onMaximized = toolbox._host.once("maximized");
let tabButton = toolbox.doc.querySelector("#toolbox-tab-inspector");
EventUtils.synthesizeMouseAtCenter(tabButton, {}, toolbox.win);
await onMaximized;
info("Minimize again and click on the settings tab");
await minimize(toolbox);
onMaximized = toolbox._host.once("maximized");
let settingsButton = toolbox.doc.querySelector("#toolbox-tab-options");
EventUtils.synthesizeMouseAtCenter(settingsButton, {}, toolbox.win);
await onMaximized;
info("Switch to a different host");
await toolbox.switchHost(Toolbox.HostType.SIDE);
button = toolbox.doc.querySelector("#toolbox-dock-bottom-minimize");
ok(!button, "The minimize button doesn't exist in the side host");
Services.prefs.clearUserPref("devtools.toolbox.host");
await toolbox.destroy();
gBrowser.removeCurrentTab();
});
async function minimize(toolbox) {
let button = toolbox.doc.querySelector("#toolbox-dock-bottom-minimize");
let onMinimized = toolbox._host.once("minimized");
EventUtils.synthesizeMouseAtCenter(button, {}, toolbox.win);
await onMinimized;
}
async function minimizeWithShortcut(toolbox) {
let key = toolbox.doc.getElementById("toolbox-minimize-key")
.getAttribute("key");
let onMinimized = toolbox._host.once("minimized");
EventUtils.synthesizeKey(key, {accelKey: true, shiftKey: true},
toolbox.win);
await onMinimized;
}
async function maximize(toolbox) {
let button = toolbox.doc.querySelector("#toolbox-dock-bottom-minimize");
let onMaximized = toolbox._host.once("maximized");
EventUtils.synthesizeMouseAtCenter(button, {}, toolbox.win);
await onMaximized;
}
async function maximizeWithShortcut(toolbox) {
let key = toolbox.doc.getElementById("toolbox-minimize-key")
.getAttribute("key");
let onMaximized = toolbox._host.once("maximized");
EventUtils.synthesizeKey(key, {accelKey: true, shiftKey: true},
toolbox.win);
await onMaximized;
}

36
devtools/client/framework/toolbox-host-manager.js
View File

@ -23,23 +23,12 @@ loader.lazyRequireGetter(this, "Hosts", "devtools/client/framework/toolbox-hosts
* - switch-host:
* Order to display the toolbox in another host (side, bottom, window, or the
* previously used one)
* - toggle-minimize-mode:
* When using the bottom host, the toolbox can be miximized to only display
* the tool titles
* - maximize-host:
* When using the bottom host in minimized mode, revert back to regular mode
* in order to see tool titles and the tools
* - raise-host:
* Focus the tools
* - set-host-title:
* When using the window host, update the window title
*
* Messages sent by the chrome to the toolbox:
* - host-minimized:
* The bottom host is done minimizing (after animation end)
* - host-maximized:
* The bottom host is done switching back to regular mode (after animation
* end)
* - switched-host:
* The `switch-host` command sent by the toolbox is done
*/
@ -56,8 +45,6 @@ function ToolboxHostManager(target, hostType, hostOptions) {
if (!hostType) {
hostType = Services.prefs.getCharPref(LAST_HOST);
}
this.onHostMinimized = this.onHostMinimized.bind(this);
this.onHostMaximized = this.onHostMaximized.bind(this);
this.host = this.createHost(hostType, hostOptions);
this.hostType = hostType;
}
@ -121,15 +108,9 @@ ToolboxHostManager.prototype = {
case "switch-host":
this.switchHost(event.data.hostType);
break;
case "maximize-host":
this.host.maximize();
break;
case "raise-host":
this.host.raise();
break;
case "toggle-minimize-mode":
this.host.toggleMinimizeMode(event.data.toolbarHeight);
break;
case "set-host-title":
this.host.setTitle(event.data.title);
break;
@ -167,24 +148,9 @@ ToolboxHostManager.prototype = {
}
let newHost = new Hosts[hostType](this.target.tab, options);
// Update the label and icon when the state changes.
newHost.on("minimized", this.onHostMinimized);
newHost.on("maximized", this.onHostMaximized);
return newHost;
},
onHostMinimized() {
this.postMessage({
name: "host-minimized"
});
},
onHostMaximized() {
this.postMessage({
name: "host-maximized"
});
},
async switchHost(hostType) {
if (hostType == "previous") {
// Switch to the last used host for the toolbox UI.
@ -243,8 +209,6 @@ ToolboxHostManager.prototype = {
}
this.host.frame.removeEventListener("unload", this, true);
this.host.off("minimized", this.onHostMinimized);
this.host.off("maximized", this.onHostMaximized);
return this.host.destroy();
}
};

57
devtools/client/framework/toolbox-hosts.js
View File

@ -101,63 +101,6 @@ BottomHost.prototype = {
focusTab(this.hostTab);
},
/**
* Minimize this host so that only the toolbox tabbar remains visible.
* @param {Number} height The height to minimize to. Defaults to 0, which
* means that the toolbox won't be visible at all once minimized.
*/
minimize: function(height = 0) {
if (this.isMinimized) {
return;
}
this.isMinimized = true;
let onTransitionEnd = event => {
if (event.propertyName !== "margin-bottom") {
// Ignore transitionend on unrelated properties.
return;
}
this.frame.removeEventListener("transitionend", onTransitionEnd);
this.emit("minimized");
};
this.frame.addEventListener("transitionend", onTransitionEnd);
this.frame.style.marginBottom = -this.frame.height + height + "px";
this._splitter.classList.add("disabled");
},
/**
* If the host was minimized before, maximize it again (the host will be
* maximized to the height it previously had).
*/
maximize: function() {
if (!this.isMinimized) {
return;
}
this.isMinimized = false;
let onTransitionEnd = event => {
if (event.propertyName !== "margin-bottom") {
// Ignore transitionend on unrelated properties.
return;
}
this.frame.removeEventListener("transitionend", onTransitionEnd);
this.emit("maximized");
};
this.frame.addEventListener("transitionend", onTransitionEnd);
this.frame.style.marginBottom = "0";
this._splitter.classList.remove("disabled");
},
/**
* Toggle the minimize mode.
* @param {Number} minHeight The height to minimize to.
*/
toggleMinimizeMode: function(minHeight) {
this.isMinimized ? this.maximize() : this.minimize(minHeight);
},
/**
* Set the toolbox title.
* Nothing to do for this host type.

79
devtools/client/framework/toolbox.js
View File

@ -141,12 +141,7 @@ function Toolbox(target, selectedTool, hostType, contentWindow, frameId) {
this._onBrowserMessage = this._onBrowserMessage.bind(this);
this._showDevEditionPromo = this._showDevEditionPromo.bind(this);
this._updateTextBoxMenuItems = this._updateTextBoxMenuItems.bind(this);
this._onBottomHostMinimized = this._onBottomHostMinimized.bind(this);
this._onBottomHostMaximized = this._onBottomHostMaximized.bind(this);
this._onToolSelectWhileMinimized = this._onToolSelectWhileMinimized.bind(this);
this._onPerformanceFrontEvent = this._onPerformanceFrontEvent.bind(this);
this._onBottomHostWillChange = this._onBottomHostWillChange.bind(this);
this._toggleMinimizeMode = this._toggleMinimizeMode.bind(this);
this._onToolbarFocus = this._onToolbarFocus.bind(this);
this._onToolbarArrowKeypress = this._onToolbarArrowKeypress.bind(this);
this._onPickerClick = this._onPickerClick.bind(this);
@ -891,11 +886,6 @@ Toolbox.prototype = {
this.selectPreviousTool();
event.preventDefault();
});
this.shortcuts.on(L10N.getStr("toolbox.minimize.key"),
event => {
this._toggleMinimizeMode();
event.preventDefault();
});
this.shortcuts.on(L10N.getStr("toolbox.toggleHost.key"),
event => {
this.switchToPreviousHost();
@ -920,23 +910,8 @@ Toolbox.prototype = {
// Called whenever the chrome send a message
_onBrowserMessage: function(event) {
if (!event.data) {
return;
}
switch (event.data.name) {
case "switched-host":
this._onSwitchedHost(event.data);
break;
case "host-minimized":
if (this.hostType == Toolbox.HostType.BOTTOM) {
this._onBottomHostMinimized();
}
break;
case "host-maximized":
if (this.hostType == Toolbox.HostType.BOTTOM) {
this._onBottomHostMaximized();
}
break;
if (event.data && event.data.name === "switched-host") {
this._onSwitchedHost(event.data);
}
},
@ -1082,16 +1057,6 @@ Toolbox.prototype = {
return;
}
// Bottom-type host can be minimized, add a button for this.
if (this.hostType == Toolbox.HostType.BOTTOM) {
this.component.setCanMinimize(true);
// Maximize again when a tool gets selected.
this.on("before-select", this._onToolSelectWhileMinimized);
// Maximize and stop listening before the host type changes.
this.once("host-will-change", this._onBottomHostWillChange);
}
this.component.setDockButtonsEnabled(true);
this.component.setCanCloseToolbox(this.hostType !== Toolbox.HostType.WINDOW);
@ -1115,20 +1080,6 @@ Toolbox.prototype = {
this.component.setHostTypes(hostTypes);
},
_onBottomHostMinimized: function() {
this.component.setMinimizeState("minimized");
},
_onBottomHostMaximized: function() {
this.component.setMinimizeState("maximized");
},
_onToolSelectWhileMinimized: function() {
this.postMessage({
name: "maximize-host"
});
},
postMessage: function(msg) {
// We sometime try to send messages in middle of destroy(), where the
// toolbox iframe may already be detached and no longer have a parent.
@ -1140,29 +1091,6 @@ Toolbox.prototype = {
}
},
_onBottomHostWillChange: function() {
this.postMessage({
name: "maximize-host"
});
this.off("before-select", this._onToolSelectWhileMinimized);
},
_toggleMinimizeMode: function() {
if (this.hostType !== Toolbox.HostType.BOTTOM) {
return;
}
// Calculate the height to which the host should be minimized so the
// tabbar is still visible.
let toolbarHeight = this._componentMount.getBoxQuads({box: "content"})[0].bounds
.height;
this.postMessage({
name: "toggle-minimize-mode",
toolbarHeight
});
},
/**
* Initiate ToolboxTabs React component and all it's properties. Do the initial render.
*/
@ -1189,7 +1117,6 @@ Toolbox.prototype = {
selectTool: this.selectTool,
closeToolbox: this.destroy,
focusButton: this._onToolbarFocus,
toggleMinimizeMode: this._toggleMinimizeMode,
toolbox: this
});
@ -1871,8 +1798,6 @@ Toolbox.prototype = {
* The id of the tool to switch to
*/
selectTool: function(id) {
this.emit("before-select", id);
if (this.currentToolId == id) {
let panel = this._toolPanels.get(id);
if (panel) {

18
devtools/client/locales/en-US/toolbox.properties
View File

@ -6,20 +6,6 @@ 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 (toolboxDockButtons.bottom.minimize): This string is shown
# as a tooltip that appears in the toolbox when it is in "bottom host" mode and
# when hovering over the minimize button in the toolbar. When clicked, the
# button minimizes the toolbox so that just the toolbar is visible at the
# bottom.
toolboxDockButtons.bottom.minimize=Minimize the toolbox
# LOCALIZATION NOTE (toolboxDockButtons.bottom.maximize): This string is shown
# as a tooltip that appears in the toolbox when it is in "bottom host" mode and
# when hovering over the maximize button in the toolbar. When clicked, the
# button maximizes the toolbox again (if it had been minimized before) so that
# the whole toolbox is visible again.
toolboxDockButtons.bottom.maximize=Maximize the toolbox
# LOCALIZATION NOTE (toolboxToggleButton.errors): Semi-colon list of plural
# forms.
# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
@ -151,10 +137,6 @@ toolbox.reload2.key=F5
toolbox.forceReload.key=CmdOrCtrl+Shift+R
toolbox.forceReload2.key=CmdOrCtrl+F5
# LOCALIZATION NOTE (toolbox.minimize.key)
# Key shortcut used to minimize the toolbox
toolbox.minimize.key=CmdOrCtrl+Shift+U
# LOCALIZATION NOTE (toolbox.toggleHost.key)
# Key shortcut used to move the toolbox in bottom or side of the browser window
toolbox.toggleHost.key=CmdOrCtrl+Shift+D

5
devtools/client/themes/devtools-browser.css
View File

@ -5,11 +5,6 @@
@import url("resource://devtools/client/themes/splitters.css");
@import url("resource://devtools/client/themes/commandline-browser.css");
/* Bottom-docked toolbox minimize transition */
.devtools-toolbox-bottom-iframe {
transition: margin-bottom .1s;
}
.devtools-toolbox-side-iframe {
min-width: 465px;
}

8
devtools/client/themes/toolbox.css
View File

@ -232,14 +232,6 @@
background-image: var(--dock-undock-image);
}
#toolbox-dock-bottom-minimize::before {
background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png");
}
#toolbox-dock-bottom-minimize.minimized::before {
background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png");
}
/* Command buttons */
.command-button,