Bug 1449324 - Make popup_border affect the autocomplete popups border color. r=dao
MozReview-Commit-ID: 2omRfDTdRWr
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -101,15 +101,18 @@ const ThemeVariableMap = [
} else {
element.setAttribute("lwt-popup-brighttext", "true");
}
element.style.setProperty(secondaryVariable, `rgba(${r}, ${g}, ${b}, 0.5)`);
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
}],
+ ["--autocomplete-popup-border-color", {
+ lwtProperty: "popup_border"
+ }],
["--autocomplete-popup-highlight-background", {
lwtProperty: "popup_highlight"
}],
["--autocomplete-popup-highlight-color", {
lwtProperty: "popup_highlight_text"
}],
];
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -2,16 +2,17 @@
/* 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 {
--autocomplete-popup-background: -moz-field;
--autocomplete-popup-color: -moz-fieldtext;
+ --autocomplete-popup-border-color: ThreeDShadow;
--autocomplete-popup-highlight-background: Highlight;
--autocomplete-popup-highlight-color: HighlightText;
--autocomplete-popup-secondary-color: GrayText;
}
:root:-moz-lwtheme {
--autocomplete-popup-background: #fff;
--autocomplete-popup-color: #0c0c0d;
@@ -24,16 +25,17 @@
--urlbar-popup-url-color: #0a84ff;
--urlbar-popup-action-color: #30e60b;
}
#PopupAutoCompleteRichResult,
#PopupSearchAutoComplete {
background: var(--autocomplete-popup-background);
color: var(--autocomplete-popup-color);
+ border-color: var(--autocomplete-popup-border-color);
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
padding: 4px 3px;
background: transparent;
color: inherit;
}
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -1,13 +1,14 @@
"use strict";
// This test checks whether applied WebExtension themes that attempt to change
// popup properties are applied correctly to the autocomplete bar.
const POPUP_COLOR = "#85A400";
+const POPUP_BORDER_COLOR = "#220300";
const POPUP_TEXT_COLOR_DARK = "#000000";
const POPUP_TEXT_COLOR_BRIGHT = "#ffffff";
const POPUP_SELECTED_COLOR = "#9400ff";
const POPUP_SELECTED_TEXT_COLOR = "#09b9a6";
const POPUP_URL_COLOR_DARK = "#1c78d4";
const POPUP_ACTION_COLOR_DARK = "#008f8a";
const POPUP_URL_COLOR_BRIGHT = "#0a84ff";
@@ -80,16 +81,17 @@ add_task(async function test_popup_url()
"theme": {
"images": {
"headerURL": "image1.png",
},
"colors": {
"accentcolor": ACCENT_COLOR,
"textcolor": TEXT_COLOR,
"popup": POPUP_COLOR,
+ "popup_border": POPUP_BORDER_COLOR,
"popup_text": POPUP_TEXT_COLOR_DARK,
"popup_highlight": POPUP_SELECTED_COLOR,
"popup_highlight_text": POPUP_SELECTED_TEXT_COLOR,
},
},
},
files: {
"image1.png": BACKGROUND,
@@ -123,16 +125,18 @@ add_task(async function test_popup_url()
"Should get maxResults=" + maxResults + " results");
let popupCS = window.getComputedStyle(popup);
Assert.equal(popupCS.backgroundColor,
`rgb(${hexToRGB(POPUP_COLOR).join(", ")})`,
`Popup background color should be set to ${POPUP_COLOR}`);
+ testBorderColor(popup, POPUP_BORDER_COLOR);
+
Assert.equal(popupCS.color,
`rgb(${hexToRGB(POPUP_TEXT_COLOR_DARK).join(", ")})`,
`Popup color should be set to ${POPUP_TEXT_COLOR_DARK}`);
// Set the selected attribute to true to test the highlight popup properties
results[1].setAttribute("selected", "true");
let resultCS = window.getComputedStyle(results[1]);