tor-browser

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

browser_toolbox_styleeditor.js (3657B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 // Test that stylesheets from parent and content processes are displayed in the styleeditor.
      6 
      7 "use strict";
      8 
      9 requestLongerTimeout(4);
     10 
     11 const TEST_URI = `data:text/html,<!DOCTYPE html>
     12  <head>
     13    <meta charset=utf8>
     14    <link rel="stylesheet" type="text/css" href="${TEST_BASE_HTTP}simple.css">
     15  <head>
     16  <body>Test browser toolbox</body>`;
     17 
     18 /* global gToolbox */
     19 Services.scriptloader.loadSubScript(
     20  "chrome://mochitests/content/browser/devtools/client/framework/browser-toolbox/test/helpers-browser-toolbox.js",
     21  this
     22 );
     23 
     24 add_task(async function () {
     25  await pushPref("devtools.browsertoolbox.scope", "everything");
     26  await pushPref("devtools.styleeditor.transitions", false);
     27  await addTab(TEST_URI);
     28  const ToolboxTask = await initBrowserToolboxTask();
     29 
     30  await ToolboxTask.importFunctions({
     31    waitUntil,
     32  });
     33 
     34  await ToolboxTask.spawn(null, async () => {
     35    await gToolbox.selectTool("styleeditor");
     36    const panel = gToolbox.getCurrentPanel();
     37 
     38    function getStyleEditorItems() {
     39      return Array.from(
     40        panel.panelWindow.document.querySelectorAll(".splitview-nav li")
     41      );
     42    }
     43 
     44    info(`check if "parent process" stylesheets are displayed`);
     45    const isUAStyleSheet = el =>
     46      el.querySelector(".stylesheet-name label").value == "ua.css";
     47    await waitUntil(() => getStyleEditorItems().find(isUAStyleSheet));
     48    ok(true, "Found ua.css stylesheet");
     49 
     50    info("check if content page stylesheets are displayed");
     51    const isTabStyleSheet = el =>
     52      el.querySelector(".stylesheet-name label").value == "simple.css";
     53    await waitUntil(() => getStyleEditorItems().find(isTabStyleSheet));
     54    ok(true, "Found simple.css tab stylesheet");
     55 
     56    info("Select the stylesheet and update its content");
     57    const contentStylesheetSummaryEl =
     58      getStyleEditorItems().find(isTabStyleSheet);
     59 
     60    let tabStyleSheetEditor;
     61    if (panel.UI.selectedEditor.friendlyName === "simple.css") {
     62      // simple.css might be selected by default, depending on the order in
     63      // which the stylesheets have been loaded in the style editor.
     64      tabStyleSheetEditor = panel.UI.selectedEditor;
     65    } else {
     66      // We might get events for the initial, default selected stylesheet, so wait until
     67      // we get the one for the simple.css stylesheet.
     68      const onTabStyleSheetEditorSelected = new Promise(resolve => {
     69        const onEditorSelected = editor => {
     70          if (editor.summary == contentStylesheetSummaryEl) {
     71            resolve(editor);
     72            panel.UI.off("editor-selected", onEditorSelected);
     73          }
     74        };
     75        panel.UI.on("editor-selected", onEditorSelected);
     76      });
     77      panel.UI.setActiveSummary(contentStylesheetSummaryEl);
     78      tabStyleSheetEditor = await onTabStyleSheetEditorSelected;
     79    }
     80 
     81    info("Wait for sourceEditor to be available");
     82    await waitUntil(() => tabStyleSheetEditor.sourceEditor);
     83 
     84    const onStyleApplied = tabStyleSheetEditor.once("style-applied");
     85    tabStyleSheetEditor.sourceEditor.setText(
     86      tabStyleSheetEditor.sourceEditor.getText() + "\n body {color: red;}"
     87    );
     88    await onStyleApplied;
     89  });
     90 
     91  info("Check that the edit done in the style editor were applied to the page");
     92  const bodyColorStyle = await getComputedStyleProperty({
     93    selector: "body",
     94    name: "color",
     95  });
     96 
     97  is(
     98    bodyColorStyle,
     99    "rgb(255, 0, 0)",
    100    "Changes made to simple.css were applied to the page"
    101  );
    102 
    103  await ToolboxTask.destroy();
    104 });