tor-browser

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

browser_webconsole_scroll.js (13136B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 const TEST_URI = `data:text/html;charset=utf-8,<!DOCTYPE html><p>Web Console test for  scroll.</p>
      7  <script>
      8    var a = () => b();
      9    var b = () => c();
     10    var c = (i) => console.trace("trace in C " + i);
     11 
     12    for (let i = 0; i <= 100; i++) {
     13      console.log("init-" + i);
     14      if (i % 10 === 0) {
     15        c(i);
     16      }
     17    }
     18  </script>
     19 `;
     20 
     21 const {
     22  MESSAGE_SOURCE,
     23 } = require("resource://devtools/client/webconsole/constants.js");
     24 
     25 add_task(async function () {
     26  const hud = await openNewTabAndConsole(TEST_URI);
     27  const { ui } = hud;
     28  const outputContainer = ui.outputNode.querySelector(".webconsole-output");
     29 
     30  info("Console should be scrolled to bottom on initial load from page logs");
     31  await waitFor(() => findConsoleAPIMessage(hud, "init-100"));
     32  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
     33  ok(
     34    isScrolledToBottom(outputContainer),
     35    "The console is scrolled to the bottom"
     36  );
     37 
     38  info("Wait until all stacktraces are rendered");
     39  await waitFor(() => allTraceMessagesAreExpanded(hud));
     40  ok(
     41    isScrolledToBottom(outputContainer),
     42    "The console is scrolled to the bottom"
     43  );
     44 
     45  await reloadBrowser();
     46 
     47  info("Console should be scrolled to bottom after refresh from page logs");
     48  await waitFor(() => findConsoleAPIMessage(hud, "init-100"));
     49  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
     50  ok(
     51    isScrolledToBottom(outputContainer),
     52    "The console is scrolled to the bottom"
     53  );
     54 
     55  info("Wait until all stacktraces are rendered");
     56  await waitFor(() => allTraceMessagesAreExpanded(hud));
     57 
     58  // There's an annoying race here where the SmartTrace from above goes into
     59  // the DOM, our waitFor passes, but the SmartTrace still hasn't called its
     60  // onReady callback. If this happens, it will call ConsoleOutput's
     61  // maybeScrollToBottomMessageCallback *after* we set scrollTop below,
     62  // causing it to undo our work. Waiting a little bit here should resolve it.
     63  await new Promise(r =>
     64    window.requestAnimationFrame(() => TestUtils.executeSoon(r))
     65  );
     66  ok(
     67    isScrolledToBottom(outputContainer),
     68    "The console is scrolled to the bottom"
     69  );
     70 
     71  info("Scroll up and wait for the layout to stabilize");
     72  outputContainer.scrollTop = 0;
     73  await new Promise(r =>
     74    window.requestAnimationFrame(() => TestUtils.executeSoon(r))
     75  );
     76 
     77  info("Add a console.trace message to check that the scroll isn't impacted");
     78  let onMessage = waitForMessageByType(hud, "trace in C", ".console-api");
     79  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
     80    content.wrappedJSObject.c();
     81  });
     82  let message = await onMessage;
     83  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
     84  is(outputContainer.scrollTop, 0, "The console stayed scrolled to the top");
     85 
     86  info("Wait until the stacktrace is rendered");
     87  await waitFor(() => message.node.querySelector(".frame"));
     88  is(outputContainer.scrollTop, 0, "The console stayed scrolled to the top");
     89 
     90  info("Evaluate a command to check that the console scrolls to the bottom");
     91  await executeAndWaitForResultMessage(hud, "21 + 21", "42");
     92  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
     93  ok(
     94    isScrolledToBottom(outputContainer),
     95    "The console is scrolled to the bottom"
     96  );
     97 
     98  info("Scroll up and wait for the layout to stabilize");
     99  outputContainer.scrollTop = 0;
    100  await new Promise(r =>
    101    window.requestAnimationFrame(() => TestUtils.executeSoon(r))
    102  );
    103 
    104  info(
    105    "Trigger a network request so the last message in the console store won't be visible"
    106  );
    107  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
    108    await content.fetch(
    109      "http://mochi.test:8888/browser/devtools/client/webconsole/test/browser/sjs_cors-test-server.sjs",
    110      { mode: "cors" }
    111    );
    112  });
    113 
    114  // Wait until the evalation result message isn't the last in the store anymore
    115  await waitFor(() => {
    116    const state = ui.wrapper.getStore().getState();
    117    return (
    118      state.messages.mutableMessagesById.get(state.messages.lastMessageId)
    119        ?.source === MESSAGE_SOURCE.NETWORK
    120    );
    121  });
    122 
    123  // Wait a bit so the pin to bottom would have the chance to be hit.
    124  await wait(500);
    125  ok(
    126    !isScrolledToBottom(outputContainer),
    127    "The console is not scrolled to the bottom"
    128  );
    129 
    130  info(
    131    "Evaluate a new command to check that the console scrolls to the bottom"
    132  );
    133  await executeAndWaitForResultMessage(hud, "7 + 2", "9");
    134  ok(
    135    isScrolledToBottom(outputContainer),
    136    "The console is scrolled to the bottom"
    137  );
    138 
    139  info(
    140    "Add a message to check that the console do scroll since we're at the bottom"
    141  );
    142  onMessage = waitForMessageByType(hud, "scroll", ".console-api");
    143  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
    144    content.wrappedJSObject.console.log("scroll");
    145  });
    146  await onMessage;
    147  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
    148  ok(
    149    isScrolledToBottom(outputContainer),
    150    "The console is scrolled to the bottom"
    151  );
    152 
    153  info(
    154    "Evaluate an Error object to check that the console scrolls to the bottom"
    155  );
    156  message = await executeAndWaitForResultMessage(
    157    hud,
    158    `
    159    x = new Error("myErrorObject");
    160    x.stack = "a@b/c.js:1:2\\nd@e/f.js:3:4";
    161    x;`,
    162    "myErrorObject"
    163  );
    164  ok(
    165    isScrolledToBottom(outputContainer),
    166    "The console is scrolled to the bottom"
    167  );
    168 
    169  info(
    170    "Wait until the stacktrace is rendered and check the console is scrolled"
    171  );
    172  await waitFor(() =>
    173    message.node.querySelector(".objectBox-stackTrace .frame")
    174  );
    175  ok(
    176    isScrolledToBottom(outputContainer),
    177    "The console is scrolled to the bottom"
    178  );
    179 
    180  info(
    181    "Throw an Error object in a direct evaluation to check that the console scrolls to the bottom"
    182  );
    183  message = await executeAndWaitForErrorMessage(
    184    hud,
    185    `
    186      x = new Error("myEvaluatedThrownErrorObject");
    187      x.stack = "a@b/c.js:1:2\\nd@e/f.js:3:4";
    188      throw x;
    189    `,
    190    "Uncaught Error: myEvaluatedThrownErrorObject"
    191  );
    192  ok(
    193    isScrolledToBottom(outputContainer),
    194    "The console is scrolled to the bottom"
    195  );
    196 
    197  info(
    198    "Wait until the stacktrace is rendered and check the console is scrolled"
    199  );
    200  await waitFor(() =>
    201    message.node.querySelector(".objectBox-stackTrace .frame")
    202  );
    203  ok(
    204    isScrolledToBottom(outputContainer),
    205    "The console is scrolled to the bottom"
    206  );
    207 
    208  info("Throw an Error object to check that the console scrolls to the bottom");
    209  message = await executeAndWaitForErrorMessage(
    210    hud,
    211    `
    212    setTimeout(() => {
    213      x = new Error("myThrownErrorObject");
    214      x.stack = "a@b/c.js:1:2\\nd@e/f.js:3:4";
    215      throw x
    216    }, 10)`,
    217    "Uncaught Error: myThrownErrorObject"
    218  );
    219  ok(
    220    isScrolledToBottom(outputContainer),
    221    "The console is scrolled to the bottom"
    222  );
    223 
    224  info(
    225    "Wait until the stacktrace is rendered and check the console is scrolled"
    226  );
    227  await waitFor(() =>
    228    message.node.querySelector(".objectBox-stackTrace .frame")
    229  );
    230  ok(
    231    isScrolledToBottom(outputContainer),
    232    "The console is scrolled to the bottom"
    233  );
    234 
    235  info(
    236    "Add a console.trace message to check that the console stays scrolled to bottom"
    237  );
    238  onMessage = waitForMessageByType(hud, "trace in C", ".console-api");
    239  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
    240    content.wrappedJSObject.c();
    241  });
    242  message = await onMessage;
    243  ok(hasVerticalOverflow(outputContainer), "There is a vertical overflow");
    244  ok(
    245    isScrolledToBottom(outputContainer),
    246    "The console is scrolled to the bottom"
    247  );
    248 
    249  info("Wait until the stacktrace is rendered");
    250  await waitFor(() => message.node.querySelector(".frame"));
    251  ok(
    252    isScrolledToBottom(outputContainer),
    253    "The console is scrolled to the bottom"
    254  );
    255 
    256  info("Check that repeated messages don't prevent scroll to bottom");
    257  // We log a first message.
    258  onMessage = waitForMessageByType(hud, "repeat", ".console-api");
    259  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
    260    content.wrappedJSObject.console.log("repeat");
    261  });
    262  message = await onMessage;
    263 
    264  // And a second one. We can't log them at the same time since we batch redux actions,
    265  // and the message would already appear with the repeat badge, and the bug is
    266  // only triggered when the badge is rendered after the initial message rendering.
    267  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
    268    content.wrappedJSObject.console.log("repeat");
    269  });
    270  await waitFor(() => message.node.querySelector(".message-repeats"));
    271  ok(
    272    isScrolledToBottom(outputContainer),
    273    "The console is still scrolled to the bottom when the repeat badge is added"
    274  );
    275 
    276  info(
    277    "Check that adding a message after a repeated message scrolls to bottom"
    278  );
    279  onMessage = waitForMessageByType(hud, "after repeat", ".console-api");
    280  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
    281    content.wrappedJSObject.console.log("after repeat");
    282  });
    283  message = await onMessage;
    284  ok(
    285    isScrolledToBottom(outputContainer),
    286    "The console is scrolled to the bottom after a repeated message"
    287  );
    288 
    289  info(
    290    "Check that switching between editor and inline mode keep the output scrolled to bottom"
    291  );
    292  await toggleLayout(hud);
    293  // Wait until the output is scrolled to the bottom.
    294  await waitFor(
    295    () => isScrolledToBottom(outputContainer),
    296    "Output does not scroll to the bottom after switching to editor mode"
    297  );
    298  ok(
    299    true,
    300    "The console is scrolled to the bottom after switching to editor mode"
    301  );
    302 
    303  // Switching back to inline mode
    304  await toggleLayout(hud);
    305  // Wait until the output is scrolled to the bottom.
    306  await waitFor(
    307    () => isScrolledToBottom(outputContainer),
    308    "Output does not scroll to the bottom after switching back to inline mode"
    309  );
    310  ok(
    311    true,
    312    "The console is scrolled to the bottom after switching back to inline mode"
    313  );
    314 
    315  info(
    316    "Check that expanding a large object does not scroll the output to the bottom"
    317  );
    318  // Clear the output so we only have the object
    319  await clearOutput(hud);
    320  // Evaluate an object with a hundred properties
    321  const result = await executeAndWaitForResultMessage(
    322    hud,
    323    `Array.from({length: 100}, (_, i) => i)
    324      .reduce(
    325        (acc, item) => {acc["item-" + item] = item; return acc;},
    326        {}
    327      )`,
    328    "Object"
    329  );
    330  // Expand the object
    331  result.node.querySelector(".theme-twisty").click();
    332  // Wait until we have 102 nodes (the root node, 100 properties + <prototype>)
    333  await waitFor(() => result.node.querySelectorAll(".node").length === 102);
    334  // wait for a bit to give time to the resize observer callback to be triggered
    335  await wait(500);
    336  ok(hasVerticalOverflow(outputContainer), "The output does overflow");
    337  is(
    338    isScrolledToBottom(outputContainer),
    339    false,
    340    "The output was not scrolled to the bottom"
    341  );
    342 
    343  await clearOutput(hud);
    344  // Log a big object that will be much larger than the output container
    345  onMessage = waitForMessageByType(hud, "WE ALL LIVE IN A", ".warn");
    346  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
    347    const win = content.wrappedJSObject;
    348    for (let i = 1; i < 100; i++) {
    349      win["a" + i] = function (j) {
    350        win["a" + j]();
    351      }.bind(null, i + 1);
    352    }
    353    win.a100 = function () {
    354      win.console.warn(new Error("WE ALL LIVE IN A"));
    355    };
    356    win.a1();
    357  });
    358  message = await onMessage;
    359  // Give the intersection observer a chance to break this if it's going to
    360  await wait(500);
    361  // Assert here and below for ease of debugging where we lost the scroll
    362  is(
    363    isScrolledToBottom(outputContainer),
    364    true,
    365    "The output was scrolled to the bottom"
    366  );
    367  // Then log something else to make sure we haven't lost our scroll pinning
    368  onMessage = waitForMessageByType(hud, "YELLOW SUBMARINE", ".console-api");
    369  SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
    370    content.wrappedJSObject.console.log("YELLOW SUBMARINE");
    371  });
    372  message = await onMessage;
    373  // Again, give the scroll position a chance to be broken
    374  await wait(500);
    375  is(
    376    isScrolledToBottom(outputContainer),
    377    true,
    378    "The output was scrolled to the bottom"
    379  );
    380 });
    381 
    382 function hasVerticalOverflow(container) {
    383  return container.scrollHeight > container.clientHeight;
    384 }
    385 
    386 function isScrolledToBottom(container) {
    387  if (!container.lastChild) {
    388    return true;
    389  }
    390  const lastNodeHeight = container.lastChild.clientHeight;
    391  return (
    392    container.scrollTop + container.clientHeight >=
    393    container.scrollHeight - lastNodeHeight / 2
    394  );
    395 }
    396 
    397 // This validates that 1) the last trace exists, and 2) that all *shown* traces
    398 // are expanded. Traces that have been scrolled out of existence due to
    399 // LazyMessageList are disregarded.
    400 function allTraceMessagesAreExpanded(hud) {
    401  return (
    402    findConsoleAPIMessage(hud, "trace in C 100") &&
    403    findConsoleAPIMessages(hud, "trace in C").every(m =>
    404      m.querySelector(".frames")
    405    )
    406  );
    407 }