From 258205bba5eba57898fce512bcc99835bc71977e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= Date: Mon, 23 Oct 2023 16:01:46 +0000 Subject: [PATCH] Bug 1860385 - Clean up menulist styling. r=desktop-theme-reviewers,dao * Rather than inheriting the native attribute, use :host([native]). * Remove unused background-color from native rules (background doesn't show because of native appearance). * Remove unnecessary !important. * Refactor high contrast backgrounds on Windows to avoid !important. * Make high contrast on windows not alter sizing. * Remove default namespaces. This sheet applies in a shadow tree, so there's no random stuff. Depends on D191561 Differential Revision: https://phabricator.services.mozilla.com/D191562 --- toolkit/content/widgets/menulist.js | 10 ++-- toolkit/themes/linux/global/menulist.css | 27 ++--------- toolkit/themes/osx/global/menulist.css | 32 ++----------- toolkit/themes/shared/menulist-shared.css | 49 ++++++++++++-------- toolkit/themes/windows/global/menulist.css | 54 ++++++---------------- 5 files changed, 54 insertions(+), 118 deletions(-) diff --git a/toolkit/content/widgets/menulist.js b/toolkit/content/widgets/menulist.js index 81f0969d359c..efe12263e75e 100644 --- a/toolkit/content/widgets/menulist.js +++ b/toolkit/content/widgets/menulist.js @@ -87,12 +87,10 @@ static get inheritedAttributes() { return { - "#label-box": "native", - image: "src=image,native", - "#label": "value=label,crop,accesskey,highlightable,native", - "#highlightable-label": - "text=label,crop,accesskey,highlightable,native", - dropmarker: "disabled,open,native", + image: "src=image", + "#label": "value=label,crop,accesskey", + "#highlightable-label": "text=label,crop,accesskey", + dropmarker: "disabled,open", }; } diff --git a/toolkit/themes/linux/global/menulist.css b/toolkit/themes/linux/global/menulist.css index 00b6ea66853b..5c520292002c 100644 --- a/toolkit/themes/linux/global/menulist.css +++ b/toolkit/themes/linux/global/menulist.css @@ -4,19 +4,10 @@ @import url("chrome://global/skin/menulist-shared.css"); -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -label { - margin: 1px 3px; -} - -:host([native]) { - appearance: auto; - -moz-default-appearance: menulist; +:host([native]) { margin: 2px 4px; color: -moz-DialogText; font: menu; - text-shadow: none; } :host([native]:not([disabled="true"]):hover) { @@ -28,20 +19,10 @@ label { color: -moz-buttonactivetext; } -:host([native][disabled="true"]) { - color: GrayText; +:host([native]) label { + margin: 1px 3px; } -/* Label box */ - -#label-box[native] { - align-items: center; - justify-content: center; - color: inherit; -} - -/* Dropmarker */ - -dropmarker[native] { +:host([native]) dropmarker { display: none; } diff --git a/toolkit/themes/osx/global/menulist.css b/toolkit/themes/osx/global/menulist.css index 86d35a62ce41..86c4f9deee2a 100644 --- a/toolkit/themes/osx/global/menulist.css +++ b/toolkit/themes/osx/global/menulist.css @@ -4,44 +4,20 @@ @import url("chrome://global/skin/menulist-shared.css"); -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -label:not([native]) { - margin: 0 3px; -} - :host([native]) { - appearance: auto; - -moz-default-appearance: menulist; margin: 5px 2px 3px; min-height: 20px; color: -moz-DialogText; - text-shadow: none; - padding: unset; } -:host([native][disabled="true"]) { - color: GrayText; -} - -:host([native][disabled="true"]) > dropmarker { - padding-inline-start: 7px !important; -} - -/* Label box */ - -#label-box[native] { - align-items: center; - justify-content: center; +:host([native]) #label-box { margin-bottom: 1px; } -label[native] { - margin: 1px 3px !important; +:host([native]) label { + margin: 1px 3px; } -/* Dropmarker */ - -dropmarker[native] { +:host([native]) dropmarker { display: none; } diff --git a/toolkit/themes/shared/menulist-shared.css b/toolkit/themes/shared/menulist-shared.css index b775b66cbf37..2fb36808bbcd 100644 --- a/toolkit/themes/shared/menulist-shared.css +++ b/toolkit/themes/shared/menulist-shared.css @@ -2,7 +2,15 @@ * 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/. */ -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +:host([native]) { + appearance: auto; + -moz-default-appearance: menulist; + text-shadow: none; +} + +:host([native][disabled="true"]) { + color: GrayText; +} :host(:not([native])) { appearance: none; @@ -40,32 +48,33 @@ #label-box { min-width: 0; pointer-events: none; -} - -#label-box:not([native]) { align-items: center; justify-content: center; - font-weight: 600; + + :host(:not([native])) & { + font-weight: 600; + } } dropmarker { pointer-events: none; + + :host(:not([native])) & { + display: flex; + appearance: none; + width: 12px; + height: 12px; + list-style-image: url(chrome://global/skin/icons/arrow-down.svg); + -moz-context-properties: fill; + fill: currentColor; + } } -dropmarker:not([native]) { - display: flex; - appearance: none; - width: 12px; - height: unset; -} - -dropmarker:not([native])::part(icon) { - list-style-image: url(chrome://global/skin/icons/arrow-down.svg); - -moz-context-properties: fill; - fill: currentColor; -} - -#highlightable-label:not([highlightable="true"]), -#label[highlightable="true"] { +:host(:not([highlightable])) #highlightable-label, +:host([highlightable]) #label { display: none; } + +label { + margin: 0 3px; +} diff --git a/toolkit/themes/windows/global/menulist.css b/toolkit/themes/windows/global/menulist.css index e3107f62e292..45b3864019aa 100644 --- a/toolkit/themes/windows/global/menulist.css +++ b/toolkit/themes/windows/global/menulist.css @@ -4,55 +4,27 @@ @import url("chrome://global/skin/menulist-shared.css"); -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -label { - margin: 0 3px; -} - :host([native]) { - appearance: auto; - -moz-default-appearance: menulist; margin: 2px 4px; color: FieldText; - text-shadow: none; } -:host([native][disabled="true"]) { - background-color: -moz-Dialog; - color: GrayText; +@media (prefers-contrast) { + :host([native]:not([open="true"]):focus) > #label-box { + background-color: SelectedItem; + color: SelectedItemText; + } } -/* Label box */ - -#label-box[native] { - align-items: center; - justify-content: center; -} - -:host([native]:not([open="true"]):focus) > #label-box { - background-color: SelectedItem; - color: SelectedItemText; -} - -:host([native]:not([open="true"]):-moz-focusring) > #label-box { +:host([native]:not([open="true"]):focus-visible) > #label-box { outline: var(--default-focusring); } - -@media not (prefers-contrast) { - #label-box[native] { - background-color: transparent !important; - color: inherit !important; - } - - image[native], - label[native] { - margin-block: -1px !important; - } - - dropmarker[native] { - margin-top: -2px; - margin-inline: 3px -3px; - } +:host([native]) :is(image, label) { + margin-block: -1px; +} + +:host([native]) dropmarker { + margin-top: -2px; + margin-inline: 3px -3px; }