tor-browser

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

browser_styleeditor_sourcemaps.js (4043B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // https rather than chrome to improve coverage
      7 const TESTCASE_URI = TEST_BASE_HTTPS + "sourcemaps.html";
      8 const PREF = "devtools.source-map.client-service.enabled";
      9 
     10 const contents = {
     11  "sourcemaps.scss": [
     12    "",
     13    "$paulrougetpink: #f06;",
     14    "",
     15    "div {",
     16    "  color: $paulrougetpink;",
     17    "}",
     18    "",
     19    "span {",
     20    "  background-color: #EEE;",
     21    "}",
     22  ].join("\n"),
     23  "contained.scss": [
     24    "$pink: #f06;",
     25    "",
     26    "#header {",
     27    "  color: $pink;",
     28    "}",
     29  ].join("\n"),
     30  "sourcemaps.css": [
     31    "div {",
     32    "  color: #ff0066; }",
     33    "",
     34    "span {",
     35    "  background-color: #EEE; }",
     36    "",
     37    "/*# sourceMappingURL=sourcemaps.css.map */",
     38  ].join("\n"),
     39  "contained.css": [
     40    "#header {",
     41    "  color: #f06; }",
     42    "",
     43    "/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJma" +
     44      "WxlIjoiIiwic291cmNlcyI6WyJzYXNzL2NvbnRhaW5lZC5zY3NzIl0sIm5hbWVzIjpbXSwi" +
     45      "bWFwcGluZ3MiOiJBQUVBO0VBQ0UsT0FISyIsInNvdXJjZXNDb250ZW50IjpbIiRwaW5rOiA" +
     46      "jZjA2O1xuXG4jaGVhZGVyIHtcbiAgY29sb3I6ICRwaW5rO1xufSJdfQ==*/",
     47  ].join("\n"),
     48  "test-stylus.styl": [
     49    "paulrougetpink = #f06;",
     50    "",
     51    "div",
     52    "  color: paulrougetpink",
     53    "",
     54    "span",
     55    "  background-color: #EEE",
     56    "",
     57  ].join("\n"),
     58  "test-stylus.css": [
     59    "div {",
     60    "  color: #f06;",
     61    "}",
     62    "span {",
     63    "  background-color: #eee;",
     64    "}",
     65    "/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb" +
     66      "3VyY2VzIjpbInRlc3Qtc3R5bHVzLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFB" +
     67      "RUE7RUFDRSxPQUFPLEtBQVA7O0FBRUY7RUFDRSxrQkFBa0IsS0FBbEIiLCJmaWxlIjoidGV" +
     68      "zdC1zdHlsdXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicGF1bHJvdWdldHBpbmsgPSAjZj" +
     69      "A2O1xuXG5kaXZcbiAgY29sb3I6IHBhdWxyb3VnZXRwaW5rXG5cbnNwYW5cbiAgYmFja2dyb" +
     70      "3VuZC1jb2xvcjogI0VFRVxuIl19 */",
     71  ].join("\n"),
     72 };
     73 
     74 const cssNames = ["sourcemaps.css", "contained.css", "test-stylus.css"];
     75 const origNames = ["sourcemaps.scss", "contained.scss", "test-stylus.styl"];
     76 
     77 waitForExplicitFinish();
     78 
     79 add_task(async function () {
     80  const { ui } = await openStyleEditorForURL(TESTCASE_URI);
     81 
     82  is(
     83    ui.editors.length,
     84    4,
     85    "correct number of editors with source maps enabled"
     86  );
     87 
     88  // Test first plain css editor
     89  testFirstEditor(ui.editors[0]);
     90 
     91  // Test Scss editors
     92  await testEditor(ui.editors[1], origNames);
     93  await testEditor(ui.editors[2], origNames);
     94  await testEditor(ui.editors[3], origNames);
     95 
     96  // Test disabling original sources
     97  await togglePref(ui);
     98 
     99  is(ui.editors.length, 4, "correct number of editors after pref toggled");
    100 
    101  // Test CSS editors
    102  await testEditor(ui.editors[1], cssNames);
    103  await testEditor(ui.editors[2], cssNames);
    104  await testEditor(ui.editors[3], cssNames);
    105 
    106  Services.prefs.clearUserPref(PREF);
    107 });
    108 
    109 function testFirstEditor(editor) {
    110  const name = getStylesheetNameFor(editor);
    111  is(name, "simple.css", "First style sheet display name is correct");
    112 }
    113 
    114 function testEditor(editor, possibleNames) {
    115  const name = getStylesheetNameFor(editor);
    116  ok(possibleNames.includes(name), name + " editor name is correct");
    117 
    118  return openEditor(editor).then(() => {
    119    const expectedText = contents[name];
    120 
    121    const text = editor.sourceEditor.getText();
    122 
    123    is(text, expectedText, name + " editor contains expected text");
    124  });
    125 }
    126 
    127 /* Helpers */
    128 
    129 function togglePref(UI) {
    130  const editorsPromise = UI.once("stylesheets-refreshed");
    131  const selectedPromise = UI.once("editor-selected");
    132 
    133  Services.prefs.setBoolPref(PREF, false);
    134 
    135  return Promise.all([editorsPromise, selectedPromise]);
    136 }
    137 
    138 function openEditor(editor) {
    139  getLinkFor(editor).click();
    140 
    141  return editor.getSourceEditor();
    142 }
    143 
    144 function getLinkFor(editor) {
    145  return editor.summary.querySelector(".stylesheet-name");
    146 }
    147 
    148 function getStylesheetNameFor(editor) {
    149  return editor.summary
    150    .querySelector(".stylesheet-name > label")
    151    .getAttribute("value");
    152 }