diff --git a/CHANGES.rst b/CHANGES.rst
index 6b12c8fc8..51d6bead2 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -20,9 +20,10 @@ development at the same time, such as 4.5.x and 5.0.
 Unreleased
 ----------
 
-- Performance: HTML reports with context information are now much more compact,
-  with file sizes typically as small as one-third the previous size.  This
-  closes `issue 1584`_ thanks to `Oleh Krehel <pull 1587_>`_.
+- Performance: HTML reports with context information are now much more compact.
+  File sizes are typically as small as one-third the previous size, but can be
+  dramatically smaller. This closes `issue 1584`_ thanks to `Oleh Krehel
+  <pull 1587_>`_.
 
 .. _issue 1584: https://github.com/nedbat/coveragepy/issues/1584
 .. _pull 1587: https://github.com/nedbat/coveragepy/pull/1587
diff --git a/coverage/html.py b/coverage/html.py
index 23fba3f0a..b3f37f760 100644
--- a/coverage/html.py
+++ b/coverage/html.py
@@ -5,12 +5,12 @@
 
 from __future__ import annotations
 
+import collections
 import datetime
 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
@@ -370,7 +370,7 @@ def write_html_file(self, ftr: FileToReport, prev_html: str, next_html: str) ->
         # 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)
+        contexts = collections.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)
 
@@ -386,9 +386,9 @@ def write_html_file(self, ftr: FileToReport, prev_html: str, next_html: str) ->
                         f'<span class="{tok_type}">{tok_html}</span>'
                     )
             ldata.html = ''.join(html_parts)
-
             ldata.context_str = ",".join(
-                str(context_codes[c_context]) for c_context in ldata.context_list)
+                str(context_codes[c_context]) for c_context in ldata.context_list
+            )
 
             if ldata.short_annotations:
                 # 202F is NARROW NO-BREAK SPACE.
@@ -423,9 +423,9 @@ def write_html_file(self, ftr: FileToReport, prev_html: str, next_html: str) ->
             ldata.css_class = ' '.join(css_classes) or "pln"
 
         if context_codes:
-            file_data.__dict__["contexts_json"] = contexts_json
+            file_data.contexts_json = contexts_json
         else:
-            file_data.__dict__["contexts_json"] = None
+            file_data.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 8b7fb96f1..1cd2b5d4c 100644
--- a/coverage/htmlfiles/coverage_html.js
+++ b/coverage/htmlfiles/coverage_html.js
@@ -604,8 +604,7 @@ coverage.showContexts = function (e) {
     span = e.target.nextElementSibling.nextElementSibling;
     span_text = span.textContent;
 
-    if (/^[0-9,]+$/.test(span_text))
-    {
+    if (/^[0-9,]+$/.test(span_text)) {
         span.textContent = "";
         span_text.split(",").forEach(function(s) {
             ctx = contexts[s];
diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index 1921e1c20..bc8fa697d 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -14,7 +14,7 @@
 
     {% if contexts_json %}
     <script type="text/javascript">
-      contexts = {{ contexts_json }}
+        contexts = {{ contexts_json }}
     </script>
     {% endif %}
 
@@ -125,9 +125,7 @@ <h2>
             </span>
             {# Things that should appear below the line. #}
             {% if line.context_str %}
-                <span class="ctxs">
-                  {{ line.context_str }}
-                </span>
+                <span class="ctxs">{{ line.context_str }}</span>
             {% endif %}
         </p>
         {% endjoined %}
diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index ace48c2cf..11b24c4e7 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/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/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
index fe3884871..b1465154e 100644
--- a/coverage/htmlfiles/style.scss
+++ b/coverage/htmlfiles/style.scss
@@ -623,10 +623,6 @@ $border-indicator-width: .2em;
             border-radius: .25em;
             margin-right: 1.75em;
             text-align: right;
-            span {
-                display: block;
-                text-align: right;
-            }
         }
     }
 }
diff --git a/tests/gold/html/contexts/two_tests_py.html b/tests/gold/html/contexts/two_tests_py.html
index 86239bd88..cbb6e5739 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 @@ <h2>
             <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 @@ <h2>
             <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 ace48c2cf..11b24c4e7 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 084a4970c..1cd2b5d4c 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 d6768a35e..11b24c4e7 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; }