browser_theme.js (5684B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests that theme utilities work 7 8 const { 9 getCssVariableColor, 10 getTheme, 11 setTheme, 12 } = require("resource://devtools/client/shared/theme.js"); 13 const { PrefObserver } = require("resource://devtools/client/shared/prefs.js"); 14 15 add_task(async function () { 16 const tab = await addTab("data:text/html;charset=utf-8,Test page"); 17 const toolbox = await gDevTools.showToolboxForTab(tab); 18 19 testGetTheme(); 20 testSetTheme(); 21 await testGetCssVariableColor(toolbox.win); 22 await testColorExistence(toolbox.win); 23 }); 24 25 function testGetTheme() { 26 const originalTheme = getTheme(); 27 ok(originalTheme, "has some theme to start with."); 28 Services.prefs.setCharPref("devtools.theme", "light"); 29 is(getTheme(), "light", "getTheme() correctly returns light theme"); 30 Services.prefs.setCharPref("devtools.theme", "dark"); 31 is(getTheme(), "dark", "getTheme() correctly returns dark theme"); 32 Services.prefs.setCharPref("devtools.theme", "unknown"); 33 is(getTheme(), "unknown", "getTheme() correctly returns an unknown theme"); 34 Services.prefs.setCharPref("devtools.theme", originalTheme); 35 } 36 37 function testSetTheme() { 38 const originalTheme = getTheme(); 39 // Put this in a variable rather than hardcoding it because the default 40 // changes between aurora and nightly 41 const otherTheme = originalTheme == "dark" ? "light" : "dark"; 42 43 const prefObserver = new PrefObserver("devtools."); 44 prefObserver.once("devtools.theme", () => { 45 const newValue = Services.prefs.getCharPref("devtools.theme"); 46 is( 47 newValue, 48 otherTheme, 49 "A preference event triggered by setTheme comes after the value is set." 50 ); 51 }); 52 setTheme(otherTheme); 53 is( 54 Services.prefs.getCharPref("devtools.theme"), 55 otherTheme, 56 "setTheme() correctly sets another theme." 57 ); 58 setTheme(originalTheme); 59 is( 60 Services.prefs.getCharPref("devtools.theme"), 61 originalTheme, 62 "setTheme() correctly sets the original theme." 63 ); 64 setTheme("unknown"); 65 is( 66 Services.prefs.getCharPref("devtools.theme"), 67 "unknown", 68 "setTheme() correctly sets an unknown theme." 69 ); 70 Services.prefs.setCharPref("devtools.theme", originalTheme); 71 72 prefObserver.destroy(); 73 } 74 75 async function setDarkTheme(win) { 76 setTheme("dark"); 77 await waitFor(() => 78 InspectorUtils.isUsedColorSchemeDark(win.document.documentElement) 79 ); 80 } 81 82 async function setLightTheme(win) { 83 setTheme("light"); 84 await waitFor( 85 () => !InspectorUtils.isUsedColorSchemeDark(win.document.documentElement) 86 ); 87 } 88 89 async function testGetCssVariableColor(toolboxWin) { 90 // getCssVariableColor return the computed color, which are in the rgb() format, so we 91 // need to computed them from the original hex values. 92 // --theme-highlight-blue: light-dark(var(--blue-55), #75bfff); 93 // --blue-55: #0074e8; 94 const LIGHT_RGB = InspectorUtils.colorToRGBA("#0074e8"); 95 const DARK_RGB = InspectorUtils.colorToRGBA("#75bfff"); 96 const BLUE_LIGHT = `rgb(${LIGHT_RGB.r}, ${LIGHT_RGB.g}, ${LIGHT_RGB.b})`; 97 const BLUE_DARK = `rgb(${DARK_RGB.r}, ${DARK_RGB.g}, ${DARK_RGB.b})`; 98 99 // Sanity check 100 ok(InspectorUtils.isValidCSSColor(BLUE_LIGHT), `BLUE_LIGHT is a valid color`); 101 ok(InspectorUtils.isValidCSSColor(BLUE_DARK), `BLUE_DARK is a valid color`); 102 103 const originalTheme = getTheme(); 104 105 await setLightTheme(toolboxWin); 106 is( 107 getCssVariableColor("--theme-highlight-blue", toolboxWin), 108 BLUE_LIGHT, 109 "correctly gets color for enabled theme." 110 ); 111 112 await setDarkTheme(toolboxWin); 113 is( 114 getCssVariableColor("--theme-highlight-blue", toolboxWin), 115 BLUE_DARK, 116 "correctly gets color for enabled theme." 117 ); 118 119 setTheme("metal"); 120 // wait until we're no longer in dark mode 121 await waitFor( 122 () => 123 !InspectorUtils.isUsedColorSchemeDark(toolboxWin.document.documentElement) 124 ); 125 is( 126 getCssVariableColor("--theme-highlight-blue", toolboxWin), 127 BLUE_LIGHT, 128 "correctly uses light for default theme if enabled theme not found" 129 ); 130 131 is( 132 getCssVariableColor("--theme-somecomponents", toolboxWin), 133 null, 134 "if a type cannot be found, should return null." 135 ); 136 137 setTheme(originalTheme); 138 } 139 140 async function testColorExistence(win) { 141 const vars = [ 142 "--theme-body-background", 143 "--theme-sidebar-background", 144 "--theme-contrast-background", 145 "--theme-tab-toolbar-background", 146 "--theme-toolbar-background", 147 "--theme-selection-background", 148 "--theme-selection-color", 149 "--theme-selection-background-hover", 150 "--theme-splitter-color", 151 "--theme-comment", 152 "--theme-body-color", 153 "--theme-text-color-alt", 154 "--theme-text-color-inactive", 155 "--theme-text-color-strong", 156 "--theme-highlight-green", 157 "--theme-highlight-blue", 158 "--theme-highlight-bluegrey", 159 "--theme-highlight-purple", 160 "--theme-highlight-lightorange", 161 "--theme-highlight-orange", 162 "--theme-highlight-red", 163 "--theme-highlight-pink", 164 ]; 165 166 const originalTheme = getTheme(); 167 await setLightTheme(win); 168 for (const variableName of vars) { 169 const color = getCssVariableColor(variableName, win); 170 ok(color, `${variableName} exists in light theme`); 171 ok( 172 InspectorUtils.isValidCSSColor(color), 173 `${variableName} is a valid color in light theme` 174 ); 175 } 176 177 await setDarkTheme(win); 178 for (const variableName of vars) { 179 const color = getCssVariableColor(variableName, win); 180 ok(color, `${variableName} exists in dark theme`); 181 ok( 182 InspectorUtils.isValidCSSColor(color), 183 `${variableName} is a valid color in dark theme` 184 ); 185 } 186 187 setTheme(originalTheme); 188 }