tor-browser

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

browser_toolbox_theme_registration.js (4487B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 * http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test for dynamically registering and unregistering themes
      7 const CHROME_URL =
      8  "chrome://mochitests/content/browser/devtools/client/framework/test/";
      9 const TEST_THEME_NAME = "test-theme";
     10 const LIGHT_THEME_NAME = "light";
     11 
     12 var toolbox;
     13 
     14 add_task(async function themeRegistration() {
     15  const tab = await addTab("data:text/html,test");
     16  toolbox = await gDevTools.showToolboxForTab(tab, { toolId: "options" });
     17 
     18  const themeId = await new Promise(resolve => {
     19    gDevTools.once("theme-registered", registeredThemeId => {
     20      resolve(registeredThemeId);
     21    });
     22 
     23    gDevTools.registerTheme({
     24      id: TEST_THEME_NAME,
     25      label: "Test theme",
     26      stylesheets: [CHROME_URL + "doc_theme.css"],
     27      classList: ["theme-test"],
     28    });
     29  });
     30 
     31  is(themeId, TEST_THEME_NAME, "theme-registered event handler sent theme id");
     32 
     33  ok(gDevTools.getThemeDefinitionMap().has(themeId), "theme added to map");
     34 });
     35 
     36 add_task(async function themeInOptionsPanel() {
     37  const panelWin = toolbox.getCurrentPanel().panelWin;
     38  const doc = panelWin.frameElement.contentDocument;
     39  const themeBox = doc.getElementById("devtools-theme-box");
     40  const testThemeOption = themeBox.querySelector(
     41    `input[type=radio][value=${TEST_THEME_NAME}]`
     42  );
     43  const eventsRecorded = [];
     44 
     45  function onThemeChanged(theme) {
     46    eventsRecorded.push(theme);
     47  }
     48  gDevTools.on("theme-changed", onThemeChanged);
     49 
     50  ok(testThemeOption, "new theme exists in the Options panel");
     51 
     52  const lightThemeOption = themeBox.querySelector(
     53    `input[type=radio][value=${LIGHT_THEME_NAME}]`
     54  );
     55 
     56  let color = panelWin.getComputedStyle(themeBox).color;
     57  isnot(color, "rgb(255, 0, 0)", "style unapplied");
     58 
     59  let onThemeSwithComplete = once(panelWin, "theme-switch-complete");
     60 
     61  // Select test theme.
     62  testThemeOption.click();
     63 
     64  info("Waiting for theme to finish loading");
     65  await onThemeSwithComplete;
     66 
     67  is(
     68    gDevTools.getTheme(),
     69    TEST_THEME_NAME,
     70    "getTheme returns the expected theme"
     71  );
     72  is(
     73    eventsRecorded.pop(),
     74    TEST_THEME_NAME,
     75    "theme-changed fired with the expected theme"
     76  );
     77 
     78  color = panelWin.getComputedStyle(themeBox).color;
     79  is(color, "rgb(255, 0, 0)", "style applied");
     80 
     81  onThemeSwithComplete = once(panelWin, "theme-switch-complete");
     82 
     83  // Select light theme
     84  lightThemeOption.click();
     85 
     86  info("Waiting for theme to finish loading");
     87  await onThemeSwithComplete;
     88 
     89  is(
     90    gDevTools.getTheme(),
     91    LIGHT_THEME_NAME,
     92    "getTheme returns the expected theme"
     93  );
     94  is(
     95    eventsRecorded.pop(),
     96    LIGHT_THEME_NAME,
     97    "theme-changed fired with the expected theme"
     98  );
     99 
    100  color = panelWin.getComputedStyle(themeBox).color;
    101  isnot(color, "rgb(255, 0, 0)", "style unapplied");
    102 
    103  onThemeSwithComplete = once(panelWin, "theme-switch-complete");
    104  // Select test theme again.
    105  testThemeOption.click();
    106  await onThemeSwithComplete;
    107  is(
    108    gDevTools.getTheme(),
    109    TEST_THEME_NAME,
    110    "getTheme returns the expected theme"
    111  );
    112  is(
    113    eventsRecorded.pop(),
    114    TEST_THEME_NAME,
    115    "theme-changed fired with the expected theme"
    116  );
    117 
    118  gDevTools.off("theme-changed", onThemeChanged);
    119 });
    120 
    121 add_task(async function themeUnregistration() {
    122  const panelWin = toolbox.getCurrentPanel().panelWin;
    123  const onUnRegisteredTheme = once(gDevTools, "theme-unregistered");
    124  const onThemeSwitchComplete = once(panelWin, "theme-switch-complete");
    125  const eventsRecorded = [];
    126 
    127  function onThemeChanged(theme) {
    128    eventsRecorded.push(theme);
    129  }
    130  gDevTools.on("theme-changed", onThemeChanged);
    131 
    132  gDevTools.unregisterTheme(TEST_THEME_NAME);
    133  await onUnRegisteredTheme;
    134  await onThemeSwitchComplete;
    135 
    136  is(
    137    gDevTools.getTheme(),
    138    gDevTools.getAutoTheme(),
    139    "getTheme returns the expected theme"
    140  );
    141  is(
    142    eventsRecorded.pop(),
    143    gDevTools.getAutoTheme(),
    144    "theme-changed fired with the expected theme"
    145  );
    146  ok(
    147    !gDevTools.getThemeDefinitionMap().has(TEST_THEME_NAME),
    148    "theme removed from map"
    149  );
    150 
    151  const doc = panelWin.frameElement.contentDocument;
    152  const themeBox = doc.getElementById("devtools-theme-box");
    153 
    154  // The default theme must be selected now.
    155  ok(
    156    themeBox.querySelector(`#devtools-theme-box [value=auto]`).checked,
    157    `auto theme must be selected`
    158  );
    159 
    160  gDevTools.off("theme-changed", onThemeChanged);
    161 });
    162 
    163 add_task(async function cleanup() {
    164  await toolbox.destroy();
    165  toolbox = null;
    166 });