test: update support files for gold output

Author: nedbat

tests/gold/html/support/coverage_html.js

@@ -36,12 +36,12 @@ function on_click(sel, fn) {
 function getCellValue(row, column = 0) {
     const cell = row.cells[column]  // nosemgrep: eslint.detect-object-injection
     if (cell.childElementCount == 1) {
-        const child = cell.firstElementChild
-        if (child instanceof HTMLTimeElement && child.dateTime) {
-            return child.dateTime
-        } else if (child instanceof HTMLDataElement && child.value) {
-            console.log("child.value", child.value);
-            return child.value
+        var child = cell.firstElementChild;
+        if (child.tagName === "A") {
+            child = child.firstElementChild;
+        }
+        if (child instanceof HTMLDataElement && child.value) {
+            return child.value;
         }
     }
     return cell.innerText || cell.textContent;
@@ -51,28 +51,37 @@ 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 - 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
+    // clear state on other headers and then set the new sorting direction.
     const currentSortOrder = th.getAttribute("aria-sort");
     [...th.parentElement.cells].forEach(header => header.setAttribute("aria-sort", "none"));
+    var direction;
     if (currentSortOrder === "none") {
-        th.setAttribute("aria-sort", th.dataset.defaultSortOrder || "ascending");
-    } else {
-        th.setAttribute("aria-sort", currentSortOrder === "ascending" ? "descending" : "ascending");
+        direction = th.dataset.defaultSortOrder || "ascending";
+    }
+    else if (currentSortOrder === "ascending") {
+        direction = "descending";
     }
+    else {
+        direction = "ascending";
+    }
+    th.setAttribute("aria-sort", direction);
 
     const column = [...th.parentElement.cells].indexOf(th)
 
-    // Sort all rows and afterwards append them in order to move them in the DOM
+    // 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.getAttribute("aria-sort") === "ascending" ? 1 : -1))
-        .forEach(tr => tr.parentElement.appendChild(tr) );
+        .sort((rowA, rowB) => rowComparator(rowA, rowB, column) * (direction === "ascending" ? 1 : -1))
+        .forEach(tr => tr.parentElement.appendChild(tr));
+
+    // Save the sort order for next time.
+    localStorage.setItem(coverage.INDEX_SORT_STORAGE, JSON.stringify({column, direction}));
 }
 
 // Find all the elements with data-shortcut attribute, and use them to assign a shortcut key.
@@ -105,11 +114,17 @@ coverage.wire_up_filter = function () {
 
         // Hide / show elements.
         table_body_rows.forEach(row => {
-            show = false;
+            var show = false;
+            var target = event.target.value;
+            var casefold = (target === target.toLowerCase());
             for (let column = 0; column < totals.length; column++) {
                 cell = row.cells[column];
                 if (cell.classList.contains("name")) {
-                    if (cell.textContent.includes(event.target.value)) {
+                    var celltext = cell.textContent;
+                    if (casefold) {
+                        celltext = celltext.toLowerCase();
+                    }
+                    if (celltext.includes(target)) {
                         show = true;
                     }
                 }
@@ -136,7 +151,8 @@ coverage.wire_up_filter = function () {
                     const [numer, denom] = cell.dataset.ratio.split(" ");
                     totals[column]["numer"] += parseInt(numer, 10);  // nosemgrep: eslint.detect-object-injection
                     totals[column]["denom"] += parseInt(denom, 10);  // nosemgrep: eslint.detect-object-injection
-                } else {
+                }
+                else {
                     totals[column] += parseInt(cell.textContent, 10);  // nosemgrep: eslint.detect-object-injection
                 }
             }
@@ -175,7 +191,8 @@ coverage.wire_up_filter = function () {
                 cell.textContent = denom
                     ? `${(numer * 100 / denom).toFixed(places)}%`
                     : `${(100).toFixed(places)}%`;
-            } else {
+            }
+            else {
                 cell.textContent = totals[column];  // nosemgrep: eslint.detect-object-injection
             }
         }
@@ -186,37 +203,31 @@ coverage.wire_up_filter = function () {
     document.getElementById("filter").dispatchEvent(new Event("input"));
 };
 
-coverage.INDEX_SORT_STORAGE = "COVERAGE_INDEX_SORT_2";
-
-// Loaded on index.html
-coverage.index_ready = function () {
-    coverage.assign_shortkeys();
-    coverage.wire_up_filter();
+// Set up the click-to-sort columns.
+coverage.wire_up_sorting = function () {
     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 column = 0, direction = "ascending";
     const stored_list = localStorage.getItem(coverage.INDEX_SORT_STORAGE);
-
     if (stored_list) {
-        const {column, direction} = JSON.parse(stored_list);
-        const th = document.querySelector("[data-sortable]").tHead.rows[0].cells[column];  // nosemgrep: eslint.detect-object-injection
-        th.setAttribute("aria-sort", direction === "ascending" ? "descending" : "ascending");
-        th.click()
+        ({column, direction} = JSON.parse(stored_list));
     }
 
-    // Watch for page unload events so we can save the final sort settings:
-    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.getAttribute("aria-sort"),
-        }));
-    });
+    const th = document.querySelector("[data-sortable]").tHead.rows[0].cells[column];  // nosemgrep: eslint.detect-object-injection
+    th.setAttribute("aria-sort", direction === "ascending" ? "descending" : "ascending");
+    th.click()
+};
+
+coverage.INDEX_SORT_STORAGE = "COVERAGE_INDEX_SORT_2";
+
+// Loaded on index.html
+coverage.index_ready = function () {
+    coverage.assign_shortkeys();
+    coverage.wire_up_filter();
+    coverage.wire_up_sorting();
 
     on_click(".button_prev_file", coverage.to_prev_file);
     on_click(".button_next_file", coverage.to_next_file);
@@ -234,7 +245,8 @@ coverage.pyfile_ready = function () {
     if (frag.length > 2 && frag[1] === "t") {
         document.querySelector(frag).closest(".n").classList.add("highlight");
         coverage.set_sel(parseInt(frag.substr(2), 10));
-    } else {
+    }
+    else {
         coverage.set_sel(0);
     }
 
@@ -458,7 +470,8 @@ coverage.to_next_chunk_nicely = function () {
         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 {
+        }
+        else {
             // We extract the line number from the id
             coverage.select_line_or_chunk(parseInt(line.id.substring(1), 10));
         }
@@ -477,7 +490,8 @@ coverage.to_prev_chunk_nicely = function () {
         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 {
+        }
+        else {
             // We extract the line number from the id
             coverage.select_line_or_chunk(parseInt(line.id.substring(1), 10));
         }
@@ -579,7 +593,8 @@ coverage.build_scroll_markers = function () {
         if (line_number === previous_line + 1) {
             // If this solid missed block just make previous mark higher.
             last_mark.style.height = `${line_top + line_height - last_top}px`;
-        } else {
+        }
+        else {
             // Add colored line in scroll_marker block.
             last_mark = document.createElement("div");
             last_mark.id = `m${line_number}`;
@@ -607,7 +622,8 @@ coverage.wire_up_sticky_header = function () {
     function updateHeader() {
         if (window.scrollY > header_bottom) {
             header.classList.add("sticky");
-        } else {
+        }
+        else {
             header.classList.remove("sticky");
         }
     }
@@ -635,7 +651,8 @@ coverage.expand_contexts = function (e) {
 document.addEventListener("DOMContentLoaded", () => {
     if (document.body.classList.contains("indexfile")) {
         coverage.index_ready();
-    } else {
+    }
+    else {
         coverage.pyfile_ready();
     }
 });

tests/gold/html/support/style.css

@@ -280,13 +280,15 @@ kbd { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em
 
 @media (prefers-color-scheme: dark) { #index th:hover { background: #333; } }
 
+#index th .arrows { color: #666; font-size: 85%; font-family: sans-serif; font-style: normal; pointer-events: none; }
+
 #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[aria-sort="ascending"], #index th[aria-sort="descending"] { background: #333; } }
 
-#index th[aria-sort="ascending"]::after { font-family: sans-serif; content: " ↑"; }
+#index th[aria-sort="ascending"] .arrows::after { content: " ▲"; }
 
-#index th[aria-sort="descending"]::after { font-family: sans-serif; content: " ↓"; }
+#index th[aria-sort="descending"] .arrows::after { content: " ▼"; }
 
 #index td.name { font-size: 1.15em; }