fix: put contexts dict in <script> and reveal them using JavaScript (#1587)

* Put contexts dict in <script> and reveal them using JavaScript

Fixes #1584

* Address review comments

* coverage/htmlfiles/style.css: Align the contexts to the right

* coverage/htmlfiles/style.scss: Match style.css

* coverage/html.py: Fix linting and mypy errors

* two_tests_py.html: make update-gold

5 files changed, 46 insertions, 5 deletions

diff --git a/coverage/html.py b/coverage/html.py
index ae09bc37..23fba3f0 100644
--- a/coverage/html.py
+++ b/coverage/html.py
@@ -10,6 +10,7 @@ import json
 import os
 import re
 import shutil
+from collections import Counter
 
 from dataclasses import dataclass
 from typing import Any, Dict, Iterable, List, Optional, Tuple, TYPE_CHECKING, cast
@@ -84,6 +85,7 @@ class LineData:
     short_annotations: List[str]
     long_annotations: List[str]
     html: str = ""
+    context_str: Optional[str] = None
     annotate: Optional[str] = None
     annotate_long: Optional[str] = None
     css_class: str = ""
@@ -367,6 +369,11 @@ class HtmlReporter:
 
         # Write the HTML page for this file.
         file_data = self.datagen.data_for_file(ftr.fr, ftr.analysis)
+
+        contexts = Counter(c for cline in file_data.lines for c in cline.contexts)
+        context_codes = {y: i for (i, y) in enumerate(x[0] for x in contexts.most_common())}
+        contexts_json = json.dumps({v: k for (k, v) in context_codes.items()}, indent=2)
+
         for ldata in file_data.lines:
             # Build the HTML for the line.
             html_parts = []
@@ -380,6 +387,9 @@ class HtmlReporter:
                     )
             ldata.html = ''.join(html_parts)
 
+            ldata.context_str = ",".join(
+                str(context_codes[c_context]) for c_context in ldata.context_list)
+
             if ldata.short_annotations:
                 # 202F is NARROW NO-BREAK SPACE.
                 # 219B is RIGHTWARDS ARROW WITH STROKE.
@@ -412,6 +422,10 @@ class HtmlReporter:
                 )
             ldata.css_class = ' '.join(css_classes) or "pln"
 
+        if context_codes:
+            file_data.__dict__["contexts_json"] = contexts_json
+        else:
+            file_data.__dict__["contexts_json"] = None
         html_path = os.path.join(self.directory, ftr.html_filename)
         html = self.source_tmpl.render({
             **file_data.__dict__,
diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
index 1c4eb988..8b7fb96f 100644
--- a/coverage/htmlfiles/coverage_html.js
+++ b/coverage/htmlfiles/coverage_html.js
@@ -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') {
@@ -595,10 +600,26 @@ 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/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index 8fcfc660..1921e1c2 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -11,6 +11,13 @@
     {% if extra_css %}
         <link rel="stylesheet" href="{{ extra_css }}" type="text/css">
     {% endif %}
+
+    {% if contexts_json %}
+    <script type="text/javascript">
+      contexts = {{ contexts_json }}
+    </script>
+    {% endif %}
+
     <script type="text/javascript" src="coverage_html.js" defer></script>
 </head>
 <body class="pyfile">
@@ -117,11 +124,9 @@
                 {% endif %}
             </span>
             {# Things that should appear below the line. #}
-            {% if line.context_list %}
+            {% if line.context_str %}
                 <span class="ctxs">
-                    {% for context in line.context_list %}
-                        <span>{{context}}</span>
-                    {% endfor %}
+                  {{ line.context_str }}
                 </span>
             {% endif %}
         </p>
diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index d6768a35..ace48c2c 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/style.css
@@ -258,7 +258,7 @@ 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; } }
 
diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index 1e9103fd..fe388487 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -622,6 +622,7 @@ $border-indicator-width: .2em;
             @include background-dark($dark-context-bg-color);
             border-radius: .25em;
             margin-right: 1.75em;
+            text-align: right;
             span {
                 display: block;
                 text-align: right;