Bug 1399028 - photon update - devtools icon, tab and accordion colors;r=gl
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 11 Sep 2017 23:56:33 +0200
changeset 430121 d7af29b83ac3d846c1a09d5dd4df4de8c6aafba1
parent 430120 5291605468b85f824823b167b8a8006c87afe0f2
child 430122 c5aedf62e0af308f076dd65d6775a566dea6365a
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1399028
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/framework/options-panel.css
devtools/client/inspector/layout/components/Accordion.css
devtools/client/netmonitor/src/assets/styles/netmonitor.css
devtools/client/responsive.html/index.css
devtools/client/shared/components/tabs/tabs.css
devtools/client/shared/widgets/filter-widget.css
devtools/client/themes/common.css
devtools/client/themes/images/filters.svg
devtools/client/themes/shadereditor.css
devtools/client/themes/styleeditor.css
devtools/client/themes/toolbars.css
devtools/client/themes/toolbox.css
devtools/client/themes/variables.css
--- 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
@@ -168,17 +168,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 */