diff --git a/website/_assets/css/_try.scss b/website/_assets/css/_try.scss index a1dc3eac299..6774cecced9 100644 --- a/website/_assets/css/_try.scss +++ b/website/_assets/css/_try.scss @@ -110,6 +110,14 @@ html.site-fullscreen .content { border-top: solid #eee 1px; } + li ul li, + li ul li + li { + padding: inherit; + padding-left: 20px; + margin: inherit; + border: none; + } + .msgHighlight, .msgType { cursor: pointer; diff --git a/website/_assets/js/tryFlow.js.es6.liquid b/website/_assets/js/tryFlow.js.es6.liquid index c883d706b9d..8d2b4f1488e 100644 --- a/website/_assets/js/tryFlow.js.es6.liquid +++ b/website/_assets/js/tryFlow.js.es6.liquid @@ -12,7 +12,7 @@ CodeMirror.defineOption('flow', null, function(editor) { editor.performLint(); }); -function printError(err, editor) { +function appendMsg(container, msg, editor) { const clickHandler = (msg) => { editor.getDoc().setSelection( {line: msg.loc.start.line - 1, ch: msg.loc.start.column - 1}, @@ -21,55 +21,83 @@ function printError(err, editor) { editor.focus(); }; - return err.message.reduce((container, msg) => { - if (msg.loc && msg.context != null) { - const div = document.createElement('div'); - const filename = msg.loc.source !== '-' ? `${msg.loc.source}:` : ''; - const prefix = `${filename}${msg.loc.start.line}: `; - - const before = msg.context.slice(0, msg.loc.start.column - 1); - const highlight = (msg.loc.start.line === msg.loc.end.line) ? - msg.context.slice(msg.loc.start.column - 1, msg.loc.end.column) : - msg.context.slice(msg.loc.start.column - 1); - const after = (msg.loc.start.line === msg.loc.end.line) ? - msg.context.slice(msg.loc.end.column) : - ''; - div.appendChild(document.createTextNode(prefix + before)); - const bold = document.createElement('strong'); - bold.className = "msgHighlight"; - bold.appendChild(document.createTextNode(highlight)); - div.appendChild(bold); - div.appendChild(document.createTextNode(after)); - container.appendChild(div); - - const offset = msg.loc.start.column + prefix.length - 1; - const arrow = `${(prefix + before).replace(/[^ ]/g, ' ')}^ `; - container.appendChild(document.createTextNode(arrow)); - - const span = document.createElement('span'); - span.className = "msgType"; - span.appendChild(document.createTextNode(msg.descr)); - container.appendChild(span); - - const handler = clickHandler.bind(null, msg); - bold.addEventListener('click', handler); - span.addEventListener('click', handler); - } else { - const descr = `. ${msg.descr}\n`; - container.appendChild(document.createTextNode(descr)); - } - return container; - }, document.createElement('li')); + if (msg.loc && msg.context != null) { + const div = document.createElement('div'); + const filename = msg.loc.source !== '-' ? `${msg.loc.source}:` : ''; + const prefix = `${filename}${msg.loc.start.line}: `; + + const before = msg.context.slice(0, msg.loc.start.column - 1); + const highlight = (msg.loc.start.line === msg.loc.end.line) ? + msg.context.slice(msg.loc.start.column - 1, msg.loc.end.column) : + msg.context.slice(msg.loc.start.column - 1); + const after = (msg.loc.start.line === msg.loc.end.line) ? + msg.context.slice(msg.loc.end.column) : + ''; + div.appendChild(document.createTextNode(prefix + before)); + const bold = document.createElement('strong'); + bold.className = "msgHighlight"; + bold.appendChild(document.createTextNode(highlight)); + div.appendChild(bold); + div.appendChild(document.createTextNode(after)); + container.appendChild(div); + + const offset = msg.loc.start.column + prefix.length - 1; + const arrow = `${(prefix + before).replace(/[^ ]/g, ' ')}^ `; + container.appendChild(document.createTextNode(arrow)); + + const span = document.createElement('span'); + span.className = "msgType"; + span.appendChild(document.createTextNode(msg.descr)); + container.appendChild(span); + + const handler = clickHandler.bind(null, msg); + bold.addEventListener('click', handler); + span.addEventListener('click', handler); + } else if (msg.type === "Comment") { + const descr = `. ${msg.descr}\n`; + container.appendChild(document.createTextNode(descr)); + } else { + const descr = `${msg.descr}\n`; + container.appendChild(document.createTextNode(descr)); + } +}; + +function printExtra(info, editor) { + const list = document.createElement('ul'); + if (info.message) { + const li = document.createElement('li'); + info.message.forEach(msg => appendMsg(li, msg, editor)); + list.appendChild(li); + } + if (info.children) { + const li = document.createElement('li'); + info.children.forEach(info => { + li.appendChild(printExtra(info, editor)); + }); + list.appendChild(li); + } + return list; } -function printErrors(errors, editor) { - if (errors.length == 0) { - return document.createTextNode('No errors!'); +function printError(err, editor) { + const li = document.createElement('li'); + err.message.forEach(msg => appendMsg(li, msg, editor)); + + if (err.extra) { + err.extra.forEach(info => { + li.appendChild(printExtra(info, editor)); + }); } - return errors.reduce((list, err) => { + + return li; +} + +function printErrors(errors, editor) { + const list = document.createElement('ul'); + errors.forEach(err => { list.appendChild(printError(err, editor)); - return list; - }, document.createElement('ul')); + }); + return list; } function removeChildren(node) { @@ -358,8 +386,12 @@ function createEditor( editor.on('flowErrors', errors => { if (errorsNode) { - removeChildren(errorsNode); - errorsNode.appendChild(printErrors(errors, editor)); + if (errors.length) { + removeChildren(errorsNode); + errorsNode.appendChild(printErrors(errors, editor)); + } else { + errorsNode.innerText = 'No errors!'; + } } if (jsonNode) {