forked from mirrors/gecko-dev
c8c33ff53c
* New filmstrip animation svg. It animates between the currentColor and attention color. We *could* do this via a CSS animation changing the fill value over time, but my understanding is to ensure animation happens on the compositor/GPU, the filmstrip is the better way to go. Differential Revision: https://phabricator.services.mozilla.com/D113856
83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
/* Any copyright is dedicated to the Public Domain.
|
|
* http://creativecommons.org/publicdomain/zero/1.0/ */
|
|
|
|
"use strict";
|
|
|
|
gReduceMotionOverride = false;
|
|
|
|
function promiseWidgetAnimationOut(aNode) {
|
|
let animationNode = aNode;
|
|
if (
|
|
animationNode.tagName != "toolbaritem" &&
|
|
animationNode.tagName != "toolbarbutton"
|
|
) {
|
|
animationNode = animationNode.closest("toolbaritem");
|
|
}
|
|
if (animationNode.parentNode.id.startsWith("wrapper-")) {
|
|
animationNode = animationNode.parentNode;
|
|
}
|
|
return new Promise(resolve => {
|
|
animationNode.addEventListener(
|
|
"animationend",
|
|
function cleanupWidgetAnimationOut(e) {
|
|
if (
|
|
e.animationName == "widget-animate-out" &&
|
|
e.target.id == animationNode.id
|
|
) {
|
|
animationNode.removeEventListener(
|
|
"animationend",
|
|
cleanupWidgetAnimationOut
|
|
);
|
|
ok(true, "The widget`s animationend should have happened");
|
|
resolve();
|
|
}
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
function promiseOverflowAnimationEnd() {
|
|
return new Promise(resolve => {
|
|
let overflowButton = document.getElementById("nav-bar-overflow-button");
|
|
overflowButton.addEventListener(
|
|
"animationend",
|
|
function cleanupOverflowAnimationOut(event) {
|
|
if (event.animationName == "overflow-animation") {
|
|
overflowButton.removeEventListener(
|
|
"animationend",
|
|
cleanupOverflowAnimationOut
|
|
);
|
|
ok(
|
|
true,
|
|
"The overflow button`s animationend event should have happened"
|
|
);
|
|
resolve();
|
|
}
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
// Right-click on the stop/reload button, use the context menu to move it to the overflow menu.
|
|
// The button should animate out, and the overflow menu should animate upon adding.
|
|
add_task(async function() {
|
|
let stopReloadButton = document.getElementById("stop-reload-button");
|
|
let contextMenu = document.getElementById("toolbar-context-menu");
|
|
let shownPromise = popupShown(contextMenu);
|
|
EventUtils.synthesizeMouseAtCenter(stopReloadButton, {
|
|
type: "contextmenu",
|
|
button: 2,
|
|
});
|
|
await shownPromise;
|
|
|
|
contextMenu.querySelector(".customize-context-moveToPanel").click();
|
|
await contextMenu.hidePopup();
|
|
|
|
await Promise.all([
|
|
promiseWidgetAnimationOut(stopReloadButton),
|
|
promiseOverflowAnimationEnd(),
|
|
]);
|
|
ok(true, "The widget and overflow animations should have both happened.");
|
|
});
|
|
|
|
registerCleanupFunction(CustomizableUI.reset);
|