diff --git a/edit/edit.css b/edit/edit.css index 866d3477..aee7065b 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -729,6 +729,12 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high #help-popup .rules { padding: 0 15px; } +#help-popup .rules li { + padding-top: .5em; +} +#help-popup .rules p { + margin: .25em 0; +} #help-popup button { margin-right: 3px; } @@ -817,6 +823,11 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high #message-box.center.lint-config #message-box-contents { text-align: left; } +#help-popup .active-linter-rule { + font-weight: bold; + text-decoration: underline; + background-color: rgba(128, 128, 128, .2); +} /************ CSS beautifier ************/ .beautify-options { diff --git a/edit/linter-dialogs.js b/edit/linter-dialogs.js index d06ae941..7a3d6f01 100644 --- a/edit/linter-dialogs.js +++ b/edit/linter-dialogs.js @@ -57,6 +57,21 @@ ])); cm = popup.codebox; cm.focus(); + const rulesStr = getActiveRules().join('|'); + if (rulesStr) { + const rx = new RegExp(`"(${rulesStr})"\\s*:`); + let line = 0; + cm.startOperation(); + cm.eachLine(({text}) => { + const m = rx.exec(text); + if (m) { + const ch = m.index + 1; + cm.markText({line, ch}, {line, ch: ch + m[1].length}, {className: 'active-linter-rule'}); + } + ++line; + }); + cm.endOperation(); + } cm.on('changes', updateConfigButtons); updateConfigButtons(); window.on('closeHelp', onConfigClose, {once: true}); @@ -74,9 +89,9 @@ const rule = RULES.csslint.find(rule => rule.id === ruleID); return rule && $create('li', [ - $create('b', $createLink(rule.url || baseUrl, rule.name)), - $create('br'), - rule.desc, + $create('b', ruleID + ': '), + rule.url ? $createLink(`"${rule.url}"`, rule.name) : $create('span', `"${rule.name}"`), + $create('p', rule.desc), ]); }; } else { @@ -86,14 +101,20 @@ rule === 'CssSyntaxError' ? rule : $createLink(baseUrl + rule, rule)); } const header = t('linterIssuesHelp', '\x01').split('\x01'); - const activeRules = new Set([...linterMan.getIssues()].map(issue => issue.rule)); helpPopup.show(t('linterIssues'), $create([ header[0], headerLink, header[1], - $create('ul.rules', [...activeRules].map(template)), + $create('ul.rules', getActiveRules().map(template)), + $create('button', {onclick: linterMan.showLintConfig}, t('configureStyle')), ])); }; + function getActiveRules() { + const all = [...linterMan.getIssues()].map(issue => issue.rule); + const uniq = new Set(all); + return [...uniq]; + } + function getLexicalDepth(lexicalState) { let depth = 0; while ((lexicalState = lexicalState.prev)) {