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

Refactor popup panel logic

parent 3b941ed0
......@@ -20,55 +20,63 @@
var popup = {};
/**
* Initializations
* Private Methods
*/
document.addEventListener('DOMContentLoaded', function () {
popup._renderContents = function () {
let version, optionsButtonElement, scriptDirection;
helpers.insertI18nContentIntoDocument(document);
helpers.insertI18nTitlesIntoDocument(document);
version = helpers.formatVersion(chrome.runtime.getManifest().version);
document.getElementById('version-label').innerText = version;
popup._renderNonContextualContents();
scriptDirection = helpers.determineScriptDirection(navigator.language);
optionsButtonElement = document.getElementById('options-button');
if (popup._backgroundPage !== null) {
helpers.insertI18nContentIntoDocument(document);
helpers.insertI18nTitlesIntoDocument(document);
popup._determineTargetTab()
.then(popup._renderContextualContents);
}
};
chrome.storage.local.get('amountInjected', function (items) {
popup._renderNonContextualContents = function () {
let amountInjected = items.amountInjected || 0;
document.getElementById('injection-counter').innerText = amountInjected;
let versionLabelElement, counterElement, testingUtilityLinkElement, optionsButtonElement;
chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
versionLabelElement = document.getElementById('version-label');
counterElement = document.getElementById('injection-counter');
testingUtilityLinkElement = document.getElementById('testing-utility-link');
optionsButtonElement = document.getElementById('options-button');
chrome.runtime.getBackgroundPage(function (backgroundPage) {
versionLabelElement.innerText = popup._version;
counterElement.innerText = popup._amountInjected;
if (backgroundPage === null) {
return;
}
testingUtilityLinkElement.addEventListener('mouseup', popup._onTestingUtilityLinkClicked);
optionsButtonElement.addEventListener('mouseup', popup._onOptionsButtonClicked);
};
popup.backgroundPage = backgroundPage;
popup._renderContextualContents = function () {
if (backgroundPage.main.operatingSystem === chrome.runtime.PlatformOs.ANDROID) {
let injections, groupedInjections;
browser.tabs.getCurrent().then(function (tab) {
popup._domain = helpers.extractDomainFromUrl(popup._targetTab.url);
browser.tabs.update(tab.id, {
'active': true
});
});
}
popup._requestAnalyzer = popup._backgroundPage.requestAnalyzer;
popup._stateManager = popup._backgroundPage.stateManager;
let injections, injectionOverview, domain;
if (popup._domain !== null) {
injections = backgroundPage.stateManager.tabs[tabs[0].id].injections;
injectionOverview = {};
popup._domain = helpers.normalizeDomain(popup._domain);
popup._renderDomainWhitelistPanel();
}
domain = helpers.extractDomainFromUrl(tabs[0].url);
injections = popup._stateManager.tabs[popup._targetTab.id].injections;
groupedInjections = popup._groupResourceInjections(injections);
if (domain !== null) {
if (Object.keys(groupedInjections).length > 0) {
popup._renderInjectionPanel(groupedInjections);
}
};
popup._renderDomainWhitelistPanel = function () {
let websiteContextElement, protectionToggleElement, domainIndicatorElement;
......@@ -76,91 +84,129 @@ document.addEventListener('DOMContentLoaded', function () {
protectionToggleElement = document.getElementById('protection-toggle-button');
domainIndicatorElement = document.getElementById('domain-indicator');
if (domain.startsWith(Address.WWW_PREFIX)) {
domain = domain.slice(Address.WWW_PREFIX_LENGTH);
}
protectionToggleElement.setAttribute('dir', popup._scriptDirection);
domainIndicatorElement.innerText = popup._domain;
domainIndicatorElement.innerText = domain;
if (popup._requestAnalyzer.whitelistedDomains[popup._domain]) {
if (backgroundPage.requestAnalyzer.whitelistedDomains[domain]) {
let enableProtectionTitle = chrome.i18n.getMessage('enableProtectionTitle');
protectionToggleElement.setAttribute('class', 'button button-toggle');
let enableProtectionTitle = chrome.i18n.getMessage('enableProtectionTitle');
protectionToggleElement.addEventListener('click', popup._enableProtection);
protectionToggleElement.setAttribute('title', enableProtectionTitle);
protectionToggleElement.addEventListener('click', function () {
} else {
let disableProtectionTitle = chrome.i18n.getMessage('disableProtectionTitle');
backgroundPage.stateManager.deleteDomainFromWhitelist(domain).then(function () {
protectionToggleElement.setAttribute('class', 'button button-toggle active');
protectionToggleElement.addEventListener('click', popup._disableProtection);
protectionToggleElement.setAttribute('title', disableProtectionTitle);
}
chrome.tabs.reload(tabs[0].id);
websiteContextElement.setAttribute('class', 'panel');
};
if (backgroundPage.main.operatingSystem === chrome.runtime.PlatformOs.ANDROID) {
popup._renderInjectionPanel = function (groupedInjections) {
return browser.tabs.getCurrent().then(function (tab) {
browser.tabs.remove(tab.id);
});
}
let websiteContextElement, injectionOverviewElement;
return window.close();
});
});
websiteContextElement = document.getElementById('website-context');
injectionOverviewElement = popup._createInjectionOverviewElement(groupedInjections);
} else {
websiteContextElement.append(injectionOverviewElement);
};
protectionToggleElement.setAttribute('class', 'button button-toggle active');
popup._enableProtection = function () {
let disableProtectionTitle = chrome.i18n.getMessage('disableProtectionTitle');
popup._stateManager.deleteDomainFromWhitelist(popup._domain)
.then(popup._onProtectionToggled);
};
protectionToggleElement.setAttribute('title', disableProtectionTitle);
protectionToggleElement.setAttribute('dir', scriptDirection);
popup._disableProtection = function () {
protectionToggleElement.addEventListener('click', function () {
popup._stateManager.addDomainToWhitelist(popup._domain)
.then(popup._onProtectionToggled);
};
backgroundPage.stateManager.addDomainToWhitelist(domain).then(function () {
popup._determineBackgroundPage = function () {
chrome.tabs.reload(tabs[0].id);
return new Promise((resolve) => {
if (backgroundPage.main.operatingSystem === chrome.runtime.PlatformOs.ANDROID) {
chrome.runtime.getBackgroundPage(function (backgroundPage) {
return browser.tabs.getCurrent().then(function (tab) {
browser.tabs.remove(tab.id);
popup._backgroundPage = backgroundPage;
resolve();
});
}
});
};
return window.close();
popup._determineTargetTab = function () {
return new Promise((resolve) => {
chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
popup._targetTab = tabs[0];
resolve();
});
});
}
websiteContextElement.setAttribute('class', 'panel');
}
};
for (let injection in injections) {
popup._determineAmountInjected = function () {
injection = injections[injection];
return new Promise((resolve) => {
let injectionSource = injection.source;
injectionOverview[injectionSource] = injectionOverview[injectionSource] || [];
chrome.storage.local.get('amountInjected', function (items) {
injectionOverview[injectionSource].push({
'path': injection.path,
'version': injection.version,
'source': injection.source
popup._amountInjected = items.amountInjected || 0;
resolve();
});
});
};
popup._groupResourceInjections = function (injections) {
let groupedInjections = {};
for (let index in injections) {
let {source} = injections[index];
groupedInjections[source] = groupedInjections[source] || [];
groupedInjections[source].push(injections[index]);
}
let listElement = document.createElement('ul');
listElement.setAttribute('class', 'list');
return groupedInjections;
};
popup._createInjectionOverviewElement = function (groupedInjections) {
let injectionOverviewElement = document.createElement('ul');
injectionOverviewElement.setAttribute('class', 'list');
for (let source in groupedInjections) {
let injectionGroupHeaderElement, injectionGroupElement, cdn;
cdn = groupedInjections[source];
injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
injectionOverviewElement.appendChild(injectionGroupHeaderElement);
injectionOverviewElement.appendChild(injectionGroupElement);
}
for (let injectionSource in injectionOverview) {
return injectionOverviewElement;
};
let cdn, listItemElement, badgeElement, badgeTextNode, cdnName, cdnNameTextNode, subListElement;
popup._createInjectionGroupHeaderElement = function (source, cdn) {
cdn = injectionOverview[injectionSource];
let injectionGroupHeaderElement, badgeElement, badgeTextNode, cdnNameTextNode;
listItemElement = document.createElement('li');
listItemElement.setAttribute('class', 'list-item');
injectionGroupHeaderElement = document.createElement('li');
injectionGroupHeaderElement.setAttribute('class', 'list-item');
badgeElement = document.createElement('span');
badgeElement.setAttribute('class', 'badge');
......@@ -168,74 +214,90 @@ document.addEventListener('DOMContentLoaded', function () {
badgeTextNode = document.createTextNode(cdn.length);
badgeElement.appendChild(badgeTextNode);
cdnName = helpers.determineCdnName(injectionSource);
cdnNameTextNode = document.createTextNode(helpers.determineCdnName(source));
cdnNameTextNode = document.createTextNode(cdnName);
injectionGroupHeaderElement.appendChild(badgeElement);
injectionGroupHeaderElement.appendChild(cdnNameTextNode);
listItemElement.appendChild(badgeElement);
listItemElement.appendChild(cdnNameTextNode);
return injectionGroupHeaderElement;
};
listElement.appendChild(listItemElement);
popup._createInjectionGroupElement = function (source, cdn) {
subListElement = document.createElement('ul');
subListElement.setAttribute('class', 'sublist');
let injectionGroupElement;
listElement.appendChild(subListElement);
injectionGroupElement = document.createElement('ul');
injectionGroupElement.setAttribute('class', 'sublist');
for (let injection of cdn) {
let subListItemElement, resourcePathDetails, resourceFilename, resourceName,
resourceNameTextNode, sideNoteElement, sideNoteTextNode;
let injectionElement = popup._createInjectionElement(injection);
injectionGroupElement.appendChild(injectionElement);
}
subListItemElement = document.createElement('li');
subListItemElement.setAttribute('class', 'sublist-item');
return injectionGroupElement;
};
resourcePathDetails = injection.path.split('/');
resourceFilename = resourcePathDetails[resourcePathDetails.length - 1];
popup._createInjectionElement = function (injection) {
resourceName = helpers.determineResourceName(resourceFilename);
let injectionElement, filename, name, nameTextNode, noteElement, noteTextNode;
resourceNameTextNode = document.createTextNode(`- ${resourceName}`);
subListItemElement.appendChild(resourceNameTextNode);
injectionElement = document.createElement('li');
injectionElement.setAttribute('class', 'sublist-item');
sideNoteElement = document.createElement('span');
sideNoteElement.setAttribute('class', 'side-note');
filename = helpers.extractFilenameFromPath(injection.path);
name = helpers.determineResourceName(filename);
sideNoteTextNode = document.createTextNode(` v${injection.version}`);
nameTextNode = document.createTextNode(`- ${name}`);
injectionElement.appendChild(nameTextNode);
sideNoteElement.appendChild(sideNoteTextNode);
subListItemElement.appendChild(sideNoteElement);
noteElement = document.createElement('span');
noteElement.setAttribute('class', 'side-note');
subListElement.appendChild(subListItemElement);
}
}
noteTextNode = document.createTextNode(` v${injection.version}`);
if (Object.keys(injectionOverview).length > 0) {
noteElement.appendChild(noteTextNode);
injectionElement.appendChild(noteElement);
let websiteContextElement = document.getElementById('website-context');
websiteContextElement.append(listElement);
}
});
});
});
return injectionElement;
};
chrome.runtime.getPlatformInfo(function (information) {
popup._close = function () {
optionsButtonElement.addEventListener('mouseup', function () {
chrome.runtime.getPlatformInfo(function (information) {
if (information.os === chrome.runtime.PlatformOs.ANDROID) {
return chrome.tabs.create({
'url': chrome.extension.getURL('pages/options/options.html')
chrome.tabs.getCurrent(function (tab) {
chrome.tabs.remove(tab.id);
});
}
chrome.runtime.openOptionsPage();
return window.close();
});
} else {
window.close();
}
});
};
/**
* Event Handlers
*/
document.getElementById('testing-utility-link').addEventListener('mouseup', function (event) {
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) {
......@@ -248,5 +310,24 @@ document.addEventListener('DOMContentLoaded', function () {
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