filippodb
/
LocalCDN-Firefox-Chrome-Brave
mirror of https://codeberg.org/nobody/LocalCDN.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Options page restructured

This commit is contained in:
nobody 2021-02-21 19:28:18 +01:00
parent 9cee50e5ae
commit c59006ae95
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
8 changed files with 578 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/internal/rule-generator.js
View File

@ -30,7 +30,7 @@ ruleGenerator.openRuleSet = function ({target}) {
let urls, key, textArea, btnCopy, content;
urls = mappings.cdn;
key = target.getAttribute('data-option');
key = target.getAttribute('data-ruleset');
textArea = document.getElementById('generated-rules');
btnCopy = document.getElementById('button-copy-rule-set');
content = '';

96
pages/options/options-advanced.js Normal file
View File

@ -0,0 +1,96 @@
/**
* Options Page (Advanced)
* Belongs to LocalCDN
*
* @author nobody
* @since 2021-02-19
*
* @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';
/**
* Options (Advanced)
*/
var optionsAdvanced = {};
/**
* Private Methods
*/
//
optionsAdvanced._renderAdvancedSection = function (optionValue) {
if (optionValue === true) {
document.getElementById('div-domains-allowlist-google-fonts').style.display = 'block';
} else {
document.getElementById('div-domains-allowlist-google-fonts').style.display = 'none';
}
};
optionsAdvanced._renderHtmlFilterSection = function (optionValue) {
if (optionValue === true) {
document.getElementById('html-filter-domains-title-include').style.display = 'none';
document.getElementById('html-filter-domains-title-exclude').style.display = 'block';
} else {
document.getElementById('html-filter-domains-title-include').style.display = 'block';
document.getElementById('html-filter-domains-title-exclude').style.display = 'none';
}
};
optionsAdvanced.preSelectBlockGoogleFonts = function (value) {
if (value) {
document.getElementById('div-domains-allowlist-google-fonts').style.display = 'block';
} else {
document.getElementById('div-domains-allowlist-google-fonts').style.display = 'none';
}
};
optionsAdvanced.init = function (opt) {
let blockMissing, blockGoogleFonts, allowedDomainsGoogleFonts, logging, domainsManipulateDOM, negateHtmlFilterList;
if (BrowserType.CHROMIUM) {
document.getElementById('html-filter-div').style.display = 'none';
document.getElementById('block-google-fonts').style.display = 'none';
}
document.getElementById('last-mapping-update').textContent += ` ${mappings.lastMappingUpdate}`;
blockMissing = options.getOptionElement(Setting.BLOCK_MISSING);
blockMissing.addEventListener('change', options.onOptionChanged);
blockMissing.checked = opt[Setting.BLOCK_MISSING];
blockGoogleFonts = options.getOptionElement(Setting.BLOCK_GOOGLE_FONTS);
blockGoogleFonts.addEventListener('change', options.onOptionChanged);
blockGoogleFonts.checked = opt[Setting.BLOCK_GOOGLE_FONTS];
allowedDomainsGoogleFonts = options.getOptionElement(Setting.ALLOWED_DOMAINS_GOOGLE_FONTS);
allowedDomainsGoogleFonts.addEventListener('keyup', options.onOptionChanged);
allowedDomainsGoogleFonts.value = opt[Setting.ALLOWED_DOMAINS_GOOGLE_FONTS];
logging = options.getOptionElement(Setting.LOGGING);
logging.addEventListener('change', options.onOptionChanged);
logging.checked = opt[Setting.LOGGING];
domainsManipulateDOM = options.getOptionElement(Setting.DOMAINS_MANIPULATE_DOM);
domainsManipulateDOM.addEventListener('keyup', options.onOptionChanged);
domainsManipulateDOM.value = opt[Setting.DOMAINS_MANIPULATE_DOM];
negateHtmlFilterList = options.getOptionElement(Setting.NEGATE_HTML_FILTER_LIST);
negateHtmlFilterList.addEventListener('change', options.onOptionChanged);
negateHtmlFilterList.checked = opt[Setting.NEGATE_HTML_FILTER_LIST];
document.getElementById('generate-ublock-rules').addEventListener('change', ruleGenerator.openRuleSet);
document.getElementById('generate-umatrix-rules').addEventListener('change', ruleGenerator.openRuleSet);
document.getElementById('generate-adguard-rules').addEventListener('change', ruleGenerator.openRuleSet);
document.getElementById('button-copy-rule-set').addEventListener('click', ruleGenerator.copyRuleSet);
document.getElementById('negate-html-filter-list-warning').addEventListener('click', function () { options._onLinkClick(Links.CODEBERG_HTML_FILTER); });
document.getElementById('ruleset-help').addEventListener('click', function () { options._onLinkClick(Links.CODEBERG_RULESET); });
};

61
pages/options/options-basic.js Normal file
View File

@ -0,0 +1,61 @@
/**
* Options Page (Basic)
* Belongs to LocalCDN
*
* @author nobody
* @since 2021-02-19
*
* @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';
/**
* Options (Basic)
*/
var optionsBasic = {};
/**
* Private Methods
*/
optionsBasic.init = function (opt) {
let showIconBadge, updateNotification, disablePrefetch, stripMetadata, internalStatistics,
hideDonationButton, allowlistedDomains;
showIconBadge = options.getOptionElement(Setting.SHOW_ICON_BADGE);
showIconBadge.addEventListener('change', options.onOptionChanged);
showIconBadge.checked = opt[Setting.SHOW_ICON_BADGE];
updateNotification = options.getOptionElement(Setting.UPDATE_NOTIFICATION);
updateNotification.addEventListener('change', options.onOptionChanged);
updateNotification.value = opt[Setting.UPDATE_NOTIFICATION];
disablePrefetch = options.getOptionElement(Setting.DISABLE_PREFETCH);
disablePrefetch.addEventListener('change', options.onOptionChanged);
disablePrefetch.checked = opt[Setting.DISABLE_PREFETCH];
stripMetadata = options.getOptionElement(Setting.STRIP_METADATA);
stripMetadata.addEventListener('change', options.onOptionChanged);
stripMetadata.checked = opt[Setting.STRIP_METADATA];
internalStatistics = options.getOptionElement(Setting.INTERNAL_STATISTICS);
internalStatistics.addEventListener('change', options.onOptionChanged);
internalStatistics.checked = true;// opt[Setting.INTERNAL_STATISTICS];
hideDonationButton = options.getOptionElement(Setting.HIDE_DONATION_BUTTON);
hideDonationButton.addEventListener('change', options.onOptionChanged);
hideDonationButton.checked = opt[Setting.HIDE_DONATION_BUTTON];
allowlistedDomains = options.getOptionElement(Setting.ALLOWLISTED_DOMAINS);
allowlistedDomains.addEventListener('keyup', options.onOptionChanged);
allowlistedDomains.value = opt[Setting.ALLOWLISTED_DOMAINS];
};

120
pages/options/options-info.js Normal file
View File

@ -0,0 +1,120 @@
/**
* Options Page (Info)
* Belongs to LocalCDN
*
* @author nobody
* @since 2021-02-19
*
* @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';
/**
* Options (Info)
*/
var optionsInfo = {};
/**
* Private Methods
*/
optionsInfo._renderCdnFrameworkSection = function () {
let unsupportedFrameworks, btnCDNs, btnFrameworks;
unsupportedFrameworks = 0;
optionsInfo._listOfFrameworks = {};
btnCDNs = document.getElementById('cdn');
btnCDNs.value = 'CDNs: ';
btnFrameworks = document.getElementById('framework');
btnFrameworks.value = 'Frameworks: ';
Object.values(Object.values(resources)).forEach((element) => {
let path = Object.values(element)[0];
path = path.split('/');
optionsInfo._listOfFrameworks[path[1]] = true;
});
if (BrowserType.CHROMIUM) {
// Chromium based browser does not support Google Material Icons and Font Awesome
document.getElementById('unsupported-frameworks').style.display = 'block';
unsupportedFrameworks = 2;
}
optionsInfo._createList('cdn');
document.getElementById('cdn').classList.add('btns-active');
btnFrameworks.addEventListener('click', optionsInfo._btnCreateList);
btnCDNs.addEventListener('click', optionsInfo._btnCreateList);
// Reduce CDNs by 3, because loli.net includes = cdn.css.net, cdnjs.loli.net, ajax.loli.net, fonts.loli.net
btnCDNs.value += Object.keys(mappings.cdn).length - 3;
btnFrameworks.value += Object.keys(optionsInfo._listOfFrameworks).length - unsupportedFrameworks;
};
optionsInfo._renderLinkSection = function () {
/* eslint-disable brace-style*/
document.getElementById('btn-info-tab').addEventListener('click', options._changeTab);
document.getElementById('link-welcome-page').addEventListener('click', function () { options._onLinkClick(Links.WELCOME); });
document.getElementById('link-changelog').addEventListener('click', function () { options._onLinkClick(Links.CHANGELOG); });
document.getElementById('link-donate').addEventListener('click', function () { options._onLinkClick(Links.DONATE); });
document.getElementById('link-faq').addEventListener('click', function () { options._onLinkClick(Links.FAQ); });
document.getElementById('link-statistic').addEventListener('click', function () { options._onLinkClick(Links.STATISTICS); });
/* eslint-enable brace-style*/
};
optionsInfo._btnCreateList = function ({target}) {
if (target.id === 'cdn') {
document.getElementById('cdn').classList.add('btns-active');
document.getElementById('framework').classList.remove('btns-active');
} else {
document.getElementById('cdn').classList.remove('btns-active');
document.getElementById('framework').classList.add('btns-active');
}
optionsInfo._createList(target.id);
};
optionsInfo._createList = function (type) {
let textArea, list;
textArea = document.getElementById('generated-list');
textArea.value = '';
if (type === 'cdn') {
list = Object.keys(mappings.cdn);
} else if (type === 'framework') {
list = Object.keys(optionsInfo._listOfFrameworks);
} else {
return;
}
list.forEach((elem) => {
if (!(BrowserType.CHROMIUM && (elem === 'fontawesome' || elem === 'google-material-design-icons'))) {
textArea.value += `${elem}\n`;
}
});
};
/**
* Initializations
*/
optionsInfo._listOfFrameworks = {};
optionsInfo._listOfCDNs = {};
optionsInfo.init = function () {
optionsInfo._renderCdnFrameworkSection();
optionsInfo._renderLinkSection();
};

198
pages/options/options-other.js Normal file
View File

@ -0,0 +1,198 @@
/**
* Options Page (Other)
* Belongs to LocalCDN
*
* @author nobody
* @since 2021-02-19
*
* @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';
/**
* Options (Other)
*/
var optionsOther = {};
/**
* Private Methods
*/
optionsOther._renderIconSection = function (opt) {
let url, bgColor, txtColor;
if (!chrome.browserAction.setIcon) {
document.getElementById('icon-style-div').style.display = 'none';
} else {
let selectedIcon = opt.selectedIcon;
if (selectedIcon === 'Default') {
document.getElementById('icon-default').checked = true;
} else if (selectedIcon === 'Grey') {
document.getElementById('icon-grey').checked = true;
} else if (selectedIcon === 'Light') {
document.getElementById('icon-light').checked = true;
}
url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
document.getElementById('icon-badge-preview').src = url;
bgColor = opt.badgeColor || '#4A826C';
txtColor = opt.badgeTextColor || '#FFFFFF';
document.getElementById('counter-preview-badge').style.backgroundColor = bgColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = bgColor;
document.getElementById('badged-background-color').value = bgColor;
document.getElementById('counter-preview-badge').style.color = txtColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = txtColor;
document.getElementById('badged-text-color').value = txtColor;
document.getElementById('badged-background-color').addEventListener('keyup', optionsOther._onChangedHexColor);
document.getElementById('badged-text-color').addEventListener('keyup', optionsOther._onChangedHexColor);
document.getElementById('restore-background-color').addEventListener('click', optionsOther._setDefaultColor);
document.getElementById('restore-text-color').addEventListener('click', optionsOther._setDefaultColor);
optionsOther._colorPicker();
}
};
optionsOther._renderStorageSection = function (opt) {
document.getElementById('sync-help').addEventListener('click', function () { options._onLinkClick(`${Links.FAQ}#sync`); });
document.getElementById('storage-type-local').addEventListener('change', optionsOther._onStorageOptionChanged);
document.getElementById('storage-type-sync').addEventListener('change', optionsOther._onStorageOptionChanged);
document.getElementById('export-data').addEventListener('click', storageManager.export);
document.getElementById('import-data').addEventListener('click', storageManager.startImportFilePicker);
document.getElementById('import-file-picker').addEventListener('change', storageManager.handleImportFilePicker);
optionsOther._preSelectStorage(opt.storageType);
};
optionsOther._setIcon = function (optionValue) {
wrappers.setIcon({'path': optionValue}, 'Enabled');
let url = chrome.runtime.getURL(`icons/action/${optionValue.toLowerCase()}/icon38-default.png`);
document.getElementById('icon-badge-preview').src = url;
};
optionsOther._preSelectStorage = function (type) {
if (type === 'local') {
document.getElementById('storage-type-local').checked = true;
optionsOther._storageSize(chrome.storage.local);
} else {
document.getElementById('storage-type-sync').checked = true;
optionsOther._storageSize(chrome.storage.sync);
}
};
optionsOther._onStorageOptionChanged = function ({target}) {
chrome.storage.local.set({
[Setting.STORAGE_TYPE]: target.value,
});
if (target.value === 'local') {
storageManager.migrateData('local');
optionsOther._storageSize(chrome.storage.local);
} else {
storageManager.migrateData('sync');
optionsOther._storageSize(chrome.storage.sync);
}
};
optionsOther._storageSize = function (type) {
return new Promise((resolve) => {
type.get(null, function (items) {
let value = new TextEncoder().encode(Object.entries(items)
.map(([key, value]) => key + JSON.stringify(value))
.join('')).length;
value /= 1000;
// document.getElementById('storage-size').textContent = `${value.toLocaleString()} KB`;
console.log(`${value.toLocaleString()} KB`);
resolve();
});
});
};
optionsOther._colorPicker = function () {
/* eslint-disable no-undef, no-invalid-this */
const badgeBackgroundColor = new CP(document.getElementById('badged-background-color'));
badgeBackgroundColor.on('change', function (r, g, b) {
this.source.value = this.color(r, g, b);
});
badgeBackgroundColor.on('drag', function (r, g, b) {
options._backgroundColor = this.color(r, g, b);
this.source.value = options._backgroundColor;
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
});
const badgeTextColor = new CP(document.getElementById('badged-text-color'));
badgeTextColor.on('change', function (r, g, b) {
this.source.value = this.color(r, g, b);
});
badgeTextColor.on('drag', function (r, g, b) {
options._textColor = this.color(r, g, b);
this.source.value = options._textColor;
wrappers.setBadgeTextColor({'color': options._textColor});
document.getElementById('counter-preview-badge').style.color = options._textColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
});
/* eslint-enable no-undef, no-invalid-this */
};
optionsOther._setDefaultColor = function ({target}) {
if (target.id === 'restore-text-color') {
options._textColor = '#FFFFFF';
wrappers.setBadgeTextColor({'color': options._textColor});
document.getElementById('counter-preview-badge').style.color = options._textColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
document.getElementById('badged-text-color').value = options._textColor;
} else if (target.id === 'restore-background-color') {
options._backgroundColor = '#4A826C';
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
document.getElementById('badged-background-color').value = options._backgroundColor;
}
};
optionsOther._onChangedHexColor = function ({target}) {
if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
target.classList.remove('color-error');
if (target.id === 'badged-text-color') {
options._textColor = target.value;
wrappers.setBadgeTextColor({'color': options._textColor});
document.getElementById('counter-preview-badge').style.color = options._textColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
} else {
options._backgroundColor = target.value;
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
}
} else {
target.classList.add('color-error');
}
};
optionsOther.init = function (opt) {
if (BrowserType.CHROMIUM) {
document.getElementById('div-badged-text-color').style.display = 'none';
}
document.getElementById('icon-default').addEventListener('change', options.onOptionChanged);
document.getElementById('icon-grey').addEventListener('change', options.onOptionChanged);
document.getElementById('icon-light').addEventListener('change', options.onOptionChanged);
optionsOther._renderIconSection(opt);
optionsOther._renderStorageSection(opt);
};
optionsOther._platformSupportIcons = true;

2
pages/options/options.css
View File

@ -389,7 +389,7 @@ body[dir="rtl"] .input-text {
}
.option-links {
list-style-type: disclosure-closed;
list-style-type: none;
margin-top: 0;
padding-top: 2rem;
}

43
pages/options/options.html
View File

@ -19,13 +19,19 @@
<script src="../../modules/internal/wrappers.js"></script>
<script defer src="../../core/resources.js"></script>
<script defer src="../../core/mappings.js"></script>
<script src="options-basic.js"></script>
<script src="options-advanced.js"></script>
<script src="options-other.js"></script>
<script src="options-info.js"></script>
<script src="options.js"></script>
<div class="btn-group">
<input type="button" id="btn-general-tab" class="option-buttons option-buttons-active" data-option="general-tab" data-i18n-content="btnGeneral" value="General"/>
<input type="button" id="btn-advanced-tab" class="option-buttons" data-option="advanced-tab" data-i18n-content="btnAdvanced" value="Advanced"/>
<input type="button" id="btn-export-import-tab" class="option-buttons" data-option="export-import-tab" data-i18n-content="btnOther" value="Other"/>
<input type="button" id="btn-info-tab" class="option-buttons" data-option="info-tab" data-i18n-content="btnInfo" value="Info"/>
<input type="button" id="btn-general-tab" class="option-buttons option-buttons-active" data-option-tab="general-tab" data-i18n-content="btnGeneral" value="General"/>
<input type="button" id="btn-advanced-tab" class="option-buttons" data-option-tab="advanced-tab" data-i18n-content="btnAdvanced" value="Advanced"/>
<input type="button" id="btn-export-import-tab" class="option-buttons" data-option-tab="export-import-tab" data-i18n-content="btnOther" value="Other"/>
<input type="button" id="btn-info-tab" class="option-buttons" data-option-tab="info-tab" data-i18n-content="btnInfo" value="Info"/>
</div>
<div id="general-tab" class="tab-content">
@ -75,22 +81,21 @@
<section class="option">
<div class="title-option">
<label class="b-contain">
<input id="checkbox-internal-statistics" data-option="internalStatistics" type="checkbox">
<input data-option="internalStatistics" type="checkbox">
<span data-i18n-content="internalStatisticsTitle">Internal statistics</span>
<div class="b-input"></div>
</label>
</div>
<!-- TODO: Change if test successful -->
<div class="description-option" data-i18n-content="internalStatisticsDescription">This function is currently in an experimental stage. No data transmission. It's all local on your device.</div>
<div class="description-option" data-i18n-content="internalStatisticsDescription">No data transmission. It's all local on your device.</div>
</section>
</div>
<div class="option-group">
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="allowlistedDomainsTitle">Deactivate LocalCDN for these domains:</div>
<textarea rows="7" id="tf-domains-allowlist" class="input-text without-checkbox" data-option="allowlistedDomains" type="text"></textarea>
<textarea rows="7" id="allowlistedDomains" class="input-text without-checkbox" data-option="allowlistedDomains" type="text"></textarea>
<div class="description-option without-checkbox">
<span data-i18n-content="allowlistedDomainsDescription">Enter domains to disable LocalCDN there. One domain per line.</span><br><br>
<span class="monoblock">domain.com;<br>sub.domain.com;<br>*.wildcard-domain.com;</span>
<span class="monoblock">domain.com<br>sub.domain.com<br>*.wildcard-domain.com</span>
</div>
</section>
</div>
@ -114,7 +119,7 @@
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="blockMissing" type="checkbox">
<input id="blockMissing" data-option="blockMissing" type="checkbox">
<span data-i18n-content="blockMissingTitle">Block requests for missing resources</span>
<div class="b-input"></div>
</label>
@ -125,7 +130,7 @@
<section id="block-google-fonts" class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="blockGoogleFonts" type="checkbox">
<input id="blockGoogleFonts" data-option="blockGoogleFonts" type="checkbox">
<span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
<div class="b-input"></div>
</label>
@ -139,7 +144,7 @@
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="enableLogging" type="checkbox">
<input id="enableLogging" data-option="enableLogging" type="checkbox">
<span data-i18n-content="loggingTitle">Enable logging in browser console</span>
<div class="b-input"></div>
</label>
@ -151,13 +156,13 @@
<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="tf-domains-manipulate-dom" class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text"></textarea>
<textarea rows="7" id="domainsManipulateDOM" 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">
<div class="title-option">
<label class="b-contain">
<input data-option="negateHtmlFilterList" type="checkbox">
<input id="negateHtmlFilterList" data-option="negateHtmlFilterList" type="checkbox">
<span data-i18n-content="negateHtmlFilterListTitle">Invert HTML filter</span>
<div class="b-input"></div>
</label>
@ -183,19 +188,19 @@
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-ublock-rules">uBlock
<input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock">
<input id="generate-ublock-rules" name="rule-sets" data-ruleset="uBlock" type="radio" value="uBlock">
<div class="b-input"></div>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-umatrix-rules">uMatrix
<input id="generate-umatrix-rules" name="rule-sets" data-option="uMatrix" type="radio" value="uMatrix">
<input id="generate-umatrix-rules" name="rule-sets" data-ruleset="uMatrix" type="radio" value="uMatrix">
<div class="b-input"></div>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-adguard-rules">AdGuard
<input id="generate-adguard-rules" name="rule-sets" data-option="AdGuard" type="radio" value="AdGuard">
<input id="generate-adguard-rules" name="rule-sets" data-ruleset="AdGuard" type="radio" value="AdGuard">
<div class="b-input"></div>
</label>
</div>
@ -255,11 +260,11 @@
<section class="option">
<div class="title-option without-checkbox"><span data-i18n-content="headerStorageType">Storage type</span><span id="sync-help" class="options-help-icon"></span></div>
<label class="b-contain storage-type" for="storage-type-local"><span data-i18n-content="labelStorageTypeLocal">Local (recommended)</span>
<input id="storage-type-local" name="storage-type" data-option="storageTypeLocal" type="radio" value="local">
<input id="storage-type-local" name="storage-type" type="radio" value="local">
<div class="b-input"></div>
</label>
<label class="b-contain storage-type" for="storage-type-sync"><span data-i18n-content="labelStorageTypeSync">Sync</span>
<input id="storage-type-sync" name="storage-type" data-option="storageTypeSync" type="radio" value="sync">
<input id="storage-type-sync" name="storage-type" type="radio" value="sync">
<div class="b-input"></div>
</label>
</section>

417
pages/options/options.js
View File

@ -42,25 +42,12 @@ options._renderContents = function () {
options._renderLocaleNotice();
}
if (BrowserType.CHROMIUM) {
document.getElementById('html-filter-div').style.display = 'none';
document.getElementById('block-google-fonts').style.display = 'none';
document.getElementById('div-badged-text-color').style.display = 'none';
}
if (!chrome.browserAction.setIcon) {
document.getElementById('icon-style-div').style.display = 'none';
options._platformSupportIcons = false;
}
options._renderInfoPanel();
document.getElementById('label-version').textContent = chrome.runtime.getManifest().version;
};
options._renderOptionsPanel = function () {
let allowlistedDomains, domainAllowlist, elements, htmlFilterDomains, domainHtmlFilter,
googleFontsDomains, domainAllowedGoogleFonts, url, bgColor, txtColor;
Object.assign(options._optionValues, {[Setting.INTERNAL_STATISTICS]: options._internalStatistics});
let allowlistedDomains, domainAllowlist, htmlFilterDomains, domainHtmlFilter,
googleFontsDomains, domainAllowedGoogleFonts, basic, advanced, other;
allowlistedDomains = options._optionValues.allowlistedDomains;
domainAllowlist = options._serializeAllowlistedDomains(allowlistedDomains);
@ -71,26 +58,31 @@ options._renderOptionsPanel = function () {
googleFontsDomains = options._optionValues.allowedDomainsGoogleFonts;
domainAllowedGoogleFonts = options._serializeAllowlistedDomains(googleFontsDomains);
elements = options._optionElements;
Object.assign(elements, {[Setting.INTERNAL_STATISTICS]: document.getElementById('checkbox-internal-statistics')});
basic = {
'showIconBadge': options._optionValues.showIconBadge,
'updateNotification': options._optionValues.updateNotification,
'disablePrefetch': options._optionValues.disablePrefetch,
'stripMetadata': options._optionValues.stripMetadata,
'internalStatistics': options._internalStatistics,
'allowlistedDomains': domainAllowlist
};
Object.assign(elements, {[Setting.SELECTED_ICON]: document.getElementsByName('selected-icon')});
advanced = {
'blockMissing': options._optionValues.blockMissing,
'blockGoogleFonts': options._optionValues.blockGoogleFonts,
'allowedDomainsGoogleFonts': domainAllowedGoogleFonts,
'enableLogging': options._optionValues.enableLogging,
'domainsManipulateDOM': domainHtmlFilter,
'negateHtmlFilterList': options._optionValues.negateHtmlFilterList
};
elements.showIconBadge.checked = options._optionValues.showIconBadge;
elements.blockMissing.checked = options._optionValues.blockMissing;
elements.disablePrefetch.checked = options._optionValues.disablePrefetch;
elements.stripMetadata.checked = options._optionValues.stripMetadata;
elements.updateNotification.value = options._optionValues.updateNotification;
elements.enableLogging.checked = options._optionValues.enableLogging;
elements.allowlistedDomains.value = domainAllowlist;
elements.domainsManipulateDOM.value = domainHtmlFilter;
elements.negateHtmlFilterList.checked = options._optionValues.negateHtmlFilterList;
elements.blockGoogleFonts.checked = options._optionValues.blockGoogleFonts;
elements.internalStatistics.checked = options._optionValues.internalStatistics;
elements.allowedDomainsGoogleFonts.value = domainAllowedGoogleFonts;
elements.storageType = options._optionValues.storageType;
other = {
'selectedIcon': options._optionValues.selectedIcon,
'badgeColor': options._optionValues.badgeColor,
'badgeTextColor': options._optionValues.badgeTextColor,
'storageType': options._optionValues.storageType
};
options._registerOptionChangedEventListeners(elements);
options._registerMiscellaneousEventListeners();
if (options._optionValues.blockMissing === true) {
@ -101,87 +93,14 @@ options._renderOptionsPanel = function () {
options._renderLocaleNotice();
}
if (elements.blockGoogleFonts.checked) {
document.getElementById('div-domains-allowlist-google-fonts').style.display = 'block';
} else {
document.getElementById('div-domains-allowlist-google-fonts').style.display = 'none';
}
if (elements.storageType === 'local') {
document.getElementById('storage-type-local').checked = true;
} else {
document.getElementById('storage-type-sync').checked = true;
}
if (options._platformSupportIcons) {
let selectedIcon = options._optionValues.selectedIcon;
if (selectedIcon === 'Default') {
document.getElementById('icon-default').checked = true;
} else if (selectedIcon === 'Grey') {
document.getElementById('icon-grey').checked = true;
} else if (selectedIcon === 'Light') {
document.getElementById('icon-light').checked = true;
}
url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
document.getElementById('icon-badge-preview').src = url;
bgColor = options._optionValues.badgeColor || '#4A826C';
txtColor = options._optionValues.badgeTextColor || '#FFFFFF';
document.getElementById('counter-preview-badge').style.backgroundColor = bgColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = bgColor;
document.getElementById('badged-background-color').value = bgColor;
document.getElementById('counter-preview-badge').style.color = txtColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = txtColor;
document.getElementById('badged-text-color').value = txtColor;
}
document.getElementById('last-mapping-update').textContent += ` ${mappings.lastMappingUpdate}`;
document.getElementById('negate-html-filter-list-warning').addEventListener('click', function () {
options._onLinkClick(Links.CODEBERG_HTML_FILTER);
});
document.getElementById('link-welcome-page').addEventListener('click', function () {
options._onLinkClick(Links.WELCOME);
});
document.getElementById('link-changelog').addEventListener('click', function () {
options._onLinkClick(Links.CHANGELOG);
});
document.getElementById('link-donate').addEventListener('click', function () {
options._onLinkClick(Links.DONATE);
});
document.getElementById('link-faq').addEventListener('click', function () {
options._onLinkClick(Links.FAQ);
});
document.getElementById('ruleset-help').addEventListener('click', function () {
options._onLinkClick(Links.CODEBERG_RULESET);
});
document.getElementById('sync-help').addEventListener('click', function () {
options._onLinkClick(`${Links.FAQ}#sync`);
});
document.getElementById('link-statistic').addEventListener('click', function () {
options._onLinkClick(Links.STATISTICS);
});
optionsBasic.init(basic);
optionsAdvanced.init(advanced);
optionsOther.init(other);
optionsInfo.init();
document.getElementById('btn-general-tab').addEventListener('click', options._changeTab);
document.getElementById('btn-advanced-tab').addEventListener('click', options._changeTab);
document.getElementById('btn-export-import-tab').addEventListener('click', options._changeTab);
document.getElementById('btn-info-tab').addEventListener('click', options._changeTab);
document.getElementById('storage-type-local').addEventListener('change', options._onStorageOptionChanged);
document.getElementById('storage-type-sync').addEventListener('change', options._onStorageOptionChanged);
document.getElementById('export-data').addEventListener('click', storageManager.export);
document.getElementById('import-data').addEventListener('click', storageManager.startImportFilePicker);
document.getElementById('import-file-picker').addEventListener('change', storageManager.handleImportFilePicker);
if (options._platformSupportIcons) {
document.getElementById('badged-background-color').addEventListener('keyup', options._onChangedHexColor);
document.getElementById('badged-text-color').addEventListener('keyup', options._onChangedHexColor);
}
document.getElementById('restore-background-color').addEventListener('click', options._setDefaultColor);
document.getElementById('restore-text-color').addEventListener('click', options._setDefaultColor);
};
options._renderBlockMissingNotice = function () {
@ -199,42 +118,31 @@ options._renderLocaleNotice = function () {
localeNoticeElement.setAttribute('class', 'notice notice-default');
};
options._registerOptionChangedEventListeners = function (elements) {
elements.showIconBadge.addEventListener('change', options._onOptionChanged);
elements.blockMissing.addEventListener('change', options._onOptionChanged);
elements.disablePrefetch.addEventListener('change', options._onOptionChanged);
elements.stripMetadata.addEventListener('change', options._onOptionChanged);
elements.enableLogging.addEventListener('change', options._onOptionChanged);
elements.updateNotification.addEventListener('change', options._onOptionChanged);
elements.allowlistedDomains.addEventListener('keyup', options._onOptionChanged);
elements.domainsManipulateDOM.addEventListener('keyup', options._onOptionChanged);
elements.negateHtmlFilterList.addEventListener('change', options._onOptionChanged);
elements.blockGoogleFonts.addEventListener('change', options._onOptionChanged);
elements.selectedIcon[0].addEventListener('change', options._onOptionChanged);
elements.selectedIcon[1].addEventListener('change', options._onOptionChanged);
elements.selectedIcon[2].addEventListener('change', options._onOptionChanged);
elements.ruleSets[0].addEventListener('change', ruleGenerator.openRuleSet);
elements.ruleSets[1].addEventListener('change', ruleGenerator.openRuleSet);
elements.ruleSets[2].addEventListener('change', ruleGenerator.openRuleSet);
elements.copyRuleSet.addEventListener('click', ruleGenerator.copyRuleSet);
elements.internalStatistics.addEventListener('change', options._onOptionChanged);
elements.allowedDomainsGoogleFonts.addEventListener('keyup', options._onOptionChanged);
};
options._registerMiscellaneousEventListeners = function () {
let blockMissingButtonElement = document.getElementById('button-block-missing');
let blockMissingButtonElement, changeEvent, optionBlockMissing;
blockMissingButtonElement = document.getElementById('button-block-missing');
changeEvent = new Event('change');
optionBlockMissing = options.getOptionElement('blockMissing');
blockMissingButtonElement.addEventListener('click', function () {
let changeEvent = new Event('change');
options._optionElements.blockMissing.checked = false;
options._optionElements.blockMissing.dispatchEvent(changeEvent);
optionBlockMissing.checked = false;
optionBlockMissing.dispatchEvent(changeEvent);
});
};
options._determineOptionValues = function () {
return new Promise((resolve) => {
let optionKeys = Object.keys(options._optionElements);
let nodeList, optionList, optionKeys;
nodeList = document.querySelectorAll('[data-option]');
optionList = {};
for (let element of nodeList) {
optionList[element.getAttribute('data-option')] = true;
}
optionKeys = Object.keys(optionList);
storageManager.type.get(optionKeys, function (items) {
options._optionValues = items;
@ -253,33 +161,10 @@ options._determineLocalOptionValues = function () {
});
};
options._getOptionElement = function (optionKey) {
options.getOptionElement = function (optionKey) {
return document.querySelector(`[data-option=${optionKey}]`);
};
options._getOptionElements = function () {
let optionElements = {
[Setting.SHOW_ICON_BADGE]: options._getOptionElement(Setting.SHOW_ICON_BADGE),
[Setting.BLOCK_MISSING]: options._getOptionElement(Setting.BLOCK_MISSING),
[Setting.DISABLE_PREFETCH]: options._getOptionElement(Setting.DISABLE_PREFETCH),
[Setting.STRIP_METADATA]: options._getOptionElement(Setting.STRIP_METADATA),
[Setting.ALLOWLISTED_DOMAINS]: options._getOptionElement(Setting.ALLOWLISTED_DOMAINS),
[Setting.UPDATE_NOTIFICATION]: options._getOptionElement(Setting.UPDATE_NOTIFICATION),
[Setting.LOGGING]: options._getOptionElement(Setting.LOGGING),
['ruleSets']: document.getElementsByName('rule-sets'),
['copyRuleSet']: document.getElementById('button-copy-rule-set'),
[Setting.NEGATE_HTML_FILTER_LIST]: options._getOptionElement(Setting.NEGATE_HTML_FILTER_LIST),
[Setting.DOMAINS_MANIPULATE_DOM]: options._getOptionElement(Setting.DOMAINS_MANIPULATE_DOM),
[Setting.BLOCK_GOOGLE_FONTS]: options._getOptionElement(Setting.BLOCK_GOOGLE_FONTS),
[Setting.SELECTED_ICON]: options._getOptionElement(Setting.SELECTED_ICON),
[Setting.ALLOWED_DOMAINS_GOOGLE_FONTS]: options._getOptionElement(Setting.ALLOWED_DOMAINS_GOOGLE_FONTS),
[Setting.STORAGE_TYPE]: options._getOptionElement(Setting.STORAGE_TYPE),
[Setting.BADGE_COLOR]: options._getOptionElement(Setting.BADGE_COLOR),
[Setting.BADGE_TEXT_COLOR]: options._getOptionElement(Setting.BADGE_TEXT_COLOR)
};
return optionElements;
};
options._configureLinkPrefetching = function (value) {
if (value === false) {
// Restore default values of related preference values.
@ -321,118 +206,6 @@ options._parseDomainAllowlist = function (domainAllowlist) {
return allowlistedDomains;
};
options._renderInfoPanel = function () {
let unsupportedFrameworks, btnCDNs, btnFrameworks;
unsupportedFrameworks = 0;
options._listOfFrameworks = {};
btnCDNs = document.getElementById('cdn');
btnCDNs.value = 'CDNs: ';
btnFrameworks = document.getElementById('framework');
btnFrameworks.value = 'Frameworks: ';
Object.values(Object.values(resources)).forEach((element) => {
let path = Object.values(element)[0];
path = path.split('/');
options._listOfFrameworks[path[1]] = true;
});
if (BrowserType.CHROMIUM) {
// Chromium based browser does not support Google Material Icons and Font Awesome
document.getElementById('unsupported-frameworks').style.display = 'block';
unsupportedFrameworks = 2;
}
options._createList('cdn');
document.getElementById('cdn').classList.add('btns-active');
btnFrameworks.addEventListener('click', options._btnCreateList);
btnCDNs.addEventListener('click', options._btnCreateList);
// Reduce CDNs by 3, because loli.net includes = cdn.css.net, cdnjs.loli.net, ajax.loli.net, fonts.loli.net
btnCDNs.value += Object.keys(mappings.cdn).length - 3;
btnFrameworks.value += Object.keys(options._listOfFrameworks).length - unsupportedFrameworks;
};
options._btnCreateList = function ({target}) {
if (target.id === 'cdn') {
document.getElementById('cdn').classList.add('btns-active');
document.getElementById('framework').classList.remove('btns-active');
} else {
document.getElementById('cdn').classList.remove('btns-active');
document.getElementById('framework').classList.add('btns-active');
}
options._createList(target.id);
};
options._createList = function (type) {
let textArea, list;
textArea = document.getElementById('generated-list');
textArea.value = '';
if (type === 'cdn') {
list = Object.keys(mappings.cdn);
} else if (type === 'framework') {
list = Object.keys(options._listOfFrameworks);
} else {
return;
}
list.forEach((elem) => {
if (!(BrowserType.CHROMIUM && (elem === 'fontawesome' || elem === 'google-material-design-icons'))) {
textArea.value += `${elem}\n`;
}
});
};
options._colorPicker = function () {
/* eslint-disable no-undef, no-invalid-this */
const badgeBackgroundColor = new CP(document.getElementById('badged-background-color'));
badgeBackgroundColor.on('change', function (r, g, b) {
this.source.value = this.color(r, g, b);
});
badgeBackgroundColor.on('drag', function (r, g, b) {
options._backgroundColor = this.color(r, g, b);
this.source.value = options._backgroundColor;
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
});
const badgeTextColor = new CP(document.getElementById('badged-text-color'));
badgeTextColor.on('change', function (r, g, b) {
this.source.value = this.color(r, g, b);
});
badgeTextColor.on('drag', function (r, g, b) {
options._textColor = this.color(r, g, b);
this.source.value = options._textColor;
wrappers.setBadgeTextColor({'color': options._textColor});
document.getElementById('counter-preview-badge').style.color = options._textColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
});
/* eslint-enable no-undef, no-invalid-this */
};
options._setDefaultColor = function ({target}) {
if (target.id === 'restore-text-color') {
options._textColor = '#FFFFFF';
wrappers.setBadgeTextColor({'color': options._textColor});
document.getElementById('counter-preview-badge').style.color = options._textColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
document.getElementById('badged-text-color').value = options._textColor;
} else if (target.id === 'restore-background-color') {
options._backgroundColor = '#4A826C';
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
document.getElementById('badged-background-color').value = options._backgroundColor;
}
};
/**
* Event Handlers
@ -441,15 +214,13 @@ options._setDefaultColor = function ({target}) {
options._onDocumentLoaded = function () {
let language = navigator.language;
options._optionElements = options._getOptionElements();
options._languageSupported = helpers.languageIsFullySupported(language);
options._scriptDirection = helpers.determineScriptDirection(language);
options._colorPicker();
options._renderContents();
};
options._onOptionChanged = function ({target}) {
options.onOptionChanged = function ({target}) {
let optionKey, optionType, optionValue;
optionKey = target.getAttribute('data-option');
@ -461,68 +232,41 @@ options._onOptionChanged = function ({target}) {
optionValue = target.value;
}
if (optionKey === Setting.UPDATE_NOTIFICATION) {
switch (optionKey) {
case Setting.UPDATE_NOTIFICATION:
optionValue = parseInt(optionValue);
}
if (optionKey === Setting.BLOCK_MISSING) {
break;
case Setting.BLOCK_MISSING:
if (optionValue === true) {
options._renderBlockMissingNotice();
} else {
options._hideBlockMissingNotice();
}
}
if (optionKey === Setting.DISABLE_PREFETCH) {
break;
case Setting.DISABLE_PREFETCH:
options._configureLinkPrefetching(optionValue);
}
if (optionKey === Setting.ALLOWLISTED_DOMAINS ||
optionKey === Setting.DOMAINS_MANIPULATE_DOM ||
optionKey === Setting.ALLOWED_DOMAINS_GOOGLE_FONTS) {
break;
case Setting.ALLOWLISTED_DOMAINS:
case Setting.DOMAINS_MANIPULATE_DOM:
case Setting.ALLOWED_DOMAINS_GOOGLE_FONTS:
optionValue = options._parseDomainAllowlist(optionValue);
break;
case Setting.BLOCK_GOOGLE_FONTS:
optionsAdvanced._renderAdvancedSection(optionValue);
break;
case Setting.NEGATE_HTML_FILTER_LIST:
optionsAdvanced._renderHtmlFilterSection(optionValue);
break;
case Setting.SELECTED_ICON:
optionsOther._setIcon(optionValue);
break;
}
if (optionKey === Setting.BLOCK_GOOGLE_FONTS) {
if (optionValue === true) {
document.getElementById('div-domains-allowlist-google-fonts').style.display = 'block';
} else {
document.getElementById('div-domains-allowlist-google-fonts').style.display = 'none';
}
}
if (optionKey === Setting.NEGATE_HTML_FILTER_LIST) {
if (optionValue === true) {
document.getElementById('html-filter-domains-title-include').style.display = 'none';
document.getElementById('html-filter-domains-title-exclude').style.display = 'block';
} else {
document.getElementById('html-filter-domains-title-include').style.display = 'block';
document.getElementById('html-filter-domains-title-exclude').style.display = 'none';
}
}
if (optionKey === Setting.SELECTED_ICON) {
wrappers.setIcon({'path': optionValue}, 'Enabled');
let url = chrome.runtime.getURL(`icons/action/${optionValue.toLowerCase()}/icon38-default.png`);
document.getElementById('icon-badge-preview').src = url;
}
storageManager.type.set({
[optionKey]: optionValue,
});
};
options._onStorageOptionChanged = function ({target}) {
chrome.storage.local.set({
[Setting.STORAGE_TYPE]: target.value,
});
if (target.value === 'local') {
storageManager.migrateData('local');
} else {
storageManager.migrateData('sync');
}
};
options._onLinkClick = function (url) {
chrome.tabs.create({
'url': url,
@ -533,7 +277,7 @@ options._onLinkClick = function (url) {
options._changeTab = function ({target}) {
let tabContent, tabButton, optionKey;
optionKey = target.getAttribute('data-option');
optionKey = target.getAttribute('data-option-tab');
tabContent = document.getElementsByClassName('tab-content');
tabButton = document.getElementsByClassName('option-buttons');
@ -548,24 +292,6 @@ options._changeTab = function ({target}) {
}
};
options._onChangedHexColor = function ({target}) {
if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
target.classList.remove('color-error');
if (target.id === 'badged-text-color') {
options._textColor = target.value;
wrappers.setBadgeTextColor({'color': options._textColor});
document.getElementById('counter-preview-badge').style.color = options._textColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
} else {
options._backgroundColor = target.value;
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
}
} else {
target.classList.add('color-error');
}
};
/**
* Updates the domain lists if the options page has no focus.
@ -580,8 +306,6 @@ options._updatesDomainLists = function (changes) {
} else if (changedItems[0] === 'domainsManipulateDOM') {
document.getElementById('tf-domains-manipulate-dom').value = options._serializeAllowlistedDomains(changes['domainsManipulateDOM'].newValue);
}
} else {
// document has the focus
}
};
@ -589,11 +313,8 @@ options._updatesDomainLists = function (changes) {
/**
* Initializations
*/
options._internalStatistics = false;
options._storageType = 'local';
options._listOfFrameworks = {};
options._listOfCDNs = {};
options._platformSupportIcons = true;
document.addEventListener('DOMContentLoaded', options._onDocumentLoaded);