Bug 1705849 - Update toolbar icon fill colours for system/light/dark themes to remove opacity and match Proton spec. r=harry
authorMike Conley <mconley@mozilla.com>
Mon, 26 Apr 2021 16:55:12 +0000
changeset 577530 052b086a834cd4d6722d6768d8f63b4785c140f2
parent 577529 33e6726dee20181958342c8197f76cd37818df67
child 577531 a2e246a3805c2021f4eb2ebf0c5e634029d5976f
push id141890
push usermconley@mozilla.com
push dateMon, 26 Apr 2021 16:58:35 +0000
treeherderautoland@052b086a834c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersharry
bugs1705849
milestone90.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 1705849 - Update toolbar icon fill colours for system/light/dark themes to remove opacity and match Proton spec. r=harry Differential Revision: https://phabricator.services.mozilla.com/D112820
browser/modules/ThemeVariableMap.jsm
browser/themes/addons/dark/manifest.json
browser/themes/addons/light/manifest.json
browser/themes/shared/browser-custom-colors.inc.css
browser/themes/shared/tabs.inc.css
browser/themes/shared/toolbarbutton-icons.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/browser-aero.css
browser/themes/windows/compacttheme.css
toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_icons.js
toolkit/components/printing/content/printPagination.css
toolkit/mozapps/extensions/default-theme/manifest.json
toolkit/themes/shared/global.inc.css
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -96,17 +96,17 @@ const ThemeVariableMap = [
   ],
   [
     "--chrome-content-separator-color",
     {
       lwtProperty: "toolbar_bottom_separator",
     },
   ],
   [
-    "--lwt-toolbarbutton-icon-fill",
+    "--toolbarbutton-icon-fill",
     {
       lwtProperty: "icon_color",
     },
   ],
   [
     "--lwt-toolbarbutton-icon-fill-attention",
     {
       lwtProperty: "icon_attention_color",
--- a/browser/themes/addons/dark/manifest.json
+++ b/browser/themes/addons/dark/manifest.json
@@ -14,17 +14,17 @@
 
   "icons": {"32": "icon.svg"},
 
   "theme": {
     "colors": {
       "tab_background_text": "#fbfbfe",
       "tab_selected": "rgb(66,65,77)",
       "tab_text": "rgb(251,251,254)",
-      "icons": "rgb(249, 249, 250, 0.7)",
+      "icons": "rgb(251,251,254)",
       "frame": "#1c1b22",
       "popup": "rgb(66,65,77)",
       "popup_text": "rgb(251,251,254)",
       "popup_border": "rgb(82,82,94)",
       "popup_highlight": "rgb(43,42,51)",
       "tab_line": "transparent",
       "toolbar": "rgb(43,42,51)",
       "toolbar_top_separator": "transparent",
--- a/browser/themes/addons/light/manifest.json
+++ b/browser/themes/addons/light/manifest.json
@@ -14,17 +14,17 @@
 
   "icons": {"32": "icon.svg"},
 
   "theme": {
     "colors": {
       "tab_background_text": "rgb(21,20,26)",
       "tab_selected": "#fff",
       "tab_text": "rgb(21,20,26)",
-      "icons": "rgb(24, 25, 26, 0.7)",
+      "icons": "rgb(91,91,102)",
       "frame": "#f0f0f4",
       "popup": "#fff",
       "popup_text": "rgb(21,20,26)",
       "popup_border": "transparent",
       "popup_highlight": "#e0e0e6",
       "popup_highlight_text": "#15141a",
       "tab_line": "rgba(128,128,142,0.9)",
       "toolbar": "#f9f9fb",
--- a/browser/themes/shared/browser-custom-colors.inc.css
+++ b/browser/themes/shared/browser-custom-colors.inc.css
@@ -40,16 +40,17 @@
     --input-bgcolor: rgb(255,255,255);
     --input-border-color: rgb(143,143,157);
     --input-error-border-color: #E22850;
 
     --tab-line-color: rgba(128,128,142,0.9);
     --tab-selected-bgcolor: rgb(255,255,255);
     --tabs-border-color: transparent;
     --toolbar-color: rgb(21,20,26);
+    --toolbarbutton-icon-fill: rgb(91,91,102);
 
     --urlbar-popup-action-color: rgb(21,20,26);
     --urlbar-popup-url-color: rgb(0,97,224);
 
     --autocomplete-popup-separator-color: rgb(240,240,244);
     --toolbar-field-border-color: transparent;
     --arrowpanel-border-color: transparent;
 
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -1012,17 +1012,17 @@
   display: block;
 }
 } /*** END !proton ***/
 
 /* Tab bar scroll arrows */
 
 #tabbrowser-arrowscrollbox::part(scrollbutton-up),
 #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
-  fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
+  fill: var(--toolbarbutton-icon-fill);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 /* New tab button */
 
 #tabs-newtab-button,
 #TabsToolbar #new-tab-button {
   list-style-image: url(chrome://global/skin/icons/add.svg);
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -25,17 +25,17 @@ toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 } /** END !proton **/
 
 .toolbarbutton-animatable-box,
 .toolbarbutton-1 {
   color: inherit !important;
   -moz-context-properties: fill, fill-opacity;
-  fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
+  fill: var(--toolbarbutton-icon-fill);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 .toolbarbutton-animatable-box {
   display: block;
   position: absolute;
   overflow: hidden;
   z-index: 2;
@@ -395,17 +395,17 @@ toolbar[brighttext] #panic-button[open] 
 }
 
 #library-button {
   list-style-image: url("chrome://browser/skin/library.svg");
 }
 
 #save-to-pocket-button {
   list-style-image: url("chrome://browser/skin/pocket-outline.svg");
-  fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
+  fill: var(--toolbarbutton-icon-fill);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 #save-to-pocket-button[open="true"],
 #save-to-pocket-button[pocketed="true"] {
   list-style-image: url("chrome://global/skin/icons/pocket.svg");
   fill: #ef4056;
 }
@@ -415,17 +415,17 @@ toolbar[brighttext] #panic-button[open] 
 .bookmark-item {
   list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 toolbarbutton.bookmark-item {
   -moz-context-properties: fill, fill-opacity;
-  fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
+  fill: var(--toolbarbutton-icon-fill);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 .bookmark-item[container] {
   list-style-image: url("chrome://browser/skin/places/folder.svg");
 }
 
 .bookmark-item[container][query] {
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -198,17 +198,17 @@
 }
 
 #urlbar.searchButton > #urlbar-input-container > #urlbar-search-button {
   width: @urlbarSearchButtonWidth@;
   background-image: url(chrome://global/skin/icons/search-glass.svg);
   background-repeat: no-repeat;
   background-position: center;
   -moz-context-properties: fill, fill-opacity;
-  fill: var(--lwt-toolbarbutton-icon-fill, var(--toolbar-color));
+  fill: var(--toolbarbutton-icon-fill);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 #urlbar.searchButton > #urlbar-input-container[pageproxystate="invalid"] > #urlbar-search-button {
   margin-inline-end: 6px;
 }
 
 /**
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -67,17 +67,17 @@
             border-top: 1px solid -moz-accent-color;
           }
           :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
           :root[tabsintitlebar]:not(:-moz-window-inactive)[lwt-default-theme-in-dark-mode] {
             background-color: -moz-accent-color;
             color: -moz-accent-color-foreground;
           }
           :root[tabsintitlebar][lwt-default-theme-in-dark-mode] #titlebar {
-            --lwt-toolbarbutton-icon-fill: currentColor;
+            --toolbarbutton-icon-fill: currentColor;
             --toolbarbutton-icon-fill-opacity: .7;
           }
         }
         } /*** end !proton ***/
 
         @media (-moz-proton) {
         @media (-moz-windows-accent-color-in-titlebar) {
           :root[sizemode=normal][tabsintitlebar] {
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -28,17 +28,17 @@
 
 @media (-moz-proton) {
 /* Add a fog for background tabs to be visible on Windows 7 glass window background */
 @media (-moz-os-version: windows-win7) {
   @media (-moz-windows-default-theme) {
     #TabsToolbar {
       background-image: radial-gradient(ellipse at bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 80%, transparent);
       color: black;
-      --lwt-toolbarbutton-icon-fill: currentColor;
+      --toolbarbutton-icon-fill: currentColor;
     }
   }
 }
 } /*** END proton ***/
 
 @media not (-moz-proton) {
 @media (-moz-os-version: windows-win7) {
   @media (-moz-windows-default-theme) {
@@ -58,17 +58,17 @@
   }
 }
 } /*** END !proton ***/
 
 @media (-moz-windows-glass) {
   @media not (-moz-proton) {
   /* Use opaque white icons on Aero Glass. */
   #TabsToolbar {
-    --lwt-toolbarbutton-icon-fill: white;
+    --toolbarbutton-icon-fill: white;
   }
   } /*** END !proton ***/
 
   /* Make the menubar text readable on aero glass (copied from browser-aero.css). */
   #toolbar-menubar {
     text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
   }
 
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_icons.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbarbutton_icons.js
@@ -83,21 +83,16 @@ add_task(async function test_no_icons_pr
       "image1.png": BACKGROUND,
     },
   });
 
   await extension.startup();
 
   let toolbarbutton = document.querySelector("#home-button");
   let toolbarbuttonCS = window.getComputedStyle(toolbarbutton);
-  Assert.equal(
-    toolbarbuttonCS.getPropertyValue("--lwt-toolbarbutton-icon-fill"),
-    "",
-    "Icon fill should not be set when the value is not specified in the manifest."
-  );
   let currentColor = toolbarbuttonCS.getPropertyValue("color");
   Assert.equal(
     window.getComputedStyle(toolbarbutton).getPropertyValue("fill"),
     currentColor,
     "Button fill color should be currentColor when no icon color specified."
   );
 
   let starButton = document.querySelector("#star-button");
--- a/toolkit/components/printing/content/printPagination.css
+++ b/toolkit/components/printing/content/printPagination.css
@@ -63,17 +63,17 @@
   width: 16px;
   height: 16px;
   vertical-align: text-bottom;
   text-align: center;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 12px;
   -moz-context-properties: fill, fill-opacity;
-  fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
+  fill: var(--toolbarbutton-icon-fill);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 .toolbarButton:hover {
   background-color: var(--toolbarbutton-hover-background);
 }
 .toolbarButton:hover:active {
   background-color: var(--toolbarbutton-active-background);
--- a/toolkit/mozapps/extensions/default-theme/manifest.json
+++ b/toolkit/mozapps/extensions/default-theme/manifest.json
@@ -17,17 +17,17 @@
   "theme": {
   },
 
   "dark_theme": {
     "colors": {
       "tab_background_text": "#fbfbfe",
       "tab_selected": "rgb(66,65,77)",
       "tab_text": "rgb(251,251,254)",
-      "icons": "rgb(249, 249, 250, 0.7)",
+      "icons": "rgb(251,251,254)",
       "frame": "#1c1b22",
       "popup": "rgb(66,65,77)",
       "popup_text": "rgb(251,251,254)",
       "popup_border": "rgb(82,82,94)",
       "popup_highlight": "rgb(43,42,51)",
       "tab_line": "transparent",
       "toolbar": "#2b2a33",
       "toolbar_top_separator": "transparent",
--- a/toolkit/themes/shared/global.inc.css
+++ b/toolkit/themes/shared/global.inc.css
@@ -25,16 +25,17 @@
   --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent);
   --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent);
   --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 35%, transparent);
 
   --panel-description-color: GrayText;
   --panel-disabled-color: GrayText;
 
   --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
+  --toolbarbutton-icon-fill: currentColor;
 }
 
 @media not (-moz-proton-doorhangers) {
 :root {
   --popup-notification-body-width: 25em;
 }
 } /** END not Proton **/