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

Bug 1399886 - use fill to highlight devtools toolbar icons;r=gl

Browse Source 
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

--HG--
extra : rebase_source : c613fc38ce7fedcfe111bed74216c1c38b511b9d
This commit is contained in:
Julian Descottes 2017-10-04 20:41:00 +02:00
parent 69c5043c50
commit c56455de82
8 changed files with 5 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
devtools/client/definitions.js
View File

@ -151,7 +151,6 @@ Tools.jsdebugger = {
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"),
@ -265,7 +264,6 @@ Tools.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"),
@ -291,7 +289,6 @@ Tools.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"),

7
devtools/client/framework/components/toolbox-tab.js
View File

@ -10,19 +10,14 @@ 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
})
];
},

3
devtools/client/jar.mn
View File

@ -208,18 +208,15 @@ devtools.jar:
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)

6
devtools/client/themes/images/tool-debugger-paused.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 505 B

10
devtools/client/themes/images/tool-memory-active.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

9
devtools/client/themes/images/tool-profiler-active.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 990 B

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

@ -195,10 +195,8 @@
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

2
devtools/client/themes/variables.css
View File

@ -27,6 +27,7 @@
--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);
@ -111,6 +112,7 @@
--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;