Bug 1453722 - Improvements to Dark Theme search bar. r?dao draft
authorHarry Twyford <htwyford@mozilla.com>
Tue, 22 May 2018 10:45:05 -0400
changeset 798338 83a9d6b97e0cdd1d07cb05f39c93675038a9a6b9
parent 797038 75802eb21b54605b67896b3c6c2982f7a43a08d2
push id110716
push userbmo:htwyford@mozilla.com
push dateTue, 22 May 2018 16:56:02 +0000
reviewersdao
bugs1453722
milestone62.0a1
Bug 1453722 - Improvements to Dark Theme search bar. r?dao MozReview-Commit-ID: 7JX1bO5rzCr
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/searchbar.inc.css
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -27,22 +27,23 @@
   --chrome-selection-background-color: #5675B9;
 
   /* Url and search bars */
   --lwt-toolbar-field-background-color: rgb(71, 71, 73);
   --lwt-toolbar-field-border-color: rgba(249, 249, 250, 0.2);
   --lwt-toolbar-field-color: var(--chrome-color);
   --urlbar-separator-color: #5F6670;
 
-  --autocomplete-popup-background: #2A2A2E;
+  /* !important to override LightweightThemeManager.addBuiltInTheme in 
+     nsBrowserGlue.js */
+  --autocomplete-popup-background: #2A2A2E !important;
   --autocomplete-popup-highlight-background:  #0060DF;
   --autocomplete-popup-color: var(--chrome-color);
 
-  --arrowpanel-dimmed: rgba(12,12,13,0.30);
-  --arrowpanel-dimmed-further: rgba(12,12,13,0.40);
+  --arrowpanel-dimmed: rgba(249,249,250,0.10);
 }
 
 :root:-moz-lwtheme-darktext {
   --lwt-toolbar-field-background-color: #fff;
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
   --chrome-secondary-background-color: #f5f6f7;
   --toolbox-border-bottom-color: #cccccc;
--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -46,26 +46,28 @@
 .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-current-input,
 .search-panel-tree[collapsed=true] + .search-one-offs > .search-panel-one-offs,
 .search-panel-tree[collapsed=true] + .search-one-offs > vbox > .addengine-item:last-of-type {
   border-bottom: 1px solid var(--panel-separator-color);
 }
 
 .search-panel-header {
   font-weight: normal;
-  font-size: 11px;
   background-color: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
   margin: 0;
   padding: 3px 6px;
   color: var(--autocomplete-popup-secondary-color);
 }
 
+/* Dark theme requires that the search panel is darker
+   than the arrowpanel color */
 :root[lwt-popup-brighttext] .search-panel-header {
-  color: var(--autocomplete-popup-highlight-color);
+  background-color: #4A4A4F;
+  color: var(--autocomplete-popup-color);
 }
 
 .search-panel-header > label {
   margin-top: 2px !important;
   margin-bottom: 1px !important;
 }
 
 .search-panel-current-input > label {
@@ -80,17 +82,17 @@
   margin: 0 !important;
   border-top: 1px solid var(--panel-separator-color);
   background-color: var(--arrowpanel-dimmed);
   /* Bug 1108841: prevent font-size from affecting the layout */
   line-height: 0;
 }
 
 :root[lwt-popup-brighttext] .search-panel-one-offs {
-  border-top: 1px solid rgba(249,249,250,0.10);
+  background-color: #4A4A4F;
 }
 
 .searchbar-engine-one-off-item {
   -moz-appearance: none;
   display: inline-block;
   min-width: 48px;
   height: 32px;
   margin: 0;