src/eric7/DebugClients/Python/coverage/htmlfiles/coverage_html.js

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

eric ide

mercurial