tor-browser

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

browser_browser_toolbox_ruleview_stylesheet.js (2839B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 // There are shutdown issues for which multiple rejections are left uncaught.
      5 // See bug 1018184 for resolving these issues.
      6 const { PromiseTestUtils } = ChromeUtils.importESModule(
      7  "resource://testing-common/PromiseTestUtils.sys.mjs"
      8 );
      9 PromiseTestUtils.allowMatchingRejectionsGlobally(/File closed/);
     10 
     11 Services.scriptloader.loadSubScript(
     12  "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js",
     13  this
     14 );
     15 
     16 // On debug test machine, it takes about 50s to run the test.
     17 requestLongerTimeout(4);
     18 
     19 // Check that CSS rules are displayed with the proper source label in the
     20 // browser toolbox.
     21 add_task(async function () {
     22  // Forces the Browser Toolbox to open on the inspector by default
     23  await pushPref("devtools.browsertoolbox.panel", "inspector");
     24  // Enable Multiprocess Browser Toolbox
     25  await pushPref("devtools.browsertoolbox.scope", "everything");
     26 
     27  const ToolboxTask = await initBrowserToolboxTask();
     28  await ToolboxTask.importFunctions({
     29    getNodeFront,
     30    getNodeFrontInFrames,
     31    getRuleViewLinkByIndex,
     32    selectNode,
     33    // selectNodeInFrames depends on selectNode, getNodeFront, getNodeFrontInFrames.
     34    selectNodeInFrames,
     35    waitUntil,
     36  });
     37 
     38  // This is a simple test page, which contains a <div> with a CSS rule `color: red`
     39  // coming from a dedicated stylesheet.
     40  const tab = await addTab(
     41    `https://example.com/browser/devtools/client/framework/browser-toolbox/test/doc_browser_toolbox_ruleview_stylesheet.html`
     42  );
     43 
     44  // Set a custom attribute on the tab's browser, in order to easily select it in the markup view
     45  tab.linkedBrowser.setAttribute("test-tab", "true");
     46 
     47  info(
     48    "Get the source label for a rule displayed in the Browser Toolbox ruleview"
     49  );
     50  const sourceLabel = await ToolboxTask.spawn(null, async () => {
     51    /* global gToolbox */
     52    const inspector = gToolbox.getPanel("inspector");
     53 
     54    info("Select the rule view");
     55    const onSidebarSelect = inspector.sidebar.once("select");
     56    inspector.sidebar.select("ruleview");
     57    await onSidebarSelect;
     58 
     59    info("Select a DIV element in the test page");
     60    await selectNodeInFrames(
     61      ['browser[remote="true"][test-tab]', "div"],
     62      inspector
     63    );
     64 
     65    info("Retrieve the sourceLabel for the rule at index 1");
     66    const ruleView = inspector.getPanel("ruleview").view;
     67    await waitUntil(() => getRuleViewLinkByIndex(ruleView, 1));
     68    const sourceLabelEl = getRuleViewLinkByIndex(ruleView, 1).querySelector(
     69      ".ruleview-rule-source-label"
     70    );
     71 
     72    return sourceLabelEl.textContent;
     73  });
     74 
     75  is(
     76    sourceLabel,
     77    "style_browser_toolbox_ruleview_stylesheet.css:1",
     78    "source label has the expected value in the ruleview"
     79  );
     80 
     81  await ToolboxTask.destroy();
     82 });