Bug 1884792 - Remove chrome-only :-moz-lwtheme pseudo-class. r=deskto…

…p-theme-reviewers,dao Behavior is effectively :root[lwtheme="true"]. Use the attribute selector instead. Differential Revision: https://phabricator.services.mozilla.com/D204315
mozilla · Mar 18, 2024 · f263e49 · f263e49
1 parent 6bfd255
commit f263e49
Show file tree

Hide file tree

Showing 30 changed files with 205 additions and 253 deletions.
diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
@@ -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"]) > & {

diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
@@ -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 {

diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
@@ -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%);
       }

diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css
@@ -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[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[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:active:not(:-moz-lwtheme) {
-    --uei-button-attention-dot-color: ButtonText;
-  }
-
-  .unified-extensions-item-message:not(:-moz-lwtheme) {
-    color: inherit;
-  }
-
-  .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], :-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-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 {
+      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(:active) {
+      --uei-button-attention-dot-color: ButtonFace;
+    }
+
+    .unified-extensions-item-message {
+      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: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-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;
+    }
   }
 }
diff --git a/browser/themes/shared/browser-custom-colors.css b/browser/themes/shared/browser-custom-colors.css
@@ -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));

diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
@@ -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);
   }
 }
 

diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css
@@ -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 {

diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -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%);
   }
 

diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css
@@ -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) {

diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css
@@ -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;
   }

diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css
@@ -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,

diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
@@ -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

diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
@@ -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;

diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
@@ -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;
+    }
   }
 }