tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_toolbox_meatball.js (4219B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Sanity test for meatball menu.
      7 //
      8 // We also use this to test the common Menu* components since we don't currently
      9 // have a means of testing React components in isolation.
     10 
     11 const lazy = {};
     12 ChromeUtils.defineESModuleGetters(lazy, {
     13  focusableSelector: "resource://devtools/client/shared/focus.mjs",
     14 });
     15 
     16 const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
     17 
     18 add_task(async function () {
     19  const tab = await addTab("about:blank");
     20  const toolbox = await openToolboxForTab(
     21    tab,
     22    "inspector",
     23    Toolbox.HostType.BOTTOM
     24  );
     25 
     26  info("Check opening meatball menu by clicking the menu button");
     27  await openMeatballMenuWithClick(toolbox);
     28  const menuDockToBottom = toolbox.doc.getElementById(
     29    "toolbox-meatball-menu-dock-bottom"
     30  );
     31  Assert.strictEqual(
     32    menuDockToBottom.getAttribute("aria-checked"),
     33    "true",
     34    "menuDockToBottom has checked"
     35  );
     36 
     37  info("Check closing meatball menu by clicking outside the popup area");
     38  await closeMeatballMenuWithClick(toolbox);
     39 
     40  info("Check moving the focus element with key event");
     41  await openMeatballMenuWithClick(toolbox);
     42  checkKeyHandling(toolbox);
     43 
     44  info("Check closing meatball menu with escape key");
     45  EventUtils.synthesizeKey("VK_ESCAPE", {}, toolbox.win);
     46  await waitForMeatballMenuToClose(toolbox);
     47 
     48  // F1 should trigger the settings panel and close the menu at the same time.
     49  info("Check closing meatball menu with F1 key");
     50  await openMeatballMenuWithClick(toolbox);
     51  EventUtils.synthesizeKey("VK_F1", {}, toolbox.win);
     52  await waitForMeatballMenuToClose(toolbox);
     53 
     54  await toolbox.destroy();
     55 });
     56 
     57 async function openMeatballMenuWithClick(toolbox) {
     58  const meatballButton = toolbox.doc.getElementById(
     59    "toolbox-meatball-menu-button"
     60  );
     61  await waitUntil(() => meatballButton.style.pointerEvents !== "none");
     62  EventUtils.synthesizeMouseAtCenter(meatballButton, {}, toolbox.win);
     63 
     64  const panel = toolbox.doc.querySelectorAll(".tooltip-xul-wrapper");
     65  const shownListener = new Promise(res => {
     66    panel[0].addEventListener("popupshown", res, { once: true });
     67  });
     68 
     69  const menuPanel = toolbox.doc.getElementById(
     70    "toolbox-meatball-menu-button-panel"
     71  );
     72  ok(menuPanel, "meatball panel is available");
     73 
     74  info("Waiting for the menu panel to be displayed");
     75 
     76  await shownListener;
     77  await waitUntil(() => menuPanel.classList.contains("tooltip-visible"));
     78 }
     79 
     80 async function closeMeatballMenuWithClick(toolbox) {
     81  const meatballButton = toolbox.doc.getElementById(
     82    "toolbox-meatball-menu-button"
     83  );
     84  await waitUntil(
     85    () => toolbox.win.getComputedStyle(meatballButton).pointerEvents === "none"
     86  );
     87  meatballButton.click();
     88 
     89  const menuPanel = toolbox.doc.getElementById(
     90    "toolbox-meatball-menu-button-panel"
     91  );
     92  ok(menuPanel, "meatball panel is available");
     93 
     94  info("Waiting for the menu panel to be hidden");
     95  await waitUntil(() => !menuPanel.classList.contains("tooltip-visible"));
     96 }
     97 
     98 async function waitForMeatballMenuToClose(toolbox) {
     99  const menuPanel = toolbox.doc.getElementById(
    100    "toolbox-meatball-menu-button-panel"
    101  );
    102  ok(menuPanel, "meatball panel is available");
    103 
    104  info("Waiting for the menu panel to be hidden");
    105  await waitUntil(() => !menuPanel.classList.contains("tooltip-visible"));
    106 }
    107 
    108 function checkKeyHandling(toolbox) {
    109  const selectable = toolbox.doc
    110    .getElementById("toolbox-meatball-menu")
    111    .querySelectorAll(lazy.focusableSelector);
    112 
    113  EventUtils.synthesizeKey("VK_DOWN", {}, toolbox.win);
    114  is(
    115    toolbox.doc.activeElement,
    116    selectable[0],
    117    "First item selected with down key."
    118  );
    119  EventUtils.synthesizeKey("VK_UP", {}, toolbox.win);
    120  is(
    121    toolbox.doc.activeElement,
    122    selectable[selectable.length - 1],
    123    "End item selected with up key."
    124  );
    125  EventUtils.synthesizeKey("VK_HOME", {}, toolbox.win);
    126  is(
    127    toolbox.doc.activeElement,
    128    selectable[0],
    129    "First item selected with home key."
    130  );
    131  EventUtils.synthesizeKey("VK_END", {}, toolbox.win);
    132  is(
    133    toolbox.doc.activeElement,
    134    selectable[selectable.length - 1],
    135    "End item selected with down key."
    136  );
    137 }