From 1250bb970e879ba7ac2610d386a233d6843a9ec9 Mon Sep 17 00:00:00 2001 From: tophf Date: Fri, 22 May 2015 15:28:05 +0300 Subject: [PATCH] Editor: show a list of all CSSLint messages --- _locales/en/messages.json | 8 ++++ edit.html | 53 +++++++++++++++++++++++ edit.js | 88 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 149 insertions(+) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 876a3900..3c601a09 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -173,6 +173,14 @@ "message": "Install update", "description": "Label for the button to install an update for a single style" }, + "issues": { + "message": "Issues", + "description": "Label for the CSSLint issues block on the style edit page" + }, + "issuesHelp": { + "message": "The issues found by CSSLint<\/a> with these rules enabled:", + "description": "Help popup message for the CSSLint issues block on the style edit page" + }, "manageFilters": { "message": "Filters", "description": "Label for filters container" diff --git a/edit.html b/edit.html index 351efd6f..1cc4fe9c 100644 --- a/edit.html +++ b/edit.html @@ -131,6 +131,14 @@ content: "*"; font-weight: bold; } + #sections { + counter-reset: codebox; + } + #sections > div > label::after { + counter-increment: codebox; + content: counter(codebox); + margin-left: 0.25rem; + } /* code */ .code { height: 10rem; @@ -264,6 +272,50 @@ padding-right: 0.5rem; } + /************ lint ************/ + #lint { + display: none; + } + #lint > div { + overflow-y: auto; + } + #lint table { + font-size: 100%; + border-spacing: 0; + margin-bottom: 1rem; + line-height: 1.0; + } + #lint table:last-child { + margin-bottom: 0; + } + #lint caption { + text-align: left; + font-weight: bold; + } + #lint tbody { + font-size: 85%; + cursor: pointer; + } + #lint tr:hover { + background-color: rgba(0, 0, 0, 0.1); + } + #lint td[role="severity"] { + font-size: 0; + width: 16px; + padding-right: 0.25rem; + } + #lint td[role="line"], #lint td[role="sep"] { + text-align: right; + padding-right: 0; + } + #lint td[role="col"] { + text-align: left; + padding-right: 0.25rem; + } + #lint td[role="message"] { + text-align: left; + } + /************ reponsive layouts ************/ @media(max-width:737px) { #header { @@ -405,6 +457,7 @@ +

diff --git a/edit.js b/edit.js index ba5e362c..21be4680 100644 --- a/edit.js +++ b/edit.js @@ -354,6 +354,7 @@ function indicateCodeChange(cm) { var section = getSectionForCodeMirror(cm); setCleanItem(section, cm.isClean(section.savedValue)); updateTitle(); + updateLintReport(cm); } function getSectionForCodeMirror(cm) { @@ -513,6 +514,7 @@ function addSection(event, section) { var cm = setupCodeMirror(codeElement, newIndex); makeSectionVisible(cm); cm.focus() + renderLintReport(); } else { sections.appendChild(div); setupCodeMirror(codeElement); @@ -536,6 +538,7 @@ function removeSection(event) { var cm = section.querySelector(".CodeMirror").CodeMirror; removeAreaAndSetDirty(section); editors.splice(editors.indexOf(cm), 1); + renderLintReport(); } function removeAreaAndSetDirty(area) { @@ -748,6 +751,80 @@ function getEditorInSight(nearbyElement) { } } +function updateLintReport(cm) { + var state = cm.state.lint; + clearTimeout(state.reportTimeout); + state.reportTimeout = setTimeout(update.bind(cm), (state.options.delay || 500) + 500); + function update() { // this == cm + var html = this.state.lint.marked.length == 0 ? "" : "" + + this.state.lint.marked.map(function(mark) { + var info = mark.__annotation; + return "" + + "" + + info.severity + "" + + "" + (info.from.line+1) + "" + + ":" + + "" + (info.from.ch+1) + "" + + "" + info.message.replace(/ at line \d.+$/, "") + ""; + }).join("") + ""; + if (this.state.lint.html != html) { + this.state.lint.html = html; + renderLintReport(true); + } + } +} + +function renderLintReport(blockChanged) { + var container = document.getElementById("lint"); + var content = container.children[1]; + var label = t("sectionCode"); + var newContent = content.cloneNode(false); + editors.forEach(function(cm, index) { + if (cm.state.lint.html) { + var newBlock = newContent.appendChild(document.createElement("table")); + var html = "" + label + " " + (index+1) + "" + cm.state.lint.html; + newBlock.innerHTML = html; + newBlock.cm = cm; + if (!blockChanged) { + var block = content.children[newContent.children.length - 1]; + blockChanged = !block || cm != block.cm || html != block.innerHTML; + } + } + }); + if (blockChanged || newContent.children.length != content.children.length) { + container.replaceChild(newContent, content); + container.style.display = newContent.children.length ? "block" : "none"; + resizeLintReport(null, newContent); + } +} + +function resizeLintReport(event, content) { + content = content || document.getElementById("lint").children[1]; + if (content.children.length) { + var header = document.getElementById("header"); + var headerHeight = parseFloat(getComputedStyle(header).height); + var contentTop = content.getBoundingClientRect().top - header.getBoundingClientRect().top; + var newMaxHeight = Math.max(100, headerHeight - contentTop) + "px"; + if (newMaxHeight != content.style.maxHeight) { + content.style.maxHeight = newMaxHeight; + } + } +} + +function gotoLintIssue(event) { + var issue = querySelectorParent(event.target, "tr"); + if (!issue) { + return; + } + var block = querySelectorParent(issue, "table"); + makeSectionVisible(block.cm); + block.cm.focus(); + block.cm.setSelection({ + line: parseInt(issue.querySelector("td[role='line']").textContent) - 1, + ch: parseInt(issue.querySelector("td[role='col']").textContent) - 1 + }); +} + window.addEventListener("load", init, false); function init() { @@ -810,6 +887,9 @@ function initHooks() { document.getElementById("sections-help").addEventListener("click", showSectionHelp, false); document.getElementById("keyMap-help").addEventListener("click", showKeyMapHelp, false); document.getElementById("cancel-button").addEventListener("click", goBackToManage); + document.getElementById("lint-help").addEventListener("click", showLintHelp); + document.getElementById("lint").addEventListener("click", gotoLintIssue); + window.addEventListener("resize", resizeLintReport); setupGlobalSearch(); setCleanGlobal(); @@ -1074,6 +1154,14 @@ function showKeyMapHelp() { } } +function showLintHelp() { + showHelp(t("issues"), t("issuesHelp") + "
    " + + CSSLint.getRules().map(function(rule) { + return "
  • " + rule.name + "
    " + rule.desc + "
    • "; + }).join("") + "