diff options
Diffstat (limited to 'tests/gold/html/support')
| -rw-r--r-- | tests/gold/html/support/coverage_html.js | 640 | ||||
| -rw-r--r-- | tests/gold/html/support/keybd_closed.png | bin | 112 -> 9004 bytes | |||
| -rw-r--r-- | tests/gold/html/support/keybd_open.png | bin | 112 -> 9003 bytes | |||
| -rw-r--r-- | tests/gold/html/support/style.css | 126 |
4 files changed, 379 insertions, 387 deletions
diff --git a/tests/gold/html/support/coverage_html.js b/tests/gold/html/support/coverage_html.js index 6bc9fdf5..edd0782e 100644 --- a/tests/gold/html/support/coverage_html.js +++ b/tests/gold/html/support/coverage_html.js @@ -7,286 +7,271 @@ coverage = {}; -// Find all the elements with shortkey_* class, and use them to assign a shortcut key. -coverage.assign_shortkeys = function () { - $("*[class*='shortkey_']").each(function (i, e) { - $.each($(e).attr("class").split(" "), function (i, c) { - if (/^shortkey_/.test(c)) { - $(document).bind('keydown', c.substr(9), function () { - $(e).click(); - }); - } - }); - }); +// General helpers +function debounce(callback, wait) { + let timeoutId = null; + return function(...args) { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => { + callback.apply(this, args); + }, wait); + }; }; -// Create the events for the help panel. -coverage.wire_up_help_panel = function () { - $("#keyboard_icon").click(function () { - // Show the help panel, and position it so the keyboard icon in the - // panel is in the same place as the keyboard icon in the header. - $(".help_panel").show(); - var koff = $("#keyboard_icon").offset(); - var poff = $("#panel_icon").position(); - $(".help_panel").offset({ - top: koff.top-poff.top, - left: koff.left-poff.left +function checkVisible(element) { + var rect = element.getBoundingClientRect(); + var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); + return !(rect.bottom < 0 || rect.top - viewHeight >= 0); +} + +// Helpers for table sorting +function getCellValue(row, column = 0) { + const cell = row.cells[column] + if (cell.childElementCount == 1) { + const child = cell.firstElementChild + if (child instanceof HTMLTimeElement && child.dateTime) { + return child.dateTime + } else if (child instanceof HTMLDataElement && child.value) { + return child.value + } + } + return cell.innerText || cell.textContent; +} + +function rowComparator(rowA, rowB, column = 0) { + let valueA = getCellValue(rowA, column); + let valueB = getCellValue(rowB, column); + if (!isNaN(valueA) && !isNaN(valueB)) { + return valueA - valueB + } + return valueA.localeCompare(valueB, undefined, {numeric: true}); +} + +function sortColumn(th) { + // Get the current sorting direction of the selected header, + // clear state on other headers and then set the new sorting direction + const currentSortOrder = th.ariaSort; + [...th.parentElement.cells].forEach(header => header.ariaSort = "none"); + if (currentSortOrder === "none") { + th.ariaSort = th.dataset.defaultSortOrder || "ascending" + } else { + th.ariaSort = currentSortOrder === "ascending" ? "descending" : "ascending"; + } + + const column = [...th.parentElement.cells].indexOf(th) + + // Sort all rows and afterwards append them in order to move them in the DOM + Array.from(th.closest("table").querySelectorAll("tbody tr")) + .sort((rowA, rowB) => rowComparator(rowA, rowB, column) * (th.ariaSort === "ascending" ? 1 : -1)) + .forEach(tr => tr.parentElement.appendChild(tr) ); +} + +// Find all the elements with data-shortcut attribute, and use them to assign a shortcut key. +coverage.assign_shortkeys = function () { + document.querySelectorAll("[data-shortcut]").forEach(element => { + document.addEventListener("keypress", event => { + if (event.target.tagName.toLowerCase() === "input") { + return; // ignore keypress from search filter + } + if (event.key === element.dataset.shortcut) { + element.click(); + } }); }); - $("#panel_icon").click(function () { - $(".help_panel").hide(); - }); }; // Create the events for the filter box. coverage.wire_up_filter = function () { // Cache elements. - var table = $("table.index"); - var table_rows = table.find("tbody tr"); - var table_row_names = table_rows.find("td.name a"); - var no_rows = $("#no_rows"); - - // Create a duplicate table footer that we can modify with dynamic summed values. - var table_footer = $("table.index tfoot tr"); - var table_dynamic_footer = table_footer.clone(); - table_dynamic_footer.attr('class', 'total_dynamic hidden'); - table_footer.after(table_dynamic_footer); + const table = document.querySelector("table.index"); + const table_body_rows = table.querySelectorAll("tbody tr"); + const no_rows = document.getElementById("no_rows"); // Observe filter keyevents. - $("#filter").on("keyup change", $.debounce(150, function (event) { - var filter_value = $(this).val(); - - if (filter_value === "") { - // Filter box is empty, remove all filtering. - table_rows.removeClass("hidden"); - - // Show standard footer, hide dynamic footer. - table_footer.removeClass("hidden"); - table_dynamic_footer.addClass("hidden"); - - // Hide placeholder, show table. - if (no_rows.length > 0) { - no_rows.hide(); + document.getElementById("filter").addEventListener("input", debounce(event => { + // Keep running total of each metric, first index contains number of shown rows + const totals = new Array(table.rows[0].cells.length).fill(0); + // Accumulate the percentage as fraction + totals[totals.length - 1] = { "numer": 0, "denom": 0 }; + + // Hide / show elements. + table_body_rows.forEach(row => { + if (!row.cells[0].textContent.includes(event.target.value)) { + // hide + row.classList.add("hidden"); + return; } - table.show(); - } - else { - // Filter table items by value. - var hidden = 0; - var shown = 0; - - // Hide / show elements. - $.each(table_row_names, function () { - var element = $(this).parents("tr"); - - if ($(this).text().indexOf(filter_value) === -1) { - // hide - element.addClass("hidden"); - hidden++; - } - else { - // show - element.removeClass("hidden"); - shown++; - } - }); - - // Show placeholder if no rows will be displayed. - if (no_rows.length > 0) { - if (shown === 0) { - // Show placeholder, hide table. - no_rows.show(); - table.hide(); - } - else { - // Hide placeholder, show table. - no_rows.hide(); - table.show(); + // show + row.classList.remove("hidden"); + totals[0]++; + + for (let column = 1; column < totals.length; column++) { + // Accumulate dynamic totals + cell = row.cells[column] + if (column === totals.length - 1) { + // Last column contains percentage + const [numer, denom] = cell.dataset.ratio.split(" "); + totals[column]["numer"] += parseInt(numer, 10); + totals[column]["denom"] += parseInt(denom, 10); + } else { + totals[column] += parseInt(cell.textContent, 10); } } + }); - // Manage dynamic header: - if (hidden > 0) { - // Calculate new dynamic sum values based on visible rows. - for (var column = 2; column < 20; column++) { - // Calculate summed value. - var cells = table_rows.find('td:nth-child(' + column + ')'); - if (!cells.length) { - // No more columns...! - break; - } - - var sum = 0, numer = 0, denom = 0; - $.each(cells.filter(':visible'), function () { - var ratio = $(this).data("ratio"); - if (ratio) { - var splitted = ratio.split(" "); - numer += parseInt(splitted[0], 10); - denom += parseInt(splitted[1], 10); - } - else { - sum += parseInt(this.innerHTML, 10); - } - }); - - // Get footer cell element. - var footer_cell = table_dynamic_footer.find('td:nth-child(' + column + ')'); - - // Set value into dynamic footer cell element. - if (cells[0].innerHTML.indexOf('%') > -1) { - // Percentage columns use the numerator and denominator, - // and adapt to the number of decimal places. - var match = /\.([0-9]+)/.exec(cells[0].innerHTML); - var places = 0; - if (match) { - places = match[1].length; - } - var pct = numer * 100 / denom; - footer_cell.text(pct.toFixed(places) + '%'); - } - else { - footer_cell.text(sum); - } - } + console.log(totals) - // Hide standard footer, show dynamic footer. - table_footer.addClass("hidden"); - table_dynamic_footer.removeClass("hidden"); - } - else { - // Show standard footer, hide dynamic footer. - table_footer.removeClass("hidden"); - table_dynamic_footer.addClass("hidden"); + // Show placeholder if no rows will be displayed. + if (!totals[0]) { + // Show placeholder, hide table. + no_rows.style.display = "block"; + table.style.display = "none"; + return; + } + + // Hide placeholder, show table. + no_rows.style.display = null; + table.style.display = null; + + const footer = table.tFoot.rows[0]; + // Calculate new dynamic sum values based on visible rows. + for (let column = 1; column < totals.length; column++) { + // Get footer cell element. + const cell = footer.cells[column]; + + // Set value into dynamic footer cell element. + if (column === totals.length - 1) { + // Percentage column uses the numerator and denominator, + // and adapts to the number of decimal places. + const match = /\.([0-9]+)/.exec(cell.textContent); + const places = match ? match[1].length : 0; + const { numer, denom } = totals[column]; + cell.dataset.ratio = `${numer} ${denom}`; + // Check denom to prevent NaN if filtered files contain no statements + cell.textContent = denom + ? `${(numer * 100 / denom).toFixed(places)}%` + : `${(100).toFixed(places)}%`; + } else { + cell.textContent = totals[column]; } } })); // Trigger change event on setup, to force filter on page refresh // (filter value may still be present). - $("#filter").trigger("change"); + document.getElementById("filter").dispatchEvent(new Event("change")); }; +coverage.INDEX_SORT_STORAGE = "COVERAGE_INDEX_SORT"; + // Loaded on index.html -coverage.index_ready = function ($) { +coverage.index_ready = function () { + coverage.assign_shortkeys(); + coverage.wire_up_filter(); + document.querySelectorAll("[data-sortable] th[aria-sort]").forEach( + th => th.addEventListener("click", e => sortColumn(e.target)) + ); + // Look for a localStorage item containing previous sort settings: - var sort_list = []; - var storage_name = "COVERAGE_INDEX_SORT"; - var stored_list = undefined; - try { - stored_list = localStorage.getItem(storage_name); - } catch(err) {} + const stored_list = localStorage.getItem(coverage.INDEX_SORT_STORAGE); if (stored_list) { - sort_list = JSON.parse('[[' + stored_list + ']]'); + const {column, direction} = JSON.parse(stored_list); + const th = document.querySelector("[data-sortable]").tHead.rows[0].cells[column]; + th.ariaSort = direction === "ascending" ? "descending" : "ascending"; + th.click() } - // Create a new widget which exists only to save and restore - // the sort order: - $.tablesorter.addWidget({ - id: "persistentSort", - - // Format is called by the widget before displaying: - format: function (table) { - if (table.config.sortList.length === 0 && sort_list.length > 0) { - // This table hasn't been sorted before - we'll use - // our stored settings: - $(table).trigger('sorton', [sort_list]); - } - else { - // This is not the first load - something has - // already defined sorting so we'll just update - // our stored value to match: - sort_list = table.config.sortList; - } - } - }); - - // Configure our tablesorter to handle the variable number of - // columns produced depending on report options: - var headers = []; - var col_count = $("table.index > thead > tr > th").length; - - headers[0] = { sorter: 'text' }; - for (i = 1; i < col_count-1; i++) { - headers[i] = { sorter: 'digit' }; - } - headers[col_count-1] = { sorter: 'percent' }; - - // Enable the table sorter: - $("table.index").tablesorter({ - widgets: ['persistentSort'], - headers: headers - }); - - coverage.assign_shortkeys(); - coverage.wire_up_help_panel(); - coverage.wire_up_filter(); - // Watch for page unload events so we can save the final sort settings: - $(window).on("unload", function () { - try { - localStorage.setItem(storage_name, sort_list.toString()) - } catch(err) {} + window.addEventListener("unload", function () { + const th = document.querySelector('[data-sortable] th[aria-sort="ascending"], [data-sortable] [aria-sort="descending"]'); + if (!th) { + return; + } + localStorage.setItem(coverage.INDEX_SORT_STORAGE, JSON.stringify({ + column: [...th.parentElement.cells].indexOf(th), + direction: th.ariaSort, + })); }); }; // -- pyfile stuff -- -coverage.pyfile_ready = function ($) { +coverage.LINE_FILTERS_STORAGE = "COVERAGE_LINE_FILTERS"; + +coverage.pyfile_ready = function () { // If we're directed to a particular line number, highlight the line. var frag = location.hash; if (frag.length > 2 && frag[1] === 't') { - $(frag).addClass('highlight'); + document.getElementById(frag.substring(1)).classList.add("highlight"); coverage.set_sel(parseInt(frag.substr(2), 10)); - } - else { + } else { coverage.set_sel(0); } - $(document) - .bind('keydown', 'j', coverage.to_next_chunk_nicely) - .bind('keydown', 'k', coverage.to_prev_chunk_nicely) - .bind('keydown', '0', coverage.to_top) - .bind('keydown', '1', coverage.to_first_chunk) - ; + document.querySelector(".button_toggle_run").addEventListener("click", coverage.toggle_lines); + document.querySelector(".button_toggle_mis").addEventListener("click", coverage.toggle_lines); + document.querySelector(".button_toggle_exc").addEventListener("click", coverage.toggle_lines); + document.querySelector(".button_toggle_par").addEventListener("click", coverage.toggle_lines); - $(".button_toggle_run").click(function (evt) {coverage.toggle_lines(evt.target, "run");}); - $(".button_toggle_exc").click(function (evt) {coverage.toggle_lines(evt.target, "exc");}); - $(".button_toggle_mis").click(function (evt) {coverage.toggle_lines(evt.target, "mis");}); - $(".button_toggle_par").click(function (evt) {coverage.toggle_lines(evt.target, "par");}); + document.querySelector(".button_next_chunk").addEventListener("click", coverage.to_next_chunk_nicely); + document.querySelector(".button_prev_chunk").addEventListener("click", coverage.to_prev_chunk_nicely); + document.querySelector(".button_top_of_page").addEventListener("click", coverage.to_top); + document.querySelector(".button_first_chunk").addEventListener("click", coverage.to_first_chunk); - coverage.assign_shortkeys(); - coverage.wire_up_help_panel(); + coverage.filters = undefined; + try { + coverage.filters = localStorage.getItem(coverage.LINE_FILTERS_STORAGE); + } catch(err) {} + + if (coverage.filters) { + coverage.filters = JSON.parse(coverage.filters); + } + else { + coverage.filters = {run: false, exc: true, mis: true, par: true}; + } + + for (cls in coverage.filters) { + coverage.set_line_visibilty(cls, coverage.filters[cls]); + } + coverage.assign_shortkeys(); coverage.init_scroll_markers(); + coverage.wire_up_sticky_header(); // Rebuild scroll markers when the window height changes. - $(window).resize(coverage.build_scroll_markers); + window.addEventListener("resize", coverage.build_scroll_markers); +}; + +coverage.toggle_lines = function (event) { + const btn = event.target; + const category = btn.value + const show = !btn.classList.contains("show_" + category); + coverage.set_line_visibilty(category, show); + coverage.build_scroll_markers(); + coverage.filters[category] = show; + try { + localStorage.setItem(coverage.LINE_FILTERS_STORAGE, JSON.stringify(coverage.filters)); + } catch(err) {} }; -coverage.toggle_lines = function (btn, cls) { - btn = $(btn); - var show = "show_"+cls; - if (btn.hasClass(show)) { - $("#source ." + cls).removeClass(show); - btn.removeClass(show); +coverage.set_line_visibilty = function (category, should_show) { + const cls = "show_" + category; + const btn = document.querySelector(".button_toggle_" + category); + if (should_show) { + document.querySelectorAll("#source ." + category).forEach(e => e.classList.add(cls)); + btn.classList.add(cls); } else { - $("#source ." + cls).addClass(show); - btn.addClass(show); + document.querySelectorAll("#source ." + category).forEach(e => e.classList.remove(cls)); + btn.classList.remove(cls); } - coverage.build_scroll_markers(); }; // Return the nth line div. coverage.line_elt = function (n) { - return $("#t" + n); -}; - -// Return the nth line number div. -coverage.num_elt = function (n) { - return $("#n" + n); + return document.getElementById("t" + n); }; // Set the selection. b and e are line numbers. @@ -310,25 +295,26 @@ coverage.to_first_chunk = function () { // Return a string indicating what kind of chunk this line belongs to, // or null if not a chunk. coverage.chunk_indicator = function (line_elt) { - var klass = line_elt.attr('class'); - if (klass) { - var m = klass.match(/\bshow_\w+\b/); - if (m) { - return m[0]; - } + const classes = line_elt.className; + if (!classes) { + return null; } - return null; + const match = classes.match(/\bshow_\w+\b/); + if (!match) { + return null; + } + return match[0]; }; coverage.to_next_chunk = function () { - var c = coverage; + const c = coverage; // Find the start of the next colored chunk. var probe = c.sel_end; var chunk_indicator, probe_line; while (true) { probe_line = c.line_elt(probe); - if (probe_line.length === 0) { + if (!probe_line) { return; } chunk_indicator = c.chunk_indicator(probe_line); @@ -353,7 +339,7 @@ coverage.to_next_chunk = function () { }; coverage.to_prev_chunk = function () { - var c = coverage; + const c = coverage; // Find the end of the prev colored chunk. var probe = c.sel_begin-1; @@ -365,7 +351,7 @@ coverage.to_prev_chunk = function () { while (probe > 0 && !chunk_indicator) { probe--; probe_line = c.line_elt(probe); - if (probe_line.length === 0) { + if (!probe_line) { return; } chunk_indicator = c.chunk_indicator(probe_line); @@ -385,28 +371,6 @@ coverage.to_prev_chunk = function () { c.show_selection(); }; -// Return the line number of the line nearest pixel position pos -coverage.line_at_pos = function (pos) { - var l1 = coverage.line_elt(1), - l2 = coverage.line_elt(2), - result; - if (l1.length && l2.length) { - var l1_top = l1.offset().top, - line_height = l2.offset().top - l1_top, - nlines = (pos - l1_top) / line_height; - if (nlines < 1) { - result = 1; - } - else { - result = Math.ceil(nlines); - } - } - else { - result = 1; - } - return result; -}; - // Returns 0, 1, or 2: how many of the two ends of the selection are on // the screen right now? coverage.selection_ends_on_screen = function () { @@ -414,31 +378,49 @@ coverage.selection_ends_on_screen = function () { return 0; } - var top = coverage.line_elt(coverage.sel_begin); - var next = coverage.line_elt(coverage.sel_end-1); + const begin = coverage.line_elt(coverage.sel_begin); + const end = coverage.line_elt(coverage.sel_end-1); return ( - (top.isOnScreen() ? 1 : 0) + - (next.isOnScreen() ? 1 : 0) + (checkVisible(begin) ? 1 : 0) + + (checkVisible(end) ? 1 : 0) ); }; coverage.to_next_chunk_nicely = function () { - coverage.finish_scrolling(); if (coverage.selection_ends_on_screen() === 0) { - // The selection is entirely off the screen: select the top line on - // the screen. - var win = $(window); - coverage.select_line_or_chunk(coverage.line_at_pos(win.scrollTop())); + // The selection is entirely off the screen: + // Set the top line on the screen as selection. + + // This will select the top-left of the viewport + // As this is most likely the span with the line number we take the parent + const line = document.elementFromPoint(0, 0).parentElement; + if (line.parentElement !== document.getElementById("source")) { + // The element is not a source line but the header or similar + coverage.select_line_or_chunk(1); + } else { + // We extract the line number from the id + coverage.select_line_or_chunk(parseInt(line.id.substring(1), 10)); + } } coverage.to_next_chunk(); }; coverage.to_prev_chunk_nicely = function () { - coverage.finish_scrolling(); if (coverage.selection_ends_on_screen() === 0) { - var win = $(window); - coverage.select_line_or_chunk(coverage.line_at_pos(win.scrollTop() + win.height())); + // The selection is entirely off the screen: + // Set the lowest line on the screen as selection. + + // This will select the bottom-left of the viewport + // As this is most likely the span with the line number we take the parent + const line = document.elementFromPoint(document.documentElement.clientHeight-1, 0).parentElement; + if (line.parentElement !== document.getElementById("source")) { + // The element is not a source line but the header or similar + coverage.select_line_or_chunk(coverage.lines_len); + } else { + // We extract the line number from the id + coverage.select_line_or_chunk(parseInt(line.id.substring(1), 10)); + } } coverage.to_prev_chunk(); }; @@ -484,106 +466,100 @@ coverage.select_line_or_chunk = function (lineno) { }; coverage.show_selection = function () { - var c = coverage; - // Highlight the lines in the chunk - $(".linenos .highlight").removeClass("highlight"); - for (var probe = c.sel_begin; probe > 0 && probe < c.sel_end; probe++) { - c.num_elt(probe).addClass("highlight"); + document.querySelectorAll("#source .highlight").forEach(e => e.classList.remove("highlight")); + for (let probe = coverage.sel_begin; probe < coverage.sel_end; probe++) { + coverage.line_elt(probe).classList.add("highlight"); } - c.scroll_to_selection(); + coverage.scroll_to_selection(); }; coverage.scroll_to_selection = function () { // Scroll the page if the chunk isn't fully visible. if (coverage.selection_ends_on_screen() < 2) { - // Need to move the page. The html,body trick makes it scroll in all - // browsers, got it from http://stackoverflow.com/questions/3042651 - var top = coverage.line_elt(coverage.sel_begin); - var top_pos = parseInt(top.offset().top, 10); - coverage.scroll_window(top_pos - 30); + const element = coverage.line_elt(coverage.sel_begin); + coverage.scroll_window(element.offsetTop - 30); } }; coverage.scroll_window = function (to_pos) { - $("html,body").animate({scrollTop: to_pos}, 200); -}; - -coverage.finish_scrolling = function () { - $("html,body").stop(true, true); + window.scroll({top: to_pos, behavior: "smooth"}); }; coverage.init_scroll_markers = function () { - var c = coverage; // Init some variables - c.lines_len = $('#source p').length; - c.body_h = $('body').height(); - c.header_h = $('div#header').height(); + coverage.lines_len = document.querySelectorAll('#source > p').length; // Build html - c.build_scroll_markers(); + coverage.build_scroll_markers(); }; coverage.build_scroll_markers = function () { - var c = coverage, - min_line_height = 3, - max_line_height = 10, - visible_window_h = $(window).height(); - - c.lines_to_mark = $('#source').find('p.show_run, p.show_mis, p.show_exc, p.show_exc, p.show_par'); - $('#scroll_marker').remove(); + const temp_scroll_marker = document.getElementById('scroll_marker') + if (temp_scroll_marker) temp_scroll_marker.remove(); // Don't build markers if the window has no scroll bar. - if (c.body_h <= visible_window_h) { + if (document.body.scrollHeight <= window.innerHeight) { return; } - $("body").append("<div id='scroll_marker'> </div>"); - var scroll_marker = $('#scroll_marker'), - marker_scale = scroll_marker.height() / c.body_h, - line_height = scroll_marker.height() / c.lines_len; + const marker_scale = window.innerHeight / document.body.scrollHeight; + const line_height = Math.min(Math.max(3, window.innerHeight / coverage.lines_len), 10); - // Line height must be between the extremes. - if (line_height > min_line_height) { - if (line_height > max_line_height) { - line_height = max_line_height; - } - } - else { - line_height = min_line_height; - } + let previous_line = -99, last_mark, last_top; - var previous_line = -99, - last_mark, - last_top, - offsets = {}; - - // Calculate line offsets outside loop to prevent relayouts - c.lines_to_mark.each(function() { - offsets[this.id] = $(this).offset().top; - }); - c.lines_to_mark.each(function () { - var id_name = $(this).attr('id'), - line_top = Math.round(offsets[id_name] * marker_scale), - line_number = parseInt(id_name.substring(1, id_name.length)); + const scroll_marker = document.createElement("div"); + scroll_marker.id = "scroll_marker"; + document.getElementById('source').querySelectorAll( + 'p.show_run, p.show_mis, p.show_exc, p.show_exc, p.show_par' + ).forEach(element => { + const line_top = Math.floor(element.offsetTop * marker_scale); + const line_number = parseInt(element.id.substr(1)); if (line_number === previous_line + 1) { // If this solid missed block just make previous mark higher. - last_mark.css({ - 'height': line_top + line_height - last_top - }); - } - else { + last_mark.style.height = `${line_top + line_height - last_top}px`; + } else { // Add colored line in scroll_marker block. - scroll_marker.append('<div id="m' + line_number + '" class="marker"></div>'); - last_mark = $('#m' + line_number); - last_mark.css({ - 'height': line_height, - 'top': line_top - }); + last_mark = document.createElement("div"); + last_mark.id = `m${line_number}`; + last_mark.classList.add("marker"); + last_mark.style.height = `${line_height}px`; + last_mark.style.top = `${line_top}px`; + scroll_marker.append(last_mark); last_top = line_top; } previous_line = line_number; }); + + // Append last to prevent layout calculation + document.body.append(scroll_marker); }; + +coverage.wire_up_sticky_header = function () { + const header = document.querySelector('header'); + const header_bottom = ( + header.querySelector('.content h2').getBoundingClientRect().top - + header.getBoundingClientRect().top + ); + + function updateHeader() { + if (window.scrollY > header_bottom) { + header.classList.add('sticky'); + } else { + header.classList.remove('sticky'); + } + } + + window.addEventListener('scroll', updateHeader); + updateHeader(); +}; + +document.addEventListener("DOMContentLoaded", () => { + if (document.body.classList.contains("indexfile")) { + coverage.index_ready(); + } else { + coverage.pyfile_ready(); + } +}); diff --git a/tests/gold/html/support/keybd_closed.png b/tests/gold/html/support/keybd_closed.png Binary files differindex db114023..ba119c47 100644 --- a/tests/gold/html/support/keybd_closed.png +++ b/tests/gold/html/support/keybd_closed.png diff --git a/tests/gold/html/support/keybd_open.png b/tests/gold/html/support/keybd_open.png Binary files differindex db114023..a8bac6c9 100644 --- a/tests/gold/html/support/keybd_open.png +++ b/tests/gold/html/support/keybd_open.png diff --git a/tests/gold/html/support/style.css b/tests/gold/html/support/style.css index 3e7f9b66..2cabc74c 100644 --- a/tests/gold/html/support/style.css +++ b/tests/gold/html/support/style.css @@ -28,23 +28,39 @@ a.nav { text-decoration: none; color: inherit; } a.nav:hover { text-decoration: underline; color: inherit; } -#header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #eee; } +header { background: #f8f8f8; width: 100%; z-index: 2; border-bottom: 1px solid #ccc; } -@media (prefers-color-scheme: dark) { #header { background: black; } } +@media (prefers-color-scheme: dark) { header { background: black; } } -@media (prefers-color-scheme: dark) { #header { border-color: #333; } } +@media (prefers-color-scheme: dark) { header { border-color: #333; } } -.indexfile #footer { margin: 1rem 3rem; } +header .content { padding: 1rem 3.5rem; } -.pyfile #footer { margin: 1rem 1rem; } +header h2 { margin-top: .5em; font-size: 1em; } -#footer .content { padding: 0; color: #666; font-style: italic; } +header.sticky { position: fixed; left: 0; right: 0; height: 2.5em; } -@media (prefers-color-scheme: dark) { #footer .content { color: #aaa; } } +header.sticky .text { display: none; } -#index { margin: 1rem 0 0 3rem; } +header.sticky h1, header.sticky h2 { font-size: 1em; margin-top: 0; display: inline-block; } -#header .content { padding: 1rem 3rem; } +header.sticky .content { padding: 0.5rem 3.5rem; } + +header.sticky .content p { font-size: 1em; } + +header.sticky ~ #source { padding-top: 6.5em; } + +main { position: relative; z-index: 1; } + +.indexfile footer { margin: 1rem 3.5rem; } + +.pyfile footer { margin: 1rem 1rem; } + +footer .content { padding: 0; color: #666; font-style: italic; } + +@media (prefers-color-scheme: dark) { footer .content { color: #aaa; } } + +#index { margin: 1rem 0 0 3.5rem; } h1 { font-size: 1.25em; display: inline-block; } @@ -60,75 +76,75 @@ h1 { font-size: 1.25em; display: inline-block; } #filter_container input:focus { border-color: #007acc; } -h2.stats { margin-top: .5em; font-size: 1em; } +header button { font-family: inherit; font-size: inherit; border: 1px solid; border-radius: .2em; color: inherit; padding: .1em .5em; margin: 1px calc(.1em + 1px); cursor: pointer; border-color: #ccc; } -.stats button { font-family: inherit; font-size: inherit; border: 1px solid; border-radius: .2em; color: inherit; padding: .1em .5em; margin: 1px calc(.1em + 1px); cursor: pointer; border-color: #ccc; } +@media (prefers-color-scheme: dark) { header button { border-color: #444; } } -@media (prefers-color-scheme: dark) { .stats button { border-color: #444; } } +header button:active, header button:focus { outline: 2px dashed #007acc; } -.stats button:active, .stats button:focus { outline: 2px dashed #007acc; } +header button.run { background: #eeffee; } -.stats button:active, .stats button:focus { outline: 2px dashed #007acc; } +@media (prefers-color-scheme: dark) { header button.run { background: #373d29; } } -.stats button.run { background: #eeffee; } +header button.run.show_run { background: #dfd; border: 2px solid #00dd00; margin: 0 .1em; } -@media (prefers-color-scheme: dark) { .stats button.run { background: #373d29; } } +@media (prefers-color-scheme: dark) { header button.run.show_run { background: #373d29; } } -.stats button.run.show_run { background: #dfd; border: 2px solid #00dd00; margin: 0 .1em; } +header button.mis { background: #ffeeee; } -@media (prefers-color-scheme: dark) { .stats button.run.show_run { background: #373d29; } } +@media (prefers-color-scheme: dark) { header button.mis { background: #4b1818; } } -.stats button.mis { background: #ffeeee; } +header button.mis.show_mis { background: #fdd; border: 2px solid #ff0000; margin: 0 .1em; } -@media (prefers-color-scheme: dark) { .stats button.mis { background: #4b1818; } } +@media (prefers-color-scheme: dark) { header button.mis.show_mis { background: #4b1818; } } -.stats button.mis.show_mis { background: #fdd; border: 2px solid #ff0000; margin: 0 .1em; } +header button.exc { background: #f7f7f7; } -@media (prefers-color-scheme: dark) { .stats button.mis.show_mis { background: #4b1818; } } +@media (prefers-color-scheme: dark) { header button.exc { background: #333; } } -.stats button.exc { background: #f7f7f7; } +header button.exc.show_exc { background: #eee; border: 2px solid #808080; margin: 0 .1em; } -@media (prefers-color-scheme: dark) { .stats button.exc { background: #333; } } +@media (prefers-color-scheme: dark) { header button.exc.show_exc { background: #333; } } -.stats button.exc.show_exc { background: #eee; border: 2px solid #808080; margin: 0 .1em; } +header button.par { background: #ffffd5; } -@media (prefers-color-scheme: dark) { .stats button.exc.show_exc { background: #333; } } +@media (prefers-color-scheme: dark) { header button.par { background: #650; } } -.stats button.par { background: #ffffd5; } +header button.par.show_par { background: #ffa; border: 2px solid #bbbb00; margin: 0 .1em; } -@media (prefers-color-scheme: dark) { .stats button.par { background: #650; } } +@media (prefers-color-scheme: dark) { header button.par.show_par { background: #650; } } -.stats button.par.show_par { background: #ffa; border: 2px solid #dddd00; margin: 0 .1em; } +#help_panel, #source p .annotate.long { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; color: #333; padding: .25em .5em; } -@media (prefers-color-scheme: dark) { .stats button.par.show_par { background: #650; } } +#source p .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; } -.help_panel, #source p .annotate.long { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; color: #333; padding: .25em .5em; } +#help_panel_wrapper { float: right; position: relative; } -#source p .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; } +#keyboard_icon { margin: 5px; } -#keyboard_icon { float: right; margin: 5px; cursor: pointer; } +#help_panel_state { display: none; } -.help_panel { padding: .5em; border: 1px solid #883; } +#help_panel { top: 25px; right: 0; padding: .75em; border: 1px solid #883; } -.help_panel .legend { font-style: italic; margin-bottom: 1em; } +#help_panel .legend { font-style: italic; margin-bottom: 1em; } -.indexfile .help_panel { width: 20em; min-height: 4em; } +.indexfile #help_panel { width: 25em; } -.pyfile .help_panel { width: 16em; min-height: 8em; } +.pyfile #help_panel { width: 18em; } -#panel_icon { float: right; cursor: pointer; } +#help_panel_state:checked ~ #help_panel { display: block; } -.keyhelp { margin: .75em; } +.keyhelp { margin-top: .75em; } -.keyhelp .key { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em .35em; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: bold; background: #eee; } +kbd { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em .35em; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: bold; background: #eee; border-radius: 3px; } -#source { padding: 1em 0 1em 3rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; } +#source { padding: 1em 0 1em 3.5rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; } -#source p { position: relative; white-space: pre; } +#source p { margin-top: -4em; padding-top: 4em; position: relative; white-space: pre; } #source p * { box-sizing: border-box; } -#source p .n { float: left; text-align: right; width: 3rem; box-sizing: border-box; margin-left: -3rem; padding-right: 1em; color: #999; } +#source p .n { float: left; text-align: right; width: 3.5rem; box-sizing: border-box; margin-left: -3.5rem; padding-right: 1em; color: #999; } @media (prefers-color-scheme: dark) { #source p .n { color: #777; } } @@ -154,13 +170,13 @@ h2.stats { margin-top: .5em; font-size: 1em; } #source p .t .com { color: #008000; font-style: italic; line-height: 1px; } -@media (prefers-color-scheme: dark) { #source p .t .com { color: #6A9955; } } +@media (prefers-color-scheme: dark) { #source p .t .com { color: #6a9955; } } #source p .t .key { font-weight: bold; line-height: 1px; } -#source p .t .str { color: #0451A5; } +#source p .t .str { color: #0451a5; } -@media (prefers-color-scheme: dark) { #source p .t .str { color: #9CDCFE; } } +@media (prefers-color-scheme: dark) { #source p .t .str { color: #9cdcfe; } } #source p.mis .t { border-left: 0.2em solid #ff0000; } @@ -192,7 +208,7 @@ h2.stats { margin-top: .5em; font-size: 1em; } @media (prefers-color-scheme: dark) { #source p.exc.show_exc .t:hover { background: #3c3c3c; } } -#source p.par .t { border-left: 0.2em solid #dddd00; } +#source p.par .t { border-left: 0.2em solid #bbbb00; } #source p.par.show_par .t { background: #ffa; } @@ -218,13 +234,13 @@ h2.stats { margin-top: .5em; font-size: 1em; } #source p input ~ .r label.ctx::before { content: "▶ "; } -#source p input ~ .r label.ctx:hover { background: #d5f7ff; color: #666; } +#source p input ~ .r label.ctx:hover { background: #e8f4ff; color: #666; } @media (prefers-color-scheme: dark) { #source p input ~ .r label.ctx:hover { background: #0f3a42; } } @media (prefers-color-scheme: dark) { #source p input ~ .r label.ctx:hover { color: #aaa; } } -#source p input:checked ~ .r label.ctx { background: #aef; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; } +#source p input:checked ~ .r label.ctx { background: #d0e8ff; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; } @media (prefers-color-scheme: dark) { #source p input:checked ~ .r label.ctx { background: #056; } } @@ -238,7 +254,7 @@ h2.stats { margin-top: .5em; font-size: 1em; } @media (prefers-color-scheme: dark) { #source p label.ctx { color: #777; } } -#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #aef; border-radius: .25em; margin-right: 1.75em; } +#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #d0e8ff; border-radius: .25em; margin-right: 1.75em; } @media (prefers-color-scheme: dark) { #source p .ctxs { background: #056; } } @@ -262,13 +278,13 @@ h2.stats { margin-top: .5em; font-size: 1em; } @media (prefers-color-scheme: dark) { #index th:hover { background: #333; } } -#index th.headerSortDown, #index th.headerSortUp { white-space: nowrap; background: #eee; } +#index th[aria-sort="ascending"], #index th[aria-sort="descending"] { white-space: nowrap; background: #eee; padding-left: .5em; } -@media (prefers-color-scheme: dark) { #index th.headerSortDown, #index th.headerSortUp { background: #333; } } +@media (prefers-color-scheme: dark) { #index th[aria-sort="ascending"], #index th[aria-sort="descending"] { background: #333; } } -#index th.headerSortDown:after { content: " ↑"; } +#index th[aria-sort="ascending"]::after { content: "↑"; } -#index th.headerSortUp:after { content: " ↓"; } +#index th[aria-sort="descending"]::after { content: "↓"; } #index td.name a { text-decoration: none; color: inherit; } @@ -280,7 +296,7 @@ h2.stats { margin-top: .5em; font-size: 1em; } #index tr.file:hover td.name { text-decoration: underline; color: inherit; } -#scroll_marker { position: fixed; right: 0; top: 0; width: 16px; height: 100%; background: #fff; border-left: 1px solid #eee; will-change: transform; } +#scroll_marker { position: fixed; z-index: 3; right: 0; top: 0; width: 16px; height: 100%; background: #fff; border-left: 1px solid #eee; will-change: transform; } @media (prefers-color-scheme: dark) { #scroll_marker { background: #1e1e1e; } } |
