Bug 1707949 - Update Urlbar icon opacity to match toolbar icon colors. r=mak,desktop-theme-reviewers,dao a=pascalc
authorHarry Twyford <htwyford@mozilla.com>
Thu, 29 Apr 2021 19:13:35 +0000
changeset 644286 43173780c5bd6a453fadb3b2ad6a1939e03ab0ba
parent 644285 816b065c7eb5c2f6825d2421944fc3cd4d461266
child 644287 ea3880fa6d824f0b33f9fb861f6607c9f30058ee
push id15378
push userpchevrel@mozilla.com
push dateFri, 30 Apr 2021 18:41:58 +0000
treeherdermozilla-beta@a1071973e1ac [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak, desktop-theme-reviewers, dao, pascalc
bugs1707949
milestone89.0
Bug 1707949 - Update Urlbar icon opacity to match toolbar icon colors. r=mak,desktop-theme-reviewers,dao a=pascalc 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"
     }
   }
 }