summaryrefslogtreecommitdiffstats
path: root/browser/components/customizableui/test/browser_widget_animation.js
blob: 514e3f763b5629a701ec20e7c67f0637d1487834 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/* 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.activateItem(
    contextMenu.querySelector(".customize-context-moveToPanel")
  );

  await Promise.all([
    promiseWidgetAnimationOut(stopReloadButton),
    promiseOverflowAnimationEnd(),
  ]);
  ok(true, "The widget and overflow animations should have both happened.");
});

registerCleanupFunction(CustomizableUI.reset);