Bug 1297788 - Make urlbar autocomplete style match photon light/dark themes. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 21 Nov 2017 20:08:42 +0000
changeset 701818 c8d3ad173dbcc225b69ec710bce5b5bec6b13955
parent 701817 83a3d32d81e065995da575836d9581e5bb396ec6
child 701819 5a9be669bd5cf3113d5757b30b124460dde0378a
push id90298
push userbmo:bpostelnicu@mozilla.com
push dateWed, 22 Nov 2017 10:54:01 +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);
+}