Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-08 02:14:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1884792 - Remove chrome-only :-moz-lwtheme pseudo-class. r=desktop-theme-reviewers,dao

Browse Source 
Behavior is effectively :root[lwtheme="true"]. Use the attribute
selector instead.

Differential Revision: https://phabricator.services.mozilla.com/D204315
This commit is contained in:
Emilio Cobos Álvarez 2024-03-18 10:18:25 +00:00
parent 6bfd255000
commit f263e498ae
30 changed files with 199 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browser/base/content/browser.css
View File

@ -382,7 +382,7 @@ toolbarpaletteitem {
toolbar[brighttext] & {
list-style-image: var(--webextension-toolbar-image-light, inherit);
}
toolbar:not([brighttext]) &:-moz-lwtheme {
:root[lwtheme] toolbar:not([brighttext]) {
list-style-image: var(--webextension-toolbar-image-dark, inherit);
}
toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > & {

4
browser/themes/linux/browser.css
View File

@ -16,7 +16,7 @@
* disabling the toolbar field border and backgrounds.
*/
@media not (prefers-contrast) {
:root:not(:-moz-lwtheme) {
:root:not([lwtheme]) {
--toolbar-field-border-color: transparent;
/* These colors don't exactly match the default dark color that buttons and
@ -237,7 +237,7 @@
@media (-moz-bool-pref: "widget.gtk.non-native-titlebar-buttons.enabled") {
/* When using lightweight themes, use our own buttons since native ones might
* assume a native background in order to be visible. */
&:-moz-lwtheme {
:root[lwtheme] & {
padding-inline: 3px;
> .toolbarbutton-icon {

2
browser/themes/osx/browser.css
View File

@ -231,7 +231,7 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
text-shadow: inherit;
@media (prefers-color-scheme: light) {
&:not(:-moz-lwtheme) {
:root:not([lwtheme]) & {
/* overriding tabbox.css */
color: hsl(240, 5%, 5%);
}

82
browser/themes/shared/addons/unified-extensions.css
View File

@ -179,56 +179,52 @@ unified-extensions-item > .subviewbutton {
/* --- browser action CUI widget styles in the extensions panel --- */
@media (prefers-contrast) {
:root:not(:-moz-lwtheme) {
:root:not([lwtheme]) {
--uei-button-attention-dot-color: ButtonText;
}
.unified-extensions-item-action-button.subviewbutton:not([disabled], :-moz-lwtheme),
.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon:not(:-moz-lwtheme) {
border-color: currentColor;
background-color: ButtonFace;
color: ButtonText;
--uei-button-hover-bgcolor: SelectedItem;
--uei-button-hover-color: SelectedItemText;
--uei-button-active-bgcolor: ButtonFace;
--uei-button-active-color: ButtonText;
}
.unified-extensions-item-action-button.subviewbutton:not([disabled]),
.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
border-color: currentColor;
background-color: ButtonFace;
color: ButtonText;
--uei-button-hover-bgcolor: SelectedItem;
--uei-button-hover-color: SelectedItemText;
--uei-button-active-bgcolor: ButtonFace;
--uei-button-active-color: ButtonText;
}
.unified-extensions-item-action-button[disabled].subviewbutton:not(:-moz-lwtheme) {
background-color: Canvas;
color: GrayText !important; /* override panelUI-shared.css */
opacity: 1 !important; /* override panelUI-shared.css */
}
.unified-extensions-item-action-button[disabled].subviewbutton {
background-color: Canvas;
color: GrayText !important; /* override panelUI-shared.css */
opacity: 1 !important; /* override panelUI-shared.css */
}
.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:-moz-lwtheme) {
--uei-button-attention-dot-color: ButtonFace;
}
.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:active) {
--uei-button-attention-dot-color: ButtonFace;
}
.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:active:not(:-moz-lwtheme) {
--uei-button-attention-dot-color: ButtonText;
}
.unified-extensions-item-message {
color: inherit;
}
.unified-extensions-item-message:not(:-moz-lwtheme) {
color: inherit;
}
.unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled]),
.unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon {
background-color: var(--uei-button-hover-bgcolor);
color: var(--uei-button-hover-color);
border-color: var(--uei-button-hover-bgcolor);
}
.unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled], :-moz-lwtheme),
.unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon:not(:-moz-lwtheme) {
background-color: var(--uei-button-hover-bgcolor);
color: var(--uei-button-hover-color);
border-color: var(--uei-button-hover-bgcolor);
}
.unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled]),
.unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon {
background-color: var(--uei-button-active-bgcolor);
color: var(--uei-button-active-color);
border-color: var(--uei-button-active-color);
}
.unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled], :-moz-lwtheme),
.unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon:not(:-moz-lwtheme) {
background-color: var(--uei-button-active-bgcolor);
color: var(--uei-button-active-color);
border-color: var(--uei-button-active-color);
}
.unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon:not(:-moz-lwtheme) {
/* The border would otherwise overlap with the focus outline, causing an
* unsightly anti-aliasing artifact */
border-color: transparent;
.unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon {
/* The border would otherwise overlap with the focus outline, causing an
* unsightly anti-aliasing artifact */
border-color: transparent;
}
}
}

2
browser/themes/shared/browser-custom-colors.css
View File

@ -5,7 +5,7 @@
@namespace html url("http://www.w3.org/1999/xhtml");
@media not (prefers-contrast) {
:root:not(:-moz-lwtheme) {
:root:not([lwtheme]) {
--button-primary-bgcolor: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
--button-primary-hover-bgcolor: light-dark(rgb(2, 80, 187), rgb(128, 235, 255));
--button-primary-active-bgcolor: light-dark(rgb(5, 62, 148), rgb(170, 242, 255));

24
browser/themes/shared/browser-shared.css
View File

@ -104,7 +104,7 @@
--toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;
}
&:-moz-lwtheme {
&[lwtheme] {
color: var(--lwt-text-color);
--link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
@ -170,7 +170,7 @@
border-bottom-style: none;
}
&:-moz-lwtheme {
:root[lwtheme] & {
background-image: var(--lwt-additional-images);
background-repeat: var(--lwt-background-tiling);
background-position: var(--lwt-background-alignment);
@ -218,7 +218,7 @@
padding-inline-start: var(--toolbar-start-end-padding);
}
:root[sessionrestored] #nav-bar:-moz-lwtheme {
:root[sessionrestored][lwtheme] #nav-bar {
transition: var(--ext-theme-background-transition);
}
@ -480,22 +480,22 @@ menupopup::part(drop-indicator) {
color-scheme: var(--toolbar-color-scheme);
border-top-color: var(--chrome-content-separator-color, ThreeDShadow);
&:-moz-lwtheme {
:root[lwtheme] & {
background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
background-repeat: no-repeat, var(--lwt-background-tiling);
background-position: right bottom, var(--lwt-background-alignment);
background-position-y: bottom !important;
}
:root:not([lwtheme-image]) &:-moz-window-inactive {
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}
:root[lwtheme]:not([lwtheme-image]) &:-moz-window-inactive {
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}
:root[lwtheme-image] & {
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images);
background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
background-position: center, right bottom, var(--lwt-background-alignment);
}
:root[lwtheme-image] & {
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images);
background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
background-position: center, right bottom, var(--lwt-background-alignment);
}
}

20
browser/themes/shared/customizableui/customizeMode.css
View File

@ -24,18 +24,18 @@
background-color: var(--toolbar-non-lwt-bgcolor);
color: var(--toolbar-color);
color-scheme: var(--toolbar-color-scheme);
}
#customization-container:-moz-lwtheme {
/* Ensure this displays on top of the non-lwt bgcolor, to make sure it's not
* semi-transparent */
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
}
:root[lwtheme] & {
/* Ensure this displays on top of the non-lwt bgcolor, to make sure it's not
* semi-transparent */
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
}
:root[lwtheme-image] #customization-container {
background-image: none;
color: var(--toolbar-non-lwt-textcolor);
text-shadow: none;
:root[lwtheme-image] & {
background-image: none;
color: var(--toolbar-non-lwt-textcolor);
text-shadow: none;
}
}
:root[lwtheme-image] #customization-palette .toolbarbutton-1 {

2
browser/themes/shared/customizableui/panelUI-shared.css
View File

@ -33,7 +33,7 @@
--panel-and-palette-icon-size: 16px;
&:not(:-moz-lwtheme) {
&:not([lwtheme]) {
--panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
}

13
browser/themes/shared/downloads/progressmeter.css
View File

@ -8,12 +8,13 @@
--download-progress-fill-color: AccentColor;
--download-progress-paused-color: GrayText;
--download-progress-flare-color: rgba(255,255,255,0.75);
}
/* download progress bar is used in contexts which are not LightweightThemeConsumers and
do not get the lwt- theme variables. So we duplicate the fallbacks here. */
:root:-moz-lwtheme {
--download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255)));
&[lwtheme] {
/* download progress bar is used in contexts which are not LightweightThemeConsumers and
do not get the lwt- theme variables. So we duplicate the fallbacks here.
FIXME(emilio): But then how do we get the lwtheme attribute? I think the
above makes no sense */
--download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255)));
}
}
@media (prefers-color-scheme: dark) {

6
browser/themes/shared/tabs.css
View File

@ -19,7 +19,7 @@
--tab-block-margin: 4px;
--tab-attention-icon-color: AccentColor;
&:-moz-lwtheme {
&[lwtheme] {
--tab-attention-icon-color: light-dark(rgb(42, 195, 162), rgb(84, 255, 189));
}
@ -474,8 +474,8 @@
}
@media not (prefers-contrast) {
#TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon:-moz-lwtheme,
.tab-background[selected]:not([multiselected]):-moz-lwtheme {
:root[lwtheme] #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon,
:root[lwtheme] .tab-background[selected]:not([multiselected]) {
outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
outline-offset: -1px;
}

15
browser/themes/shared/toolbarbutton-icons.css
View File

@ -6,14 +6,13 @@
--toolbarbutton-icon-fill-attention: AccentColor;
--toolbarbutton-icon-fill-attention-text: AccentColorText;
--warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F);
}
:root:-moz-lwtheme {
--toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255)));
/* FIXME(emilio): This could have poor contrast on some themes, maybe use
* contrast-color() once that's available, or compute a new variable in
* LightWeightThemeConsumer */
--toolbarbutton-icon-fill-attention-text: var(--toolbar-field-background-color);
&[lwtheme] {
--toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255)));
/* FIXME(emilio): This could have poor contrast on some themes, maybe use
* contrast-color() once that's available, or compute a new variable in
* LightWeightThemeConsumer */
--toolbarbutton-icon-fill-attention-text: var(--toolbar-field-background-color);
}
}
.toolbarbutton-animatable-box,

22
browser/themes/shared/urlbar-searchbar.css
View File

@ -126,15 +126,17 @@
border-color: color-mix(in srgb, currentColor 20%, transparent);
}
#urlbar-input:-moz-lwtheme::selection,
.searchbar-textbox:-moz-lwtheme::selection {
background-color: var(--lwt-toolbar-field-highlight, Highlight);
color: var(--lwt-toolbar-field-highlight-text, HighlightText);
}
:root[lwtheme] {
#urlbar-input::selection,
.searchbar-textbox::selection {
background-color: var(--lwt-toolbar-field-highlight, Highlight);
color: var(--lwt-toolbar-field-highlight-text, HighlightText);
}
#urlbar-input:not(:focus):-moz-lwtheme::selection,
.searchbar-textbox:not(:focus-within):-moz-lwtheme::selection {
background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background);
#urlbar-input:not(:focus)::selection,
.searchbar-textbox:not(:focus-within)::selection {
background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background);
}
}
#urlbar:not([focused="true"]) {
@ -376,7 +378,7 @@
/* As above, but for the default theme in dark mode, which suffers from the same issue */
@media (prefers-color-scheme: dark) {
&:not(:-moz-lwtheme) {
:root:not([lwtheme]) & {
filter: grayscale(100%) brightness(20%) invert();
}
}
@ -791,7 +793,7 @@
margin: var(--arrowpanel-menuitem-margin);
width: auto;
& > #searchbar:-moz-lwtheme {
:root[lwtheme] & > #searchbar {
/* Theme authors usually only consider contrast against the toolbar when
picking a border color for the search bar. Since the search bar can be
dragged into the overflow panel, we need to show a high-contrast border

2
browser/themes/shared/urlbarView.css
View File

@ -56,7 +56,7 @@
--urlbarView-action-slide-in-distance: -200px;
}
&:-moz-lwtheme {
&[lwtheme] {
--urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
--urlbarView-highlight-background: light-dark(rgb(0, 99, 255), rgb(0, 99, 225));
--urlbarView-highlight-color: white;

12
browser/themes/windows/browser.css
View File

@ -35,7 +35,7 @@
--toolbox-non-lwt-bgcolor-inactive: InactiveCaption;
--toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;
#TabsToolbar:not(:-moz-lwtheme) {
&:not([lwtheme]) #TabsToolbar {
/* These colors match the Linux/HCM default button colors. We need to
* override these on the tabs toolbar because the accent color is
* arbitrary, so the hardcoded colors from browser-custom-colors might
@ -309,10 +309,12 @@
--urlbar-box-hover-text-color: SelectedItemText;
}
#urlbar:not(:-moz-lwtheme, [focused="true"]) > #urlbar-background,
#searchbar:not(:-moz-lwtheme, :focus-within),
.findbar-textbox:not(:-moz-lwtheme, :focus) {
border-color: ThreeDShadow;
:root:not([lwtheme]) {
#urlbar:not([focused="true"]) > #urlbar-background,
#searchbar:not(:focus-within),
.findbar-textbox:not(:focus) {
border-color: ThreeDShadow;
}
}
}

18
dom/base/Document.cpp
View File

@ -12537,14 +12537,6 @@ void Document::UpdateDocumentStates(DocumentState aMaybeChangedStates,
}
}
if (aMaybeChangedStates.HasAtLeastOneOfStates(DocumentState::LWTHEME)) {
if (ComputeDocumentLWTheme()) {
mState |= DocumentState::LWTHEME;
} else {
mState &= ~DocumentState::LWTHEME;
}
}
if (aMaybeChangedStates.HasState(DocumentState::WINDOW_INACTIVE)) {
BrowsingContext* bc = GetBrowsingContext();
if (!bc || !bc->GetIsActiveBrowserWindow()) {
@ -16558,16 +16550,6 @@ void Document::SetStateObject(nsIStructuredCloneContainer* scContainer) {
mCachedStateObjectValid = false;
}
bool Document::ComputeDocumentLWTheme() const {
if (!NodePrincipal()->IsSystemPrincipal()) {
return false;
}
Element* element = GetRootElement();
return element && element->AttrValueIs(kNameSpaceID_None, nsGkAtoms::lwtheme,
nsGkAtoms::_true, eCaseMatters);
}
already_AddRefed<Element> Document::CreateHTMLElement(nsAtom* aTag) {
RefPtr<mozilla::dom::NodeInfo> nodeInfo;
nodeInfo = mNodeInfoManager->GetNodeInfo(aTag, nullptr, kNameSpaceID_XHTML,

9
dom/base/Document.h
View File

@ -2992,15 +2992,6 @@ class Document : public nsINode,
SetStateObject(aDocument->mStateObjectContainer);
}
/**
* Returns true if there is a lightweight theme specified. This is used to
* determine the state of the :-moz-lwtheme pseudo-class.
*/
bool ComputeDocumentLWTheme() const;
void ResetDocumentLWTheme() {
UpdateDocumentStates(DocumentState::LWTHEME, true);
}
// Whether we're a media document or not.
enum class MediaDocumentKind {
NotMedia,

2
dom/base/rust/lib.rs
View File

@ -156,8 +156,6 @@ bitflags! {
const RTL_LOCALE = 1 << 1;
/// LTR locale: specific to the XUL localedir attribute
const LTR_LOCALE = 1 << 2;
/// LWTheme status
const LWTHEME = 1 << 3;
const ALL_LOCALEDIR_BITS = Self::LTR_LOCALE.bits() | Self::RTL_LOCALE.bits();
}

7
dom/xul/ChromeObserver.cpp
View File

@ -137,10 +137,6 @@ void ChromeObserver::AttributeChanged(dom::Element* aElement,
// if the localedir changed on the root element, reset the document
// direction
mDocument->ResetDocumentDirection();
} else if (aName == nsGkAtoms::lwtheme) {
// if the lwtheme changed, make sure to reset the document lwtheme
// cache
mDocument->ResetDocumentLWTheme();
}
} else {
if (aName == nsGkAtoms::hidechrome) {
@ -151,9 +147,6 @@ void ChromeObserver::AttributeChanged(dom::Element* aElement,
// if the localedir changed on the root element, reset the document
// direction
mDocument->ResetDocumentDirection();
} else if (aName == nsGkAtoms::lwtheme) {
// if the lwtheme changed, make sure to restyle appropriately
mDocument->ResetDocumentLWTheme();
} else if (aName == nsGkAtoms::drawtitle) {
SetDrawsTitle(false);
}

1
layout/style/test/test_non_content_accessible_pseudos.html
View File

@ -30,7 +30,6 @@ const NON_CONTENT_ACCESIBLE_PSEUDOS = [
":-moz-dir-attr-rtl",
":-moz-dir-attr-like-auto",
":-moz-autofill-preview",
":-moz-lwtheme",
":-moz-is-html",
":-moz-locale-dir(rtl)",
":-moz-locale-dir(ltr)",

1
layout/style/test/test_selectors.html
View File

@ -1077,7 +1077,6 @@ function runTests() {
test_balanced_unparseable(":dir");
// Test chrome-only -moz-lwtheme
test_balanced_unparseable(":-moz-lwtheme");
test_balanced_unparseable(":-moz-broken");
test_balanced_unparseable(":-moz-tree-row(selected)");

1
servo/components/style/gecko/non_ts_pseudo_class_list.rs
View File

@ -98,7 +98,6 @@ macro_rules! apply_non_ts_list {
// media query results are more expensive than document state changes. So for now
// making them pseudo-classes is probably the right trade-off.
("-moz-is-html", MozIsHTML, _, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS),
("-moz-lwtheme", MozLWTheme, _, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS_AND_CHROME),
("-moz-window-inactive", MozWindowInactive, _, _),
]
}

4
servo/components/style/gecko/selector_parser.rs
View File

@ -196,7 +196,6 @@ impl NonTSPseudoClass {
None => DocumentState::empty(),
},
NonTSPseudoClass::MozWindowInactive => DocumentState::WINDOW_INACTIVE,
NonTSPseudoClass::MozLWTheme => DocumentState::LWTHEME,
_ => DocumentState::empty(),
}
}
@ -214,11 +213,10 @@ impl NonTSPseudoClass {
NonTSPseudoClass::MozNativeAnonymous |
// :-moz-placeholder is parsed but never matches.
NonTSPseudoClass::MozPlaceholder |
// :-moz-is-html, :-moz-lwtheme, :-moz-locale-dir and :-moz-window-inactive
// :-moz-is-html, :-moz-locale-dir and :-moz-window-inactive
// depend only on the state of the document, which is invariant across all
// elements involved in a given style cache.
NonTSPseudoClass::MozIsHTML |
NonTSPseudoClass::MozLWTheme |
NonTSPseudoClass::MozLocaleDir(_) |
NonTSPseudoClass::MozWindowInactive
)

1
servo/components/style/gecko/wrapper.rs
View File

@ -2101,7 +2101,6 @@ impl<'le> ::selectors::Element for GeckoElement<'le> {
bindings::Gecko_IsSelectListBox(self.0)
},
NonTSPseudoClass::MozIsHTML => self.as_node().owner_doc().is_html_document(),
NonTSPseudoClass::MozLWTheme |
NonTSPseudoClass::MozLocaleDir(..) |
NonTSPseudoClass::MozWindowInactive => {
let state_bit = pseudo_class.document_state_flag();

2
toolkit/themes/osx/global/toolbar.css
View File

@ -18,7 +18,7 @@ toolbar {
-moz-default-appearance: toolbar;
}
toolbar:-moz-lwtheme {
*|*:root[lwtheme] toolbar {
appearance: none;
}

141
toolkit/themes/shared/findbar.css
View File

@ -2,10 +2,10 @@
* 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");
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
findbar {
xul|findbar {
border-top: 1px solid ThreeDShadow;
min-width: 1px;
transition-property: margin-bottom, visibility;
@ -14,29 +14,31 @@ findbar {
padding-block: 6px;
background-color: -moz-dialog;
color: -moz-dialogtext;
}
findbar[hidden] {
/* Override display:none to make the transition work. */
display: flex;
margin-bottom: calc(-1 * (28px + 12px + 1px)); /* findbar-container's height + padding-block + top border */
visibility: collapse;
transition-delay: 0s, 150ms;
}
&:where([hidden]) {
/* Override display:none to make the transition work. */
display: flex;
margin-bottom: calc(-1 * (28px + 12px + 1px)); /* findbar-container's height + padding-block + top border */
visibility: collapse;
transition-delay: 0s, 150ms;
@media (prefers-reduced-motion: reduce) {
findbar,
findbar[hidden] {
> .findbar-container,
> .findbar-closebutton {
opacity: 0;
}
}
@media (prefers-reduced-motion) {
transition-duration: 0s;
transition-delay: 0s;
}
}
findbar[noanim],
findbar[noanim] > .findbar-container,
findbar[noanim] > .findbar-closebutton {
transition-duration: 0s;
transition-delay: 0s;
&[noanim],
&[noanim] > .findbar-container,
&[noanim] > .findbar-closebutton {
transition-duration: 0s;
transition-delay: 0s;
}
}
.findbar-container {
@ -46,10 +48,6 @@ findbar[noanim] > .findbar-closebutton {
transition: opacity 150ms ease-in-out;
}
findbar[hidden] > .findbar-container {
opacity: 0;
}
/* Remove start margin when close button is on the left side (on macOS) */
.findbar-closebutton + .findbar-container {
margin-inline-start: 0;
@ -57,7 +55,7 @@ findbar[hidden] > .findbar-container {
/* Search field */
html|input.findbar-textbox {
.findbar-textbox {
appearance: none;
background-color: var(--input-bgcolor, var(--toolbar-field-background-color));
color: var(--input-color, var(--toolbar-field-color));
@ -69,39 +67,39 @@ html|input.findbar-textbox {
padding-inline-start: 8px;
width: 18em;
box-sizing: border-box;
}
html|input.findbar-textbox::placeholder {
opacity: 0.69;
}
&::placeholder {
opacity: 0.69;
}
html|input.findbar-textbox:focus {
background-color: var(--toolbar-field-focus-background-color);
color: var(--toolbar-field-focus-color);
border-color: transparent;
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
outline-color: var(--toolbar-field-focus-border-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
}
&:focus {
background-color: var(--toolbar-field-focus-background-color);
color: var(--toolbar-field-focus-color);
border-color: transparent;
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
outline-color: var(--toolbar-field-focus-border-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
}
html|input.findbar-textbox:-moz-lwtheme::selection {
background-color: var(--lwt-toolbar-field-highlight, Highlight);
color: var(--lwt-toolbar-field-highlight-text, HighlightText);
}
:root[lwtheme] &::selection {
background-color: var(--lwt-toolbar-field-highlight, Highlight);
color: var(--lwt-toolbar-field-highlight-text, HighlightText);
}
html|input.findbar-textbox:not(:focus):-moz-lwtheme::selection {
background-color: var(--lwt-toolbar-field-highlight, text-select-background-disabled);
}
:root[lwtheme] &:not(:focus)::selection {
background-color: var(--lwt-toolbar-field-highlight, text-select-background-disabled);
}
html|input.findbar-textbox[status="notfound"] {
background-color: rgba(226,40,80,.3);
color: inherit;
}
&[status="notfound"] {
background-color: rgba(226,40,80,.3);
color: inherit;
}
html|input.findbar-textbox[flash="true"] {
background-color: rgba(255,233,0,.3);
color: inherit;
&[flash="true"] {
background-color: rgba(255,233,0,.3);
color: inherit;
}
}
/* Previous/next buttons */
@ -119,16 +117,18 @@ html|input.findbar-textbox[flash="true"] {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
}
}
.findbar-find-previous:not([disabled]):hover,
.findbar-find-next:not([disabled]):hover {
background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
}
&:not([disabled]):hover {
background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
}
.findbar-find-previous:not([disabled]):hover:active,
.findbar-find-next:not([disabled]):hover:active {
background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
&:not([disabled]):hover:active {
background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
}
&[disabled="true"] > .toolbarbutton-icon {
opacity: var(--toolbarbutton-disabled-opacity);
}
}
.findbar-find-previous {
@ -141,11 +141,6 @@ html|input.findbar-textbox[flash="true"] {
margin-inline: 0 8px;
}
.findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
.findbar-find-next[disabled="true"] > .toolbarbutton-icon {
opacity: var(--toolbarbutton-disabled-opacity);
}
/* Checkboxes & Labels */
.findbar-container > checkbox,
@ -175,17 +170,13 @@ html|input.findbar-textbox[flash="true"] {
width: 24px;
fill: var(--toolbarbutton-icon-fill);
transition: opacity 150ms ease-in-out;
}
findbar[hidden] > .findbar-closebutton {
opacity: 0;
}
&:hover {
background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
outline: none;
}
.close-icon.findbar-closebutton:hover {
background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
outline: none;
}
.close-icon.findbar-closebutton:hover:active {
background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
&:hover:active {
background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
}
}

6
toolkit/themes/shared/global-shared.css
View File

@ -48,7 +48,7 @@
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
--toolbar-color: var(--toolbar-non-lwt-textcolor);
&:-moz-lwtheme {
&[lwtheme] {
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-color: var(--lwt-text-color, inherit);
}
@ -72,7 +72,7 @@
--panel-separator-color: currentColor;
--toolbar-field-focus-border-color: var(--focus-outline-color);
&:not(:-moz-lwtheme) {
&:not([lwtheme]) {
--panel-disabled-color: GrayText;
}
}
@ -96,7 +96,7 @@
/* Lightweight theme roots */
:root:-moz-lwtheme {
:root[lwtheme] {
toolbar,
&[lwt-popup="light"] panel {
color-scheme: light;

10
toolkit/themes/shared/notification.css
View File

@ -41,15 +41,15 @@ notification {
}
@media (prefers-color-scheme: dark) {
notification[type="info"]:-moz-lwtheme {
--notification-background: #38383d;
--notification-text: rgb(249, 249, 250);
}
notification[type="info"] {
--notification-button-background: rgba(249,249,250,.1);
--notification-button-background-hover: rgba(249,249,250,.2);
--notification-button-background-active: rgba(249,249,250,.3);
*|*:root[lwtheme] & {
--notification-background: #38383d;
--notification-text: rgb(249, 249, 250);
}
}
}

26
toolkit/themes/windows/global/menu.css
View File

@ -51,20 +51,22 @@ menubar > menu[_moz-menuactive="true"]:not([disabled="true"]) {
color: -moz-menubarhovertext;
}
menubar > menu:-moz-lwtheme {
appearance: none;
border-color: transparent;
*|*:root[lwtheme] {
menubar > menu {
appearance: none;
border-color: transparent;
&:not([disabled="true"]) {
color: inherit;
}
&[_moz-menuactive="true"]:not([disabled="true"]) {
background-color: SelectedItem;
color: SelectedItemText;
text-shadow: none;
}
}
}
menubar > menu:-moz-lwtheme:not([disabled="true"]) {
color: inherit;
}
menubar > menu:-moz-lwtheme[_moz-menuactive="true"]:not([disabled="true"]) {
background-color: SelectedItem;
color: SelectedItemText;
text-shadow: none;
}
/* ..... internal content .... */

8
toolkit/themes/windows/global/toolbar.css
View File

@ -24,9 +24,11 @@ toolbar:first-child {
min-width: 1px;
}
toolbox:-moz-lwtheme,
toolbar:-moz-lwtheme {
appearance: none;
*|*:root[lwtheme] {
toolbox,
toolbar {
appearance: none;
}
}
toolbarseparator {

1
xpcom/ds/StaticAtoms.py
View File

@ -634,7 +634,6 @@ STATIC_ATOMS = [
Atom("lowest", "lowest"),
Atom("lowsrc", "lowsrc"),
Atom("ltr", "ltr"),
Atom("lwtheme", "lwtheme"),
Atom("main", "main"),
Atom("map", "map"),
Atom("manifest", "manifest"),