mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-25 05:41:12 +00:00
Bug 1417880: Allow theming arrow panels. r=jaws, ntim
This commit is contained in:
Connor Masini
parent
040171056c
commit
2c622ac77f
@ -23,4 +23,7 @@ const ThemeVariableMap = [
|
||||
["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
|
||||
["--lwt-toolbarbutton-hover-background", "button_background_hover"],
|
||||
["--lwt-toolbarbutton-active-background", "button_background_active"],
|
||||
["--arrowpanel-background", "popup"],
|
||||
["--arrowpanel-color", "popup_text"],
|
||||
["--arrowpanel-border-color", "popup_border"],
|
||||
];
|
||||
|
||||
@ -951,6 +951,18 @@ panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
|
||||
/* Unset the min-height constraint, because that works better for a text-only button. */
|
||||
#appMenu-zoomReset-button {
|
||||
min-height: unset;
|
||||
border: 1px solid var(--panel-separator-color);
|
||||
border-radius: 10000px;
|
||||
padding: 1px 8px;
|
||||
background-color: var(--arrowpanel-dimmed);
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button@buttonStateHover@ {
|
||||
background-color: var(--arrowpanel-dimmed-further);
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button@buttonStateActive@ {
|
||||
background-color: var(--arrowpanel-dimmed-even-further);
|
||||
}
|
||||
|
||||
#appMenu-zoomReset-button > .toolbarbutton-text {
|
||||
@ -968,14 +980,6 @@ panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Using this selector, because this way the hover and active selectors will apply properly. */
|
||||
.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 10000px;
|
||||
padding: 1px 8px;
|
||||
}
|
||||
|
||||
.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
|
||||
font-size: 1em;
|
||||
padding-inline-start: 0;
|
||||
|
||||
@ -159,6 +159,9 @@ class Theme {
|
||||
case "toolbar_vertical_separator":
|
||||
case "button_background_hover":
|
||||
case "button_background_active":
|
||||
case "popup":
|
||||
case "popup_text":
|
||||
case "popup_border":
|
||||
this.lwtStyles[color] = cssColor;
|
||||
break;
|
||||
}
|
||||
|
||||
@ -152,6 +152,18 @@
|
||||
"button_background_active": {
|
||||
"$ref": "ThemeColor",
|
||||
"optional": true
|
||||
},
|
||||
"popup": {
|
||||
"$ref": "ThemeColor",
|
||||
"optional": true
|
||||
},
|
||||
"popup_text": {
|
||||
"$ref": "ThemeColor",
|
||||
"optional": true
|
||||
},
|
||||
"popup_border": {
|
||||
"$ref": "ThemeColor",
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"additionalProperties": { "$ref": "UnrecognizedProperty" }
|
||||
|
||||
@ -20,3 +20,4 @@ support-files =
|
||||
[browser_ext_themes_toolbars.js]
|
||||
[browser_ext_themes_toolbarbutton_icons.js]
|
||||
[browser_ext_themes_toolbarbutton_colors.js]
|
||||
[browser_ext_themes_arrowpanels.js]
|
||||
|
||||
@ -0,0 +1,79 @@
|
||||
"use strict";
|
||||
|
||||
function openIdentityPopup() {
|
||||
let promise = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popupshown");
|
||||
gIdentityHandler._identityBox.click();
|
||||
return promise;
|
||||
}
|
||||
|
||||
function closeIdentityPopup() {
|
||||
let promise = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
|
||||
gIdentityHandler._identityPopup.hidePopup();
|
||||
return promise;
|
||||
}
|
||||
|
||||
// This test checks applied WebExtension themes that attempt to change
|
||||
// popup properties
|
||||
|
||||
add_task(async function test_popup_styling(browser, accDoc) {
|
||||
const POPUP_BACKGROUND_COLOR = "#FF0000";
|
||||
const POPUP_TEXT_COLOR = "#008000";
|
||||
const POPUP_BORDER_COLOR = "#0000FF";
|
||||
|
||||
let extension = ExtensionTestUtils.loadExtension({
|
||||
manifest: {
|
||||
"theme": {
|
||||
"images": {
|
||||
"headerURL": "image1.png",
|
||||
},
|
||||
"colors": {
|
||||
"accentcolor": ACCENT_COLOR,
|
||||
"textcolor": TEXT_COLOR,
|
||||
"popup": POPUP_BACKGROUND_COLOR,
|
||||
"popup_text": POPUP_TEXT_COLOR,
|
||||
"popup_border": POPUP_BORDER_COLOR,
|
||||
},
|
||||
},
|
||||
},
|
||||
files: {
|
||||
"image1.png": BACKGROUND,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
await BrowserTestUtils.withNewTab({gBrowser, url: "https://example.com"}, async function(browser) {
|
||||
await extension.startup();
|
||||
|
||||
// Open the information arrow panel
|
||||
await openIdentityPopup();
|
||||
|
||||
let arrowContent = document.getAnonymousElementByAttribute(gIdentityHandler._identityPopup, "class", "panel-arrowcontent");
|
||||
let arrowContentComputedStyle = window.getComputedStyle(arrowContent);
|
||||
// Ensure popup background color was set properly
|
||||
Assert.equal(
|
||||
arrowContentComputedStyle.getPropertyValue("background-color"),
|
||||
`rgb(${hexToRGB(POPUP_BACKGROUND_COLOR).join(", ")})`,
|
||||
"Popup background color should have been themed"
|
||||
);
|
||||
|
||||
// Ensure popup text color was set properly
|
||||
Assert.equal(
|
||||
arrowContentComputedStyle.getPropertyValue("color"),
|
||||
`rgb(${hexToRGB(POPUP_TEXT_COLOR).join(", ")})`,
|
||||
"Popup text color should have been themed"
|
||||
);
|
||||
|
||||
// Ensure popup border color was set properly
|
||||
if (AppConstants.platform == "macosx") {
|
||||
Assert.ok(
|
||||
arrowContentComputedStyle.getPropertyValue("box-shadow").includes(`rgb(${hexToRGB(POPUP_BORDER_COLOR).join(", ")})`),
|
||||
"Popup border color should be set"
|
||||
);
|
||||
} else {
|
||||
testBorderColor(arrowContent, POPUP_BORDER_COLOR);
|
||||
}
|
||||
|
||||
await closeIdentityPopup();
|
||||
await extension.unload();
|
||||
});
|
||||
});
|
||||
@ -10,21 +10,6 @@ add_task(async function setup() {
|
||||
]});
|
||||
});
|
||||
|
||||
function testBorderColor(element, expected) {
|
||||
Assert.equal(window.getComputedStyle(element).borderLeftColor,
|
||||
hexToCSS(expected),
|
||||
"Field left border color should be set.");
|
||||
Assert.equal(window.getComputedStyle(element).borderRightColor,
|
||||
hexToCSS(expected),
|
||||
"Field right border color should be set.");
|
||||
Assert.equal(window.getComputedStyle(element).borderTopColor,
|
||||
hexToCSS(expected),
|
||||
"Field top border color should be set.");
|
||||
Assert.equal(window.getComputedStyle(element).borderBottomColor,
|
||||
hexToCSS(expected),
|
||||
"Field bottom border color should be set.");
|
||||
}
|
||||
|
||||
add_task(async function test_support_toolbar_field_properties() {
|
||||
const TOOLBAR_FIELD_BACKGROUND = "#ff00ff";
|
||||
const TOOLBAR_FIELD_COLOR = "#00ff00";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* exported ACCENT_COLOR, BACKGROUND, ENCODED_IMAGE_DATA, FRAME_COLOR, TAB_TEXT_COLOR,
|
||||
TEXT_COLOR, BACKGROUND_TAB_TEXT_COLOR, imageBufferFromDataURI, hexToCSS, hexToRGB */
|
||||
TEXT_COLOR, BACKGROUND_TAB_TEXT_COLOR, imageBufferFromDataURI, hexToCSS, hexToRGB, testBorderColor */
|
||||
|
||||
"use strict";
|
||||
|
||||
@ -53,3 +53,19 @@ function imageBufferFromDataURI(encodedImageData) {
|
||||
let decodedImageData = atob(encodedImageData);
|
||||
return Uint8Array.from(decodedImageData, byte => byte.charCodeAt(0)).buffer;
|
||||
}
|
||||
|
||||
function testBorderColor(element, expected) {
|
||||
let computedStyle = window.getComputedStyle(element);
|
||||
Assert.equal(computedStyle.borderLeftColor,
|
||||
hexToCSS(expected),
|
||||
"Element left border color should be set.");
|
||||
Assert.equal(computedStyle.borderRightColor,
|
||||
hexToCSS(expected),
|
||||
"Element right border color should be set.");
|
||||
Assert.equal(computedStyle.borderTopColor,
|
||||
hexToCSS(expected),
|
||||
"Element top border color should be set.");
|
||||
Assert.equal(computedStyle.borderBottomColor,
|
||||
hexToCSS(expected),
|
||||
"Element bottom border color should be set.");
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user