Bug 1693222 - Implement SelectedItem and SelectedItemText system colo…

…rs. r=mstange

Since Highlight / HighlightText are now equivalent to the text selection
ones, remove those too.

Differential Revision: https://phabricator.services.mozilla.com/D123964

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;
 }
 

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 {

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 */

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 {

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 */

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 */

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;
 }
 

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 */

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;

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 {

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 {

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 {

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%);
 

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 {

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 */

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;

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);
   }

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 {

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,

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();

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 {

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)) {

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.

testing/web-platform/tests/css/css-color/parsing/system-color-valid.html

@@ -23,6 +23,8 @@
 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>

toolkit/themes/shared/findbar.css

@@ -75,22 +75,22 @@ 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 {
   background-color: var(--lwt-toolbar-field-highlight, -moz-system-color(text-select-background-disabled, light));
 }
 
 :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));
 }