Bug 1438458 - Differentiate hover and selected colors in the devtools autocomplete popup - r=nchevobbe draft
authorArthur Deschamps <arthur.deschamps1208@hotmail.com>
Tue, 20 Feb 2018 19:09:33 +0100
changeset 812352 fe8b8a93830f26eb0976d0825aa0861a8b6da406
parent 812281 8f49b2a0e003fe63da04aab9714ddc62bcb7a65c
push id114534
push userbmo:nchevobbe@mozilla.com
push dateFri, 29 Jun 2018 07:12:11 +0000
reviewersnchevobbe
bugs1438458
milestone63.0a1
Bug 1438458 - Differentiate hover and selected colors in the devtools autocomplete popup - r=nchevobbe MozReview-Commit-ID: GNFea0JLBQ2
devtools/client/themes/common.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -152,46 +152,40 @@ html|button, html|select {
 
 .theme-dark .devtools-autocomplete-popup,
 .theme-dark .CodeMirror-hints,
 .theme-dark .CodeMirror-Tern-tooltip {
   border: 1px solid hsl(210,11%,10%);
   background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
 }
 
-.devtools-autocomplete-listbox .autocomplete-selected,
 .devtools-autocomplete-listbox .autocomplete-item:hover {
-  background-color: rgba(128,128,128,0.3);
-}
-
-.theme-dark .devtools-autocomplete-listbox .autocomplete-selected,
-.theme-dark .devtools-autocomplete-listbox .autocomplete-item:hover {
-  background-color: rgba(0,0,0,0.5);
-}
-
-.devtools-autocomplete-listbox .autocomplete-selected > .autocomplete-value,
-.devtools-autocomplete-listbox:focus .autocomplete-selected > .initial-value {
-  color: #222;
-}
-
-.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > .autocomplete-value,
-.theme-dark .devtools-autocomplete-listbox:focus .autocomplete-selected > .initial-value {
-  color: hsl(208,100%,60%);
+  background: var(--theme-selection-background-hover);
 }
 
 .devtools-autocomplete-listbox .autocomplete-item > span {
   color: #666;
 }
 
 .theme-dark .devtools-autocomplete-listbox .autocomplete-item > span {
   color: #ccc;
 }
 
-.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > span {
-  color: #eee;
+.devtools-autocomplete-listbox .autocomplete-selected,
+.devtools-autocomplete-listbox .autocomplete-selected:hover {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected > span {
+  color: var(--theme-selection-color);
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected > .initial-value {
+  font-weight: bold;
 }
 
 /* Autocomplete list clone used for accessibility. */
 
 .devtools-autocomplete-list-aria-clone {
   /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */
   position: fixed;
   overflow: hidden;