OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 var site; | |
6 | |
7 /** | 5 /** |
8 * Toggle between filters 0 and 1 in order to force a repaint. | 6 * Global exports, used locally to separate initialization from declaration. |
9 * TODO(kevers): Consolidate with filter in CVD. | |
10 * @type {!number} | |
11 */ | 7 */ |
12 var activeFilterIndex = 0; | 8 (function(exports) { |
13 | 9 var site; |
14 /** | 10 |
15 * Save previous state of setup parameters for use in the event of a canceled | 11 /** |
16 * setup. | 12 * Toggle between filters 0 and 1 in order to force a repaint. |
17 * @type {{type: string, severity: number} | undefined} | 13 * TODO(kevers): Consolidate with filter in CVD. |
18 */ | 14 * @type {!number} |
19 var restoreSettings = undefined; | 15 */ |
20 | 16 var activeFilterIndex = 0; |
21 /** | 17 |
22 * The strings for CVD Types. | 18 /** |
23 * TODO(mustaq): Define an enum in cvd.js instead. | 19 * Save previous state of setup parameters for use in the event of a canceled |
24 * @const {array{string}} | 20 * setup. |
25 */ | 21 * @type {{type: string, severity: number} | undefined} |
26 var CVD_TYPES = [ | 22 */ |
27 'PROTANOMALY', | 23 var restoreSettings = undefined; |
28 'DEUTERANOMALY', | 24 |
29 'TRITANOMALY' | 25 /** |
30 ]; | 26 * The strings for CVD Types. |
31 | 27 * TODO(mustaq): Define an enum in cvd.js instead. |
32 /** | 28 * @const {array{string}} |
33 * Vertical offset for displaying the row highlight. | 29 */ |
34 * @const {number} | 30 var CVD_TYPES = [ |
35 */ | 31 'PROTANOMALY', |
36 var HIGHLIGHT_OFFSET = 7; | 32 'DEUTERANOMALY', |
37 | 33 'TRITANOMALY' |
38 // ======= Swatch generator ======= | 34 ]; |
39 | 35 |
40 /** | 36 /** |
41 * Set of colors for test swatches. | 37 * Vertical offset for displaying the row highlight. |
42 * Each row of swatches corresponds to a different type of color blindness. | 38 * @const {number} |
43 * Tests for the 3 different types of dichromatic color vison. | 39 */ |
44 * Colors selected based on color confusion lines for dichromats using our | 40 var HIGHLIGHT_OFFSET = 7; |
45 * swatch generator tool. See: | 41 |
46 * http://www.color-blindness.com/2007/01/23/confusion-lines-of-the-cie-1931-col
or-space/ | 42 // ======= Swatch generator ======= |
47 */ | 43 |
48 var SWATCH_COLORS = [ | 44 /** |
49 { | 45 * Set of colors for test swatches. |
50 BACKGROUND: [194,66,96], | 46 * Each row of swatches corresponds to a different type of color blindness. |
51 PROTANOMALY: [123,73,103], | 47 * Tests for the 3 different types of dichromatic color vison. |
52 DEUTERANOMALY: [131,91,97], | 48 * Colors selected based on color confusion lines for dichromats using our |
53 TRITANOMALY: [182,57,199] | 49 * swatch generator tool. See: |
54 }, | 50 * http://www.color-blindness.com/2007/01/23/confusion-lines-of-the-cie-1931-c
olor-space/ |
55 { | 51 */ |
56 BACKGROUND: [156,90,94], | 52 var SWATCH_COLORS = [ |
57 PROTANOMALY: [100,96,97], | 53 { |
58 DEUTERANOMALY: [106,110,95], | 54 BACKGROUND: [194,66,96], |
59 TRITANOMALY: [165,100,0] | 55 PROTANOMALY: [123,73,103], |
60 }, | 56 DEUTERANOMALY: [131,91,97], |
61 { | 57 TRITANOMALY: [182,57,199] |
62 BACKGROUND: [201,110,50], | 58 }, |
63 PROTANOMALY: [125,120,52], | 59 { |
64 DEUTERANOMALY: [135,136,51], | 60 BACKGROUND: [156,90,94], |
65 TRITANOMALY: [189,99,163] | 61 PROTANOMALY: [100,96,97], |
66 }, | 62 DEUTERANOMALY: [106,110,95], |
67 { | 63 TRITANOMALY: [165,100,0] |
68 BACKGROUND: [90,180,60], | 64 }, |
69 PROTANOMALY: [161,171,57], | 65 { |
70 DEUTERANOMALY: [156,154,59], | 66 BACKGROUND: [201,110,50], |
71 TRITANOMALY: [84,151,247] | 67 PROTANOMALY: [125,120,52], |
72 }, | 68 DEUTERANOMALY: [135,136,51], |
73 { | 69 TRITANOMALY: [189,99,163] |
74 BACKGROUND: [30,172,150], | 70 }, |
75 PROTANOMALY: [114,163,144], | 71 { |
76 DEUTERANOMALY: [97,146,148], | 72 BACKGROUND: [90,180,60], |
77 TRITANOMALY: [31,154,246] | 73 PROTANOMALY: [161,171,57], |
78 }, | 74 DEUTERANOMALY: [156,154,59], |
79 { | 75 TRITANOMALY: [84,151,247] |
80 BACKGROUND: [50,99,144], | 76 }, |
81 PROTANOMALY: [145,90,135], | 77 { |
82 DEUTERANOMALY: [97,81,142], | 78 BACKGROUND: [30,172,150], |
83 TRITANOMALY: [52,112,59] | 79 PROTANOMALY: [114,163,144], |
84 }, | 80 DEUTERANOMALY: [97,146,148], |
85 { | 81 TRITANOMALY: [31,154,246] |
86 BACKGROUND: [91,72,147], | 82 }, |
87 PROTANOMALY: [62,74,151], | 83 { |
88 DEUTERANOMALY: [63,83,148], | 84 BACKGROUND: [50,99,144], |
89 TRITANOMALY: [102,88,12] | 85 PROTANOMALY: [145,90,135], |
90 }, | 86 DEUTERANOMALY: [97,81,142], |
91 ]; | 87 TRITANOMALY: [52,112,59] |
92 | 88 }, |
93 /** | 89 { |
94 * Creates a radio button for selecting the given type of CVD and a series of | 90 BACKGROUND: [91,72,147], |
95 * color swatches for testing color vision. | 91 PROTANOMALY: [62,74,151], |
96 * @param {string} cvdType Type of CVD, either "PROTANOMALY" or "DEUTERANOMALY" | 92 DEUTERANOMALY: [63,83,148], |
97 * or "TRITANOMALY". | 93 TRITANOMALY: [102,88,12] |
98 * @return {!Element} Row of color swatches with a leading radio button. | 94 }, |
99 */ | 95 ]; |
100 function createTestRow(type) { | 96 |
101 var toCssColor = function(rgb) { | 97 /** |
102 return 'rgb(' + rgb.join(',') + ')'; | 98 * Creates a radio button for selecting the given type of CVD and a series of |
| 99 * color swatches for testing color vision. |
| 100 * @param {string} cvdType Type of CVD, either "PROTANOMALY" or |
| 101 * "DEUTERANOMALY" or "TRITANOMALY". |
| 102 * @return {!Element} Row of color swatches with a leading radio button. |
| 103 */ |
| 104 function createTestRow(type) { |
| 105 var toCssColor = function(rgb) { |
| 106 return 'rgb(' + rgb.join(',') + ')'; |
| 107 }; |
| 108 var row = document.createElement('label'); |
| 109 row.classList.add('row'); |
| 110 |
| 111 var button = document.createElement('input'); |
| 112 button.id = 'select-' + type; |
| 113 button.name = 'cvdType'; |
| 114 button.setAttribute('type', 'radio'); |
| 115 button.value = type; |
| 116 button.checked = false; |
| 117 row.appendChild(button); |
| 118 button.addEventListener('change', function() { |
| 119 onTypeChange(this.value); |
| 120 }); |
| 121 button.setAttribute('aria-label', type); |
| 122 |
| 123 SWATCH_COLORS.forEach(function(data) { |
| 124 var swatch = document.querySelector('.swatch.template').cloneNode(true); |
| 125 swatch.style.background = toCssColor(data.BACKGROUND); |
| 126 swatch.style.color = toCssColor(data[type]); |
| 127 swatch.classList.remove('template'); |
| 128 row.appendChild(swatch); |
| 129 }); |
| 130 return row; |
| 131 } |
| 132 |
| 133 |
| 134 // ======= UI hooks ======= |
| 135 |
| 136 /** |
| 137 * Gets the CVD type selected through the radio buttons. |
| 138 * @return {?string} |
| 139 */ |
| 140 function getCvdTypeSelection() { |
| 141 var active = undefined; |
| 142 CVD_TYPES.forEach(function(str) { |
| 143 if ($('select-' + str).checked) { |
| 144 active = str; |
| 145 return; |
| 146 } |
| 147 }); |
| 148 return active; |
| 149 } |
| 150 |
| 151 |
| 152 /** |
| 153 * Sets the radio buttons selection to the given CVD type. |
| 154 * @param {string} cvdType Type of CVD, either "PROTANOMALY" or |
| 155 * "DEUTERANOMALY" or "TRITANOMALY". |
| 156 * @return {?string} |
| 157 */ |
| 158 function setCvdTypeSelection(cvdType) { |
| 159 var highlight = $('row-highlight'); |
| 160 highlight.hidden = true; |
| 161 CVD_TYPES.forEach(function(str) { |
| 162 var checkbox = $('select-' + str); |
| 163 if (cvdType == str) { |
| 164 checkbox.checked = true; |
| 165 var top = checkbox.parentElement.offsetTop - HIGHLIGHT_OFFSET; |
| 166 highlight.style.top = top + 'px'; |
| 167 highlight.hidden = false; |
| 168 } else { |
| 169 checkbox.checked = false; |
| 170 } |
| 171 }); |
| 172 } |
| 173 |
| 174 /** |
| 175 * Styles controls based on stage of setup. |
| 176 */ |
| 177 function updateControls() { |
| 178 if ($('setup-panel').classList.contains('collapsed')) { |
| 179 // Not performing setup. Ensure main controls are enabled. |
| 180 $('enable').disabled = false; |
| 181 $('delta').disabled = false; |
| 182 $('setup').disabled = false; |
| 183 } else { |
| 184 // Disable main controls during setup phase. |
| 185 $('enable').disabled = true; |
| 186 $('delta').disabled = true; |
| 187 $('setup').disabled = true; |
| 188 |
| 189 if (!getCvdTypeSelection()) { |
| 190 // Have not selected a CVD type. Mark Step 1 as active. |
| 191 $('step-1').classList.add('active'); |
| 192 $('step-2').classList.remove('active'); |
| 193 // Disable "step 2" controls. |
| 194 $('severity').disabled = true; |
| 195 $('reset').disabled = true; |
| 196 } else { |
| 197 $('step-1').classList.remove('active'); |
| 198 $('step-2').classList.add('active'); |
| 199 // Enable "step 2" controls. |
| 200 $('severity').disabled = false; |
| 201 $('reset').disabled = false; |
| 202 // Force filter update. |
| 203 onSeverityChange(parseFloat($('severity').value)); |
| 204 } |
| 205 } |
| 206 } |
| 207 |
| 208 /** |
| 209 * Update the popup controls based on settings for this site or the default. |
| 210 * @return {boolean} True if settings are valid and update performed. |
| 211 */ |
| 212 function update() { |
| 213 var type = getDefaultType(); |
| 214 var validType = false; |
| 215 CVD_TYPES.forEach(function(cvdType) { |
| 216 if (cvdType == type) { |
| 217 validType = true; |
| 218 return; |
| 219 } |
| 220 }); |
| 221 |
| 222 if (!validType) |
| 223 return false; |
| 224 |
| 225 if (site) { |
| 226 $('delta').value = getSiteDelta(site); |
| 227 } else { |
| 228 $('delta').value = getDefaultDelta(); |
| 229 } |
| 230 |
| 231 $('severity').value = getDefaultSeverity(); |
| 232 |
| 233 if (!$('setup-panel').classList.contains('collapsed')) |
| 234 setCvdTypeSelection(getDefaultType()); |
| 235 $('enable').checked = getDefaultEnable(); |
| 236 |
| 237 debugPrint('update: ' + |
| 238 ' del=' + $('delta').value + |
| 239 ' sev=' + $('severity').value + |
| 240 ' typ=' + getDefaultType() + |
| 241 ' enb=' + $('enable').checked + |
| 242 ' for ' + site |
| 243 ); |
| 244 chrome.extension.getBackgroundPage().updateTabs(); |
| 245 return true; |
| 246 } |
| 247 |
| 248 /** |
| 249 * Callback for color rotation slider. |
| 250 * |
| 251 * @param {number} value Parsed value of slider element. |
| 252 */ |
| 253 function onDeltaChange(value) { |
| 254 debugPrint('onDeltaChange: ' + value + ' for ' + site); |
| 255 if (site) { |
| 256 setSiteDelta(site, value); |
| 257 } |
| 258 setDefaultDelta(value); |
| 259 update(); |
| 260 } |
| 261 |
| 262 /** |
| 263 * Callback for severity slider. |
| 264 * |
| 265 * @param {number} value Parsed value of slider element. |
| 266 */ |
| 267 function onSeverityChange(value) { |
| 268 debugPrint('onSeverityChange: ' + value + ' for ' + site); |
| 269 setDefaultSeverity(value); |
| 270 update(); |
| 271 // Apply filter to popup swatches. |
| 272 var filter = window.getDefaultCvdCorrectionFilter( |
| 273 getCvdTypeSelection(), value); |
| 274 injectColorEnhancementFilter(filter); |
| 275 // Force a refresh. |
| 276 window.getComputedStyle(document.documentElement, null); |
| 277 } |
| 278 |
| 279 /** |
| 280 * Callback for changing color deficiency type. |
| 281 * |
| 282 * @param {string} value Value of dropdown element. |
| 283 */ |
| 284 function onTypeChange(value) { |
| 285 debugPrint('onTypeChange: ' + value + ' for ' + site); |
| 286 setDefaultType(value); |
| 287 update(); |
| 288 // TODO(kevers): reset severity to effectively disable filter. |
| 289 activeFilterType = value; |
| 290 $('severity').value = 0; |
| 291 updateControls(); |
| 292 } |
| 293 |
| 294 /** |
| 295 * Callback for enable/disable setting. |
| 296 * |
| 297 * @param {boolean} value Value of checkbox element. |
| 298 */ |
| 299 function onEnableChange(value) { |
| 300 debugPrint('onEnableChange: ' + value + ' for ' + site); |
| 301 setDefaultEnable(value); |
| 302 if (!update()) { |
| 303 // Settings are not valid for a reconfiguration. |
| 304 $('setup').onclick(); |
| 305 } |
| 306 } |
| 307 |
| 308 /** |
| 309 * Callback for resetting stored per-site values. |
| 310 */ |
| 311 function onReset() { |
| 312 debugPrint('onReset'); |
| 313 resetSiteDeltas(); |
| 314 update(); |
| 315 } |
| 316 |
| 317 /** |
| 318 * Attach event handlers to controls and update the filter config values for |
| 319 * the currently visible tab. |
| 320 */ |
| 321 function initialize() { |
| 322 var i18nElements = document.querySelectorAll('*[i18n-content]'); |
| 323 for (var i = 0; i < i18nElements.length; i++) { |
| 324 var elem = i18nElements[i]; |
| 325 var msg = elem.getAttribute('i18n-content'); |
| 326 elem.textContent = chrome.i18n.getMessage(msg); |
| 327 } |
| 328 |
| 329 $('setup').onclick = function() { |
| 330 $('setup-panel').classList.remove('collapsed'); |
| 331 // Store current settings in the event of a canceled setup. |
| 332 restoreSettings = { |
| 333 type: getDefaultType(), |
| 334 severity: getDefaultSeverity() |
| 335 }; |
| 336 // Initalize controls based on current settings. |
| 337 setCvdTypeSelection(restoreSettings.type); |
| 338 $('severity').value = restoreSettings.severity; |
| 339 updateControls(); |
| 340 }; |
| 341 |
| 342 $('delta').addEventListener('input', function() { |
| 343 onDeltaChange(parseFloat(this.value)); |
| 344 }); |
| 345 $('severity').addEventListener('input', function() { |
| 346 onSeverityChange(parseFloat(this.value)); |
| 347 }); |
| 348 $('enable').addEventListener('change', function() { |
| 349 onEnableChange(this.checked); |
| 350 }); |
| 351 |
| 352 $('reset').onclick = function() { |
| 353 setDefaultSeverity(0); |
| 354 setDefaultType(''); |
| 355 setDefaultEnable(false); |
| 356 $('severity').value = 0; |
| 357 $('enable').checked = false; |
| 358 setCvdTypeSelection(''); |
| 359 updateControls(); |
| 360 clearColorEnhancementFilter(); |
| 361 }; |
| 362 $('reset').hidden = !IS_DEV_MODE; |
| 363 |
| 364 var closeSetup = function() { |
| 365 $('setup-panel').classList.add('collapsed'); |
| 366 updateControls(); |
| 367 }; |
| 368 |
| 369 $('ok').onclick = function() { |
| 370 closeSetup(); |
| 371 }; |
| 372 |
| 373 $('cancel').onclick = function() { |
| 374 closeSetup(); |
| 375 if (restoreSettings) { |
| 376 debugPrint( |
| 377 'restore previous settings: ' + |
| 378 'type = ' + restoreSettings.type + |
| 379 ', severity = ' + restoreSettings.severity); |
| 380 setDefaultType(restoreSettings.type); |
| 381 setDefaultSeverity(restoreSettings.severity); |
| 382 } |
| 383 }; |
| 384 |
| 385 var swatches = $('swatches'); |
| 386 CVD_TYPES.forEach(function(cvdType) { |
| 387 swatches.appendChild(createTestRow(cvdType)); |
| 388 }); |
| 389 |
| 390 chrome.windows.getLastFocused({'populate': true}, function(window) { |
| 391 for (var i = 0; i < window.tabs.length; i++) { |
| 392 var tab = window.tabs[i]; |
| 393 if (tab.active) { |
| 394 site = siteFromUrl(tab.url); |
| 395 debugPrint('init: active tab update for ' + site); |
| 396 update(); |
| 397 return; |
| 398 } |
| 399 } |
| 400 site = 'unknown site'; |
| 401 update(); |
| 402 }); |
| 403 } |
| 404 |
| 405 /** |
| 406 * Runs initialize once popup loading is complete. |
| 407 */ |
| 408 exports.initializeOnLoad = function() { |
| 409 var ready = new Promise(function readyPromise(resolve) { |
| 410 if (document.readyState === 'complete') { |
| 411 resolve(); |
| 412 } |
| 413 document.addEventListener('DOMContentLoaded', resolve); |
| 414 }); |
| 415 ready.then(initialize); |
103 }; | 416 }; |
104 var row = document.createElement('label'); | 417 })(this); |
105 row.classList.add('row'); | 418 |
106 | 419 this.initializeOnLoad(); |
107 var button = document.createElement('input'); | |
108 button.id = 'select-' + type; | |
109 button.name = 'cvdType'; | |
110 button.setAttribute('type', 'radio'); | |
111 button.value = type; | |
112 button.checked = false; | |
113 row.appendChild(button); | |
114 button.addEventListener('change', function() { | |
115 onTypeChange(this.value); | |
116 }); | |
117 button.setAttribute('aria-label', type); | |
118 | |
119 SWATCH_COLORS.forEach(function(data) { | |
120 var swatch = document.querySelector('.swatch.template').cloneNode(true); | |
121 swatch.style.background = toCssColor(data.BACKGROUND); | |
122 swatch.style.color = toCssColor(data[type]); | |
123 swatch.classList.remove('template'); | |
124 row.appendChild(swatch); | |
125 }); | |
126 return row; | |
127 } | |
128 | |
129 | |
130 // ======= UI hooks ======= | |
131 | |
132 /** | |
133 * Gets the CVD type selected through the radio buttons. | |
134 * @return {?string} | |
135 */ | |
136 function getCvdTypeSelection() { | |
137 var active = undefined; | |
138 CVD_TYPES.forEach(function(str) { | |
139 if ($('select-' + str).checked) { | |
140 active = str; | |
141 return; | |
142 } | |
143 }); | |
144 return active; | |
145 } | |
146 | |
147 | |
148 /** | |
149 * Sets the radio buttons selection to the given CVD type. | |
150 * @param {string} cvdType Type of CVD, either "PROTANOMALY" or "DEUTERANOMALY" | |
151 * or "TRITANOMALY". | |
152 * @return {?string} | |
153 */ | |
154 function setCvdTypeSelection(cvdType) { | |
155 var highlight = $('row-highlight'); | |
156 highlight.hidden = true; | |
157 CVD_TYPES.forEach(function(str) { | |
158 var checkbox = $('select-' + str); | |
159 if (cvdType == str) { | |
160 checkbox.checked = true; | |
161 var top = checkbox.parentElement.offsetTop - HIGHLIGHT_OFFSET; | |
162 highlight.style.top = top + 'px'; | |
163 highlight.hidden = false; | |
164 } else { | |
165 checkbox.checked = false; | |
166 } | |
167 }); | |
168 } | |
169 | |
170 /** | |
171 * Styles controls based on stage of setup. | |
172 */ | |
173 function updateControls() { | |
174 if ($('setup-panel').classList.contains('collapsed')) { | |
175 // Not performing setup. Ensure main controls are enabled. | |
176 $('enable').disabled = false; | |
177 $('delta').disabled = false; | |
178 $('setup').disabled = false; | |
179 } else { | |
180 // Disable main controls during setup phase. | |
181 $('enable').disabled = true; | |
182 $('delta').disabled = true; | |
183 $('setup').disabled = true; | |
184 | |
185 if (!getCvdTypeSelection()) { | |
186 // Have not selected a CVD type. Mark Step 1 as active. | |
187 $('step-1').classList.add('active'); | |
188 $('step-2').classList.remove('active'); | |
189 // Disable "step 2" controls. | |
190 $('severity').disabled = true; | |
191 $('reset').disabled = true; | |
192 } else { | |
193 $('step-1').classList.remove('active'); | |
194 $('step-2').classList.add('active'); | |
195 // Enable "step 2" controls. | |
196 $('severity').disabled = false; | |
197 $('reset').disabled = false; | |
198 // Force filter update. | |
199 onSeverityChange(parseFloat($('severity').value)); | |
200 } | |
201 } | |
202 } | |
203 | |
204 /** | |
205 * Update the popup controls based on settings for this site or the default. | |
206 * @return {boolean} True if settings are valid and update performed. | |
207 */ | |
208 function update() { | |
209 var type = getDefaultType(); | |
210 var validType = false; | |
211 CVD_TYPES.forEach(function(cvdType) { | |
212 if (cvdType == type) { | |
213 validType = true; | |
214 return; | |
215 } | |
216 }); | |
217 | |
218 if (!validType) | |
219 return false; | |
220 | |
221 if (site) { | |
222 $('delta').value = getSiteDelta(site); | |
223 } else { | |
224 $('delta').value = getDefaultDelta(); | |
225 } | |
226 | |
227 $('severity').value = getDefaultSeverity(); | |
228 | |
229 if (!$('setup-panel').classList.contains('collapsed')) | |
230 setCvdTypeSelection(getDefaultType()); | |
231 $('enable').checked = getDefaultEnable(); | |
232 | |
233 debugPrint('update: ' + | |
234 ' del=' + $('delta').value + | |
235 ' sev=' + $('severity').value + | |
236 ' typ=' + getDefaultType() + | |
237 ' enb=' + $('enable').checked + | |
238 ' for ' + site | |
239 ); | |
240 chrome.extension.getBackgroundPage().updateTabs(); | |
241 return true; | |
242 } | |
243 | |
244 /** | |
245 * Callback for color rotation slider. | |
246 * | |
247 * @param {number} value Parsed value of slider element. | |
248 */ | |
249 function onDeltaChange(value) { | |
250 debugPrint('onDeltaChange: ' + value + ' for ' + site); | |
251 if (site) { | |
252 setSiteDelta(site, value); | |
253 } | |
254 setDefaultDelta(value); | |
255 update(); | |
256 } | |
257 | |
258 /** | |
259 * Callback for severity slider. | |
260 * | |
261 * @param {number} value Parsed value of slider element. | |
262 */ | |
263 function onSeverityChange(value) { | |
264 debugPrint('onSeverityChange: ' + value + ' for ' + site); | |
265 setDefaultSeverity(value); | |
266 update(); | |
267 // Apply filter to popup swatches. | |
268 var filter = window.getDefaultCvdCorrectionFilter( | |
269 getCvdTypeSelection(), value); | |
270 injectColorEnhancementFilter(filter); | |
271 // Force a refresh. | |
272 window.getComputedStyle(document.documentElement, null); | |
273 } | |
274 | |
275 /** | |
276 * Callback for changing color deficiency type. | |
277 * | |
278 * @param {string} value Value of dropdown element. | |
279 */ | |
280 function onTypeChange(value) { | |
281 debugPrint('onTypeChange: ' + value + ' for ' + site); | |
282 setDefaultType(value); | |
283 update(); | |
284 // TODO(kevers): reset severity to effectively disable filter. | |
285 activeFilterType = value; | |
286 $('severity').value = 0; | |
287 updateControls(); | |
288 } | |
289 | |
290 /** | |
291 * Callback for enable/disable setting. | |
292 * | |
293 * @param {boolean} value Value of checkbox element. | |
294 */ | |
295 function onEnableChange(value) { | |
296 debugPrint('onEnableChange: ' + value + ' for ' + site); | |
297 setDefaultEnable(value); | |
298 if (!update()) { | |
299 // Settings are not valid for a reconfiguration. | |
300 $('setup').onclick(); | |
301 } | |
302 } | |
303 | |
304 /** | |
305 * Callback for resetting stored per-site values. | |
306 */ | |
307 function onReset() { | |
308 debugPrint('onReset'); | |
309 resetSiteDeltas(); | |
310 update(); | |
311 } | |
312 | |
313 /** | |
314 * Attach event handlers to controls and update the filter config values for the | |
315 * currently visible tab. | |
316 */ | |
317 function initialize() { | |
318 var i18nElements = document.querySelectorAll('*[i18n-content]'); | |
319 for (var i = 0; i < i18nElements.length; i++) { | |
320 var elem = i18nElements[i]; | |
321 var msg = elem.getAttribute('i18n-content'); | |
322 elem.textContent = chrome.i18n.getMessage(msg); | |
323 } | |
324 | |
325 $('setup').onclick = function() { | |
326 $('setup-panel').classList.remove('collapsed'); | |
327 // Store current settings in the event of a canceled setup. | |
328 restoreSettings = { | |
329 type: getDefaultType(), | |
330 severity: getDefaultSeverity() | |
331 }; | |
332 // Initalize controls based on current settings. | |
333 setCvdTypeSelection(restoreSettings.type); | |
334 $('severity').value = restoreSettings.severity; | |
335 updateControls(); | |
336 }; | |
337 | |
338 $('delta').addEventListener('input', function() { | |
339 onDeltaChange(parseFloat(this.value)); | |
340 }); | |
341 $('severity').addEventListener('input', function() { | |
342 onSeverityChange(parseFloat(this.value)); | |
343 }); | |
344 $('enable').addEventListener('change', function() { | |
345 onEnableChange(this.checked); | |
346 }); | |
347 | |
348 $('reset').onclick = function() { | |
349 setDefaultSeverity(0); | |
350 setDefaultType(''); | |
351 setDefaultEnable(false); | |
352 $('severity').value = 0; | |
353 $('enable').checked = false; | |
354 setCvdTypeSelection(''); | |
355 updateControls(); | |
356 clearColorEnhancementFilter(); | |
357 }; | |
358 $('reset').hidden = !IS_DEV_MODE; | |
359 | |
360 var closeSetup = function() { | |
361 $('setup-panel').classList.add('collapsed'); | |
362 updateControls(); | |
363 }; | |
364 | |
365 $('ok').onclick = function() { | |
366 closeSetup(); | |
367 }; | |
368 | |
369 $('cancel').onclick = function() { | |
370 closeSetup(); | |
371 if (restoreSettings) { | |
372 debugPrint( | |
373 'restore previous settings: ' + | |
374 'type = ' + restoreSettings.type + | |
375 ', severity = ' + restoreSettings.severity); | |
376 setDefaultType(restoreSettings.type); | |
377 setDefaultSeverity(restoreSettings.severity); | |
378 } | |
379 }; | |
380 | |
381 var swatches = $('swatches'); | |
382 CVD_TYPES.forEach(function(cvdType) { | |
383 swatches.appendChild(createTestRow(cvdType)); | |
384 }); | |
385 | |
386 chrome.windows.getLastFocused({'populate': true}, function(window) { | |
387 for (var i = 0; i < window.tabs.length; i++) { | |
388 var tab = window.tabs[i]; | |
389 if (tab.active) { | |
390 site = siteFromUrl(tab.url); | |
391 debugPrint('init: active tab update for ' + site); | |
392 update(); | |
393 return; | |
394 } | |
395 } | |
396 site = 'unknown site'; | |
397 update(); | |
398 }); | |
399 } | |
400 | |
401 // TODO(wnwen): Use Promise instead, more reliable. | |
402 window.addEventListener('load', initialize, false); | |
OLD | NEW |