mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-17 15:25:52 +00:00
Bug 1397393 - Make transitioning between 2 themes with a dynamic theme smooth r=mconley
MozReview-Commit-ID: Cjx0E2PN6GP --HG-- extra : rebase_source : ea7ef2005de44ebb8b8e56b1acf47b6aac6ed863
This commit is contained in:
parent
76246ea977
commit
5931fb1728
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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]
|
||||
|
@ -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)",
|
||||
|
@ -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(", ") + ")",
|
||||
|
@ -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");
|
||||
});
|
||||
|
@ -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");
|
||||
|
@ -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();
|
||||
});
|
@ -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}`);
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user