tor-browser

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

browser_webconsole_object_ctrl_click.js (3692B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 // Test that the ObjectInspector is rendered correctly in the sidebar.
      5 
      6 "use strict";
      7 
      8 const TEST_URI = `data:text/html;charset=utf8,<!DOCTYPE html><script>
      9    console.log({
     10      a:1,
     11      b:2,
     12      c:[3]
     13    });
     14  </script>`;
     15 
     16 add_task(async function () {
     17  // Should be removed when sidebar work is complete
     18  await pushPref("devtools.webconsole.sidebarToggle", true);
     19  const isMacOS = Services.appinfo.OS === "Darwin";
     20 
     21  const hud = await openNewTabAndConsole(TEST_URI);
     22 
     23  const message = findConsoleAPIMessage(hud, "Object");
     24  const object = message.querySelector(".object-inspector .objectBox-object");
     25 
     26  info("Ctrl+click on an object to put it in the sidebar");
     27  const onSidebarShown = waitFor(() =>
     28    hud.ui.document.querySelector(".sidebar")
     29  );
     30  AccessibilityUtils.setEnv({
     31    // Component that renders an object handles keyboard interactions on the
     32    // container level.
     33    mustHaveAccessibleRule: false,
     34    interactiveRule: false,
     35    focusableRule: false,
     36    labelRule: false,
     37  });
     38  EventUtils.sendMouseEvent(
     39    {
     40      type: "click",
     41      [isMacOS ? "metaKey" : "ctrlKey"]: true,
     42    },
     43    object,
     44    hud.ui.window
     45  );
     46  AccessibilityUtils.resetEnv();
     47  await onSidebarShown;
     48  ok(true, "sidebar is displayed after user Ctrl+clicked on it");
     49 
     50  const sidebarContents = hud.ui.document.querySelector(".sidebar-contents");
     51  let objectInspectors = [...sidebarContents.querySelectorAll(".tree")];
     52  is(
     53    objectInspectors.length,
     54    1,
     55    "There is the expected number of object inspectors"
     56  );
     57  let [objectInspector] = objectInspectors;
     58 
     59  // The object in the sidebar now should look like:
     60  // ▼ { … }
     61  // |   a: 1
     62  // |   b: 2
     63  // | ▶︎ c: Array [3]
     64  // | ▶︎ <prototype>: Object { … }
     65  await waitFor(() => objectInspector.querySelectorAll(".node").length === 5);
     66 
     67  let propertiesNodes = [
     68    ...objectInspector.querySelectorAll(".object-label"),
     69  ].map(el => el.textContent);
     70  let arrayPropertiesNames = ["a", "b", "c", "<prototype>"];
     71  is(
     72    JSON.stringify(propertiesNodes),
     73    JSON.stringify(arrayPropertiesNames),
     74    "The expected nodes are displayed"
     75  );
     76 
     77  is(
     78    message.querySelectorAll(".node").length,
     79    1,
     80    "The message in the content panel wasn't expanded"
     81  );
     82 
     83  info(
     84    "Expand the output message and Ctrl+click on the `c` property node to put it in the sidebar"
     85  );
     86  message.querySelector(".node").click();
     87  const cNode = await waitFor(() => message.querySelectorAll(".node")[3]);
     88  AccessibilityUtils.setEnv({
     89    // Component that renders an object handles keyboard interactions on the
     90    // container level.
     91    focusableRule: false,
     92    interactiveRule: false,
     93    labelRule: false,
     94  });
     95  EventUtils.sendMouseEvent(
     96    {
     97      type: "click",
     98      [isMacOS ? "metaKey" : "ctrlKey"]: true,
     99    },
    100    cNode,
    101    hud.ui.window
    102  );
    103  AccessibilityUtils.resetEnv();
    104 
    105  objectInspectors = [...sidebarContents.querySelectorAll(".tree")];
    106  is(objectInspectors.length, 1, "There is still only one object inspector");
    107  [objectInspector] = objectInspectors;
    108 
    109  // The object in the sidebar now should look like:
    110  // ▼ (1) […]
    111  // |   0: 3
    112  // |   length: 1
    113  // | ▶︎ <prototype>: Array []
    114  await waitFor(() => objectInspector.querySelectorAll(".node").length === 4);
    115 
    116  propertiesNodes = [...objectInspector.querySelectorAll(".object-label")].map(
    117    el => el.textContent
    118  );
    119  arrayPropertiesNames = ["0", "length", "<prototype>"];
    120  is(
    121    JSON.stringify(propertiesNodes),
    122    JSON.stringify(arrayPropertiesNames),
    123    "The expected nodes are displayed"
    124  );
    125 });