Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-03-05 00:02:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1399886 - use fill from CSS to set the fill color of devtools icons;r=gl

Browse Source 
MozReview-Commit-ID: D9A472N51DA

--HG--
extra : rebase_source : 30c743c409c9178278aa5875644501310163ef4d
This commit is contained in:
Julian Descottes 2017-10-02 16:47:24 +02:00
parent 6111b96191
commit 69c5043c50
10 changed files with 33 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
devtools/client/framework/options-panel.css
View File

@ -118,6 +118,7 @@
height: 16px;
vertical-align: sub;
margin-inline-start: 5px;
filter: var(--theme-icon-filter);
-moz-context-properties: fill;
fill: var(--theme-toolbar-color);
opacity: 0.6;
}

3
devtools/client/netmonitor/src/assets/styles/netmonitor.css
View File

@ -1187,7 +1187,8 @@ body,
.requests-list-network-summary-button > .summary-info-icon {
background: url(chrome://devtools/skin/images/profiler-stopwatch.svg) no-repeat;
filter: var(--theme-icon-filter);
-moz-context-properties: fill;
fill: var(--theme-toolbar-color);
width: 16px;
height: 16px;
opacity: 0.8;

5
devtools/client/shared/widgets/filter-widget.css
View File

@ -231,9 +231,10 @@
#filter-container .add,
#filter-container .remove-button,
#toggle-presets {
filter: var(--theme-icon-filter);
-moz-context-properties: fill;
fill: var(--theme-toolbar-color);
}
.show-presets #toggle-presets {
filter: var(--theme-icon-checked-filter);
fill: var(--theme-toolbar-checked-color);
}

14
devtools/client/themes/common.css
View File

@ -9,8 +9,6 @@
font: message-box;
--tab-line-selected-color: var(--blue-50);
/* Introduce a specific variable here to be able to special-case firebug theme */
--toolbar-icon-checked-filter: var(--theme-icon-checked-filter);
}
:root.theme-light {
@ -36,9 +34,6 @@
:root.theme-firebug {
--proportional-font-family: Lucida Grande, Tahoma, sans-serif;
/* Do not use filters for Firebug checked icons: they are images, not SVGs */
--toolbar-icon-checked-filter: none;
}
.devtools-monospace {
@ -266,8 +261,7 @@ checkbox:-moz-focusring {
margin: 0 3px;
transition: opacity 0.05s ease-in-out;
/* For text-as-image usage, match the SVG color */
color: #0b0b0b;
color: var(--theme-toolbar-color);
direction: ltr;
font-size: 11px;
}
@ -280,6 +274,10 @@ checkbox:-moz-focusring {
vertical-align: middle;
}
.devtools-button.checked:empty::before {
color: var(--theme-toolbar-checked-color);
}
/* Standalone buttons */
.devtools-button[standalone],
.devtools-button[data-standalone],
@ -315,7 +313,7 @@ checkbox:-moz-focusring {
.devtools-button.checked::before,
.devtools-toolbarbutton:not([label])[checked=true] > image,
.devtools-toolbarbutton:not([label])[open=true] > image {
filter: var(--toolbar-icon-checked-filter);
fill: var(--theme-toolbar-checked-color);
}
/* Button states */

32
devtools/client/themes/images/filters.svg
View File

@ -3,22 +3,6 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<!-- DevTools icon filter: Grey 90 + 0.8 opacity (light theme normal) -->
<filter id="icon-normal-light">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0.01
0 0 0 0 0.01
0 0 0 0 0.01
0 0 0 0.8 0"/>
</filter>
<!-- DevTools icon filter: Photon Blue 60 (light theme selected) -->
<filter id="icon-selected-light">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
0 0 0 0 0.122
0 0 0 0 0.74
0 0 0 1 0"/>
</filter>
<!-- DevTools icon filter: Photon Blue 60 (light theme checked) -->
<filter id="icon-checked-light">
<feColorMatrix in="SourceGraphic" type="matrix"
@ -27,22 +11,6 @@
0 0 0 0 0.74
0 0 0 1 0"/>
</filter>
<!-- DevTools icon filter: Grey 10 + 0.8 opacity (dark theme normal) -->
<filter id="icon-normal-dark">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0.945
0 0 0 0 0.945
0 0 0 0 0.95
0 0 0 0.8 0"/>
</filter>
<!-- DevTools icon filter: white (dark theme selected) -->
<filter id="icon-selected-dark">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 1
0 0 0 0 1
0 0 0 0 1
0 0 0 1 0"/>
</filter>
<!-- DevTools icon filter: syntax blue #75BFFF (dark theme checked) -->
<filter id="icon-checked-dark">
<feColorMatrix in="SourceGraphic" type="matrix"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

5
devtools/client/themes/shadereditor.css
View File

@ -49,6 +49,7 @@
width: 16px;
height: 16px;
border: 0;
-moz-context-properties: fill;
}
.side-menu-widget-item-checkbox:not([checked]) .checkbox-check,
@ -57,12 +58,12 @@
}
.side-menu-widget-item:not(.selected) .checkbox-check {
filter: var(--theme-icon-filter);
fill: var(--theme-toolbar-color);
}
/* Make sure icon is white when the item is selected */
.side-menu-widget-item.selected .checkbox-check {
filter: invert(1);
fill: var(--theme-toolbar-selected-color);
}
/* Shader source editors */

7
devtools/client/themes/styleeditor.css
View File

@ -173,7 +173,8 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
background-size: 16px;
width: 24px;
height: 40px;
filter: var(--theme-icon-filter);
-moz-context-properties: fill;
fill: var(--theme-toolbar-color);
}
.disabled > .stylesheet-enabled {
@ -181,8 +182,8 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
}
/* Invert the toggle icon in the active row for light theme */
.theme-light .splitview-nav > li.splitview-active .stylesheet-enabled {
filter: invert(1);
.splitview-nav > li.splitview-active .stylesheet-enabled {
fill: var(--theme-toolbar-selected-color);
}
.splitview-nav > li > .stylesheet-enabled:focus,

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

@ -180,10 +180,9 @@
background: var(--theme-selection-background);
}
/* Invert the colors of certain light theme images for displaying
* inside of the dark theme.
/*
* Apply the default fill color to toolbar icons
*/
.devtools-tab.icon-invertable > img,
.devtools-toolbarbutton > image,
.devtools-button::before,
.scrollbutton-up > .toolbarbutton-icon,
@ -192,7 +191,8 @@
#canvas-debugging-empty-notice-button .button-icon,
#toggle-breakpoints[checked] > image,
.event-tooltip-debugger-icon {
filter: var(--theme-icon-filter);
-moz-context-properties: fill;
fill: var(--theme-toolbar-color);
}
.hidden-labels-box:not(.visible) > label,

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

@ -181,23 +181,18 @@
flex-shrink: 0;
}
/* Don't apply any filter to non-invertable command button icons */
.command-button:not(.command-button-invertable),
/* icon-invertable-light-theme icons are white, so do not invert them for the dark theme */
.theme-dark .devtools-tab.icon-invertable-light-theme > img,
/* Since "highlighted" icons are green, we should omit the filter */
.devtools-tab.icon-invertable.highlighted:not(.selected) > img {
filter: none;
}
.devtools-tab > label {
white-space: nowrap;
margin: 0 4px;
}
/* Apply selected icon filter to `invertable` icons */
.devtools-tab.selected.icon-invertable > img {
filter: var(--theme-icon-selected-filter) !important;
.devtools-tab > img {
-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,

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

@ -26,6 +26,7 @@
--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-background-hover: rgba(221, 225, 228, 0.66);
--theme-toolbar-background-alt: #f5f5f5;
--theme-toolbar-hover: var(--grey-20);
@ -84,8 +85,6 @@
--theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
/* Icon filters */
--theme-icon-filter: url(chrome://devtools/skin/images/filters.svg#icon-normal-light);
--theme-icon-selected-filter: url(chrome://devtools/skin/images/filters.svg#icon-selected-light);
--theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-light);
/* Tooltips */
@ -111,6 +110,7 @@
--theme-toolbar-background: var(--grey-90);
--theme-toolbar-color: var(--grey-40);
--theme-toolbar-selected-color: white;
--theme-toolbar-checked-color: #75BFFF;
--theme-toolbar-background-hover: #20232B;
--theme-toolbar-background-alt: #2F343E;
--theme-toolbar-hover: #252526;
@ -169,8 +169,6 @@
--theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
/* Icon filters */
--theme-icon-filter: url(chrome://devtools/skin/images/filters.svg#icon-normal-dark);
--theme-icon-selected-filter: url(chrome://devtools/skin/images/filters.svg#icon-selected-dark);
--theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-dark);
/* Tooltips */
@ -233,8 +231,6 @@
--theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg);
/* Icon filters */
--theme-icon-filter: none;
--theme-icon-selected-filter: none;
--theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-light);
/* Font size */