From f6a209eafb9d7247530694b8593f44c1785d170c Mon Sep 17 00:00:00 2001
From: Jared Wein <jwein@mozilla.com>
Date: Thu, 30 Mar 2023 10:03:50 +0000
Subject: [PATCH] Bug 1710910 - Reduce the size of the close icon for infobars
and use the correct smaller close icon for tabs
r=mstriemer,desktop-theme-reviewers,dao
* Original author was jaws, prathikshaprasadsuman got it reviewed and landed
* Update to non-hovered .tab-close-button width to avoid regressing bug 1818233 again.
Differential Revision: https://phabricator.services.mozilla.com/D115006
---
browser/themes/shared/tabs.css | 5 +++--
toolkit/content/widgets/message-bar.css | 6 +++---
toolkit/themes/shared/desktop-jar.inc.mn | 1 +
toolkit/themes/shared/icons/close-12.svg | 6 ++++++
4 files changed, 13 insertions(+), 5 deletions(-)
create mode 100644 toolkit/themes/shared/icons/close-12.svg
diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css
index 3a131204678bd..ce68cde3321ed 100644
--- a/browser/themes/shared/tabs.css
+++ b/browser/themes/shared/tabs.css
@@ -452,14 +452,15 @@
margin-inline-end: calc(var(--inline-tab-padding) / -2);
width: 24px;
height: 24px;
- padding: 7px;
+ padding: 6px;
border-radius: var(--tab-border-radius);
+ list-style-image: url(chrome://global/skin/icons/close-12.svg);
}
/* The following rulesets allow showing more of the tab title */
.tabbrowser-tab:not([labelendaligned],:hover) > .tab-stack > .tab-content > .tab-close-button {
padding-inline-start: 0;
- width: 17px;
+ width: 18px;
}
.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover,
diff --git a/toolkit/content/widgets/message-bar.css b/toolkit/content/widgets/message-bar.css
index 0de6d5a9e6059..56cb012730ced 100644
--- a/toolkit/content/widgets/message-bar.css
+++ b/toolkit/content/widgets/message-bar.css
@@ -7,9 +7,9 @@
--warn-icon-url: url("chrome://global/skin/icons/warning.svg");
--success-icon-url: url("chrome://global/skin/icons/check.svg");
--error-icon-url: url("chrome://global/skin/icons/error.svg");
- --close-icon-url: url("chrome://global/skin/icons/close.svg");
+ --close-icon-url: url("chrome://global/skin/icons/close-12.svg");
--icon-size: 16px;
- --close-icon-size: 32px;
+ --close-icon-size: 24px;
}
:host([message-bar-type=infobar]) {
@@ -226,7 +226,7 @@
.close {
margin: 4px 8px;
- background-size: 16px;
+ background-size: 12px;
}
.notification-button {
diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn
index d752cae13dc60..c2e92a57db333 100644
--- a/toolkit/themes/shared/desktop-jar.inc.mn
+++ b/toolkit/themes/shared/desktop-jar.inc.mn
@@ -62,6 +62,7 @@
skin/classic/global/icons/check-partial.svg (../../shared/icons/check-partial.svg)
skin/classic/global/icons/chevron.svg (../../shared/icons/chevron.svg)
skin/classic/global/icons/close.svg (../../shared/icons/close.svg)
+ skin/classic/global/icons/close-12.svg (../../shared/icons/close-12.svg)
skin/classic/global/icons/close-fill.svg (../../shared/icons/close-fill.svg)
skin/classic/global/icons/columnpicker.svg (../../shared/icons/columnpicker.svg)
skin/classic/global/icons/defaultFavicon.svg (../../shared/icons/defaultFavicon.svg)
diff --git a/toolkit/themes/shared/icons/close-12.svg b/toolkit/themes/shared/icons/close-12.svg
new file mode 100644
index 0000000000000..9df6bee3b6105
--- /dev/null
+++ b/toolkit/themes/shared/icons/close-12.svg
@@ -0,0 +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" viewBox="0 0 12 12" width="12" height="12" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M5.859 6.849 2.854 9.854a.5.5 0 0 1-.707-.707l3.005-3.005 0-.283-3.005-3.006a.5.5 0 0 1 .707-.707l3.005 3.005.283 0 3.005-3.005a.5.5 0 0 1 .707.707L6.849 5.859l0 .283 3.005 3.005a.5.5 0 0 1-.707.707L6.142 6.849l.001.001-.284-.001z"/>
+</svg>
--
GitLab