tor-browser

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

browser_webconsole_in_line_layout.js (4087B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that the in-line layout works as expected
      7 
      8 const TEST_URI =
      9  "data:text/html,<!DOCTYPE html><meta charset=utf8>Test in-line console layout";
     10 
     11 const MINIMUM_MESSAGE_HEIGHT = 20;
     12 
     13 add_task(async function () {
     14  const hud = await openNewTabAndConsole(TEST_URI);
     15  const { ui } = hud;
     16  const { document } = ui;
     17  const appNode = document.querySelector(".webconsole-app");
     18  const filterBarNode = appNode.querySelector(
     19    ".webconsole-filteringbar-wrapper"
     20  );
     21  const outputNode = appNode.querySelector(".webconsole-output");
     22  const inputNode = appNode.querySelector(".jsterm-input-container");
     23  const eagerNode = document.querySelector(".eager-evaluation-result");
     24 
     25  // The app height is the sum of the filter bar, input, and eager evaluation
     26  const calculateAppHeight = () =>
     27    filterBarNode.offsetHeight +
     28    inputNode.offsetHeight +
     29    eagerNode.offsetHeight;
     30 
     31  testLayout(appNode);
     32 
     33  is(outputNode.offsetHeight, 0, "output node has no height");
     34  is(
     35    calculateAppHeight(),
     36    appNode.offsetHeight,
     37    "The entire height is taken by filter bar, input, and eager result"
     38  );
     39 
     40  info("Logging a message in the content window");
     41  const onLogMessage = waitForMessageByType(
     42    hud,
     43    "simple text message",
     44    ".console-api"
     45  );
     46  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
     47    content.wrappedJSObject.console.log("simple text message");
     48  });
     49  const logMessage = await onLogMessage;
     50  testLayout(appNode);
     51  is(
     52    outputNode.clientHeight,
     53    logMessage.node.clientHeight,
     54    "Output node is only the height of the message it contains"
     55  );
     56 
     57  info("Logging multiple messages to make the output overflow");
     58  const onLastMessage = waitForMessageByType(
     59    hud,
     60    "message-100",
     61    ".console-api"
     62  );
     63  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
     64    for (let i = 1; i <= 100; i++) {
     65      content.wrappedJSObject.console.log("message-" + i);
     66    }
     67  });
     68  await onLastMessage;
     69  Assert.greater(
     70    outputNode.scrollHeight,
     71    outputNode.clientHeight,
     72    "Output node overflows"
     73  );
     74  testLayout(appNode);
     75 
     76  info("Make sure setting a tall value in the input does not break the layout");
     77  setInputValue(hud, "multiline\n".repeat(200));
     78  is(
     79    outputNode.clientHeight,
     80    MINIMUM_MESSAGE_HEIGHT,
     81    "One message is still visible in the output node"
     82  );
     83  testLayout(appNode);
     84 
     85  const filterBarHeight = filterBarNode.clientHeight;
     86 
     87  info("Shrink the window so the filter buttons are put in a new line");
     88  const toolbox = hud.ui.wrapper.toolbox;
     89  const hostWindow = toolbox.win.parent;
     90  hostWindow.resizeTo(300, window.screen.availHeight);
     91  await waitFor(() =>
     92    document.querySelector(".webconsole-filteringbar-wrapper.narrow")
     93  );
     94 
     95  Assert.greater(
     96    filterBarNode.clientHeight,
     97    filterBarHeight,
     98    "The filter bar is taller"
     99  );
    100  testLayout(appNode);
    101 
    102  info("Expand the window so filter buttons aren't on their own line anymore");
    103  hostWindow.resizeTo(window.screen.availWidth, window.screen.availHeight);
    104  await waitFor(() =>
    105    document.querySelector(".webconsole-filteringbar-wrapper.wide")
    106  );
    107  testLayout(appNode);
    108 
    109  setInputValue(hud, "");
    110  testLayout(appNode);
    111 
    112  await clearOutput(hud);
    113  testLayout(appNode);
    114  is(outputNode.offsetHeight, 0, "output node has no height");
    115  is(
    116    calculateAppHeight(),
    117    appNode.offsetHeight,
    118    "The entire height is taken by filter bar, input, and eager result"
    119  );
    120 });
    121 
    122 function testLayout(node) {
    123  is(
    124    node.offsetHeight,
    125    node.scrollHeight,
    126    "there's no scrollbar on the wrapper"
    127  );
    128  Assert.lessOrEqual(
    129    node.offsetHeight,
    130    node.ownerDocument.body.offsetHeight,
    131    "console is not taller than document body"
    132  );
    133  const childSumHeight = [...node.childNodes].reduce(
    134    (height, n) => height + n.offsetHeight,
    135    0
    136  );
    137  Assert.greaterOrEqual(
    138    node.offsetHeight,
    139    childSumHeight,
    140    "the sum of the height of wrapper child nodes is not taller than wrapper's one"
    141  );
    142 }