Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-01-08 12:22:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1417880: Allow theming arrow panels(popups). r=jaws,mconley,ntim

Browse Source 
MozReview-Commit-ID: 9f1sSzaGZzf

--HG--
extra : rebase_source : dcebee0563d4d673ac5afc2ee82d6cc5cbeab943
This commit is contained in:
Connor Masini 2018-02-07 00:22:22 -05:00
parent 4e9c3d2fe2
commit 134774e84b
9 changed files with 136 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
browser/themes/shared/customizableui/panelUI.inc.css
View File

@ -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;

1
browser/themes/shared/sidebar.inc.css
View File

@ -104,6 +104,7 @@ toolbarseparator + #sidebar-extensions-separator {
list-style-image: none;
background: url(chrome://browser/skin/check.svg) no-repeat transparent;
background-size: 11px 11px;
color: var(--arrowpanel-color);
}
%ifdef XP_MACOSX

3
toolkit/components/extensions/ext-theme.js
View File

@ -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;
}

12
toolkit/components/extensions/schemas/theme.json
View File

@ -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" }

1
toolkit/components/extensions/test/browser/browser.ini
View File

@ -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]

79
toolkit/components/extensions/test/browser/browser_ext_themes_arrowpanels.js Normal file
View File

@ -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();
});
});

15
toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
View File

@ -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";

18
toolkit/components/extensions/test/browser/head.js
View File

@ -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.");
}

15
toolkit/modules/LightweightThemeConsumer.jsm
View File

@ -10,6 +10,11 @@ ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
// Get the theme variables from the app resource directory.
// This allows per-app variables.
const toolkitVariableMap = [
["--arrowpanel-background", "popup"],
["--arrowpanel-color", "popup_text"],
["--arrowpanel-border-color", "popup_border"],
];
ChromeUtils.import("resource:///modules/ThemeVariableMap.jsm");
ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
@ -174,10 +179,12 @@ function _setProperty(elem, active, variableName, value) {
}
function _setProperties(root, active, vars) {
for (let [cssVarName, varsKey, optionalElementID] of ThemeVariableMap) {
let elem = optionalElementID ? root.ownerDocument.getElementById(optionalElementID)
: root;
_setProperty(elem, active, cssVarName, vars[varsKey]);
for (let map of [toolkitVariableMap, ThemeVariableMap]) {
for (let [cssVarName, varsKey, optionalElementID] of map) {
let elem = optionalElementID ? root.ownerDocument.getElementById(optionalElementID)
: root;
_setProperty(elem, active, cssVarName, vars[varsKey]);
}
}
}