Improved: Popup, Options and Statistics page

core/messenger.js

@@ -32,89 +32,79 @@ var messenger = {};
 
 messenger._handleMessageReceived = function (message, sender, sendResponse) {
 
-    let topic, value;
+    let topic, value, popup;
 
     topic = message.topic;
     value = message.value;
+    popup = {};
 
-    if (topic === 'tab:fetch-injections') {
+    switch (topic) {
 
-        sendResponse({'value': stateManager.tabs[value].injections});
+        case 'tab:fetch-injections':
-        return MessageResponse.SYNCHRONOUS;
+            sendResponse({'value': stateManager.tabs[value].injections});
-    }
+            return MessageResponse.SYNCHRONOUS;
 
-    if (topic === 'domain:fetch-is-allowlisted') {
+        case 'tab:inject':
-        let allowlistRecord = helpers.checkAllowlisted(value);
+            chrome.tabs.executeScript(value, {
-        sendResponse({'value': Boolean(allowlistRecord)});
+                'code': `window.addEventListener('load', () => {
+                    document.getElementById('domain').value = '${message.url}';
+                });`,
+                'runAt': 'document_start'
+            });
+            break;
 
-        return MessageResponse.SYNCHRONOUS;
+        case 'domain:fetch-is-allowlisted':
-    }
+            sendResponse({'value': Boolean(helpers.checkAllowlisted(value))});
+            return MessageResponse.SYNCHRONOUS;
 
-    if (topic === 'allowlist:add-domain') {
+        case 'domain:fetch-is-manipulateDOM':
+            sendResponse({'value': Boolean(requestAnalyzer.domainsManipulateDOM[value])});
+            return MessageResponse.SYNCHRONOUS;
 
-        stateManager.addDomainToAllowlist(value).then(function () {
+        case 'allowlist:add-domain':
-            sendResponse({'value': true});
+            stateManager.addDomainToAllowlist(value).then(function () {
-        });
+                sendResponse({'value': true});
+            });
+            return MessageResponse.ASYNCHRONOUS;
 
-        return MessageResponse.ASYNCHRONOUS;
+        case 'allowlist:remove-domain':
-    }
+            stateManager.removeDomainFromAllowlist(value).then(function () {
+                sendResponse({'value': true});
+            });
+            return MessageResponse.ASYNCHRONOUS;
 
-    if (topic === 'allowlist:remove-domain') {
+        case 'manipulateDOM:add-domain':
+            stateManager.addDomainToManipulateDOMlist(value).then(function () {
+                sendResponse({'value': true});
+            });
+            return MessageResponse.ASYNCHRONOUS;
 
-        stateManager.removeDomainFromAllowlist(value).then(function () {
+        case 'manipulateDOM:remove-domain':
-            sendResponse({'value': true});
+            stateManager.removeDomainFromManipulateDOMlist(value).then(function () {
-        });
+                sendResponse({'value': true});
+            });
+            return MessageResponse.ASYNCHRONOUS;
 
-        return MessageResponse.ASYNCHRONOUS;
+        case 'statistic:delete':
-    }
+            storageManager.statistics = {};
+            break;
 
-    if (topic === 'domain:fetch-is-manipulateDOM') {
+        case 'logs:get':
+            sendResponse({'logs': log.data});
+            return MessageResponse.SYNCHRONOUS;
 
-        let manipulateDOMRecord = requestAnalyzer.domainsManipulateDOM[value];
+        case 'logs:delete':
-        sendResponse({'value': Boolean(manipulateDOMRecord)});
+            log.data = [];
+            break;
 
-        return MessageResponse.SYNCHRONOUS;
+        case 'popup:get-data':
-    }
+            popup.amountInjected = storageManager.amountInjected;
-
+            popup.internalStatistics = stateManager.internalStatistics;
-    if (topic === 'manipulateDOM:add-domain') {
+            popup.negateHtmlFilterList = stateManager.getInvertOption;
-
+            popup.loggingStatus = stateManager.logging;
-        stateManager.addDomainToManipulateDOMlist(value).then(function () {
+            popup.hideDonationButton = stateManager.hideDonationButton;
-            sendResponse({'value': true});
+            sendResponse({'data': popup});
-        });
+            return MessageResponse.ASYNCHRONOUS;
-
-        return MessageResponse.ASYNCHRONOUS;
-    }
-
-    if (topic === 'manipulateDOM:remove-domain') {
-
-        stateManager.removeDomainFromManipulateDOMlist(value).then(function () {
-            sendResponse({'value': true});
-        });
-
-        return MessageResponse.ASYNCHRONOUS;
-    }
-
-    if (topic === 'deleteStatistic') {
-        storageManager.statistics = {};
-    }
-
-    if (topic === 'injection') {
-
-        chrome.tabs.executeScript(value, {
-            'code': `window.addEventListener('load', () => {
-                document.getElementById('domain').value = '${message.url}';
-            });`,
-            'runAt': 'document_start'
-        });
-    }
-
-    if (topic === 'logs:get') {
-        sendResponse({'logs': log.data});
-        return MessageResponse.SYNCHRONOUS;
-    }
-
-    if (topic === 'logs:delete') {
-        log.data = [];
     }
 };
 

core/state-manager.js

@@ -206,6 +206,8 @@ stateManager._handleStorageChanged = function (changes) {
         stateManager.hideDonationButton = changes.hideDonationButton.newValue;
     } else if (Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES in changes) {
         stateManager.changeBadgeColorMissingResources = changes.changeBadgeColorMissingResources.newValue;
+    } else if (Setting.LOGGING in changes) {
+        stateManager.logging = changes.enableLogging.newValue;
     }
 };
 
@@ -256,6 +258,7 @@ stateManager.selectedIcon = 'Default';
 stateManager.internalStatistics = false;
 stateManager.hideDonationButton = false;
 stateManager.changeBadgeColorMissingResources = false;
+stateManager.logging = false;
 
 for (let mapping in mappings.cdn) {
     let supportedHost = Address.ANY_PROTOCOL + mapping + Address.ANY_PATH;
@@ -268,8 +271,13 @@ chrome.tabs.query({}, function (tabs) {
 
 storageManager.type.get([
     Setting.SHOW_ICON_BADGE,
+    Setting.NEGATE_HTML_FILTER_LIST,
     Setting.SELECTED_ICON,
-    Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES
+    Setting.INTERNAL_STATISTICS,
+    Setting.HIDE_DONATION_BUTTON,
+    Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES,
+    Setting.LOGGING,
+    Setting.AMOUNT_INJECTED
 ], function (items) {
     if (items.showIconBadge === undefined) {
         items.showIconBadge = true;
@@ -278,8 +286,13 @@ storageManager.type.get([
         stateManager.selectedIcon = 'Default';
     }
     stateManager.showIconBadge = items.showIconBadge;
+    stateManager.getInvertOption = items.negateHtmlFilterList;
     stateManager.selectedIcon = items.selectedIcon;
+    stateManager.internalStatistics = items.internalStatistics;
+    stateManager.hideDonationButton = items.hideDonationButton;
     stateManager.changeBadgeColorMissingResources = items.changeBadgeColorMissingResources;
+    stateManager.logging = items.enableLogging;
+    stateManager.amountInjected = items.amountInjected;
 });
 
 chrome.storage.local.get([Setting.INTERNAL_STATISTICS], function (items) {

modules/internal/helpers.js

@@ -187,6 +187,28 @@ helpers.determineScriptDirection = function (language) {
     return scriptDirection;
 };
 
+helpers.determineActiveTab = function () {
+    return new Promise((resolve) => {
+        let opt = {
+            'active': true,
+            'currentWindow': true
+        };
+
+        chrome.tabs.query(opt, function (tabs) {
+            if (tabs[0]) {
+                resolve(tabs[0]);
+            } else {
+                opt = {'active': true};
+
+                chrome.tabs.query(opt, function (tabs) {
+                    resolve(tabs[0]);
+                });
+            }
+        });
+    });
+};
+
+
 helpers.formatNumber = function (number) {
     if (typeof number === 'number') {
         return number.toLocaleString();

pages/options/options.html

@@ -176,7 +176,7 @@
                 <section class="option">
                     <div id="html-filter-domains-title-exclude" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleExclude">Do not apply HTML filter to these domains:</div>
                     <div id="html-filter-domains-title-include" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleInclude">Apply HTML filter to these domains:</div>
-                    <textarea rows="7" id="domainsManipulateDOM" class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text"></textarea>
+                    <textarea rows="7" id="tf-domains-manipulate-dom" class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text"></textarea>
                     <div class="description-option without-checkbox" data-i18n-content="htmlFilterDomainsDescription">Enter the domains to be handled or ignored by the HTML filter. One domain per line.</div>
                 </section>
                 <section class="option">

pages/popup/popup.html

@@ -20,7 +20,7 @@
             </div>
             <div id="donate-button">
                 <p id="label-donate" data-i18n-content="labelDonate">Donate</p>
-                <div id="donate-button-svg" class="button-svg"></div>
+                <div id="donate-button-svg" class="button-svg" data-link="donate"></div>
             </div>
         </header>
         <section class="content">
@@ -44,7 +44,7 @@
                         </label>
                     </div>
                     <div id="label-manipulateDOM" class="label-domain">
-                        <a id="manipulateDOM-indicator" data-i18n-content="labelManipulateDOM">Filter HTML source code</a>
+                        <a id="manipulateDOM-indicator" data-i18n-content="labelManipulateDOM" data-link="faq-html-filter">Filter HTML source code</a>
                     </div>
                 </div>
             </div>
@@ -55,18 +55,18 @@
         </section>
         <footer>
             <div id="testing-utility">
-                <a id="testing-utility-link" class="link-text" data-i18n-content="websiteBroken">Website broken?</a>
+                <a id="testing-utility-link" class="link-text" data-i18n-content="websiteBroken" data-link="testing-utility">Website broken?</a>
             </div>
             <div id="logging-button" class="button">
-                <div id="logging-button-svg" class="button-svg"></div>
+                <div id="logging-button-svg" class="button-svg" data-link="logging"></div>
             </div>
             <div id="statistics-button" class="button" data-i18n-title="headerStatistics">
-                <div id="statistics-button-svg" class="button-svg"></div>
+                <div id="statistics-button-svg" class="button-svg" data-link="statistics"></div>
             </div>
             <div id="options-button" class="button" data-i18n-title="optionsTitle">
                 <div id="options-button-svg" class="button-svg"></div>
             </div>
         </footer>
-        <div id="popup-incomplete-translation"></div>
+        <div id="popup-incomplete-translation" data-link="translation"></div>
     </body>
 </html>

pages/popup/popup.js

@@ -26,6 +26,14 @@
 var popup = {};
 
 
+const PopupLinks = {
+    'statistics': Links.STATISTICS,
+    'translation': Links.WEBLATE,
+    'logging': Links.LOGGING,
+    'faq-html-filter': Links.FAQ_HTML_FILTER,
+    'donate': Links.DONATE,
+};
+
 /**
  * Private Methods
  */
@@ -70,17 +78,17 @@ popup._renderNonContextualContents = function () {
 
     testingUtilityLinkElement.addEventListener('mouseup', popup._onTestingUtilityLinkClicked);
     optionsButtonElement.addEventListener('mouseup', popup._onOptionsButtonClicked);
-    donationButtonElement.addEventListener('mouseup', popup._onDonationButtonClicked);
+    donationButtonElement.addEventListener('mouseup', popup._onButtonClicked);
-    infoButtonLabel.addEventListener('mouseup', popup._onInfoButtonClicked);
+    infoButtonLabel.addEventListener('mouseup', popup._onButtonClicked);
 
     if (popup._statisticsStatus) {
         document.getElementById('statistics-button').style.display = 'block';
-        document.getElementById('statistics-button').addEventListener('mouseup', popup._onStatisticsButtonClicked);
+        document.getElementById('statistics-button').addEventListener('mouseup', popup._onButtonClicked);
     }
 
     if (popup._loggingStatus) {
         document.getElementById('logging-button').style.display = 'block';
-        document.getElementById('logging-button').addEventListener('mouseup', popup._onLoggingButtonClicked);
+        document.getElementById('logging-button').addEventListener('mouseup', popup._onButtonClicked);
     }
 
     if (!popup.hideDonationButton) {
@@ -246,38 +254,26 @@ popup._determineResourceInjections = function () {
 
 popup._determineTargetTab = function () {
     return new Promise((resolve) => {
-        chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
+        helpers.determineActiveTab().then((activeTab) => {
-            popup._targetTab = tabs[0];
+            popup._targetTab = activeTab;
-            popup._domain = helpers.extractDomainFromUrl(tabs[0].url, true);
+            popup._domain = helpers.extractDomainFromUrl(activeTab.url, true);
-
             resolve();
         });
     });
 };
 
-popup._readLocalStorage = function () {
+popup._getData = function () {
     return new Promise((resolve) => {
-        chrome.storage.local.get([
+        let message = {
-            Setting.AMOUNT_INJECTED,
+            'topic': 'popup:get-data'
-            Setting.INTERNAL_STATISTICS
+        };
-        ], function (items) {
-            popup._amountInjected = items.amountInjected || 0;
-            popup._statisticsStatus = items.internalStatistics || false;
-            resolve();
-        });
-    });
-};
 
-popup._readStorage = function () {
+        chrome.runtime.sendMessage(message, function (items) {
-    return new Promise((resolve) => {
+            popup._amountInjected = items.data.amountInjected;
-        storageManager.type.get([
+            popup._statisticsStatus = items.data.internalStatistics;
-            Setting.NEGATE_HTML_FILTER_LIST,
+            popup.negateHtmlFilterList = items.data.negateHtmlFilterList;
-            Setting.LOGGING,
+            popup._loggingStatus = items.data.loggingStatus;
-            Setting.HIDE_DONATION_BUTTON
+            popup.hideDonationButton = items.data.hideDonationButton;
-        ], function (items) {
-            popup.negateHtmlFilterList = items.negateHtmlFilterList;
-            popup._loggingStatus = items.enableLogging;
-            popup.hideDonationButton = items.hideDonationButton;
             resolve();
         });
     });
@@ -423,12 +419,11 @@ popup._renderLocaleNotice = function () {
 
     localeNoticeElement = document.getElementById('popup-incomplete-translation');
     localeNoticeElement.setAttribute('class', 'notice notice-default');
-    localeNoticeElement.addEventListener('mouseup', popup._onIncompleteTranslation);
+    localeNoticeElement.addEventListener('mouseup', popup._onButtonClicked);
 
     nameTextNode = document.createTextNode('Translation is incomplete. You want to help on Weblate?');
 
     localeNoticeElement.appendChild(nameTextNode);
-    localeNoticeElement.addEventListener('mouseup', popup._onIncompleteTranslation);
 };
 
 
@@ -446,9 +441,7 @@ popup._onDocumentLoaded = function () {
     popup._version = manifest.version;
     popup._scriptDirection = helpers.determineScriptDirection(language);
 
-    popup._readLocalStorage()
+    popup._getData().then(popup._renderContents);
-        .then(popup._readStorage)
-        .then(popup._renderContents);
 };
 
 popup._onTestingUtilityLinkClicked = function (event) {
@@ -468,7 +461,7 @@ popup._onTestingUtilityLinkClicked = function (event) {
 
 popup._injectDomain = function (tabId) {
     let message = {
-        'topic': 'injection',
+        'topic': 'tab:inject',
         'value': tabId,
         'url': popup._targetTab.url
     };
@@ -481,19 +474,6 @@ popup._onOptionsButtonClicked = function () {
     return window.close();
 };
 
-popup._onDonationButtonClicked = function () {
-    if (event.button === 0 || event.button === 1) {
-        chrome.tabs.create({
-            'url': Links.DONATE,
-            'active': event.button === 0,
-        });
-    }
-
-    if (event.button === 0) {
-        window.close();
-    }
-};
-
 popup._onToggled = function () {
     let bypassCache = typeof browser === 'undefined';
 
@@ -506,8 +486,12 @@ popup._onToggled = function () {
 popup._close = function () {
     chrome.runtime.getPlatformInfo(function (information) {
         if (information.os === chrome.runtime.PlatformOs.ANDROID) {
-            chrome.tabs.getCurrent(function (tab) {
+            chrome.tabs.getCurrent(function (activeTab) {
-                chrome.tabs.remove(tab.id);
+                if (activeTab) {
+                    chrome.tabs.remove(activeTab.id);
+                } else {
+                    window.close();
+                }
             });
         } else {
             window.close();
@@ -515,48 +499,11 @@ popup._close = function () {
     });
 };
 
-popup._onInfoButtonClicked = function () {
+popup._onButtonClicked = function ({target}) {
+    let data = target.getAttribute('data-link');
     if (event.button === 0 || event.button === 1) {
         chrome.tabs.create({
-            'url': Links.FAQ_HTML_FILTER,
+            'url': PopupLinks[data],
-            'active': event.button === 0,
-        });
-    }
-
-    if (event.button === 0) {
-        window.close();
-    }
-};
-
-popup._onIncompleteTranslation = function () {
-    if (event.button === 0 || event.button === 1) {
-        chrome.tabs.create({
-            'url': Links.WEBLATE,
-            'active': event.button === 0,
-        });
-    }
-
-    if (event.button === 0) {
-        window.close();
-    }
-};
-
-popup._onStatisticsButtonClicked = function () {
-    if (event.button === 0 || event.button === 1) {
-        chrome.tabs.create({
-            'url': Links.STATISTICS,
-            'active': event.button === 0,
-        });
-    }
-    if (event.button === 0) {
-        window.close();
-    }
-};
-
-popup._onLoggingButtonClicked = function () {
-    if (event.button === 0 || event.button === 1) {
-        chrome.tabs.create({
-            'url': Links.LOGGING,
             'active': event.button === 0,
         });
     }

pages/statistics/statistics.js

@@ -31,9 +31,10 @@ statistics._onDocumentLoaded = function () {
     helpers.insertI18nTitlesIntoDocument(document);
 
     chrome.storage.local.get([Setting.DEFAULT_RANGE_STATISTIC], function (items) {
-        document.getElementById('date-range').value = items.defaultRangeStatistic;
+        statistics._dateUnit = items.defaultRangeStatistic || 'week';
-        statistics._dateUnit = items.defaultRangeStatistic;
+        document.getElementById('date-range').value = statistics._dateUnit;
-        statistics._setDateRange(items.defaultRangeStatistic);
+
+        statistics._setDateRange();
         statistics._registerListener();
         statistics._getStatistics().then(statistics._renderContents);
     });
@@ -243,7 +244,7 @@ statistics._deleteStatistic = function () {
         chrome.storage.local.set({
             [Setting.INTERNAL_STATISTICS_DATA]: {}
         });
-        chrome.runtime.sendMessage({'topic': 'deleteStatistic'});
+        chrome.runtime.sendMessage({'topic': 'statistic:delete'});
     }
 };