Add key to toggle the sidebar

data/core.yaml

@@ -294,8 +294,8 @@ en:
   loading_auth: "Connecting to OpenStreetMap..."
   report_a_bug: Report a bug
   help_translate: Help translate
-  sidebar_button:
-    title: Sidebar
+  sidebar:
+    key: '`'
     tooltip: Toggle the sidebar.
   feature_info:
     hidden_warning: "{count} hidden features"
@@ -1151,6 +1151,7 @@ en:
         background_switch: "Switch back to last background"
         map_data: "Show map data options"
         fullscreen: "Enter full screen mode"
+        sidebar: "Toggle sidebar"
         wireframe: "Toggle wireframe mode"
         minimap: "Toggle minimap"
       selecting:

data/shortcuts.json

@@ -66,6 +66,10 @@
               "shortcuts": ["F", "F11"],
               "text": "shortcuts.browsing.display_options.fullscreen"
             },
+            {
+              "shortcuts": ["sidebar.key"],
+              "text": "shortcuts.browsing.display_options.sidebar"
+            },
             {
               "shortcuts": ["area_fill.wireframe.key"],
               "text": "shortcuts.browsing.display_options.wireframe"

dist/locales/en.json

@@ -373,8 +373,8 @@
         "loading_auth": "Connecting to OpenStreetMap...",
         "report_a_bug": "Report a bug",
         "help_translate": "Help translate",
-        "sidebar_button": {
-            "title": "Sidebar",
+        "sidebar": {
+            "key": "`",
             "tooltip": "Toggle the sidebar."
         },
         "feature_info": {
@@ -1329,6 +1329,7 @@
                     "background_switch": "Switch back to last background",
                     "map_data": "Show map data options",
                     "fullscreen": "Enter full screen mode",
+                    "sidebar": "Toggle sidebar",
                     "wireframe": "Toggle wireframe mode",
                     "minimap": "Toggle minimap"
                 },

modules/ui/init.js

@@ -37,6 +37,7 @@ import { uiSidebar } from './sidebar';
 import { uiSpinner } from './spinner';
 import { uiSplash } from './splash';
 import { uiStatus } from './status';
+import { uiTooltipHtml } from './tooltipHtml';
 import { uiUndoRedo } from './undo_redo';
 import { uiVersion } from './version';
 import { uiZoom } from './zoom';
@@ -101,14 +102,17 @@ export function uiInit(context) {
             .attr('class', 'sidebar-toggle')
             .attr('tabindex', -1)
             .on('click', ui.sidebar.toggleCollapse)
-            .call(tooltip().title(t('sidebar_button.tooltip')).placement('bottom'));
+            .call(tooltip()
+                .placement('bottom')
+                .html(true)
+                .title(function(mode) {
+                    return uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key'));
+                })
+            );
 
         var iconSuffix = textDirection === 'rtl' ? 'right' : 'left';
         sidebarButton
             .call(svgIcon('#iD-icon-sidebar-' + iconSuffix));
-            // .append('span')
-            // .attr('class', 'label')
-            // .text(t('sidebar_button.title'));
 
         leadingArea
             .append('div')
@@ -287,6 +291,7 @@ export function uiInit(context) {
         var pa = 80;  // pan amount
         var keybinding = d3_keybinding('main')
             .on('⌫', function() { d3_event.preventDefault(); })
+            .on(t('sidebar.key'), ui.sidebar.toggleCollapse)
             .on('←', pan([pa, 0]))
             .on('↑', pan([0, pa]))
             .on('→', pan([-pa, 0]))