tor-browser

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

browser_inspector_breadcrumbs_shadowdom.js (3357B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 "use strict";
      4 
      5 // Test that the breadcrumbs widget refreshes correctly when there are markup
      6 // mutations, even if the currently selected node is a slotted node in the shadow DOM.
      7 
      8 const TEST_URL = `data:text/html;charset=utf-8,
      9  <test-component>
     10    <div slot="slot1" id="el1">content</div>
     11  </test-component>
     12 
     13  <script>
     14    'use strict';
     15    customElements.define('test-component', class extends HTMLElement {
     16      constructor() {
     17        super();
     18        let shadowRoot = this.attachShadow({mode: 'open'});
     19        shadowRoot.innerHTML = '<slot class="slot-class" name="slot1"></slot>';
     20      }
     21    });
     22  </script>`;
     23 
     24 add_task(async function () {
     25  const { inspector } = await openInspectorForURL(TEST_URL);
     26  const { markup } = inspector;
     27  const breadcrumbs = inspector.panelDoc.getElementById(
     28    "inspector-breadcrumbs"
     29  );
     30 
     31  info("Find and expand the test-component shadow DOM host.");
     32  const hostFront = await getNodeFront("test-component", inspector);
     33  const hostContainer = markup.getContainer(hostFront);
     34  await expandContainer(inspector, hostContainer);
     35 
     36  info("Expand the shadow root");
     37  const shadowRootContainer = hostContainer.getChildContainers()[0];
     38  await expandContainer(inspector, shadowRootContainer);
     39 
     40  const slotContainer = shadowRootContainer.getChildContainers()[0];
     41 
     42  info("Select the slot node and wait for the breadcrumbs update");
     43  const slotNodeFront = slotContainer.node;
     44  let onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
     45  inspector.selection.setNodeFront(slotNodeFront);
     46  await onBreadcrumbsUpdated;
     47 
     48  checkBreadcrumbsContent(breadcrumbs, [
     49    "html",
     50    "body",
     51    "test-component",
     52    "#shadow-root",
     53    "slot.slot-class",
     54  ]);
     55 
     56  info("Expand the slot");
     57  await expandContainer(inspector, slotContainer);
     58 
     59  const slotChildContainers = slotContainer.getChildContainers();
     60  is(slotChildContainers.length, 1, "Expecting 1 slotted child");
     61 
     62  info("Select the slotted node and wait for the breadcrumbs update");
     63  const slottedNodeFront = slotChildContainers[0].node;
     64  onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
     65  inspector.selection.setNodeFront(slottedNodeFront);
     66  await onBreadcrumbsUpdated;
     67 
     68  checkBreadcrumbsContent(breadcrumbs, [
     69    "html",
     70    "body",
     71    "test-component",
     72    "div#el1",
     73  ]);
     74 
     75  info(
     76    "Update the classname of the real element and wait for the breadcrumbs update"
     77  );
     78  onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
     79  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
     80    content.document.getElementById("el1").setAttribute("class", "test");
     81  });
     82  await onBreadcrumbsUpdated;
     83 
     84  checkBreadcrumbsContent(breadcrumbs, [
     85    "html",
     86    "body",
     87    "test-component",
     88    "div#el1.test",
     89  ]);
     90 });
     91 
     92 function checkBreadcrumbsContent(breadcrumbs, selectors) {
     93  info("Check the output of the breadcrumbs widget");
     94  const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
     95  is(
     96    container.childNodes.length,
     97    selectors.length,
     98    "Correct number of buttons"
     99  );
    100  for (let i = 0; i < container.childNodes.length; i++) {
    101    is(
    102      container.childNodes[i].textContent,
    103      selectors[i],
    104      "Text content for button " + i + " is correct"
    105    );
    106  }
    107 }