tor-browser

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

browser_markup_copy_html.js (2862B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test the copy inner and outer html menu options.
      7 
      8 // The nicely formatted HTML code.
      9 const FORMATTED_HTML = `<body>
     10  <style>
     11    div {
     12      color: red;
     13    }
     14 
     15    span {
     16      text-decoration: underline;
     17    }
     18  </style>
     19  <div><span><em>Hello</em></span></div>
     20  <script>
     21    console.log("Hello!");
     22  </script>
     23 </body>`;
     24 
     25 // The inner HTML of the body node from the code above.
     26 const FORMATTED_INNER_HTML = FORMATTED_HTML.replace(/<\/*body>/g, "")
     27  .trim()
     28  .replace(/^ {2}/gm, "");
     29 
     30 // The formatted outer HTML, using tabs rather than spaces.
     31 const TABS_FORMATTED_HTML = FORMATTED_HTML.replace(/[ ]{2}/g, "\t");
     32 
     33 // The formatted outer HTML, using 3 spaces instead of 2.
     34 const THREE_SPACES_FORMATTED_HTML = FORMATTED_HTML.replace(/[ ]{2}/g, "   ");
     35 
     36 // Uglify the formatted code by removing all spaces and line breaks.
     37 const UGLY_HTML = FORMATTED_HTML.replace(/[\r\n\s]+/g, "");
     38 
     39 // And here is the inner html of the body node from the ugly code above.
     40 const UGLY_INNER_HTML = UGLY_HTML.replace(/<\/*body>/g, "");
     41 
     42 add_task(async function () {
     43  // Load the ugly code in a new tab and open the inspector.
     44  const { inspector } = await openInspectorForURL(
     45    "data:text/html;charset=utf-8," + encodeURIComponent(UGLY_HTML)
     46  );
     47 
     48  info("Get the inner and outer html copy menu items");
     49  const allMenuItems = openContextMenuAndGetAllItems(inspector);
     50  const outerHtmlMenu = allMenuItems.find(
     51    ({ id }) => id === "node-menu-copyouter"
     52  );
     53  const innerHtmlMenu = allMenuItems.find(
     54    ({ id }) => id === "node-menu-copyinner"
     55  );
     56 
     57  info("Try to copy the outer html");
     58  await waitForClipboardPromise(() => outerHtmlMenu.click(), UGLY_HTML);
     59 
     60  info("Try to copy the inner html");
     61  await waitForClipboardPromise(() => innerHtmlMenu.click(), UGLY_INNER_HTML);
     62 
     63  info("Set the pref for beautifying html on copy");
     64  await pushPref("devtools.markup.beautifyOnCopy", true);
     65 
     66  info("Try to copy the beautified outer html");
     67  await waitForClipboardPromise(() => outerHtmlMenu.click(), FORMATTED_HTML);
     68 
     69  info("Try to copy the beautified inner html");
     70  await waitForClipboardPromise(
     71    () => innerHtmlMenu.click(),
     72    FORMATTED_INNER_HTML
     73  );
     74 
     75  info("Set the pref to stop expanding tabs into spaces");
     76  await pushPref("devtools.editor.expandtab", false);
     77 
     78  info("Check that the beautified outer html uses tabs");
     79  await waitForClipboardPromise(
     80    () => outerHtmlMenu.click(),
     81    TABS_FORMATTED_HTML
     82  );
     83 
     84  info("Set the pref to expand tabs to 3 spaces");
     85  await pushPref("devtools.editor.expandtab", true);
     86  await pushPref("devtools.editor.tabsize", 3);
     87 
     88  info("Try to copy the beautified outer html");
     89  await waitForClipboardPromise(
     90    () => outerHtmlMenu.click(),
     91    THREE_SPACES_FORMATTED_HTML
     92  );
     93 });