Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-25 05:41:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out changeset f3e01de682f1 (bug 1443561) on request from jaws a=backout r=jaws

Browse Source
This commit is contained in:
Andreea Pavel 2018-04-14 04:08:45 +03:00
parent 01f50bc3d8
commit d3d551275b
5 changed files with 43 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
browser/base/content/browser.css
View File

@ -8,6 +8,7 @@
:root {
--panelui-subview-transition-duration: 150ms;
--lwt-additional-images: none;
--lwt-background-alignment: right top;
--lwt-background-tiling: no-repeat;
}
@ -17,11 +18,13 @@
:root:-moz-lwtheme {
background-color: var(--lwt-accent-color) !important;
background-image: var(--lwt-additional-images) !important;
background-position: var(--lwt-background-alignment) !important;
background-repeat: var(--lwt-background-tiling) !important;
}
:root:-moz-lwtheme[lwtheme-image] {
background-image: var(--lwt-header-image) !important;
background-position: right top !important;
background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
}
:root:-moz-lwtheme:-moz-window-inactive {
@ -358,14 +361,6 @@ toolbarpaletteitem {
transition: 1.5s margin-top ease-out;
}
/* Set additional backgrounds alignment relative to toolbox*/
#navigator-toolbox:-moz-lwtheme {
background-image: var(--lwt-additional-images);
background-position: var(--lwt-background-alignment);
background-repeat: var(--lwt-background-tiling);
}
/* Rules to help integrate WebExtension buttons */
.webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {

9
toolkit/components/extensions/parent/ext-theme.js
View File

@ -266,7 +266,11 @@ class Theme {
break;
}
this.lwtStyles.backgroundsAlignment = val.join(",");
let alignment = [];
if (this.lwtStyles.headerURL) {
alignment.push("right top");
}
this.lwtStyles.backgroundsAlignment = alignment.concat(val).join(",");
break;
}
case "additional_backgrounds_tiling": {
@ -275,6 +279,9 @@ class Theme {
}
let tiling = [];
if (this.lwtStyles.headerURL) {
tiling.push("no-repeat");
}
for (let i = 0, l = this.lwtStyles.additionalBackgrounds.length; i < l; ++i) {
tiling.push(val[i] || "no-repeat");
}

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

@ -3,7 +3,6 @@ support-files =
head.js
[browser_ext_management_themes.js]
[browser_ext_themes_additional_backgrounds_alignment.js]
[browser_ext_themes_alpha_accentcolor.js]
[browser_ext_themes_chromeparity.js]
[browser_ext_themes_dynamic_getCurrent.js]

105
toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js
View File

@ -1,105 +0,0 @@
"use strict";
/* globals InspectorUtils */
// Case 1 - When there is a headerURL image and additional_backgrounds_alignment is not specified.
// So background-position should default to "left top"
add_task(async function test_default_additional_backgrounds_alignment() {
const LEFT_TOP = "0% 0%";
const RIGHT_TOP = "100% 0%";
let extension = ExtensionTestUtils.loadExtension({
manifest: {
"theme": {
"images": {
"headerURL": "image1.png",
"additional_backgrounds": ["image1.png", "image1.png"],
},
"colors": {
"accentcolor": ACCENT_COLOR,
"textcolor": TEXT_COLOR,
},
},
},
files: {
"image1.png": BACKGROUND,
},
});
await extension.startup();
let docEl = document.documentElement;
let rootCS = window.getComputedStyle(docEl);
Assert.equal(
rootCS.getPropertyValue("background-position"),
RIGHT_TOP,
"root only contains headerURL alignment property"
);
let toolbox = document.querySelector("#navigator-toolbox");
let toolboxCS = window.getComputedStyle(toolbox);
Assert.equal(
toolboxCS.getPropertyValue("background-position"),
LEFT_TOP,
toolbox.id + " only contains default additional backgrounds alignment property"
);
await extension.unload();
});
// Case 2 - When there is a headerURL image and additional_backgrounds_alignment is specified.
add_task(async function test_additional_backgrounds_alignment() {
const LEFT_BOTTOM = "0% 100%";
const CENTER_CENTER = "50% 50%";
const RIGHT_TOP = "100% 0%";
let extension = ExtensionTestUtils.loadExtension({
manifest: {
"theme": {
"images": {
"headerURL": "image1.png",
"additional_backgrounds": ["image1.png", "image1.png", "image1.png"],
},
"colors": {
"accentcolor": ACCENT_COLOR,
"textcolor": TEXT_COLOR,
},
"properties": {
additional_backgrounds_alignment: ["left bottom", "center center", "right top"],
},
},
},
files: {
"image1.png": BACKGROUND,
},
});
await extension.startup();
let docEl = document.documentElement;
let rootCS = window.getComputedStyle(docEl);
Assert.equal(
rootCS.getPropertyValue("background-position"),
RIGHT_TOP,
"root only contains headerURL alignment property"
);
let toolbox = document.querySelector("#navigator-toolbox");
let toolboxCS = window.getComputedStyle(toolbox);
Assert.equal(
toolboxCS.getPropertyValue("background-position"),
LEFT_BOTTOM + ", " + CENTER_CENTER + ", " + RIGHT_TOP,
toolbox.id + " contains additional backgrounds alignment properties"
);
await extension.unload();
});

76
toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
View File

@ -11,8 +11,8 @@ add_task(async function test_support_backgrounds_position() {
manifest: {
"theme": {
"images": {
"headerURL": "face1.png",
"additional_backgrounds": ["face2.png", "face2.png", "face2.png"],
"headerURL": "face.png",
"additional_backgrounds": ["face.png", "face.png", "face.png"],
},
"colors": {
"accentcolor": `rgb(${FRAME_COLOR.join(",")})`,
@ -24,45 +24,37 @@ add_task(async function test_support_backgrounds_position() {
},
},
files: {
"face1.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
"face2.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
"face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
},
});
await extension.startup();
let docEl = window.document.documentElement;
let toolbox = document.querySelector("#navigator-toolbox");
Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
"LWT text color attribute should be set");
let toolboxCS = window.getComputedStyle(toolbox);
let rootCS = window.getComputedStyle(docEl);
let rootBgImage = rootCS.backgroundImage.split(",")[0].trim();
let bgImage = toolboxCS.backgroundImage.split(",")[0].trim();
Assert.ok(rootBgImage.includes("face1.png"),
`The backgroundImage should use face1.png. Actual value is: ${rootBgImage}`);
Assert.equal(toolboxCS.backgroundImage, Array(3).fill(bgImage).join(", "),
"The backgroundImage should use face2.png three times.");
Assert.equal(toolboxCS.backgroundPosition, "0% 0%, 50% 0%, 100% 100%",
"The backgroundPosition should use the three values provided.");
Assert.equal(toolboxCS.backgroundRepeat, "no-repeat",
let style = window.getComputedStyle(docEl);
let bgImage = style.backgroundImage.split(",")[0].trim();
Assert.ok(bgImage.includes("face.png"),
`The backgroundImage should use face.png. Actual value is: ${bgImage}`);
Assert.equal(Array(4).fill(bgImage).join(", "), style.backgroundImage,
"The backgroundImage should use face.png four times.");
Assert.equal(style.backgroundPosition, "100% 0%, 0% 0%, 50% 0%, 100% 100%",
"The backgroundPosition should use the four values provided.");
Assert.equal(style.backgroundRepeat, "no-repeat",
"The backgroundPosition should use the default value.");
await extension.unload();
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
toolboxCS = window.getComputedStyle(toolbox);
style = window.getComputedStyle(docEl);
// Styles should've reverted to their initial values.
Assert.equal(rootCS.backgroundImage, "none");
Assert.equal(rootCS.backgroundPosition, "0% 0%");
Assert.equal(rootCS.backgroundRepeat, "repeat");
Assert.equal(toolboxCS.backgroundImage, "none");
Assert.equal(toolboxCS.backgroundPosition, "0% 0%");
Assert.equal(toolboxCS.backgroundRepeat, "repeat");
Assert.equal(style.backgroundImage, "none");
Assert.equal(style.backgroundPosition, "0% 0%");
Assert.equal(style.backgroundRepeat, "repeat");
});
add_task(async function test_support_backgrounds_repeat() {
@ -93,27 +85,21 @@ add_task(async function test_support_backgrounds_repeat() {
await extension.startup();
let docEl = window.document.documentElement;
let toolbox = document.querySelector("#navigator-toolbox");
Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
"LWT text color attribute should be set");
let rootCS = window.getComputedStyle(docEl);
let toolboxCS = window.getComputedStyle(toolbox);
let bgImage = rootCS.backgroundImage.split(",")[0].trim();
let style = window.getComputedStyle(docEl);
let bgImage = style.backgroundImage.split(",")[0].trim();
Assert.ok(bgImage.includes("face0.png"),
`The backgroundImage should use face.png. Actual value is: ${bgImage}`);
Assert.equal([1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
toolboxCS.backgroundImage, "The backgroundImage should use face.png three times.");
Assert.equal(rootCS.backgroundPosition, "100% 0%",
"The backgroundPosition should use the default value for root.");
Assert.equal(toolboxCS.backgroundPosition, "0% 0%",
"The backgroundPosition should use the default value for navigator-toolbox.");
Assert.equal(rootCS.backgroundRepeat, "no-repeat",
"The backgroundRepeat should use the default values for root.");
Assert.equal(toolboxCS.backgroundRepeat, "repeat-x, repeat-y, repeat",
"The backgroundRepeat should use the three values provided for navigator-toolbox.");
Assert.equal([0, 1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
style.backgroundImage, "The backgroundImage should use face.png four times.");
Assert.equal(style.backgroundPosition, "100% 0%",
"The backgroundPosition should use the default value.");
Assert.equal(style.backgroundRepeat, "no-repeat, repeat-x, repeat-y, repeat",
"The backgroundPosition should use the four values provided.");
await extension.unload();
@ -144,22 +130,20 @@ add_task(async function test_additional_images_check() {
await extension.startup();
let docEl = window.document.documentElement;
let toolbox = document.querySelector("#navigator-toolbox");
Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
"LWT text color attribute should be set");
let rootCS = window.getComputedStyle(docEl);
let toolboxCS = window.getComputedStyle(toolbox);
let bgImage = rootCS.backgroundImage.split(",")[0];
let style = window.getComputedStyle(docEl);
let bgImage = style.backgroundImage.split(",")[0];
Assert.ok(bgImage.includes("face.png"),
`The backgroundImage should use face.png. Actual value is: ${bgImage}`);
Assert.equal("none", toolboxCS.backgroundImage,
"The backgroundImage should not use face.png.");
Assert.equal(rootCS.backgroundPosition, "100% 0%",
Assert.equal(bgImage + ", none", style.backgroundImage,
"The backgroundImage should use face.png only once.");
Assert.equal(style.backgroundPosition, "100% 0%",
"The backgroundPosition should use the default value.");
Assert.equal(rootCS.backgroundRepeat, "no-repeat",
Assert.equal(style.backgroundRepeat, "no-repeat",
"The backgroundPosition should use only one (default) value.");
await extension.unload();