Bug 1438458 - Change initial value and autocomplete value to respectively --theme-highlight-color-yellow and --theme-selection-color in the devtools autocomplete listbox - r=nchevobbe draft
authorArthur Deschamps <arthur.deschamps1208@hotmail.com>
Tue, 20 Feb 2018 10:32:00 +0100
changeset 757293 28bc79c03bbfc6c9cd2b7e1cf270be8d3aedaf8b
parent 757190 06ec2a77f8c6160e23a29b8a8d162584995ff403
push id99744
push userbmo:arthur.deschamps1208@hotmail.com
push dateTue, 20 Feb 2018 17:13:16 +0000
reviewersnchevobbe
bugs1438458
milestone60.0a1
Bug 1438458 - Change initial value and autocomplete value to respectively --theme-highlight-color-yellow and --theme-selection-color in the devtools autocomplete listbox - r=nchevobbe MozReview-Commit-ID: KAjAPawDm6h
devtools/client/themes/common.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -133,44 +133,40 @@ html|button, html|select {
 .devtools-autocomplete-listbox .autocomplete-item:hover {
   background-color: rgba(128,128,128,0.3);
 }
 
 .theme-dark .devtools-autocomplete-listbox .autocomplete-item:hover {
   background-color: rgba(0,0,0,0.5);
 }
 
+.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 > .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%);
+.devtools-autocomplete-listbox .autocomplete-selected > span,
+.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > span {
+  color: var(--theme-selection-color);
 }
 
-.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 > .initial-value,
+.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > .initial-value {
+  color: var(--theme-highlight-yellow);
 }
 
 /* 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;