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 759641 055b7e1bdb57c838ddc128887a16aac3e52b8d64
parent 756682 50a26bd1c5af69f7aa710a6b5513e37753201be4
push id100418
push userbmo:arthur.deschamps1208@hotmail.com
push dateMon, 26 Feb 2018 09:56:00 +0000
reviewersnchevobbe
bugs1438458
milestone60.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
@@ -125,46 +125,48 @@ html|button, html|select {
 
 .theme-firebug .devtools-autocomplete-popup {
   border-color: var(--theme-splitter-color);
   border-radius: 5px;
   font-size: var(--theme-autompletion-font-size);
   background: var(--theme-body-background);
 }
 
-.devtools-autocomplete-listbox .autocomplete-selected,
 .devtools-autocomplete-listbox .autocomplete-item:hover {
-  background-color: rgba(128,128,128,0.3);
+  background: var(--theme-selection-background-hover);
 }
 
-.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;
 }
 
+.devtools-autocomplete-listbox .autocomplete-selected,
+.devtools-autocomplete-listbox .autocomplete-selected:hover,
+.theme-dark .devtools-autocomplete-listbox .autocomplete-selected,
+.theme-dark .devtools-autocomplete-listbox .autocomplete-selected:hover {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected > span,
 .theme-dark .devtools-autocomplete-listbox .autocomplete-selected > span {
-  color: #eee;
+  color: var(--theme-selection-color);
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected > .initial-value,
+.theme-dark .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;