Bug 1297788 - Make urlbar autocomplete style match photon light/dark themes. r=jaws draft
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 21 Nov 2017 20:08:42 +0000
changeset 701497 466a104ccdccfe57051860cde277dda7155d47b6
parent 701496 6dc5319fdf541b98d452d93aab0e30e7e91544d5
child 701498 8ca1dabf8d35a8a6bbee16b881f0b9658c927eca
push id90186
push userbmo:ntim.bugs@gmail.com
push dateTue, 21 Nov 2017 20:09:27 +0000
reviewersjaws
bugs1297788
milestone59.0a1
Bug 1297788 - Make urlbar autocomplete style match photon light/dark themes. r=jaws MozReview-Commit-ID: IKnX5lLLj4L
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/urlbar-autocomplete.inc.css
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -13,16 +13,21 @@
   --toolbar-gbimage: none;
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
   --toolbar-non-lwt-textcolor: var(--chrome-color);
   --toolbar-non-lwt-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: .7;
 
   --tab-line-color: #0a84ff;
+
+  --urlbar-popup-background: var(--url-and-searchbar-background-color);
+  --urlbar-popup-color: var(--chrome-color);
+  --urlbar-popup-highlight-background: var(--chrome-selection-background-color);
+  --urlbar-popup-highlight-color: var(--chrome-selection-color);
 }
 
 :root:-moz-lwtheme-brighttext {
   /* Chrome */
   --chrome-background-color: hsl(240, 5%, 5%);
   --chrome-color: rgb(249, 249, 250);
   --chrome-secondary-background-color: hsl(240, 1%, 20%);
   --toolbox-border-bottom-color: hsla(240, 5%, 5%, .1);
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -1,29 +1,52 @@
 %if 0
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
+:root {
+  --urlbar-popup-background: -moz-field;
+  --urlbar-popup-color: -moz-fieldtext;
+  --urlbar-popup-highlight-background: Highlight;
+  --urlbar-popup-highlight-color: HighlightText;
+}
+
 #treecolAutoCompleteImage {
   max-width: 36px;
 }
 
+#PopupAutoCompleteRichResult {
+  background: var(--urlbar-popup-background);
+  color: var(--urlbar-popup-color);
+}
+
 #PopupAutoCompleteRichResult .autocomplete-richlistbox {
   padding: 4px 3px;
+  background: transparent;
+  color: inherit;
 }
 
 #PopupAutoCompleteRichResult .autocomplete-richlistitem {
   min-height: 30px;
   font: message-box;
   border-radius: 2px;
   padding-inline-start: var(--item-padding-start);
   /* For the space after the autocomplete text we have to use a transparent
      border instead of padding, because the latter would considered part of the
      scrollable area when generating the overflow events that we use to
      constrain the autocomplete result item size. */
   border-inline-end: var(--item-padding-end) solid transparent;
 }
 
+#PopupAutoCompleteRichResult .autocomplete-richlistitem[selected] {
+  background: var(--urlbar-popup-highlight-background);
+  color: var(--urlbar-popup-highlight-color);
+}
+
 :root[uidensity=touch] #PopupAutoCompleteRichResult .autocomplete-richlistitem {
   min-height: 40px;
 }
+
+#PopupAutoCompleteRichResult .search-panel-input-value {
+  color: var(--urlbar-popup-color);
+}