tor-browser

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

browser_inspector_highlighter-iframes_02.js (2642B)

      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 the highlighter is correctly positioned when switching context
      7 // to an iframe that has an offset from the parent viewport (eg. 100px margin)
      8 
      9 const TEST_URI =
     10  "data:text/html;charset=utf-8," +
     11  '<div id="outer"></div>' +
     12  "<iframe style='margin:100px' src='data:text/html," +
     13  '<div id="inner">Look I am here!</div>\'>';
     14 
     15 add_task(async function () {
     16  info("Enable command-button-frames preference setting");
     17  Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
     18  const { inspector, toolbox } = await openInspectorForURL(TEST_URI);
     19 
     20  await assertMarkupViewAsTree(
     21    `
     22    body
     23      div id="outer"
     24      iframe!ignore-children`,
     25    "body",
     26    inspector
     27  );
     28 
     29  info("Switch to the iframe context.");
     30  await switchToFrameContext(1, toolbox, inspector);
     31 
     32  info("Check the markup view is rendered correctly after switching frames");
     33  await assertMarkupViewAsTree(
     34    `
     35    body
     36      div id="inner"`,
     37    "body",
     38    inspector
     39  );
     40 
     41  info("Check highlighting is correct after switching iframe context");
     42  await selectAndHighlightNode("#inner", inspector);
     43 
     44  const nodeFront = await getNodeFront("#inner", inspector);
     45  const iframeHighlighterTestFront = await getHighlighterTestFront(toolbox, {
     46    target: nodeFront.targetFront,
     47  });
     48  const isHighlightCorrect =
     49    await iframeHighlighterTestFront.assertHighlightedNode("#inner");
     50  ok(isHighlightCorrect, "The selected node is properly highlighted.");
     51 });
     52 
     53 /**
     54 * Helper designed to switch context to another frame at the provided index.
     55 * Returns a promise that will resolve when the navigation is complete.
     56 *
     57 * @return {Promise}
     58 */
     59 async function switchToFrameContext(frameIndex, toolbox, inspector) {
     60  // Open frame menu and wait till it's available on the screen.
     61  const btn = toolbox.doc.getElementById("command-button-frames");
     62  const panel = toolbox.doc.getElementById("command-button-frames-panel");
     63  btn.click();
     64  ok(panel, "popup panel has created.");
     65  await waitUntil(() => panel.classList.contains("tooltip-visible"));
     66 
     67  info("Select the iframe in the frame list.");
     68  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
     69  const firstButton = menuList.querySelectorAll(".command")[frameIndex];
     70  const newRoot = inspector.once("new-root");
     71 
     72  firstButton.click();
     73 
     74  await newRoot;
     75  await inspector.once("inspector-updated");
     76 
     77  info("Navigation to the iframe is done.");
     78 }