|
1 // Licensed under the Apache License: http://www.apache.org/licenses/LICENSE-2.0 |
|
2 // For details: https://github.com/nedbat/coveragepy/blob/master/NOTICE.txt |
|
3 |
|
4 // Coverage.py HTML report browser code. |
|
5 /*jslint browser: true, sloppy: true, vars: true, plusplus: true, maxerr: 50, indent: 4 */ |
|
6 /*global coverage: true, document, window, $ */ |
|
7 |
|
8 coverage = {}; |
|
9 |
|
10 // General helpers |
|
11 function debounce(callback, wait) { |
|
12 let timeoutId = null; |
|
13 return function(...args) { |
|
14 clearTimeout(timeoutId); |
|
15 timeoutId = setTimeout(() => { |
|
16 callback.apply(this, args); |
|
17 }, wait); |
|
18 }; |
|
19 }; |
|
20 |
|
21 function checkVisible(element) { |
|
22 const rect = element.getBoundingClientRect(); |
|
23 const viewBottom = Math.max(document.documentElement.clientHeight, window.innerHeight); |
|
24 const viewTop = 30; |
|
25 return !(rect.bottom < viewTop || rect.top >= viewBottom); |
|
26 } |
|
27 |
|
28 // Helpers for table sorting |
|
29 function getCellValue(row, column = 0) { |
|
30 const cell = row.cells[column] |
|
31 if (cell.childElementCount == 1) { |
|
32 const child = cell.firstElementChild |
|
33 if (child instanceof HTMLTimeElement && child.dateTime) { |
|
34 return child.dateTime |
|
35 } else if (child instanceof HTMLDataElement && child.value) { |
|
36 return child.value |
|
37 } |
|
38 } |
|
39 return cell.innerText || cell.textContent; |
|
40 } |
|
41 |
|
42 function rowComparator(rowA, rowB, column = 0) { |
|
43 let valueA = getCellValue(rowA, column); |
|
44 let valueB = getCellValue(rowB, column); |
|
45 if (!isNaN(valueA) && !isNaN(valueB)) { |
|
46 return valueA - valueB |
|
47 } |
|
48 return valueA.localeCompare(valueB, undefined, {numeric: true}); |
|
49 } |
|
50 |
|
51 function sortColumn(th) { |
|
52 // Get the current sorting direction of the selected header, |
|
53 // clear state on other headers and then set the new sorting direction |
|
54 const currentSortOrder = th.getAttribute("aria-sort"); |
|
55 [...th.parentElement.cells].forEach(header => header.setAttribute("aria-sort", "none")); |
|
56 if (currentSortOrder === "none") { |
|
57 th.setAttribute("aria-sort", th.dataset.defaultSortOrder || "ascending"); |
|
58 } else { |
|
59 th.setAttribute("aria-sort", currentSortOrder === "ascending" ? "descending" : "ascending"); |
|
60 } |
|
61 |
|
62 const column = [...th.parentElement.cells].indexOf(th) |
|
63 |
|
64 // Sort all rows and afterwards append them in order to move them in the DOM |
|
65 Array.from(th.closest("table").querySelectorAll("tbody tr")) |
|
66 .sort((rowA, rowB) => rowComparator(rowA, rowB, column) * (th.getAttribute("aria-sort") === "ascending" ? 1 : -1)) |
|
67 .forEach(tr => tr.parentElement.appendChild(tr) ); |
|
68 } |
|
69 |
|
70 // Find all the elements with data-shortcut attribute, and use them to assign a shortcut key. |
|
71 coverage.assign_shortkeys = function () { |
|
72 document.querySelectorAll("[data-shortcut]").forEach(element => { |
|
73 document.addEventListener("keypress", event => { |
|
74 if (event.target.tagName.toLowerCase() === "input") { |
|
75 return; // ignore keypress from search filter |
|
76 } |
|
77 if (event.key === element.dataset.shortcut) { |
|
78 element.click(); |
|
79 } |
|
80 }); |
|
81 }); |
|
82 }; |
|
83 |
|
84 // Create the events for the filter box. |
|
85 coverage.wire_up_filter = function () { |
|
86 // Cache elements. |
|
87 const table = document.querySelector("table.index"); |
|
88 const table_body_rows = table.querySelectorAll("tbody tr"); |
|
89 const no_rows = document.getElementById("no_rows"); |
|
90 |
|
91 // Observe filter keyevents. |
|
92 document.getElementById("filter").addEventListener("input", debounce(event => { |
|
93 // Keep running total of each metric, first index contains number of shown rows |
|
94 const totals = new Array(table.rows[0].cells.length).fill(0); |
|
95 // Accumulate the percentage as fraction |
|
96 totals[totals.length - 1] = { "numer": 0, "denom": 0 }; |
|
97 |
|
98 // Hide / show elements. |
|
99 table_body_rows.forEach(row => { |
|
100 if (!row.cells[0].textContent.includes(event.target.value)) { |
|
101 // hide |
|
102 row.classList.add("hidden"); |
|
103 return; |
|
104 } |
|
105 |
|
106 // show |
|
107 row.classList.remove("hidden"); |
|
108 totals[0]++; |
|
109 |
|
110 for (let column = 1; column < totals.length; column++) { |
|
111 // Accumulate dynamic totals |
|
112 cell = row.cells[column] |
|
113 if (column === totals.length - 1) { |
|
114 // Last column contains percentage |
|
115 const [numer, denom] = cell.dataset.ratio.split(" "); |
|
116 totals[column]["numer"] += parseInt(numer, 10); |
|
117 totals[column]["denom"] += parseInt(denom, 10); |
|
118 } else { |
|
119 totals[column] += parseInt(cell.textContent, 10); |
|
120 } |
|
121 } |
|
122 }); |
|
123 |
|
124 // Show placeholder if no rows will be displayed. |
|
125 if (!totals[0]) { |
|
126 // Show placeholder, hide table. |
|
127 no_rows.style.display = "block"; |
|
128 table.style.display = "none"; |
|
129 return; |
|
130 } |
|
131 |
|
132 // Hide placeholder, show table. |
|
133 no_rows.style.display = null; |
|
134 table.style.display = null; |
|
135 |
|
136 const footer = table.tFoot.rows[0]; |
|
137 // Calculate new dynamic sum values based on visible rows. |
|
138 for (let column = 1; column < totals.length; column++) { |
|
139 // Get footer cell element. |
|
140 const cell = footer.cells[column]; |
|
141 |
|
142 // Set value into dynamic footer cell element. |
|
143 if (column === totals.length - 1) { |
|
144 // Percentage column uses the numerator and denominator, |
|
145 // and adapts to the number of decimal places. |
|
146 const match = /\.([0-9]+)/.exec(cell.textContent); |
|
147 const places = match ? match[1].length : 0; |
|
148 const { numer, denom } = totals[column]; |
|
149 cell.dataset.ratio = `${numer} ${denom}`; |
|
150 // Check denom to prevent NaN if filtered files contain no statements |
|
151 cell.textContent = denom |
|
152 ? `${(numer * 100 / denom).toFixed(places)}%` |
|
153 : `${(100).toFixed(places)}%`; |
|
154 } else { |
|
155 cell.textContent = totals[column]; |
|
156 } |
|
157 } |
|
158 })); |
|
159 |
|
160 // Trigger change event on setup, to force filter on page refresh |
|
161 // (filter value may still be present). |
|
162 document.getElementById("filter").dispatchEvent(new Event("change")); |
|
163 }; |
|
164 |
|
165 coverage.INDEX_SORT_STORAGE = "COVERAGE_INDEX_SORT_2"; |
|
166 |
|
167 // Loaded on index.html |
|
168 coverage.index_ready = function () { |
|
169 coverage.assign_shortkeys(); |
|
170 coverage.wire_up_filter(); |
|
171 document.querySelectorAll("[data-sortable] th[aria-sort]").forEach( |
|
172 th => th.addEventListener("click", e => sortColumn(e.target)) |
|
173 ); |
|
174 |
|
175 // Look for a localStorage item containing previous sort settings: |
|
176 const stored_list = localStorage.getItem(coverage.INDEX_SORT_STORAGE); |
|
177 |
|
178 if (stored_list) { |
|
179 const {column, direction} = JSON.parse(stored_list); |
|
180 const th = document.querySelector("[data-sortable]").tHead.rows[0].cells[column]; |
|
181 th.setAttribute("aria-sort", direction === "ascending" ? "descending" : "ascending"); |
|
182 th.click() |
|
183 } |
|
184 |
|
185 // Watch for page unload events so we can save the final sort settings: |
|
186 window.addEventListener("unload", function () { |
|
187 const th = document.querySelector('[data-sortable] th[aria-sort="ascending"], [data-sortable] [aria-sort="descending"]'); |
|
188 if (!th) { |
|
189 return; |
|
190 } |
|
191 localStorage.setItem(coverage.INDEX_SORT_STORAGE, JSON.stringify({ |
|
192 column: [...th.parentElement.cells].indexOf(th), |
|
193 direction: th.getAttribute("aria-sort"), |
|
194 })); |
|
195 }); |
|
196 }; |
|
197 |
|
198 // -- pyfile stuff -- |
|
199 |
|
200 coverage.LINE_FILTERS_STORAGE = "COVERAGE_LINE_FILTERS"; |
|
201 |
|
202 coverage.pyfile_ready = function () { |
|
203 // If we're directed to a particular line number, highlight the line. |
|
204 var frag = location.hash; |
|
205 if (frag.length > 2 && frag[1] === 't') { |
|
206 document.querySelector(frag).closest(".n").classList.add("highlight"); |
|
207 coverage.set_sel(parseInt(frag.substr(2), 10)); |
|
208 } else { |
|
209 coverage.set_sel(0); |
|
210 } |
|
211 |
|
212 const on_click = function(sel, fn) { |
|
213 const elt = document.querySelector(sel); |
|
214 if (elt) { |
|
215 elt.addEventListener("click", fn); |
|
216 } |
|
217 } |
|
218 on_click(".button_toggle_run", coverage.toggle_lines); |
|
219 on_click(".button_toggle_mis", coverage.toggle_lines); |
|
220 on_click(".button_toggle_exc", coverage.toggle_lines); |
|
221 on_click(".button_toggle_par", coverage.toggle_lines); |
|
222 |
|
223 on_click(".button_next_chunk", coverage.to_next_chunk_nicely); |
|
224 on_click(".button_prev_chunk", coverage.to_prev_chunk_nicely); |
|
225 on_click(".button_top_of_page", coverage.to_top); |
|
226 on_click(".button_first_chunk", coverage.to_first_chunk); |
|
227 |
|
228 coverage.filters = undefined; |
|
229 try { |
|
230 coverage.filters = localStorage.getItem(coverage.LINE_FILTERS_STORAGE); |
|
231 } catch(err) {} |
|
232 |
|
233 if (coverage.filters) { |
|
234 coverage.filters = JSON.parse(coverage.filters); |
|
235 } |
|
236 else { |
|
237 coverage.filters = {run: false, exc: true, mis: true, par: true}; |
|
238 } |
|
239 |
|
240 for (cls in coverage.filters) { |
|
241 coverage.set_line_visibilty(cls, coverage.filters[cls]); |
|
242 } |
|
243 |
|
244 coverage.assign_shortkeys(); |
|
245 coverage.init_scroll_markers(); |
|
246 coverage.wire_up_sticky_header(); |
|
247 |
|
248 // Rebuild scroll markers when the window height changes. |
|
249 window.addEventListener("resize", coverage.build_scroll_markers); |
|
250 }; |
|
251 |
|
252 coverage.toggle_lines = function (event) { |
|
253 const btn = event.target.closest("button"); |
|
254 const category = btn.value |
|
255 const show = !btn.classList.contains("show_" + category); |
|
256 coverage.set_line_visibilty(category, show); |
|
257 coverage.build_scroll_markers(); |
|
258 coverage.filters[category] = show; |
|
259 try { |
|
260 localStorage.setItem(coverage.LINE_FILTERS_STORAGE, JSON.stringify(coverage.filters)); |
|
261 } catch(err) {} |
|
262 }; |
|
263 |
|
264 coverage.set_line_visibilty = function (category, should_show) { |
|
265 const cls = "show_" + category; |
|
266 const btn = document.querySelector(".button_toggle_" + category); |
|
267 if (btn) { |
|
268 if (should_show) { |
|
269 document.querySelectorAll("#source ." + category).forEach(e => e.classList.add(cls)); |
|
270 btn.classList.add(cls); |
|
271 } |
|
272 else { |
|
273 document.querySelectorAll("#source ." + category).forEach(e => e.classList.remove(cls)); |
|
274 btn.classList.remove(cls); |
|
275 } |
|
276 } |
|
277 }; |
|
278 |
|
279 // Return the nth line div. |
|
280 coverage.line_elt = function (n) { |
|
281 return document.getElementById("t" + n)?.closest("p"); |
|
282 }; |
|
283 |
|
284 // Set the selection. b and e are line numbers. |
|
285 coverage.set_sel = function (b, e) { |
|
286 // The first line selected. |
|
287 coverage.sel_begin = b; |
|
288 // The next line not selected. |
|
289 coverage.sel_end = (e === undefined) ? b+1 : e; |
|
290 }; |
|
291 |
|
292 coverage.to_top = function () { |
|
293 coverage.set_sel(0, 1); |
|
294 coverage.scroll_window(0); |
|
295 }; |
|
296 |
|
297 coverage.to_first_chunk = function () { |
|
298 coverage.set_sel(0, 1); |
|
299 coverage.to_next_chunk(); |
|
300 }; |
|
301 |
|
302 // Return a string indicating what kind of chunk this line belongs to, |
|
303 // or null if not a chunk. |
|
304 coverage.chunk_indicator = function (line_elt) { |
|
305 const classes = line_elt?.className; |
|
306 if (!classes) { |
|
307 return null; |
|
308 } |
|
309 const match = classes.match(/\bshow_\w+\b/); |
|
310 if (!match) { |
|
311 return null; |
|
312 } |
|
313 return match[0]; |
|
314 }; |
|
315 |
|
316 coverage.to_next_chunk = function () { |
|
317 const c = coverage; |
|
318 |
|
319 // Find the start of the next colored chunk. |
|
320 var probe = c.sel_end; |
|
321 var chunk_indicator, probe_line; |
|
322 while (true) { |
|
323 probe_line = c.line_elt(probe); |
|
324 if (!probe_line) { |
|
325 return; |
|
326 } |
|
327 chunk_indicator = c.chunk_indicator(probe_line); |
|
328 if (chunk_indicator) { |
|
329 break; |
|
330 } |
|
331 probe++; |
|
332 } |
|
333 |
|
334 // There's a next chunk, `probe` points to it. |
|
335 var begin = probe; |
|
336 |
|
337 // Find the end of this chunk. |
|
338 var next_indicator = chunk_indicator; |
|
339 while (next_indicator === chunk_indicator) { |
|
340 probe++; |
|
341 probe_line = c.line_elt(probe); |
|
342 next_indicator = c.chunk_indicator(probe_line); |
|
343 } |
|
344 c.set_sel(begin, probe); |
|
345 c.show_selection(); |
|
346 }; |
|
347 |
|
348 coverage.to_prev_chunk = function () { |
|
349 const c = coverage; |
|
350 |
|
351 // Find the end of the prev colored chunk. |
|
352 var probe = c.sel_begin-1; |
|
353 var probe_line = c.line_elt(probe); |
|
354 if (!probe_line) { |
|
355 return; |
|
356 } |
|
357 var chunk_indicator = c.chunk_indicator(probe_line); |
|
358 while (probe > 1 && !chunk_indicator) { |
|
359 probe--; |
|
360 probe_line = c.line_elt(probe); |
|
361 if (!probe_line) { |
|
362 return; |
|
363 } |
|
364 chunk_indicator = c.chunk_indicator(probe_line); |
|
365 } |
|
366 |
|
367 // There's a prev chunk, `probe` points to its last line. |
|
368 var end = probe+1; |
|
369 |
|
370 // Find the beginning of this chunk. |
|
371 var prev_indicator = chunk_indicator; |
|
372 while (prev_indicator === chunk_indicator) { |
|
373 probe--; |
|
374 if (probe <= 0) { |
|
375 return; |
|
376 } |
|
377 probe_line = c.line_elt(probe); |
|
378 prev_indicator = c.chunk_indicator(probe_line); |
|
379 } |
|
380 c.set_sel(probe+1, end); |
|
381 c.show_selection(); |
|
382 }; |
|
383 |
|
384 // Returns 0, 1, or 2: how many of the two ends of the selection are on |
|
385 // the screen right now? |
|
386 coverage.selection_ends_on_screen = function () { |
|
387 if (coverage.sel_begin === 0) { |
|
388 return 0; |
|
389 } |
|
390 |
|
391 const begin = coverage.line_elt(coverage.sel_begin); |
|
392 const end = coverage.line_elt(coverage.sel_end-1); |
|
393 |
|
394 return ( |
|
395 (checkVisible(begin) ? 1 : 0) |
|
396 + (checkVisible(end) ? 1 : 0) |
|
397 ); |
|
398 }; |
|
399 |
|
400 coverage.to_next_chunk_nicely = function () { |
|
401 if (coverage.selection_ends_on_screen() === 0) { |
|
402 // The selection is entirely off the screen: |
|
403 // Set the top line on the screen as selection. |
|
404 |
|
405 // This will select the top-left of the viewport |
|
406 // As this is most likely the span with the line number we take the parent |
|
407 const line = document.elementFromPoint(0, 0).parentElement; |
|
408 if (line.parentElement !== document.getElementById("source")) { |
|
409 // The element is not a source line but the header or similar |
|
410 coverage.select_line_or_chunk(1); |
|
411 } else { |
|
412 // We extract the line number from the id |
|
413 coverage.select_line_or_chunk(parseInt(line.id.substring(1), 10)); |
|
414 } |
|
415 } |
|
416 coverage.to_next_chunk(); |
|
417 }; |
|
418 |
|
419 coverage.to_prev_chunk_nicely = function () { |
|
420 if (coverage.selection_ends_on_screen() === 0) { |
|
421 // The selection is entirely off the screen: |
|
422 // Set the lowest line on the screen as selection. |
|
423 |
|
424 // This will select the bottom-left of the viewport |
|
425 // As this is most likely the span with the line number we take the parent |
|
426 const line = document.elementFromPoint(document.documentElement.clientHeight-1, 0).parentElement; |
|
427 if (line.parentElement !== document.getElementById("source")) { |
|
428 // The element is not a source line but the header or similar |
|
429 coverage.select_line_or_chunk(coverage.lines_len); |
|
430 } else { |
|
431 // We extract the line number from the id |
|
432 coverage.select_line_or_chunk(parseInt(line.id.substring(1), 10)); |
|
433 } |
|
434 } |
|
435 coverage.to_prev_chunk(); |
|
436 }; |
|
437 |
|
438 // Select line number lineno, or if it is in a colored chunk, select the |
|
439 // entire chunk |
|
440 coverage.select_line_or_chunk = function (lineno) { |
|
441 var c = coverage; |
|
442 var probe_line = c.line_elt(lineno); |
|
443 if (!probe_line) { |
|
444 return; |
|
445 } |
|
446 var the_indicator = c.chunk_indicator(probe_line); |
|
447 if (the_indicator) { |
|
448 // The line is in a highlighted chunk. |
|
449 // Search backward for the first line. |
|
450 var probe = lineno; |
|
451 var indicator = the_indicator; |
|
452 while (probe > 0 && indicator === the_indicator) { |
|
453 probe--; |
|
454 probe_line = c.line_elt(probe); |
|
455 if (!probe_line) { |
|
456 break; |
|
457 } |
|
458 indicator = c.chunk_indicator(probe_line); |
|
459 } |
|
460 var begin = probe + 1; |
|
461 |
|
462 // Search forward for the last line. |
|
463 probe = lineno; |
|
464 indicator = the_indicator; |
|
465 while (indicator === the_indicator) { |
|
466 probe++; |
|
467 probe_line = c.line_elt(probe); |
|
468 indicator = c.chunk_indicator(probe_line); |
|
469 } |
|
470 |
|
471 coverage.set_sel(begin, probe); |
|
472 } |
|
473 else { |
|
474 coverage.set_sel(lineno); |
|
475 } |
|
476 }; |
|
477 |
|
478 coverage.show_selection = function () { |
|
479 // Highlight the lines in the chunk |
|
480 document.querySelectorAll("#source .highlight").forEach(e => e.classList.remove("highlight")); |
|
481 for (let probe = coverage.sel_begin; probe < coverage.sel_end; probe++) { |
|
482 coverage.line_elt(probe).querySelector(".n").classList.add("highlight"); |
|
483 } |
|
484 |
|
485 coverage.scroll_to_selection(); |
|
486 }; |
|
487 |
|
488 coverage.scroll_to_selection = function () { |
|
489 // Scroll the page if the chunk isn't fully visible. |
|
490 if (coverage.selection_ends_on_screen() < 2) { |
|
491 const element = coverage.line_elt(coverage.sel_begin); |
|
492 coverage.scroll_window(element.offsetTop - 60); |
|
493 } |
|
494 }; |
|
495 |
|
496 coverage.scroll_window = function (to_pos) { |
|
497 window.scroll({top: to_pos, behavior: "smooth"}); |
|
498 }; |
|
499 |
|
500 coverage.init_scroll_markers = function () { |
|
501 // Init some variables |
|
502 coverage.lines_len = document.querySelectorAll('#source > p').length; |
|
503 |
|
504 // Build html |
|
505 coverage.build_scroll_markers(); |
|
506 }; |
|
507 |
|
508 coverage.build_scroll_markers = function () { |
|
509 const temp_scroll_marker = document.getElementById('scroll_marker') |
|
510 if (temp_scroll_marker) temp_scroll_marker.remove(); |
|
511 // Don't build markers if the window has no scroll bar. |
|
512 if (document.body.scrollHeight <= window.innerHeight) { |
|
513 return; |
|
514 } |
|
515 |
|
516 const marker_scale = window.innerHeight / document.body.scrollHeight; |
|
517 const line_height = Math.min(Math.max(3, window.innerHeight / coverage.lines_len), 10); |
|
518 |
|
519 let previous_line = -99, last_mark, last_top; |
|
520 |
|
521 const scroll_marker = document.createElement("div"); |
|
522 scroll_marker.id = "scroll_marker"; |
|
523 document.getElementById('source').querySelectorAll( |
|
524 'p.show_run, p.show_mis, p.show_exc, p.show_exc, p.show_par' |
|
525 ).forEach(element => { |
|
526 const line_top = Math.floor(element.offsetTop * marker_scale); |
|
527 const line_number = parseInt(element.id.substr(1)); |
|
528 |
|
529 if (line_number === previous_line + 1) { |
|
530 // If this solid missed block just make previous mark higher. |
|
531 last_mark.style.height = `${line_top + line_height - last_top}px`; |
|
532 } else { |
|
533 // Add colored line in scroll_marker block. |
|
534 last_mark = document.createElement("div"); |
|
535 last_mark.id = `m${line_number}`; |
|
536 last_mark.classList.add("marker"); |
|
537 last_mark.style.height = `${line_height}px`; |
|
538 last_mark.style.top = `${line_top}px`; |
|
539 scroll_marker.append(last_mark); |
|
540 last_top = line_top; |
|
541 } |
|
542 |
|
543 previous_line = line_number; |
|
544 }); |
|
545 |
|
546 // Append last to prevent layout calculation |
|
547 document.body.append(scroll_marker); |
|
548 }; |
|
549 |
|
550 coverage.wire_up_sticky_header = function () { |
|
551 const header = document.querySelector('header'); |
|
552 const header_bottom = ( |
|
553 header.querySelector('.content h2').getBoundingClientRect().top - |
|
554 header.getBoundingClientRect().top |
|
555 ); |
|
556 |
|
557 function updateHeader() { |
|
558 if (window.scrollY > header_bottom) { |
|
559 header.classList.add('sticky'); |
|
560 } else { |
|
561 header.classList.remove('sticky'); |
|
562 } |
|
563 } |
|
564 |
|
565 window.addEventListener('scroll', updateHeader); |
|
566 updateHeader(); |
|
567 }; |
|
568 |
|
569 document.addEventListener("DOMContentLoaded", () => { |
|
570 if (document.body.classList.contains("indexfile")) { |
|
571 coverage.index_ready(); |
|
572 } else { |
|
573 coverage.pyfile_ready(); |
|
574 } |
|
575 }); |