| <!doctype html> |
| <!-- |
| Copyright 2022 The Dawn and Tint Authors |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <html> |
| |
| <head> |
| <title>Dawn Code Coverage viewer</title> |
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/theme/seti.min.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/mode/clike/clike.min.js"></script> |
| <script src=https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.10/pako.min.js></script> |
| |
| <style> |
| ::-webkit-scrollbar { |
| background-color: #30353530; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background-color: #80858050; |
| } |
| |
| ::-webkit-scrollbar-corner { |
| background-color: #00000000; |
| } |
| |
| .frame { |
| display: flex; |
| left: 0px; |
| right: 0px; |
| top: 0px; |
| bottom: 0px; |
| position: absolute; |
| font-family: monospace; |
| background-color: #151515; |
| color: #c0b070; |
| } |
| |
| .left-pane { |
| flex: 1; |
| } |
| |
| .center-pane { |
| flex: 3; |
| min-width: 0; |
| min-height: 0; |
| } |
| |
| .top-pane { |
| flex: 1; |
| overflow: scroll; |
| } |
| |
| .v-flex { |
| display: flex; |
| height: 100%; |
| flex-direction: column; |
| } |
| |
| .file-tree { |
| font-size: small; |
| overflow: auto; |
| padding: 5px; |
| } |
| |
| .test-tree { |
| font-size: small; |
| overflow: auto; |
| padding: 5px; |
| } |
| |
| .CodeMirror { |
| flex: 3; |
| height: 100%; |
| border: 1px solid #eee; |
| } |
| |
| .file-div { |
| margin: 0px; |
| white-space: nowrap; |
| padding: 2px; |
| margin-top: 1px; |
| margin-bottom: 1px; |
| } |
| |
| .file-div:hover { |
| background-color: #303030; |
| cursor: pointer; |
| } |
| |
| .file-div.selected { |
| background-color: #505050; |
| color: #f0f0a0; |
| cursor: pointer; |
| } |
| |
| .test-name { |
| margin: 0px; |
| white-space: nowrap; |
| padding: 2px; |
| margin-top: 1px; |
| margin-bottom: 1px; |
| } |
| |
| .file-coverage { |
| color: black; |
| width: 20pt; |
| padding-right: 3pt; |
| padding-left: 3px; |
| margin-right: 5pt; |
| display: inline-block; |
| text-align: center; |
| border-radius: 5px; |
| } |
| |
| .with-coverage { |
| background-color: #20d04080; |
| border-width: 0px 0px 0px 0px; |
| } |
| |
| .with-coverage-start { |
| border-left: solid 1px; |
| border-color: #20f02080; |
| margin-left: -1px; |
| } |
| |
| .with-coverage-end { |
| border-right: solid 1px; |
| border-color: #20f02080; |
| margin-right: -1px; |
| } |
| |
| .without-coverage { |
| background-color: #d0204080; |
| border-width: 0px 0px 0px 0px; |
| } |
| |
| .without-coverage-start { |
| border-left: solid 1px; |
| border-color: #f0202080; |
| margin-left: -1px; |
| } |
| |
| .without-coverage-end { |
| border-right: solid 1px; |
| border-color: #f0202080; |
| margin-right: -1px; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div class="frame"> |
| <div id="file_tree" class="left-pane file-tree"></div> |
| <div class="center-pane"> |
| <div id="source" class="v-flex"> |
| <div class="top-pane"> |
| <div class="test-tree" id="test_tree"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| // "Download" the coverage.dat file if the user presses ctrl-s |
| document.addEventListener('keydown', e => { |
| if (e.ctrlKey && e.key === 's') { |
| e.preventDefault(); |
| window.open("coverage.dat"); |
| } |
| }); |
| |
| let current = { |
| file: "", |
| start_line: 0, |
| start_column: 0, |
| end_line: 0, |
| end_column: 0, |
| }; |
| |
| let pending = { ...current }; |
| { |
| let url = new URL(location.href); |
| let query_string = url.search; |
| let search_params = new URLSearchParams(query_string); |
| var f = search_params.get('f'); |
| var s = search_params.get('s'); |
| var e = search_params.get('e'); |
| if (f) { |
| pending.file = f; |
| } |
| if (s) { |
| s = s.split('.'); |
| pending.start_line = s.length > 0 ? parseInt(s[0]) : 0; |
| pending.start_column = s.length > 1 ? parseInt(s[1]) : 0; |
| } |
| if (e) { |
| e = e.split('.'); |
| pending.end_line = e.length > 0 ? parseInt(e[0]) : 0; |
| pending.end_column = e.length > 1 ? parseInt(e[1]) : 0; |
| } |
| }; |
| |
| let set_location = (file, start_line, start_column, end_line, end_column) => { |
| current.file = file; |
| current.start_line = start_line; |
| current.start_column = start_column; |
| current.end_line = end_line; |
| current.end_column = end_column; |
| |
| let url = new URL(location.href); |
| let query_string = url.search; |
| // Don't use URLSearchParams, as it will unnecessarily escape |
| // characters, such as '/'. |
| url.search = "f=" + file + |
| "&s=" + start_line + "." + end_line + |
| "&e=" + end_line + "." + end_column; |
| window.history.replaceState(null, "", url.toString()); |
| }; |
| |
| let before = (line, col, span) => { |
| if (line < span[0]) { return true; } |
| if (line == span[0]) { return col < span[1]; } |
| return false; |
| }; |
| |
| let after = (line, col, span) => { |
| if (line > span[2]) { return true; } |
| if (line == span[2]) { return col > span[3]; } |
| return false; |
| }; |
| |
| let intersects = (span, from, to) => { |
| if (!before(to.line + 1, to.ch + 1, span) && |
| !after(from.line + 1, from.ch + 1, span)) { |
| return true; |
| } |
| return false; |
| }; |
| |
| let el_file_tree = document.getElementById("file_tree"); |
| let el_test_tree = document.getElementById("test_tree"); |
| let el_source = CodeMirror(document.getElementById("source"), { |
| lineNumbers: true, |
| theme: "seti", |
| mode: "text/x-c++src", |
| readOnly: true, |
| }); |
| |
| addEventListener('beforeunload', () => { |
| fetch("viewer.closed"); |
| }); |
| |
| window.onload = function () { |
| el_source.doc.setValue("// Loading... "); |
| fetch("coverage.dat").then(response => |
| response.arrayBuffer() |
| ).then(compressed => |
| pako.inflate(new Uint8Array(compressed)) |
| ).then(decompressed => |
| JSON.parse(new TextDecoder("utf-8").decode(decompressed)) |
| ).then(json => { |
| el_source.doc.setValue("// Select file from the left... "); |
| |
| let revision = json.r; |
| let names = json.n; |
| let tests = json.t; |
| let spans = json.s; |
| let files = json.f; |
| |
| let glob_group = (file, groupID, span_ids) => { |
| while (true) { |
| let group = file.g[groupID]; |
| group.s.forEach(span_id => span_ids.add(span_id)); |
| if (!group.e) { |
| break; |
| } |
| groupID = group.e; |
| }; |
| }; |
| |
| let coverage_spans = (file, data, span_ids) => { |
| if (data.g != undefined) { |
| glob_group(file, data.g, span_ids); |
| } |
| if (data.s != undefined) { |
| data.s.forEach(span_id => span_ids.add(span_id)); |
| } |
| }; |
| |
| let glob_node = (file, nodes, span_ids) => { |
| nodes.forEach(node => { |
| let data = node[1]; |
| coverage_spans(file, data, span_ids); |
| if (data.c) { |
| glob_node(file, data.c, span_ids); |
| } |
| }); |
| }; |
| |
| let markup = file => { |
| if (file.u) { |
| for (span of file.u) { |
| el_source.doc.markText( |
| { "line": span[0] - 1, "ch": span[1] - 1 }, |
| { "line": span[2] - 1, "ch": span[3] - 1 }, |
| { |
| // inclusiveLeft: true, |
| className: "without-coverage", |
| startStyle: "without-coverage-start", |
| endStyle: "without-coverage-end", |
| }); |
| } |
| } |
| let span_ids = new Set(); |
| glob_node(file, file.c, span_ids); |
| el_source.operation(() => { |
| span_ids.forEach((span_id) => { |
| let span = spans[span_id]; |
| el_source.doc.markText( |
| { "line": span[0] - 1, "ch": span[1] - 1 }, |
| { "line": span[2] - 1, "ch": span[3] - 1 }, |
| { |
| // inclusiveLeft: true, |
| className: "with-coverage", |
| startStyle: "with-coverage-start", |
| endStyle: "with-coverage-end", |
| }); |
| }); |
| }); |
| }; |
| |
| let NONE_OVERLAP = 0; |
| let ALL_OVERLAP = 1; |
| let SOME_OVERLAP = 2; |
| |
| let gather_overlaps = (parent, file, coverage_nodes, from, to) => { |
| if (!coverage_nodes) { return; } |
| |
| // Start by populating all the children nodes from the full |
| // test lists. This includes nodes that do not have child |
| // coverage data. |
| for (var index = 0; index < parent.test.length; index++) { |
| if (parent.children.has(index)) { continue; } |
| |
| let test_node = parent.test[index]; |
| let test_name_id = test_node[0]; |
| let test_name = names[test_name_id]; |
| let test_children = test_node[1]; |
| |
| let node = { |
| test: test_children, |
| name: parent.name ? parent.name + test_name : test_name, |
| overlaps: new Map(parent.overlaps), // map: span_id -> OVERLAP |
| children: new Map(), // map: index -> struct |
| is_leaf: test_children.length == 0, |
| }; |
| parent.children.set(index, node); |
| } |
| |
| // Now update the children that do have coverage data. |
| for (const coverage_node of coverage_nodes) { |
| let index = coverage_node[0]; |
| let coverage = coverage_node[1]; |
| let node = parent.children.get(index); |
| |
| let span_ids = new Set(); |
| coverage_spans(file, coverage, span_ids); |
| |
| // Update the node overlaps based on the coverage spans. |
| for (const span_id of span_ids) { |
| if (intersects(spans[span_id], from, to)) { |
| let overlap = parent.overlaps.get(span_id) || NONE_OVERLAP; |
| overlap = (overlap == NONE_OVERLAP) ? ALL_OVERLAP : NONE_OVERLAP; |
| node.overlaps.set(span_id, overlap); |
| } |
| } |
| |
| // Generate the child nodes. |
| gather_overlaps(node, file, coverage.c, from, to); |
| |
| // Gather all the spans used by the children. |
| let all_spans = new Set(); |
| for (const [_, child] of node.children) { |
| for (const [span, _] of child.overlaps) { |
| all_spans.add(span); |
| } |
| } |
| |
| // Update the node.overlaps based on the child overlaps. |
| for (const span of all_spans) { |
| let overlap = undefined; |
| for (const [_, child] of node.children) { |
| let child_overlap = child.overlaps.get(span); |
| child_overlap = (child_overlap == undefined) ? NONE_OVERLAP : child_overlap; |
| if (overlap == undefined) { |
| overlap = child_overlap; |
| } else { |
| overlap = (child_overlap == overlap) ? overlap : SOME_OVERLAP |
| } |
| } |
| node.overlaps.set(span, overlap); |
| } |
| |
| // If all the node.overlaps are NONE_OVERLAP or ALL_OVERLAP |
| // then there's no point holding on to the children - |
| // we know all transitive children either fully overlap |
| // or don't at all. |
| let some_overlap = false; |
| for (const [_, overlap] of node.overlaps) { |
| if (overlap == SOME_OVERLAP) { |
| some_overlap = true; |
| break; |
| } |
| } |
| |
| if (!some_overlap) { |
| node.children = null; |
| } |
| } |
| }; |
| |
| let gather_tests = (file, coverage_nodes, test_nodes, from, to) => { |
| let out = []; |
| |
| let traverse = (parent) => { |
| for (const [idx, node] of parent.children) { |
| let do_traversal = false; |
| let do_add = false; |
| |
| for (const [_, overlap] of node.overlaps) { |
| switch (overlap) { |
| case SOME_OVERLAP: |
| do_traversal = true; |
| break; |
| case ALL_OVERLAP: |
| do_add = true; |
| break; |
| } |
| } |
| |
| if (do_add) { |
| out.push(node.name + (node.is_leaf ? "" : "*")); |
| } else if (do_traversal) { |
| traverse(node); |
| } |
| } |
| }; |
| |
| let tree = { |
| test: test_nodes, |
| overlaps: new Map(), // map: span_id -> OVERLAP |
| children: new Map(), // map: index -> struct |
| }; |
| |
| gather_overlaps(tree, file, coverage_nodes, from, to); |
| |
| traverse(tree); |
| |
| return out; |
| }; |
| |
| let update_selection = (from, to) => { |
| if (from.line > to.line || (from.line == to.line && from.ch > to.ch)) { |
| let tmp = from; |
| from = to; |
| to = tmp; |
| } |
| |
| let file = files[current.file]; |
| let filtered = gather_tests(file, file.c, tests, from, to); |
| el_test_tree.innerHTML = ""; |
| filtered.forEach(test_name => { |
| let element = document.createElement('p'); |
| element.className = "test-name"; |
| element.innerText = test_name; |
| el_test_tree.appendChild(element); |
| }); |
| }; |
| |
| let load_source = (path) => { |
| if (!files[path]) { return; } |
| |
| for (let i = 0; i < el_file_tree.childNodes.length; i++) { |
| let el = el_file_tree.childNodes[i]; |
| if (el.path == path) { |
| el.classList.add("selected"); |
| } else { |
| el.classList.remove("selected"); |
| } |
| } |
| el_source.doc.setValue("// Loading... "); |
| fetch(`${path}`) |
| .then(response => response.text()) |
| .then(source => { |
| el_source.doc.setValue(source); |
| current.file = path; |
| markup(files[path]); |
| if (pending.start_line) { |
| var start = { |
| line: pending.start_line - 1, |
| ch: pending.start_column ? pending.start_column - 1 : 0 |
| }; |
| var end = { |
| line: pending.end_line ? pending.end_line - 1 : pending.start_line - 1, |
| ch: pending.end_column ? pending.end_column - 1 : 0 |
| }; |
| el_source.doc.setSelection(start, end); |
| update_selection(start, end); |
| } |
| pending = {}; |
| }); |
| }; |
| |
| el_source.doc.on("beforeSelectionChange", (doc, selection) => { |
| if (!files[current.file]) { return; } |
| |
| let range = selection.ranges[0]; |
| let from = range.head; |
| let to = range.anchor; |
| |
| set_location(current.file, from.line + 1, from.ch + 1, to.line + 1, to.ch + 1); |
| |
| update_selection(from, to); |
| }); |
| |
| for (const path of Object.keys(files)) { |
| let file = files[path]; |
| |
| let div = document.createElement('div'); |
| div.className = "file-div"; |
| div.onclick = () => { pending = {}; load_source(path); } |
| div.path = path; |
| el_file_tree.appendChild(div); |
| |
| let coverage = document.createElement('span'); |
| coverage.className = "file-coverage"; |
| if (file.p != undefined) { |
| let red = 1.0 - file.p; |
| let green = file.p; |
| let normalize = 1.0 / (red * red + green * green); |
| red *= normalize; |
| green *= normalize; |
| coverage.innerText = Math.round(file.p * 100); |
| coverage.style = "background-color: RGB(" + 255 * red + "," + 255 * green + ", 0" + ")"; |
| } else { |
| coverage.innerText = "--"; |
| coverage.style = "background-color: RGB(180,180,180)"; |
| } |
| div.appendChild(coverage); |
| |
| let filepath = document.createElement('span'); |
| filepath.className = "file-path"; |
| filepath.innerText = path; |
| div.appendChild(filepath); |
| } |
| |
| if (pending.file) { |
| load_source(pending.file); |
| } |
| }); |
| }; |
| |
| </script> |
| </body> |
| |
| </html> |
