Bug 1707949 - Update Urlbar icon opacity to match toolbar icon colors. r=mak,desktop-theme-reviewers,dao
authorHarry Twyford <htwyford@mozilla.com>
Thu, 29 Apr 2021 19:13:35 +0000
changeset 578053 eff327b57d72c6a57a3d0b7760a27181c5459151
parent 578052 91d2ab692f2ae5c5ff8af2138c60dcda526f9c68
child 578054 f823b4ba2375a5285c9f9f18cc270c5ee2d56599
push id142229
push userhtwyford@mozilla.com
push dateThu, 29 Apr 2021 19:15:57 +0000
treeherderautoland@eff327b57d72 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak, desktop-theme-reviewers, dao
bugs1707949
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 1707949 - Update Urlbar icon opacity to match toolbar icon colors. r=mak,desktop-theme-reviewers,dao Differential Revision: https://phabricator.services.mozilla.com/D113590
browser/themes/addons/dark/manifest.json
browser/themes/addons/light/manifest.json
browser/themes/shared/browser-custom-colors.inc.css
browser/themes/shared/browser.inc.css
browser/themes/shared/urlbarView.inc.css
toolkit/mozapps/extensions/default-theme/manifest.json
--- a/browser/themes/addons/dark/manifest.json
+++ b/browser/themes/addons/dark/manifest.json
@@ -63,17 +63,18 @@
       "autocomplete_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_warning_icon_color": "#FFBD4F",
       "appmenu_info_icon_color": "#80EBFF"
     },
     "properties": {
       "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
       "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
-      "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)"
+      "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)",
+      "toolbar_field_icon_opacity": "1"
     }
   },
 
   "theme_experiment": {
     "stylesheet": "experiment.css",
     "colors": {
       "button": "--button-bgcolor",
       "button_hover": "--button-hover-bgcolor",
@@ -99,12 +100,13 @@
       "zoom_controls": "--zoom-controls-bgcolor",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_warning_icon_color": "--panel-banner-item-warning-icon-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor"
     },
     "properties": {
       "panel_hover": "--arrowpanel-dimmed",
       "panel_active": "--arrowpanel-dimmed-further",
-      "panel_active_darker": "--arrowpanel-dimmed-even-further"
+      "panel_active_darker": "--arrowpanel-dimmed-even-further",
+      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity"
     }
   }
 }
--- a/browser/themes/addons/light/manifest.json
+++ b/browser/themes/addons/light/manifest.json
@@ -58,17 +58,18 @@
       "autocomplete_popup_separator": "rgb(240,240,244)",
       "appmenu_update_icon_color": "#2AC3A2",
       "appmenu_warning_icon_color": "#FFA436",
       "appmenu_info_icon_color": "#0090ED"
     },
     "properties": {
       "panel_hover": "color-mix(in srgb, currentColor 12%, transparent)",
       "panel_active": "color-mix(in srgb, currentColor 20%, transparent)",
-      "panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)"
+      "panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)",
+      "toolbar_field_icon_opacity": "0.72"
     }
   },
 
   "theme_experiment": {
     "stylesheet": "experiment.css",
     "colors": {
       "popup_action_color": "--urlbar-popup-action-color",
       "button": "--button-bgcolor",
@@ -91,12 +92,13 @@
       "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_warning_icon_color": "--panel-banner-item-warning-icon-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor"
     },
     "properties": {
       "panel_hover": "--arrowpanel-dimmed",
       "panel_active": "-arrowpanel-dimmed-further",
-      "panel_active_darker": "--arrowpanel-dimmed-even-further"
+      "panel_active_darker": "--arrowpanel-dimmed-even-further",
+      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity"
     }
   }
 }
--- a/browser/themes/shared/browser-custom-colors.inc.css
+++ b/browser/themes/shared/browser-custom-colors.inc.css
@@ -46,16 +46,17 @@
     --tabs-border-color: transparent;
     --toolbar-color: rgb(21,20,26);
     --toolbar-non-lwt-bgcolor: #f9f9fb;
     --toolbar-non-lwt-textcolor: rgb(21, 20, 26);
     --toolbarbutton-icon-fill: rgb(91,91,102);
 
     --urlbar-popup-action-color: rgb(91,91,102);
     --urlbar-popup-url-color: rgb(0,97,224);
+    --urlbar-icon-fill-opacity: 0.72;
 
     --autocomplete-popup-separator-color: rgb(240,240,244);
     --toolbar-field-border-color: transparent;
     --arrowpanel-border-color: rgb(240,240,244);
     --chrome-content-separator-color: rgb(204,204,204);
 
     --toolbar-field-non-lwt-bgcolor: rgb(240,240,244);
     --toolbar-field-non-lwt-color: rgb(21,20,26);
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -35,29 +35,30 @@
   --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent);
 
   --identity-box-margin-inline: 4px;
   --identity-box-label-opacity: .8;
   --urlbar-box-bgcolor: var(--button-bgcolor);
   --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
   --urlbar-box-active-bgcolor: var(--button-active-bgcolor);
   --urlbar-min-height: 32px;
-  --urlbar-icon-fill-opacity: 1;
+  --urlbar-icon-fill-opacity: 0.9;
   --urlbar-icon-padding: 6px; /* (32px - 2px border - 2px padding - 16px icon) / 2 */
   --urlbar-popup-url-color: -moz-nativehyperlinktext;
 
   --lwt-additional-images: none;
   --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
   --lwt-popup-brighttext-url-color: #74c0ff;
 }
 
 @media (prefers-contrast) {
   :root {
     --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 86%, transparent);
+    --urlbar-icon-fill-opacity: 1;
   }
 }
 
 @media not (-moz-proton) {
   :root {
     --focus-outline-width: 0;
     --identity-box-margin-inline: 3px;
     --identity-box-label-opacity: .6;
--- a/browser/themes/shared/urlbarView.inc.css
+++ b/browser/themes/shared/urlbarView.inc.css
@@ -769,27 +769,27 @@
   fill: rgb(0,97,224);
   fill-opacity: 1;
   -moz-context-properties: fill, fill-opacity;
 }
 
 .urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
 #urlbar-engine-one-off-item-tabs {
   list-style-image: url("chrome://browser/skin/tab.svg");
+  -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
-  fill-opacity: .9;
-  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
 }
 
 .urlbarView-row[source="history"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
 #urlbar-engine-one-off-item-history {
   list-style-image: url("chrome://browser/skin/history.svg");
+  -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
-  fill-opacity: .9;
-  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: var(--urlbar-icon-fill-opacity);
 }
 
 :root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[source="bookmarks"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
 :root[lwt-toolbar-field-focus-brighttext] #urlbar-engine-one-off-item-bookmarks:not([selected]) {
   fill: rgb(0,221,255);
 }
 
 .urlbarView-row[source="bookmarks"][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
--- a/toolkit/mozapps/extensions/default-theme/manifest.json
+++ b/toolkit/mozapps/extensions/default-theme/manifest.json
@@ -66,17 +66,18 @@
       "autocomplete_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_warning_icon_color": "#FFBD4F",
       "appmenu_info_icon_color": "#80EBFF"
     },
     "properties": {
       "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
       "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
-      "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)"
+      "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)",
+      "toolbar_field_icon_opacity": "1"
     }
   },
 
   "theme_experiment": {
     "colors": {
       "button": "--button-bgcolor",
       "button_hover": "--button-hover-bgcolor",
       "button_active": "--button-active-bgcolor",
@@ -101,12 +102,13 @@
       "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_warning_icon_color": "--panel-banner-item-warning-icon-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor"
     },
     "properties": {
       "panel_hover": "--arrowpanel-dimmed",
       "panel_active": "--arrowpanel-dimmed-further",
-      "panel_active_darker": "--arrowpanel-dimmed-even-further"
+      "panel_active_darker": "--arrowpanel-dimmed-even-further",
+      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity"
     }
   }
 }