Bug 1693222 - Implement SelectedItem and SelectedItemText system colors. r=mstange

Since Highlight / HighlightText are now equivalent to the text selection ones, remove those too. Differential Revision: https://phabricator.services.mozilla.com/D123964
2021-09-02 11:38:01 +00:00 · 2021-09-02 11:38:01 +00:00 · 8b10d3a89d
--- a/browser/components/search/content/contentSearchUI.css
+++ b/browser/components/search/content/contentSearchUI.css
@ -67,8 +67,8 @@
 }

 .contentSearchSuggestionRow.selected {
-  background-color: Highlight;
-  color: HighlightText;
+  background-color: SelectedItem;
+  color: SelectedItemText;
 }

 .contentSearchHeader,
@ -132,7 +132,7 @@
 }

 .contentSearchOneOffItem.selected {
-  background-color: Highlight;
+  background-color: SelectedItem;
  background-image: none;
 }

--- a/browser/extensions/formautofill/skin/windows/autocomplete-item.css
+++ b/browser/extensions/formautofill/skin/windows/autocomplete-item.css
@ -11,7 +11,7 @@

@media (-moz-windows-default-theme: 0) {
  xul|richlistitem[originaltype="autofill-profile"][selected="true"] > .autofill-item-box {
-    background-color: Highlight;
+    background-color: SelectedItem;
  }

  .autofill-item-box {
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@ -98,8 +98,8 @@ menuitem.bookmark-item {

 /* Bookmark drag and drop styles */
 .bookmark-item[dragover-into="true"] {
-  background: Highlight !important;
-  color: HighlightText !important;
+  background: SelectedItem !important;
+  color: SelectedItemText !important;
 }

 .bookmark-item[cutting] > .toolbarbutton-icon,
@ -202,8 +202,8 @@ menuitem.bookmark-item {

 :root:not(:-moz-lwtheme) {
  --urlbar-popup-action-color: -moz-nativehyperlinktext;
-  --autocomplete-popup-highlight-background: Highlight;
-  --autocomplete-popup-highlight-color: HighlightText;
+  --autocomplete-popup-highlight-background: SelectedItem;
+  --autocomplete-popup-highlight-color: SelectedItemText;
 }

 /* Translation infobar */
--- a/browser/themes/linux/pageInfo.css
+++ b/browser/themes/linux/pageInfo.css
@ -16,8 +16,8 @@
 }

 #viewGroup > radio[selected="true"] {
-  background-color: Highlight;
-  color: HighlightText;
+  background-color: SelectedItem;
+  color: SelectedItemText;
 }

 #viewGroup > radio > .radio-label-box {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@ -437,8 +437,8 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
 /* Bookmark drag and drop styles */

 .bookmark-item[dragover-into="true"] {
-  background: Highlight !important;
-  color: HighlightText !important;
+  background: SelectedItem !important;
+  color: SelectedItemText !important;
 }

 /* Translation */
--- a/browser/themes/shared/autocomplete.inc.css
+++ b/browser/themes/shared/autocomplete.inc.css
@ -38,8 +38,8 @@
 }

 .autocomplete-richlistitem[selected] {
-  background-color: Highlight;
-  color: HighlightText;
+  background-color: SelectedItem;
+  color: SelectedItemText;
 }

 /* Autocomplete richlistitem support for a two-line label display */
@ -100,7 +100,7 @@
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"][selected] > .two-line-wrapper > .ac-site-icon,
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon,
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
-  fill: HighlightText;
+  fill: SelectedItemText;
 }

 /* Login form autocompletion with origin showing and generated passwords */
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@ -256,7 +256,7 @@ menupopup::part(drop-indicator) {
  list-style-image: none;
  height: 2px;
  margin-inline-end: -4em;
-  background-color: Highlight;
+  background-color: SelectedItem;
  pointer-events: none;
 }

--- a/browser/themes/shared/places/tree-icons.css
+++ b/browser/themes/shared/places/tree-icons.css
@ -78,7 +78,7 @@ treechildren::-moz-tree-cell-text(title, separator) {
 }

 treechildren::-moz-tree-cell-text(title, separator, selected, focus) {
-  color: HighlightText;
+  color: SelectedItemText;
 }

 /* Remove tiny spacing in separators appearing after the twisty column */
--- a/browser/themes/shared/preferences/search.css
+++ b/browser/themes/shared/preferences/search.css
@ -55,7 +55,7 @@
 }

 #engineList treechildren::-moz-tree-drop-feedback {
-  background-color: Highlight;
+  background-color: SelectedItem;
  width: 10000px; /* 100% doesn't work; 10k is hopefully larger than any window
                     we may have, overflow isn't visible. */
  height: 2px;
--- a/browser/themes/shared/syncedtabs/sidebar.inc.css
+++ b/browser/themes/shared/syncedtabs/sidebar.inc.css
@ -77,8 +77,8 @@ body {
 }

 .item.selected:focus > .item-title-container {
-  background-color: Highlight;
-  color: HighlightText;
+  background-color: SelectedItem;
+  color: SelectedItemText;
 }

 .item.client .item-twisty-container {
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@ -70,7 +70,7 @@
 }

 #tabbrowser-arrowscrollbox[highlight]::part(scrollbutton-down) {
-  background-color: Highlight;
+  background-color: SelectedItem;
 }

 toolbar .toolbarbutton-1 {
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@ -109,8 +109,8 @@

 #urlbar-input:-moz-lwtheme::selection,
 .searchbar-textbox:-moz-lwtheme::selection {
-  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(text-select-background, light));
-  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(text-select-foreground, light));
+  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(Highlight, light));
+  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(HighlightText, light));
 }

 #urlbar-input:not(:focus):-moz-lwtheme::selection,
@ -120,14 +120,14 @@

 :root[lwt-toolbar-field-focus-brighttext] #urlbar-input:focus::selection,
 :root[lwt-toolbar-field-focus-brighttext] .searchbar-textbox:focus-within::selection {
-  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(text-select-background, dark));
-  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(text-select-foreground, dark));
+  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(Highlight, dark));
+  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(HighlightText, dark));
 }

 :root[lwt-toolbar-field-brighttext] #urlbar-input:not(:focus)::selection,
 :root[lwt-toolbar-field-brighttext] .searchbar-textbox:not(:focus-within)::selection {
  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(text-select-background-disabled, dark));
-  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(text-select-foreground, dark));
+  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(HighlightText, dark));
 }

 #urlbar:not([focused="true"]) {
@ -310,9 +310,9 @@
 /* Use system colors for low/high contrast mode */
@media (prefers-contrast) {
  #urlbar-search-mode-indicator {
-    background-color: Highlight;
-    outline-color: Highlight;
-    color: HighlightText;
+    background-color: SelectedItem;
+    outline-color: SelectedItem;
+    color: SelectedItemText;
  }

  #urlbar-search-mode-indicator-close {
--- a/browser/themes/shared/urlbarView.inc.css
+++ b/browser/themes/shared/urlbarView.inc.css
@ -14,8 +14,8 @@
 :root {
  --autocomplete-popup-background: var(--arrowpanel-background);
  --autocomplete-popup-color: var(--arrowpanel-color);
-  --autocomplete-popup-highlight-background: Highlight;
-  --autocomplete-popup-highlight-color: HighlightText;
+  --autocomplete-popup-highlight-background: SelectedItem;
+  --autocomplete-popup-highlight-color: SelectedItemText;

  --urlbar-popup-action-color: hsl(178, 100%, 28%);

--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@ -222,8 +222,8 @@
          stroke: ButtonText;
        }
        .titlebar-button:hover {
-          background-color: Highlight;
-          stroke: HighlightText;
+          background-color: SelectedItem;
+          stroke: SelectedItemText;
        }

        .titlebar-min {
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@ -531,8 +531,8 @@ menuitem.bookmark-item {

 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  appearance: none;
-  background: Highlight !important;
-  color: HighlightText !important;
+  background: SelectedItem !important;
+  color: SelectedItemText !important;
 }

 /* Translation infobar */
--- a/browser/themes/windows/places/organizer.css
+++ b/browser/themes/windows/places/organizer.css
@ -10,11 +10,11 @@
  --organizer-pane-background: -moz-Dialog;
  --organizer-content-background: -moz-Dialog;

-  --organizer-hover-background: Highlight;
-  --organizer-hover-color: HighlightText;
-  --organizer-selected-background: Highlight;
-  --organizer-selected-color: HighlightText;
-  --organizer-outline-color: Highlight;
+  --organizer-hover-background: SelectedItem;
+  --organizer-hover-color: SelectedItemText;
+  --organizer-selected-background: SelectedItem;
+  --organizer-selected-color: SelectedItemText;
+  --organizer-outline-color: SelectedItem;

  --organizer-separator-color: ThreeDDarkShadow;
  --organizer-border-color: ThreeDShadow;
--- a/browser/themes/windows/webRTC-indicator.css
+++ b/browser/themes/windows/webRTC-indicator.css
@ -22,8 +22,8 @@
    --minimize-button-active-background-color: hsla(0,0%,70%,.6);
    --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.2);
    --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6);
-    --control-icon-checked-background-color: Highlight;
-    --control-icon-checked-icon-fill: HighlightText;
+    --control-icon-checked-background-color: SelectedItem;
+    --control-icon-checked-icon-fill: SelectedItemText;
    --control-icon-checked-hover-background-color: hsla(0,0%,70%,.2);
    --control-icon-checked-active-background-color: hsla(0,0%,70%,.6);
  }
--- a/layout/generic/nsContainerFrame.cpp
+++ b/layout/generic/nsContainerFrame.cpp
@ -434,7 +434,7 @@ DeviceColor nsDisplaySelectionOverlay::ComputeColor() const {
    return ComputeColorFromSelectionStyle(*style);
  }
  if (mSelectionValue == nsISelectionController::SELECTION_ON) {
-    colorID = LookAndFeel::ColorID::TextSelectBackground;
+    colorID = LookAndFeel::ColorID::Highlight;
  } else if (mSelectionValue == nsISelectionController::SELECTION_ATTENTION) {
    colorID = LookAndFeel::ColorID::TextSelectBackgroundAttention;
  } else {
--- a/layout/generic/nsTextFrame.cpp
+++ b/layout/generic/nsTextFrame.cpp
@ -4061,9 +4061,9 @@ void nsTextPaintStyle::InitCommonColors() {
  nscolor defaultWindowBackgroundColor =
      LookAndFeel::Color(LookAndFeel::ColorID::WindowBackground, mFrame);
  nscolor selectionTextColor =
-      LookAndFeel::Color(LookAndFeel::ColorID::TextSelectForeground, mFrame);
+      LookAndFeel::Color(LookAndFeel::ColorID::Highlighttext, mFrame);
  nscolor selectionBGColor =
-      LookAndFeel::Color(LookAndFeel::ColorID::TextSelectBackground, mFrame);
+      LookAndFeel::Color(LookAndFeel::ColorID::Highlight, mFrame);

  mSufficientContrast = std::min(
      std::min(NS_SUFFICIENT_LUMINOSITY_DIFFERENCE,
@ -4111,7 +4111,7 @@ bool nsTextPaintStyle::InitSelectionColorsAndShadow() {
  }

  nscolor selectionBGColor =
-      LookAndFeel::Color(LookAndFeel::ColorID::TextSelectBackground, mFrame);
+      LookAndFeel::Color(LookAndFeel::ColorID::Highlight, mFrame);

  switch (selectionStatus) {
    case nsISelectionController::SELECTION_ATTENTION: {
@ -4135,7 +4135,7 @@ bool nsTextPaintStyle::InitSelectionColorsAndShadow() {
  }

  mSelectionTextColor =
-      LookAndFeel::Color(LookAndFeel::ColorID::TextSelectForeground, mFrame);
+      LookAndFeel::Color(LookAndFeel::ColorID::Highlighttext, mFrame);

  if (mResolveColors) {
    // On MacOS X, only the background color gets set,
--- a/layout/mathml/nsMathMLChar.cpp
+++ b/layout/mathml/nsMathMLChar.cpp
@ -1699,8 +1699,7 @@ void nsDisplayMathMLSelectionRect::Paint(nsDisplayListBuilder* aBuilder,
                                  mFrame->PresContext()->AppUnitsPerDevPixel(),
                                  *drawTarget);
  // get color to use for selection from the look&feel object
-  nscolor bgColor =
-      LookAndFeel::Color(LookAndFeel::ColorID::TextSelectBackground, mFrame);
+  nscolor bgColor = LookAndFeel::Color(LookAndFeel::ColorID::Highlight, mFrame);
  drawTarget->FillRect(rect, ColorPattern(ToDeviceColor(bgColor)));
 }

@ -1857,8 +1856,8 @@ void nsMathMLChar::PaintForeground(nsIFrame* aForFrame,
      &nsStyleText::mWebkitTextFillColor);
  if (aIsSelected) {
    // get color to use for selection from the look&feel object
-    fgColor = LookAndFeel::Color(LookAndFeel::ColorID::TextSelectForeground,
-                                 aForFrame, fgColor);
+    fgColor = LookAndFeel::Color(LookAndFeel::ColorID::Highlighttext, aForFrame,
+                                 fgColor);
  }
  aRenderingContext.SetColor(sRGBColor::FromABGR(fgColor));
  aRenderingContext.Save();
--- a/layout/reftests/selection/reftest.list
+++ b/layout/reftests/selection/reftest.list
@ -28,7 +28,7 @@ fuzzy-if(skiaContent,0-1,0-700) == extend-3i.html extend-3-ref.html
 random-if(Android) needs-focus != pseudo-element-of-native-anonymous.html pseudo-element-of-native-anonymous-ref.html # bug 676641
 # These tests uses Highlight and HighlightText color keywords, they are not same as text selection color on Mac.
 random-if(Android) fails-if(cocoaWidget) needs-focus == non-themed-widget.html non-themed-widget-ref.html
-random-if(Android) fails-if(cocoaWidget) needs-focus == themed-widget.html themed-widget-ref.html
+random-if(Android) needs-focus == themed-widget.html themed-widget-ref.html
 == addrange-1.html addrange-ref.html
 fuzzy-if(skiaContent,0-1,0-1200) == addrange-2.html addrange-ref.html
 == splitText-normalize.html splitText-normalize-ref.html
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@ -351,14 +351,13 @@ select > option {
 }

 option:checked {
-  background-color: -moz-html-cellhighlight !important;
-  color: -moz-html-cellhighlighttext !important;
+  background-color: text-select-background-disabled !important;
+  color: SelectedItemText !important;
 }

 select:focus > option:checked,
 select:focus > optgroup > option:checked {
-  background-color: Highlight !important;
-  color: HighlightText !important;
+  background-color: SelectedItem !important;
 }

 optgroup {
--- a/layout/tables/nsTableCellFrame.cpp
+++ b/layout/tables/nsTableCellFrame.cpp
@ -263,8 +263,7 @@ void nsTableCellFrame::DecorateForSelection(DrawTarget* aDrawTarget,
      if (displaySelection == nsISelectionController::SELECTION_DISABLED) {
        bordercolor = NS_RGB(176, 176, 176);  // disabled color
      } else {
-        bordercolor = LookAndFeel::Color(
-            LookAndFeel::ColorID::TextSelectBackground, this);
+        bordercolor = LookAndFeel::Color(LookAndFeel::ColorID::Highlight, this);
      }
      nscoord threePx = nsPresContext::CSSPixelsToAppUnits(3);
      if ((mRect.width > threePx) && (mRect.height > threePx)) {
--- a/servo/components/style/values/specified/color.rs
+++ b/servo/components/style/values/specified/color.rs
@ -244,10 +244,6 @@ pub enum SystemColor {
    #[css(skip)]
    TextForeground,
    #[parse(condition = "ParserContext::in_ua_or_chrome_sheet")]
-    TextSelectBackground,
-    #[parse(condition = "ParserContext::in_ua_or_chrome_sheet")]
-    TextSelectForeground,
-    #[parse(condition = "ParserContext::in_ua_or_chrome_sheet")]
    TextSelectBackgroundDisabled,
    #[parse(condition = "ParserContext::in_ua_or_chrome_sheet")]
    TextSelectBackgroundAttention,
@ -339,9 +335,11 @@ pub enum SystemColor {
    /// Used for selected but not focused cell text.
    MozCellhighlighttext,
    /// Used for selected but not focused html cell backgrounds.
-    MozHtmlCellhighlight,
+    #[parse(aliases = "-moz-html-cellhighlight")]
+    Selecteditem,
    /// Used for selected but not focused html cell text.
-    MozHtmlCellhighlighttext,
+    #[parse(aliases = "-moz-html-cellhighlighttext")]
+    Selecteditemtext,
    /// Used to button text background when hovered.
    MozButtonhoverface,
    /// Used to button text color when hovered.
--- a/testing/web-platform/tests/css/css-color/parsing/system-color-valid.html
+++ b/testing/web-platform/tests/css/css-color/parsing/system-color-valid.html
@ -23,6 +23,8 @@ test_valid_value("color", "Highlight", "highlight");
 test_valid_value("color", "HighlightText", "highlighttext");
 test_valid_value("color", "LinkText", "linktext");
 test_valid_value("color", "VisitedText", "visitedtext");
+test_valid_value("color", "SelectedItem", "selecteditem");
+test_valid_value("color", "SelectedItemText", "selecteditemtext");
 </script>
 </body>
 </html>
--- a/toolkit/themes/shared/findbar.css
+++ b/toolkit/themes/shared/findbar.css
@ -75,8 +75,8 @@ html|input.findbar-textbox:focus {
 }

 html|input.findbar-textbox:-moz-lwtheme::selection {
-  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(text-select-background, light));
-  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(text-select-foreground, light));
+  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(Higlight, light));
+  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(HighlightText, light));
 }

 html|input.findbar-textbox:not(:focus):-moz-lwtheme::selection {
@ -84,13 +84,13 @@ html|input.findbar-textbox:not(:focus):-moz-lwtheme::selection {
 }

 :root[lwt-toolbar-field-focus-brighttext] html|input.findbar-textbox:focus::selection {
-  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(text-select-background, dark));
-  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(text-select-foreground, dark));
+  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(Higlight, dark));
+  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(HighlightText, dark));
 }

 :root[lwt-toolbar-field-brighttext] html|input.findbar-textbox:not(:focus)::selection {
  background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(text-select-background-disabled, dark));
-  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(text-select-foreground, dark));
+  color: var(--lwt-toolbar-field-highlight-text, -moz-system-color(HighlightText, dark));
 }


--- a/widget/android/nsLookAndFeel.cpp
+++ b/widget/android/nsLookAndFeel.cpp
@ -103,7 +103,6 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aColorScheme,

  switch (aID) {
      // These colors don't seem to be used for anything anymore in Mozilla
-      // (except here at least TextSelectBackground and TextSelectForeground)
      // The CSS2 colors below are used.
    case ColorID::WindowForeground:
      aColor = mSystemColors.textColorPrimary;
@ -122,7 +121,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aColorScheme,
      // not used?
      aColor = mSystemColors.textColorPrimary;
      break;
-    case ColorID::TextSelectBackground: {
+    case ColorID::Highlight: {
      // Matched to action_accent in java codebase. This works fine with both
      // light and dark color scheme.
      nscolor accent =
@ -131,7 +130,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aColorScheme,
          NS_RGBA(NS_GET_R(accent), NS_GET_G(accent), NS_GET_B(accent), 153);
      break;
    }
-    case ColorID::TextSelectForeground:
+    case ColorID::Highlighttext:
      // Selection background is transparent enough that any foreground color
      // does.
      aColor = NS_SAME_AS_FOREGROUND_COLOR;
@ -179,15 +178,13 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aColorScheme,
      aColor = NS_RGB(0xb1, 0xa5, 0x98);
      break;
    case ColorID::MozCellhighlight:
-    case ColorID::MozHtmlCellhighlight:
-    case ColorID::Highlight:
+    case ColorID::Selecteditem:
    case ColorID::MozAccentColor:
      aColor = UseNativeAccent() ? mSystemColors.colorAccent
                                 : widget::sDefaultAccent.ToABGR();
      break;
    case ColorID::MozCellhighlighttext:
-    case ColorID::MozHtmlCellhighlighttext:
-    case ColorID::Highlighttext:
+    case ColorID::Selecteditemtext:
    case ColorID::MozAccentColorForeground:
      aColor = UseNativeAccent()
                   ? nsNativeBasicTheme::ComputeCustomAccentForeground(
--- a/widget/cocoa/nsLookAndFeel.mm
+++ b/widget/cocoa/nsLookAndFeel.mm
@ -146,7 +146,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme, nscolor
    case ColorID::TextForeground:
      color = NS_RGB(0x00, 0x00, 0x00);
      break;
-    case ColorID::TextSelectBackground:
+    case ColorID::Highlight:
      color = ProcessSelectionBackground(GetColorFromNSColor(NSColor.selectedTextBackgroundColor),
                                         aScheme);
      break;
@ -156,11 +156,9 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme, nscolor
      color = ProcessSelectionBackground(GetColorFromNSColor(NSColor.secondarySelectedControlColor),
                                         aScheme);
      break;
-    case ColorID::Highlight:  // CSS2 color
    case ColorID::MozMenuhover:
      color = GetColorFromNSColor(NSColor.alternateSelectedControlColor);
      break;
-    case ColorID::Highlighttext:  // CSS2 color
    case ColorID::MozAccentColorForeground:
    case ColorID::MozMenuhovertext:
      color = GetColorFromNSColor(NSColor.alternateSelectedControlTextColor);
@ -175,7 +173,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme, nscolor
    case ColorID::IMESelectedConvertedTextForeground:
    case ColorID::IMERawInputForeground:
    case ColorID::IMEConvertedTextForeground:
-    case ColorID::TextSelectForeground:
+    case ColorID::Highlighttext:
      color = NS_SAME_AS_FOREGROUND_COLOR;
      break;
    case ColorID::IMERawInputUnderline:
@ -297,7 +295,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme, nscolor
      break;
    case ColorID::MozDialogtext:
    case ColorID::MozCellhighlighttext:
-    case ColorID::MozHtmlCellhighlighttext:
+    case ColorID::Selecteditemtext:
    case ColorID::MozColheadertext:
    case ColorID::MozColheaderhovertext:
      color = GetColorFromNSColor(NSColor.controlTextColor);
@ -337,8 +335,8 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme, nscolor
      color = NS_RGB(0xDC, 0xDC, 0xDC);
      break;
    case ColorID::MozCellhighlight:
-    case ColorID::MozHtmlCellhighlight:
    case ColorID::MozMacSecondaryhighlight:
+    case ColorID::Selecteditem:
      // For inactive list selection
      color = GetColorFromNSColor(NSColor.secondarySelectedControlColor);
      break;
--- a/widget/gtk/IMContextWrapper.cpp
+++ b/widget/gtk/IMContextWrapper.cpp
@ -261,7 +261,7 @@ class SelectionStyleProvider final {
    nsAutoCString style(":selected{");
    // FYI: LookAndFeel always returns selection colors of GtkTextView.
    if (auto selectionForegroundColor =
-            GetSystemColor(LookAndFeel::ColorID::TextSelectForeground)) {
+            GetSystemColor(LookAndFeel::ColorID::Highlight)) {
      double alpha =
          static_cast<double>(NS_GET_A(*selectionForegroundColor)) / 0xFF;
      style.AppendPrintf("color:rgba(%u,%u,%u,",
@ -274,7 +274,7 @@ class SelectionStyleProvider final {
      style.AppendPrintf(");");
    }
    if (auto selectionBackgroundColor =
-            GetSystemColor(LookAndFeel::ColorID::TextSelectBackground)) {
+            GetSystemColor(LookAndFeel::ColorID::Highlighttext)) {
      double alpha =
          static_cast<double>(NS_GET_A(*selectionBackgroundColor)) / 0xFF;
      style.AppendPrintf("background-color:rgba(%u,%u,%u,",
--- a/widget/gtk/nsLookAndFeel.cpp
+++ b/widget/gtk/nsLookAndFeel.cpp
@ -393,7 +393,6 @@ nsresult nsLookAndFeel::PerThemeData::GetColor(ColorID aID,

  switch (aID) {
      // These colors don't seem to be used for anything anymore in Mozilla
-      // (except here at least TextSelectBackground and TextSelectForeground)
      // The CSS2 colors below are used.
    case ColorID::WindowBackground:
    case ColorID::WidgetBackground:
@ -417,14 +416,13 @@ nsresult nsLookAndFeel::PerThemeData::GetColor(ColorID aID,
      aColor = mMozWindowText;
      break;
    case ColorID::WidgetSelectBackground:
-    case ColorID::TextSelectBackground:
    case ColorID::IMESelectedRawTextBackground:
    case ColorID::IMESelectedConvertedTextBackground:
    case ColorID::MozDragtargetzone:
    case ColorID::Highlight:  // preference selected item,
      aColor = mTextSelectedBackground;
      break;
-    case ColorID::TextSelectForeground:
+    case ColorID::Highlighttext:
      if (NS_GET_A(mTextSelectedBackground) < 155) {
        aColor = NS_SAME_AS_FOREGROUND_COLOR;
        break;
@ -433,14 +431,13 @@ nsresult nsLookAndFeel::PerThemeData::GetColor(ColorID aID,
    case ColorID::WidgetSelectForeground:
    case ColorID::IMESelectedRawTextForeground:
    case ColorID::IMESelectedConvertedTextForeground:
-    case ColorID::Highlighttext:
      aColor = mTextSelectedText;
      break;
-    case ColorID::MozHtmlCellhighlight:
+    case ColorID::Selecteditem:
    case ColorID::MozAccentColor:
      aColor = mAccentColor;
      break;
-    case ColorID::MozHtmlCellhighlighttext:
+    case ColorID::Selecteditemtext:
    case ColorID::MozAccentColorForeground:
      aColor = mAccentColorForeground;
      break;
--- a/widget/headless/HeadlessLookAndFeelGTK.cpp
+++ b/widget/headless/HeadlessLookAndFeelGTK.cpp
@ -73,18 +73,12 @@ nsresult HeadlessLookAndFeel::NativeGetColor(ColorID aID, ColorScheme,
    case ColorID::TextHighlightForeground:
      aColor = NS_RGB(0xff, 0xff, 0xff);
      break;
-    case ColorID::TextSelectBackground:
-      aColor = NS_RGB(0xaa, 0xaa, 0xaa);
-      break;
    case ColorID::TextSelectBackgroundAttention:
      aColor = NS_TRANSPARENT;
      break;
    case ColorID::TextSelectBackgroundDisabled:
      aColor = NS_RGB(0xaa, 0xaa, 0xaa);
      break;
-    case ColorID::TextSelectForeground:
-      aColor = NS_SAME_AS_FOREGROUND_COLOR;
-      break;
    case ColorID::Widget3DHighlight:
      aColor = NS_RGB(0xa0, 0xa0, 0xa0);
      break;
@ -110,10 +104,12 @@ nsresult HeadlessLookAndFeel::NativeGetColor(ColorID aID, ColorScheme,
      aColor = NS_RGB(0x00, 0x00, 0x00);
      break;
    case ColorID::Highlight:
+    case ColorID::Selecteditem:
    case ColorID::MozAccentColor:
      aColor = NS_RGB(53, 132, 228);
      break;
    case ColorID::Highlighttext:
+    case ColorID::Selecteditemtext:
    case ColorID::MozAccentColorForeground:
      aColor = NS_RGB(0xff, 0xff, 0xff);
      break;
--- a/widget/nsXPLookAndFeel.cpp
+++ b/widget/nsXPLookAndFeel.cpp
@ -206,8 +206,6 @@ static const char sColorPrefs[][41] = {
    "ui.widget3DShadow",
    "ui.textBackground",
    "ui.textForeground",
-    "ui.textSelectBackground",
-    "ui.textSelectForeground",
    "ui.textSelectBackgroundDisabled",
    "ui.textSelectBackgroundAttention",
    "ui.textHighlightBackground",
@ -269,8 +267,8 @@ static const char sColorPrefs[][41] = {
    "ui.-moz-dragtargetzone",
    "ui.-moz-cellhighlight",
    "ui.-moz_cellhighlighttext",
-    "ui.-moz-html-cellhighlight",
-    "ui.-moz-html-cellhighlighttext",
+    "ui.selecteditem",
+    "ui.selecteditemtext",
    "ui.-moz-buttonhoverface",
    "ui.-moz_buttonhovertext",
    "ui.-moz_menuhover",
@ -476,8 +474,11 @@ nsXPLookAndFeel::~nsXPLookAndFeel() {
 static bool IsSpecialColor(LookAndFeel::ColorID aID, nscolor aColor) {
  using ColorID = LookAndFeel::ColorID;

+  if (aColor == NS_SAME_AS_FOREGROUND_COLOR) {
+    return true;
+  }
+
  switch (aID) {
-    case ColorID::TextSelectForeground:
    case ColorID::IMESelectedRawTextBackground:
    case ColorID::IMESelectedConvertedTextBackground:
    case ColorID::IMERawInputBackground:
@ -550,8 +551,8 @@ nscolor nsXPLookAndFeel::GetStandinForNativeColor(ColorID aID) {
    COLOR(MozDragtargetzone, 0xFF, 0xFF, 0xFF)
    COLOR(MozCellhighlight, 0xF0, 0xF0, 0xF0)
    COLOR(MozCellhighlighttext, 0x00, 0x00, 0x00)
-    COLOR(MozHtmlCellhighlight, 0x33, 0x99, 0xFF)
-    COLOR(MozHtmlCellhighlighttext, 0xFF, 0xFF, 0xFF)
+    COLOR(Selecteditem, 0x33, 0x99, 0xFF)
+    COLOR(Selecteditemtext, 0xFF, 0xFF, 0xFF)
    COLOR(MozButtonhoverface, 0xF0, 0xF0, 0xF0)
    COLOR(MozGtkButtonactivetext, 0x00, 0x00, 0x00)
    COLOR(MozButtonhovertext, 0x00, 0x00, 0x00)
@ -1052,8 +1053,6 @@ static bool ColorIsCSSAccessible(LookAndFeel::ColorID aId) {
    case ColorID::Widget3DShadow:
    case ColorID::TextBackground:
    case ColorID::TextForeground:
-    case ColorID::TextSelectBackground:
-    case ColorID::TextSelectForeground:
    case ColorID::TextSelectBackgroundDisabled:
    case ColorID::TextSelectBackgroundAttention:
    case ColorID::TextHighlightBackground:
--- a/widget/uikit/nsLookAndFeel.mm
+++ b/widget/uikit/nsLookAndFeel.mm
@ -76,15 +76,13 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID, ColorScheme, nscolor& aResult) {
    case ColorID::TextForeground:
      aResult = NS_RGB(0x00, 0x00, 0x00);
      break;
-    case ColorID::TextSelectBackground:
-    case ColorID::Highlight:  // CSS2 color
+    case ColorID::Highlight:
      aResult = NS_RGB(0xaa, 0xaa, 0xaa);
      break;
    case ColorID::MozMenuhover:
      aResult = NS_RGB(0xee, 0xee, 0xee);
      break;
-    case ColorID::TextSelectForeground:
-    case ColorID::Highlighttext:  // CSS2 color
+    case ColorID::Highlighttext:
    case ColorID::MozMenuhovertext:
      aResult = mColorTextSelectForeground;
      break;
@ -199,7 +197,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID, ColorScheme, nscolor& aResult) {
      break;
    case ColorID::MozDialogtext:
    case ColorID::MozCellhighlighttext:
-    case ColorID::MozHtmlCellhighlighttext:
+    case ColorID::Selecteditemtext:
    case ColorID::MozColheadertext:
    case ColorID::MozColheaderhovertext:
      aResult = mColorDarkText;
@ -231,7 +229,7 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID, ColorScheme, nscolor& aResult) {
      aResult = NS_RGB(0xDC, 0xDC, 0xDC);
      break;
    case ColorID::MozCellhighlight:
-    case ColorID::MozHtmlCellhighlight:
+    case ColorID::Selecteditem:
    case ColorID::MozMacSecondaryhighlight:
      // For inactive list selection
      aResult = NS_RGB(0xaa, 0xaa, 0xaa);
--- a/widget/windows/nsLookAndFeel.cpp
+++ b/widget/windows/nsLookAndFeel.cpp
@ -150,16 +150,6 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme,
    case ColorID::TextForeground:
      idx = COLOR_WINDOWTEXT;
      break;
-    case ColorID::TextSelectBackground:
-    case ColorID::IMESelectedRawTextBackground:
-    case ColorID::IMESelectedConvertedTextBackground:
-      idx = COLOR_HIGHLIGHT;
-      break;
-    case ColorID::TextSelectForeground:
-    case ColorID::IMESelectedRawTextForeground:
-    case ColorID::IMESelectedConvertedTextForeground:
-      idx = COLOR_HIGHLIGHTTEXT;
-      break;
    case ColorID::IMERawInputBackground:
    case ColorID::IMEConvertedTextBackground:
      aColor = NS_TRANSPARENT;
@ -214,8 +204,10 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme,
      idx = COLOR_GRAYTEXT;
      break;
    case ColorID::Highlight:
-    case ColorID::MozHtmlCellhighlight:
+    case ColorID::Selecteditem:
    case ColorID::MozMenuhover:
+    case ColorID::IMESelectedRawTextBackground:
+    case ColorID::IMESelectedConvertedTextBackground:
      idx = COLOR_HIGHLIGHT;
      break;
    case ColorID::MozMenubarhovertext:
@ -232,7 +224,9 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme,
      }
      // Fall through
    case ColorID::Highlighttext:
-    case ColorID::MozHtmlCellhighlighttext:
+    case ColorID::Selecteditemtext:
+    case ColorID::IMESelectedRawTextForeground:
+    case ColorID::IMESelectedConvertedTextForeground:
      idx = COLOR_HIGHLIGHTTEXT;
      break;
    case ColorID::Inactiveborder: