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

Customizable badge for missing resources and some code improvements (#613)

This commit is contained in:
nobody 2021-08-12 06:37:45 +02:00
parent 2f6ddd8c2f
commit 7001d5eec2
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
11 changed files with 147 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

@ -30,6 +30,7 @@
"MathJaxFiles": true,
"BadgeSetting": true,
"BadgeSettingHTMLFilter": true,
"BadgeSettingMissingResource": true,
"fileGuard": true,
"files": true,

76
core/constants.js
View File

@ -60,6 +60,48 @@ const Resource = {
'VERSION_PLACEHOLDER': '{version}'
};
const BadgeSetting = {
'TYPE': 'default',
'COUNTER_PREVIEW_BADGE': 'counter-preview-badge',
'HTML_ICON_BADGE_PREVIEW': 'icon-badge-preview',
'PRE_BADGED_BACKGROUND_COLOR': 'pre-badged-background-color',
'BADGED_BACKGROUND_COLOR': 'badged-background-color',
'PRE_BADGED_TEXT_COLOR': 'pre-badged-text-color',
'BADGED_TEXT_COLOR': 'badged-text-color',
'RESTORE_BACKGROUND_COLOR': 'restore-background-color',
'RESTORE_TEXT_COLOR': 'restore-text-color',
'HEX_BACKGROUND_COLOR': '#4A826C',
'HEX_TEXT_COLOR': '#FFFFFF',
};
const BadgeSettingHTMLFilter = {
'TYPE': 'html-filter',
'COUNTER_PREVIEW_BADGE': 'html-counter-preview-badge',
'HTML_ICON_BADGE_PREVIEW': 'html-icon-badge-preview',
'PRE_BADGED_BACKGROUND_COLOR': 'html-pre-badged-background-color',
'BADGED_BACKGROUND_COLOR': 'html-badged-background-color',
'PRE_BADGED_TEXT_COLOR': 'html-pre-badged-text-color',
'BADGED_TEXT_COLOR': 'html-badged-text-color',
'RESTORE_BACKGROUND_COLOR': 'html-restore-background-color',
'RESTORE_TEXT_COLOR': 'html-restore-text-color',
'HEX_BACKGROUND_COLOR': '#FF0000',
'HEX_TEXT_COLOR': '#FFFFFF',
};
const BadgeSettingMissingResource = {
'TYPE': 'missing-resource',
'COUNTER_PREVIEW_BADGE': 'missing-counter-preview-badge',
'HTML_ICON_BADGE_PREVIEW': 'missing-icon-badge-preview',
'PRE_BADGED_BACKGROUND_COLOR': 'missing-pre-badged-background-color',
'BADGED_BACKGROUND_COLOR': 'missing-badged-background-color',
'PRE_BADGED_TEXT_COLOR': 'missing-pre-badged-text-color',
'BADGED_TEXT_COLOR': 'missing-badged-text-color',
'RESTORE_BACKGROUND_COLOR': 'missing-restore-background-color',
'RESTORE_TEXT_COLOR': 'missing-restore-text-color',
'HEX_BACKGROUND_COLOR': '#0000FF',
'HEX_TEXT_COLOR': '#FFFFFF',
};
const Setting = {
'AMOUNT_INJECTED': 'amountInjected',
'BLOCK_MISSING': 'blockMissing',
@ -85,6 +127,8 @@ const Setting = {
'BADGE_DEFAULT_TEXT_COLOR': 'badgeDefaultTextColor',
'BADGE_HTML_FILTER_BACKGROUND_COLOR': 'badgeHTMLFilterBackgroundColor',
'BADGE_HTML_FILTER_TEXT_COLOR': 'badgeHTMLfilterTextColor',
'BADGE_MISSING_RESOURCE_BACKGROUND_COLOR': 'badgeMissingResourceBackgroundColor',
'BADGE_MISSING_RESOURCE_TEXT_COLOR': 'badgeMissingResourceTextColor',
'HIDE_DONATION_BUTTON': 'hideDonationButton',
'CHANGE_BADGE_COLOR_MISSING_RESOURCES': 'changeBadgeColorMissingResources',
};
@ -110,10 +154,12 @@ const SettingDefaults = {
[Setting.STRIP_METADATA]: true,
[Setting.ALLOWLISTED_DOMAINS]: {},
[Setting.XHR_TEST_DOMAIN]: Address.LOCALCDN,
[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: '#4A826C',
[Setting.BADGE_DEFAULT_TEXT_COLOR]: '#FFFFFF',
[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: '#4A826C',
[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: '#FFFFFF',
[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: BadgeSetting.HEX_BACKGROUND_COLOR,
[Setting.BADGE_DEFAULT_TEXT_COLOR]: BadgeSetting.HEX_TEXT_COLOR,
[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: BadgeSettingHTMLFilter.HEX_BACKGROUND_COLOR,
[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: BadgeSettingHTMLFilter.HEX_TEXT_COLOR,
[Setting.BADGE_MISSING_RESOURCE_BACKGROUND_COLOR]: BadgeSettingMissingResource.HEX_BACKGROUND_COLOR,
[Setting.BADGE_MISSING_RESOURCE_TEXT_COLOR]: BadgeSettingMissingResource.HEX_TEXT_COLOR,
[Setting.HIDE_DONATION_BUTTON]: false,
[Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES]: false,
};
@ -205,28 +251,6 @@ const IconType = {
}
};
const BadgeSetting = {
'TYPE': 'default',
'COUNTER_PREVIEW_BADGE': 'counter-preview-badge',
'PRE_BADGED_BACKGROUND_COLOR': 'pre-badged-background-color',
'BADGED_BACKGROUND_COLOR': 'badged-background-color',
'PRE_BADGED_TEXT_COLOR': 'pre-badged-text-color',
'BADGED_TEXT_COLOR': 'badged-text-color',
'RESTORE_BACKGROUND_COLOR': 'restore-background-color',
'RESTORE_TEXT_COLOR': 'restore-text-color',
};
const BadgeSettingHTMLFilter = {
'TYPE': 'html-filter',
'COUNTER_PREVIEW_BADGE': 'html-counter-preview-badge',
'PRE_BADGED_BACKGROUND_COLOR': 'html-pre-badged-background-color',
'BADGED_BACKGROUND_COLOR': 'html-badged-background-color',
'PRE_BADGED_TEXT_COLOR': 'html-pre-badged-text-color',
'BADGED_TEXT_COLOR': 'html-badged-text-color',
'RESTORE_BACKGROUND_COLOR': 'html-restore-background-color',
'RESTORE_TEXT_COLOR': 'html-restore-text-color',
};
const Regex = {
'GOOGLE_FONTS': /fonts\.(googleapis|gstatic)\.com\/(?!.*(Material\+Icons|materialicons).*).*/,
'GOOGLE_MATERIAL_ICONS': /fonts\.(googleapis|gstatic)\.com\/.*\?family=.*Material\+Icons/,

2
core/main.js
View File

@ -83,6 +83,8 @@ main._initializeSettings = function () {
wrappers.badgeDefaultBackgroundColor = items.badgeDefaultBackgroundColor;
wrappers.badgeHTMLfilterTextColor = items.badgeHTMLfilterTextColor;
wrappers.badgeHTMLFilterBackgroundColor = items.badgeHTMLFilterBackgroundColor;
wrappers.badgeMissingResourceTextColor = items.badgeMissingResourceTextColor;
wrappers.badgeMissingResourceBackgroundColor = items.badgeMissingResourceBackgroundColor;
wrappers.setBadgeTextColor({'color': items.badgeDefaultTextColor, 'type': 'default'});
wrappers.setBadgeBackgroundColor({'color': items.badgeDefaultBackgroundColor, 'type': 'default'});

6
core/state-manager.js
View File

@ -51,11 +51,11 @@ stateManager.registerInjection = function (tabIdentifier, injection, url) {
}
if (stateManager.showIconBadge === true) {
if (missingCount > 0 && stateManager.changeBadgeColorMissingResources) {
wrappers.setBadgeColoring(tabIdentifier, 'missing');
wrappers.setBadgeColoring(tabIdentifier, BadgeSettingMissingResource.TYPE);
} else if (listedToManipulateDOM) {
wrappers.setBadgeColoring(tabIdentifier, 'htmlFilterOn');
wrappers.setBadgeColoring(tabIdentifier, BadgeSettingHTMLFilter.TYPE);
} else {
wrappers.setBadgeColoring(tabIdentifier, 'default');
wrappers.setBadgeColoring(tabIdentifier, BadgeSetting.TYPE);
}
wrappers.setBadgeText(tabIdentifier, injectionCount);
}

7
core/storage-manager.js
View File

@ -200,15 +200,10 @@ storageManager._validation = function (content) {
}
}
// set values directly
wrappers.setIcon({'path': imported['selectedIcon']}, 'Enabled');
storageManager.amountInjected = imported['amountInjected'];
storageManager.statistics = imported['internalStatisticsData'];
storageManager.type.set(imported);
alert(chrome.i18n.getMessage('dialogImportSuccessful'));
chrome.tabs.reload();
chrome.runtime.reload();
};
storageManager._validateDomainsAndStatistics = function (type, obj) {

26
modules/internal/wrappers.js
View File

@ -33,12 +33,16 @@ wrappers.setBadgeBackgroundColor = function (details) {
if (chrome.browserAction.setBadgeBackgroundColor === undefined) {
return;
}
if (details.type === 'default') {
if (details.type === BadgeSetting.TYPE) {
storageManager.type.set({[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: details.color});
wrappers.badgeDefaultBackgroundColor = details.color;
} else if (details.type === 'html-filter') {
} else if (details.type === BadgeSettingHTMLFilter.TYPE) {
storageManager.type.set({[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: details.color});
wrappers.badgeColorHTMLfilter = details.color;
} else if (details.type === BadgeSettingMissingResource.TYPE) {
storageManager.type.set({[Setting.BADGE_MISSING_RESOURCE_BACKGROUND_COLOR]: details.color});
wrappers.badgeMissingResourceBackgroundColor = details.color;
}
};
@ -46,12 +50,16 @@ wrappers.setBadgeTextColor = function (details) {
if (chrome.browserAction.setBadgeTextColor === undefined) {
return;
}
if (details.type === 'default') {
if (details.type === BadgeSetting.TYPE) {
storageManager.type.set({[Setting.BADGE_DEFAULT_TEXT_COLOR]: details.color});
wrappers.badgeDefaultTextColor = details.color;
} else if (details.type === 'html-filter') {
} else if (details.type === BadgeSettingHTMLFilter.TYPE) {
storageManager.type.set({[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: details.color});
wrappers.badgeDefaultTextColorHTMLfilter = details.color;
} else if (details.type === BadgeSettingMissingResource.TYPE) {
storageManager.type.set({[Setting.BADGE_MISSING_RESOURCE_TEXT_COLOR]: details.color});
wrappers.badgeMissingResourceTextColor = details.color;
}
};
@ -79,15 +87,15 @@ wrappers.setBadgeColoring = function (tabId, value) {
return;
}
if (value === 'htmlFilterOn') {
if (value === BadgeSettingHTMLFilter.TYPE) {
textColor = wrappers.badgeHTMLfilterTextColor;
backgroundColor = wrappers.badgeHTMLFilterBackgroundColor;
} else if (value === 'default') {
} else if (value === BadgeSetting.TYPE) {
textColor = wrappers.badgeDefaultTextColor;
backgroundColor = wrappers.badgeDefaultBackgroundColor;
} else if (value === 'missing') {
textColor = 'white';
backgroundColor = 'blue';
} else if (value === BadgeSettingMissingResource.TYPE) {
textColor = wrappers.badgeMissingResourceTextColor;
backgroundColor = wrappers.badgeMissingResourceBackgroundColor;
} else {
return;
}

58
pages/options/options-other.js
View File

@ -44,8 +44,9 @@ optionsOther._renderIconSection = function (opt) {
document.getElementById('icon-light').checked = true;
}
url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
document.getElementById('icon-badge-preview').src = url;
document.getElementById('html-icon-badge-preview').src = url;
document.getElementById(BadgeSetting.HTML_ICON_BADGE_PREVIEW).src = url;
document.getElementById(BadgeSettingHTMLFilter.HTML_ICON_BADGE_PREVIEW).src = url;
document.getElementById(BadgeSettingMissingResource.HTML_ICON_BADGE_PREVIEW).src = url;
bgColor = opt.badgeDefaultBackgroundColor;
txtColor = opt.badgeDefaultTextColor;
@ -54,6 +55,10 @@ optionsOther._renderIconSection = function (opt) {
bgColor = opt.badgeHTMLFilterBackgroundColor;
txtColor = opt.badgeHTMLfilterTextColor;
optionsOther._createBadge(BadgeSettingHTMLFilter, bgColor, txtColor);
bgColor = opt.badgeMissingResourceBackgroundColor;
txtColor = opt.badgeMissingResourceTextColor;
optionsOther._createBadge(BadgeSettingMissingResource, bgColor, txtColor);
};
optionsOther._createBadge = function (element, bgColor, txtColor) {
@ -87,8 +92,9 @@ optionsOther._renderStorageSection = function (opt) {
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;
document.getElementById('html-icon-badge-preview').src = url;
document.getElementById(BadgeSetting.HTML_ICON_BADGE_PREVIEW).src = url;
document.getElementById(BadgeSettingHTMLFilter.HTML_ICON_BADGE_PREVIEW).src = url;
document.getElementById(BadgeSettingMissingResource.HTML_ICON_BADGE_PREVIEW).src = url;
};
optionsOther._preSelectStorage = function (type) {
@ -139,19 +145,17 @@ optionsOther._colorPicker = function (element) {
};
optionsOther._setDefaultColor = function ({target}) {
let element;
if (target.id === 'restore-text-color' || target.id === 'restore-background-color') {
element = BadgeSetting;
} else {
element = BadgeSettingHTMLFilter;
}
let element = optionsOther._getBadgeElement(target.id);
if (target.id === element.RESTORE_TEXT_COLOR) {
let txtColor = '#FFFFFF';
let txtColor = element.HEX_TEXT_COLOR;
wrappers.setBadgeTextColor({'type': element.TYPE, 'color': txtColor});
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
document.getElementById(element.BADGED_TEXT_COLOR).value = txtColor;
} else if (target.id === 'restore-background-color') {
let bgColor = '#4A826C';
} else if (target.id === element.RESTORE_BACKGROUND_COLOR) {
let bgColor = element.HEX_BACKGROUND_COLOR;
wrappers.setBadgeBackgroundColor({'type': element.TYPE, 'color': bgColor});
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
document.getElementById(element.BADGED_BACKGROUND_COLOR).value = bgColor;
@ -159,19 +163,15 @@ optionsOther._setDefaultColor = function ({target}) {
};
optionsOther._onChangedHexColor = function ({target}) {
let element;
if (target.id === 'badged-text-color' || target.id === 'badged-background-color') {
element = BadgeSetting;
} else {
element = BadgeSettingHTMLFilter;
}
let element = optionsOther._getBadgeElement(target.id);
if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
target.classList.remove('color-error');
if (target.id === element.BADGED_TEXT_COLOR) {
let txtColor = target.value;
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
} else {
} else if (target.id === element.BADGED_BACKGROUND_COLOR) {
let bgColor = target.value;
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
@ -181,9 +181,27 @@ optionsOther._onChangedHexColor = function ({target}) {
}
};
optionsOther._getBadgeElement = function (targetId) {
switch (targetId) {
case BadgeSetting.RESTORE_TEXT_COLOR:
case BadgeSetting.RESTORE_BACKGROUND_COLOR:
return BadgeSetting;
case BadgeSettingHTMLFilter.RESTORE_TEXT_COLOR:
case BadgeSettingHTMLFilter.RESTORE_BACKGROUND_COLOR:
return BadgeSettingHTMLFilter;
case BadgeSettingMissingResource.RESTORE_TEXT_COLOR:
case BadgeSettingMissingResource.RESTORE_BACKGROUND_COLOR:
return BadgeSettingMissingResource;
default:
return undefined;
}
};
optionsOther.init = function (opt) {
if (BrowserType.CHROMIUM) {
document.getElementById('div-badged-text-color').style.display = 'none';
document.getElementById('html-div-badged-text-color').style.display = 'none';
document.getElementById('missing-div-badged-text-color').style.display = 'none';
}
document.getElementById('icon-default').addEventListener('change', options.onOptionChanged);

18
pages/options/options.css
View File

@ -191,12 +191,16 @@ body {
padding: 0 30px 0 0;
}
#badge-preview-top, #html-badge-preview-top {
#badge-preview-top,
#html-badge-preview-top,
#missing-badge-preview-top {
position: relative;
width: 38px;
}
#counter-preview-badge, #html-counter-preview-badge {
#counter-preview-badge,
#html-counter-preview-badge,
#missing-counter-preview-badge {
background: black;
border-radius: 5px;
color: white;
@ -208,13 +212,16 @@ body {
}
#pre-badged-background-color, #pre-badged-text-color,
#html-pre-badged-background-color, #html-pre-badged-text-color {
#html-pre-badged-background-color, #html-pre-badged-text-color,
#missing-pre-badged-background-color, #missing-pre-badged-text-color {
height: 30px;
margin-right: 5px;
width: 30px;
}
#icon-badge-preview, #html-icon-badge-preview {
#icon-badge-preview,
#html-icon-badge-preview,
#missing-icon-badge-preview {
margin-top: 5px;
}
@ -238,7 +245,8 @@ div[class="color-picker:a"] {
}
#badged-background-color, #badged-text-color,
#html-badged-background-color, #html-badged-text-color {
#html-badged-background-color, #html-badged-text-color,
#missing-badged-background-color, #missing-badged-text-color {
max-width: 150px;
}

19
pages/options/options.html
View File

@ -308,6 +308,25 @@
</div>
</div>
</div>
<div class="div-badge">
<p>Missing Resource</p>
<div id="missing-badge-preview-top">
<div>
<img id="missing-icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
<div id="missing-counter-preview-badge"><span>17</span></div>
</div>
</div>
<div id="missing-badge-preview-bottom">
<div class="colorpicker">
<div id="missing-pre-badged-background-color"></div>
<input id="missing-badged-background-color" data-option="badgeMissingResourceBackgroundColor" class="input-text" maxlength="7"><img id="missing-restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
</div>
<div id="missing-div-badged-text-color" class="colorpicker">
<div id="missing-pre-badged-text-color"></div>
<input id="missing-badged-text-color" data-option="badgeMissingResourceTextColor" class="input-text" maxlength="7"><img id="missing-restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
</div>
</div>
</div>
</div>
</section>
</div>

2
pages/options/options.js
View File

@ -88,6 +88,8 @@ options._renderOptionsPanel = function () {
'badgeDefaultTextColor': options._optionValues.badgeDefaultTextColor,
'badgeHTMLFilterBackgroundColor': options._optionValues.badgeHTMLFilterBackgroundColor,
'badgeHTMLfilterTextColor': options._optionValues.badgeHTMLfilterTextColor,
'badgeMissingResourceBackgroundColor': options._optionValues.badgeMissingResourceBackgroundColor,
'badgeMissingResourceTextColor': options._optionValues.badgeMissingResourceTextColor,
'storageType': options._optionValues.storageType
};

1
pages/updates/updates.html
View File

@ -74,6 +74,7 @@
<li>Unused permission removed (<a href="https://codeberg.org/nobody/LocalCDN/issue/612">#612</a>)</li>
<li>Wildcard support for Google Fonts and HTML filter list (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
<li>Customizable badge as HTML filter indicator (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
<li>Customizable badge for missing resources and some code improvements (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
</ul>
</div>
<div id="generator-section">