feat: html columns are always sorted with clearer indicators

nedbat · Apr 23, 2024 · 7057c7d · 7057c7d
1 parent 478a120
commit 7057c7d
Show file tree

Hide file tree

Showing 51 changed files with 497 additions and 482 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -28,6 +28,11 @@ Unreleased
   and classes.  Other reports don't yet have this information, but it will be
   added in the future where it makes sense.  Feedback gladly accepted!
 
+- Other HTML report improvements:
+
+  - The index page is always sorted by one of its columns, with clearer
+    indications of the sorting.
+
 - The debug output showing which configuration files were tried now shows
   absolute paths to help diagnose problems where settings aren't taking effect,
   and is renamed from "attempted_config_files" to the more logical

diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
@@ -203,14 +203,15 @@ coverage.index_ready = function () {
     );
 
     // 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));
     }
+    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()
 
     // Watch for page unload events so we can save the final sort settings:
     window.addEventListener("unload", function () {

diff --git a/coverage/htmlfiles/index.html b/coverage/htmlfiles/index.html
@@ -70,20 +70,20 @@ <h1>{{ title|escape }}:
 <main id="index">
     <table class="index" data-sortable>
         <thead>
-            {# The title="" attr doesn"t work in Safari. #}
+            {# The title="" attr doesn't work in Safari. #}
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File</th>
+                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
                 {% if column2 %}
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">{{ column2 }}</th>
+                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">{{ column2 }}<span class="arrows"/></th>
                 {% endif %}
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded</th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"/></th>
                 {% if has_arcs %}
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial</th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial<span class="arrows"/></th>
                 {% endif %}
-                <th class="right" aria-sort="none" data-shortcut="c">coverage</th>
+                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"/></th>
             </tr>
         </thead>
         <tbody>

diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/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; }
 

diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss
@@ -658,19 +658,24 @@ $border-indicator-width: .2em;
             background: $light-gray2;
             @include background-dark($dark-gray2);
         }
+        .arrows {
+            color: #666;
+            font-size: 85%;
+            font-family: sans-serif;
+            font-style: normal;
+            pointer-events: none;
+        }
         &[aria-sort="ascending"], &[aria-sort="descending"] {
             white-space: nowrap;
             background: $light-gray2;
             @include background-dark($dark-gray2);
             padding-left: .5em;
         }
-        &[aria-sort="ascending"]::after {
-            font-family: sans-serif;
-            content: " ↑";
+        &[aria-sort="ascending"] .arrows::after {
+            content: " ▲";
         }
-        &[aria-sort="descending"]::after {
-            font-family: sans-serif;
-            content: " ↓";
+        &[aria-sort="descending"] .arrows::after {
+            content: " ▼";
         }
     }
     td.name {

diff --git a/tests/gold/html/a/class_index.html b/tests/gold/html/a/class_index.html
@@ -45,21 +45,21 @@ <h1>Coverage report:
             <input id="filter" type="text" value="" placeholder="filter..." />
         </form>
         <p class="text">
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File</th>
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">class</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded</th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage</th>
+                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">class<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"/></th>
+                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"/></th>
             </tr>
         </thead>
         <tbody>
@@ -90,8 +90,8 @@ <h1>Coverage report:
 <footer>
     <div class="content">
         <p>
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
     <aside class="hidden">

diff --git a/tests/gold/html/a/function_index.html b/tests/gold/html/a/function_index.html
@@ -45,21 +45,21 @@ <h1>Coverage report:
             <input id="filter" type="text" value="" placeholder="filter..." />
         </form>
         <p class="text">
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File</th>
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">function</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded</th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage</th>
+                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">function<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"/></th>
+                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"/></th>
             </tr>
         </thead>
         <tbody>
@@ -90,8 +90,8 @@ <h1>Coverage report:
 <footer>
     <div class="content">
         <p>
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
     <aside class="hidden">

diff --git a/tests/gold/html/a/index.html b/tests/gold/html/a/index.html
@@ -44,20 +44,20 @@ <h1>Coverage report:
             <input id="filter" type="text" value="" placeholder="filter..." />
         </form>
         <p class="text">
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded</th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage</th>
+                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"/></th>
+                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"/></th>
             </tr>
         </thead>
         <tbody>
@@ -86,8 +86,8 @@ <h1>Coverage report:
 <footer>
     <div class="content">
         <p>
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
     <aside class="hidden">

diff --git a/tests/gold/html/b_branch/class_index.html b/tests/gold/html/b_branch/class_index.html
@@ -47,23 +47,23 @@ <h1>Coverage report:
             <input id="filter" type="text" value="" placeholder="filter..." />
         </form>
         <p class="text">
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File</th>
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">class</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial</th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage</th>
+                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">class<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial<span class="arrows"/></th>
+                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"/></th>
             </tr>
         </thead>
         <tbody>
@@ -98,8 +98,8 @@ <h1>Coverage report:
 <footer>
     <div class="content">
         <p>
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
     <aside class="hidden">

diff --git a/tests/gold/html/b_branch/function_index.html b/tests/gold/html/b_branch/function_index.html
@@ -47,23 +47,23 @@ <h1>Coverage report:
             <input id="filter" type="text" value="" placeholder="filter..." />
         </form>
         <p class="text">
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
 </header>
 <main id="index">
     <table class="index" data-sortable>
         <thead>
             <tr class="tablehead" title="Click to sort">
-                <th class="name left" aria-sort="none" data-shortcut="f">File</th>
-                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">function</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches</th>
-                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial</th>
-                <th class="right" aria-sort="none" data-shortcut="c">coverage</th>
+                <th class="name left" aria-sort="none" data-shortcut="f">File<span class="arrows"></span></th>
+                <th class="name left" aria-sort="none" data-default-sort-order="ascending" data-shortcut="n">function<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="s">statements<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="m">missing<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="x">excluded<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="b">branches<span class="arrows"/></th>
+                <th aria-sort="none" data-default-sort-order="descending" data-shortcut="p">partial<span class="arrows"/></th>
+                <th class="right" aria-sort="none" data-shortcut="c">coverage<span class="arrows"/></th>
             </tr>
         </thead>
         <tbody>
@@ -128,8 +128,8 @@ <h1>Coverage report:
 <footer>
     <div class="content">
         <p>
-            <a class="nav" href="https://coverage.readthedocs.io/en/7.4.5a0.dev1">coverage.py v7.4.5a0.dev1</a>,
-            created at 2024-04-15 09:20 -0400
+            <a class="nav" href="https://coverage.readthedocs.io/en/7.5.0a1.dev1">coverage.py v7.5.0a1.dev1</a>,
+            created at 2024-04-18 11:22 -0400
         </p>
     </div>
     <aside class="hidden">