help cleanup, use dijit dialog

diff --git a/classes/backend.php b/classes/backend.php
index 42dfb54742868e13f3c55a7e6576df4b63f5ca4b..29f18171f220977e3a1b86050c132987d12a91ae 100644 (file)
--- a/classes/backend.php
+++ b/classes/backend.php
@@ -18,14 +18,74 @@ class Backend extends Handler {
                print_r($rv);
        }
 
+       private function display_main_help() {
+               $info = get_hotkeys_info($this->link);
+               $imap = get_hotkeys_map($this->link);
+               $omap = array();
+
+               // :(
+               $tinycharmap = array(
+                       "(9)" => "{TAB}",
+                       "(191)" => "?");
+
+               foreach ($imap[1] as $sequence => $action) {
+                       if (!isset($omap[$action])) {
+                               $omap[$action] = isset($tinycharmap[$sequence]) ? $tinycharmap[$sequence] :
+                                       $sequence;
+                       }
+               }
+
+               print "<ul class='helpKbList' id='helpKbList'>";
+
+               print "<h2>" . __("Keyboard Shortcuts") . "</h2>";
+
+               foreach ($info as $section => $hotkeys) {
+
+                       print "<li><h3>" . $section . "</h3></li>";
+
+                       foreach ($hotkeys as $action => $description) {
+                               print "<li>";
+                               print "<input dojoType=\"dijit.form.CheckBox\"
+                                       type=\"checkbox\" disabled=\"1\" checked=\"1\">";
+                               print "<span class='hksequence'>" . $omap[$action] . "</span>";
+                               print $description;
+                               print "</li>";
+                       }
+
+               }
+
+               print "</ul>";
+
+               print "<p><a target=\"_blank\" href=\"http://tt-rss.org/wiki/InterfaceTips\">".
+                       __("Other interface tips are available in the Tiny Tiny RSS wiki.") .
+                       "</a></p>";
+       }
+
        function help() {
                $topic = basename($_REQUEST["topic"]);
 
-               if (file_exists("help/$topic.php")) {
+               switch ($topic) {
+               case "main":
+                       $this->display_main_help();
+                       break;
+               case "prefs":
+                       //$this->display_prefs_help();
+                       break;
+               default:
+                       print "<p>".__("Help topic not found.")."</p>";
+               }
+
+               print "<div align='center'>";
+               print "<button dojoType=\"dijit.form.Button\"
+                       onclick=\"return dijit.byId('helpDlg').hide()\">".
+                       __('Close this window')."</button>";
+               print "</div>";
+
+               /* if (file_exists("help/$topic.php")) {
                        include("help/$topic.php");
                } else {
                        print "<p>".__("Help topic not found.")."</p>";
-               }
+               } */
                /* print "<div align='center'>
                        <button onclick=\"javascript:window.close()\">".
                        __('Close this window')."</button></div>"; */

diff --git a/help/main.php b/help/main.php
deleted file mode 100644 (file)
index 094b289..0000000
--- a/help/main.php
+++ /dev/null
@@ -1,81 +0,0 @@
-       <h1><?php echo __("Keyboard Shortcuts") ?></h1>
-
-       <table style='width : 100%'><tr><td style='width : 50%' valign='top'>
-
-       <h2><?php echo __("Navigation") ?></h2>
-
-       <table>
-               <tr><td class='n'>j/k</td><td><?php echo __("Move between feeds") ?></td></tr>
-               <tr><td class='n'>n/p</td><td><?php echo __("Move between articles") ?></td></tr>
-               <tr><td class='n'>/</td><td><?php echo __("Show search dialog") ?></td></tr>
-       </table>
-
-       <h2><?php echo __("Active article actions") ?></h2>
-
-       <table>
-               <tr><td class='n'>s</td><td><?php echo __("Toggle starred") ?></td></tr>
-               <tr><td class='n'>S</td><td><?php echo __("Toggle published") ?></td></tr>
-               <tr><td class='n'>u</td><td><?php echo __("Toggle unread") ?></td></tr>
-               <tr><td class='n'>T</td><td><?php echo __("Edit tags") ?></td></tr>
-               <tr><td class='n'>D</td><td><?php echo __("Dismiss selected articles") ?></td></tr>
-               <tr><td class='n'>X</td><td><?php echo __("Dismiss read articles") ?></td></tr>
-               <tr><td class='n'>o</td><td><?php echo __("Open article in new window") ?></td></tr>
-               <tr><td class='n'>c n/c p</td><td><?php echo __("Mark articles below/above active one as read") ?></td></tr>
-               <tr><td class='n'>N/P</td><td><?php echo __("Scroll article content") ?></td></tr>
-               <tr><td class='n'>e</td><td><?php echo __("Email article") ?></td></tr>
-
-       </table>
-
-       <h2><?php echo __("Other actions") ?></h2>
-
-       <table>
-               <tr><td class='n'>[tab]</td><td><?php echo __("Select article under mouse cursor") ?></td></tr>
-               <tr><td class='n'>c l</td><td><?php echo __("Create label") ?></td></tr>
-               <tr><td class='n'>c f</td><td><?php echo __("Create filter") ?></td></tr>
-               <tr><td class='n'>c s</td><td><?php echo __("Collapse sidebar") ?></td></tr>
-               <tr><td class='n'>?</td><td><?php echo __("Display this help dialog") ?></td></tr>
-       </table>
-
-       </td><td valign='top'>
-
-       <h2><?php echo __("Multiple articles actions") ?></h2>
-
-       <table>
-               <tr><td class='n'>a a</td><td><?php echo __("Select all articles") ?></td></tr>
-               <tr><td class='n'>a u</td><td><?php echo __("Select unread articles") ?></td></tr>
-               <tr><td class='n'>a U</td><td><?php echo __("Select starred articles") ?></td></tr>
-               <tr><td class='n'>a p</td><td><?php echo __("Select published articles") ?></td></tr>
-               <tr><td class='n'>a i</td><td><?php echo __("Invert article selection") ?></td></tr>
-               <tr><td class='n'>a n</td><td><?php echo __("Deselect all articles") ?></td></tr>
-       </table>
-
-       <h2><?php echo __("Feed actions") ?></h2>
-
-       <table>
-               <tr><td class='n'>f r</td><td><?php echo __("Refresh active feed") ?></td></tr>
-               <tr><td class='n'>f a</td><td><?php echo __("(Un)hide read feeds") ?></td></tr>
-               <tr><td class='n'>f s</td><td><?php echo __("Subscribe to feed") ?></td></tr>
-               <tr><td class='n'>f e</td><td><?php echo __("Edit feed") ?></td></tr>
-               <tr><td class='n'>f q</td><td><?php echo __("Mark feed as read") ?></td></tr>
-               <tr><td class='n'>f x</td><td><?php echo __("Reverse headlines order") ?></td></tr>
-               <tr><td class='n'>Q</td><td><?php echo __("Mark all feeds as read") ?></td></tr>
-               <tr><td class='n'>x</td><td><?php echo __("If viewing category, (un)collapse it") ?></td></tr>
-       </table>
-
-       <h2><?php echo __("Go to...") ?></h2>
-
-       <table>
-               <tr><td class='n'>g a</td><td><?php echo __("All articles") ?></td></tr>
-               <tr><td class='n'>g f</td><td><?php echo __("Fresh articles") ?></td></tr>
-               <tr><td class='n'>g s</td><td><?php echo __("Starred articles") ?></td></tr>
-               <tr><td class='n'>g p</td><td><?php echo __("Published articles") ?></td></tr>
-               <tr><td class='n'>g t</td><td><?php echo __("Tag cloud") ?></td></tr>
-               <tr><td class='n'>g P</td><td><?php echo __("Preferences") ?></td></tr>
-       </table>
-
-
-       </td></tr></table>
-
-       <p><a target="_blank" href="http://tt-rss.org/wiki/InterfaceTips"><?php echo __("Other interface tips are available in the Tiny Tiny RSS wiki.") ?></a></p>
-
-       <p class="small"><?php echo __("Press any key to close this window.") ?></p>

diff --git a/help/prefs.php b/help/prefs.php
deleted file mode 100644 (file)
index 4cf3a12..0000000
--- a/help/prefs.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<h1><?php echo __("Keyboard Shortcuts") ?></h1>
-
-<table style='width : 100%'><tr><td style='width : 50%' valign='top'>
-
-       <h2><?php echo __("Go to...") ?></h2>
-
-       <table>
-               <tr><td class='n'>g 1</td><td><?php echo __("Preferences") ?></td></tr>
-               <tr><td class='n'>g 2</td><td><?php echo __("My Feeds") ?></td></tr>
-               <!-- <tr><td class='n'>g 3</td><td><?php echo __("Other Feeds") ?></td></tr> -->
-               <tr><td class='n'>g 3</td><td><?php echo __("Filters") ?></td></tr>
-               <tr><td class='n'>g 4</td><td><?php echo __("Labels") ?></td></tr>
-               <tr><td class='n'>g 5</td><td><?php echo __("Users") ?></td></tr>
-               <tr><td class='n'>g x</td><td><?php echo __("Exit preferences") ?></td></tr>
-       </table>
-
-</td><td valign='top'>
-
-       <h2><?php echo __("Panel actions") ?></h2>
-
-       <table>
-               <tr><td class='n'>c s</td><td><?php echo __("Subscribe to feed") ?></td></tr>
-               <tr><td class='n'>c T</td><td><?php echo __("Top 25 feeds") ?></td></tr>
-               <tr><td class='n'>c c</td><td><?php echo __("Edit feed categories") ?></td></tr>
-               <tr><td class='n'>c f</td><td><?php echo __("Create filter") ?></td></tr>
-               <!-- <tr><td class='n'>c l</td><td><?php echo __("Create label") ?></td></tr> -->
-               <!-- <tr><td class='n'>c u</td><td><?php echo __("Create user") ?></td></tr> -->
-       </table>
-
-       <h2><?php echo __("Other actions") ?></h2>
-
-       <table>
-               <tr><td class='n'>/</td><td><?php echo __("Focus search (if present)") ?></td></tr>
-               <tr><td class='n'>?</td><td><?php echo __("Display this help dialog") ?></td></tr>
-       </table>
-
-</td></tr></table>
-
-<p class='insensitive'><span class='small'><?php echo __("<b>Note:</b> not all actions may be available, depending on Tiny Tiny RSS configuration and your access level.") ?></span></p>
-
-<p class="small"><?php echo __("Press any key to close this window.") ?></p>

diff --git a/include/functions.php b/include/functions.php
index 0d90e725e0e366fe324a1a663e944a476bb43d28..5d277db960e8867e5fd2e3a785bf13d29adf5249 100644 (file)
--- a/include/functions.php
+++ b/include/functions.php
@@ -1963,14 +1963,70 @@
                $params["num_feeds"] = (int) $num_feeds;
 
                $params["collapsed_feedlist"] = (int) get_pref($link, "_COLLAPSED_FEEDLIST");
-               $params["hotkeys"] = get_hotkeys($link);
+               $params["hotkeys"] = get_hotkeys_map($link);
 
                $params["csrf_token"] = $_SESSION["csrf_token"];
 
                return $params;
        }
 
-       function get_hotkeys($link) {
+       function get_hotkeys_info($link) {
+               $hotkeys = array(
+                       __("Navigation") => array(
+                               "next_feed" => __("Open next feed"),
+                               "prev_feed" => __("Open previous feed"),
+                               "next_article" => __("Open next article"),
+                               "prev_article" => __("Open previous article"),
+                               "search_dialog" => __("Show search dialog")),
+                       __("Article") => array(
+                               "toggle_mark" => __("Toggle starred"),
+                               "toggle_publ" => __("Toggle published"),
+                               "toggle_unread" => __("Toggle unread"),
+                               "edit_tags" => __("Edit tags"),
+                               "dismiss_selected" => __("Dismiss selected"),
+                               "dismiss_read" => __("Dismiss read"),
+                               "open_in_new_window" => __("Open in new window"),
+                               "catchup_below" => __("Mark below as read"),
+                               "catchup_above" => __("Mark above as read"),
+                               "article_scroll_down" => __("Scroll down"),
+                               "article_scroll_up" => __("Scroll up"),
+                               "select_article_cursor" => __("Select article under cursor"),
+                               "email_article" => __("Email article")),
+                       __("Article selection") => array(
+                               "select_all" => __("Select all articles"),
+                               "select_unread" => __("Select unread"),
+                               "select_marked" => __("Select starred"),
+                               "select_published" => __("Select published"),
+                               "select_invert" => __("Invert selection"),
+                               "select_none" => __("Deselect everything")),
+                       __("Feed") => array(
+                               "feed_refresh" => __("Refresh current feed"),
+                               "feed_unhide_read" => __("Un/hide read feeds"),
+                               "feed_subscribe" => __("Subscribe to feed"),
+                               "feed_edit" => __("Edit feed"),
+                               "feed_catchup" => __("Mark as read"),
+                               "feed_reverse" => __("Reverse headlines"),
+                               "feed_debug_update" => __(""),
+                               "catchup_all" => __("Mark all feeds as read"),
+                               "cat_toggle_collapse" => __("Un/collapse current category")),
+                       __("Go to") => array(
+                               "goto_all" => __("All articles"),
+                               "goto_fresh" => __("Fresh"),
+                               "goto_marked" => __("Starred"),
+                               "goto_published" => __("Published"),
+                               "goto_tagcloud" => __("Tag cloud"),
+                               "goto_prefs" => __("Preferences")),
+                       __("Other") => array(
+                               "create_label" => __("Create label"),
+                               "create_filter" => __("Create filter"),
+                               "collapse_sidebar" => __("Un/collapse sidebar"),
+                               "help_dialog" => __("Show help dialog"))
+                       );
+
+               return $hotkeys;
+       }
+
+       function get_hotkeys_map($link) {
                $hotkeys = array(
 //                     "navigation" => array(
                                "k" => "next_feed",

diff --git a/index.php b/index.php
index b86cd0e664c62d14ee6435a54c718feb51897eca..4d404890697b7399058e4089322d902a1ace3e81 100644 (file)
--- a/index.php
+++ b/index.php
@@ -135,8 +135,6 @@
                alt="new_version_icon"/>
 </div>
 
-<div id="hotkey_help_overlay" style="display : none" onclick="Element.hide(this)"></div>
-
 <div id="notify" class="notify"><span id="notify_body">&nbsp;</span></div>
 <div id="cmdline" style="display : none"></div>
 <div id="auxDlg" style="display : none"></div>

diff --git a/js/functions.js b/js/functions.js
index 8776405be8ef357fa0631c88669d033723f3e3d7..ec533faae75fc1477fd0e651249c9ec0534a8dda 100644 (file)
--- a/js/functions.js
+++ b/js/functions.js
@@ -1874,3 +1874,25 @@ function get_timestamp() {
        var date = new Date();
        return Math.round(date.getTime() / 1000);
 }
+
+function helpDialog(topic) {
+       try {
+               var query = "backend.php?op=backend&method=help&topic=" + param_escape(topic);
+
+               if (dijit.byId("helpDlg"))
+                       dijit.byId("helpDlg").destroyRecursive();
+
+               dialog = new dijit.Dialog({
+                       id: "helpDlg",
+                       title: __("Help"),
+                       style: "width: 600px",
+                       href: query,
+               });
+
+               dialog.show();
+
+       } catch (e) {
+               exception_error("helpDialog", e);
+       }
+}
+

diff --git a/js/prefs.js b/js/prefs.js
index 7ee88ab56a137b11e535c5ccad2ebfd03ea7b2ce..a193e12625817bfb59401cddceea1128bd6ecdd7 100644 (file)
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -1009,9 +1009,9 @@ function validatePrefsReset() {
 
 }
 
-
 function pref_hotkey_handler(e) {
        try {
+
                if (e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA") return;
 
                var keycode = false;
@@ -1034,151 +1034,65 @@ function pref_hotkey_handler(e) {
                var keychar = String.fromCharCode(keycode);
 
                if (keycode == 27) { // escape
-                       if (Element.visible("hotkey_help_overlay")) {
-                               Element.hide("hotkey_help_overlay");
-                       }
                        hotkey_prefix = false;
-                       closeInfoBox();
                }
 
                if (keycode == 16) return; // ignore lone shift
                if (keycode == 17) return; // ignore lone ctrl
 
-               if ((keycode == 67 || keycode == 71) && !hotkey_prefix) {
-                       hotkey_prefix = keycode;
+               if (!shift_key) keychar = keychar.toLowerCase();
+
+               var hotkeys = getInitParam("hotkeys");
+
+               if (!hotkey_prefix && hotkeys[0].indexOf(keychar) != -1) {
 
                        var date = new Date();
                        var ts = Math.round(date.getTime() / 1000);
 
+                       hotkey_prefix = keychar;
                        hotkey_prefix_pressed = ts;
 
                        cmdline.innerHTML = keychar;
                        Element.show(cmdline);
 
-                       console.log("KP: PREFIX=" + keycode + " CHAR=" + keychar);
-                       return;
-               }
-
-               if (Element.visible("hotkey_help_overlay")) {
-                       Element.hide("hotkey_help_overlay");
+                       return true;
                }
 
-               if (keycode == 13 || keycode == 27) {
-                       seq = "";
-               } else {
-                       seq = seq + "" + keycode;
-               }
-
-               /* Global hotkeys */
-
                Element.hide(cmdline);
 
-               if (!hotkey_prefix) {
-
-                       if ((keycode == 191 || keychar == '?') && shift_key) { // ?
-                               showHelp();
-                               return false;
-                       }
-
-                       if (keycode == 191 || keychar == '/') { // /
-                               var search_boxes = new Array("label_search",
-                                       "feed_search", "filter_search", "user_search", "feed_browser_search");
-
-                               for (var i = 0; i < search_boxes.length; i++) {
-                                       var elem = $(search_boxes[i]);
-                                       if (elem) {
-                                               $(search_boxes[i]).focus();
-                                               return false;
-                                       }
-                               }
-                       }
-               }
-
-               /* Prefix c */
-
-               if (hotkey_prefix == 67) { // c
-                       hotkey_prefix = false;
-
-                       if (keycode == 70) { // f
-                               quickAddFilter();
-                               return false;
-                       }
-
-                       if (keycode == 83) { // s
-                               quickAddFeed();
-                               return false;
-                       }
-
-                       if (keycode == 85) { // u
-                               // no-op
-                       }
-
-                       if (keycode == 67) { // c
-                               editFeedCats();
-                               return false;
-                       }
-
-                       if (keycode == 84 && shift_key) { // T
-                               feedBrowser();
-                               return false;
-                       }
-
-               }
-
-               /* Prefix g */
-
-               if (hotkey_prefix == 71) { // g
-
-                       hotkey_prefix = false;
-
-                       if (keycode == 49 && $("genConfigTab")) { // 1
-                               selectTab("genConfig");
-                               return false;
-                       }
-
-                       if (keycode == 50 && $("feedConfigTab")) { // 2
-                               selectTab("feedConfig");
-                               return false;
-                       }
-
-                       if (keycode == 51 && $("filterConfigTab")) { // 4
-                               selectTab("filterConfig");
-                               return false;
-                       }
-
-                       if (keycode == 52 && $("labelConfigTab")) { // 5
-                               selectTab("labelConfig");
-                               return false;
-                       }
-
-                       if (keycode == 53 && $("userConfigTab")) { // 6
-                               selectTab("userConfig");
-                               return false;
-                       }
-
-                       if (keycode == 88) { // x
-                               return gotoMain();
-                       }
+               var hotkey = keychar.search(/[a-zA-Z0-9]/) != -1 ? keychar : "(" + keycode + ")";
+               hotkey = hotkey_prefix ? hotkey_prefix + " " + hotkey : hotkey;
+               hotkey_prefix = false;
 
-               }
+               var hotkey_action = false;
+               var hotkeys = getInitParam("hotkeys");
 
-               if ($("piggie")) {
-                       if (seq.match("8073717369")) {
-                               seq = "";
-                               piggie(true);
-                       } else {
-                               piggie(false);
+               for (sequence in hotkeys[1]) {
+                       if (sequence == hotkey) {
+                               hotkey_action = hotkeys[1][sequence];
+                               break;
                        }
                }
 
-               if (hotkey_prefix) {
-                       console.log("KP: PREFIX=" + hotkey_prefix + " CODE=" + keycode + " CHAR=" + keychar);
-               } else {
-                       console.log("KP: CODE=" + keycode + " CHAR=" + keychar);
+               switch (hotkey_action) {
+               case "feed_subscribe":
+                       quickAddFeed();
+                       return true;
+               case "create_label":
+                       addLabel();
+                       return true;
+               case "create_filter":
+                       quickAddFilter();
+                       return true;
+               case "help_dialog":
+                       //helpDialog("prefs");
+                       return false;
+               default:
+                       console.log("unhandled action: " + hotkey_action + "; hotkey: " + hotkey);
                }
 
        } catch (e) {
-               exception_error("pref_hotkey_handler", e);
+               exception_error("hotkey_handler", e);
        }
 }
 
@@ -1855,20 +1769,6 @@ function insertSSLserial(value) {
        }
 }
 
-function showHelp() {
-       try {
-               new Ajax.Request("backend.php", {
-                       parameters: "?op=backend&method=help&topic=prefs",
-                       onComplete: function(transport) {
-                               $("hotkey_help_overlay").innerHTML = transport.responseText;
-                               Effect.Appear("hotkey_help_overlay", {duration : 0.3});
-                       } });
-
-       } catch (e) {
-               exception_error("showHelp", e);
-       }
-}
-
 function gotoExportOpml(filename, settings) {
        tmp = settings ? 1 : 0;
        document.location.href = "backend.php?op=opml&method=export&filename=" + filename + "&settings=" + tmp;

diff --git a/js/tt-rss.js b/js/tt-rss.js
index 2698f152f99bcfc899f1b45115de62733b326e7a..fb80f48993c9c9a38857d7ea0dda8d82ecc5429d 100644 (file)
--- a/js/tt-rss.js
+++ b/js/tt-rss.js
@@ -453,12 +453,7 @@ function quickMenuGo(opid) {
                }
 
                if (opid == "qmcHKhelp") {
-                       new Ajax.Request("backend.php", {
-                               parameters: "?op=backend&method=help&topic=main",
-                               onComplete: function(transport) {
-                                       $("hotkey_help_overlay").innerHTML = transport.responseText;
-                                       Effect.Appear("hotkey_help_overlay", {duration : 0.3});
-                               } });
+                       helpDialog("main");
                }
 
        } catch (e) {
@@ -638,9 +633,6 @@ function hotkey_handler(e) {
                var keychar = String.fromCharCode(keycode);
 
                if (keycode == 27) { // escape
-                       if (Element.visible("hotkey_help_overlay")) {
-                               Element.hide("hotkey_help_overlay");
-                       }
                        hotkey_prefix = false;
                }
 
@@ -844,12 +836,7 @@ function hotkey_handler(e) {
                        collapse_feedlist();
                        return true;
                case "help_dialog":
-                       new Ajax.Request("backend.php", {
-                               parameters: "?op=backend&method=help&topic=main",
-                               onComplete: function(transport) {
-                                       $("hotkey_help_overlay").innerHTML = transport.responseText;
-                                       Effect.Appear("hotkey_help_overlay", {duration : 0.3});
-                               } });
+                       helpDialog("main");
                        return false;
                default:
                        console.log("unhandled action: " + hotkey_action + "; hotkey: " + hotkey);

diff --git a/prefs.php b/prefs.php
index e20ac9baa83e2edb7cceb9d5beb56f6df38ccdf2..575fbbf0fefa2afb7acabd682bda7d233019e12c 100644 (file)
--- a/prefs.php
+++ b/prefs.php
@@ -90,12 +90,10 @@
        </div>
 </div>
 
-<div id="hotkey_help_overlay" style="display : none" onclick="Element.hide(this)"></div>
-
 <img id="piggie" src="images/piggie.png" style="display : none" alt="piggie"/>
 
 <div id="header" dojoType="dijit.layout.ContentPane" region="top">
-       <a href='#' onclick="showHelp()"><?php echo __("Keyboard shortcuts") ?></a> |
+       <!-- <a href='#' onclick="showHelp()"><?php echo __("Keyboard shortcuts") ?></a> | -->
        <a href="#" onclick="gotoMain()"><?php echo __('Exit preferences') ?></a>
 </div>
 

diff --git a/tt-rss.css b/tt-rss.css
index 9bcaafab6d297492a76077411634be3747c80af9..ee52454cf54c24928376d46576efb66acd005e63 100644 (file)
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -932,74 +932,6 @@ img.hlScorePic {
        height : 16px;
 }
 
-div#hotkey_help_overlay {
-       position : absolute;
-       left : 30px;
-       right : 30px;
-       top : 30px;
-       z-index : 999;
-       color : white;
-       font-size : 15px;
-       background : black;
-       border-radius : 30px;
-       padding : 10px;
-}
-
-div#hotkey_help_overlay h1 {
-       text-align : center;
-}
-
-div#hotkey_help_overlay ul {
-       list-style-type : none;
-       margin : 0px;
-}
-
-div#hotkey_help_overlay a {
-       color : #88b0f0;
-}
-
-div#hotkey_help_overlay a:hover {
-       color : white;
-}
-
-div#hotkey_help_overlay li {
-       margin : 0px;
-}
-
-div#hotkey_help_overlay p {
-       text-align : center;
-}
-
-div#hotkey_help_overlay td.n {
-       text-align : right;
-       font-weight : bold;
-       width : 6em;
-       color : #a0ffa0;
-       padding-right : 5px;
-}
-
-div#hotkey_help_overlay td {
-       vertical-align : top;
-}
-
-div#hotkey_help_overlay h1 {
-       margin : 0px;
-}
-
-div#hotkey_help_overlay h2 {
-       font-size : 16px;
-       border-width : 0px;
-       margin : 0.3em 0px 0.3em 0px;
-       text-align : center;
-       color : #88b0f0;
-}
-
-div#hotkey_help_overlay table.hho td.top,
-div#hotkey_help_overlay table.hho td.bottom {
-       text-align : center;
-       font-size : 11px;
-}
-
 div.dlgSec {
        font-size : 12px;
        color : gray;
@@ -1411,3 +1343,25 @@ ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitChec
 table.prefPluginsList td label, table.prefUserList td {
        cursor : pointer;
 }
+
+ul.helpKbList {
+       max-height : 300px;
+       overflow : auto;
+       list-style-type : none;
+       border : 1px solid #c0c0c0;
+       background-color : #ecf4ff;
+       margin : 0px 0px 5px 0px;
+       padding : 5px;
+}
+
+ul.helpKbList span.hksequence {
+       width : 6em;
+       margin-left : 20px;
+       color : #88b0f0;
+       font-weight : bold;
+       display : inline-block;
+}
+
+ul.helpKbList h2 {
+       margin-top : 0px;
+}