tor-browser

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

browser_inspector_highlighter-comments.js (3756B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 "use strict";
      5 
      6 // Test that hovering over the markup-view's containers doesn't always show the
      7 // highlighter, depending on the type of node hovered over.
      8 
      9 const TEST_PAGE = URL_ROOT + "doc_inspector_highlighter-comments.html";
     10 
     11 add_task(async function () {
     12  const { inspector, highlighterTestFront } =
     13    await openInspectorForURL(TEST_PAGE);
     14  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
     15  const markupView = inspector.markup;
     16  await selectNode("p", inspector);
     17 
     18  info("Hovering over #id1 and waiting for highlighter to appear.");
     19  await hoverElement("#id1");
     20  await assertHighlighterShownOn("#id1");
     21 
     22  info("Hovering over comment node and ensuring highlighter doesn't appear.");
     23  await hoverComment();
     24  await assertHighlighterHidden();
     25 
     26  info("Hovering over #id1 again and waiting for highlighter to appear.");
     27  await hoverElement("#id1");
     28  await assertHighlighterShownOn("#id1");
     29 
     30  info("Hovering over #id2 and waiting for highlighter to appear.");
     31  await hoverElement("#id2");
     32  await assertHighlighterShownOn("#id2");
     33 
     34  info("Hovering over <script> and ensuring highlighter doesn't appear.");
     35  await hoverElement("script");
     36  await assertHighlighterHidden();
     37 
     38  info("Hovering over #id3 and waiting for highlighter to appear.");
     39  await hoverElement("#id3");
     40  await assertHighlighterShownOn("#id3");
     41 
     42  info("Hovering over hidden #id4 and ensuring highlighter doesn't appear.");
     43  await hoverElement("#id4");
     44  await assertHighlighterHidden();
     45 
     46  info("Hovering over a text node and waiting for highlighter to appear.");
     47  await hoverTextNode("Visible text node");
     48  await assertHighlighterShownOnTextNode("body", 14);
     49 
     50  function hoverContainer(container) {
     51    const onHighlighterShown = waitForHighlighterTypeShown(
     52      inspector.highlighters.TYPES.BOXMODEL
     53    );
     54 
     55    container.tagLine.scrollIntoView();
     56    EventUtils.synthesizeMouse(
     57      container.tagLine,
     58      2,
     59      2,
     60      { type: "mousemove" },
     61      markupView.doc.defaultView
     62    );
     63 
     64    return onHighlighterShown;
     65  }
     66 
     67  async function hoverElement(selector) {
     68    info(`Hovering node ${selector} in the markup view`);
     69    const container = await getContainerForSelector(selector, inspector);
     70    return hoverContainer(container);
     71  }
     72 
     73  function hoverComment() {
     74    info("Hovering the comment node in the markup view");
     75    for (const [node, container] of markupView._containers) {
     76      if (node.nodeType === Node.COMMENT_NODE) {
     77        return hoverContainer(container);
     78      }
     79    }
     80    return null;
     81  }
     82 
     83  function hoverTextNode(text) {
     84    info(`Hovering the text node "${text}" in the markup view`);
     85    const container = [...markupView._containers].filter(([nodeFront]) => {
     86      return (
     87        nodeFront.nodeType === Node.TEXT_NODE &&
     88        nodeFront._form.nodeValue.trim() === text.trim()
     89      );
     90    })[0][1];
     91    return hoverContainer(container);
     92  }
     93 
     94  async function assertHighlighterShownOn(selector) {
     95    ok(
     96      await highlighterTestFront.assertHighlightedNode(selector),
     97      "Highlighter is shown on the right node: " + selector
     98    );
     99  }
    100 
    101  async function assertHighlighterShownOnTextNode(
    102    parentSelector,
    103    childNodeIndex
    104  ) {
    105    ok(
    106      await highlighterTestFront.assertHighlightedTextNode(
    107        parentSelector,
    108        childNodeIndex
    109      ),
    110      "Highlighter is shown on the right text node"
    111    );
    112  }
    113 
    114  async function assertHighlighterHidden() {
    115    const isVisible = await highlighterTestFront.isHighlighting();
    116    ok(!isVisible, "Highlighter is hidden");
    117  }
    118 });