Add tooltips for accesskeys

code/portal_detail_display.js

@@ -131,7 +131,7 @@ window.renderPortalDetails = function(guid) {
 
       $('<span>').attr({
         class: 'close',
-        title: 'Close',
+        title: 'Close [w]',
         onclick:'renderPortalDetails(null); if(isSmartphone()) show("map");',
         accesskey: 'w'
       }).text('X'),

main.js

@@ -78,8 +78,9 @@ try {
 document.getElementsByTagName('body')[0].innerHTML = ''
   + '<div id="map">Loading, please wait</div>'
   + '<div id="chatcontrols" style="display:none">'
-  + '  <a accesskey="0"><span class="toggle expand"></span></a>'
-  +   '<a accesskey="1">full</a><a accesskey="2">compact</a><a accesskey="3">public</a><a accesskey="4" class="active">faction</a>'
+  + '<a accesskey="0" title="[0]"><span class="toggle expand"></span></a>'
+  + '<a accesskey="1" title="[1]">full</a><a accesskey="2" title="[2]">compact</a>'
+  + '<a accesskey="3" title="[3]">public</a><a accesskey="4" title="[4]" class="active">faction</a>'
   + '</div>'
   + '<div id="chat" style="display:none">'
   + '  <div id="chatfaction"></div>'
@@ -90,15 +91,15 @@ document.getElementsByTagName('body')[0].innerHTML = ''
   + '<form id="chatinput" style="display:none"><table><tr>'
   + '  <td><time></time></td>'
   + '  <td><mark>tell faction:</mark></td>'
-  + '  <td><input id="chattext" type="text" maxlength="256" accesskey="c" /></td>'
+  + '  <td><input id="chattext" type="text" maxlength="256" accesskey="c" title="[c]" /></td>'
   + '</tr></table></form>'
-  + '<a id="sidebartoggle" accesskey="i"><span class="toggle close"></span></a>'
+  + '<a id="sidebartoggle" accesskey="i" title="Toggle sidebar [i]"><span class="toggle close"></span></a>'
   + '<div id="scrollwrapper">' // enable scrolling for small screens
   + '  <div id="sidebar" style="display: none">'
   + '    <div id="playerstat">t</div>'
   + '    <div id="gamestat">&nbsp;loading global control stats</div>'
   + '    <div id="geosearchwrapper">'
-  + '      <input id="geosearch" placeholder="Search location…" type="text" accesskey="f"/>'
+  + '      <input id="geosearch" placeholder="Search location…" type="text" accesskey="f" title="Search for a place [f]"/>'
   + '      <img src="@@INCLUDEIMAGE:images/current-location.png@@"/ title="Current Location">'
   + '    </div>'
   + '    <div id="portaldetails"></div>'

plugins/bookmarks-by-zaso.user.js

@@ -1055,7 +1055,7 @@
   }
  
   window.plugin.bookmarks.setupContent = function() {
-    plugin.bookmarks.htmlBoxTrigger = '<a id="bkmrksTrigger" class="open" onclick="window.plugin.bookmarks.switchStatusBkmrksBox(\'switch\');return false;" accesskey="v">[-] Bookmarks</a>';
+    plugin.bookmarks.htmlBoxTrigger = '<a id="bkmrksTrigger" class="open" onclick="window.plugin.bookmarks.switchStatusBkmrksBox(\'switch\');return false;" accesskey="v" title="[v]">[-] Bookmarks</a>';
     plugin.bookmarks.htmlBkmrksBox = '<div id="bookmarksBox">'
                           +'<div id="topBar">'
                             +'<a id="bookmarksMin" class="btn" onclick="window.plugin.bookmarks.switchStatusBkmrksBox(0);return false;" title="Minimize">-</a>'
@@ -1084,8 +1084,8 @@
                         +'</div>';
 
     plugin.bookmarks.htmlDisabledMessage = '<div title="Your browser do not support localStorage">Plugin Bookmarks disabled*.</div>';
-    plugin.bookmarks.htmlStar = '<a class="bkmrksStar" accesskey="b" onclick="window.plugin.bookmarks.switchStarPortal();return false;" title="Save this portal in your bookmarks"><span></span></a>';
-    plugin.bookmarks.htmlCalldrawBox = '<a onclick="window.plugin.bookmarks.dialogDrawer();return false;" accesskey="q" title="Draw lines/triangles between bookmarked portals">Auto draw</a>';
+    plugin.bookmarks.htmlStar = '<a class="bkmrksStar" accesskey="b" onclick="window.plugin.bookmarks.switchStarPortal();return false;" title="Save this portal in your bookmarks [b]"><span></span></a>';
+    plugin.bookmarks.htmlCalldrawBox = '<a onclick="window.plugin.bookmarks.dialogDrawer();return false;" accesskey="q" title="Draw lines/triangles between bookmarked portals [q]">Auto draw</a>';
     plugin.bookmarks.htmlCallSetBox = '<a onclick="window.plugin.bookmarks.manualOpt();return false;">Bookmarks Opt</a>';
     plugin.bookmarks.htmlMoveBtn = '<a id="bookmarksMove" class="btn" onclick="window.plugin.bookmarks.moveMode();return false;">Show/Hide "Move" button</a>'
 

plugins/draw-tools.user.js

@@ -178,6 +178,7 @@ window.plugin.drawTools.addDrawControl = function() {
 }
 
 window.plugin.drawTools.setAccessKeys = function() {
+  var expr = /\s*\[\w+\]$/;
   // there is no API to add accesskeys, so have to dig in the DOM
   // must be same order as in markup. Note that each toolbar has a container for save/cancel
   var accessKeys = [
@@ -188,11 +189,20 @@ window.plugin.drawTools.setAccessKeys = function() {
   ];
   var buttons = window.plugin.drawTools.drawControl._container.getElementsByTagName('a');
   for(var i=0;i<buttons.length;i++) {
-    if(!buttons[i].offsetParent) { // element hidden, delete accessKey (so other elements can use it)
-      buttons[i].accessKey = '';
+    var button = buttons[i];
+
+    var title = button.title;
+    var index = title.search(expr);
+    if(index !== -1) title = title.substr(0, index);
+
+    if(!button.offsetParent) { // element hidden, delete accessKey (so other elements can use it)
+      button.accessKey = '';
     } else if(accessKeys[i]) {
-      buttons[i].accessKey = accessKeys[i];
+      button.accessKey = accessKeys[i];
+      if(title === "") title = "[" + accessKeys[i] + "]";
+      else title += " [" + accessKeys[i] + "]";
     }
+    button.title = title;
   }
 }
 
@@ -479,7 +489,7 @@ window.plugin.drawTools.boot = function() {
     runHooks('pluginDrawTools',{event:'layersEdited'});
   });
   //add options menu
-  $('#toolbox').append('<a onclick="window.plugin.drawTools.manualOpt();return false;" accesskey="x">DrawTools Opt</a>');
+  $('#toolbox').append('<a onclick="window.plugin.drawTools.manualOpt();return false;" accesskey="x" title="[x]">DrawTools Opt</a>');
 
   $('head').append('<style>' +
         '.drawtoolsSetbox > a { display:block; color:#ffce00; border:1px solid #ffce00; padding:3px 0; margin:10px auto; width:80%; text-align:center; background:rgba(8,48,78,.9); }'+

plugins/privacy-view.user.js

@@ -103,7 +103,7 @@ window.plugin.privacyView.setup = function() {
   $('#chatcontrols a:first').click(window.plugin.privacyView.wrapChatToggle);
 
   $('#chatcontrols').before('<div id="privacycontrols" class="shrinked">' +
-    '  <a accesskey="9"><span class="toggle"></span></a>' +
+    '  <a accesskey="9" title="[9]"><span class="toggle"></span></a>' +
     '</div>');
   $('#privacycontrols a').click(window.plugin.privacyView.toggle);