tor-browser

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

browser_dbg-custom-formatters.js (4710B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Check display of custom formatters in debugger.
      7 const TEST_FILENAME = `doc_dbg-custom-formatters.html`;
      8 const TEST_FUNCTION_NAME = "pauseWithCustomFormattedObject";
      9 const CUSTOM_FORMATTED_BODY = "customFormattedBody";
     10 const VARIABLE_NAME = "xyz";
     11 
     12 add_task(async function () {
     13  await pushPref("devtools.custom-formatters.enabled", true);
     14 
     15  const dbg = await initDebugger(TEST_FILENAME);
     16  await selectSource(dbg, TEST_FILENAME);
     17 
     18  info(
     19    "Test that custom formatted objects are displayed as expected in the Watch Expressions panel"
     20  );
     21  await addExpression(dbg, `({customFormatHeaderAndBody: "body"})`);
     22  const expressionsElements = findAllElements(dbg, "expressionNodes");
     23  is(expressionsElements.length, 1);
     24 
     25  const customFormattedElement = expressionsElements[0];
     26 
     27  const headerJsonMlNode =
     28    customFormattedElement.querySelector(".objectBox-jsonml");
     29  is(
     30    headerJsonMlNode.innerText,
     31    "CUSTOM",
     32    "The object is rendered with a custom formatter"
     33  );
     34 
     35  is(
     36    customFormattedElement.querySelector(".theme-twisty"),
     37    null,
     38    "The expression is not expandable…"
     39  );
     40  const customFormattedElementArrow =
     41    customFormattedElement.querySelector(".collapse-button");
     42  ok(customFormattedElementArrow, "… but the custom formatter is");
     43 
     44  info("Expanding the Object");
     45  const onBodyRendered = waitFor(
     46    () =>
     47      !!customFormattedElement.querySelector(
     48        ".objectBox-jsonml-body-wrapper .objectBox-jsonml"
     49      )
     50  );
     51 
     52  customFormattedElementArrow.click();
     53  await onBodyRendered;
     54 
     55  ok(
     56    customFormattedElement
     57      .querySelector(".collapse-button")
     58      .classList.contains("expanded"),
     59    "The arrow of the node has the expected class after clicking on it"
     60  );
     61 
     62  const bodyJsonMlNode = customFormattedElement.querySelector(
     63    ".objectBox-jsonml-body-wrapper > .objectBox-jsonml"
     64  );
     65  ok(bodyJsonMlNode, "The body is custom formatted");
     66  is(bodyJsonMlNode?.textContent, "body", "The body text is correct");
     67 
     68  info("Check that custom formatters are displayed in Scopes panel");
     69 
     70  // The function has a debugger statement that will pause the debugger
     71  invokeInTab(TEST_FUNCTION_NAME);
     72 
     73  info("Wait for the debugger to be paused");
     74  await waitForPaused(dbg);
     75 
     76  info(
     77    `Check that '${VARIABLE_NAME}' is in the scopes panel and custom formatted`
     78  );
     79  const index = 5;
     80  is(
     81    getScopeNodeLabel(dbg, index),
     82    VARIABLE_NAME,
     83    `Got '${VARIABLE_NAME}' at the expected position`
     84  );
     85  const scopeXElement = findElement(dbg, "scopeValue", index);
     86  is(
     87    scopeXElement.innerText,
     88    "CUSTOM",
     89    `'${VARIABLE_NAME}' is custom formatted in the scopes panel`
     90  );
     91  const xArrow = scopeXElement.querySelector(".collapse-button");
     92  ok(xArrow, `'${VARIABLE_NAME}' is expandable`);
     93 
     94  info(`Expanding '${VARIABLE_NAME}'`);
     95  const onScopeBodyRendered = waitFor(
     96    () =>
     97      !!scopeXElement.querySelector(
     98        ".objectBox-jsonml-body-wrapper .objectBox-jsonml"
     99      )
    100  );
    101 
    102  xArrow.click();
    103  await onScopeBodyRendered;
    104  const scopeXBodyJsonMlNode = scopeXElement.querySelector(
    105    ".objectBox-jsonml-body-wrapper > .objectBox-jsonml"
    106  );
    107  ok(scopeXBodyJsonMlNode, "The scope item body is custom formatted");
    108  is(
    109    scopeXBodyJsonMlNode?.textContent,
    110    CUSTOM_FORMATTED_BODY,
    111    "The scope item body text is correct"
    112  );
    113 
    114  await resume(dbg);
    115 
    116  info("Check that custom formatters are displayed in the Debugger tooltip");
    117 
    118  // The function has a debugger statement that will pause the debugger
    119  invokeInTab(TEST_FUNCTION_NAME);
    120  await waitForPaused(dbg);
    121 
    122  await assertPreviewTextValue(dbg, 43, 16, {
    123    expression: "abc",
    124    result: "object tag: null",
    125  });
    126 
    127  await assertPreviewTextValue(dbg, 44, 16, {
    128    expression: VARIABLE_NAME,
    129    result: "CUSTOM",
    130    doNotClose: true,
    131  });
    132 
    133  const tooltipPopup = findElement(dbg, "previewPopup");
    134 
    135  const tooltipArrow = tooltipPopup.querySelector(".collapse-button");
    136  ok(tooltipArrow, `'${VARIABLE_NAME}' is expandable`);
    137 
    138  info(`Expanding '${VARIABLE_NAME}'`);
    139  const onTooltipBodyRendered = waitFor(
    140    () =>
    141      !!tooltipPopup.querySelector(
    142        ".objectBox-jsonml-body-wrapper .objectBox-jsonml"
    143      )
    144  );
    145 
    146  tooltipArrow.click();
    147  await onTooltipBodyRendered;
    148  const tooltipBodyJsonMlNode = tooltipPopup.querySelector(
    149    ".objectBox-jsonml-body-wrapper > .objectBox-jsonml"
    150  );
    151  ok(tooltipBodyJsonMlNode, "The tooltip variable body is custom formatted");
    152  is(
    153    tooltipBodyJsonMlNode?.textContent,
    154    CUSTOM_FORMATTED_BODY,
    155    "The tooltip variable body text is correct"
    156  );
    157 
    158  await resume(dbg);
    159 });