perf: make the context shortcodes even shorter

On the coverage.py metacov, this makes the HTML 5% smaller.

5 files changed, 99 insertions, 62 deletions

diff --git a/coverage/html.py b/coverage/html.py
index d1a90ecd..57076060 100644
--- a/coverage/html.py
+++ b/coverage/html.py
@@ -7,10 +7,12 @@ from __future__ import annotations
 
 import collections
 import datetime
+import functools
 import json
 import os
 import re
 import shutil
+import string  # pylint: disable=deprecated-module
 
 from dataclasses import dataclass
 from typing import Any, Dict, Iterable, List, Optional, Tuple, TYPE_CHECKING, cast
@@ -187,6 +189,21 @@ class FileToReport:
         self.html_filename = self.rootname + ".html"
 
 
+HTML_SAFE = string.ascii_letters + string.digits + "!#$%'()*+,-./:;=?@[]^_`{|}~"
+
+@functools.lru_cache(maxsize=None)
+def encode_int(n: int) -> str:
+    """Create a short HTML-safe string from an integer, using HTML_SAFE."""
+    if n == 0:
+        return HTML_SAFE[0]
+
+    r = []
+    while n:
+        n, t = divmod(n, len(HTML_SAFE))
+        r.append(HTML_SAFE[t])
+    return "".join(r)
+
+
 class HtmlReporter:
     """HTML reporting."""
 
@@ -373,7 +390,10 @@ class HtmlReporter:
         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())}
         if context_codes:
-            contexts_json = json.dumps({v: k for (k, v) in context_codes.items()}, indent=2)
+            contexts_json = json.dumps(
+                {encode_int(v): k for (k, v) in context_codes.items()},
+                indent=2,
+            )
         else:
             contexts_json = None
 
@@ -387,9 +407,17 @@ class HtmlReporter:
                     tok_html = escape(tok_text) or " "
                     html_parts.append(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
-            )
+            if ldata.context_list:
+                encoded_contexts = [
+                    encode_int(context_codes[c_context]) for c_context in ldata.context_list
+                ]
+                code_width = max(len(ec) for ec in encoded_contexts)
+                ldata.context_str = (
+                    str(code_width)
+                    + "".join(ec.ljust(code_width) for ec in encoded_contexts)
+                )
+            else:
+                ldata.context_str = ""
 
             if ldata.short_annotations:
                 # 202F is NARROW NO-BREAK SPACE.
diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
index 691a56c3..4c321182 100644
--- a/coverage/htmlfiles/coverage_html.js
+++ b/coverage/htmlfiles/coverage_html.js
@@ -212,11 +212,6 @@ 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") {
@@ -262,6 +257,10 @@ coverage.pyfile_ready = function () {
     coverage.init_scroll_markers();
     coverage.wire_up_sticky_header();
 
+    document.querySelectorAll("[id^=ctxs]").forEach(
+        cbox => cbox.addEventListener("click", coverage.expand_contexts)
+    );
+
     // Rebuild scroll markers when the window height changes.
     window.addEventListener("resize", coverage.build_scroll_markers);
 };
@@ -600,17 +599,19 @@ 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"));
-        })
+coverage.expand_contexts = function (e) {
+    var ctxs = e.target.parentNode.querySelector(".ctxs");
+
+    if (!ctxs.classList.contains("expanded")) {
+        var ctxs_text = ctxs.textContent;
+        var width = Number(ctxs_text[0]);
+        ctxs.textContent = "";
+        for (var i = 1; i < ctxs_text.length; i += width) {
+            key = ctxs_text.substring(i, i + width).trim();
+            ctxs.appendChild(document.createTextNode(contexts[key]));
+            ctxs.appendChild(document.createElement("br"));
+        }
+        ctxs.classList.add("expanded");
     }
 };
 
@@ -620,5 +621,4 @@ document.addEventListener("DOMContentLoaded", () => {
     } else {
         coverage.pyfile_ready();
     }
-
 });
diff --git a/tests/gold/html/contexts/two_tests_py.html b/tests/gold/html/contexts/two_tests_py.html
index cbb6e573..aadc7976 100644
--- a/tests/gold/html/contexts/two_tests_py.html
+++ b/tests/gold/html/contexts/two_tests_py.html
@@ -7,9 +7,9 @@
     <link rel="stylesheet" href="style.css" type="text/css">
     <script type="text/javascript">
         contexts = {
-  "0": "(empty)",
-  "1": "two_tests.test_two",
-  "2": "two_tests.test_one"
+  "a": "(empty)",
+  "b": "two_tests.test_two",
+  "c": "two_tests.test_one"
 }
     </script>
     <script type="text/javascript" src="coverage_html.js" defer></script>
@@ -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 13:16 -0400
+            created at 2023-04-01 08:30 -0400
         </p>
         <aside class="hidden">
             <button type="button" class="button_next_chunk" data-shortcut="j"/>
@@ -88,20 +88,20 @@
 </header>
 <main id="source">
     <p class="run"><span class="n"><a id="t1" href="#t1">1</a></span><span class="t"><span class="key">def</span> <span class="nam">helper</span><span class="op">(</span><span class="nam">lineno</span><span class="op">)</span><span class="op">:</span>&nbsp;</span><span class="r"><label for="ctxs1" class="ctx">(empty)</label></span></p>
-    <p class="run"><span class="n"><a id="t2" href="#t2">2</a></span><span class="t">    <span class="nam">x</span> <span class="op">=</span> <span class="num">2</span>&nbsp;</span><input type="checkbox" id="ctxs2" /><span class="r"><label for="ctxs2" class="ctx">3 ctx</label></span><span class="ctxs">0,2,1</span></p>
+    <p class="run"><span class="n"><a id="t2" href="#t2">2</a></span><span class="t">    <span class="nam">x</span> <span class="op">=</span> <span class="num">2</span>&nbsp;</span><input type="checkbox" id="ctxs2" /><span class="r"><label for="ctxs2" class="ctx">3 ctx</label></span><span class="ctxs">1acb</span></p>
     <p class="pln"><span class="n"><a id="t3" href="#t3">3</a></span><span class="t">&nbsp;</span><span class="r"></span></p>
     <p class="run"><span class="n"><a id="t4" href="#t4">4</a></span><span class="t"><span class="key">def</span> <span class="nam">test_one</span><span class="op">(</span><span class="op">)</span><span class="op">:</span>&nbsp;</span><span class="r"><label for="ctxs4" class="ctx">(empty)</label></span></p>
-    <p class="run"><span class="n"><a id="t5" href="#t5">5</a></span><span class="t">    <span class="nam">a</span> <span class="op">=</span> <span class="num">5</span>&nbsp;</span><input type="checkbox" id="ctxs5" /><span class="r"><label for="ctxs5" class="ctx">1 ctx</label></span><span class="ctxs">2</span></p>
-    <p class="run"><span class="n"><a id="t6" href="#t6">6</a></span><span class="t">    <span class="nam">helper</span><span class="op">(</span><span class="num">6</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs6" /><span class="r"><label for="ctxs6" class="ctx">1 ctx</label></span><span class="ctxs">2</span></p>
+    <p class="run"><span class="n"><a id="t5" href="#t5">5</a></span><span class="t">    <span class="nam">a</span> <span class="op">=</span> <span class="num">5</span>&nbsp;</span><input type="checkbox" id="ctxs5" /><span class="r"><label for="ctxs5" class="ctx">1 ctx</label></span><span class="ctxs">1c</span></p>
+    <p class="run"><span class="n"><a id="t6" href="#t6">6</a></span><span class="t">    <span class="nam">helper</span><span class="op">(</span><span class="num">6</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs6" /><span class="r"><label for="ctxs6" class="ctx">1 ctx</label></span><span class="ctxs">1c</span></p>
     <p class="pln"><span class="n"><a id="t7" href="#t7">7</a></span><span class="t">&nbsp;</span><span class="r"></span></p>
     <p class="run"><span class="n"><a id="t8" href="#t8">8</a></span><span class="t"><span class="key">def</span> <span class="nam">test_two</span><span class="op">(</span><span class="op">)</span><span class="op">:</span>&nbsp;</span><span class="r"><label for="ctxs8" class="ctx">(empty)</label></span></p>
-    <p class="run"><span class="n"><a id="t9" href="#t9">9</a></span><span class="t">    <span class="nam">a</span> <span class="op">=</span> <span class="num">9</span>&nbsp;</span><input type="checkbox" id="ctxs9" /><span class="r"><label for="ctxs9" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
-    <p class="run"><span class="n"><a id="t10" href="#t10">10</a></span><span class="t">    <span class="nam">b</span> <span class="op">=</span> <span class="num">10</span>&nbsp;</span><input type="checkbox" id="ctxs10" /><span class="r"><label for="ctxs10" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
-    <p class="run"><span class="n"><a id="t11" href="#t11">11</a></span><span class="t">    <span class="key">if</span> <span class="nam">a</span> <span class="op">></span> <span class="num">11</span><span class="op">:</span>&nbsp;</span><input type="checkbox" id="ctxs11" /><span class="r"><label for="ctxs11" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
+    <p class="run"><span class="n"><a id="t9" href="#t9">9</a></span><span class="t">    <span class="nam">a</span> <span class="op">=</span> <span class="num">9</span>&nbsp;</span><input type="checkbox" id="ctxs9" /><span class="r"><label for="ctxs9" class="ctx">1 ctx</label></span><span class="ctxs">1b</span></p>
+    <p class="run"><span class="n"><a id="t10" href="#t10">10</a></span><span class="t">    <span class="nam">b</span> <span class="op">=</span> <span class="num">10</span>&nbsp;</span><input type="checkbox" id="ctxs10" /><span class="r"><label for="ctxs10" class="ctx">1 ctx</label></span><span class="ctxs">1b</span></p>
+    <p class="run"><span class="n"><a id="t11" href="#t11">11</a></span><span class="t">    <span class="key">if</span> <span class="nam">a</span> <span class="op">></span> <span class="num">11</span><span class="op">:</span>&nbsp;</span><input type="checkbox" id="ctxs11" /><span class="r"><label for="ctxs11" class="ctx">1 ctx</label></span><span class="ctxs">1b</span></p>
     <p class="mis show_mis"><span class="n"><a id="t12" href="#t12">12</a></span><span class="t">        <span class="nam">b</span> <span class="op">=</span> <span class="num">12</span>&nbsp;</span><span class="r"></span></p>
-    <p class="run"><span class="n"><a id="t13" href="#t13">13</a></span><span class="t">    <span class="key">assert</span> <span class="nam">a</span> <span class="op">==</span> <span class="op">(</span><span class="num">13</span><span class="op">-</span><span class="num">4</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs13" /><span class="r"><label for="ctxs13" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
-    <p class="run"><span class="n"><a id="t14" href="#t14">14</a></span><span class="t">    <span class="key">assert</span> <span class="nam">b</span> <span class="op">==</span> <span class="op">(</span><span class="num">14</span><span class="op">-</span><span class="num">4</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs14" /><span class="r"><label for="ctxs14" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
-    <p class="run"><span class="n"><a id="t15" href="#t15">15</a></span><span class="t">    <span class="nam">helper</span><span class="op">(</span>&nbsp;</span><input type="checkbox" id="ctxs15" /><span class="r"><label for="ctxs15" class="ctx">1 ctx</label></span><span class="ctxs">1</span></p>
+    <p class="run"><span class="n"><a id="t13" href="#t13">13</a></span><span class="t">    <span class="key">assert</span> <span class="nam">a</span> <span class="op">==</span> <span class="op">(</span><span class="num">13</span><span class="op">-</span><span class="num">4</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs13" /><span class="r"><label for="ctxs13" class="ctx">1 ctx</label></span><span class="ctxs">1b</span></p>
+    <p class="run"><span class="n"><a id="t14" href="#t14">14</a></span><span class="t">    <span class="key">assert</span> <span class="nam">b</span> <span class="op">==</span> <span class="op">(</span><span class="num">14</span><span class="op">-</span><span class="num">4</span><span class="op">)</span>&nbsp;</span><input type="checkbox" id="ctxs14" /><span class="r"><label for="ctxs14" class="ctx">1 ctx</label></span><span class="ctxs">1b</span></p>
+    <p class="run"><span class="n"><a id="t15" href="#t15">15</a></span><span class="t">    <span class="nam">helper</span><span class="op">(</span>&nbsp;</span><input type="checkbox" id="ctxs15" /><span class="r"><label for="ctxs15" class="ctx">1 ctx</label></span><span class="ctxs">1b</span></p>
     <p class="pln"><span class="n"><a id="t16" href="#t16">16</a></span><span class="t">        <span class="num">16</span>&nbsp;</span><span class="r"></span></p>
     <p class="pln"><span class="n"><a id="t17" href="#t17">17</a></span><span class="t">    <span class="op">)</span>&nbsp;</span><span class="r"></span></p>
     <p class="pln"><span class="n"><a id="t18" href="#t18">18</a></span><span class="t">&nbsp;</span><span class="r"></span></p>
@@ -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 13:16 -0400
+            created at 2023-04-01 08:30 -0400
         </p>
     </div>
 </footer>
diff --git a/tests/gold/html/support/coverage_html.js b/tests/gold/html/support/coverage_html.js
index 1cd2b5d4..4c321182 100644
--- a/tests/gold/html/support/coverage_html.js
+++ b/tests/gold/html/support/coverage_html.js
@@ -212,14 +212,9 @@ 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') {
+    if (frag.length > 2 && frag[1] === "t") {
         document.querySelector(frag).closest(".n").classList.add("highlight");
         coverage.set_sel(parseInt(frag.substr(2), 10));
     } else {
@@ -262,6 +257,10 @@ coverage.pyfile_ready = function () {
     coverage.init_scroll_markers();
     coverage.wire_up_sticky_header();
 
+    document.querySelectorAll("[id^=ctxs]").forEach(
+        cbox => cbox.addEventListener("click", coverage.expand_contexts)
+    );
+
     // Rebuild scroll markers when the window height changes.
     window.addEventListener("resize", coverage.build_scroll_markers);
 };
@@ -533,14 +532,14 @@ coverage.scroll_window = function (to_pos) {
 
 coverage.init_scroll_markers = function () {
     // Init some variables
-    coverage.lines_len = document.querySelectorAll('#source > p').length;
+    coverage.lines_len = document.querySelectorAll("#source > p").length;
 
     // Build html
     coverage.build_scroll_markers();
 };
 
 coverage.build_scroll_markers = function () {
-    const temp_scroll_marker = document.getElementById('scroll_marker')
+    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 (document.body.scrollHeight <= window.innerHeight) {
@@ -554,8 +553,8 @@ coverage.build_scroll_markers = function () {
 
     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'
+    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.querySelector(".n a").id.substr(1));
@@ -582,35 +581,37 @@ coverage.build_scroll_markers = function () {
 };
 
 coverage.wire_up_sticky_header = function () {
-    const header = document.querySelector('header');
+    const header = document.querySelector("header");
     const header_bottom = (
-        header.querySelector('.content h2').getBoundingClientRect().top -
+        header.querySelector(".content h2").getBoundingClientRect().top -
         header.getBoundingClientRect().top
     );
 
     function updateHeader() {
         if (window.scrollY > header_bottom) {
-            header.classList.add('sticky');
+            header.classList.add("sticky");
         } else {
-            header.classList.remove('sticky');
+            header.classList.remove("sticky");
         }
     }
 
-    window.addEventListener('scroll', updateHeader);
+    window.addEventListener("scroll", updateHeader);
     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"));
-        })
+coverage.expand_contexts = function (e) {
+    var ctxs = e.target.parentNode.querySelector(".ctxs");
+
+    if (!ctxs.classList.contains("expanded")) {
+        var ctxs_text = ctxs.textContent;
+        var width = Number(ctxs_text[0]);
+        ctxs.textContent = "";
+        for (var i = 1; i < ctxs_text.length; i += width) {
+            key = ctxs_text.substring(i, i + width).trim();
+            ctxs.appendChild(document.createTextNode(contexts[key]));
+            ctxs.appendChild(document.createElement("br"));
+        }
+        ctxs.classList.add("expanded");
     }
 };
 
@@ -620,5 +621,4 @@ document.addEventListener("DOMContentLoaded", () => {
     } else {
         coverage.pyfile_ready();
     }
-
 });
diff --git a/tests/test_html.py b/tests/test_html.py
index 89ad8d1c..65f0cc76 100644
--- a/tests/test_html.py
+++ b/tests/test_html.py
@@ -1260,3 +1260,12 @@ class HtmlHelpersTest(HtmlTestHelpers, CoverageTest):
         msg = "Fragment '#nothing' in htmlcov.index.html has no anchor"
         with pytest.raises(AssertionError, match=msg):
             self.assert_valid_hrefs()
+
+
+@pytest.mark.parametrize("n, key", [
+    (0, "a"),
+    (1, "b"),
+    (999999999, "e9S_p"),
+])
+def test_encode_int(n: int, key: str) -> None:
+    assert coverage.html.encode_int(n) == key