Verified Commit bce5e9f5 authored by Thomas Rientjes's avatar Thomas Rientjes
Browse files

Refactor popup panel logic

parent 3b941ed0
...@@ -20,233 +20,314 @@ ...@@ -20,233 +20,314 @@
var popup = {}; 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); let versionLabelElement, counterElement, testingUtilityLinkElement, optionsButtonElement;
document.getElementById('version-label').innerText = version;
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'); optionsButtonElement = document.getElementById('options-button');
helpers.insertI18nContentIntoDocument(document); versionLabelElement.innerText = popup._version;
helpers.insertI18nTitlesIntoDocument(document); 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; popup._renderContextualContents = function () {
document.getElementById('injection-counter').innerText = amountInjected;
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) { if (Object.keys(groupedInjections).length > 0) {
return; 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, { protectionToggleElement.setAttribute('dir', popup._scriptDirection);
'active': true domainIndicatorElement.innerText = popup._domain;
});
});
}
let injections, injectionOverview, domain; if (popup._requestAnalyzer.whitelistedDomains[popup._domain]) {
injections = backgroundPage.stateManager.tabs[tabs[0].id].injections; let enableProtectionTitle = chrome.i18n.getMessage('enableProtectionTitle');
injectionOverview = {};
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.setAttribute('class', 'button button-toggle active');
protectionToggleElement = document.getElementById('protection-toggle-button'); protectionToggleElement.addEventListener('click', popup._disableProtection);
domainIndicatorElement = document.getElementById('domain-indicator'); protectionToggleElement.setAttribute('title', disableProtectionTitle);
}
if (domain.startsWith(Address.WWW_PREFIX)) { websiteContextElement.setAttribute('class', 'panel');
domain = domain.slice(Address.WWW_PREFIX_LENGTH); };
}
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'); websiteContextElement.append(injectionOverviewElement);
protectionToggleElement.setAttribute('title', enableProtectionTitle); };
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) { popup._determineBackgroundPage = function () {
browser.tabs.remove(tab.id);
});
}
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); return new Promise((resolve) => {
protectionToggleElement.setAttribute('dir', scriptDirection);
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) { popup._amountInjected = items.amountInjected || 0;
browser.tabs.remove(tab.id); 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; groupedInjections[source] = groupedInjections[source] || [];
injectionOverview[injectionSource] = injectionOverview[injectionSource] || []; groupedInjections[source].push(injections[index]);
}
injectionOverview[injectionSource].push({ return groupedInjections;
'path': injection.path, };
'version': injection.version,
'source': injection.source
});
}
let listElement = document.createElement('ul'); popup._createInjectionOverviewElement = function (groupedInjections) {
listElement.setAttribute('class', 'list');
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'); cdn = groupedInjections[source];
listItemElement.setAttribute('class', 'list-item');
badgeElement = document.createElement('span'); injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
badgeElement.setAttribute('class', 'badge'); injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
badgeTextNode = document.createTextNode(cdn.length); injectionOverviewElement.appendChild(injectionGroupHeaderElement);
badgeElement.appendChild(badgeTextNode); injectionOverviewElement.appendChild(injectionGroupElement);
}
cdnName = helpers.determineCdnName(injectionSource); return injectionOverviewElement;
};
cdnNameTextNode = document.createTextNode(cdnName); popup._createInjectionGroupHeaderElement = function (source, cdn) {
listItemElement.appendChild(badgeElement); let injectionGroupHeaderElement, badgeElement, badgeTextNode, cdnNameTextNode;
listItemElement.appendChild(cdnNameTextNode);
listElement.appendChild(listItemElement); injectionGroupHeaderElement = document.createElement('li');
injectionGroupHeaderElement.setAttribute('class', 'list-item');
subListElement = document.createElement('ul'); badgeElement = document.createElement('span');
subListElement.setAttribute('class', 'sublist'); 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, injectionGroupHeaderElement.appendChild(badgeElement);
resourceNameTextNode, sideNoteElement, sideNoteTextNode; injectionGroupHeaderElement.appendChild(cdnNameTextNode);
subListItemElement = document.createElement('li'); return injectionGroupHeaderElement;
subListItemElement.setAttribute('class', 'sublist-item'); };
resourcePathDetails = injection.path.split('/'); popup._createInjectionGroupElement = function (source, cdn) {
resourceFilename = resourcePathDetails[resourcePathDetails.length - 1];
resourceName = helpers.determineResourceName(resourceFilename); let injectionGroupElement;
resourceNameTextNode = document.createTextNode(`- ${resourceName}`); injectionGroupElement = document.createElement('ul');
subListItemElement.appendChild(resourceNameTextNode); injectionGroupElement.setAttribute('class', 'sublist');
sideNoteElement = document.createElement('span'); for (let injection of cdn) {
sideNoteElement.setAttribute('class', 'side-note');
sideNoteTextNode = document.createTextNode(` v${injection.version}`); let injectionElement = popup._createInjectionElement(injection);
injectionGroupElement.appendChild(injectionElement);
}
sideNoteElement.appendChild(sideNoteTextNode); return injectionGroupElement;
subListItemElement.appendChild(sideNoteElement); };
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'); injectionElement = document.createElement('li');
websiteContextElement.append(listElement); 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({ noteTextNode = document.createTextNode(` v${injection.version}`);
'url': chrome.extension.getURL('pages/options/options.html')
});
}
chrome.runtime.openOptionsPage(); noteElement.appendChild(noteTextNode);
return window.close(); 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({ chrome.runtime.getPlatformInfo(function (information) {
'url': 'https://decentraleyes.org/test',
'active': (event.button === 0) if (information.os === chrome.runtime.PlatformOs.ANDROID) {
chrome.tabs.getCurrent(function (tab) {
chrome.tabs.remove(tab.id);
}); });
}
if (event.button === 0) { } else {
window.close(); 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);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment