Bug 1453722 - Improvements to Dark Theme search bar. r?dao
MozReview-Commit-ID: AH3QVBRKymc
--- a/browser/components/nsBrowserGlue.js
+++ b/browser/components/nsBrowserGlue.js
@@ -754,16 +754,17 @@ BrowserGlue.prototype = {
description: gBrowserBundle.GetStringFromName("darkTheme.description"),
iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg",
textcolor: "white",
accentcolor: "black",
popup: "#4a4a4f",
popup_text: "rgb(249, 249, 250)",
popup_border: "#27272b",
toolbar_field_text: "rgb(249, 249, 250)",
+ toolbar_field_border: "rgba(249, 249, 250, 0.2)",
author: vendorShortName,
});
Normandy.init();
// Initialize the default l10n resource sources for L10nRegistry.
let locales = Services.locale.getPackagedLocales();
const appSource = new FileSource("app", locales, "resource://app/localization/{locale}/");
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -45,17 +45,21 @@
--toolbar-bgimage: none;
--toolbox-border-bottom-color: rgba(0,0,0,.3);
--panel-separator-color: hsla(210,4%,10%,.14);
}
:root[lwt-popup-brighttext] {
- --panel-separator-color: hsla(0,0%,80%,.25);
+ --panel-separator-color: rgba(249,249,250,.2);
+
+ --arrowpanel-dimmed: rgba(249,249,250,.1);
+ --arrowpanel-dimmed-further: rgba(249,249,250,.15);
+ --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
}
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
#main-menubar {
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -36,17 +36,21 @@
:root:-moz-lwtheme {
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-bgimage: none;
--toolbox-border-bottom-color: rgba(0,0,0,.3);
}
:root[lwt-popup-brighttext] {
- --panel-separator-color: hsla(0,0%,80%,.25);
+ --panel-separator-color: rgba(249,249,250,.2);
+
+ --arrowpanel-dimmed: rgba(249,249,250,.1);
+ --arrowpanel-dimmed-further: rgba(249,249,250,.15);
+ --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
}
#navigator-toolbox {
--tabs-border-color: rgba(0,0,0,.3);
}
#tabbrowser-tabs {
--tab-line-color: #0a84ff;
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -25,16 +25,21 @@
--chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
--chrome-selection-color: #fff;
--chrome-selection-background-color: #5675B9;
/* Url and search bars */
--lwt-toolbar-field-background-color: rgb(71, 71, 73);
--lwt-toolbar-field-color: var(--chrome-color);
--urlbar-separator-color: #5F6670;
+
+ /* !important to override LightweightThemeManager.addBuiltInTheme in
+ nsBrowserGlue.js */
+ --autocomplete-popup-background: #2A2A2E !important;
+ --autocomplete-popup-highlight-background: #0060DF;
}
:root:-moz-lwtheme-darktext {
--lwt-toolbar-field-background-color: #fff;
--chrome-background-color: #E3E4E6;
--chrome-color: #18191a;
--chrome-secondary-background-color: #f5f6f7;
--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -47,16 +47,20 @@
font-weight: normal;
background-color: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
margin: 0;
padding: 3px 6px;
color: var(--panel-disabled-color);
}
+:root[lwt-popup-brighttext] .search-panel-header {
+ color: var(--autocomplete-popup-color);
+}
+
.search-panel-header > label {
margin-top: 2px !important;
margin-bottom: 1px !important;
}
.search-panel-current-input > label {
margin: 2px 0 !important;
}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -67,17 +67,21 @@
--toolbar-bgimage: none;
--toolbox-border-bottom-color: rgba(0,0,0,.3);
--panel-separator-color: hsla(210,4%,10%,.14);
}
:root[lwt-popup-brighttext] {
- --panel-separator-color: hsla(0,0%,80%,.25);
+ --panel-separator-color: rgba(249,249,250,.2);
+
+ --arrowpanel-dimmed: rgba(249,249,250,.1);
+ --arrowpanel-dimmed-further: rgba(249,249,250,.15);
+ --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
}
#navigator-toolbox:-moz-lwtheme {
--tabs-border-color: rgba(0,0,0,.3);
}
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */