Bug 1399028 - photon update - devtools icon, tab and accordion colors;r=gl
Updated colors and styles for toolbox toolbar tabs as well as sidebar tabs.
For icon color changes created special filters that match the expected photon colors.
The normal, selected and checked states of icons in both dark and light theme are now
always set using filters.
MozReview-Commit-ID: 4MTAxHnyI7a
--- a/devtools/client/framework/options-panel.css
+++ b/devtools/client/framework/options-panel.css
@@ -113,11 +113,11 @@
#screenshot-options legend::after {
content: "";
display: inline-block;
background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
width: 16px;
height: 16px;
vertical-align: sub;
margin-inline-start: 5px;
- filter: var(--icon-filter);
+ filter: var(--theme-icon-filter);
opacity: 0.6;
}
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -34,17 +34,17 @@
width: 100%;
align-items: center;
display: flex;
-moz-user-select: none;
}
.accordion ._header:hover {
- background-color: var(--theme-toolbar-background-hover);
+ background-color: var(--theme-toolbar-hover);
}
.accordion ._header:hover svg {
fill: var(--theme-comment-alt);
}
.accordion ._content {
border-bottom: 1px solid var(--theme-splitter-color);
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -1171,17 +1171,17 @@ body,
padding-inline-end: 0;
margin-top: 3px;
margin-bottom: 3px;
margin-inline-end: 1em;
}
.requests-list-network-summary-button > .summary-info-icon {
background: url(chrome://devtools/skin/images/profiler-stopwatch.svg) no-repeat;
- filter: var(--icon-filter);
+ filter: var(--theme-icon-filter);
width: 16px;
height: 16px;
opacity: 0.8;
}
.requests-list-network-summary-button:hover > .summary-info-icon {
opacity: 1;
}
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -71,17 +71,17 @@ body,
.toolbar-button:empty:hover:not(:disabled),
.toolbar-button:empty:-moz-any(:hover:active, .checked):not(:disabled) {
/* Reset background from .devtools-button */
background: none;
}
.toolbar-button:active::before {
- filter: var(--checked-icon-filter);
+ filter: var(--theme-icon-checked-filter);
}
select {
-moz-appearance: none;
background-color: var(--theme-toolbar-background);
background-image: var(--viewport-selection-arrow);
-moz-context-properties: fill;
fill: currentColor;
@@ -161,17 +161,17 @@ select > option.divider {
background-image: url("./images/screenshot.svg");
}
#global-exit-button::before {
background-image: url("chrome://devtools/skin/images/close.svg");
}
#global-screenshot-button:disabled {
- filter: var(--checked-icon-filter);
+ filter: var(--theme-icon-checked-filter);
opacity: 1 !important;
}
#global-network-throttling-selector {
height: 15px;
padding-left: 0;
width: 103px;
}
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -79,16 +79,21 @@
.theme-dark .tabs .tabs-menu-item,
.theme-light .tabs .tabs-menu-item {
margin: 0;
padding: 0;
color: var(--theme-toolbar-color);
}
+.theme-dark .tabs .tabs-menu-item.is-active,
+.theme-light .tabs .tabs-menu-item.is-active {
+ color: var(--theme-toolbar-selected-color);
+}
+
.theme-dark .tabs .tabs-menu-item:last-child,
.theme-light:not(.theme-firebug) .tabs .tabs-menu-item:last-child {
border-inline-end-width: 1px;
}
.theme-dark .tabs .tabs-menu-item a,
.theme-light .tabs .tabs-menu-item a {
padding: 3px 15px;
--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -226,14 +226,14 @@
#toggle-presets {
background: url(chrome://devtools/skin/images/pseudo-class.svg);
}
#filter-container .add,
#filter-container .remove-button,
#toggle-presets {
- filter: var(--icon-filter);
+ filter: var(--theme-icon-filter);
}
.show-presets #toggle-presets {
filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
}
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -289,38 +289,33 @@ checkbox:-moz-focusring {
}
/* Icon button styles */
.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
display: none;
}
/* Icon-only buttons */
-.devtools-button:empty::before,
-.devtools-toolbarbutton:not([label]):not([disabled]) > image {
- opacity: 0.8;
-}
-
.devtools-button:hover:empty:not(:disabled):before,
.devtools-button.checked:empty::before,
.devtools-toolbarbutton:not([label]):not([disabled=true]):hover > image,
.devtools-toolbarbutton:not([label])[checked=true] > image,
.devtools-toolbarbutton:not([label])[open=true] > image {
opacity: 1;
}
.devtools-button:disabled,
.devtools-toolbarbutton[disabled] {
opacity: 0.5 !important;
}
.devtools-button.checked::before,
.devtools-toolbarbutton:not([label])[checked=true] > image,
.devtools-toolbarbutton:not([label])[open=true] > image {
- filter: var(--checked-icon-filter);
+ filter: var(--theme-icon-checked-filter);
}
/* Button states */
.devtools-toolbarbutton[label]:not([type=menu-button]),
.devtools-toolbarbutton[standalone],
.devtools-button[data-standalone],
.devtools-button:not(:empty) {
background: var(--toolbarbutton-background);
--- a/devtools/client/themes/images/filters.svg
+++ b/devtools/client/themes/images/filters.svg
@@ -1,25 +1,59 @@
<!-- 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 height="0" xmlns="http://www.w3.org/2000/svg">
- <filter id="checked-icon-state">
+ <!-- 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.043
- 0 0 0 0 0.415
- 0 0 0 0 0.79
+ 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>
- <filter id="dark-theme-checked-icon-state">
+ <!-- DevTools icon filter: Photon Blue 60 (light theme checked) -->
+ <filter id="icon-checked-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: 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 0.212
+ 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"
+ values="0 0 0 0.18 0
+ 0 0 0 0.52 0
+ 0 0 0 1 0
0 0 0 1 0"/>
</filter>
<!-- Web Audio Gradients -->
<linearGradient id="bypass-light" x1="8%" y1="10%" x2="16%" y2="16%" spreadMethod="repeat">
<stop offset="0%" stop-color="#dde1e4a0"/> <!-- theme-splitter-color (0.5 opacity) -->
<stop offset="50%" stop-color="transparent"/>
</linearGradient>
--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -52,17 +52,17 @@
}
.side-menu-widget-item-checkbox:not([checked]) .checkbox-check,
.side-menu-widget-item-checkbox:not([checked]) + vbox {
opacity: 0.3;
}
.side-menu-widget-item:not(.selected) .checkbox-check {
- filter: var(--icon-filter);
+ filter: var(--theme-icon-filter);
}
/* Make sure icon is white when the item is selected */
.side-menu-widget-item.selected .checkbox-check {
filter: invert(1);
}
/* Shader source editors */
--- a/devtools/client/themes/styleeditor.css
+++ b/devtools/client/themes/styleeditor.css
@@ -182,17 +182,17 @@ li.error > .stylesheet-info > .styleshee
margin: 0 8px;
background-image: url(images/item-toggle.svg);
background-repeat: no-repeat;
background-clip: content-box;
background-position: center;
background-size: 16px;
width: 24px;
height: 40px;
- filter: var(--icon-filter);
+ filter: var(--theme-icon-filter);
}
.disabled > .stylesheet-enabled {
opacity: 0.3;
}
/* Invert the toggle icon in the active row for light theme */
.theme-light .splitview-nav > li.splitview-active .stylesheet-enabled {
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -9,44 +9,35 @@
--searchbox-border-color: #ffbf00;
--searcbox-no-match-background-color: #ffe5e5;
--searcbox-no-match-border-color: #e52e2e;
--magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
--filter-image: url(chrome://devtools/skin/images/filter.svg);
--tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
- --icon-filter: none;
- --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
-
--separator-border-image: linear-gradient(transparent 4px, rgba(0,0,0,.1) 4px, rgba(0,0,0,.1) calc(100% - 4px), transparent calc(100% - 4px));
}
.theme-dark {
--searchbox-background-color: #4d4222;
--searchbox-border-color: #d99f2b;
--searcbox-no-match-background-color: #402325;
--searcbox-no-match-border-color: #cc3d3d;
--magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
--filter-image: url(chrome://devtools/skin/images/filter.svg);
--tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
- --icon-filter: invert(1);
- --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#dark-theme-checked-icon-state);
-
- --separator-border-image: linear-gradient(transparent 4px, rgba(100%,100%,100%,.2) 4px, rgba(100%,100%,100%,.2) calc(100% - 4px), transparent calc(100% - 4px))
+ --separator-border-image: linear-gradient(transparent 4px, rgba(100%,100%,100%,.2) 4px, rgba(100%,100%,100%,.2) calc(100% - 4px), transparent calc(100% - 4px));
}
.theme-firebug {
--magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
--tool-options-image: url(chrome://devtools/skin/images/firebug/tool-options.svg);
-
- --icon-filter: none;
- --checked-icon-filter: none;
}
/* Toolbars */
.devtools-toolbar,
.devtools-sidebar-tabs tabs {
-moz-appearance: none;
padding: 0;
@@ -196,17 +187,17 @@
.devtools-toolbarbutton > image,
.devtools-button::before,
.scrollbutton-up > .toolbarbutton-icon,
.scrollbutton-down > .toolbarbutton-icon,
#black-boxed-message-button .button-icon,
#canvas-debugging-empty-notice-button .button-icon,
#toggle-breakpoints[checked] > image,
.event-tooltip-debugger-icon {
- filter: var(--icon-filter);
+ filter: var(--theme-icon-filter);
}
.hidden-labels-box:not(.visible) > label,
.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
display: none;
}
.devtools-invisible-splitter {
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -139,52 +139,47 @@
.theme-firebug .devtools-tab {
-moz-box-flex: initial;
}
.devtools-tab {
color: var(--theme-toolbar-color);
}
-.theme-dark .devtools-tab:hover {
- color: #ced3d9;
-}
-
.devtools-tab:hover {
background-color: var(--theme-toolbar-hover);
}
-.theme-dark .devtools-tab:hover:active {
- color: var(--theme-selection-color);
-}
-
.devtools-tab:hover:active {
background-color: var(--theme-toolbar-hover-active);
}
.devtools-tab:not(.selected).highlighted {
background-color: var(--theme-toolbar-background-alt);
}
+.devtools-tab.selected {
+ color: var(--theme-toolbar-selected-color);
+}
+
/* Display execution pointer in the Debugger tab to indicate
that the debugger is paused. */
.theme-firebug #toolbox-tab-jsdebugger.devtools-tab:not(.selected).highlighted {
background-color: rgba(89, 178, 234, .2);
background-image: url(chrome://devtools/skin/images/firebug/tool-debugger-paused.svg);
background-repeat: no-repeat;
padding-left: 13px !important;
background-position: 3px 6px;
}
.devtools-tab > img {
border: none;
margin: 0;
margin-inline-start: 10px;
margin-inline-end: 5px;
- opacity: 0.8;
max-height: 16px;
width: 16px; /* Prevents collapse during theme switching */
vertical-align: text-top;
flex-shrink: 0;
}
/* Don't apply any filter to non-invertable command button icons */
.command-button:not(.command-button-invertable),
@@ -195,20 +190,19 @@
filter: none;
}
.devtools-tab > label {
white-space: nowrap;
margin: 0 4px;
}
-.devtools-tab:hover > img,
-.devtools-tab:active > img,
-.devtools-tab.selected > img {
- opacity: 1;
+/* Apply selected icon filter to `invertable` icons */
+.devtools-tab.selected.icon-invertable > img {
+ filter: var(--theme-icon-selected-filter) !important;
}
.devtools-tab:not(.highlighted) > .highlighted-icon,
.devtools-tab.selected > .highlighted-icon,
.devtools-tab:not(.selected).highlighted > .default-icon {
display: none;
}
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -20,20 +20,21 @@
--theme-body-background: white;
--theme-sidebar-background: white;
--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-background-hover: rgba(221, 225, 228, 0.66);
--theme-toolbar-background-alt: #f5f5f5;
- --theme-toolbar-hover: rgba(170, 170, 170, .2);
- --theme-toolbar-hover-active: rgba(170, 170, 170, .4);
+ --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;
--theme-selection-color: #f5f7fa;
/* Border color that splits the toolbars/panels/headers.
* This needs to be sync with commandline.css and commandline-browser.css. */
@@ -75,16 +76,21 @@
--theme-graphs-grey: #cccccc;
--theme-graphs-full-red: #f00;
--theme-graphs-full-blue: #00f;
/* Images */
--theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
--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 */
--theme-tooltip-border: #d9e1e8;
--theme-tooltip-background: rgba(255, 255, 255, .9);
--theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
/* Command line */
--theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
@@ -96,20 +102,21 @@
--theme-body-background: var(--grey-80);
--theme-sidebar-background: var(--grey-90);
--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-background-hover: #20232B;
--theme-toolbar-background-alt: #2F343E;
- --theme-toolbar-hover: rgba(110, 120, 130, 0.1);
- --theme-toolbar-hover-active: rgba(110, 120, 130, 0.2);
+ --theme-toolbar-hover: #252526;
+ --theme-toolbar-hover-active: #252526;
/* Selection */
--theme-selection-background: #204E8A;
--theme-selection-background-hover: #353B48;
--theme-selection-color: #f5f7fa;
/* Border color that splits the toolbars/panels/headers.
* This needs to be sync with commandline.css and commandline-browser.css. */
@@ -151,16 +158,21 @@
--theme-graphs-grey: #757873;
--theme-graphs-full-red: #f00;
--theme-graphs-full-blue: #00f;
/* Images */
--theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
--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 */
--theme-tooltip-border: #434850;
--theme-tooltip-background: rgba(19, 28, 38, .9);
--theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
/* Command line */
--theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
@@ -209,16 +221,21 @@
--theme-graphs-grey: #cccccc;
--theme-graphs-full-red: #f00;
--theme-graphs-full-blue: #00f;
/* Images */
--theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg);
--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: none;
+
/* Font size */
--theme-toolbar-font-size: 12px;
/* Header */
--theme-header-background: #F0F0F0 linear-gradient(to top,
rgba(0, 0, 0, 0.1),
transparent) repeat-x;
@@ -248,17 +265,17 @@
--theme-focus-border-color-textbox: #0675d3;
--theme-textbox-box-shadow: rgba(97,181,255,.75);
/* For accessibility purposes we want to enhance the focus styling. This
* should improve keyboard navigation usability. */
--theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
--theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
- --toolbarbutton-background: rgba(110,120,130,0.1);
+ --toolbarbutton-background: var(--theme-toolbar-hover);
--toolbarbutton-border-color: transparent;
--toolbarbutton-hover-background: rgba(110,120,130,0.2);
--toolbarbutton-hover-border-color: var(--toolbarbutton-border-color);
--toolbarbutton-checked-background: var(--theme-selection-background);
--toolbarbutton-checked-color: var(--theme-selection-color);
--toolbarbutton-checked-border-color: var(--toolbarbutton-border-color);
/* The photon animation curve */