tor-browser

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

browser_accessibility_sidebar_dom_nodes.js (3416B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 const {
      7  L10N,
      8 } = require("resource://devtools/client/accessibility/utils/l10n.js");
      9 
     10 // Check that DOM nodes in the sidebar can be highlighted and that clicking on the icon
     11 // next to them opens the inspector.
     12 
     13 const TEST_URI = `<html>
     14  <head>
     15    <meta charset="utf-8"/>
     16    <title>Accessibility Panel Sidebar DOM Nodes Test</title>
     17  </head>
     18  <body>
     19    <h1 id="select-me">Hello</h1>
     20  </body>
     21 </html>`;
     22 
     23 /**
     24 * Test that checks the Accessibility panel sidebar.
     25 */
     26 addA11YPanelTask(
     27  "Check behavior of DOM nodes in side panel",
     28  TEST_URI,
     29  async ({ toolbox, doc }) => {
     30    info("Select an item having an actual associated DOM node");
     31    await toggleRow(doc, 0);
     32    selectRow(doc, 1);
     33 
     34    await BrowserTestUtils.waitForCondition(
     35      () => getPropertyValue(doc, "name") === `"Hello"`,
     36      "Wait until the sidebar is updated"
     37    );
     38 
     39    info("Check DOMNode");
     40    const domNodeEl = getPropertyItem(doc, "DOMNode");
     41    ok(domNodeEl, "The DOMNode item was retrieved");
     42 
     43    const openInspectorButton = domNodeEl.querySelector(".open-inspector");
     44    ok(openInspectorButton, "The open inspector button is displayed");
     45    is(
     46      openInspectorButton.getAttribute("title"),
     47      L10N.getStr("accessibility.accessible.selectNodeInInspector.title"),
     48      "The open inspector button has expected title"
     49    );
     50 
     51    info("Check that hovering DOMNode triggers the highlight");
     52    // Loading the inspector panel at first, to make it possible to listen for
     53    // new node selections
     54    await toolbox.loadTool("inspector");
     55    const highlighter = toolbox.getHighlighter();
     56    const highlighterTestFront = await getHighlighterTestFront(toolbox);
     57 
     58    const onHighlighterShown = highlighter.waitForHighlighterShown();
     59 
     60    EventUtils.synthesizeMouseAtCenter(
     61      openInspectorButton,
     62      { type: "mousemove" },
     63      doc.defaultView
     64    );
     65 
     66    const { nodeFront } = await onHighlighterShown;
     67    is(nodeFront.displayName, "h1", "The correct node was highlighted");
     68    isVisible = await highlighterTestFront.isHighlighting();
     69    ok(isVisible, "Highlighter is displayed");
     70 
     71    info("Unhighlight the node by moving away from the node");
     72    const onHighlighterHidden = highlighter.waitForHighlighterHidden();
     73    EventUtils.synthesizeMouseAtCenter(
     74      getPropertyItem(doc, "name"),
     75      { type: "mousemove" },
     76      doc.defaultView
     77    );
     78 
     79    await onHighlighterHidden;
     80    ok(true, "The highlighter was closed when moving away from the node");
     81 
     82    info(
     83      "Clicking on the inspector icon and waiting for the inspector to be selected"
     84    );
     85    const onNewNode = toolbox.selection.once("new-node-front");
     86    openInspectorButton.click();
     87    const inspectorSelectedNodeFront = await onNewNode;
     88 
     89    ok(true, "Inspector selected and new node got selected");
     90    is(
     91      inspectorSelectedNodeFront.id,
     92      "select-me",
     93      "The expected node was selected"
     94    );
     95  }
     96 );
     97 
     98 function getPropertyItem(doc, label) {
     99  const labelEl = Array.from(
    100    doc.querySelectorAll("#accessibility-properties .object-label")
    101  ).find(el => el.textContent === label);
    102  if (!labelEl) {
    103    return null;
    104  }
    105  return labelEl.closest(".node");
    106 }
    107 
    108 function getPropertyValue(doc, label) {
    109  return getPropertyItem(doc, label)?.querySelector(".object-value")
    110    ?.textContent;
    111 }