feat: html index pages have 'hide covered' checkbox. #1384

Author: nedbat

CHANGES.rst

@@ -30,6 +30,9 @@ Unreleased
 
 - Other HTML report improvements:
 
+  - There is now a "hide covered" checkbox to filter out 100% files, finishing
+    `issue 1384`_.
+
   - The index page is always sorted by one of its columns, with clearer
     indications of the sorting.
 
@@ -40,6 +43,8 @@ Unreleased
 
 - Python 3.13.0a5 is supported.
 
+.. _issue 1384: https://github.com/nedbat/coveragepy/issues/1384
+
 
 .. scriv-start-here
 

coverage/html.py

@@ -471,6 +471,7 @@ def index_page(self, first_html: str, final_html: str) -> None:
             "regions": self.file_summaries,
             "totals": self.totals,
             "column2": "",
+            "skip_covered": self.skip_covered,
             "skipped_covered_msg": skipped_covered_msg,
             "skipped_empty_msg": skipped_empty_msg,
             "first_html": first_html,
@@ -550,6 +551,7 @@ class PageData:
                 "regions": region_data.summaries,
                 "totals": region_data.totals,
                 "column2": noun,
+                "skip_covered": self.skip_covered,
                 "skipped_covered_msg": "",
                 "skipped_empty_msg": "",
                 "first_html": "index.html",

coverage/htmlfiles/coverage_html.js

@@ -106,30 +106,39 @@ coverage.wire_up_filter = function () {
     const no_rows = document.getElementById("no_rows");
 
     // Observe filter keyevents.
-    document.getElementById("filter").addEventListener("input", debounce(event => {
+    const filter_handler = (event => {
         // Keep running total of each metric, first index contains number of shown rows
         const totals = new Array(table.rows[0].cells.length).fill(0);
         // Accumulate the percentage as fraction
         totals[totals.length - 1] = { "numer": 0, "denom": 0 };  // nosemgrep: eslint.detect-object-injection
 
+        var text = document.getElementById("filter").value;
+        const casefold = (text === text.toLowerCase());
+        const hide100 = document.getElementById("hide100").checked;
+
         // Hide / show elements.
         table_body_rows.forEach(row => {
             var show = false;
-            var target = event.target.value;
-            var casefold = (target === target.toLowerCase());
+            // Check the text filter.
             for (let column = 0; column < totals.length; column++) {
                 cell = row.cells[column];
                 if (cell.classList.contains("name")) {
                     var celltext = cell.textContent;
                     if (casefold) {
                         celltext = celltext.toLowerCase();
                     }
-                    if (celltext.includes(target)) {
+                    if (celltext.includes(text)) {
                         show = true;
                     }
                 }
             }
 
+            // Check the "hide covered" filter.
+            if (show && hide100) {
+                const [numer, denom] = row.cells[row.cells.length - 1].dataset.ratio.split(" ");
+                show = (numer !== denom);
+            }
+
             if (!show) {
                 // hide
                 row.classList.add("hidden");
@@ -196,11 +205,15 @@ coverage.wire_up_filter = function () {
                 cell.textContent = totals[column];  // nosemgrep: eslint.detect-object-injection
             }
         }
-    }));
+    });
+
+    document.getElementById("filter").addEventListener("input", debounce(filter_handler));
+    document.getElementById("hide100").addEventListener("input", debounce(filter_handler));
 
     // Trigger change event on setup, to force filter on page refresh
     // (filter value may still be present).
     document.getElementById("filter").dispatchEvent(new Event("input"));
+    document.getElementById("hide100").dispatchEvent(new Event("input"));
 };
 
 // Set up the click-to-sort columns.

coverage/htmlfiles/index.html

@@ -58,6 +58,10 @@ <h1>{{ title|escape }}:
 
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" {% if skip_covered %}checked disabled {% endif %}/>
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
 
         <p class="text">

coverage/htmlfiles/style.css

@@ -68,17 +68,25 @@ footer .content { padding: 0; color: #666; font-style: italic; }
 
 h1 { font-size: 1.25em; display: inline-block; }
 
-#filter_container { float: right; margin: 0 2em 0 0; }
+#filter_container { float: right; margin: 0 2em 0 0; line-height: 1.66em; }
 
-#filter_container input { width: 10em; padding: 0.2em 0.5em; border: 2px solid #ccc; background: #fff; color: #000; }
+#filter_container #filter { width: 10em; padding: 0.2em 0.5em; border: 2px solid #ccc; background: #fff; color: #000; }
 
-@media (prefers-color-scheme: dark) { #filter_container input { border-color: #444; } }
+@media (prefers-color-scheme: dark) { #filter_container #filter { border-color: #444; } }
 
-@media (prefers-color-scheme: dark) { #filter_container input { background: #1e1e1e; } }
+@media (prefers-color-scheme: dark) { #filter_container #filter { background: #1e1e1e; } }
 
-@media (prefers-color-scheme: dark) { #filter_container input { color: #eee; } }
+@media (prefers-color-scheme: dark) { #filter_container #filter { color: #eee; } }
 
-#filter_container input:focus { border-color: #007acc; }
+#filter_container #filter:focus { border-color: #007acc; }
+
+#filter_container :disabled ~ label { color: #ccc; }
+
+@media (prefers-color-scheme: dark) { #filter_container :disabled ~ label { color: #444; } }
+
+#filter_container label { font-size: .875em; color: #666; }
+
+@media (prefers-color-scheme: dark) { #filter_container label { color: #aaa; } }
 
 header button { font-family: inherit; font-size: inherit; border: 1px solid; border-radius: .2em; color: inherit; padding: .1em .5em; margin: 1px calc(.1em + 1px); cursor: pointer; border-color: #ccc; }
 

coverage/htmlfiles/style.scss

@@ -245,8 +245,9 @@ h1 {
 #filter_container {
     float: right;
     margin: 0 2em 0 0;
+    line-height: 1.66em;
 
-    input {
+    #filter {
         width: 10em;
         padding: 0.2em 0.5em;
         border: 2px solid $light-gray3;
@@ -259,6 +260,17 @@ h1 {
             border-color: $focus-color;
         }
     }
+
+    :disabled ~ label{
+        color: $light-gray3;
+        @include color-dark($dark-gray3);
+    }
+
+    label {
+        font-size: .875em;
+        color: $light-gray5;
+        @include color-dark($dark-gray5);
+    }
 }
 
 header button {

tests/gold/html/a/class_index.html

@@ -43,10 +43,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -91,7 +95,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">

tests/gold/html/a/function_index.html

@@ -43,10 +43,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -91,7 +95,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">

tests/gold/html/a/index.html

@@ -42,10 +42,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -87,7 +91,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">

tests/gold/html/b_branch/class_index.html

@@ -45,10 +45,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -99,7 +103,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">

tests/gold/html/b_branch/function_index.html

@@ -45,10 +45,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -129,7 +133,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">

tests/gold/html/b_branch/index.html

@@ -44,10 +44,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -95,7 +99,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">

tests/gold/html/bom/class_index.html

@@ -43,10 +43,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -91,7 +95,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">

tests/gold/html/bom/function_index.html

@@ -43,10 +43,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -91,7 +95,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">

tests/gold/html/bom/index.html

@@ -42,10 +42,14 @@ <h1>Coverage report:
         </aside>
         <form id="filter_container">
             <input id="filter" type="text" value="" placeholder="filter..." />
+            <div>
+                <input id="hide100" type="checkbox" />
+                <label for="hide100">hide covered</label>
+            </div>
         </form>
         <p class="text">
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
 </header>
@@ -87,7 +91,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <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
+            created at 2024-04-19 13:27 -0400
         </p>
     </div>
     <aside class="hidden">