From 56026f10f6fb8a6cce270cf2b169f724470ce96d Mon Sep 17 00:00:00 2001
From: Ned Batchelder <ned@nedbatchelder.com>
Date: Wed, 20 Apr 2011 22:35:00 -0400
Subject: Keyboard-shorcut help is now available on the file page of the HTML
 report.

---
 coverage/html.py                    |   2 ++
 coverage/htmlfiles/coverage_html.js |  20 +++++++++++++++++++
 coverage/htmlfiles/keybd_closed.png | Bin 0 -> 226 bytes
 coverage/htmlfiles/keybd_open.png   | Bin 0 -> 230 bytes
 coverage/htmlfiles/pyfile.html      |  24 +++++++++++++++++++++++
 coverage/htmlfiles/style.css        |  38 ++++++++++++++++++++++++++++++++++++
 6 files changed, 84 insertions(+)
 create mode 100755 coverage/htmlfiles/keybd_closed.png
 create mode 100755 coverage/htmlfiles/keybd_open.png

diff --git a/coverage/html.py b/coverage/html.py
index 802327d2..fffd9b45 100644
--- a/coverage/html.py
+++ b/coverage/html.py
@@ -37,6 +37,8 @@ class HtmlReporter(Reporter):
             "jquery.isonscreen.js",
             "jquery.tablesorter.min.js",
             "coverage_html.js",
+            "keybd_closed.png",
+            "keybd_open.png",
             ]
 
     def __init__(self, cov, ignore_errors=False):
diff --git a/coverage/htmlfiles/coverage_html.js b/coverage/htmlfiles/coverage_html.js
index e01793f4..e95a9efa 100644
--- a/coverage/htmlfiles/coverage_html.js
+++ b/coverage/htmlfiles/coverage_html.js
@@ -17,6 +17,25 @@ coverage.assign_shortkeys = function () {
     });
 };
 
+// Create the events for the help panel.
+coverage.wire_up_help_panel = function () {
+    $("#keyboard_icon").click(function () {
+        // Show the help panel, and position it so the keyboard icon in the
+        // panel is in the same place as the keyboard icon in the header.
+        $(".help_panel").show();
+        var top, left;
+        var koff = $("#keyboard_icon").offset();
+        var poff = $("#panel_icon").position();
+        $(".help_panel").offset({
+            top: koff.top-poff.top,
+            left: koff.left-poff.left
+        });
+    });
+    $("#panel_icon").click(function () {
+        $(".help_panel").hide();
+    });
+};
+
 // Loaded on index.html
 coverage.index_ready = function ($) {
     // Look for a cookie containing previous sort settings:
@@ -104,6 +123,7 @@ coverage.pyfile_ready = function ($) {
         ;
 
     coverage.assign_shortkeys();
+    coverage.wire_up_help_panel();
 };
 
 coverage.toggle_lines = function (btn, cls) {
diff --git a/coverage/htmlfiles/keybd_closed.png b/coverage/htmlfiles/keybd_closed.png
new file mode 100755
index 00000000..faff6b16
Binary files /dev/null and b/coverage/htmlfiles/keybd_closed.png differ
diff --git a/coverage/htmlfiles/keybd_open.png b/coverage/htmlfiles/keybd_open.png
new file mode 100755
index 00000000..517165de
Binary files /dev/null and b/coverage/htmlfiles/keybd_open.png differ
diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index 6f99e6a6..ee0a3b1b 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -22,6 +22,7 @@
         <h1>Coverage for <b>{{cu.name|escape}}</b> :
             <span class='pc_cov'>{{nums.pc_covered_str}}%</span>
         </h1>
+        <img id='keyboard_icon' src='keybd_closed.png'>
         <h2 class='stats'>
             {{nums.n_statements}} statements
             <span class='{{c_run}} shortkey_r' onclick='coverage.toggle_lines(this, "run")'>{{nums.n_executed}} run</span>
@@ -34,6 +35,29 @@
     </div>
 </div>
 
+<div class='help_panel'>
+    <img id='panel_icon' src='keybd_open.png'>
+    <p class='legend'>Hot-keys on this page</p>
+    <div>
+    <p class='keyhelp'>
+        <span class='key'>r</span>
+        <span class='key'>m</span>
+        <span class='key'>x</span>
+        <span class='key'>p</span> &nbsp; toggle line displays
+    </p>
+    <p class='keyhelp'>
+        <span class='key'>j</span>
+        <span class='key'>k</span> &nbsp; next/prev highlighted chunk
+    </p>
+    <p class='keyhelp'>
+        <span class='key'>0</span> &nbsp; (zero) top of page
+    </p>
+    <p class='keyhelp'>
+        <span class='key'>1</span> &nbsp; (one) first highlighted chunk
+    </p>
+    </div>
+</div>
+
 <div id='source'>
     <table cellspacing='0' cellpadding='0'>
         <tr>
diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css
index 9a06a2b4..852994d9 100644
--- a/coverage/htmlfiles/style.css
+++ b/coverage/htmlfiles/style.css
@@ -102,6 +102,44 @@ h2.stats {
     border-color: #999 #ccc #ccc #999;
 }
 
+/* Help panel */
+#keyboard_icon {
+    float: right;
+    cursor: pointer;
+}
+
+.help_panel {
+    position: absolute;
+    background: #ffc;
+    padding: .5em;
+    border: 1px solid #883;
+    display: none;
+    width: 16em; height: 8em;
+}
+
+.help_panel .legend {
+    font-style: italic;
+    margin-bottom: 1em;
+}
+
+#panel_icon {
+    float: right;
+    cursor: pointer;
+}
+
+.keyhelp {
+    margin: .75em;
+}
+
+.keyhelp .key {
+    border: 1px solid black;
+    border-color: #888 #333 #333 #888;
+    padding: .1em .35em;
+    font-family: monospace;
+    font-weight: bold;
+    background: #eee;
+}
+
 /* Source file styles */
 .linenos p {
     text-align: right;
-- 
cgit v1.2.1