Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-17 15:25:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1397393 - Make transitioning between 2 themes with a dynamic theme smooth r=mconley

Browse Source 
MozReview-Commit-ID: Cjx0E2PN6GP

--HG--
extra : rebase_source : ea7ef2005de44ebb8b8e56b1acf47b6aac6ed863
This commit is contained in:
Vivek Dhingra 2018-03-13 18:20:08 -04:00
parent 76246ea977
commit 5931fb1728
9 changed files with 114 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
browser/themes/shared/browser.inc.css
View File

@ -6,6 +6,7 @@
%filter substitution
%define navbarTabsShadowSize 1px
%define themeTransition background-color 0.1s cubic-bezier(.17,.67,.83,.67)
:root {
/* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
@ -16,6 +17,10 @@
--space-above-tabbar: 8px;
}
:root:-moz-lwtheme {
transition: @themeTransition@;
}
/* Toolbar / content area border */
#navigator-toolbox::after {
@ -28,12 +33,16 @@
border-bottom-style: none;
}
#nav-bar:-moz-lwtheme {
transition: @themeTransition@;
}
/* Bookmark toolbar */
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
overflow: -moz-hidden-unscrollable;
max-height: 4em;
transition: min-height 170ms ease-out, max-height 170ms ease-out;
transition: min-height 170ms ease-out, max-height 170ms ease-out, @themeTransition@;
padding: 0 6px 2px;
}

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

@ -21,5 +21,6 @@ support-files =
[browser_ext_themes_toolbars.js]
[browser_ext_themes_toolbarbutton_icons.js]
[browser_ext_themes_toolbarbutton_colors.js]
[browser_ext_themes_theme_transition.js]
[browser_ext_themes_arrowpanels.js]
[browser_ext_themes_tab_selected.js]

8
toolkit/components/extensions/test/browser/browser_ext_themes_alpha_accentcolor.js
View File

@ -18,9 +18,15 @@ add_task(async function test_alpha_accentcolor() {
},
});
// Add the event listener before loading the extension
let docEl = window.document.documentElement;
let transitionPromise = waitForTransition(docEl, "background-color");
await extension.startup();
let docEl = window.document.documentElement;
// wait for theme transition to end
await transitionPromise;
let style = window.getComputedStyle(docEl);
Assert.equal(style.backgroundColor, "rgb(230, 128, 0)",

19
toolkit/components/extensions/test/browser/browser_ext_themes_chromeparity.js
View File

@ -26,9 +26,10 @@ add_task(async function test_support_theme_frame() {
},
});
await extension.startup();
let docEl = window.document.documentElement;
let transitionPromise = waitForTransition(docEl, "background-color");
await extension.startup();
await transitionPromise;
Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
@ -69,16 +70,20 @@ add_task(async function test_support_theme_frame_inactive() {
},
});
await extension.startup();
let docEl = window.document.documentElement;
let transitionPromise = waitForTransition(docEl, "background-color");
await extension.startup();
await transitionPromise;
let style = window.getComputedStyle(docEl);
Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
"Window background is set to the colors.frame property");
// Now we'll open a new window to see if the inactive browser accent color changed
transitionPromise = waitForTransition(docEl, "background-color");
let window2 = await BrowserTestUtils.openNewBrowserWindow();
await transitionPromise;
Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR_INACTIVE.join(", ") + ")",
`Inactive window background color should be ${FRAME_COLOR_INACTIVE}`);
@ -109,9 +114,11 @@ add_task(async function test_lack_of_theme_frame_inactive() {
},
});
await extension.startup();
let docEl = window.document.documentElement;
let transitionPromise = waitForTransition(docEl, "background-color");
await extension.startup();
await transitionPromise;
let style = window.getComputedStyle(docEl);
Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",

12
toolkit/components/extensions/test/browser/browser_ext_themes_dynamic_updates.js
View File

@ -69,6 +69,8 @@ add_task(async function test_dynamic_theme_updates() {
let defaultStyle = window.getComputedStyle(window.document.documentElement);
await extension.startup();
let docEl = window.document.documentElement;
let transitionPromise = waitForTransition(docEl, "background-color");
extension.sendMessage("update-theme", {
"images": {
"headerURL": "image1.png",
@ -80,9 +82,11 @@ add_task(async function test_dynamic_theme_updates() {
});
await extension.awaitMessage("theme-updated");
await transitionPromise;
validateTheme("image1.png", ACCENT_COLOR_1, TEXT_COLOR_1, true);
transitionPromise = waitForTransition(docEl, "background-color");
extension.sendMessage("update-theme", {
"images": {
"headerURL": "image2.png",
@ -94,6 +98,7 @@ add_task(async function test_dynamic_theme_updates() {
});
await extension.awaitMessage("theme-updated");
await transitionPromise;
validateTheme("image2.png", ACCENT_COLOR_2, TEXT_COLOR_2, true);
@ -106,7 +111,6 @@ add_task(async function test_dynamic_theme_updates() {
await extension.unload();
let docEl = window.document.documentElement;
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
});
@ -133,6 +137,8 @@ add_task(async function test_dynamic_theme_updates_with_data_url() {
let defaultStyle = window.getComputedStyle(window.document.documentElement);
await extension.startup();
let docEl = window.document.documentElement;
let transitionPromise = waitForTransition(docEl, "background-color");
extension.sendMessage("update-theme", {
"images": {
"headerURL": BACKGROUND_1,
@ -144,9 +150,11 @@ add_task(async function test_dynamic_theme_updates_with_data_url() {
});
await extension.awaitMessage("theme-updated");
await transitionPromise;
validateTheme(BACKGROUND_1, ACCENT_COLOR_1, TEXT_COLOR_1, true);
transitionPromise = waitForTransition(docEl, "background-color");
extension.sendMessage("update-theme", {
"images": {
"headerURL": BACKGROUND_2,
@ -158,6 +166,7 @@ add_task(async function test_dynamic_theme_updates_with_data_url() {
});
await extension.awaitMessage("theme-updated");
await transitionPromise;
validateTheme(BACKGROUND_2, ACCENT_COLOR_2, TEXT_COLOR_2, true);
@ -170,6 +179,5 @@ add_task(async function test_dynamic_theme_updates_with_data_url() {
await extension.unload();
let docEl = window.document.documentElement;
Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
});

6
toolkit/components/extensions/test/browser/browser_ext_themes_lwtsupport.js
View File

@ -24,9 +24,11 @@ add_task(async function test_support_LWT_properties() {
},
});
await extension.startup();
let docEl = window.document.documentElement;
let transitionPromise = waitForTransition(docEl, "background-color");
await extension.startup();
await transitionPromise;
let style = window.getComputedStyle(docEl);
Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");

57
toolkit/components/extensions/test/browser/browser_ext_themes_theme_transition.js Normal file
View File

@ -0,0 +1,57 @@
"use strict";
// This test checks whether the applied theme transition effects are applied
// correctly.
add_task(async function test_theme_transition_effects() {
const ACCENT_COLOR = "#aaf442";
const TOOLBAR = "#f27489";
const TEXT_COLOR = "#000000";
const TRANSITION_PROPERTY = "background-color";
let extension = ExtensionTestUtils.loadExtension({
manifest: {
"theme": {
"colors": {
"accentcolor": ACCENT_COLOR,
"textcolor": TEXT_COLOR,
"toolbar": TOOLBAR,
"toolbar_text": TEXT_COLOR,
},
},
},
});
await extension.startup();
// check if transition effect is set for root, which affects transition for
// accent color
let docEl = window.document.documentElement;
let rootCS = window.getComputedStyle(docEl);
Assert.equal(
rootCS.getPropertyValue("transition-property"),
TRANSITION_PROPERTY,
"Transition property set for root"
);
// now check transition effect for toolbars
let navbar = document.querySelector("#nav-bar");
let navbarCS = window.getComputedStyle(navbar);
Assert.ok(
navbarCS.getPropertyValue("transition-property").includes(TRANSITION_PROPERTY),
"Transition property set for #nav-bar"
);
let bookmarksBar = document.querySelector("#PersonalToolbar");
bookmarksBar.setAttribute("collapsed", "false");
let bookmarksBarCS = window.getComputedStyle(bookmarksBar);
Assert.ok(
bookmarksBarCS.getPropertyValue("transition-property").includes(TRANSITION_PROPERTY),
"Transition property set for #PersonalToolbar"
);
await extension.unload();
});

6
toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js
View File

@ -25,14 +25,16 @@ add_task(async function test_support_toolbar_property() {
},
});
await extension.startup();
let toolbox = document.querySelector("#navigator-toolbox");
let toolbars = [...toolbox.querySelectorAll("toolbar:not(#TabsToolbar)")].filter(toolbar => {
let bounds = toolbar.getBoundingClientRect();
return bounds.width > 0 && bounds.height > 0;
});
let transitionPromise = waitForTransition(toolbars[0], "background-color");
await extension.startup();
await transitionPromise;
info(`Checking toolbar colors for ${toolbars.length} toolbars.`);
for (let toolbar of toolbars) {
info(`Testing ${toolbar.id}`);

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

@ -1,5 +1,6 @@
/* exported ACCENT_COLOR, BACKGROUND, ENCODED_IMAGE_DATA, FRAME_COLOR, TAB_TEXT_COLOR,
TEXT_COLOR, TAB_BACKGROUND_TEXT_COLOR, imageBufferFromDataURI, hexToCSS, hexToRGB, testBorderColor */
TEXT_COLOR, TAB_BACKGROUND_TEXT_COLOR, imageBufferFromDataURI, hexToCSS, hexToRGB, testBorderColor,
waitForTransition */
"use strict";
@ -54,6 +55,12 @@ function imageBufferFromDataURI(encodedImageData) {
return Uint8Array.from(decodedImageData, byte => byte.charCodeAt(0)).buffer;
}
function waitForTransition(element, propertyName) {
return BrowserTestUtils.waitForEvent(element, "transitionend", false, event => {
return event.target == element && event.propertyName == propertyName;
});
}
function testBorderColor(element, expected) {
let computedStyle = window.getComputedStyle(element);
Assert.equal(computedStyle.borderLeftColor,