Index: ui/accessibility/extensions/colorenhancer/src/popup.js |
diff --git a/ui/accessibility/extensions/colorenhancer/src/popup.js b/ui/accessibility/extensions/colorenhancer/src/popup.js |
index 44733425eb66837a7edd2cd7daa1232e38ad4a86..d8757062c2bd63de2cfeda34c8b302d59d9c9b96 100644 |
--- a/ui/accessibility/extensions/colorenhancer/src/popup.js |
+++ b/ui/accessibility/extensions/colorenhancer/src/popup.js |
@@ -2,401 +2,418 @@ |
// Use of this source code is governed by a BSD-style license that can be |
// found in the LICENSE file. |
-var site; |
- |
/** |
- * Toggle between filters 0 and 1 in order to force a repaint. |
- * TODO(kevers): Consolidate with filter in CVD. |
- * @type {!number} |
+ * Global exports, used locally to separate initialization from declaration. |
*/ |
-var activeFilterIndex = 0; |
+(function(exports) { |
+ var site; |
+ |
+ /** |
+ * Toggle between filters 0 and 1 in order to force a repaint. |
+ * TODO(kevers): Consolidate with filter in CVD. |
+ * @type {!number} |
+ */ |
+ var activeFilterIndex = 0; |
+ |
+ /** |
+ * Save previous state of setup parameters for use in the event of a canceled |
+ * setup. |
+ * @type {{type: string, severity: number} | undefined} |
+ */ |
+ var restoreSettings = undefined; |
+ |
+ /** |
+ * The strings for CVD Types. |
+ * TODO(mustaq): Define an enum in cvd.js instead. |
+ * @const {array{string}} |
+ */ |
+ var CVD_TYPES = [ |
+ 'PROTANOMALY', |
+ 'DEUTERANOMALY', |
+ 'TRITANOMALY' |
+ ]; |
+ |
+ /** |
+ * Vertical offset for displaying the row highlight. |
+ * @const {number} |
+ */ |
+ var HIGHLIGHT_OFFSET = 7; |
+ |
+ // ======= Swatch generator ======= |
+ |
+ /** |
+ * Set of colors for test swatches. |
+ * Each row of swatches corresponds to a different type of color blindness. |
+ * Tests for the 3 different types of dichromatic color vison. |
+ * Colors selected based on color confusion lines for dichromats using our |
+ * swatch generator tool. See: |
+ * http://www.color-blindness.com/2007/01/23/confusion-lines-of-the-cie-1931-color-space/ |
+ */ |
+ var SWATCH_COLORS = [ |
+ { |
+ BACKGROUND: [194,66,96], |
+ PROTANOMALY: [123,73,103], |
+ DEUTERANOMALY: [131,91,97], |
+ TRITANOMALY: [182,57,199] |
+ }, |
+ { |
+ BACKGROUND: [156,90,94], |
+ PROTANOMALY: [100,96,97], |
+ DEUTERANOMALY: [106,110,95], |
+ TRITANOMALY: [165,100,0] |
+ }, |
+ { |
+ BACKGROUND: [201,110,50], |
+ PROTANOMALY: [125,120,52], |
+ DEUTERANOMALY: [135,136,51], |
+ TRITANOMALY: [189,99,163] |
+ }, |
+ { |
+ BACKGROUND: [90,180,60], |
+ PROTANOMALY: [161,171,57], |
+ DEUTERANOMALY: [156,154,59], |
+ TRITANOMALY: [84,151,247] |
+ }, |
+ { |
+ BACKGROUND: [30,172,150], |
+ PROTANOMALY: [114,163,144], |
+ DEUTERANOMALY: [97,146,148], |
+ TRITANOMALY: [31,154,246] |
+ }, |
+ { |
+ BACKGROUND: [50,99,144], |
+ PROTANOMALY: [145,90,135], |
+ DEUTERANOMALY: [97,81,142], |
+ TRITANOMALY: [52,112,59] |
+ }, |
+ { |
+ BACKGROUND: [91,72,147], |
+ PROTANOMALY: [62,74,151], |
+ DEUTERANOMALY: [63,83,148], |
+ TRITANOMALY: [102,88,12] |
+ }, |
+ ]; |
+ |
+ /** |
+ * Creates a radio button for selecting the given type of CVD and a series of |
+ * color swatches for testing color vision. |
+ * @param {string} cvdType Type of CVD, either "PROTANOMALY" or |
+ * "DEUTERANOMALY" or "TRITANOMALY". |
+ * @return {!Element} Row of color swatches with a leading radio button. |
+ */ |
+ function createTestRow(type) { |
+ var toCssColor = function(rgb) { |
+ return 'rgb(' + rgb.join(',') + ')'; |
+ }; |
+ var row = document.createElement('label'); |
+ row.classList.add('row'); |
+ |
+ var button = document.createElement('input'); |
+ button.id = 'select-' + type; |
+ button.name = 'cvdType'; |
+ button.setAttribute('type', 'radio'); |
+ button.value = type; |
+ button.checked = false; |
+ row.appendChild(button); |
+ button.addEventListener('change', function() { |
+ onTypeChange(this.value); |
+ }); |
+ button.setAttribute('aria-label', type); |
+ |
+ SWATCH_COLORS.forEach(function(data) { |
+ var swatch = document.querySelector('.swatch.template').cloneNode(true); |
+ swatch.style.background = toCssColor(data.BACKGROUND); |
+ swatch.style.color = toCssColor(data[type]); |
+ swatch.classList.remove('template'); |
+ row.appendChild(swatch); |
+ }); |
+ return row; |
+ } |
-/** |
- * Save previous state of setup parameters for use in the event of a canceled |
- * setup. |
- * @type {{type: string, severity: number} | undefined} |
- */ |
-var restoreSettings = undefined; |
-/** |
- * The strings for CVD Types. |
- * TODO(mustaq): Define an enum in cvd.js instead. |
- * @const {array{string}} |
- */ |
-var CVD_TYPES = [ |
- 'PROTANOMALY', |
- 'DEUTERANOMALY', |
- 'TRITANOMALY' |
-]; |
+ // ======= UI hooks ======= |
-/** |
- * Vertical offset for displaying the row highlight. |
- * @const {number} |
- */ |
-var HIGHLIGHT_OFFSET = 7; |
- |
-// ======= Swatch generator ======= |
+ /** |
+ * Gets the CVD type selected through the radio buttons. |
+ * @return {?string} |
+ */ |
+ function getCvdTypeSelection() { |
+ var active = undefined; |
+ CVD_TYPES.forEach(function(str) { |
+ if ($('select-' + str).checked) { |
+ active = str; |
+ return; |
+ } |
+ }); |
+ return active; |
+ } |
-/** |
- * Set of colors for test swatches. |
- * Each row of swatches corresponds to a different type of color blindness. |
- * Tests for the 3 different types of dichromatic color vison. |
- * Colors selected based on color confusion lines for dichromats using our |
- * swatch generator tool. See: |
- * http://www.color-blindness.com/2007/01/23/confusion-lines-of-the-cie-1931-color-space/ |
- */ |
-var SWATCH_COLORS = [ |
- { |
- BACKGROUND: [194,66,96], |
- PROTANOMALY: [123,73,103], |
- DEUTERANOMALY: [131,91,97], |
- TRITANOMALY: [182,57,199] |
- }, |
- { |
- BACKGROUND: [156,90,94], |
- PROTANOMALY: [100,96,97], |
- DEUTERANOMALY: [106,110,95], |
- TRITANOMALY: [165,100,0] |
- }, |
- { |
- BACKGROUND: [201,110,50], |
- PROTANOMALY: [125,120,52], |
- DEUTERANOMALY: [135,136,51], |
- TRITANOMALY: [189,99,163] |
- }, |
- { |
- BACKGROUND: [90,180,60], |
- PROTANOMALY: [161,171,57], |
- DEUTERANOMALY: [156,154,59], |
- TRITANOMALY: [84,151,247] |
- }, |
- { |
- BACKGROUND: [30,172,150], |
- PROTANOMALY: [114,163,144], |
- DEUTERANOMALY: [97,146,148], |
- TRITANOMALY: [31,154,246] |
- }, |
- { |
- BACKGROUND: [50,99,144], |
- PROTANOMALY: [145,90,135], |
- DEUTERANOMALY: [97,81,142], |
- TRITANOMALY: [52,112,59] |
- }, |
- { |
- BACKGROUND: [91,72,147], |
- PROTANOMALY: [62,74,151], |
- DEUTERANOMALY: [63,83,148], |
- TRITANOMALY: [102,88,12] |
- }, |
-]; |
-/** |
- * Creates a radio button for selecting the given type of CVD and a series of |
- * color swatches for testing color vision. |
- * @param {string} cvdType Type of CVD, either "PROTANOMALY" or "DEUTERANOMALY" |
- * or "TRITANOMALY". |
- * @return {!Element} Row of color swatches with a leading radio button. |
- */ |
-function createTestRow(type) { |
- var toCssColor = function(rgb) { |
- return 'rgb(' + rgb.join(',') + ')'; |
- }; |
- var row = document.createElement('label'); |
- row.classList.add('row'); |
- |
- var button = document.createElement('input'); |
- button.id = 'select-' + type; |
- button.name = 'cvdType'; |
- button.setAttribute('type', 'radio'); |
- button.value = type; |
- button.checked = false; |
- row.appendChild(button); |
- button.addEventListener('change', function() { |
- onTypeChange(this.value); |
- }); |
- button.setAttribute('aria-label', type); |
- |
- SWATCH_COLORS.forEach(function(data) { |
- var swatch = document.querySelector('.swatch.template').cloneNode(true); |
- swatch.style.background = toCssColor(data.BACKGROUND); |
- swatch.style.color = toCssColor(data[type]); |
- swatch.classList.remove('template'); |
- row.appendChild(swatch); |
- }); |
- return row; |
-} |
- |
- |
-// ======= UI hooks ======= |
+ /** |
+ * Sets the radio buttons selection to the given CVD type. |
+ * @param {string} cvdType Type of CVD, either "PROTANOMALY" or |
+ * "DEUTERANOMALY" or "TRITANOMALY". |
+ * @return {?string} |
+ */ |
+ function setCvdTypeSelection(cvdType) { |
+ var highlight = $('row-highlight'); |
+ highlight.hidden = true; |
+ CVD_TYPES.forEach(function(str) { |
+ var checkbox = $('select-' + str); |
+ if (cvdType == str) { |
+ checkbox.checked = true; |
+ var top = checkbox.parentElement.offsetTop - HIGHLIGHT_OFFSET; |
+ highlight.style.top = top + 'px'; |
+ highlight.hidden = false; |
+ } else { |
+ checkbox.checked = false; |
+ } |
+ }); |
+ } |
-/** |
- * Gets the CVD type selected through the radio buttons. |
- * @return {?string} |
- */ |
-function getCvdTypeSelection() { |
- var active = undefined; |
- CVD_TYPES.forEach(function(str) { |
- if ($('select-' + str).checked) { |
- active = str; |
- return; |
+ /** |
+ * Styles controls based on stage of setup. |
+ */ |
+ function updateControls() { |
+ if ($('setup-panel').classList.contains('collapsed')) { |
+ // Not performing setup. Ensure main controls are enabled. |
+ $('enable').disabled = false; |
+ $('delta').disabled = false; |
+ $('setup').disabled = false; |
+ } else { |
+ // Disable main controls during setup phase. |
+ $('enable').disabled = true; |
+ $('delta').disabled = true; |
+ $('setup').disabled = true; |
+ |
+ if (!getCvdTypeSelection()) { |
+ // Have not selected a CVD type. Mark Step 1 as active. |
+ $('step-1').classList.add('active'); |
+ $('step-2').classList.remove('active'); |
+ // Disable "step 2" controls. |
+ $('severity').disabled = true; |
+ $('reset').disabled = true; |
+ } else { |
+ $('step-1').classList.remove('active'); |
+ $('step-2').classList.add('active'); |
+ // Enable "step 2" controls. |
+ $('severity').disabled = false; |
+ $('reset').disabled = false; |
+ // Force filter update. |
+ onSeverityChange(parseFloat($('severity').value)); |
+ } |
} |
- }); |
- return active; |
-} |
+ } |
+ /** |
+ * Update the popup controls based on settings for this site or the default. |
+ * @return {boolean} True if settings are valid and update performed. |
+ */ |
+ function update() { |
+ var type = getDefaultType(); |
+ var validType = false; |
+ CVD_TYPES.forEach(function(cvdType) { |
+ if (cvdType == type) { |
+ validType = true; |
+ return; |
+ } |
+ }); |
-/** |
- * Sets the radio buttons selection to the given CVD type. |
- * @param {string} cvdType Type of CVD, either "PROTANOMALY" or "DEUTERANOMALY" |
- * or "TRITANOMALY". |
- * @return {?string} |
- */ |
-function setCvdTypeSelection(cvdType) { |
- var highlight = $('row-highlight'); |
- highlight.hidden = true; |
- CVD_TYPES.forEach(function(str) { |
- var checkbox = $('select-' + str); |
- if (cvdType == str) { |
- checkbox.checked = true; |
- var top = checkbox.parentElement.offsetTop - HIGHLIGHT_OFFSET; |
- highlight.style.top = top + 'px'; |
- highlight.hidden = false; |
- } else { |
- checkbox.checked = false; |
- } |
- }); |
-} |
+ if (!validType) |
+ return false; |
-/** |
- * Styles controls based on stage of setup. |
- */ |
-function updateControls() { |
- if ($('setup-panel').classList.contains('collapsed')) { |
- // Not performing setup. Ensure main controls are enabled. |
- $('enable').disabled = false; |
- $('delta').disabled = false; |
- $('setup').disabled = false; |
- } else { |
- // Disable main controls during setup phase. |
- $('enable').disabled = true; |
- $('delta').disabled = true; |
- $('setup').disabled = true; |
- |
- if (!getCvdTypeSelection()) { |
- // Have not selected a CVD type. Mark Step 1 as active. |
- $('step-1').classList.add('active'); |
- $('step-2').classList.remove('active'); |
- // Disable "step 2" controls. |
- $('severity').disabled = true; |
- $('reset').disabled = true; |
+ if (site) { |
+ $('delta').value = getSiteDelta(site); |
} else { |
- $('step-1').classList.remove('active'); |
- $('step-2').classList.add('active'); |
- // Enable "step 2" controls. |
- $('severity').disabled = false; |
- $('reset').disabled = false; |
- // Force filter update. |
- onSeverityChange(parseFloat($('severity').value)); |
+ $('delta').value = getDefaultDelta(); |
} |
+ |
+ $('severity').value = getDefaultSeverity(); |
+ |
+ if (!$('setup-panel').classList.contains('collapsed')) |
+ setCvdTypeSelection(getDefaultType()); |
+ $('enable').checked = getDefaultEnable(); |
+ |
+ debugPrint('update: ' + |
+ ' del=' + $('delta').value + |
+ ' sev=' + $('severity').value + |
+ ' typ=' + getDefaultType() + |
+ ' enb=' + $('enable').checked + |
+ ' for ' + site |
+ ); |
+ chrome.extension.getBackgroundPage().updateTabs(); |
+ return true; |
} |
-} |
-/** |
- * Update the popup controls based on settings for this site or the default. |
- * @return {boolean} True if settings are valid and update performed. |
- */ |
-function update() { |
- var type = getDefaultType(); |
- var validType = false; |
- CVD_TYPES.forEach(function(cvdType) { |
- if (cvdType == type) { |
- validType = true; |
- return; |
+ /** |
+ * Callback for color rotation slider. |
+ * |
+ * @param {number} value Parsed value of slider element. |
+ */ |
+ function onDeltaChange(value) { |
+ debugPrint('onDeltaChange: ' + value + ' for ' + site); |
+ if (site) { |
+ setSiteDelta(site, value); |
} |
- }); |
- |
- if (!validType) |
- return false; |
- |
- if (site) { |
- $('delta').value = getSiteDelta(site); |
- } else { |
- $('delta').value = getDefaultDelta(); |
+ setDefaultDelta(value); |
+ update(); |
} |
- $('severity').value = getDefaultSeverity(); |
- |
- if (!$('setup-panel').classList.contains('collapsed')) |
- setCvdTypeSelection(getDefaultType()); |
- $('enable').checked = getDefaultEnable(); |
- |
- debugPrint('update: ' + |
- ' del=' + $('delta').value + |
- ' sev=' + $('severity').value + |
- ' typ=' + getDefaultType() + |
- ' enb=' + $('enable').checked + |
- ' for ' + site |
- ); |
- chrome.extension.getBackgroundPage().updateTabs(); |
- return true; |
-} |
- |
-/** |
- * Callback for color rotation slider. |
- * |
- * @param {number} value Parsed value of slider element. |
- */ |
-function onDeltaChange(value) { |
- debugPrint('onDeltaChange: ' + value + ' for ' + site); |
- if (site) { |
- setSiteDelta(site, value); |
+ /** |
+ * Callback for severity slider. |
+ * |
+ * @param {number} value Parsed value of slider element. |
+ */ |
+ function onSeverityChange(value) { |
+ debugPrint('onSeverityChange: ' + value + ' for ' + site); |
+ setDefaultSeverity(value); |
+ update(); |
+ // Apply filter to popup swatches. |
+ var filter = window.getDefaultCvdCorrectionFilter( |
+ getCvdTypeSelection(), value); |
+ injectColorEnhancementFilter(filter); |
+ // Force a refresh. |
+ window.getComputedStyle(document.documentElement, null); |
} |
- setDefaultDelta(value); |
- update(); |
-} |
-/** |
- * Callback for severity slider. |
- * |
- * @param {number} value Parsed value of slider element. |
- */ |
-function onSeverityChange(value) { |
- debugPrint('onSeverityChange: ' + value + ' for ' + site); |
- setDefaultSeverity(value); |
- update(); |
- // Apply filter to popup swatches. |
- var filter = window.getDefaultCvdCorrectionFilter( |
- getCvdTypeSelection(), value); |
- injectColorEnhancementFilter(filter); |
- // Force a refresh. |
- window.getComputedStyle(document.documentElement, null); |
-} |
+ /** |
+ * Callback for changing color deficiency type. |
+ * |
+ * @param {string} value Value of dropdown element. |
+ */ |
+ function onTypeChange(value) { |
+ debugPrint('onTypeChange: ' + value + ' for ' + site); |
+ setDefaultType(value); |
+ update(); |
+ // TODO(kevers): reset severity to effectively disable filter. |
+ activeFilterType = value; |
+ $('severity').value = 0; |
+ updateControls(); |
+ } |
-/** |
- * Callback for changing color deficiency type. |
- * |
- * @param {string} value Value of dropdown element. |
- */ |
-function onTypeChange(value) { |
- debugPrint('onTypeChange: ' + value + ' for ' + site); |
- setDefaultType(value); |
- update(); |
- // TODO(kevers): reset severity to effectively disable filter. |
- activeFilterType = value; |
- $('severity').value = 0; |
- updateControls(); |
-} |
+ /** |
+ * Callback for enable/disable setting. |
+ * |
+ * @param {boolean} value Value of checkbox element. |
+ */ |
+ function onEnableChange(value) { |
+ debugPrint('onEnableChange: ' + value + ' for ' + site); |
+ setDefaultEnable(value); |
+ if (!update()) { |
+ // Settings are not valid for a reconfiguration. |
+ $('setup').onclick(); |
+ } |
+ } |
-/** |
- * Callback for enable/disable setting. |
- * |
- * @param {boolean} value Value of checkbox element. |
-*/ |
-function onEnableChange(value) { |
- debugPrint('onEnableChange: ' + value + ' for ' + site); |
- setDefaultEnable(value); |
- if (!update()) { |
- // Settings are not valid for a reconfiguration. |
- $('setup').onclick(); |
+ /** |
+ * Callback for resetting stored per-site values. |
+ */ |
+ function onReset() { |
+ debugPrint('onReset'); |
+ resetSiteDeltas(); |
+ update(); |
} |
-} |
-/** |
- * Callback for resetting stored per-site values. |
- */ |
-function onReset() { |
- debugPrint('onReset'); |
- resetSiteDeltas(); |
- update(); |
-} |
+ /** |
+ * Attach event handlers to controls and update the filter config values for |
+ * the currently visible tab. |
+ */ |
+ function initialize() { |
+ var i18nElements = document.querySelectorAll('*[i18n-content]'); |
+ for (var i = 0; i < i18nElements.length; i++) { |
+ var elem = i18nElements[i]; |
+ var msg = elem.getAttribute('i18n-content'); |
+ elem.textContent = chrome.i18n.getMessage(msg); |
+ } |
-/** |
- * Attach event handlers to controls and update the filter config values for the |
- * currently visible tab. |
- */ |
-function initialize() { |
- var i18nElements = document.querySelectorAll('*[i18n-content]'); |
- for (var i = 0; i < i18nElements.length; i++) { |
- var elem = i18nElements[i]; |
- var msg = elem.getAttribute('i18n-content'); |
- elem.textContent = chrome.i18n.getMessage(msg); |
- } |
+ $('setup').onclick = function() { |
+ $('setup-panel').classList.remove('collapsed'); |
+ // Store current settings in the event of a canceled setup. |
+ restoreSettings = { |
+ type: getDefaultType(), |
+ severity: getDefaultSeverity() |
+ }; |
+ // Initalize controls based on current settings. |
+ setCvdTypeSelection(restoreSettings.type); |
+ $('severity').value = restoreSettings.severity; |
+ updateControls(); |
+ }; |
- $('setup').onclick = function() { |
- $('setup-panel').classList.remove('collapsed'); |
- // Store current settings in the event of a canceled setup. |
- restoreSettings = { |
- type: getDefaultType(), |
- severity: getDefaultSeverity() |
+ $('delta').addEventListener('input', function() { |
+ onDeltaChange(parseFloat(this.value)); |
+ }); |
+ $('severity').addEventListener('input', function() { |
+ onSeverityChange(parseFloat(this.value)); |
+ }); |
+ $('enable').addEventListener('change', function() { |
+ onEnableChange(this.checked); |
+ }); |
+ |
+ $('reset').onclick = function() { |
+ setDefaultSeverity(0); |
+ setDefaultType(''); |
+ setDefaultEnable(false); |
+ $('severity').value = 0; |
+ $('enable').checked = false; |
+ setCvdTypeSelection(''); |
+ updateControls(); |
+ clearColorEnhancementFilter(); |
}; |
- // Initalize controls based on current settings. |
- setCvdTypeSelection(restoreSettings.type); |
- $('severity').value = restoreSettings.severity; |
- updateControls(); |
- }; |
+ $('reset').hidden = !IS_DEV_MODE; |
- $('delta').addEventListener('input', function() { |
- onDeltaChange(parseFloat(this.value)); |
- }); |
- $('severity').addEventListener('input', function() { |
- onSeverityChange(parseFloat(this.value)); |
- }); |
- $('enable').addEventListener('change', function() { |
- onEnableChange(this.checked); |
- }); |
- |
- $('reset').onclick = function() { |
- setDefaultSeverity(0); |
- setDefaultType(''); |
- setDefaultEnable(false); |
- $('severity').value = 0; |
- $('enable').checked = false; |
- setCvdTypeSelection(''); |
- updateControls(); |
- clearColorEnhancementFilter(); |
- }; |
- $('reset').hidden = !IS_DEV_MODE; |
+ var closeSetup = function() { |
+ $('setup-panel').classList.add('collapsed'); |
+ updateControls(); |
+ }; |
- var closeSetup = function() { |
- $('setup-panel').classList.add('collapsed'); |
- updateControls(); |
- }; |
+ $('ok').onclick = function() { |
+ closeSetup(); |
+ }; |
- $('ok').onclick = function() { |
- closeSetup(); |
- }; |
+ $('cancel').onclick = function() { |
+ closeSetup(); |
+ if (restoreSettings) { |
+ debugPrint( |
+ 'restore previous settings: ' + |
+ 'type = ' + restoreSettings.type + |
+ ', severity = ' + restoreSettings.severity); |
+ setDefaultType(restoreSettings.type); |
+ setDefaultSeverity(restoreSettings.severity); |
+ } |
+ }; |
- $('cancel').onclick = function() { |
- closeSetup(); |
- if (restoreSettings) { |
- debugPrint( |
- 'restore previous settings: ' + |
- 'type = ' + restoreSettings.type + |
- ', severity = ' + restoreSettings.severity); |
- setDefaultType(restoreSettings.type); |
- setDefaultSeverity(restoreSettings.severity); |
- } |
- }; |
+ var swatches = $('swatches'); |
+ CVD_TYPES.forEach(function(cvdType) { |
+ swatches.appendChild(createTestRow(cvdType)); |
+ }); |
+ |
+ chrome.windows.getLastFocused({'populate': true}, function(window) { |
+ for (var i = 0; i < window.tabs.length; i++) { |
+ var tab = window.tabs[i]; |
+ if (tab.active) { |
+ site = siteFromUrl(tab.url); |
+ debugPrint('init: active tab update for ' + site); |
+ update(); |
+ return; |
+ } |
+ } |
+ site = 'unknown site'; |
+ update(); |
+ }); |
+ } |
- var swatches = $('swatches'); |
- CVD_TYPES.forEach(function(cvdType) { |
- swatches.appendChild(createTestRow(cvdType)); |
- }); |
- |
- chrome.windows.getLastFocused({'populate': true}, function(window) { |
- for (var i = 0; i < window.tabs.length; i++) { |
- var tab = window.tabs[i]; |
- if (tab.active) { |
- site = siteFromUrl(tab.url); |
- debugPrint('init: active tab update for ' + site); |
- update(); |
- return; |
+ /** |
+ * Runs initialize once popup loading is complete. |
+ */ |
+ exports.initializeOnLoad = function() { |
+ var ready = new Promise(function readyPromise(resolve) { |
+ if (document.readyState === 'complete') { |
+ resolve(); |
} |
- } |
- site = 'unknown site'; |
- update(); |
- }); |
-} |
+ document.addEventListener('DOMContentLoaded', resolve); |
+ }); |
+ ready.then(initialize); |
+ }; |
+})(this); |
-// TODO(wnwen): Use Promise instead, more reliable. |
-window.addEventListener('load', initialize, false); |
+this.initializeOnLoad(); |