Hints for keybindings. Refs #517

css/app.css

@@ -1110,6 +1110,17 @@ div.typeahead a:first-child {
   left: 30px;
 }
 
+.tooltip .keyhint {
+    float: right;
+    background: #eee;
+    font-size: 10px;
+    padding: 0 4px;
+    background:#aaa;
+    color:#fff;
+    border-radius: 2px;
+    margin-left: 4px;
+}
+
 .tail {
   pointer-events:none;
   position: absolute;

js/id/id.js

@@ -21,6 +21,10 @@ window.iD = function(container) {
             return;
         }
 
+        function hintprefix(x, y) {
+            return '<span class="keyhint">' + x + '</span> ' + y;
+        }
+
         var m = container.append('div')
             .attr('id', 'map')
             .call(map);
@@ -40,8 +44,10 @@ window.iD = function(container) {
             .enter().append('button')
                 .attr('tabindex', -1)
                 .attr('class', function (mode) { return mode.title + ' add-button col3'; })
-            .attr('data-original-title', function (mode) { return mode.description; })
-            .call(bootstrap.tooltip().placement('bottom'))
+            .attr('data-original-title', function (mode) {
+                return hintprefix(mode.key, mode.description);
+            })
+            .call(bootstrap.tooltip().placement('bottom').html(true))
             .on('click.editor', function (mode) { controller.enter(mode); });
 
         function disableTooHigh() {
@@ -82,7 +88,7 @@ window.iD = function(container) {
 
         var undo_buttons = limiter.append('div')
             .attr('class', 'button-wrap joined col1'),
-            undo_tooltip = bootstrap.tooltip().placement('bottom');
+            undo_tooltip = bootstrap.tooltip().placement('bottom').html(true);
 
         undo_buttons.append('button')
             .attr({ id: 'undo', 'class': 'col6' })
@@ -201,12 +207,12 @@ window.iD = function(container) {
 
             limiter.select('#undo')
                 .property('disabled', !undo)
-                .attr('data-original-title', undo)
+                .attr('data-original-title', hintprefix('⌘Z', undo))
                 .call(refreshTooltip);
 
             limiter.select('#redo')
                 .property('disabled', !redo)
-                .attr('data-original-title', redo)
+                .attr('data-original-title', hintprefix('⌘⇧Z', redo))
                 .call(refreshTooltip);
         });
 
@@ -215,16 +221,16 @@ window.iD = function(container) {
         });
 
         var keybinding = d3.keybinding('main')
-            .on('M', function() { if (map.editable()) controller.enter(iD.modes.Browse()); })
-            .on('P', function() { if (map.editable()) controller.enter(iD.modes.AddPoint()); })
-            .on('L', function() { if (map.editable()) controller.enter(iD.modes.AddLine()); })
-            .on('A', function() { if (map.editable()) controller.enter(iD.modes.AddArea()); })
             .on('⌘+Z', function() { history.undo(); })
             .on('⌃+Z', function() { history.undo(); })
             .on('⌘+⇧+Z', function() { history.redo(); })
             .on('⌃+⇧+Z', function() { history.redo(); })
             .on('⌫', function() { d3.event.preventDefault(); });
 
+        [iD.modes.Browse(), iD.modes.AddPoint(), iD.modes.AddLine(), iD.modes.AddArea()].forEach(function(m) {
+            keybinding.on(m.key, function() { if (map.editable()) controller.enter(m); });
+        });
+
         d3.select(document)
             .call(keybinding);
 

js/id/modes/add_area.js

@@ -3,7 +3,8 @@ iD.modes.AddArea = function() {
         id: 'add-area',
         button: 'area',
         title: 'Area',
-        description: 'Add parks, buildings, lakes, or other areas to the map.'
+        description: 'Add parks, buildings, lakes, or other areas to the map.',
+        key: 'a'
     };
 
     var behavior,

js/id/modes/add_line.js

@@ -3,7 +3,8 @@ iD.modes.AddLine = function() {
         id: 'add-line',
         button: 'line',
         title: 'Line',
-        description: 'Lines can be highways, streets, pedestrian paths, or even canals.'
+        description: 'Lines can be highways, streets, pedestrian paths, or even canals.',
+        key: 'l'
     };
 
     var behavior,

js/id/modes/add_point.js

@@ -2,7 +2,8 @@ iD.modes.AddPoint = function() {
     var mode = {
         id: 'add-point',
         title: 'Point',
-        description: 'Restaurants, monuments, and postal boxes are points.'
+        description: 'Restaurants, monuments, and postal boxes are points.',
+        key: 'p'
     };
 
     var behavior;

js/id/modes/browse.js

@@ -3,7 +3,8 @@ iD.modes.Browse = function() {
         button: 'browse',
         id: 'browse',
         title: 'Move',
-        description: 'Pan and zoom the map'
+        description: 'Pan and zoom the map',
+        key: 'b'
     };
 
     var behaviors;