tor-browser

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

browser_styleeditor_pretty.js (4554B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 "use strict";
      4 
      5 // Test that only minified sheets are automatically prettified,
      6 // and that the pretty print button behaves as expected.
      7 
      8 const TESTCASE_URI = TEST_BASE_HTTP + "minified.html";
      9 
     10 const PRETTIFIED_CSS_TEXT = `
     11 body {
     12  background:white;
     13 }
     14 div {
     15  font-size:4em;
     16  color:red
     17 }
     18 span {
     19  color:green;
     20  @media screen {
     21    background: blue;
     22    &>.myClass {
     23      padding: 1em
     24    }
     25  }
     26 }
     27 `.trimStart();
     28 
     29 const INLINE_STYLESHEET_ORIGINAL_CSS_TEXT = `
     30 body { background: red; }
     31 div {
     32 font-size: 5em;
     33 color: red;
     34 }`.trimStart();
     35 
     36 const INLINE_STYLESHEET_PRETTIFIED_CSS_TEXT = `
     37 body {
     38  background: red;
     39 }
     40 div {
     41  font-size: 5em;
     42  color: red;
     43 }
     44 `.trimStart();
     45 
     46 add_task(async function () {
     47  // Use 2 spaces for indent
     48  await pushPref("devtools.editor.expandtab", true);
     49  await pushPref("devtools.editor.tabsize", 2);
     50 
     51  const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);
     52  is(ui.editors.length, 3, "Three sheets present.");
     53 
     54  info("Testing minified style sheet.");
     55  const minifiedEditor = await ui.editors[0].getSourceEditor();
     56 
     57  is(
     58    minifiedEditor.sourceEditor.getText(),
     59    PRETTIFIED_CSS_TEXT,
     60    "minified source has been prettified automatically"
     61  );
     62 
     63  const prettyPrintButton = panel.panelWindow.document.querySelector(
     64    ".style-editor-prettyPrintButton"
     65  );
     66 
     67  info("Attempt to prettify the stylesheet manually");
     68  let onEditorChange = minifiedEditor.sourceEditor.once("changes");
     69  EventUtils.synthesizeMouseAtCenter(prettyPrintButton, {}, panel.panelWindow);
     70  await onEditorChange;
     71 
     72  is(
     73    minifiedEditor.sourceEditor.getText(),
     74    PRETTIFIED_CSS_TEXT,
     75    "Re-prettifying the stylesheet did not change the text unnecessarily"
     76  );
     77 
     78  info("Selecting second, non-minified style sheet.");
     79  await ui.selectStyleSheet(ui.editors[1].styleSheet);
     80 
     81  const inlineEditor = ui.editors[1];
     82  is(
     83    inlineEditor.sourceEditor.getText(),
     84    INLINE_STYLESHEET_ORIGINAL_CSS_TEXT,
     85    "non-minified source has been left untouched"
     86  );
     87  ok(prettyPrintButton, "Pretty print button is displayed");
     88  ok(
     89    !prettyPrintButton.hasAttribute("disabled"),
     90    "Pretty print button is enabled"
     91  );
     92  is(
     93    prettyPrintButton.getAttribute("title"),
     94    "Pretty print style sheet",
     95    "Pretty print button has the expected title attribute"
     96  );
     97 
     98  onEditorChange = inlineEditor.sourceEditor.once("changes");
     99  EventUtils.synthesizeMouseAtCenter(prettyPrintButton, {}, panel.panelWindow);
    100  await onEditorChange;
    101 
    102  is(
    103    inlineEditor.sourceEditor.getText(),
    104    INLINE_STYLESHEET_PRETTIFIED_CSS_TEXT,
    105    "inline stylesheet was prettified as expected when clicking on pretty print button"
    106  );
    107 
    108  info("Attempt to prettify the inline stylesheet again");
    109  onEditorChange = inlineEditor.sourceEditor.once("changes");
    110  EventUtils.synthesizeMouseAtCenter(prettyPrintButton, {}, panel.panelWindow);
    111  await onEditorChange;
    112 
    113  is(
    114    inlineEditor.sourceEditor.getText(),
    115    INLINE_STYLESHEET_PRETTIFIED_CSS_TEXT,
    116    "Re-prettifying the inline stylesheet did not change the text unnecessarily"
    117  );
    118 
    119  info("Selecting original style sheet.");
    120  await ui.selectStyleSheet(ui.editors[2].styleSheet);
    121  ok(
    122    prettyPrintButton.hasAttribute("disabled"),
    123    "Pretty print button is disabled when selecting an original file"
    124  );
    125  await waitFor(
    126    () =>
    127      prettyPrintButton.getAttribute("title") ===
    128      "Can only pretty print CSS files"
    129  );
    130  ok(
    131    true,
    132    "Pretty print button has the expected title attribute when it's disabled"
    133  );
    134 });
    135 
    136 add_task(async function testSystemStylesheet() {
    137  const { ui, panel } = await openStyleEditorForURL("about:support");
    138 
    139  const formsEditor = ui.editors.find(
    140    editor => editor.friendlyName === "forms.css"
    141  );
    142  ok(!!formsEditor, "Found the editor for forms.css");
    143 
    144  info("Selecting system style sheet.");
    145  await ui.selectStyleSheet(formsEditor.styleSheet);
    146 
    147  ok(
    148    formsEditor.sourceEditor.config.readOnly,
    149    "The editor for system stylesheet is readonly"
    150  );
    151 
    152  const prettyPrintButton = panel.panelWindow.document.querySelector(
    153    ".style-editor-prettyPrintButton"
    154  );
    155  ok(prettyPrintButton, "Pretty print button is displayed");
    156  ok(
    157    prettyPrintButton.hasAttribute("disabled"),
    158    "Pretty print button is disabled"
    159  );
    160  await waitFor(
    161    () =>
    162      prettyPrintButton.getAttribute("title") ===
    163      "Can’t pretty print read-only style sheet."
    164  );
    165 
    166  ok(true, "Pretty print button has the expected title attribute");
    167 });