From bce5e9f58ec996bd586a66239bba2a61ff3868af Mon Sep 17 00:00:00 2001
From: Thomas Rientjes <synzvato@protonmail.com>
Date: Sun, 7 Jan 2018 21:06:49 -0300
Subject: [PATCH] Refactor popup panel logic
---
pages/popup/popup.js | 369 ++++++++++++++++++++++++++-----------------
1 file changed, 225 insertions(+), 144 deletions(-)
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 6ae33c9..befa4ac 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -20,233 +20,314 @@
var popup = {};
/**
- * Initializations
+ * Private Methods
*/
-document.addEventListener('DOMContentLoaded', function () {
+popup._renderContents = function () {
+
+ helpers.insertI18nContentIntoDocument(document);
+ helpers.insertI18nTitlesIntoDocument(document);
+
+ popup._renderNonContextualContents();
+
+ if (popup._backgroundPage !== null) {
+
+ popup._determineTargetTab()
+ .then(popup._renderContextualContents);
+ }
+};
- let version, optionsButtonElement, scriptDirection;
+popup._renderNonContextualContents = function () {
- version = helpers.formatVersion(chrome.runtime.getManifest().version);
- document.getElementById('version-label').innerText = version;
+ let versionLabelElement, counterElement, testingUtilityLinkElement, optionsButtonElement;
- scriptDirection = helpers.determineScriptDirection(navigator.language);
+ versionLabelElement = document.getElementById('version-label');
+ counterElement = document.getElementById('injection-counter');
+ testingUtilityLinkElement = document.getElementById('testing-utility-link');
optionsButtonElement = document.getElementById('options-button');
- helpers.insertI18nContentIntoDocument(document);
- helpers.insertI18nTitlesIntoDocument(document);
+ versionLabelElement.innerText = popup._version;
+ counterElement.innerText = popup._amountInjected;
- chrome.storage.local.get('amountInjected', function (items) {
+ testingUtilityLinkElement.addEventListener('mouseup', popup._onTestingUtilityLinkClicked);
+ optionsButtonElement.addEventListener('mouseup', popup._onOptionsButtonClicked);
+};
- let amountInjected = items.amountInjected || 0;
- document.getElementById('injection-counter').innerText = amountInjected;
+popup._renderContextualContents = function () {
- chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
+ let injections, groupedInjections;
+
+ popup._domain = helpers.extractDomainFromUrl(popup._targetTab.url);
+
+ popup._requestAnalyzer = popup._backgroundPage.requestAnalyzer;
+ popup._stateManager = popup._backgroundPage.stateManager;
+
+ if (popup._domain !== null) {
+
+ popup._domain = helpers.normalizeDomain(popup._domain);
+ popup._renderDomainWhitelistPanel();
+ }
- chrome.runtime.getBackgroundPage(function (backgroundPage) {
+ injections = popup._stateManager.tabs[popup._targetTab.id].injections;
+ groupedInjections = popup._groupResourceInjections(injections);
- if (backgroundPage === null) {
- return;
- }
+ if (Object.keys(groupedInjections).length > 0) {
+ popup._renderInjectionPanel(groupedInjections);
+ }
+};
- popup.backgroundPage = backgroundPage;
+popup._renderDomainWhitelistPanel = function () {
- if (backgroundPage.main.operatingSystem === chrome.runtime.PlatformOs.ANDROID) {
+ let websiteContextElement, protectionToggleElement, domainIndicatorElement;
- browser.tabs.getCurrent().then(function (tab) {
+ websiteContextElement = document.getElementById('website-context');
+ protectionToggleElement = document.getElementById('protection-toggle-button');
+ domainIndicatorElement = document.getElementById('domain-indicator');
- browser.tabs.update(tab.id, {
- 'active': true
- });
- });
- }
+ protectionToggleElement.setAttribute('dir', popup._scriptDirection);
+ domainIndicatorElement.innerText = popup._domain;
- let injections, injectionOverview, domain;
+ if (popup._requestAnalyzer.whitelistedDomains[popup._domain]) {
- injections = backgroundPage.stateManager.tabs[tabs[0].id].injections;
- injectionOverview = {};
+ let enableProtectionTitle = chrome.i18n.getMessage('enableProtectionTitle');
- domain = helpers.extractDomainFromUrl(tabs[0].url);
+ protectionToggleElement.setAttribute('class', 'button button-toggle');
+ protectionToggleElement.addEventListener('click', popup._enableProtection);
+ protectionToggleElement.setAttribute('title', enableProtectionTitle);
- if (domain !== null) {
+ } else {
- let websiteContextElement, protectionToggleElement, domainIndicatorElement;
+ let disableProtectionTitle = chrome.i18n.getMessage('disableProtectionTitle');
- websiteContextElement = document.getElementById('website-context');
- protectionToggleElement = document.getElementById('protection-toggle-button');
- domainIndicatorElement = document.getElementById('domain-indicator');
+ protectionToggleElement.setAttribute('class', 'button button-toggle active');
+ protectionToggleElement.addEventListener('click', popup._disableProtection);
+ protectionToggleElement.setAttribute('title', disableProtectionTitle);
+ }
- if (domain.startsWith(Address.WWW_PREFIX)) {
- domain = domain.slice(Address.WWW_PREFIX_LENGTH);
- }
+ websiteContextElement.setAttribute('class', 'panel');
+};
- domainIndicatorElement.innerText = domain;
+popup._renderInjectionPanel = function (groupedInjections) {
- if (backgroundPage.requestAnalyzer.whitelistedDomains[domain]) {
+ let websiteContextElement, injectionOverviewElement;
- protectionToggleElement.setAttribute('class', 'button button-toggle');
+ websiteContextElement = document.getElementById('website-context');
+ injectionOverviewElement = popup._createInjectionOverviewElement(groupedInjections);
- let enableProtectionTitle = chrome.i18n.getMessage('enableProtectionTitle');
- protectionToggleElement.setAttribute('title', enableProtectionTitle);
+ websiteContextElement.append(injectionOverviewElement);
+};
- protectionToggleElement.addEventListener('click', function () {
+popup._enableProtection = function () {
- backgroundPage.stateManager.deleteDomainFromWhitelist(domain).then(function () {
+ popup._stateManager.deleteDomainFromWhitelist(popup._domain)
+ .then(popup._onProtectionToggled);
+};
- chrome.tabs.reload(tabs[0].id);
+popup._disableProtection = function () {
- if (backgroundPage.main.operatingSystem === chrome.runtime.PlatformOs.ANDROID) {
+ popup._stateManager.addDomainToWhitelist(popup._domain)
+ .then(popup._onProtectionToggled);
+};
- return browser.tabs.getCurrent().then(function (tab) {
- browser.tabs.remove(tab.id);
- });
- }
+popup._determineBackgroundPage = function () {
- return window.close();
- });
- });
+ return new Promise((resolve) => {
- } else {
+ chrome.runtime.getBackgroundPage(function (backgroundPage) {
- protectionToggleElement.setAttribute('class', 'button button-toggle active');
+ popup._backgroundPage = backgroundPage;
+ resolve();
+ });
+ });
+};
- let disableProtectionTitle = chrome.i18n.getMessage('disableProtectionTitle');
+popup._determineTargetTab = function () {
- protectionToggleElement.setAttribute('title', disableProtectionTitle);
- protectionToggleElement.setAttribute('dir', scriptDirection);
+ return new Promise((resolve) => {
- protectionToggleElement.addEventListener('click', function () {
+ chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
- backgroundPage.stateManager.addDomainToWhitelist(domain).then(function () {
+ popup._targetTab = tabs[0];
+ resolve();
+ });
+ });
+};
+
+popup._determineAmountInjected = function () {
- chrome.tabs.reload(tabs[0].id);
+ return new Promise((resolve) => {
- if (backgroundPage.main.operatingSystem === chrome.runtime.PlatformOs.ANDROID) {
+ chrome.storage.local.get('amountInjected', function (items) {
- return browser.tabs.getCurrent().then(function (tab) {
- browser.tabs.remove(tab.id);
- });
- }
+ popup._amountInjected = items.amountInjected || 0;
+ resolve();
+ });
+ });
+};
- return window.close();
- });
- });
- }
+popup._groupResourceInjections = function (injections) {
- websiteContextElement.setAttribute('class', 'panel');
- }
+ let groupedInjections = {};
- for (let injection in injections) {
+ for (let index in injections) {
- injection = injections[injection];
+ let {source} = injections[index];
- let injectionSource = injection.source;
- injectionOverview[injectionSource] = injectionOverview[injectionSource] || [];
+ groupedInjections[source] = groupedInjections[source] || [];
+ groupedInjections[source].push(injections[index]);
+ }
- injectionOverview[injectionSource].push({
- 'path': injection.path,
- 'version': injection.version,
- 'source': injection.source
- });
- }
+ return groupedInjections;
+};
- let listElement = document.createElement('ul');
- listElement.setAttribute('class', 'list');
+popup._createInjectionOverviewElement = function (groupedInjections) {
- for (let injectionSource in injectionOverview) {
+ let injectionOverviewElement = document.createElement('ul');
+ injectionOverviewElement.setAttribute('class', 'list');
- let cdn, listItemElement, badgeElement, badgeTextNode, cdnName, cdnNameTextNode, subListElement;
+ for (let source in groupedInjections) {
- cdn = injectionOverview[injectionSource];
+ let injectionGroupHeaderElement, injectionGroupElement, cdn;
- listItemElement = document.createElement('li');
- listItemElement.setAttribute('class', 'list-item');
+ cdn = groupedInjections[source];
- badgeElement = document.createElement('span');
- badgeElement.setAttribute('class', 'badge');
+ injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
+ injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
- badgeTextNode = document.createTextNode(cdn.length);
- badgeElement.appendChild(badgeTextNode);
+ injectionOverviewElement.appendChild(injectionGroupHeaderElement);
+ injectionOverviewElement.appendChild(injectionGroupElement);
+ }
- cdnName = helpers.determineCdnName(injectionSource);
+ return injectionOverviewElement;
+};
- cdnNameTextNode = document.createTextNode(cdnName);
+popup._createInjectionGroupHeaderElement = function (source, cdn) {
- listItemElement.appendChild(badgeElement);
- listItemElement.appendChild(cdnNameTextNode);
+ let injectionGroupHeaderElement, badgeElement, badgeTextNode, cdnNameTextNode;
- listElement.appendChild(listItemElement);
+ injectionGroupHeaderElement = document.createElement('li');
+ injectionGroupHeaderElement.setAttribute('class', 'list-item');
- subListElement = document.createElement('ul');
- subListElement.setAttribute('class', 'sublist');
+ badgeElement = document.createElement('span');
+ badgeElement.setAttribute('class', 'badge');
- listElement.appendChild(subListElement);
+ badgeTextNode = document.createTextNode(cdn.length);
+ badgeElement.appendChild(badgeTextNode);
- for (let injection of cdn) {
+ cdnNameTextNode = document.createTextNode(helpers.determineCdnName(source));
- let subListItemElement, resourcePathDetails, resourceFilename, resourceName,
- resourceNameTextNode, sideNoteElement, sideNoteTextNode;
+ injectionGroupHeaderElement.appendChild(badgeElement);
+ injectionGroupHeaderElement.appendChild(cdnNameTextNode);
- subListItemElement = document.createElement('li');
- subListItemElement.setAttribute('class', 'sublist-item');
+ return injectionGroupHeaderElement;
+};
- resourcePathDetails = injection.path.split('/');
- resourceFilename = resourcePathDetails[resourcePathDetails.length - 1];
+popup._createInjectionGroupElement = function (source, cdn) {
- resourceName = helpers.determineResourceName(resourceFilename);
+ let injectionGroupElement;
- resourceNameTextNode = document.createTextNode(`- ${resourceName}`);
- subListItemElement.appendChild(resourceNameTextNode);
+ injectionGroupElement = document.createElement('ul');
+ injectionGroupElement.setAttribute('class', 'sublist');
- sideNoteElement = document.createElement('span');
- sideNoteElement.setAttribute('class', 'side-note');
+ for (let injection of cdn) {
- sideNoteTextNode = document.createTextNode(` v${injection.version}`);
+ let injectionElement = popup._createInjectionElement(injection);
+ injectionGroupElement.appendChild(injectionElement);
+ }
- sideNoteElement.appendChild(sideNoteTextNode);
- subListItemElement.appendChild(sideNoteElement);
+ return injectionGroupElement;
+};
- subListElement.appendChild(subListItemElement);
- }
- }
+popup._createInjectionElement = function (injection) {
- if (Object.keys(injectionOverview).length > 0) {
+ let injectionElement, filename, name, nameTextNode, noteElement, noteTextNode;
- let websiteContextElement = document.getElementById('website-context');
- websiteContextElement.append(listElement);
- }
- });
- });
- });
+ injectionElement = document.createElement('li');
+ injectionElement.setAttribute('class', 'sublist-item');
- chrome.runtime.getPlatformInfo(function (information) {
+ filename = helpers.extractFilenameFromPath(injection.path);
+ name = helpers.determineResourceName(filename);
- optionsButtonElement.addEventListener('mouseup', function () {
+ nameTextNode = document.createTextNode(`- ${name}`);
+ injectionElement.appendChild(nameTextNode);
- if (information.os === chrome.runtime.PlatformOs.ANDROID) {
+ noteElement = document.createElement('span');
+ noteElement.setAttribute('class', 'side-note');
- return chrome.tabs.create({
- 'url': chrome.extension.getURL('pages/options/options.html')
- });
- }
+ noteTextNode = document.createTextNode(` v${injection.version}`);
- chrome.runtime.openOptionsPage();
- return window.close();
- });
- });
+ noteElement.appendChild(noteTextNode);
+ injectionElement.appendChild(noteElement);
- document.getElementById('testing-utility-link').addEventListener('mouseup', function (event) {
+ return injectionElement;
+};
- if (event.button === 0 || event.button === 1) {
+popup._close = function () {
- chrome.tabs.create({
- 'url': 'https://decentraleyes.org/test',
- 'active': (event.button === 0)
+ chrome.runtime.getPlatformInfo(function (information) {
+
+ if (information.os === chrome.runtime.PlatformOs.ANDROID) {
+
+ chrome.tabs.getCurrent(function (tab) {
+ chrome.tabs.remove(tab.id);
});
- }
- if (event.button === 0) {
+ } else {
window.close();
}
});
-});
+};
+
+/**
+ * Event Handlers
+ */
+
+popup._onDocumentLoaded = function () {
+
+ let manifest, language;
+
+ manifest = chrome.runtime.getManifest();
+ language = navigator.language;
+
+ popup._version = helpers.formatVersion(manifest.version);
+ popup._scriptDirection = helpers.determineScriptDirection(language);
+
+ popup._determineBackgroundPage()
+ .then(popup._determineAmountInjected)
+ .then(popup._renderContents);
+};
+
+popup._onTestingUtilityLinkClicked = function (event) {
+
+ if (event.button === 0 || event.button === 1) {
+
+ chrome.tabs.create({
+ 'url': 'https://decentraleyes.org/test',
+ 'active': (event.button === 0)
+ });
+ }
+
+ if (event.button === 0) {
+ window.close();
+ }
+};
+
+popup._onOptionsButtonClicked = function () {
+
+ chrome.runtime.openOptionsPage();
+ return window.close();
+};
+
+popup._onProtectionToggled = function () {
+
+ let bypassCache = (typeof browser === 'undefined');
+
+ chrome.tabs.reload(popup._targetTab.id, {bypassCache});
+ popup._close();
+};
+
+/**
+ * Initializations
+ */
+
+document.addEventListener('DOMContentLoaded', popup._onDocumentLoaded);
--
GitLab