tor-browser

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

browser_inspector_iframe-picker.js (3773B)

      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 
      5 "use strict";
      6 
      7 // Test frame selection switching at toolbox level when using the inspector
      8 
      9 const FrameURL =
     10  "data:text/html;charset=UTF-8," +
     11  encodeURI('<div id="in-iframe">frame</div>');
     12 const URL =
     13  "data:text/html;charset=UTF-8," +
     14  encodeURI('<iframe src="' + FrameURL + '"></iframe><div id="top">top</div>');
     15 
     16 add_task(async function () {
     17  const { inspector, toolbox } = await openInspectorForURL(URL);
     18 
     19  // Verify we are on the top level document
     20  await assertMarkupViewAsTree(
     21    `
     22    body
     23      iframe!ignore-children
     24      div id="top"`,
     25    "body",
     26    inspector
     27  );
     28 
     29  assertMarkupViewIsLoaded(inspector);
     30 
     31  // Verify that the frame map button is empty at the moment.
     32  const btn = toolbox.doc.getElementById("command-button-frames");
     33  ok(!btn.firstChild, "The frame list button doesn't have any children");
     34 
     35  // Open frame menu and wait till it's available on the screen.
     36  const panel = toolbox.doc.getElementById("command-button-frames-panel");
     37  btn.click();
     38  ok(panel, "popup panel has created.");
     39  await waitUntil(() => panel.classList.contains("tooltip-visible"));
     40 
     41  // Verify that the menu is populated.
     42  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
     43  const frames = Array.from(menuList.querySelectorAll(".command"));
     44  is(frames.length, 2, "We have both frames in the menu");
     45 
     46  frames.sort(function (a, b) {
     47    return a.children[0].innerHTML.localeCompare(b.children[0].innerHTML);
     48  });
     49 
     50  is(
     51    frames[0].querySelector(".label").textContent,
     52    FrameURL,
     53    "Got top level document in the list"
     54  );
     55  is(
     56    frames[1].querySelector(".label").textContent,
     57    URL,
     58    "Got iframe document in the list"
     59  );
     60 
     61  // Listen to will-navigate to check if the view is empty
     62  const { resourceCommand } = toolbox.commands;
     63  const { onResource: willNavigate } =
     64    await resourceCommand.waitForNextResource(
     65      resourceCommand.TYPES.DOCUMENT_EVENT,
     66      {
     67        ignoreExistingResources: true,
     68        predicate(resource) {
     69          return resource.name == "will-navigate";
     70        },
     71      }
     72    );
     73  willNavigate.then(() => {
     74    info("Navigation to the iframe has started, the inspector should be empty");
     75    assertMarkupViewIsEmpty(inspector);
     76  });
     77 
     78  // Only select the iframe after we are able to select an element from the top
     79  // level document.
     80  let newRoot = inspector.once("new-root");
     81  await selectNode("#top", inspector);
     82  info("Select the iframe");
     83  frames[0].click();
     84 
     85  await newRoot;
     86 
     87  info("The iframe is selected, check that the markup view was updated");
     88  await assertMarkupViewAsTree(
     89    `
     90    body
     91      div id="in-iframe"`,
     92    "body",
     93    inspector
     94  );
     95  assertMarkupViewIsLoaded(inspector);
     96 
     97  info(
     98    "Remove the iframe and check that the inspector gets updated to show the top level frame markup"
     99  );
    100  newRoot = inspector.once("new-root");
    101  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
    102    content.document.querySelector("iframe").remove();
    103  });
    104  await newRoot;
    105 
    106  await assertMarkupViewAsTree(
    107    `
    108    body
    109      div id="top"`,
    110    "body",
    111    inspector
    112  );
    113  assertMarkupViewIsLoaded(inspector);
    114 });
    115 
    116 function assertMarkupViewIsLoaded(inspector) {
    117  const markupViewBox = inspector.panelDoc.getElementById("markup-box");
    118  is(markupViewBox.childNodes.length, 1, "The markup-view is loaded");
    119 }
    120 
    121 function assertMarkupViewIsEmpty(inspector) {
    122  const markupFrame = inspector._markupFrame;
    123  is(
    124    markupFrame.contentDocument.getElementById("root").childNodes.length,
    125    0,
    126    "The markup-view is unloaded"
    127  );
    128 }