Bug 1418605 - The toolbar, toolbar_text, toolbar_field, toolbar_field_text, toolbar_field_border properties should apply to the findbar r?jaws,mconley,ntim,dao
MozReview-Commit-ID: 821d7kR41mJ
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -453,16 +453,21 @@ notification[value="translation"] menuli
}
.browserContainer > findbar {
background-color: -moz-dialog;
color: -moz-DialogText;
text-shadow: none;
}
+.browserContainer > findbar:-moz-lwtheme {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--toolbar-color);
+}
+
/* Tabstrip */
%include ../shared/tabs.inc.css
#tabbrowser-tabs {
/* override the global style to allow the selected tab to be above the nav-bar */
z-index: auto;
}
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -220,16 +220,17 @@
%include ../shared/toolbarbutton-icons.inc.css
%include ../shared/menupanel.inc.css
/* Override OSX-specific toolkit findbar button styles */
.findbar-button {
background: none;
box-shadow: none;
border: none;
+ color: inherit;
}
/* On Mac, native buttons keep their full opacity when they become disabled
* and only the glyph or text on top of them becomes less opaque. */
:root:not([customizing]) #back-button[disabled="true"] {
opacity: 1 !important;
/* Disabled toolbar buttons get an opacity of 0.4 which multiplies
* their fill-opacity of 0.7. calc() doesn't work here - we'd need
@@ -666,16 +667,22 @@ html|input.urlbar-input {
.browserContainer > findbar {
background: @scopeBarBackground@;
border-top: @scopeBarSeparatorBorder@;
color: -moz-DialogText;
text-shadow: none;
}
+.browserContainer > findbar:-moz-lwtheme {
+ background-color: var(--toolbar-bgcolor);
+ background-image: none;
+ color: var(--toolbar-color);
+}
+
.openintabs-menuitem {
list-style-image: none;
}
/* ::::: tabbrowser ::::: */
.tabbrowser-tabbox {
margin: 0;
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -89,16 +89,17 @@ toolbar[brighttext] {
.tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
background-color: Highlight;
}
.findbar-button {
-moz-appearance: none;
padding: 0;
+ color: inherit;
}
toolbar .toolbarbutton-1 {
-moz-appearance: none;
margin: 0;
padding: 0 var(--toolbarbutton-outer-padding);
-moz-box-pack: center;
}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -681,16 +681,21 @@ html|*.urlbar-input:-moz-lwtheme::placeh
}
.browserContainer > findbar {
background-color: -moz-dialog;
color: -moz-DialogText;
text-shadow: none;
}
+.browserContainer > findbar:-moz-lwtheme {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--toolbar-color);
+}
+
/* Tabstrip */
#TabsToolbar {
min-height: 0;
padding: 0;
}
%include ../shared/tabs.inc.css
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -16,8 +16,9 @@ support-files =
[browser_ext_themes_static_onUpdated.js]
[browser_ext_themes_tab_loading.js]
[browser_ext_themes_tab_text.js]
[browser_ext_themes_toolbar_fields.js]
[browser_ext_themes_toolbars.js]
[browser_ext_themes_toolbarbutton_icons.js]
[browser_ext_themes_toolbarbutton_colors.js]
[browser_ext_themes_arrowpanels.js]
+[browser_ext_themes_findbar.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js
@@ -0,0 +1,103 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the toolbar and toolbar_field properties also theme the findbar.
+
+add_task(async function setup() {
+ await SpecialPowers.pushPrefEnv({
+ set: [["extensions.webextensions.themes.enabled", true]],
+ });
+});
+
+add_task(async function test_support_toolbar_properties_on_findbar() {
+ const TOOLBAR_COLOR = "#ff00ff";
+ const TOOLBAR_TEXT_COLOR = "#9400ff";
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "images": {
+ "headerURL": "image1.png",
+ },
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ "toolbar": TOOLBAR_COLOR,
+ "toolbar_text": TOOLBAR_TEXT_COLOR,
+ },
+ },
+ },
+ files: {
+ "image1.png": BACKGROUND,
+ },
+ });
+
+ await extension.startup();
+
+ let findbar_button = document.getAnonymousElementByAttribute(gFindBar, "anonid", "highlight");
+
+ info("Checking findbar background is set as toolbar color");
+ Assert.equal(window.getComputedStyle(gFindBar).backgroundColor,
+ hexToCSS(TOOLBAR_COLOR),
+ "Findbar background color should be the same as toolbar background color.");
+
+ info("Checking findbar and button text color is set as toolbar text color");
+ Assert.equal(window.getComputedStyle(gFindBar).color,
+ hexToCSS(TOOLBAR_TEXT_COLOR),
+ "Findbar text color should be the same as toolbar text color.");
+ Assert.equal(window.getComputedStyle(findbar_button).color,
+ hexToCSS(TOOLBAR_TEXT_COLOR),
+ "Findbar button text color should be the same as toolbar text color.");
+
+ await extension.unload();
+});
+
+add_task(async function test_support_toolbar_field_properties_on_findbar() {
+ const TOOLBAR_FIELD_COLOR = "#ff00ff";
+ const TOOLBAR_FIELD_TEXT_COLOR = "#9400ff";
+ const TOOLBAR_FIELD_BORDER_COLOR = "#ffffff";
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "images": {
+ "headerURL": "image1.png",
+ },
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ "toolbar_field": TOOLBAR_FIELD_COLOR,
+ "toolbar_field_text": TOOLBAR_FIELD_TEXT_COLOR,
+ "toolbar_field_border": TOOLBAR_FIELD_BORDER_COLOR,
+ },
+ },
+ },
+ files: {
+ "image1.png": BACKGROUND,
+ },
+ });
+
+ await extension.startup();
+
+ let findbar_textbox =
+ document.getAnonymousElementByAttribute(gFindBar, "anonid", "findbar-textbox");
+
+ let findbar_prev_button =
+ document.getAnonymousElementByAttribute(gFindBar, "anonid", "find-previous");
+
+ let findbar_next_button =
+ document.getAnonymousElementByAttribute(gFindBar, "anonid", "find-next");
+
+ info("Checking findbar textbox background is set as toolbar field background color");
+ Assert.equal(window.getComputedStyle(findbar_textbox).backgroundColor,
+ hexToCSS(TOOLBAR_FIELD_COLOR),
+ "Findbar textbox background color should be the same as toolbar field color.");
+
+ info("Checking findbar textbox color is set as toolbar field text color");
+ Assert.equal(window.getComputedStyle(findbar_textbox).color,
+ hexToCSS(TOOLBAR_FIELD_TEXT_COLOR),
+ "Findbar textbox text color should be the same as toolbar field text color.");
+ testBorderColor(findbar_textbox, TOOLBAR_FIELD_BORDER_COLOR);
+ testBorderColor(findbar_prev_button, TOOLBAR_FIELD_BORDER_COLOR);
+ testBorderColor(findbar_next_button, TOOLBAR_FIELD_BORDER_COLOR);
+
+ await extension.unload();
+});
--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -35,23 +35,31 @@ findbar[noanim] {
.findbar-closebutton {
margin: 0 8px;
}
/* Search field */
.findbar-textbox {
-moz-appearance: none;
- border: 1px solid ThreeDShadow;
+ background-color: -moz-Field;
+ border: 1px solid;
+ border-color: var(--lwt-toolbar-field-border-color, ThreeDShadow);
box-shadow: 0 0 1px 0 ThreeDShadow inset;
+ color: -moz-FieldText;
margin: 0;
padding: 5px;
width: 14em;
}
+.findbar-textbox:-moz-lwtheme {
+ background-color: var(--url-and-searchbar-background-color, -moz-Field);
+ color: var(--url-and-searchbar-color, -moz-FieldText);
+}
+
.findbar-textbox:-moz-locale-dir(ltr) {
border-radius: 3px 0 0 3px;
border-right-width: 0;
}
.findbar-textbox:-moz-locale-dir(rtl) {
border-radius: 0 3px 3px 0;
border-left-width: 0;
@@ -107,16 +115,21 @@ findbar[noanim] {
list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
border-inline-end-width: 0;
}
.findbar-find-next {
list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
}
+.findbar-find-next:-moz-lwtheme,
+.findbar-find-previous:-moz-lwtheme {
+ border-color: var(--lwt-toolbar-field-border-color);
+}
+
.findbar-find-previous > .toolbarbutton-icon,
.findbar-find-next > .toolbarbutton-icon {
margin: 0;
}
.findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
.findbar-find-next[disabled="true"] > .toolbarbutton-icon {
opacity: .4;
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -25,17 +25,16 @@ findbar[hidden] {
findbar[noanim] {
transition-duration: 0s !important;
transition-delay: 0s !important;
}
findbar:-moz-lwtheme {
-moz-appearance: none;
- background: none;
border-style: none;
}
.findbar-container {
padding-inline-start: 2px;
padding-top: 4px;
padding-bottom: 4px;
}
@@ -64,23 +63,30 @@ label.findbar-find-fast:-moz-lwtheme,
.findbar-find-next,
.findbar-find-previous,
.findbar-highlight,
.findbar-case-sensitive,
.findbar-entire-word {
-moz-appearance: none;
border-radius: 10000px;
- border: @roundButtonBorder@;
+ border-width: @roundButtonBorderWidth@;
+ border-style: @roundButtonBorderStyle@;
+ border-color: @roundButtonBorderColor@;
color: @roundButtonColor@;
background: @roundButtonBackground@;
box-shadow: @roundButtonShadow@;
margin: 0;
}
+.findbar-find-next:-moz-lwtheme,
+.findbar-find-previous:-moz-lwtheme {
+ background-image: linear-gradient(rgba(255,255,255,.6) 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.1));
+}
+
@media (-moz-mac-yosemite-theme) {
.findbar-find-previous,
.findbar-find-next {
border-radius: 3px;
box-shadow: none;
}
}
@@ -126,25 +132,36 @@ label.findbar-find-fast:-moz-lwtheme,
box-shadow: var(--focus-ring-box-shadow), @roundButtonPressedShadow@;
}
/* Search field */
.findbar-textbox {
position: relative;
-moz-appearance: none;
- border: @roundButtonBorder@;
+ border-width: @roundButtonBorderWidth@;
+ border-style: @roundButtonBorderStyle@;
+ border-color: var(--lwt-toolbar-field-border-color, @roundButtonBorderColor@);
border-radius: 10000px 0 0 10000px;
box-shadow: @roundButtonShadow@;
- background: url("chrome://global/skin/icons/search-textbox.svg") -moz-Field no-repeat 5px center;
+ background-image: url("chrome://global/skin/icons/search-textbox.svg");
+ background-color: -moz-Field;
+ background-repeat: no-repeat;
+ background-position: 5px center;
+ color: -moz-FieldText;
margin: 0;
padding: 2px 8px;
padding-inline-start: 19px;
}
+.findbar-textbox:-moz-lwtheme {
+ background-color: var(--url-and-searchbar-background-color, -moz-Field);
+ color: var(--url-and-searchbar-color, -moz-FieldText);
+}
+
.findbar-textbox:-moz-locale-dir(rtl) {
border-radius: 0 10000px 10000px 0;
background-position-x: calc(100% - 5px);
}
@media (-moz-mac-yosemite-theme) {
.findbar-textbox {
border-top-left-radius: 3px;
@@ -204,16 +221,21 @@ label.findbar-find-fast:-moz-lwtheme,
.findbar-find-next {
list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
-moz-context-properties: fill;
fill: -moz-dialogtext;
padding-inline-end: 7px;
}
+.findbar-find-next:-moz-lwtheme,
+.findbar-find-previous:-moz-lwtheme {
+ border-color: var(--lwt-toolbar-field-border-color);
+}
+
.findbar-find-previous[disabled] {
fill: GrayText;
}
.findbar-find-next[disabled] {
fill: GrayText;
}
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -218,17 +218,19 @@ label[disabled="true"] {
notification > button {
margin: 0 3px;
padding: 1px 10px;
min-width: 60px;
min-height: 16px;
-moz-appearance: none;
border-radius: 10000px;
- border: @roundButtonBorder@;
+ border-width: @roundButtonBorderWidth@;
+ border-style: @roundButtonBorderStyle@;
+ border-color: @roundButtonBorderColor@;
text-shadow: @loweredShadow@;
color: @roundButtonColor@;
background: @roundButtonBackground@;
box-shadow: @roundButtonShadow@;
}
notification > button:active:hover {
color: @roundButtonColor@;
--- a/toolkit/themes/osx/global/shared.inc
+++ b/toolkit/themes/osx/global/shared.inc
@@ -1,14 +1,16 @@
%filter substitution
%define loweredShadow 0 1px rgba(255, 255, 255, .4)
%define focusRingShadow 0 0 0 1px -moz-mac-focusring inset, 0 0 0 1px -moz-mac-focusring
-%define roundButtonBorder 1px solid rgba(0,0,0,.35)
+%define roundButtonBorderWidth 1px
+%define roundButtonBorderStyle solid
+%define roundButtonBorderColor rgba(0,0,0,.35)
%define roundButtonColor black
%define roundButtonBackground linear-gradient(#f6f6f6, #e9e9e9)
%define roundButtonShadow 0 1px rgba(255,255,255,.5), inset 0 1px 1px rgba(255,255,255,.5)
%define roundButtonPressedBackground #dadada
%define roundButtonPressedShadow 0 1px rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.2)
%define scopeBarBackground linear-gradient(#E8E8E8, #D0D0D0) repeat-x
%define scopeBarSeparatorBorder 1px solid #888
--- a/toolkit/themes/windows/global/findBar.css
+++ b/toolkit/themes/windows/global/findBar.css
@@ -42,23 +42,31 @@ findbar[noanim] {
border: none;
}
/* Search field */
.findbar-textbox {
-moz-appearance: none;
- border: 1px solid ThreeDShadow;
+ background-color: -moz-Field;
+ border: 1px solid;
+ border-color: var(--lwt-toolbar-field-border-color, ThreeDShadow);
border-radius: 2px 0 0 2px;
+ color: -moz-FieldText;
margin: 0;
padding: 1px 5px;
width: 14em;
}
+.findbar-textbox:-moz-lwtheme {
+ background-color: var(--url-and-searchbar-background-color, -moz-Field);
+ color: var(--url-and-searchbar-color, -moz-FieldText);
+}
+
.findbar-textbox:-moz-locale-dir(rtl) {
border-radius: 0 2px 2px 0;
}
.findbar-textbox[focused="true"] {
border-color: Highlight;
}
@@ -100,16 +108,21 @@ findbar[noanim] {
.findbar-find-previous {
list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
}
.findbar-find-next {
list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
}
+.findbar-find-next:-moz-lwtheme,
+.findbar-find-previous:-moz-lwtheme {
+ border-color: var(--lwt-toolbar-field-border-color);
+}
+
.findbar-find-previous,
.findbar-find-previous:not([disabled]):active {
border-right: none;
border-left: none;
}
.findbar-find-previous > .toolbarbutton-icon,
.findbar-find-next > .toolbarbutton-icon {