tor-browser

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

browser_console_content_object.js (2907B)

      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 // Test that console API calls in the content page appear in the browser console.
      6 
      7 "use strict";
      8 
      9 const TEST_URI = `data:text/html,<!DOCTYPE html><meta charset=utf8>console API calls<script>
     10  console.log({ contentObject: "YAY!", deep: ["yes!"] });
     11 </script>`;
     12 
     13 add_task(async function () {
     14  // Show the content messages
     15  await pushPref("devtools.browsertoolbox.scope", "everything");
     16 
     17  await addTab(TEST_URI);
     18 
     19  info("Open the Browser Console");
     20  let hud = await BrowserConsoleManager.toggleBrowserConsole();
     21 
     22  info("Wait until the content object is displayed");
     23  let objectMessage = await waitFor(() =>
     24    findConsoleAPIMessage(
     25      hud,
     26      `Object { contentObject: "YAY!", deep: (1) […] }`
     27    )
     28  );
     29  ok(true, "Content object is displayed in the Browser Console");
     30 
     31  await testExpandObject(objectMessage);
     32 
     33  info("Restart the Browser Console");
     34  await safeCloseBrowserConsole();
     35  hud = await BrowserConsoleManager.toggleBrowserConsole();
     36 
     37  info("Wait until the content object is displayed");
     38  objectMessage = await waitFor(() =>
     39    findConsoleAPIMessage(
     40      hud,
     41      `Object { contentObject: "YAY!", deep: (1) […] }`
     42    )
     43  );
     44  ok(true, "Content object is displayed in the Browser Console after restart");
     45 
     46  await testExpandObject(objectMessage);
     47 });
     48 
     49 async function testExpandObject(objectMessage) {
     50  info("Check that the logged content object can be expanded");
     51  const oi = objectMessage.querySelector(".tree");
     52 
     53  ok(oi, "There's an object inspector component for the content object");
     54 
     55  oi.querySelector(".theme-twisty").click();
     56  // The object inspector now looks like:
     57  // ▼ Object { contentObject: "YAY!", deep: (1) […] }
     58  // |  contentObject: "YAY!"
     59  // |  ▶︎ deep: Array [ "yes!" ]
     60  // |  ▶︎ <prototype>
     61  await waitFor(() => oi.querySelectorAll(".node").length === 4);
     62  ok(true, "The ObjectInspector was expanded");
     63  const [root, contentObjectProp, deepProp, prototypeProp] = [
     64    ...oi.querySelectorAll(".node"),
     65  ];
     66 
     67  ok(
     68    root.textContent.includes('Object { contentObject: "YAY!", deep: (1) […] }')
     69  );
     70  ok(contentObjectProp.textContent.includes(`contentObject: "YAY!"`));
     71  ok(deepProp.textContent.includes(`deep: Array [ "yes!" ]`));
     72  ok(prototypeProp.textContent.includes(`<prototype>`));
     73 
     74  // The object inspector now looks like:
     75  // ▼ Object { contentObject: "YAY!", deep: (1) […] }
     76  // |  contentObject: "YAY!"
     77  // |  ▼︎ deep: (1) […]
     78  // |  |  0: "yes!"
     79  // |  |  length: 1
     80  // |  |  ▶︎ <prototype>
     81  // |  ▶︎ <prototype>
     82  deepProp.querySelector(".theme-twisty").click();
     83  await waitFor(() => oi.querySelectorAll(".node").length === 7);
     84  ok(true, "The nested array was expanded");
     85 }