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

branch
eric7
changeset 8775
0802ae193343
child 9099
0e511e0e94a3
equal deleted inserted replaced
8774:d728227e8ebb 8775:0802ae193343
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 });

eric ide

mercurial