Bug 1696202 - Refactor close-icon.css to use color-mix(). r=preferences-reviewers,jaws

Differential Revision: https://phabricator.services.mozilla.com/D107081
2025-02-27 12:50:09 +00:00 · 2021-03-04 02:51:00 +00:00 · 2021-03-04 02:51:00 +00:00 · 629bf23c06
commit 629bf23c06
parent f93ec2b2b0
14 changed files with 39 additions and 47 deletions
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@ -52,7 +52,7 @@
      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/confirmation-dialog.css">
      <div class="overlay">
        <div class="container" role="dialog" aria-labelledby="title" aria-describedby="message">
-          <button class="dismiss-button" data-l10n-id="confirmation-dialog-dismiss-button">
+          <button class="dismiss-button ghost-button" data-l10n-id="confirmation-dialog-dismiss-button">
            <img class="dismiss-icon" src="chrome://global/skin/icons/close.svg"/>
          </button>
          <div class="content">
@ -139,7 +139,7 @@
      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/remove-logins-dialog.css">
      <div class="overlay">
      <div class="container" role="dialog" aria-labelledby="title" aria-describedby="message">
-        <button class="dismiss-button" data-l10n-id="confirmation-dialog-dismiss-button">
+        <button class="dismiss-button ghost-button" data-l10n-id="confirmation-dialog-dismiss-button">
          <img class="dismiss-icon" src="chrome://global/skin/icons/close.svg" draggable="false"/>
        </button>
        <div class="content">
--- a/browser/components/aboutlogins/content/components/confirmation-dialog.css
+++ b/browser/components/aboutlogins/content/components/confirmation-dialog.css
@ -52,9 +52,8 @@
 }

 .dismiss-icon {
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
  fill: currentColor;
-  fill-opacity: 0;
 }

 .warning-icon {
--- a/browser/components/aboutlogins/content/components/remove-logins-dialog.css
+++ b/browser/components/aboutlogins/content/components/remove-logins-dialog.css
@ -69,9 +69,8 @@
 }

 .dismiss-icon {
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
  fill: currentColor;
-  fill-opacity: 0;
 }

 .warning-icon {
--- a/browser/themes/shared/preferences/preferences.inc.css
+++ b/browser/themes/shared/preferences/preferences.inc.css
@ -288,11 +288,9 @@ button > hbox > label {
 }

 .extension-controlled-disabled {
-  -moz-context-properties: fill, fill-opacity, stroke-opacity;
+  -moz-context-properties: fill;
  color: GrayText;
  fill: currentColor;
-  fill-opacity: 1;
-  stroke-opacity: 1;
 }

 .extension-controlled-disabled > .extension-controlled-button {
@ -598,7 +596,7 @@ button > hbox > label {

 .close-icon {
  border: none;
-  background: none !important;
+  background-color: transparent; /* override common.css, but keep hover/active states */
  min-width: 0;
  min-height: auto;
  padding-inline: 0;
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@ -249,10 +249,9 @@ p {
 }

 .search-banner-close-image {
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
  fill: currentColor;
-  fill-opacity: 0;
-  width: 28px;
+  width: 22px;
 }

 #private-browsing-vpn-link {
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@ -16,7 +16,7 @@
  --proton-shadow-blur-radius: 6px;
  --proton-tab-block-margin: 4px;
  --proton-tab-inline-padding: 2px;
-  --inline-tab-padding: 12.5px;
+  --inline-tab-padding: 8px;
 }
 } /*** END proton ***/

@ -458,8 +458,8 @@
 }

 .tab-close-button {
-  -moz-context-properties: fill, fill-opacity, stroke-opacity;
-  stroke-opacity: var(--toolbarbutton-icon-fill-opacity);
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
 }

@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
@ -475,19 +475,20 @@

@supports -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-close-button {
-  margin-inline-end: 0;
-  width: 16px;
-}
-
-:root[uidensity=touch] .tab-close-button {
-  width: 20px;
+  margin-inline: 8px calc(var(--inline-tab-padding) / -2);
+  width: 24px;
+  height: 24px;
+  padding: 5px;
+  border-radius: var(--proton-tab-radius);
 }
 } /*** END proton ***/

@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 :root[uidensity=touch] .tab-close-button {
-  margin-inline-end: calc(-1 * var(--inline-tab-padding));
-  padding: 10px calc(var(--inline-tab-padding) - 2px);
+  margin-inline-end: calc(var(--inline-tab-padding) / -2);
+  width: 24px;
+  height: 24px;
+  padding: 4px;
 }
 } /*** END !proton ***/

--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@ -414,13 +414,12 @@
 #urlbar-search-mode-indicator-close {
  display: none;
  background: url(chrome://global/skin/icons/close.svg) no-repeat center;
-  background-size: 100% 16px;
+  background-size: 14px 14px;
  width: 16px;
  height: 100%;
  margin-inline-start: -16px;
-  -moz-context-properties: fill, fill-opacity, stroke-opacity;
-  fill-opacity: 0;
-  stroke-opacity: 0.6;
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0.6;
  /* fill and background-color should match the urlbar focused color and
     background. */
  fill: FieldText;
@ -436,7 +435,7 @@

@media (prefers-contrast) {
  #urlbar-search-mode-indicator-close {
-    stroke-opacity: 1.0;
+    fill-opacity: 1.0;
  }
 }

--- a/toolkit/components/aboutperformance/content/aboutPerformance.css
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.css
@ -96,9 +96,8 @@ tr:is([selected], :hover) > td > .action-icon {

 /* icons */
 .action-icon::after {
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
  fill: currentColor;
-  fill-opacity: 0;
  background-repeat: no-repeat;
  background-position: center;
  line-height: 100%;
--- a/toolkit/components/aboutprocesses/content/aboutProcesses.css
+++ b/toolkit/components/aboutprocesses/content/aboutProcesses.css
@ -193,8 +193,7 @@ td.type:dir(rtl), td.favicon:dir(rtl) {
 .close-icon {
  background: url("chrome://global/skin/icons/close.svg") no-repeat center;
  opacity: 0;      /* Start out as transparent */
-  fill-opacity: 0; /* Make SVG background transparent */
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
  fill: currentColor;
 }

--- a/toolkit/mozapps/extensions/content/abuse-report-panel.css
+++ b/toolkit/mozapps/extensions/content/abuse-report-panel.css
@ -72,10 +72,9 @@ html {

 button.abuse-report-close-icon {
  background: var(--close-icon-url) no-repeat center center;
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
  color: inherit !important;
  fill: currentColor;
-  fill-opacity: 0;
  min-width: auto;
  min-height: auto;
  width: var(--close-icon-size);
--- a/toolkit/mozapps/extensions/content/message-bar.css
+++ b/toolkit/mozapps/extensions/content/message-bar.css
@ -130,9 +130,8 @@
  background-image: var(--close-icon-url);
  background-repeat: no-repeat;
  background-position: center center;
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
  fill: currentColor;
-  fill-opacity: 0;
  min-width: auto;
  min-height: auto;
  width: var(--close-icon-size);
--- a/toolkit/themes/shared/close-icon.css
+++ b/toolkit/themes/shared/close-icon.css
@ -6,24 +6,26 @@
  appearance: none;
  -moz-context-properties: fill, fill-opacity;
  list-style-image: url(chrome://global/skin/icons/close.svg);
+  border-radius: 2px;
  color: inherit !important;
  fill: currentColor;
-  fill-opacity: 0;
+  padding: 2px;
+  width: 20px;
+  height: 20px;
 }

 .close-icon:hover {
-  fill-opacity: 0.1;
+  background-color: color-mix(in srgb, transparent 10%, currentColor);
 }

 .close-icon:hover:active {
-  fill-opacity: 0.2;
+  background-color: color-mix(in srgb, transparent 20%, currentColor);
 }

 .close-icon > .button-icon,
 .close-icon > .button-box > .button-icon,
 .close-icon > .toolbarbutton-icon {
-  width: 20px;
-  height: 20px;
+  margin: 0;
 }

 .close-icon > .button-box > .button-text,
--- a/toolkit/themes/shared/icons/close.svg
+++ b/toolkit/themes/shared/icons/close.svg
@ -1,7 +1,6 @@
 <!-- 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 xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-  <rect fill="context-fill" fill-opacity="context-fill-opacity" width="20" height="20" rx="2" ry="2"/>
-  <path fill="context-fill" fill-opacity="context-stroke-opacity" d="M11.06 10l3.47-3.47a.75.75 0 0 0-1.06-1.06L10 8.94 6.53 5.47a.75.75 0 1 0-1.06 1.06L8.94 10l-3.47 3.47a.75.75 0 1 0 1.06 1.06L10 11.06l3.47 3.47a.75.75 0 0 0 1.06-1.06z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M9.06 8l3.47-3.47a.75.75 0 00-1.06-1.06L8 6.94 4.53 3.47a.75.75 0 10-1.06 1.06L6.94 8l-3.47 3.47a.75.75 0 101.06 1.06L8 9.06l3.47 3.47a.75.75 0 001.06-1.06z"/>
 </svg>
--- a/toolkit/themes/shared/notification.css
+++ b/toolkit/themes/shared/notification.css
@ -71,11 +71,11 @@ notification[type="critical"] {
 }

 notification[type="critical"] > .close-icon:hover {
-  fill-opacity: .2;
+  background-color: color-mix(in srgb, transparent 20%, currentColor);
 }

 notification[type="critical"] > .close-icon:hover:active {
-  fill-opacity: .3;
+  background-color: color-mix(in srgb, transparent 30%, currentColor);
 }

 .messageText {