feat: more html keyboard shortcuts

On each page the shortcuts '[' and ']' will take you to the previous and
next files respectively. On the index page they take you to the final
and first files respectively.

Pressing 'u' while on a file will now take you back to index.html, like
on Gerrit.

'?' opens and closes the help panel.

Test cases:

    $ pytest --cov-report html --cov=. tests.py

in a directory with just tests.py, then with one, two or three .py
files.

Tested on Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:99.0) Gecko/20100101 Firefox/99.0

3 files changed, 73 insertions, 7 deletions

diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
index 00e18488..084a4970 100644
--- a/coverage/htmlfiles/coverage_html.js
+++ b/coverage/htmlfiles/coverage_html.js
@@ -25,6 +25,13 @@ function checkVisible(element) {
     return !(rect.bottom < viewTop || rect.top >= viewBottom);
 }
 
+function on_click(sel, fn) {
+    const elt = document.querySelector(sel);
+    if (elt) {
+        elt.addEventListener("click", fn);
+    }
+}
+
 // Helpers for table sorting
 function getCellValue(row, column = 0) {
     const cell = row.cells[column]
@@ -193,6 +200,11 @@ coverage.index_ready = function () {
             direction: th.getAttribute("aria-sort"),
         }));
     });
+
+    on_click(".button_prev_file", coverage.to_prev_file);
+    on_click(".button_next_file", coverage.to_next_file);
+
+    on_click(".button_show_hide_help", coverage.show_hide_help);
 };
 
 // -- pyfile stuff --
@@ -209,12 +221,6 @@ coverage.pyfile_ready = function () {
         coverage.set_sel(0);
     }
 
-    const on_click = function(sel, fn) {
-        const elt = document.querySelector(sel);
-        if (elt) {
-            elt.addEventListener("click", fn);
-        }
-    }
     on_click(".button_toggle_run", coverage.toggle_lines);
     on_click(".button_toggle_mis", coverage.toggle_lines);
     on_click(".button_toggle_exc", coverage.toggle_lines);
@@ -225,6 +231,12 @@ coverage.pyfile_ready = function () {
     on_click(".button_top_of_page", coverage.to_top);
     on_click(".button_first_chunk", coverage.to_first_chunk);
 
+    on_click(".button_prev_file", coverage.to_prev_file);
+    on_click(".button_next_file", coverage.to_next_file);
+    on_click(".button_to_index", coverage.to_index);
+
+    on_click(".button_show_hide_help", coverage.show_hide_help);
+
     coverage.filters = undefined;
     try {
         coverage.filters = localStorage.getItem(coverage.LINE_FILTERS_STORAGE);
@@ -299,6 +311,23 @@ coverage.to_first_chunk = function () {
     coverage.to_next_chunk();
 };
 
+coverage.to_prev_file = function () {
+    window.location = document.getElementById("prevFileLink").href;
+}
+
+coverage.to_next_file = function () {
+    window.location = document.getElementById("nextFileLink").href;
+}
+
+coverage.to_index = function () {
+    location.href = document.getElementById("indexLink").href;
+}
+
+coverage.show_hide_help = function () {
+    const helpCheck = document.getElementById("help_panel_state")
+    helpCheck.checked = !helpCheck.checked;
+}
+
 // Return a string indicating what kind of chunk this line belongs to,
 // or null if not a chunk.
 coverage.chunk_indicator = function (line_elt) {
diff --git a/coverage/htmlfiles/index.html b/coverage/htmlfiles/index.html
index e1d3e9b5..9f8e88e6 100644
--- a/coverage/htmlfiles/index.html
+++ b/coverage/htmlfiles/index.html
@@ -40,6 +40,14 @@
                         {% endif %}
                         <kbd>c</kbd> &nbsp; change column sorting
                     </p>
+                    <p class="keyhelp">
+                        <kbd>[</kbd>
+                        <kbd>]</kbd>
+                        &nbsp; prev/next file
+                    </p>
+                    <p class="keyhelp">
+                        <kbd>?</kbd> &nbsp; show/hide this help
+                    </p>
                 </div>
             </div>
         </div>
@@ -115,6 +123,15 @@
             created at {{ time_stamp }}
         </p>
     </div>
+    <div style="display: none;">
+        <p>
+            <a id="prevFileLink" class="nav" href="{{ final_html }}">first file</a>
+            <a id="nextFileLink" class="nav" href="{{ first_html }}">final file</a>
+        </p>
+        <button type="button" class="button_prev_file" data-shortcut="[">Previous file</button>
+        <button type="button" class="button_next_file" data-shortcut="]">Next file</button>
+            <button type="button" class="button_show_hide_help" data-shortcut="?">Show/hide keyboard shortcuts</button>
+    </div>
 </footer>
 
 </body>
diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index fdad9d4e..7bd56d42 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -52,6 +52,17 @@
                     <p class="keyhelp">
                         <kbd>1</kbd> &nbsp; (one) first highlighted chunk
                     </p>
+                    <p class="keyhelp">
+                        <kbd>[</kbd>
+                        <kbd>]</kbd>
+                        &nbsp; prev/next file
+                    </p>
+                    <p class="keyhelp">
+                        <kbd>u</kbd> &nbsp; back to the index
+                    </p>
+                    <p class="keyhelp">
+                        <kbd>?</kbd> &nbsp; show/hide this help
+                    </p>
                 </div>
             </div>
         </div>
@@ -71,6 +82,10 @@
             <button type="button" class="button_prev_chunk" data-shortcut="k">Previous highlighted chunk</button>
             <button type="button" class="button_top_of_page" data-shortcut="0">Goto top of page</button>
             <button type="button" class="button_first_chunk" data-shortcut="1">Goto first highlighted chunk</button>
+            <button type="button" class="button_prev_file" data-shortcut="[">Previous file</button>
+            <button type="button" class="button_next_file" data-shortcut="]">Next file</button>
+            <button type="button" class="button_to_index" data-shortcut="u">Back to the index</button>
+            <button type="button" class="button_show_hide_help" data-shortcut="?">Show/hide keyboard shortcuts</button>
         </div>
     </div>
 </header>
@@ -110,7 +125,12 @@
 <footer>
     <div class="content">
         <p>
-            <a class="nav" href="index.html">&#xab; index</a> &nbsp; &nbsp; <a class="nav" href="{{__url__}}">coverage.py v{{__version__}}</a>,
+            <a id="prevFileLink" class="nav" href="{{ prev_html }}">&#xab; prev file</a> &nbsp; &nbsp;
+            <a id="indexLink" class="nav" href="index.html">&Hat; index</a> &nbsp; &nbsp;
+            <a id="nextFileLink" class="nav" href="{{ next_html }}">&#xbb; next file</a>
+        </p>
+        <p>
+            <a class="nav" href="{{__url__}}">coverage.py v{{__version__}}</a>,
             created at {{ time_stamp }}
         </p>
     </div>