style: clean up #1587

4 files changed, 26 insertions, 10 deletions

diff --git a/tests/gold/html/contexts/two_tests_py.html b/tests/gold/html/contexts/two_tests_py.html
index 86239bd8..cbb6e573 100644
--- a/tests/gold/html/contexts/two_tests_py.html
+++ b/tests/gold/html/contexts/two_tests_py.html
@@ -6,7 +6,7 @@
     <link rel="icon" sizes="32x32" href="favicon_32.png">
     <link rel="stylesheet" href="style.css" type="text/css">
     <script type="text/javascript">
-      contexts = {
+        contexts = {
   "0": "(empty)",
   "1": "two_tests.test_two",
   "2": "two_tests.test_one"
@@ -72,7 +72,7 @@
             <a id="nextFileLink" class="nav" href="index.html">&#xbb; next</a>
             &nbsp; &nbsp; &nbsp;
             <a class="nav" href="https://coverage.readthedocs.io/en/7.2.3a0.dev1">coverage.py v7.2.3a0.dev1</a>,
-            created at 2023-03-22 16:13 +0100
+            created at 2023-03-22 13:16 -0400
         </p>
         <aside class="hidden">
             <button type="button" class="button_next_chunk" data-shortcut="j"/>
@@ -118,7 +118,7 @@
             <a id="nextFileLink" class="nav" href="index.html">&#xbb; next</a>
             &nbsp; &nbsp; &nbsp;
             <a class="nav" href="https://coverage.readthedocs.io/en/7.2.3a0.dev1">coverage.py v7.2.3a0.dev1</a>,
-            created at 2023-03-22 16:13 +0100
+            created at 2023-03-22 13:16 -0400
         </p>
     </div>
 </footer>
diff --git a/tests/gold/html/styled/style.css b/tests/gold/html/styled/style.css
index ace48c2c..11b24c4e 100644
--- a/tests/gold/html/styled/style.css
+++ b/tests/gold/html/styled/style.css
@@ -262,8 +262,6 @@ kbd { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em
 
 @media (prefers-color-scheme: dark) { #source p .ctxs { background: #056; } }
 
-#source p .ctxs span { display: block; text-align: right; }
-
 #index { font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875em; }
 
 #index table.index { margin-left: -.5em; }
diff --git a/tests/gold/html/support/coverage_html.js b/tests/gold/html/support/coverage_html.js
index 084a4970..1cd2b5d4 100644
--- a/tests/gold/html/support/coverage_html.js
+++ b/tests/gold/html/support/coverage_html.js
@@ -166,7 +166,7 @@ coverage.wire_up_filter = function () {
 
     // Trigger change event on setup, to force filter on page refresh
     // (filter value may still be present).
-    document.getElementById("filter").dispatchEvent(new Event("change"));
+    document.getElementById("filter").dispatchEvent(new Event("input"));
 };
 
 coverage.INDEX_SORT_STORAGE = "COVERAGE_INDEX_SORT_2";
@@ -212,6 +212,11 @@ coverage.index_ready = function () {
 coverage.LINE_FILTERS_STORAGE = "COVERAGE_LINE_FILTERS";
 
 coverage.pyfile_ready = function () {
+    cboxes = document.querySelectorAll('[id^=ctxs]')
+    cboxes.forEach(function(cbox) {
+        cbox.addEventListener("click", coverage.showContexts)
+    });
+
     // If we're directed to a particular line number, highlight the line.
     var frag = location.hash;
     if (frag.length > 2 && frag[1] === 't') {
@@ -553,7 +558,7 @@ coverage.build_scroll_markers = function () {
         '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));
+        const line_number = parseInt(element.querySelector(".n a").id.substr(1));
 
         if (line_number === previous_line + 1) {
             // If this solid missed block just make previous mark higher.
@@ -595,10 +600,25 @@ coverage.wire_up_sticky_header = function () {
     updateHeader();
 };
 
+coverage.showContexts = function (e) {
+    span = e.target.nextElementSibling.nextElementSibling;
+    span_text = span.textContent;
+
+    if (/^[0-9,]+$/.test(span_text)) {
+        span.textContent = "";
+        span_text.split(",").forEach(function(s) {
+            ctx = contexts[s];
+            span.appendChild(document.createTextNode(ctx));
+            span.appendChild(document.createElement("br"));
+        })
+    }
+};
+
 document.addEventListener("DOMContentLoaded", () => {
     if (document.body.classList.contains("indexfile")) {
         coverage.index_ready();
     } else {
         coverage.pyfile_ready();
     }
+
 });
diff --git a/tests/gold/html/support/style.css b/tests/gold/html/support/style.css
index d6768a35..11b24c4e 100644
--- a/tests/gold/html/support/style.css
+++ b/tests/gold/html/support/style.css
@@ -258,12 +258,10 @@ kbd { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .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: #d0e8ff; 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; text-align: right; }
 
 @media (prefers-color-scheme: dark) { #source p .ctxs { background: #056; } }
 
-#source p .ctxs span { display: block; text-align: right; }
-
 #index { font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875em; }
 
 #index table.index { margin-left: -.5em; }