LocalCDN-Firefox-Chrome-Brave/pages/popup/popup.js

528 lines
17 KiB
JavaScript
Raw Normal View History

2020-02-27 13:45:29 +01:00
/**
* Main Popup Page
2020-06-30 18:41:58 +02:00
* Belongs to LocalCDN (since 2020-02-26)
* (Origin: Decentraleyes)
2020-02-27 13:45:29 +01:00
*
* @author Thomas Rientjes
* @since 2016-08-09
2020-06-30 18:41:58 +02:00
*
* @author nobody
* @since 2020-02-26
*
2020-02-27 13:45:29 +01:00
* @license MPL 2.0
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/.
*/
'use strict';
/**
* Popup
*/
var popup = {};
/**
* Private Methods
*/
popup._renderContents = function () {
helpers.insertI18nContentIntoDocument(document);
helpers.insertI18nTitlesIntoDocument(document);
if (!helpers.insertI18nContentIntoDocument(document)) {
popup._renderLocaleNotice();
}
2020-02-27 13:45:29 +01:00
popup._renderNonContextualContents();
popup._determineTargetTab()
2020-10-17 07:09:30 +02:00
.then(popup._determineDomainAllowlistStatus)
.then(popup._determineStatusManipulateDOM)
2020-02-27 13:45:29 +01:00
.then(popup._determineResourceInjections)
.then(popup._determineNegateHtmlFilterOption)
2020-02-27 13:45:29 +01:00
.then(popup._renderContextualContents);
2020-08-11 07:09:07 +02:00
if (BrowserType.CHROMIUM) {
document.getElementById('div-manipulateDOM').hidden = true;
}
2020-02-27 13:45:29 +01:00
};
popup._renderNonContextualContents = function () {
2020-06-21 08:18:18 +02:00
let versionLabelElement, nameLabelElement, counterElement, testingUtilityLinkElement, optionsButtonElement, donationButtonElement, infoButtonLabel;
2020-02-27 13:45:29 +01:00
versionLabelElement = document.getElementById('version-label');
2020-06-07 17:40:44 +02:00
nameLabelElement = document.getElementById('name-label');
2020-02-27 13:45:29 +01:00
counterElement = document.getElementById('injection-counter');
testingUtilityLinkElement = document.getElementById('testing-utility-link');
optionsButtonElement = document.getElementById('options-button');
2020-05-16 17:40:46 +02:00
donationButtonElement = document.getElementById('donate-button');
2020-05-27 06:22:58 +02:00
infoButtonLabel = document.getElementById('manipulateDOM-indicator');
2020-02-27 13:45:29 +01:00
versionLabelElement.innerText = popup._version;
2020-06-07 17:40:44 +02:00
nameLabelElement.innerText = popup._name;
2020-02-27 13:45:29 +01:00
counterElement.innerText = helpers.formatNumber(popup._amountInjected);
testingUtilityLinkElement.addEventListener('mouseup', popup._onTestingUtilityLinkClicked);
optionsButtonElement.addEventListener('mouseup', popup._onOptionsButtonClicked);
2020-05-16 17:40:46 +02:00
donationButtonElement.addEventListener('mouseup', popup._onDonationButtonClicked);
2020-05-27 06:22:58 +02:00
infoButtonLabel.addEventListener('mouseup', popup._onInfoButtonClicked);
2020-08-11 07:09:07 +02:00
if (popup._statisticsStatus) {
document.getElementById('statistics-button').style.display = 'block';
document.getElementById('statistics-button').addEventListener('mouseup', popup._onStatisticsButtonClicked);
}
2020-02-27 13:45:29 +01:00
};
popup._renderContextualContents = function () {
if (popup._domain !== null) {
2020-10-17 07:09:30 +02:00
popup._renderDomainAllowlistPanel();
2020-02-27 13:45:29 +01:00
}
if (Object.keys(popup._resourceInjections).length > 0) {
2020-02-27 13:45:29 +01:00
popup._renderInjectionPanel(popup._resourceInjections);
}
};
2020-10-17 07:09:30 +02:00
popup._renderDomainAllowlistPanel = function () {
let websiteContextElement, protectionToggleElement, domainIndicatorElement, manipulateDOMToggleElement, manipulateDOMToggleStyle;
2020-02-27 13:45:29 +01:00
websiteContextElement = document.getElementById('website-context');
protectionToggleElement = document.getElementById('protection-toggle-switch');
2020-02-27 13:45:29 +01:00
domainIndicatorElement = document.getElementById('domain-indicator');
protectionToggleElement.setAttribute('dir', popup._scriptDirection);
domainIndicatorElement.innerText = popup._domain;
manipulateDOMToggleElement = document.getElementById('manipulateDOM-toggle-switch');
manipulateDOMToggleStyle = document.getElementById('toggle-switch-manipulateDOM');
2020-10-17 07:09:30 +02:00
if (popup._domainIsAllowlisted === true) {
2020-05-26 20:37:26 +02:00
manipulateDOMToggleElement.disabled = true;
protectionToggleElement.checked = false;
2020-05-26 20:37:26 +02:00
manipulateDOMToggleStyle.setAttribute('class', 'slider-disabled');
protectionToggleElement.addEventListener('click', popup._enableProtection);
2020-02-27 13:45:29 +01:00
} else {
manipulateDOMToggleElement.disabled = false;
manipulateDOMToggleStyle.setAttribute('class', 'slider');
2020-02-27 13:45:29 +01:00
protectionToggleElement.checked = true;
2020-02-27 13:45:29 +01:00
protectionToggleElement.addEventListener('click', popup._disableProtection);
2020-08-11 07:09:07 +02:00
if (popup.negateHtmlFilterList && !popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = true;
manipulateDOMToggleElement.addEventListener('click', popup._enableManipulateDOM);
} else if (!popup.negateHtmlFilterList && !popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = false;
manipulateDOMToggleElement.addEventListener('click', popup._enableManipulateDOM);
2020-08-11 07:09:07 +02:00
} else if (popup.negateHtmlFilterList && popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = false;
manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
2020-08-11 07:09:07 +02:00
} else if (!popup.negateHtmlFilterList && popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = true;
manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
}
2020-02-27 13:45:29 +01:00
}
websiteContextElement.setAttribute('class', 'panel');
};
popup._renderInjectionPanel = function (groupedInjections) {
let websiteContextElement, injectionOverviewElement;
websiteContextElement = document.getElementById('website-context');
injectionOverviewElement = popup._createInjectionOverviewElement(groupedInjections);
injectionOverviewElement.setAttribute('class', 'panel-overflow');
2020-02-27 13:45:29 +01:00
websiteContextElement.append(injectionOverviewElement);
};
popup._enableProtection = function () {
let message = {
2020-10-17 07:09:30 +02:00
topic: 'allowlist:remove-domain',
2020-08-11 07:09:07 +02:00
value: popup._domain,
2020-02-27 13:45:29 +01:00
};
chrome.runtime.sendMessage(message, function () {
2020-05-26 06:44:02 +02:00
popup._onToggled();
2020-02-27 13:45:29 +01:00
});
};
popup._disableProtection = function () {
let message = {
2020-10-17 07:09:30 +02:00
topic: 'allowlist:add-domain',
2020-08-11 07:09:07 +02:00
value: popup._domain,
2020-02-27 13:45:29 +01:00
};
chrome.runtime.sendMessage(message, function () {
2020-05-26 06:44:02 +02:00
popup._onToggled();
2020-02-27 13:45:29 +01:00
});
};
popup._enableManipulateDOM = function () {
let message = {
2020-08-11 07:09:07 +02:00
topic: 'manipulateDOM:add-domain',
value: popup._domain,
};
chrome.runtime.sendMessage(message, function () {
2020-05-26 06:44:02 +02:00
popup._onToggled();
});
};
popup._disableManipulateDOM = function () {
let message = {
2020-08-11 07:09:07 +02:00
topic: 'manipulateDOM:remove-domain',
value: popup._domain,
};
chrome.runtime.sendMessage(message, function () {
2020-05-26 06:44:02 +02:00
popup._onToggled();
});
};
2020-10-17 07:09:30 +02:00
popup._determineDomainAllowlistStatus = function () {
2020-02-27 13:45:29 +01:00
return new Promise((resolve) => {
let message = {
2020-10-17 07:09:30 +02:00
topic: 'domain:fetch-is-allowlisted',
2020-08-11 07:09:07 +02:00
value: popup._domain,
2020-02-27 13:45:29 +01:00
};
chrome.runtime.sendMessage(message, function (response) {
2020-10-17 07:09:30 +02:00
popup._domainIsAllowlisted = response.value;
2020-02-27 13:45:29 +01:00
resolve();
});
});
};
popup._determineStatusManipulateDOM = function () {
return new Promise((resolve) => {
let message = {
2020-08-11 07:09:07 +02:00
topic: 'domain:fetch-is-manipulateDOM',
value: popup._domain,
};
chrome.runtime.sendMessage(message, function (response) {
popup._domainManipulateDOM = response.value;
resolve();
});
});
};
2020-02-27 13:45:29 +01:00
popup._determineResourceInjections = function () {
return new Promise((resolve) => {
let message = {
2020-08-11 07:09:07 +02:00
topic: 'tab:fetch-injections',
value: popup._targetTab.id,
2020-02-27 13:45:29 +01:00
};
chrome.runtime.sendMessage(message, function (response) {
let groupedInjections = popup._groupResourceInjections(response.value);
popup._resourceInjections = groupedInjections;
resolve();
});
});
};
popup._determineTargetTab = function () {
return new Promise((resolve) => {
2020-08-11 07:09:07 +02:00
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
2020-02-27 13:45:29 +01:00
popup._targetTab = tabs[0];
popup._domain = helpers.extractDomainFromUrl(tabs[0].url, true);
resolve();
});
});
};
popup._determineAmountInjected = function () {
return new Promise((resolve) => {
2020-08-30 18:56:36 +02:00
chrome.storage.local.get(Setting.AMOUNT_INJECTED, function (items) {
2020-02-27 13:45:29 +01:00
popup._amountInjected = items.amountInjected || 0;
resolve();
});
});
};
popup._determineNegateHtmlFilterOption = function () {
return new Promise((resolve) => {
2020-08-30 18:56:36 +02:00
storageManager.type.get(Setting.NEGATE_HTML_FILTER_LIST, function (items) {
popup.negateHtmlFilterList = items.negateHtmlFilterList;
resolve();
});
});
};
2020-08-11 07:09:07 +02:00
popup._getStatisticsStatus = function () {
return new Promise((resolve) => {
chrome.storage.local.get(Setting.INTERNAL_STATISTICS, function (items) {
popup._statisticsStatus = items.internalStatistics || false;
resolve();
});
});
};
2020-02-27 13:45:29 +01:00
2020-08-11 07:09:07 +02:00
popup._groupResourceInjections = function (injections) {
2020-02-27 13:45:29 +01:00
let groupedInjections = {};
for (let index in injections) {
2020-08-11 07:09:07 +02:00
let { source } = injections[index];
2020-02-27 13:45:29 +01:00
groupedInjections[source] = groupedInjections[source] || [];
groupedInjections[source].push(injections[index]);
}
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);
2020-02-27 13:45:29 +01:00
injectionOverviewElement.appendChild(injectionGroupHeaderElement);
injectionOverviewElement.appendChild(injectionGroupElement);
2020-05-30 10:04:48 +02:00
}
2020-02-27 13:45:29 +01:00
return injectionOverviewElement;
};
popup._createInjectionGroupHeaderElement = function (source, cdn) {
let injectionGroupHeaderElement, badgeElement, badgeTextNode, cdnNameTextNode;
injectionGroupHeaderElement = document.createElement('li');
injectionGroupHeaderElement.setAttribute('class', 'list-item');
badgeElement = document.createElement('span');
badgeElement.setAttribute('class', 'badge');
badgeTextNode = document.createTextNode(cdn.length);
badgeElement.appendChild(badgeTextNode);
cdnNameTextNode = document.createTextNode(helpers.determineCdnName(source));
injectionGroupHeaderElement.appendChild(badgeElement);
injectionGroupHeaderElement.appendChild(cdnNameTextNode);
return injectionGroupHeaderElement;
};
popup._createInjectionGroupElement = function (source, cdn) {
2020-05-30 10:04:48 +02:00
let injectionGroupElement;
2020-02-27 13:45:29 +01:00
// Filter duplicates
let bundle = [];
for (let injection of cdn) {
bundle.push(injection);
}
let filtered = popup._filterDuplicates(bundle, 'bundle');
2020-02-27 13:45:29 +01:00
injectionGroupElement = document.createElement('ul');
injectionGroupElement.setAttribute('class', 'sublist');
for (let injection of filtered) {
let injectionElement = popup._createInjectionElement(injection);
injectionGroupElement.appendChild(injectionElement);
2020-05-26 20:37:26 +02:00
}
2020-05-30 10:04:48 +02:00
2020-02-27 13:45:29 +01:00
return injectionGroupElement;
};
2020-06-21 07:35:52 +02:00
popup._createInjectionElement = function (injection) {
2020-02-27 13:45:29 +01:00
let injectionElement, filename, name, nameTextNode, noteElement, noteTextNode;
injectionElement = document.createElement('li');
injectionElement.setAttribute('class', 'sublist-item');
2020-02-27 13:45:29 +01:00
filename = helpers.extractFilenameFromPath(injection.path);
// If bundle empty, use filename
2020-08-11 07:09:07 +02:00
if (injection.bundle === '') {
name = helpers.determineResourceName(filename);
} else {
2020-08-11 07:09:07 +02:00
name = injection.bundle + ' (Bundle)';
}
2020-02-27 13:45:29 +01:00
nameTextNode = document.createTextNode(`- ${name}`);
injectionElement.appendChild(nameTextNode);
if (injection.versionRequested !== null) {
noteElement = document.createElement('span');
noteElement.setAttribute('class', 'side-note');
2020-08-09 12:39:00 +02:00
let versionNode;
2020-07-31 11:03:27 +02:00
if (injection.versionRequested === undefined || injection.versionDelivered === undefined) {
versionNode = '';
} else if (injection.versionRequested === injection.versionDelivered) {
versionNode = ` v${injection.versionRequested}`;
} else if (injection.versionRequested === 'beta') {
versionNode = ` ${injection.versionRequested}`;
2020-08-11 07:09:07 +02:00
} else if (injection.versionRequested !== 'latest') {
versionNode = ` (v${injection.versionRequested} » v${injection.versionDelivered})`;
} else if (injection.versionRequested === 'latest') {
versionNode = ` v${injection.versionDelivered}`;
2020-08-09 12:39:00 +02:00
} else {
2020-08-11 07:09:07 +02:00
versionNode = '';
}
2020-04-05 08:55:04 +02:00
noteTextNode = document.createTextNode(versionNode);
noteElement.appendChild(noteTextNode);
injectionElement.appendChild(noteElement);
}
2020-02-27 13:45:29 +01:00
return injectionElement;
};
2020-08-11 07:09:07 +02:00
popup._filterDuplicates = function (array, key) {
2020-05-26 20:37:26 +02:00
/**
* Function to remove duplicates from an array, depending on 'key'.
* Ignore empty values of the 'key'
*
*/
let filtered = array
2020-08-11 07:09:07 +02:00
.map((e) => e[key])
.map((value, index, newArray) => (value != '' ? newArray.indexOf(value) === index && index : index))
.filter((e) => array[e])
.map((e) => array[e]);
2020-02-27 13:45:29 +01:00
2020-05-26 20:37:26 +02:00
return filtered;
2020-02-27 13:45:29 +01:00
};
popup._renderLocaleNotice = function () {
let localeNoticeElement, nameTextNode;
localeNoticeElement = document.getElementById('popup-incomplete-translation');
localeNoticeElement.setAttribute('class', 'notice notice-default');
localeNoticeElement.addEventListener('mouseup', popup._onIncompleteTranslation);
nameTextNode = document.createTextNode('Translation is incomplete. You want to help on Weblate?');
localeNoticeElement.appendChild(nameTextNode);
localeNoticeElement.addEventListener('mouseup', popup._onIncompleteTranslation);
};
2020-05-26 20:37:26 +02:00
2020-08-11 07:09:07 +02:00
2020-02-27 13:45:29 +01:00
/**
* Event Handlers
*/
popup._onDocumentLoaded = function () {
let manifest, language;
manifest = chrome.runtime.getManifest();
language = navigator.language;
2020-06-07 17:40:44 +02:00
popup._name = manifest.name;
2020-02-27 13:45:29 +01:00
popup._version = helpers.formatVersion(manifest.version);
popup._scriptDirection = helpers.determineScriptDirection(language);
popup._determineAmountInjected()
2020-08-11 07:09:07 +02:00
.then(popup._getStatisticsStatus)
2020-02-27 13:45:29 +01:00
.then(popup._renderContents);
};
popup._onTestingUtilityLinkClicked = function (event) {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
2020-08-11 07:09:07 +02:00
url: 'https://www.localcdn.org/test',
active: event.button === 0,
2020-02-27 13:45:29 +01:00
});
}
if (event.button === 0) {
window.close();
}
};
popup._onOptionsButtonClicked = function () {
chrome.runtime.openOptionsPage();
return window.close();
};
2020-05-16 17:40:46 +02:00
popup._onDonationButtonClicked = function () {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
2020-08-11 07:09:07 +02:00
url: chrome.extension.getURL('pages/donate/donate.html'),
active: event.button === 0,
2020-05-16 17:40:46 +02:00
});
}
if (event.button === 0) {
window.close();
}
};
2020-05-26 06:44:02 +02:00
popup._onToggled = function () {
2020-08-11 07:09:07 +02:00
let bypassCache = typeof browser === 'undefined';
2020-08-11 07:09:07 +02:00
chrome.tabs.reload(popup._targetTab.id, { bypassCache });
2020-05-29 08:18:05 +02:00
setTimeout(function () {
popup._close();
2020-05-29 18:05:46 +02:00
}, 200);
};
2020-05-26 20:37:26 +02:00
popup._close = function () {
chrome.runtime.getPlatformInfo(function (information) {
if (information.os === chrome.runtime.PlatformOs.ANDROID) {
chrome.tabs.getCurrent(function (tab) {
chrome.tabs.remove(tab.id);
});
} else {
window.close();
}
});
};
2020-05-27 06:22:58 +02:00
popup._onInfoButtonClicked = function () {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
2020-09-21 22:45:54 +02:00
url: chrome.extension.getURL('pages/help/help.html#html-filter'),
2020-08-11 07:09:07 +02:00
active: event.button === 0,
2020-05-27 06:22:58 +02:00
});
}
if (event.button === 0) {
window.close();
}
};
popup._onIncompleteTranslation = function () {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
2020-08-11 07:09:07 +02:00
url: 'https://hosted.weblate.org/projects/localcdn/',
active: event.button === 0,
});
}
if (event.button === 0) {
window.close();
}
};
2020-05-26 20:37:26 +02:00
2020-08-11 07:09:07 +02:00
popup._onStatisticsButtonClicked = function () {
if (event.button === 0 || event.button === 1) {
chrome.tabs.create({
url: chrome.extension.getURL('pages/statistics/statistics.html'),
active: event.button === 0,
});
}
if (event.button === 0) {
window.close();
}
};
2020-02-27 13:45:29 +01:00
/**
* Initializations
*/
popup.negateHtmlFilterList = false;
2020-08-11 07:09:07 +02:00
popup._statisticsStatus = false;
2020-02-27 13:45:29 +01:00
document.addEventListener('DOMContentLoaded', popup._onDocumentLoaded);