Add: display excluded reason in popup

This commit is contained in:
eight 2019-06-26 14:47:25 +08:00
parent a074093899
commit 7ae2f9ca3a
3 changed files with 22 additions and 6 deletions

View File

@ -1301,6 +1301,12 @@
"message": "Style was not applied due to its incorrect usage of 'regexp()'", "message": "Style was not applied due to its incorrect usage of 'regexp()'",
"description": "Tooltip in the popup for styles that were not applied at all" "description": "Tooltip in the popup for styles that were not applied at all"
}, },
"styleNotAppliedSchemeDark": {
"message": "This style is only applied in Dark Mode"
},
"styleNotAppliedSchemeLight": {
"message": "This style is only applied in Light Mode"
},
"styleRegexpInvalidExplanation": { "styleRegexpInvalidExplanation": {
"message": "Some 'regexp()' rules that could not be compiled at all." "message": "Some 'regexp()' rules that could not be compiled at all."
}, },

View File

@ -390,6 +390,7 @@ const styleManager = (() => {
let excluded = false; let excluded = false;
let sloppy = false; let sloppy = false;
let sectionMatched = false; let sectionMatched = false;
let excludedScheme = false;
const match = urlMatchStyle(query, data); const match = urlMatchStyle(query, data);
// TODO: enable this when the function starts returning false // TODO: enable this when the function starts returning false
// if (match === false) { // if (match === false) {
@ -398,6 +399,9 @@ const styleManager = (() => {
if (match === 'excluded') { if (match === 'excluded') {
excluded = true; excluded = true;
} }
if (match === 'excludedScheme') {
excludedScheme = true;
}
for (const section of data.sections) { for (const section of data.sections) {
if (styleCodeEmpty(section.code)) { if (styleCodeEmpty(section.code)) {
continue; continue;
@ -415,7 +419,8 @@ const styleManager = (() => {
result.push({ result.push({
data: getStyleWithNoCode(data), data: getStyleWithNoCode(data),
excluded, excluded,
sloppy sloppy,
excludedScheme
}); });
} }
} }

View File

@ -329,13 +329,14 @@ function createStyleElement(style) {
const styleName = $('.style-name', entry); const styleName = $('.style-name', entry);
styleName.lastChild.textContent = style.name; styleName.lastChild.textContent = style.name;
setTimeout(() => { setTimeout(() => {
styleName.title = entry.styleMeta.sloppy ? styleName.title =
t('styleNotAppliedRegexpProblemTooltip') : entry.styleMeta.sloppy ? t('styleNotAppliedRegexpProblemTooltip') :
styleName.scrollWidth > styleName.clientWidth + 1 ? entry.styleMeta.excludedScheme ? t(`styleNotAppliedScheme${capitalize(entry.styleMeta.preferScheme)}`) :
styleName.textContent : ''; styleName.scrollWidth > styleName.clientWidth + 1 ? styleName.textContent :
'';
}); });
entry.classList.toggle('not-applied', style.excluded || style.sloppy); entry.classList.toggle('not-applied', style.excluded || style.sloppy || style.excludedScheme);
entry.classList.toggle('regexp-partial', style.sloppy); entry.classList.toggle('regexp-partial', style.sloppy);
$('.exclude-by-domain-checkbox', entry).checked = styleExcluded(style, 'domain'); $('.exclude-by-domain-checkbox', entry).checked = styleExcluded(style, 'domain');
@ -347,6 +348,10 @@ function createStyleElement(style) {
return entry; return entry;
} }
function capitalize(s) {
return s[0].toUpperCase() + s.slice(1);
}
function styleExcluded({exclusions}, type) { function styleExcluded({exclusions}, type) {
if (!exclusions) { if (!exclusions) {
return false; return false;