Bug 1399886 - use fill to highlight devtools toolbar icons;r=gl
Instead of duplicating SVGs to apply a different fill color, we
can use fill from css + fill="context-fill" to achieve the same
effect. This applies to all tools that have a highlighted state
for their icon: debugger, memory and performance tools.
MozReview-Commit-ID: GmqeTKS3PC
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -146,17 +146,16 @@ Services.prefs.addObserver(
);
Tools.jsdebugger = {
id: "jsdebugger",
accesskey: l10n("debuggerMenu.accesskey"),
ordinal: 3,
icon: "chrome://devtools/skin/images/tool-debugger.svg",
invertIconForDarkTheme: true,
- highlightedicon: "chrome://devtools/skin/images/tool-debugger-paused.svg",
url: "chrome://devtools/content/debugger/debugger.xul",
label: l10n("ToolboxDebugger.label"),
panelLabel: l10n("ToolboxDebugger.panelLabel"),
get tooltip() {
return l10n("ToolboxDebugger.tooltip2",
(osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") +
l10n("debugger.commandkey"));
},
@@ -260,17 +259,16 @@ Tools.canvasDebugger = {
}
};
Tools.performance = {
id: "performance",
ordinal: 7,
icon: "chrome://devtools/skin/images/tool-profiler.svg",
invertIconForDarkTheme: true,
- highlightedicon: "chrome://devtools/skin/images/tool-profiler-active.svg",
url: "chrome://devtools/content/performance/performance.xul",
visibilityswitch: "devtools.performance.enabled",
label: l10n("performance.label"),
panelLabel: l10n("performance.panelLabel"),
get tooltip() {
return l10n("performance.tooltip", "Shift+" +
functionkey(l10n("performance.commandkey")));
},
@@ -286,17 +284,16 @@ Tools.performance = {
}
};
Tools.memory = {
id: "memory",
ordinal: 8,
icon: "chrome://devtools/skin/images/tool-memory.svg",
invertIconForDarkTheme: true,
- highlightedicon: "chrome://devtools/skin/images/tool-memory-active.svg",
url: "chrome://devtools/content/memory/memory.xhtml",
visibilityswitch: "devtools.memory.enabled",
label: l10n("memory.label"),
panelLabel: l10n("memory.panelLabel"),
tooltip: l10n("memory.tooltip"),
isTargetSupported: function (target) {
return target.getTrait("heapSnapshots") && !target.isAddon;
--- a/devtools/client/framework/components/toolbox-tab.js
+++ b/devtools/client/framework/components/toolbox-tab.js
@@ -5,29 +5,24 @@
const {DOM, createClass} = require("devtools/client/shared/vendor/react");
const {img, button, span} = DOM;
module.exports = createClass({
displayName: "ToolboxTab",
renderIcon(definition, isHighlighted) {
- const {icon, highlightedicon} = definition;
+ const {icon} = definition;
if (!icon) {
return [];
}
return [
img({
- className: "default-icon",
src: icon
}),
- img({
- className: "highlighted-icon",
- src: highlightedicon || icon
- })
];
},
render() {
const {panelDefinition, currentToolId, highlightedTool, selectTool,
focusedButton, focusButton} = this.props;
const {id, tooltip, label, iconOnly} = panelDefinition;
const isHighlighted = id === currentToolId;
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -204,28 +204,25 @@ devtools.jar:
skin/images/gcli_sec_good.svg (themes/images/gcli_sec_good.svg)
skin/images/gcli_sec_moderate.svg (themes/images/gcli_sec_moderate.svg)
skin/images/globe.svg (themes/images/globe.svg)
skin/images/sad-face.svg (themes/images/sad-face.svg)
skin/images/tool-options.svg (themes/images/tool-options.svg)
skin/images/tool-webconsole.svg (themes/images/tool-webconsole.svg)
skin/images/tool-canvas.svg (themes/images/tool-canvas.svg)
skin/images/tool-debugger.svg (themes/images/tool-debugger.svg)
- skin/images/tool-debugger-paused.svg (themes/images/tool-debugger-paused.svg)
skin/images/tool-inspector.svg (themes/images/tool-inspector.svg)
skin/images/tool-shadereditor.svg (themes/images/tool-shadereditor.svg)
skin/images/tool-styleeditor.svg (themes/images/tool-styleeditor.svg)
skin/images/tool-storage.svg (themes/images/tool-storage.svg)
skin/images/tool-profiler.svg (themes/images/tool-profiler.svg)
- skin/images/tool-profiler-active.svg (themes/images/tool-profiler-active.svg)
skin/images/tool-network.svg (themes/images/tool-network.svg)
skin/images/tool-scratchpad.svg (themes/images/tool-scratchpad.svg)
skin/images/tool-webaudio.svg (themes/images/tool-webaudio.svg)
skin/images/tool-memory.svg (themes/images/tool-memory.svg)
- skin/images/tool-memory-active.svg (themes/images/tool-memory-active.svg)
skin/images/tool-dom.svg (themes/images/tool-dom.svg)
skin/images/close.svg (themes/images/close.svg)
skin/images/clear.svg (themes/images/clear.svg)
skin/images/vview-delete.png (themes/images/vview-delete.png)
skin/images/vview-delete@2x.png (themes/images/vview-delete@2x.png)
skin/images/vview-edit.png (themes/images/vview-edit.png)
skin/images/vview-edit@2x.png (themes/images/vview-edit@2x.png)
skin/images/vview-lock.png (themes/images/vview-lock.png)
deleted file mode 100644
--- a/devtools/client/themes/images/tool-debugger-paused.svg
+++ /dev/null
@@ -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="#5FC749">
- <path d="M2 5v6c0 .109.039.342.144.553.15.297.374.447.856.447h9l-.78.375 4-5v1.25l-4-5L12 4H3c-.482 0-.707.15-.856.447A1.403 1.403 0 0 0 2 5zM1 5s0-2 2-2h9l4 5-4 5H3c-2 0-2-2-2-2V5z"/>
-</svg>
deleted file mode 100644
--- a/devtools/client/themes/images/tool-memory-active.svg
+++ /dev/null
@@ -1,10 +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="#5FC749">
- <path d="M4.727 8.055l-1.96-1a.5.5 0 0 0-.573.083L.655 8.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89z"/>
- <path d="M4.727 10.055l-1.96-1a.5.5 0 0 0-.573.083L.655 10.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89zM11.727 10.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89z"/>
- <path d="M11.727 8.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89z"/>
- <path d="M11.727 6.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89zM4.727 6.055l-1.96-1a.5.5 0 0 0-.573.083L.655 6.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89z"/>
- <path d="M5 3.002v9.996c0-.001.003.002-.003.002h6.006c-.006 0-.003-.003-.003-.002V3.002c0 .001-.003-.002.003-.002H4.997c.006 0 .003.003.003.002zm-1 0C4 2.45 4.453 2 4.997 2h6.006c.55 0 .997.456.997 1.002v9.996c0 .553-.453 1.002-.997 1.002H4.997C4.447 14 4 13.544 4 12.998V3.002z"/>
-</svg>
deleted file mode 100644
--- a/devtools/client/themes/images/tool-profiler-active.svg
+++ /dev/null
@@ -1,9 +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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#5FC749" fill-rule="evenodd">
- <path d="M15 9.004C14.51 12.394 11.578 15 8.035 15 4.15 15 1 11.866 1 8s3.15-7 7.036-7c1.941 0 3.7.783 4.972 2.048l-.709.709A6.027 6.027 0 0 0 8.036 2c-3.33 0-6.03 2.686-6.03 6s2.7 6 6.03 6a6.023 6.023 0 0 0 5.946-4.993l1.017-.003z"/>
- <path d="M4.137 9H3.1a5.002 5.002 0 0 0 9.8 0h-.965a4.023 4.023 0 0 1-3.9 3 4.023 4.023 0 0 1-3.898-3z" fill-opacity=".5"/>
- <path d="M8.036 11a2.994 2.994 0 0 0 2.987-3c0-1.657-1.338-3-2.987-3a2.994 2.994 0 0 0-2.988 3c0 1.657 1.338 3 2.988 3zm0-1c1.11 0 2.011-.895 2.011-2s-.9-2-2.011-2c-1.111 0-2.012.895-2.012 2s.9 2 2.012 2z"/>
- <path d="M10.354 6.354l4-4a.5.5 0 0 0-.708-.708l-4 4a.5.5 0 1 0 .708.708z"/>
-</svg>
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -190,20 +190,18 @@
-moz-context-properties: fill;
fill: var(--theme-toolbar-color);
}
.devtools-tab.selected > img {
fill: var(--theme-toolbar-selected-color);
}
-.devtools-tab:not(.highlighted) > .highlighted-icon,
-.devtools-tab.selected > .highlighted-icon,
-.devtools-tab:not(.selected).highlighted > .default-icon {
- display: none;
+.devtools-tab:not(.selected).highlighted > img {
+ fill: var(--theme-toolbar-highlighted-color);
}
/* The options tab is special - it doesn't have the same parent
as the other tabs (toolbox-option-container vs toolbox-tabs) */
#toolbox-option-container .devtools-tab {
border-color: transparent;
border-width: 0;
padding-inline-start: 1px;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -22,16 +22,17 @@
--theme-contrast-background: #e6b064;
/* Toolbar */
--theme-tab-toolbar-background: var(--grey-10);
--theme-toolbar-background: var(--grey-10);
--theme-toolbar-color: var(--grey-90);
--theme-toolbar-selected-color: var(--blue-60);
--theme-toolbar-checked-color: var(--blue-60);
+ --theme-toolbar-highlighted-color: #5FC749;
--theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
--theme-toolbar-background-alt: #f5f5f5;
--theme-toolbar-hover: var(--grey-20);
--theme-toolbar-hover-active: var(--grey-20);
/* Selection */
--theme-selection-background: var(--blue-55);
--theme-selection-background-hover: #F0F9FE;
@@ -106,16 +107,17 @@
--theme-contrast-background: #ffb35b;
/* Toolbar */
--theme-tab-toolbar-background: var(--grey-90);
--theme-toolbar-background: var(--grey-90);
--theme-toolbar-color: var(--grey-40);
--theme-toolbar-selected-color: white;
--theme-toolbar-checked-color: #75BFFF;
+ --theme-toolbar-highlighted-color: #5FC749;
--theme-toolbar-background-hover: #20232B;
--theme-toolbar-background-alt: #2F343E;
--theme-toolbar-hover: #252526;
--theme-toolbar-hover-active: #252526;
/* Selection */
--theme-selection-background: #204E8A;
--theme-selection-background-hover: #353B48;