From 04825da109481361fdfad72384b7ece4ac9df586 Mon Sep 17 00:00:00 2001
From: Ajith Ranka <ajith@mapbox.com>
Date: Wed, 25 Jan 2017 12:51:46 +0530
Subject: [PATCH 01/14] display a shortcuts modal, continues #1481

---
 css/80_app.css          | 12 ++++++
 data/index.js           |  1 +
 data/shortcuts.json     | 95 +++++++++++++++++++++++++++++++++++++++++
 modules/ui/init.js      |  4 +-
 modules/ui/shortcuts.js | 69 ++++++++++++++++++++++++++++++
 5 files changed, 180 insertions(+), 1 deletion(-)
 create mode 100644 data/shortcuts.json
 create mode 100644 modules/ui/shortcuts.js

diff --git a/css/80_app.css b/css/80_app.css
index 4c4745b1e6..d09a925d6a 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3082,6 +3082,18 @@ img.tile-removing {
 }
 
 
+/* Shortcuts Modal
+------------------------------------------------------- */
+.modal-shortcuts {
+    padding-bottom: 20px;
+}
+
+.modal-shortcuts kbd {
+    padding: 2px 4px;
+    background: #eee;
+    margin-right: 4px;
+}
+
 /* Save Mode
 ------------------------------------------------------- */
 .mode-save a.user-info {
diff --git a/data/index.js b/data/index.js
index 1fc44aaff1..f2ae2544ba 100644
--- a/data/index.js
+++ b/data/index.js
@@ -6,6 +6,7 @@ export { dataDeprecated } from './deprecated.json';
 export { dataDiscarded } from './discarded.json';
 export { dataLocales } from './locales.json';
 export { dataPhoneFormats } from './phone-formats.json';
+export { dataShortcuts } from './shortcuts.json';
 
 export { default as dataImperial } from './imperial.json';
 export { default as dataDriveLeft } from './drive-left.json';
diff --git a/data/shortcuts.json b/data/shortcuts.json
new file mode 100644
index 0000000000..ce02069293
--- /dev/null
+++ b/data/shortcuts.json
@@ -0,0 +1,95 @@
+{
+    "dataShortcuts": [
+        {
+            "desc": "Changing the display",
+            "shortcuts": [
+                {
+                    "keys": ["↓", "↑", "←", "→"],
+                    "desc": "Pan map"
+                },
+                {
+                    "keys": ["⇧↓", "⇧↑", "⇧←", "⇧→"],
+                    "desc": "Pan map by one screenful"
+                },
+                {
+                    "keys": ["+", "-"],
+                    "desc": "Zoom in / Zoom out"
+                },
+                {
+                    "keys": ["⌘+", "⌘-"],
+                    "desc": "Zoom in / Zoom out by a lot"
+                },
+                {
+                    "keys": ["B"],
+                    "desc": "Display background layer switcher"
+                },
+                {
+                    "keys": ["⌘B"],
+                    "desc": "Switch between previous and current backgrounds"
+                },
+                {
+                    "keys": ["W"],
+                    "desc": "Toggle wireframe mode"
+                },
+                {
+                    "keys": ["H"],
+                    "desc": "Show in-editor help/documentation"
+                },
+                {
+                    "keys": ["/"],
+                    "desc": "Toggle minimap"
+                },
+                {
+                    "keys": ["⌘I"],
+                    "desc": "Toggle info/measurements box"
+                },
+                {
+                    "keys": ["Spacebar"],
+                    "desc": "Toggle radial menu for currently selected object"
+                }
+            ]
+        },
+        {
+            "desc": "Editing mode",
+            "shortcuts": [
+                {
+                    "keys": ["1"],
+                    "desc": "Switch to 'add point' mode"
+                },
+                {
+                    "keys": ["2"],
+                    "desc": "Switch to 'add line' mode"
+                },
+                {
+                    "keys": ["3"],
+                    "desc": "Switch to 'add area' mode"
+                },
+                {
+                    "keys": ["A"],
+                    "desc": "Continue drawing a line at the selected node"
+                },
+                {
+                    "keys": ["↵ Enter", "Esc"],
+                    "desc": "Stop drawing of a line or area"
+                }
+            ]
+        },
+        {
+            "desc": "Undoing or saving changes",
+            "shortcuts": [
+                {
+                    "keys": ["⌘Z"],
+                    "desc": "Undo last action"
+                },
+                {
+                    "keys": ["⌘⇧Z"],
+                    "desc": "Redo last action"
+                },
+                {
+                    "keys": ["⌘S"],
+                    "desc": "Save changes"
+                }
+            ]
+        }
+    ]
+}
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 8908bd27a4..243943a59b 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -24,6 +24,7 @@ import { uiModes } from './modes';
 import { uiRestore } from './restore';
 import { uiSave } from './save';
 import { uiScale } from './scale';
+import { uiShortcuts } from './shortcuts';
 import { uiSidebar } from './sidebar';
 import { uiSpinner } from './spinner';
 import { uiSplash } from './splash';
@@ -283,7 +284,8 @@ export function uiInit(context) {
         if (!uiInitCounter++) {
             context.container()
                 .call(uiSplash(context))
-                .call(uiRestore(context));
+                .call(uiRestore(context))
+				.call(uiShortcuts(context));
         }
 
         var authenticating = uiLoading(context)
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
new file mode 100644
index 0000000000..09df94e85d
--- /dev/null
+++ b/modules/ui/shortcuts.js
@@ -0,0 +1,69 @@
+import * as d3 from 'd3';
+import { uiCmd } from './cmd';
+import { uiModal } from './modal';
+import { d3keybinding } from '../lib/d3.keybinding.js';
+import { dataShortcuts } from '../../data/shortcuts.json';
+
+export function uiShortcuts(context) {
+    var key = uiCmd('⇧/');
+
+    function shortcuts(selection) {
+        function show() {
+            if (!d3.selectAll('.modal').empty()) return;
+
+            var modalSelection = uiModal(selection);
+
+            modalSelection.select('.modal')
+                .attr('class', 'modal fillL col6');
+
+            var shortcutsModal = modalSelection.select('.content');
+
+            shortcutsModal
+                .attr('class','cf');
+
+            shortcutsModal
+                .append('div')
+                .attr('class', 'modal-section')
+                .append('h3')
+                .text('Keyboard shortcuts');
+
+            var section = shortcutsModal
+                .selectAll('section')
+                .data(dataShortcuts)
+                .enter().append('section')
+                .attr('class', 'modal-section modal-shortcuts cf');
+
+            section
+                .append('h4')
+                .text(function(d) { return d.desc; });
+
+            var p = section
+                .selectAll('p')
+                .data(function(d) { return d.shortcuts; })
+                .enter().append('p');
+
+            var shortcuts = p
+                .append('span')
+                .attr('class', 'col4');
+
+            shortcuts
+                .selectAll('kbd')
+                .data(function(d) { return d.keys; })
+                .enter().append('kbd')
+                .text(function(d) { return uiCmd(d); });
+
+            var description  = p
+                .append('span')
+                .attr('class', 'col8')
+                .text(function(d) { return d.desc });
+        }
+
+        var keybinding = d3keybinding('shortcuts')
+            .on(key, show);
+
+        d3.select(document)
+            .call(keybinding);
+    }
+
+    return shortcuts;
+}

From ccc438527f4e7df06c94a96e95ec33e60195fa50 Mon Sep 17 00:00:00 2001
From: Ajith Ranka <ajith@mapbox.com>
Date: Wed, 25 Jan 2017 13:01:54 +0530
Subject: [PATCH 02/14] fix eslint error: missing semicolon

---
 modules/ui/shortcuts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 09df94e85d..2f9dad1492 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -55,7 +55,7 @@ export function uiShortcuts(context) {
             var description  = p
                 .append('span')
                 .attr('class', 'col8')
-                .text(function(d) { return d.desc });
+                .text(function(d) { return d.desc; });
         }
 
         var keybinding = d3keybinding('shortcuts')

From 5e8ad595b0d9f3f01f22fda226caaceae094ff93 Mon Sep 17 00:00:00 2001
From: Kushan Joshi <0o3ko0@gmail.com>
Date: Wed, 8 Feb 2017 17:28:16 +0530
Subject: [PATCH 03/14] interim

---
 data/core.yaml          |  26 +++++
 data/shortcuts.json     | 232 ++++++++++++++++++++++++----------------
 modules/ui/shortcuts.js |   8 +-
 3 files changed, 167 insertions(+), 99 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 0d9695e18a..d84d076dc3 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1016,3 +1016,29 @@ en:
       help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button."
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
+shortcuts:
+    display:
+      desc: "Changing the display"
+      shortcuts:
+        pan_map: "Pan map"
+        pan_map_screen: "Pan map by one screenful"
+        zoom: "Zoom in / Zoom out"
+        zoom_large: "Zoom in / Zoom out by a lot"
+        bg_switcher: "Display background layer switcher"
+        bg: "Switch between previous and current backgrounds"
+        wireframe: "Toggle wireframe mode"
+        help: "Show in-editor help/documentation"
+        minimap: "Toggle minimap"
+        infobox: "Toggle info/measurements box"
+        radial_menu: "Toggle radial menu for currently selected object"
+    edit:
+      desc: "Editing mode"
+      shortcuts:
+        add_point: "Switch to 'add point' mode"
+        add_line: "Switch to 'add line' mode"
+        add_area: "Switch to 'add area' mode"
+        continue_line: "Continue drawing a line at the selected node"
+        stop_line: "Stop drawing of a line or area"
+        undo: "Undo last action"
+        redo: "Redo last action"
+        save: "Save changes"
\ No newline at end of file
diff --git a/data/shortcuts.json b/data/shortcuts.json
index ce02069293..ca0b68e243 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -1,95 +1,137 @@
-{
-    "dataShortcuts": [
-        {
-            "desc": "Changing the display",
-            "shortcuts": [
-                {
-                    "keys": ["↓", "↑", "←", "→"],
-                    "desc": "Pan map"
-                },
-                {
-                    "keys": ["⇧↓", "⇧↑", "⇧←", "⇧→"],
-                    "desc": "Pan map by one screenful"
-                },
-                {
-                    "keys": ["+", "-"],
-                    "desc": "Zoom in / Zoom out"
-                },
-                {
-                    "keys": ["⌘+", "⌘-"],
-                    "desc": "Zoom in / Zoom out by a lot"
-                },
-                {
-                    "keys": ["B"],
-                    "desc": "Display background layer switcher"
-                },
-                {
-                    "keys": ["⌘B"],
-                    "desc": "Switch between previous and current backgrounds"
-                },
-                {
-                    "keys": ["W"],
-                    "desc": "Toggle wireframe mode"
-                },
-                {
-                    "keys": ["H"],
-                    "desc": "Show in-editor help/documentation"
-                },
-                {
-                    "keys": ["/"],
-                    "desc": "Toggle minimap"
-                },
-                {
-                    "keys": ["⌘I"],
-                    "desc": "Toggle info/measurements box"
-                },
-                {
-                    "keys": ["Spacebar"],
-                    "desc": "Toggle radial menu for currently selected object"
-                }
-            ]
-        },
-        {
-            "desc": "Editing mode",
-            "shortcuts": [
-                {
-                    "keys": ["1"],
-                    "desc": "Switch to 'add point' mode"
-                },
-                {
-                    "keys": ["2"],
-                    "desc": "Switch to 'add line' mode"
-                },
-                {
-                    "keys": ["3"],
-                    "desc": "Switch to 'add area' mode"
-                },
-                {
-                    "keys": ["A"],
-                    "desc": "Continue drawing a line at the selected node"
-                },
-                {
-                    "keys": ["↵ Enter", "Esc"],
-                    "desc": "Stop drawing of a line or area"
-                }
-            ]
-        },
-        {
-            "desc": "Undoing or saving changes",
-            "shortcuts": [
-                {
-                    "keys": ["⌘Z"],
-                    "desc": "Undo last action"
-                },
-                {
-                    "keys": ["⌘⇧Z"],
-                    "desc": "Redo last action"
-                },
-                {
-                    "keys": ["⌘S"],
-                    "desc": "Save changes"
-                }
-            ]
-        }
-    ]
-}
+[
+    {
+        "key": "display",
+        "desc": "Changing the display",
+        "shortcuts": [
+            {
+                "shortcut": [
+                    "↓",
+                    "↑",
+                    "←",
+                    "→"
+                ],
+                "key": "pan_map"
+            },
+            {
+                "shortcut": [
+                    "⇧↓",
+                    "⇧↑",
+                    "⇧←",
+                    "⇧→"
+                ],
+                "key": "pan_map_screen"
+            },
+            {
+                "shortcut": [
+                    "+",
+                    "-"
+                ],
+                "key": "zoom"
+            },
+            {
+                "shortcut": [
+                    "⌘+",
+                    "⌘-"
+                ],
+                "key": "zoom_large"
+            },
+            {
+                "shortcut": [
+                    "B"
+                ],
+                "key": "bg_switcher"
+            },
+            {
+                "shortcut": [
+                    "⌘B"
+                ],
+                "key": "bg"
+            },
+            {
+                "shortcut": [
+                    "W"
+                ],
+                "key": "wireframe"
+            },
+            {
+                "shortcut": [
+                    "H"
+                ],
+                "key": "help"
+            },
+            {
+                "shortcut": [
+                    "/"
+                ],
+                "key": "minimap"
+            },
+            {
+                "shortcut": [
+                    "⌘I"
+                ],
+                "key": "infobox"
+            },
+            {
+                "shortcut": [
+                    "Spacebar"
+                ],
+                "key": "radial_menu"
+            }
+        ]
+    },
+    {
+        "key": "edit",
+        "desc": "Editing mode",
+        "shortcuts": [
+            {
+                "shortcut": [
+                    "1"
+                ],
+                "key": "add_point"
+            },
+            {
+                "shortcut": [
+                    "2"
+                ],
+                "desc": "add_line"
+            },
+            {
+                "shortcut": [
+                    "3"
+                ],
+                "key": "add_area"
+            },
+            {
+                "shortcut": [
+                    "A"
+                ],
+                "key": "continue_line"
+            },
+            {
+                "shortcut": [
+                    "↵ Enter",
+                    "Esc"
+                ],
+                "key": "stop_line"
+            },
+            {
+                "shortcut": [
+                    "⌘Z"
+                ],
+                "key": "undo"
+            },
+            {
+                "shortcut": [
+                    "⌘⇧Z"
+                ],
+                "key": "redo"
+            },
+            {
+                "shortcut": [
+                    "⌘S"
+                ],
+                "save": "save"
+            }
+        ]
+    }
+]
\ No newline at end of file
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 2f9dad1492..b2e73e3532 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -2,7 +2,7 @@ import * as d3 from 'd3';
 import { uiCmd } from './cmd';
 import { uiModal } from './modal';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { dataShortcuts } from '../../data/shortcuts.json';
+import shortcuts from '../../data/shortcuts.json';
 
 export function uiShortcuts(context) {
     var key = uiCmd('⇧/');
@@ -29,7 +29,7 @@ export function uiShortcuts(context) {
 
             var section = shortcutsModal
                 .selectAll('section')
-                .data(dataShortcuts)
+                .data(shortcuts)
                 .enter().append('section')
                 .attr('class', 'modal-section modal-shortcuts cf');
 
@@ -48,14 +48,14 @@ export function uiShortcuts(context) {
 
             shortcuts
                 .selectAll('kbd')
-                .data(function(d) { return d.keys; })
+                .data(function(d) { return d.shortcut; })
                 .enter().append('kbd')
                 .text(function(d) { return uiCmd(d); });
 
             var description  = p
                 .append('span')
                 .attr('class', 'col8')
-                .text(function(d) { return d.desc; });
+                .text(function(d) { return t('shortcuts.' });
         }
 
         var keybinding = d3keybinding('shortcuts')

From 8d2e2c7f9fe4094d4fdb4f2fc67b2732e6810ec1 Mon Sep 17 00:00:00 2001
From: Kushan Joshi <0o3ko0@gmail.com>
Date: Thu, 9 Feb 2017 22:32:40 +0530
Subject: [PATCH 04/14] Adding tabs to shortcuts

---
 css/80_app.css          |  56 +++++++++++++-
 data/core.yaml          |  46 ++++++-----
 data/index.js           |   2 +-
 data/shortcuts.json     |  48 ++++++------
 modules/ui/shortcuts.js | 165 ++++++++++++++++++++++++++++++++--------
 5 files changed, 232 insertions(+), 85 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index d09a925d6a..834b991374 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3087,11 +3087,61 @@ img.tile-removing {
 .modal-shortcuts {
     padding-bottom: 20px;
 }
+.modal-shortcuts .modal-section {
+    margin-bottom: 10px;
+}
+.modal-shortcuts .wrapper {
+    padding: 0 20px;
+}
+
+.modal-shortcuts .tabs-bar {
+    text-align: center;
+    padding-bottom: 20px;
+}
+
+.modal-shortcuts .tab {
+    display: inline-block;
+    padding: 0 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    border: 1px solid #ccc;
+    background-color: #eee;
+    border-radius: 4px;
+}
 
+.modal-shortcuts .tab:hover {
+    background-color: #ccc;
+}
+.modal-shortcuts .tab.active {
+    background-color: #E8EBFF;
+    color: #7092FF;
+}
+
+.modal-shortcuts .kbd-row {
+    padding-right: 10px;
+    color: #767676;
+    text-align: right;
+    white-space: nowrap;
+    padding-bottom: 3px;
+} 
+.modal-shortcuts .shorctut-desc {
+    padding-bottom: 3px;
+}
 .modal-shortcuts kbd {
-    padding: 2px 4px;
-    background: #eee;
-    margin-right: 4px;
+    display: inline-block;
+    text-align: right;    
+    padding: 3px 5px;
+    font: 11px;
+    line-height: 10px;
+    letter-spacing: 1px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    margin: 0 2px;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
 }
 
 /* Save Mode
diff --git a/data/core.yaml b/data/core.yaml
index d84d076dc3..74d11a3c5c 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1016,29 +1016,27 @@ en:
       help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button."
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
-shortcuts:
+  shortcuts:
     display:
-      desc: "Changing the display"
-      shortcuts:
-        pan_map: "Pan map"
-        pan_map_screen: "Pan map by one screenful"
-        zoom: "Zoom in / Zoom out"
-        zoom_large: "Zoom in / Zoom out by a lot"
-        bg_switcher: "Display background layer switcher"
-        bg: "Switch between previous and current backgrounds"
-        wireframe: "Toggle wireframe mode"
-        help: "Show in-editor help/documentation"
-        minimap: "Toggle minimap"
-        infobox: "Toggle info/measurements box"
-        radial_menu: "Toggle radial menu for currently selected object"
+      desc: "Display"
+      pan_map: "Pan map"
+      pan_map_screen: "Pan map by one screenful"
+      zoom: "Zoom in / Zoom out"
+      zoom_large: "Zoom in / Zoom out by a lot"
+      bg_switcher: "Display background layer switcher"
+      bg: "Switch between backgrounds"
+      wireframe: "Toggle wireframe mode"
+      help: "Show in-editor help/documentation"
+      minimap: "Toggle minimap"
+      infobox: "Toggle info/measurements box"
+      radial_menu: "Toggle radial menu for selected object"
     edit:
-      desc: "Editing mode"
-      shortcuts:
-        add_point: "Switch to 'add point' mode"
-        add_line: "Switch to 'add line' mode"
-        add_area: "Switch to 'add area' mode"
-        continue_line: "Continue drawing a line at the selected node"
-        stop_line: "Stop drawing of a line or area"
-        undo: "Undo last action"
-        redo: "Redo last action"
-        save: "Save changes"
\ No newline at end of file
+      desc: "Editing"
+      add_point: "Switch to 'add point' mode"
+      add_line: "Switch to 'add line' mode"
+      add_area: "Switch to 'add area' mode"
+      continue_line: "Continue drawing a line at the selected node"
+      stop_line: "Stop drawing of a line or area"
+      undo: "Undo last action"
+      redo: "Redo last action"
+      save: "Save changes"
\ No newline at end of file
diff --git a/data/index.js b/data/index.js
index f2ae2544ba..c784846ab6 100644
--- a/data/index.js
+++ b/data/index.js
@@ -6,7 +6,7 @@ export { dataDeprecated } from './deprecated.json';
 export { dataDiscarded } from './discarded.json';
 export { dataLocales } from './locales.json';
 export { dataPhoneFormats } from './phone-formats.json';
-export { dataShortcuts } from './shortcuts.json';
+export { shortcuts } from './shortcuts.json';
 
 export { default as dataImperial } from './imperial.json';
 export { default as dataDriveLeft } from './drive-left.json';
diff --git a/data/shortcuts.json b/data/shortcuts.json
index ca0b68e243..9a79dc569d 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -1,7 +1,7 @@
-[
+{ "shortcuts": [
     {
         "key": "display",
-        "desc": "Changing the display",
+        "desc": "shortcuts.display.desc",
         "shortcuts": [
             {
                 "shortcut": [
@@ -10,7 +10,7 @@
                     "←",
                     "→"
                 ],
-                "key": "pan_map"
+                "key": "shortcuts.display.pan_map"
             },
             {
                 "shortcut": [
@@ -19,119 +19,119 @@
                     "⇧←",
                     "⇧→"
                 ],
-                "key": "pan_map_screen"
+                "key": "shortcuts.display.pan_map_screen"
             },
             {
                 "shortcut": [
                     "+",
                     "-"
                 ],
-                "key": "zoom"
+                "key": "shortcuts.display.zoom"
             },
             {
                 "shortcut": [
                     "⌘+",
                     "⌘-"
                 ],
-                "key": "zoom_large"
+                "key": "shortcuts.display.zoom_large"
             },
             {
                 "shortcut": [
                     "B"
                 ],
-                "key": "bg_switcher"
+                "key": "shortcuts.display.bg_switcher"
             },
             {
                 "shortcut": [
                     "⌘B"
                 ],
-                "key": "bg"
+                "key": "shortcuts.display.bg"
             },
             {
                 "shortcut": [
                     "W"
                 ],
-                "key": "wireframe"
+                "key": "shortcuts.display.wireframe"
             },
             {
                 "shortcut": [
                     "H"
                 ],
-                "key": "help"
+                "key": "shortcuts.display.help"
             },
             {
                 "shortcut": [
                     "/"
                 ],
-                "key": "minimap"
+                "key": "shortcuts.display.minimap"
             },
             {
                 "shortcut": [
                     "⌘I"
                 ],
-                "key": "infobox"
+                "key": "shortcuts.display.infobox"
             },
             {
                 "shortcut": [
-                    "Spacebar"
+                    "Space"
                 ],
-                "key": "radial_menu"
+                "key": "shortcuts.display.radial_menu"
             }
         ]
     },
     {
         "key": "edit",
-        "desc": "Editing mode",
+        "desc": "shortcuts.edit.desc",
         "shortcuts": [
             {
                 "shortcut": [
                     "1"
                 ],
-                "key": "add_point"
+                "key": "shortcuts.edit.add_point"
             },
             {
                 "shortcut": [
                     "2"
                 ],
-                "desc": "add_line"
+                "key": "shortcuts.edit.add_line"
             },
             {
                 "shortcut": [
                     "3"
                 ],
-                "key": "add_area"
+                "key": "shortcuts.edit.add_area"
             },
             {
                 "shortcut": [
                     "A"
                 ],
-                "key": "continue_line"
+                "key": "shortcuts.edit.continue_line"
             },
             {
                 "shortcut": [
                     "↵ Enter",
                     "Esc"
                 ],
-                "key": "stop_line"
+                "key": "shortcuts.edit.stop_line"
             },
             {
                 "shortcut": [
                     "⌘Z"
                 ],
-                "key": "undo"
+                "key": "shortcuts.edit.undo"
             },
             {
                 "shortcut": [
                     "⌘⇧Z"
                 ],
-                "key": "redo"
+                "key": "shortcuts.edit.redo"
             },
             {
                 "shortcut": [
                     "⌘S"
                 ],
-                "save": "save"
+                "key": "shortcuts.edit.save"
             }
         ]
     }
-]
\ No newline at end of file
+]}
\ No newline at end of file
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index b2e73e3532..7585648885 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -2,16 +2,109 @@ import * as d3 from 'd3';
 import { uiCmd } from './cmd';
 import { uiModal } from './modal';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import shortcuts from '../../data/shortcuts.json';
+import { t } from '../util/locale';
+import { shortcuts as shortcutsData } from '../../data';
 
 export function uiShortcuts(context) {
     var key = uiCmd('⇧/');
-
+    var activeTab = 0;
     function shortcuts(selection) {
+        if (!d3.selectAll('.modal').empty()) return;
+        var modalSelection;
+        function render(selection) {
+            var wrapper = selection
+                .selectAll('.wrapper')
+                .data([0]);
+
+            var wrapperEnter = wrapper
+                .enter()
+                .append('div')
+                .attr('class', 'wrapper');
+
+            var tabsBar = wrapperEnter
+                .append('div')
+                .attr('class', 'tabs-bar');
+
+            var shortcutsList = wrapperEnter
+                .append('div')
+                .attr('class', 'shortcuts-list');
+
+            wrapper = wrapper.merge(wrapperEnter);
+
+            var tabs = tabsBar
+                .selectAll('.tab')
+                .data(shortcutsData);
+
+            var tabsEnter = tabs
+                .enter()
+                .append('div')
+                .attr('class', 'tab')
+                .on('click', function (d, i) {
+                    activeTab = i;
+                    render(selection);
+                });
+
+            tabsEnter
+                .append('span')
+                .text(function (d) { return t(d.desc); });
+
+            tabs = tabs
+                .merge(tabsEnter);
+
+            // Update
+            wrapper.selectAll('.tab')
+                .classed('active', function (d, i) {
+                    return i === activeTab;
+                });
+
+            var shortcuts = shortcutsList
+                .selectAll('.shortcut-tab')
+                .data(shortcutsData);
+
+            var shortcutsEnter = shortcuts
+                .enter()
+                .append('div')
+                .attr('class', 'shortcut-tab')
+                .on('click', function (d, i) {
+                    activeTab = i;
+                    render(selection);
+                });
+
+            var row = shortcutsEnter
+                .selectAll('.shortcut-row')
+                .data(function (d) { return d.shortcuts; })
+                .enter()
+                .append('div')
+                .attr('class', 'shortcut-row');
+
+            var shortcutsRow = row
+                .append('div')
+                .attr('class', 'kbd-row col6');
+
+            shortcutsRow
+                .selectAll('kbd')
+                .data(function (d) { return d.shortcut; })
+                .enter().append('kbd')
+                .text(function (d) { return uiCmd(d); });
+
+            var description = row
+                .append('div')
+                .attr('class', 'shorctut-desc col6')
+                .text(function (d) { return t(d.key); });
+
+            shortcuts = shortcuts
+                .merge(shortcutsEnter);
+
+            wrapper.selectAll('.shortcut-tab')
+                .style('display', function (d, i) {
+                    return i === activeTab ? 'block' : 'none';
+                });
+            
+        }
         function show() {
             if (!d3.selectAll('.modal').empty()) return;
 
-            var modalSelection = uiModal(selection);
+            modalSelection = uiModal(selection);
 
             modalSelection.select('.modal')
                 .attr('class', 'modal fillL col6');
@@ -19,7 +112,7 @@ export function uiShortcuts(context) {
             var shortcutsModal = modalSelection.select('.content');
 
             shortcutsModal
-                .attr('class','cf');
+                .attr('class', 'cf modal-shortcuts');
 
             shortcutsModal
                 .append('div')
@@ -27,35 +120,41 @@ export function uiShortcuts(context) {
                 .append('h3')
                 .text('Keyboard shortcuts');
 
-            var section = shortcutsModal
-                .selectAll('section')
-                .data(shortcuts)
-                .enter().append('section')
-                .attr('class', 'modal-section modal-shortcuts cf');
-
-            section
-                .append('h4')
-                .text(function(d) { return d.desc; });
-
-            var p = section
-                .selectAll('p')
-                .data(function(d) { return d.shortcuts; })
-                .enter().append('p');
-
-            var shortcuts = p
-                .append('span')
-                .attr('class', 'col4');
-
-            shortcuts
-                .selectAll('kbd')
-                .data(function(d) { return d.shortcut; })
-                .enter().append('kbd')
-                .text(function(d) { return uiCmd(d); });
-
-            var description  = p
-                .append('span')
-                .attr('class', 'col8')
-                .text(function(d) { return t('shortcuts.' });
+            // var wrap = shortcutsModal.selectAll('.wrapper')
+            //     -            .data([0]);
+
+            // wrap = wrap.enter()
+            //         .append('div')
+            //             .attr('class', 'preset-input-wrap')
+            //                 .merge(wrap);
+            shortcutsModal.call(render);
+
+
+            // section
+            //     .append('h4')
+            //     .text(function(d) { return t(d.desc); });
+
+            // var row = section
+            //     .selectAll('.shortcut-row')
+            //     .data(function(d) { return d.shortcuts; })
+            //     .enter()
+            //     .append('div')
+            //     .attr('class', 'shortcut-row');
+
+            // var shortcuts = row
+            //     .append('div')
+            //     .attr('class', 'kbd-row col4');
+
+            // shortcuts
+            //     .selectAll('kbd')
+            //     .data(function(d) { return d.shortcut; })
+            //     .enter().append('kbd')
+            //     .text(function(d) { return uiCmd(d); });
+
+            // var description  = row
+            //     .append('div')
+            //     .attr('class', 'shorctut-desc col6')
+            //     .text(function(d) { return t(d.key); });
         }
 
         var keybinding = d3keybinding('shortcuts')

From b237b6c96cb06b0985f3becd80f07d6a4bc80550 Mon Sep 17 00:00:00 2001
From: Kushan Joshi <0o3ko0@gmail.com>
Date: Thu, 9 Feb 2017 23:45:15 +0530
Subject: [PATCH 05/14] interim

---
 css/80_app.css          |   9 ++--
 dist/locales/en.json    |  27 +++++++++++
 modules/ui/shortcuts.js | 102 +++++++++++++++-------------------------
 3 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 834b991374..3f0b6f13c0 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3096,7 +3096,7 @@ img.tile-removing {
 
 .modal-shortcuts .tabs-bar {
     text-align: center;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
 }
 
 .modal-shortcuts .tab {
@@ -3118,20 +3118,23 @@ img.tile-removing {
 }
 
 .modal-shortcuts .kbd-row {
+    display: inline-block;
     padding-right: 10px;
     color: #767676;
     text-align: right;
     white-space: nowrap;
     padding-bottom: 3px;
+    
 } 
-.modal-shortcuts .shorctut-desc {
+.modal-shortcuts .shortcut-desc {
+    display: inline-block;
     padding-bottom: 3px;
 }
 .modal-shortcuts kbd {
     display: inline-block;
     text-align: right;    
     padding: 3px 5px;
-    font: 11px;
+    font-size: 11px;
     line-height: 10px;
     letter-spacing: 1px;
     color: #555;
diff --git a/dist/locales/en.json b/dist/locales/en.json
index d00bcd6640..ebacea12e2 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -883,6 +883,33 @@
                 "start": "Start mapping!"
             }
         },
+        "shortcuts": {
+            "display": {
+                "desc": "Display",
+                "pan_map": "Pan map",
+                "pan_map_screen": "Pan map by one screenful",
+                "zoom": "Zoom in / Zoom out",
+                "zoom_large": "Zoom in / Zoom out by a lot",
+                "bg_switcher": "Display background layer switcher",
+                "bg": "Switch between backgrounds",
+                "wireframe": "Toggle wireframe mode",
+                "help": "Show in-editor help/documentation",
+                "minimap": "Toggle minimap",
+                "infobox": "Toggle info/measurements box",
+                "radial_menu": "Toggle radial menu for selected object"
+            },
+            "edit": {
+                "desc": "Editing",
+                "add_point": "Switch to 'add point' mode",
+                "add_line": "Switch to 'add line' mode",
+                "add_area": "Switch to 'add area' mode",
+                "continue_line": "Continue drawing a line at the selected node",
+                "stop_line": "Stop drawing of a line or area",
+                "undo": "Undo last action",
+                "redo": "Redo last action",
+                "save": "Save changes"
+            }
+        },
         "presets": {
             "categories": {
                 "category-barrier": {
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 7585648885..1c40208a50 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -5,12 +5,34 @@ import { d3keybinding } from '../lib/d3.keybinding.js';
 import { t } from '../util/locale';
 import { shortcuts as shortcutsData } from '../../data';
 
-export function uiShortcuts(context) {
+export function uiShortcuts() {
     var key = uiCmd('⇧/');
     var activeTab = 0;
+
     function shortcuts(selection) {
-        if (!d3.selectAll('.modal').empty()) return;
         var modalSelection;
+
+        function show() {
+            modalSelection = uiModal(selection);
+
+            modalSelection.select('.modal')
+                .attr('class', 'modal fillL col6');
+
+            var shortcutsModal = modalSelection.select('.content');
+
+            shortcutsModal
+                .attr('class', 'cf modal-shortcuts');
+
+            shortcutsModal
+                .append('div')
+                .attr('class', 'modal-section')
+                .append('h3')
+                .text('Keyboard shortcuts');
+
+            shortcutsModal
+                .call(render);
+        }
+
         function render(selection) {
             var wrapper = selection
                 .selectAll('.wrapper')
@@ -57,6 +79,7 @@ export function uiShortcuts(context) {
                     return i === activeTab;
                 });
 
+
             var shortcuts = shortcutsList
                 .selectAll('.shortcut-tab')
                 .data(shortcutsData);
@@ -84,81 +107,34 @@ export function uiShortcuts(context) {
             shortcutsRow
                 .selectAll('kbd')
                 .data(function (d) { return d.shortcut; })
-                .enter().append('kbd')
-                .text(function (d) { return uiCmd(d); });
+                .enter()
+                .append('kbd')
+                .text(function (d) { return d; });
 
-            var description = row
+            row
                 .append('div')
-                .attr('class', 'shorctut-desc col6')
+                .attr('class', 'shortcut-desc ')
                 .text(function (d) { return t(d.key); });
 
             shortcuts = shortcuts
                 .merge(shortcutsEnter);
 
+            // Update
             wrapper.selectAll('.shortcut-tab')
                 .style('display', function (d, i) {
                     return i === activeTab ? 'block' : 'none';
                 });
-            
-        }
-        function show() {
-            if (!d3.selectAll('.modal').empty()) return;
-
-            modalSelection = uiModal(selection);
-
-            modalSelection.select('.modal')
-                .attr('class', 'modal fillL col6');
-
-            var shortcutsModal = modalSelection.select('.content');
-
-            shortcutsModal
-                .attr('class', 'cf modal-shortcuts');
-
-            shortcutsModal
-                .append('div')
-                .attr('class', 'modal-section')
-                .append('h3')
-                .text('Keyboard shortcuts');
-
-            // var wrap = shortcutsModal.selectAll('.wrapper')
-            //     -            .data([0]);
-
-            // wrap = wrap.enter()
-            //         .append('div')
-            //             .attr('class', 'preset-input-wrap')
-            //                 .merge(wrap);
-            shortcutsModal.call(render);
-
-
-            // section
-            //     .append('h4')
-            //     .text(function(d) { return t(d.desc); });
-
-            // var row = section
-            //     .selectAll('.shortcut-row')
-            //     .data(function(d) { return d.shortcuts; })
-            //     .enter()
-            //     .append('div')
-            //     .attr('class', 'shortcut-row');
-
-            // var shortcuts = row
-            //     .append('div')
-            //     .attr('class', 'kbd-row col4');
-
-            // shortcuts
-            //     .selectAll('kbd')
-            //     .data(function(d) { return d.shortcut; })
-            //     .enter().append('kbd')
-            //     .text(function(d) { return uiCmd(d); });
-
-            // var description  = row
-            //     .append('div')
-            //     .attr('class', 'shorctut-desc col6')
-            //     .text(function(d) { return t(d.key); });
         }
 
         var keybinding = d3keybinding('shortcuts')
-            .on(key, show);
+            .on(key, function () {
+                if (modalSelection) {
+                    modalSelection.close();
+                    modalSelection = null;
+                    return;
+                }
+                show();
+            });
 
         d3.select(document)
             .call(keybinding);

From 47164d8f150de6a5a971a8f212761f36646da4a9 Mon Sep 17 00:00:00 2001
From: Kushan Joshi <0o3ko0@gmail.com>
Date: Fri, 10 Feb 2017 00:50:56 +0530
Subject: [PATCH 06/14] ui minor fixes for shortcut.js

---
 css/80_app.css          | 20 ++++++++++++++++----
 modules/ui/shortcuts.js |  8 ++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 3f0b6f13c0..59c95efb66 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3109,6 +3109,12 @@ img.tile-removing {
     border-radius: 4px;
 }
 
+.modal-shortcuts .shortcut-tab {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
 .modal-shortcuts .tab:hover {
     background-color: #ccc;
 }
@@ -3117,19 +3123,25 @@ img.tile-removing {
     color: #7092FF;
 }
 
+.modal-shortcuts .shortcut-row {
+    display: flex;
+    flex-direction: row;
+}
+
 .modal-shortcuts .kbd-row {
-    display: inline-block;
     padding-right: 10px;
     color: #767676;
     text-align: right;
     white-space: nowrap;
-    padding-bottom: 3px;
+    padding-bottom: 5px;
+    width: 50%;
     
 } 
 .modal-shortcuts .shortcut-desc {
-    display: inline-block;
-    padding-bottom: 3px;
+    padding-bottom: 5px;
+    width: 50%;
 }
+
 .modal-shortcuts kbd {
     display: inline-block;
     text-align: right;    
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 1c40208a50..e7bbbdc410 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -102,18 +102,18 @@ export function uiShortcuts() {
 
             var shortcutsRow = row
                 .append('div')
-                .attr('class', 'kbd-row col6');
+                .attr('class', 'kbd-row');
 
             shortcutsRow
                 .selectAll('kbd')
                 .data(function (d) { return d.shortcut; })
                 .enter()
                 .append('kbd')
-                .text(function (d) { return d; });
+                .text(function (d) { return uiCmd(d); });
 
             row
                 .append('div')
-                .attr('class', 'shortcut-desc ')
+                .attr('class', 'shortcut-desc')
                 .text(function (d) { return t(d.key); });
 
             shortcuts = shortcuts
@@ -122,7 +122,7 @@ export function uiShortcuts() {
             // Update
             wrapper.selectAll('.shortcut-tab')
                 .style('display', function (d, i) {
-                    return i === activeTab ? 'block' : 'none';
+                    return i === activeTab ? 'flex' : 'none';
                 });
         }
 

From 957c75a7cc905f6a10c09f07c6bc78b6c15d0302 Mon Sep 17 00:00:00 2001
From: Kushan Joshi <0o3ko0@gmail.com>
Date: Fri, 17 Feb 2017 15:00:23 +0530
Subject: [PATCH 07/14] remove uiCmd

---
 modules/ui/shortcuts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index e7bbbdc410..b42676bc09 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -6,7 +6,7 @@ import { t } from '../util/locale';
 import { shortcuts as shortcutsData } from '../../data';
 
 export function uiShortcuts() {
-    var key = uiCmd('⇧/');
+    var key = '⇧/';
     var activeTab = 0;
 
     function shortcuts(selection) {

From d45063dd692902f15d696ca870cb278367b45f94 Mon Sep 17 00:00:00 2001
From: Kushan Joshi <0o3ko0@gmail.com>
Date: Thu, 9 Mar 2017 21:25:56 +0530
Subject: [PATCH 08/14] Make rtl compatible

and minor refactor
---
 css/80_app.css          |  27 ++++-
 data/core.yaml          |   2 +
 data/index.js           |   2 +-
 data/shortcuts.json     |   2 +-
 dist/locales/en.json    |   3 +
 modules/ui/shortcuts.js | 245 ++++++++++++++++++++--------------------
 6 files changed, 152 insertions(+), 129 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 59c95efb66..fb46fdf0f8 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3132,11 +3132,10 @@ img.tile-removing {
     padding-right: 10px;
     color: #767676;
     text-align: right;
-    white-space: nowrap;
     padding-bottom: 5px;
     width: 50%;
-    
-} 
+
+}
 .modal-shortcuts .shortcut-desc {
     padding-bottom: 5px;
     width: 50%;
@@ -3144,7 +3143,7 @@ img.tile-removing {
 
 .modal-shortcuts kbd {
     display: inline-block;
-    text-align: right;    
+    text-align: right;
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
@@ -3159,6 +3158,7 @@ img.tile-removing {
     box-shadow: inset 0 -1px 0 #bbb;
 }
 
+
 /* Save Mode
 ------------------------------------------------------- */
 .mode-save a.user-info {
@@ -4092,3 +4092,22 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 [dir='rtl'] .spin-control button.increment{
   border-bottom-left-radius: 3px;
 }
+/* modal */
+[dir='rtl'] .modal > button {
+    position: absolute;
+    left: 0;
+    right: unset;
+    top: 0;
+    height: 59px;
+    z-index: 50;
+}
+
+/* shortcuts modal */
+
+[dir='rtl'] .kbd-row {
+    padding-left: 10px;
+    color: #767676;
+    text-align: left;
+    padding-bottom: 5px;
+    width: 50%;
+}
diff --git a/data/core.yaml b/data/core.yaml
index 74d11a3c5c..24cdea2711 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1017,6 +1017,8 @@ en:
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
   shortcuts:
+    modal:
+      title: "Keyboard shortcuts"
     display:
       desc: "Display"
       pan_map: "Pan map"
diff --git a/data/index.js b/data/index.js
index c784846ab6..f2ae2544ba 100644
--- a/data/index.js
+++ b/data/index.js
@@ -6,7 +6,7 @@ export { dataDeprecated } from './deprecated.json';
 export { dataDiscarded } from './discarded.json';
 export { dataLocales } from './locales.json';
 export { dataPhoneFormats } from './phone-formats.json';
-export { shortcuts } from './shortcuts.json';
+export { dataShortcuts } from './shortcuts.json';
 
 export { default as dataImperial } from './imperial.json';
 export { default as dataDriveLeft } from './drive-left.json';
diff --git a/data/shortcuts.json b/data/shortcuts.json
index 9a79dc569d..ac17243dfe 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -1,4 +1,4 @@
-{ "shortcuts": [
+{ "dataShortcuts": [
     {
         "key": "display",
         "desc": "shortcuts.display.desc",
diff --git a/dist/locales/en.json b/dist/locales/en.json
index ebacea12e2..59b3e21bc7 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -884,6 +884,9 @@
             }
         },
         "shortcuts": {
+            "modal": {
+                "title": "Keyboard shortcuts"
+            },
             "display": {
                 "desc": "Display",
                 "pan_map": "Pan map",
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index b42676bc09..a0a2c69fac 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -3,142 +3,141 @@ import { uiCmd } from './cmd';
 import { uiModal } from './modal';
 import { d3keybinding } from '../lib/d3.keybinding.js';
 import { t } from '../util/locale';
-import { shortcuts as shortcutsData } from '../../data';
+import { dataShortcuts } from '../../data';
 
 export function uiShortcuts() {
     var key = '⇧/';
     var activeTab = 0;
+    var modalSelection;
+    var savedSelection;
+    var keybinding = d3keybinding('shortcuts')
+        .on(key, function () {
+            if (modalSelection) {
+                modalSelection.close();
+                modalSelection = null;
+                return;
+            }
+            modalSelection = uiModal(savedSelection);
+            shortcutsModal(modalSelection);
+        });
+
+    d3.select(document)
+        .call(keybinding);
+    
+    function shortcutsModal(modalSelection) {
+        modalSelection.select('.modal')
+        .attr('class', 'modal modal-shortcuts fillL col6');
+
+        var shortcutsModal = modalSelection.select('.content');
+
+        shortcutsModal
+            .append('div')
+            .attr('class', 'modal-section')
+            .append('h3')
+            .text(t('shortcuts.modal.title'));
+        
+        shortcutsModal
+            .call(renderTabs);
+    }
 
-    function shortcuts(selection) {
-        var modalSelection;
-
-        function show() {
-            modalSelection = uiModal(selection);
+    function renderTabs(selection) {
+        var wrapper = selection
+            .selectAll('.wrapper')
+            .data([0]);
+
+        var wrapperEnter = wrapper
+            .enter()
+            .append('div')
+            .attr('class', 'wrapper modal-section');
+
+        var tabsBar = wrapperEnter
+            .append('div')
+            .attr('class', 'tabs-bar');
+
+        var shortcutsList = wrapperEnter
+            .append('div')
+            .attr('class', 'shortcuts-list');
+
+        wrapper = wrapper.merge(wrapperEnter);
+
+        var tabs = tabsBar
+            .selectAll('.tab')
+            .data(dataShortcuts);
+
+        var tabsEnter = tabs
+            .enter()
+            .append('div')
+            .attr('class', 'tab')
+            .on('click', function (d, i) {
+                activeTab = i;
+                renderTabs(selection);
+            });
 
-            modalSelection.select('.modal')
-                .attr('class', 'modal fillL col6');
+        tabsEnter
+            .append('span')
+            .text(function (d) { return t(d.desc); });
 
-            var shortcutsModal = modalSelection.select('.content');
+        tabs = tabs
+            .merge(tabsEnter);
 
-            shortcutsModal
-                .attr('class', 'cf modal-shortcuts');
+        // Update
+        wrapper.selectAll('.tab')
+            .classed('active', function (d, i) {
+                return i === activeTab;
+            });
 
-            shortcutsModal
-                .append('div')
-                .attr('class', 'modal-section')
-                .append('h3')
-                .text('Keyboard shortcuts');
 
-            shortcutsModal
-                .call(render);
-        }
+        var shortcuts = shortcutsList
+            .selectAll('.shortcut-tab')
+            .data(dataShortcuts);
 
-        function render(selection) {
-            var wrapper = selection
-                .selectAll('.wrapper')
-                .data([0]);
-
-            var wrapperEnter = wrapper
-                .enter()
-                .append('div')
-                .attr('class', 'wrapper');
-
-            var tabsBar = wrapperEnter
-                .append('div')
-                .attr('class', 'tabs-bar');
-
-            var shortcutsList = wrapperEnter
-                .append('div')
-                .attr('class', 'shortcuts-list');
-
-            wrapper = wrapper.merge(wrapperEnter);
-
-            var tabs = tabsBar
-                .selectAll('.tab')
-                .data(shortcutsData);
-
-            var tabsEnter = tabs
-                .enter()
-                .append('div')
-                .attr('class', 'tab')
-                .on('click', function (d, i) {
-                    activeTab = i;
-                    render(selection);
-                });
-
-            tabsEnter
-                .append('span')
-                .text(function (d) { return t(d.desc); });
-
-            tabs = tabs
-                .merge(tabsEnter);
-
-            // Update
-            wrapper.selectAll('.tab')
-                .classed('active', function (d, i) {
-                    return i === activeTab;
-                });
-
-
-            var shortcuts = shortcutsList
-                .selectAll('.shortcut-tab')
-                .data(shortcutsData);
-
-            var shortcutsEnter = shortcuts
-                .enter()
-                .append('div')
-                .attr('class', 'shortcut-tab')
-                .on('click', function (d, i) {
-                    activeTab = i;
-                    render(selection);
-                });
-
-            var row = shortcutsEnter
-                .selectAll('.shortcut-row')
-                .data(function (d) { return d.shortcuts; })
-                .enter()
-                .append('div')
-                .attr('class', 'shortcut-row');
-
-            var shortcutsRow = row
-                .append('div')
-                .attr('class', 'kbd-row');
-
-            shortcutsRow
-                .selectAll('kbd')
-                .data(function (d) { return d.shortcut; })
-                .enter()
-                .append('kbd')
-                .text(function (d) { return uiCmd(d); });
-
-            row
-                .append('div')
-                .attr('class', 'shortcut-desc')
-                .text(function (d) { return t(d.key); });
-
-            shortcuts = shortcuts
-                .merge(shortcutsEnter);
-
-            // Update
-            wrapper.selectAll('.shortcut-tab')
-                .style('display', function (d, i) {
-                    return i === activeTab ? 'flex' : 'none';
-                });
-        }
-
-        var keybinding = d3keybinding('shortcuts')
-            .on(key, function () {
-                if (modalSelection) {
-                    modalSelection.close();
-                    modalSelection = null;
-                    return;
-                }
-                show();
+        var shortcutsEnter = shortcuts
+            .enter()
+            .append('div')
+            .attr('class', 'shortcut-tab')
+            .on('click', function (d, i) {
+                activeTab = i;
+                renderTabs(selection);
             });
 
-        d3.select(document)
-            .call(keybinding);
+        var row = shortcutsEnter
+            .selectAll('.shortcut-row')
+            .data(function (d) { return d.shortcuts; })
+            .enter()
+            .append('div')
+            .attr('class', 'shortcut-row');
+
+        var shortcutsRow = row
+            .append('div')
+            .attr('class', 'kbd-row');
+
+        shortcutsRow
+            .selectAll('kbd')
+            .data(function (d) { return d.shortcut; })
+            .enter()
+            .append('kbd')
+            .text(function (d) { return uiCmd(d); });
+
+        row
+            .append('div')
+            .attr('class', 'shortcut-desc')
+            .text(function (d) { return t(d.key); });
+
+        shortcuts = shortcuts
+            .merge(shortcutsEnter);
+
+        // Update
+        wrapper.selectAll('.shortcut-tab')
+            .style('display', function (d, i) {
+                return i === activeTab ? 'flex' : 'none';
+            });
     }
 
-    return shortcuts;
+    return function(selection, show) {
+        savedSelection = selection;
+        if (show) {
+            modalSelection = uiModal(selection);
+            shortcutsModal(modalSelection);
+        }
+    };
 }

From 0e3b372abd2a039ac4cea92a461e04268f4f2b34 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 16 May 2017 15:30:12 -0400
Subject: [PATCH 09/14] format

---
 data/shortcuts.json     | 87 ++++++++++-------------------------------
 modules/ui/shortcuts.js |  8 +++-
 2 files changed, 26 insertions(+), 69 deletions(-)

diff --git a/data/shortcuts.json b/data/shortcuts.json
index ac17243dfe..3fe790fbfc 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -4,77 +4,47 @@
         "desc": "shortcuts.display.desc",
         "shortcuts": [
             {
-                "shortcut": [
-                    "↓",
-                    "↑",
-                    "←",
-                    "→"
-                ],
+                "shortcut": ["↓", "↑", "←", "→"],
                 "key": "shortcuts.display.pan_map"
             },
             {
-                "shortcut": [
-                    "⇧↓",
-                    "⇧↑",
-                    "⇧←",
-                    "⇧→"
-                ],
+                "shortcut": ["⇧↓", "⇧↑", "⇧←", "⇧→"],
                 "key": "shortcuts.display.pan_map_screen"
             },
             {
-                "shortcut": [
-                    "+",
-                    "-"
-                ],
+                "shortcut": ["+", "-"],
                 "key": "shortcuts.display.zoom"
             },
             {
-                "shortcut": [
-                    "⌘+",
-                    "⌘-"
-                ],
+                "shortcut": ["⌘+", "⌘-"],
                 "key": "shortcuts.display.zoom_large"
             },
             {
-                "shortcut": [
-                    "B"
-                ],
+                "shortcut": ["B"],
                 "key": "shortcuts.display.bg_switcher"
             },
             {
-                "shortcut": [
-                    "⌘B"
-                ],
+                "shortcut": ["⌘B"],
                 "key": "shortcuts.display.bg"
             },
             {
-                "shortcut": [
-                    "W"
-                ],
+                "shortcut": ["W"],
                 "key": "shortcuts.display.wireframe"
             },
             {
-                "shortcut": [
-                    "H"
-                ],
+                "shortcut": ["H"],
                 "key": "shortcuts.display.help"
             },
             {
-                "shortcut": [
-                    "/"
-                ],
+                "shortcut": ["/"],
                 "key": "shortcuts.display.minimap"
             },
             {
-                "shortcut": [
-                    "⌘I"
-                ],
+                "shortcut": ["⌘I"],
                 "key": "shortcuts.display.infobox"
             },
             {
-                "shortcut": [
-                    "Space"
-                ],
+                "shortcut": ["Space"],
                 "key": "shortcuts.display.radial_menu"
             }
         ]
@@ -84,54 +54,37 @@
         "desc": "shortcuts.edit.desc",
         "shortcuts": [
             {
-                "shortcut": [
-                    "1"
-                ],
+                "shortcut": ["1"],
                 "key": "shortcuts.edit.add_point"
             },
             {
-                "shortcut": [
-                    "2"
-                ],
+                "shortcut": ["2"],
                 "key": "shortcuts.edit.add_line"
             },
             {
-                "shortcut": [
-                    "3"
-                ],
+                "shortcut": ["3"],
                 "key": "shortcuts.edit.add_area"
             },
             {
-                "shortcut": [
-                    "A"
-                ],
+                "shortcut": ["A"],
                 "key": "shortcuts.edit.continue_line"
             },
             {
-                "shortcut": [
-                    "↵ Enter",
-                    "Esc"
-                ],
+                "shortcut": ["↵ Enter", "Esc"],
                 "key": "shortcuts.edit.stop_line"
             },
             {
-                "shortcut": [
-                    "⌘Z"
-                ],
+                "shortcut": ["⌘Z"],
                 "key": "shortcuts.edit.undo"
             },
             {
-                "shortcut": [
-                    "⌘⇧Z"
-                ],
+                "shortcut": ["⌘⇧Z"],
                 "key": "shortcuts.edit.redo"
             },
             {
-                "shortcut": [
-                    "⌘S"
-                ],
+                "shortcut": ["⌘S"],
                 "key": "shortcuts.edit.save"
             }
         ]
     }
-]}
\ No newline at end of file
+]}
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index a0a2c69fac..3b20ecf336 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -5,6 +5,7 @@ import { d3keybinding } from '../lib/d3.keybinding.js';
 import { t } from '../util/locale';
 import { dataShortcuts } from '../../data';
 
+
 export function uiShortcuts() {
     var key = '⇧/';
     var activeTab = 0;
@@ -23,7 +24,8 @@ export function uiShortcuts() {
 
     d3.select(document)
         .call(keybinding);
-    
+
+
     function shortcutsModal(modalSelection) {
         modalSelection.select('.modal')
         .attr('class', 'modal modal-shortcuts fillL col6');
@@ -35,11 +37,12 @@ export function uiShortcuts() {
             .attr('class', 'modal-section')
             .append('h3')
             .text(t('shortcuts.modal.title'));
-        
+
         shortcutsModal
             .call(renderTabs);
     }
 
+
     function renderTabs(selection) {
         var wrapper = selection
             .selectAll('.wrapper')
@@ -133,6 +136,7 @@ export function uiShortcuts() {
             });
     }
 
+
     return function(selection, show) {
         savedSelection = selection;
         if (show) {

From 9b956755e36914e6f3ee5fb86d021ab50e6d6c3e Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 16 May 2017 17:08:29 -0400
Subject: [PATCH 10/14] Less button-y tabs

---
 css/80_app.css | 42 +++++++++++++++++-------------------------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index fb46fdf0f8..a3e7578561 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -172,7 +172,7 @@ a:visited, a {
 }
 
 a:hover {
-    color:#597be7;
+    color: #597be7;
 }
 
 /* Forms
@@ -646,7 +646,7 @@ button.save.has-count .count::before {
     position: absolute;
     right: 0;
     top: 0;
-    height: 59px;
+    height: 60px;
     z-index: 50;
 }
 
@@ -3084,29 +3084,31 @@ img.tile-removing {
 
 /* Shortcuts Modal
 ------------------------------------------------------- */
-.modal-shortcuts {
-    padding-bottom: 20px;
-}
-.modal-shortcuts .modal-section {
-    margin-bottom: 10px;
-}
-.modal-shortcuts .wrapper {
-    padding: 0 20px;
+
+.modal-shortcuts .modal-section:last-child {
+    padding-top: 10px;
 }
 
 .modal-shortcuts .tabs-bar {
     text-align: center;
-    padding-bottom: 10px;
+    padding-bottom: 15px;
+    font-size: 16px;
+    font-weight: bold;
 }
 
 .modal-shortcuts .tab {
     display: inline-block;
-    padding: 0 10px;
+    padding: 5px 10px;
     margin: 0 5px;
     cursor: pointer;
-    border: 1px solid #ccc;
-    background-color: #eee;
-    border-radius: 4px;
+    color: #666;
+}
+.modal-shortcuts .tab.active {
+    color: #7092ff;
+}
+.modal-shortcuts .tab:hover {
+    color: #597be7;
+    background-color: #efefef;
 }
 
 .modal-shortcuts .shortcut-tab {
@@ -3115,14 +3117,6 @@ img.tile-removing {
     flex-grow: 1;
 }
 
-.modal-shortcuts .tab:hover {
-    background-color: #ccc;
-}
-.modal-shortcuts .tab.active {
-    background-color: #E8EBFF;
-    color: #7092FF;
-}
-
 .modal-shortcuts .shortcut-row {
     display: flex;
     flex-direction: row;
@@ -4098,8 +4092,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     left: 0;
     right: unset;
     top: 0;
-    height: 59px;
-    z-index: 50;
 }
 
 /* shortcuts modal */

From 0013866fe37797b51449d187acfeeb392f3a4a2b Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Wed, 17 May 2017 15:16:23 -0400
Subject: [PATCH 11/14] Put shortcuts into groups, add more shortcuts for
 operations

---
 css/80_app.css          |  21 +++-
 data/core.yaml          |  77 +++++++++-----
 data/shortcuts.json     | 227 ++++++++++++++++++++++++++--------------
 dist/locales/en.json    |  85 ++++++++++-----
 modules/ui/shortcuts.js |  32 +++---
 5 files changed, 296 insertions(+), 146 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index a3e7578561..25ab000fde 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3084,6 +3084,10 @@ img.tile-removing {
 
 /* Shortcuts Modal
 ------------------------------------------------------- */
+.modal-shortcuts {
+    width: 75%;
+    max-width: 800px;
+}
 
 .modal-shortcuts .modal-section:last-child {
     padding-top: 10px;
@@ -3112,12 +3116,23 @@ img.tile-removing {
 }
 
 .modal-shortcuts .shortcut-tab {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.modal-shortcuts .shortcut-group {
+    padding: 10px;
+    flex: 0 0 50%;
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
+}
+
+.modal-shortcuts .shortcut-group h3 {
+    text-align: center;
 }
 
 .modal-shortcuts .shortcut-row {
+    flex: 0 0 auto;
     display: flex;
     flex-direction: row;
 }
@@ -3127,12 +3142,12 @@ img.tile-removing {
     color: #767676;
     text-align: right;
     padding-bottom: 5px;
-    width: 50%;
+    flex: 1 1 40%;
 
 }
 .modal-shortcuts .shortcut-desc {
     padding-bottom: 5px;
-    width: 50%;
+    flex: 1 1 60%;
 }
 
 .modal-shortcuts kbd {
diff --git a/data/core.yaml b/data/core.yaml
index 24cdea2711..a007e5f5d0 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1017,28 +1017,55 @@ en:
       save: "Don't forget to regularly save your changes!"
       start: "Start mapping!"
   shortcuts:
-    modal:
-      title: "Keyboard shortcuts"
-    display:
-      desc: "Display"
-      pan_map: "Pan map"
-      pan_map_screen: "Pan map by one screenful"
-      zoom: "Zoom in / Zoom out"
-      zoom_large: "Zoom in / Zoom out by a lot"
-      bg_switcher: "Display background layer switcher"
-      bg: "Switch between backgrounds"
-      wireframe: "Toggle wireframe mode"
-      help: "Show in-editor help/documentation"
-      minimap: "Toggle minimap"
-      infobox: "Toggle info/measurements box"
-      radial_menu: "Toggle radial menu for selected object"
-    edit:
-      desc: "Editing"
-      add_point: "Switch to 'add point' mode"
-      add_line: "Switch to 'add line' mode"
-      add_area: "Switch to 'add area' mode"
-      continue_line: "Continue drawing a line at the selected node"
-      stop_line: "Stop drawing of a line or area"
-      undo: "Undo last action"
-      redo: "Redo last action"
-      save: "Save changes"
\ No newline at end of file
+    title: "Keyboard shortcuts"
+    browsing:
+      title: "Browsing"
+      navigation:
+        title: "Navigation"
+        pan_map: "Pan map"
+        pan_map_screen: "Pan map by one screenful"
+        zoom: "Zoom in / Zoom out"
+        zoom_large: "Zoom in / Zoom out by a lot"
+      display:
+        title: "Display"
+        background: "Background settings"
+        background_switch: "Switch back to last background"
+        toggle_minimap: "Toggle minimap"
+        map_data: "Map data settings"
+        wireframe: "Toggle wireframe mode"
+      help:
+        title: "Help"
+        help: "Show help/documentation"
+      selected:
+        title: "With selected"
+        toggle_infobox: "Toggle info box"
+        toggle_menu: "Toggle edit menu"
+    editing:
+      title: "Editing"
+      drawing:
+        title: "Drawing"
+        add_point: "'Add point' mode"
+        add_line: "'Add line' mode"
+        add_area: "'Add area' mode"
+        place_point: "Place a point"
+        stop_line: "Stop drawing of a line or area"
+      operations:
+        title: "Operations"
+        continue_line: "Continue a line at the selected node"
+        merge: "Combine (Merge) selected items"
+        disconnect: "Disconnect features at the selected node"
+        split: "Split a line into two at the selected node"
+        move: "Move selected items"
+        rotate: "Rotate selected items"
+        orthagonalize: "Straighten line / Square area corners"
+        circularize: "Circularize an area"
+        reflect_long: "Reflect items across the longer axis"
+        reflect_short: "Reflect items across the shorter axis"
+        reverse: "Reverse a line"
+      edit:
+        title: "Edit"
+        copy: "Copy map features"
+        paste: "Paste map features"
+        undo: "Undo last action"
+        redo: "Redo last action"
+        save: "Save changes"
diff --git a/data/shortcuts.json b/data/shortcuts.json
index 3fe790fbfc..71874356c4 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -1,89 +1,156 @@
 { "dataShortcuts": [
     {
-        "key": "display",
-        "desc": "shortcuts.display.desc",
-        "shortcuts": [
-            {
-                "shortcut": ["↓", "↑", "←", "→"],
-                "key": "shortcuts.display.pan_map"
-            },
-            {
-                "shortcut": ["⇧↓", "⇧↑", "⇧←", "⇧→"],
-                "key": "shortcuts.display.pan_map_screen"
-            },
-            {
-                "shortcut": ["+", "-"],
-                "key": "shortcuts.display.zoom"
-            },
-            {
-                "shortcut": ["⌘+", "⌘-"],
-                "key": "shortcuts.display.zoom_large"
-            },
-            {
-                "shortcut": ["B"],
-                "key": "shortcuts.display.bg_switcher"
-            },
-            {
-                "shortcut": ["⌘B"],
-                "key": "shortcuts.display.bg"
-            },
-            {
-                "shortcut": ["W"],
-                "key": "shortcuts.display.wireframe"
-            },
-            {
-                "shortcut": ["H"],
-                "key": "shortcuts.display.help"
-            },
-            {
-                "shortcut": ["/"],
-                "key": "shortcuts.display.minimap"
-            },
-            {
-                "shortcut": ["⌘I"],
-                "key": "shortcuts.display.infobox"
-            },
-            {
-                "shortcut": ["Space"],
-                "key": "shortcuts.display.radial_menu"
+        "tab": "browsing",
+        "text": "shortcuts.browsing.title",
+        "groups": [
+            {
+                "group": "navigation",
+                "text": "shortcuts.browsing.navigation.title",
+                "shortcuts": [
+                    {
+                        "shortcut": ["↓", "↑", "←", "→"],
+                        "text": "shortcuts.browsing.navigation.pan_map"
+                    }, {
+                        "shortcut": ["⇧↓", "⇧↑", "⇧←", "⇧→"],
+                        "text": "shortcuts.browsing.navigation.pan_map_screen"
+                    }, {
+                        "shortcut": ["+", "-"],
+                        "text": "shortcuts.browsing.navigation.zoom"
+                    }, {
+                        "shortcut": ["⌘+", "⌘-"],
+                        "text": "shortcuts.browsing.navigation.zoom_large"
+                    }
+                ]
+            }, {
+                "group": "display",
+                "text": "shortcuts.browsing.display.title",
+                "shortcuts": [
+                    {
+                        "shortcut": ["B"],
+                        "text": "shortcuts.browsing.display.background"
+                    }, {
+                        "shortcut": ["⌘B"],
+                        "text": "shortcuts.browsing.display.background_switch"
+                    }, {
+                        "shortcut": ["/"],
+                        "text": "shortcuts.browsing.display.toggle_minimap"
+                    }, {
+                        "shortcut": ["F"],
+                        "text": "shortcuts.browsing.display.map_data"
+                    }, {
+                        "shortcut": ["W"],
+                        "text": "shortcuts.browsing.display.wireframe"
+                    }
+                ]
+            }, {
+                "group": "help",
+                "text": "shortcuts.browsing.help.title",
+                "shortcuts": [
+                    {
+                        "shortcut": ["H"],
+                        "text": "shortcuts.browsing.help.help"
+                    }
+                ]
+            }, {
+                "group": "selected",
+                "text": "shortcuts.browsing.selected.title",
+                "shortcuts": [
+                    {
+                        "shortcut": ["⌘I"],
+                        "text": "shortcuts.browsing.selected.toggle_infobox"
+                    }, {
+                        "shortcut": ["Space"],
+                        "text": "shortcuts.browsing.selected.toggle_menu"
+                    }
+                ]
             }
         ]
     },
     {
-        "key": "edit",
-        "desc": "shortcuts.edit.desc",
-        "shortcuts": [
-            {
-                "shortcut": ["1"],
-                "key": "shortcuts.edit.add_point"
-            },
-            {
-                "shortcut": ["2"],
-                "key": "shortcuts.edit.add_line"
-            },
-            {
-                "shortcut": ["3"],
-                "key": "shortcuts.edit.add_area"
-            },
-            {
-                "shortcut": ["A"],
-                "key": "shortcuts.edit.continue_line"
-            },
-            {
-                "shortcut": ["↵ Enter", "Esc"],
-                "key": "shortcuts.edit.stop_line"
-            },
-            {
-                "shortcut": ["⌘Z"],
-                "key": "shortcuts.edit.undo"
-            },
-            {
-                "shortcut": ["⌘⇧Z"],
-                "key": "shortcuts.edit.redo"
-            },
-            {
-                "shortcut": ["⌘S"],
-                "key": "shortcuts.edit.save"
+        "tab": "editing",
+        "text": "shortcuts.editing.title",
+        "groups": [
+            {
+                "group": "drawing",
+                "text": "shortcuts.editing.drawing.title",
+                "shortcuts": [
+                    {
+                        "shortcut": ["1"],
+                        "text": "shortcuts.editing.drawing.add_point"
+                    }, {
+                        "shortcut": ["2"],
+                        "text": "shortcuts.editing.drawing.add_line"
+                    }, {
+                        "shortcut": ["3"],
+                        "text": "shortcuts.editing.drawing.add_area"
+                    }, {
+                        "shortcut": ["Space"],
+                        "text": "shortcuts.editing.drawing.place_point"
+                    }, {
+                        "shortcut": ["↵ Enter", "Esc"],
+                        "text": "shortcuts.editing.drawing.stop_line"
+                    }
+                ]
+            }, {
+                "group": "operations",
+                "text": "shortcuts.editing.operations.title",
+                "shortcuts": [
+                    {
+                        "shortcut": ["A"],
+                        "text": "shortcuts.editing.operations.continue_line"
+                    }, {
+                        "shortcut": ["C"],
+                        "text": "shortcuts.editing.operations.merge"
+                    }, {
+                        "shortcut": ["D"],
+                        "text": "shortcuts.editing.operations.disconnect"
+                    }, {
+                        "shortcut": ["X"],
+                        "text": "shortcuts.editing.operations.split"
+                    }, {
+                        "shortcut": ["M"],
+                        "text": "shortcuts.editing.operations.move"
+                    }, {
+                        "shortcut": ["R"],
+                        "text": "shortcuts.editing.operations.rotate"
+                    }, {
+                        "shortcut": ["S"],
+                        "text": "shortcuts.editing.operations.orthagonalize"
+                    }, {
+                        "shortcut": ["O"],
+                        "text": "shortcuts.editing.operations.circularize"
+                    }, {
+                        "shortcut": ["T"],
+                        "text": "shortcuts.editing.operations.reflect_long"
+                    }, {
+                        "shortcut": ["Y"],
+                        "text": "shortcuts.editing.operations.reflect_short"
+                    }, {
+                        "shortcut": ["V"],
+                        "text": "shortcuts.editing.operations.reverse"
+                    }
+                ]
+            }, {
+                "group": "edit",
+                "text": "shortcuts.editing.edit.title",
+                "shortcuts": [
+                    {
+                        "shortcut": ["⌘C"],
+                        "text": "shortcuts.editing.edit.copy"
+                    }, {
+                        "shortcut": ["⌘V"],
+                        "text": "shortcuts.editing.edit.paste"
+                    }, {
+                        "shortcut": ["⌘Z"],
+                        "text": "shortcuts.editing.edit.undo"
+                    }, {
+                        "shortcut": ["⌘⇧Z"],
+                        "text": "shortcuts.editing.edit.redo"
+                    }, {
+                        "shortcut": ["⌘S"],
+                        "text": "shortcuts.editing.edit.save"
+                    }
+                ]
             }
         ]
     }
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 59b3e21bc7..9151864d22 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -884,33 +884,66 @@
             }
         },
         "shortcuts": {
-            "modal": {
-                "title": "Keyboard shortcuts"
-            },
-            "display": {
-                "desc": "Display",
-                "pan_map": "Pan map",
-                "pan_map_screen": "Pan map by one screenful",
-                "zoom": "Zoom in / Zoom out",
-                "zoom_large": "Zoom in / Zoom out by a lot",
-                "bg_switcher": "Display background layer switcher",
-                "bg": "Switch between backgrounds",
-                "wireframe": "Toggle wireframe mode",
-                "help": "Show in-editor help/documentation",
-                "minimap": "Toggle minimap",
-                "infobox": "Toggle info/measurements box",
-                "radial_menu": "Toggle radial menu for selected object"
+            "title": "Keyboard shortcuts",
+            "browsing": {
+                "title": "Browsing",
+                "navigation": {
+                    "title": "Navigation",
+                    "pan_map": "Pan map",
+                    "pan_map_screen": "Pan map by one screenful",
+                    "zoom": "Zoom in / Zoom out",
+                    "zoom_large": "Zoom in / Zoom out by a lot"
+                },
+                "display": {
+                    "title": "Display",
+                    "background": "Background settings",
+                    "background_switch": "Switch back to last background",
+                    "toggle_minimap": "Toggle minimap",
+                    "map_data": "Map data settings",
+                    "wireframe": "Toggle wireframe mode"
+                },
+                "help": {
+                    "title": "Help",
+                    "help": "Show help/documentation"
+                },
+                "selected": {
+                    "title": "With selected",
+                    "toggle_infobox": "Toggle info box",
+                    "toggle_menu": "Toggle edit menu"
+                }
             },
-            "edit": {
-                "desc": "Editing",
-                "add_point": "Switch to 'add point' mode",
-                "add_line": "Switch to 'add line' mode",
-                "add_area": "Switch to 'add area' mode",
-                "continue_line": "Continue drawing a line at the selected node",
-                "stop_line": "Stop drawing of a line or area",
-                "undo": "Undo last action",
-                "redo": "Redo last action",
-                "save": "Save changes"
+            "editing": {
+                "title": "Editing",
+                "drawing": {
+                    "title": "Drawing",
+                    "add_point": "'Add point' mode",
+                    "add_line": "'Add line' mode",
+                    "add_area": "'Add area' mode",
+                    "place_point": "Place a point",
+                    "stop_line": "Stop drawing of a line or area"
+                },
+                "operations": {
+                    "title": "Operations",
+                    "continue_line": "Continue a line at the selected node",
+                    "merge": "Combine (Merge) selected items",
+                    "disconnect": "Disconnect features at the selected node",
+                    "split": "Split a line into two at the selected node",
+                    "move": "Move selected items",
+                    "rotate": "Rotate selected items",
+                    "orthagonalize": "Straighten line / Square area corners",
+                    "circularize": "Circularize an area",
+                    "reflect_long": "Reflect items across the longer axis",
+                    "reflect_short": "Reflect items across the shorter axis",
+                    "reverse": "Reverse a line"
+                },
+                "edit": {
+                    "title": "Edit",
+                    "copy": "Copy map features",
+                    "paste": "Paste map features",
+                    "undo": "Undo last action",
+                    "redo": "Redo last action",
+                    "save": "Save changes"
+                }
             }
         },
         "presets": {
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 3b20ecf336..abe7385a5f 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -36,14 +36,14 @@ export function uiShortcuts() {
             .append('div')
             .attr('class', 'modal-section')
             .append('h3')
-            .text(t('shortcuts.modal.title'));
+            .text(t('shortcuts.title'));
 
         shortcutsModal
-            .call(renderTabs);
+            .call(render);
     }
 
 
-    function renderTabs(selection) {
+    function render(selection) {
         var wrapper = selection
             .selectAll('.wrapper')
             .data([0]);
@@ -73,12 +73,12 @@ export function uiShortcuts() {
             .attr('class', 'tab')
             .on('click', function (d, i) {
                 activeTab = i;
-                renderTabs(selection);
+                render(selection);
             });
 
         tabsEnter
             .append('span')
-            .text(function (d) { return t(d.desc); });
+            .text(function (d) { return t(d.text); });
 
         tabs = tabs
             .merge(tabsEnter);
@@ -97,13 +97,21 @@ export function uiShortcuts() {
         var shortcutsEnter = shortcuts
             .enter()
             .append('div')
-            .attr('class', 'shortcut-tab')
-            .on('click', function (d, i) {
-                activeTab = i;
-                renderTabs(selection);
-            });
+            .attr('class', 'shortcut-tab');
+
+
+        var groupsEnter = shortcutsEnter
+            .selectAll('.shortcut-group')
+            .data(function (d) { return d.groups; })
+            .enter()
+            .append('div')
+            .attr('class', 'shortcut-group');
+
+        groupsEnter
+            .append('h3')
+            .text(function(d) { return t(d.text); });
 
-        var row = shortcutsEnter
+        var row = groupsEnter
             .selectAll('.shortcut-row')
             .data(function (d) { return d.shortcuts; })
             .enter()
@@ -124,7 +132,7 @@ export function uiShortcuts() {
         row
             .append('div')
             .attr('class', 'shortcut-desc')
-            .text(function (d) { return t(d.key); });
+            .text(function (d) { return t(d.text); });
 
         shortcuts = shortcuts
             .merge(shortcutsEnter);

From 9628670b98e80b2e80029f0f879c89e3510d9cab Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Thu, 18 May 2017 13:36:19 -0400
Subject: [PATCH 12/14] Use translated keyboard shortcuts for operations, add
 '?'

---
 data/core.yaml          |  3 ++-
 data/shortcuts.json     | 31 +++++++++++++++++--------------
 dist/locales/en.json    |  5 +++--
 modules/ui/shortcuts.js |  4 +++-
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index a007e5f5d0..d3195381b4 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1036,6 +1036,7 @@ en:
       help:
         title: "Help"
         help: "Show help/documentation"
+        keyboard: "Show keyboard shortcuts"
       selected:
         title: "With selected"
         toggle_infobox: "Toggle info box"
@@ -1057,7 +1058,7 @@ en:
         split: "Split a line into two at the selected node"
         move: "Move selected items"
         rotate: "Rotate selected items"
-        orthagonalize: "Straighten line / Square area corners"
+        orthogonalize: "Straighten line / Square area corners"
         circularize: "Circularize an area"
         reflect_long: "Reflect items across the longer axis"
         reflect_short: "Reflect items across the shorter axis"
diff --git a/data/shortcuts.json b/data/shortcuts.json
index 71874356c4..78e26e4079 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -49,6 +49,9 @@
                     {
                         "shortcut": ["H"],
                         "text": "shortcuts.browsing.help.help"
+                    }, {
+                        "shortcut": ["?"],
+                        "text": "shortcuts.browsing.help.keyboard"
                     }
                 ]
             }, {
@@ -96,38 +99,38 @@
                 "text": "shortcuts.editing.operations.title",
                 "shortcuts": [
                     {
-                        "shortcut": ["A"],
+                        "shortcut": ["operations.continue.key"],
                         "text": "shortcuts.editing.operations.continue_line"
                     }, {
-                        "shortcut": ["C"],
+                        "shortcut": ["operations.merge.key"],
                         "text": "shortcuts.editing.operations.merge"
                     }, {
-                        "shortcut": ["D"],
+                        "shortcut": ["operations.disconnect.key"],
                         "text": "shortcuts.editing.operations.disconnect"
                     }, {
-                        "shortcut": ["X"],
+                        "shortcut": ["operations.split.key"],
                         "text": "shortcuts.editing.operations.split"
                     }, {
-                        "shortcut": ["M"],
+                        "shortcut": ["operations.reverse.key"],
+                        "text": "shortcuts.editing.operations.reverse"
+                    }, {
+                        "shortcut": ["operations.move.key"],
                         "text": "shortcuts.editing.operations.move"
                     }, {
-                        "shortcut": ["R"],
+                        "shortcut": ["operations.rotate.key"],
                         "text": "shortcuts.editing.operations.rotate"
                     }, {
-                        "shortcut": ["S"],
-                        "text": "shortcuts.editing.operations.orthagonalize"
+                        "shortcut": ["operations.orthogonalize.key"],
+                        "text": "shortcuts.editing.operations.orthogonalize"
                     }, {
-                        "shortcut": ["O"],
+                        "shortcut": ["operations.circularize.key"],
                         "text": "shortcuts.editing.operations.circularize"
                     }, {
-                        "shortcut": ["T"],
+                        "shortcut": ["operations.reflect.key.long"],
                         "text": "shortcuts.editing.operations.reflect_long"
                     }, {
-                        "shortcut": ["Y"],
+                        "shortcut": ["operations.reflect.key.short"],
                         "text": "shortcuts.editing.operations.reflect_short"
-                    }, {
-                        "shortcut": ["V"],
-                        "text": "shortcuts.editing.operations.reverse"
                     }
                 ]
             }, {
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 9151864d22..33ea1db4ea 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -904,7 +904,8 @@
                 },
                 "help": {
                     "title": "Help",
-                    "help": "Show help/documentation"
+                    "help": "Show help/documentation",
+                    "keyboard": "Show keyboard shortcuts"
                 },
                 "selected": {
                     "title": "With selected",
@@ -930,7 +931,7 @@
                     "split": "Split a line into two at the selected node",
                     "move": "Move selected items",
                     "rotate": "Rotate selected items",
-                    "orthagonalize": "Straighten line / Square area corners",
+                    "orthogonalize": "Straighten line / Square area corners",
                     "circularize": "Circularize an area",
                     "reflect_long": "Reflect items across the longer axis",
                     "reflect_short": "Reflect items across the shorter axis",
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index abe7385a5f..5ddbf8d380 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -127,7 +127,9 @@ export function uiShortcuts() {
             .data(function (d) { return d.shortcut; })
             .enter()
             .append('kbd')
-            .text(function (d) { return uiCmd(d); });
+            .text(function (d) {
+                return d.indexOf('.') !== -1 ? uiCmd(t(d)) : uiCmd(d);
+            });
 
         row
             .append('div')

From 0149c1250940cce71d496a3e90e26e14e124b497 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Wed, 31 May 2017 17:09:27 -0400
Subject: [PATCH 13/14] Couldn't get quite the layout I wanted with flexbox, so
 using tables (fwiw, GitHub's shortcut screen is this way too)

---
 css/80_app.css          |  37 +++++---------
 data/shortcuts.json     | 108 ++++++++++++++++++++--------------------
 modules/ui/shortcuts.js |  47 ++++++++++-------
 3 files changed, 95 insertions(+), 97 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 25ab000fde..3d1b61f6b7 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3120,45 +3120,34 @@ img.tile-removing {
     flex-flow: row wrap;
 }
 
-.modal-shortcuts .shortcut-group {
-    padding: 10px;
-    flex: 0 0 50%;
-    display: flex;
-    flex-direction: column;
+.modal-shortcuts .shortcut-column {
+    flex: 1 1 50%;
+    width: 50%;
 }
 
-.modal-shortcuts .shortcut-group h3 {
-    text-align: center;
+.modal-shortcuts td {
+    padding-bottom: 5px;
 }
 
-.modal-shortcuts .shortcut-row {
-    flex: 0 0 auto;
-    display: flex;
-    flex-direction: row;
+.modal-shortcuts .shortcut-section {
+    padding: 15px 0 10px 0;
 }
 
-.modal-shortcuts .kbd-row {
+.modal-shortcuts .shortcut-keys {
     padding-right: 10px;
     color: #767676;
     text-align: right;
-    padding-bottom: 5px;
-    flex: 1 1 40%;
-
-}
-.modal-shortcuts .shortcut-desc {
-    padding-bottom: 5px;
-    flex: 1 1 60%;
 }
 
-.modal-shortcuts kbd {
+.modal-shortcuts .shortcut-keys kbd {
     display: inline-block;
-    text-align: right;
+    text-align: center;
     padding: 3px 5px;
     font-size: 11px;
-    line-height: 10px;
-    letter-spacing: 1px;
+    line-height: 12px;
+    min-width: 12px;
     color: #555;
-    vertical-align: middle;
+    vertical-align: baseline;
     background-color: #fcfcfc;
     border: solid 1px #ccc;
     margin: 0 2px;
diff --git a/data/shortcuts.json b/data/shortcuts.json
index 78e26e4079..d804aeb08c 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -2,12 +2,13 @@
     {
         "tab": "browsing",
         "text": "shortcuts.browsing.title",
-        "groups": [
+        "columns": [
             {
-                "group": "navigation",
-                "text": "shortcuts.browsing.navigation.title",
-                "shortcuts": [
+                "rows": [
                     {
+                        "section": "navigation",
+                        "text": "shortcuts.browsing.navigation.title"
+                    }, {
                         "shortcut": ["↓", "↑", "←", "→"],
                         "text": "shortcuts.browsing.navigation.pan_map"
                     }, {
@@ -19,13 +20,25 @@
                     }, {
                         "shortcut": ["⌘+", "⌘-"],
                         "text": "shortcuts.browsing.navigation.zoom_large"
+                    },
+
+                    {
+                        "section": "help",
+                        "text": "shortcuts.browsing.help.title"
+                    }, {
+                        "shortcut": ["H"],
+                        "text": "shortcuts.browsing.help.help"
+                    }, {
+                        "shortcut": ["?"],
+                        "text": "shortcuts.browsing.help.keyboard"
                     }
                 ]
             }, {
-                "group": "display",
-                "text": "shortcuts.browsing.display.title",
-                "shortcuts": [
+                "rows": [
                     {
+                        "section": "display",
+                        "text": "shortcuts.browsing.display.title"
+                    }, {
                         "shortcut": ["B"],
                         "text": "shortcuts.browsing.display.background"
                     }, {
@@ -40,25 +53,12 @@
                     }, {
                         "shortcut": ["W"],
                         "text": "shortcuts.browsing.display.wireframe"
-                    }
-                ]
-            }, {
-                "group": "help",
-                "text": "shortcuts.browsing.help.title",
-                "shortcuts": [
+                    },
+
                     {
-                        "shortcut": ["H"],
-                        "text": "shortcuts.browsing.help.help"
+                        "section": "selected",
+                        "text": "shortcuts.browsing.selected.title"
                     }, {
-                        "shortcut": ["?"],
-                        "text": "shortcuts.browsing.help.keyboard"
-                    }
-                ]
-            }, {
-                "group": "selected",
-                "text": "shortcuts.browsing.selected.title",
-                "shortcuts": [
-                    {
                         "shortcut": ["⌘I"],
                         "text": "shortcuts.browsing.selected.toggle_infobox"
                     }, {
@@ -68,16 +68,16 @@
                 ]
             }
         ]
-    },
-    {
+    }, {
         "tab": "editing",
         "text": "shortcuts.editing.title",
-        "groups": [
+        "columns" : [
             {
-                "group": "drawing",
-                "text": "shortcuts.editing.drawing.title",
-                "shortcuts": [
+                "rows": [
                     {
+                        "section": "drawing",
+                        "text": "shortcuts.editing.drawing.title"
+                    }, {
                         "shortcut": ["1"],
                         "text": "shortcuts.editing.drawing.add_point"
                     }, {
@@ -92,13 +92,34 @@
                     }, {
                         "shortcut": ["↵ Enter", "Esc"],
                         "text": "shortcuts.editing.drawing.stop_line"
+                    },
+
+                    {
+                        "section": "edit",
+                        "text": "shortcuts.editing.edit.title"
+                    }, {
+                        "shortcut": ["⌘C"],
+                        "text": "shortcuts.editing.edit.copy"
+                    }, {
+                        "shortcut": ["⌘V"],
+                        "text": "shortcuts.editing.edit.paste"
+                    }, {
+                        "shortcut": ["⌘Z"],
+                        "text": "shortcuts.editing.edit.undo"
+                    }, {
+                        "shortcut": ["⌘⇧Z"],
+                        "text": "shortcuts.editing.edit.redo"
+                    }, {
+                        "shortcut": ["⌘S"],
+                        "text": "shortcuts.editing.edit.save"
                     }
                 ]
             }, {
-                "group": "operations",
-                "text": "shortcuts.editing.operations.title",
-                "shortcuts": [
+                "rows": [
                     {
+                        "section": "operations",
+                        "text": "shortcuts.editing.operations.title"
+                    }, {
                         "shortcut": ["operations.continue.key"],
                         "text": "shortcuts.editing.operations.continue_line"
                     }, {
@@ -133,27 +154,6 @@
                         "text": "shortcuts.editing.operations.reflect_short"
                     }
                 ]
-            }, {
-                "group": "edit",
-                "text": "shortcuts.editing.edit.title",
-                "shortcuts": [
-                    {
-                        "shortcut": ["⌘C"],
-                        "text": "shortcuts.editing.edit.copy"
-                    }, {
-                        "shortcut": ["⌘V"],
-                        "text": "shortcuts.editing.edit.paste"
-                    }, {
-                        "shortcut": ["⌘Z"],
-                        "text": "shortcuts.editing.edit.undo"
-                    }, {
-                        "shortcut": ["⌘⇧Z"],
-                        "text": "shortcuts.editing.edit.redo"
-                    }, {
-                        "shortcut": ["⌘S"],
-                        "text": "shortcuts.editing.edit.save"
-                    }
-                ]
             }
         ]
     }
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 5ddbf8d380..95635b1e51 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -99,30 +99,38 @@ export function uiShortcuts() {
             .append('div')
             .attr('class', 'shortcut-tab');
 
-
-        var groupsEnter = shortcutsEnter
-            .selectAll('.shortcut-group')
-            .data(function (d) { return d.groups; })
+        var columnsEnter = shortcutsEnter
+            .selectAll('.shortcut-column')
+            .data(function (d) { return d.columns; })
             .enter()
-            .append('div')
-            .attr('class', 'shortcut-group');
-
-        groupsEnter
-            .append('h3')
-            .text(function(d) { return t(d.text); });
+            .append('table')
+            .attr('class', 'shortcut-column');
 
-        var row = groupsEnter
+        var rowsEnter = columnsEnter
             .selectAll('.shortcut-row')
-            .data(function (d) { return d.shortcuts; })
+            .data(function (d) { return d.rows; })
             .enter()
-            .append('div')
+            .append('tr')
             .attr('class', 'shortcut-row');
 
-        var shortcutsRow = row
-            .append('div')
-            .attr('class', 'kbd-row');
+        var sectionRows = rowsEnter
+            .filter(function (d) { return !d.shortcut; });
+
+        sectionRows
+            .append('td');
 
-        shortcutsRow
+        sectionRows
+            .append('td')
+            .attr('class', 'shortcut-section')
+            .append('h3')
+            .text(function (d) { return t(d.text); });
+
+        var shortcutRows = rowsEnter
+            .filter(function (d) { return d.shortcut; });
+
+        shortcutRows
+            .append('td')
+            .attr('class', 'shortcut-keys')
             .selectAll('kbd')
             .data(function (d) { return d.shortcut; })
             .enter()
@@ -131,11 +139,12 @@ export function uiShortcuts() {
                 return d.indexOf('.') !== -1 ? uiCmd(t(d)) : uiCmd(d);
             });
 
-        row
-            .append('div')
+        shortcutRows
+            .append('td')
             .attr('class', 'shortcut-desc')
             .text(function (d) { return t(d.text); });
 
+
         shortcuts = shortcuts
             .merge(shortcutsEnter);
 

From 8a3970613afa12d6d34e9b10ba4a8ad682ef9cce Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Wed, 31 May 2017 23:20:48 -0400
Subject: [PATCH 14/14] Finalize keyboard shortcut style, add a few more
 commands

---
 css/80_app.css          |   2 +-
 data/core.yaml          |  68 ++++++++++++++++-----------
 data/shortcuts.json     | 102 ++++++++++++++++++++++++++++------------
 dist/locales/en.json    |  74 +++++++++++++++++------------
 modules/ui/shortcuts.js |   6 +--
 5 files changed, 163 insertions(+), 89 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 3d1b61f6b7..d29722c1c3 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3095,7 +3095,7 @@ img.tile-removing {
 
 .modal-shortcuts .tabs-bar {
     text-align: center;
-    padding-bottom: 15px;
+    padding-bottom: 10px;
     font-size: 16px;
     font-weight: bold;
 }
diff --git a/data/core.yaml b/data/core.yaml
index d3195381b4..5961f997e9 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -560,7 +560,7 @@ en:
 
       ### Using the editor
 
-      A list of available keyboard shortcuts can be found [here](http://wiki.openstreetmap.org/wiki/ID/Shortcuts).
+      You can view a list of keyboard shortcuts by pressing the `?` key.
 
     roads: |
       # Roads
@@ -1022,25 +1022,37 @@ en:
       title: "Browsing"
       navigation:
         title: "Navigation"
-        pan_map: "Pan map"
-        pan_map_screen: "Pan map by one screenful"
+        pan: "Pan map"
+        pan_more: "Pan map by one screenful"
         zoom: "Zoom in / Zoom out"
-        zoom_large: "Zoom in / Zoom out by a lot"
-      display:
-        title: "Display"
-        background: "Background settings"
-        background_switch: "Switch back to last background"
-        toggle_minimap: "Toggle minimap"
-        map_data: "Map data settings"
-        wireframe: "Toggle wireframe mode"
+        zoom_more: "Zoom in / Zoom out by a lot"
       help:
         title: "Help"
         help: "Show help/documentation"
         keyboard: "Show keyboard shortcuts"
-      selected:
-        title: "With selected"
-        toggle_infobox: "Toggle info box"
-        toggle_menu: "Toggle edit menu"
+      display_options:
+        title: "Display options"
+        background: "Show background options"
+        background_switch: "Switch back to last background"
+        map_data: "Show map data options"
+        wireframe: "Toggle wireframe mode"
+        minimap: "Toggle minimap"
+      selecting:
+        title: "Selecting features"
+        select_one: "Select a single feature"
+        select_multi: "Select multiple features"
+        lasso: "Draw a selection lasso around features"
+      with_selected:
+        title: "With feature selected"
+        infobox: "Toggle info / measurement box"
+        edit_menu: "Toggle edit menu"
+      vertex_selected:
+        title: "With node selected"
+        previous: "Jump to previous node"
+        next: "Jump to next node"
+        first: "Jump to first node"
+        last: "Jump to last node"
+        change_parent: "Switch parent way"
     editing:
       title: "Editing"
       drawing:
@@ -1049,24 +1061,26 @@ en:
         add_line: "'Add line' mode"
         add_area: "'Add area' mode"
         place_point: "Place a point"
-        stop_line: "Stop drawing of a line or area"
+        disable_snap: "Hold to disable point snapping"
+        stop_line: "Finish drawing a line or area"
       operations:
         title: "Operations"
         continue_line: "Continue a line at the selected node"
-        merge: "Combine (Merge) selected items"
+        merge: "Combine (merge) selected features"
         disconnect: "Disconnect features at the selected node"
         split: "Split a line into two at the selected node"
-        move: "Move selected items"
-        rotate: "Rotate selected items"
-        orthogonalize: "Straighten line / Square area corners"
-        circularize: "Circularize an area"
-        reflect_long: "Reflect items across the longer axis"
-        reflect_short: "Reflect items across the shorter axis"
         reverse: "Reverse a line"
-      edit:
-        title: "Edit"
-        copy: "Copy map features"
-        paste: "Paste map features"
+        move: "Move selected features"
+        rotate: "Rotate selected features"
+        orthogonalize: "Straighten line / Square area corners"
+        circularize: "Circularize a closed line or area"
+        reflect_long: "Reflect features across the longer axis"
+        reflect_short: "Reflect features across the shorter axis"
+        delete: "Delete selected features"
+      commands:
+        title: "Commands"
+        copy: "Copy selected features"
+        paste: "Paste selected features"
         undo: "Undo last action"
         redo: "Redo last action"
         save: "Save changes"
diff --git a/data/shortcuts.json b/data/shortcuts.json
index d804aeb08c..ee2d0650c5 100644
--- a/data/shortcuts.json
+++ b/data/shortcuts.json
@@ -10,16 +10,16 @@
                         "text": "shortcuts.browsing.navigation.title"
                     }, {
                         "shortcut": ["↓", "↑", "←", "→"],
-                        "text": "shortcuts.browsing.navigation.pan_map"
+                        "text": "shortcuts.browsing.navigation.pan"
                     }, {
                         "shortcut": ["⇧↓", "⇧↑", "⇧←", "⇧→"],
-                        "text": "shortcuts.browsing.navigation.pan_map_screen"
+                        "text": "shortcuts.browsing.navigation.pan_more"
                     }, {
                         "shortcut": ["+", "-"],
                         "text": "shortcuts.browsing.navigation.zoom"
                     }, {
                         "shortcut": ["⌘+", "⌘-"],
-                        "text": "shortcuts.browsing.navigation.zoom_large"
+                        "text": "shortcuts.browsing.navigation.zoom_more"
                     },
 
                     {
@@ -31,40 +31,78 @@
                     }, {
                         "shortcut": ["?"],
                         "text": "shortcuts.browsing.help.keyboard"
-                    }
-                ]
-            }, {
-                "rows": [
+                    },
+
                     {
-                        "section": "display",
-                        "text": "shortcuts.browsing.display.title"
+                        "section": "display_options",
+                        "text": "shortcuts.browsing.display_options.title"
                     }, {
                         "shortcut": ["B"],
-                        "text": "shortcuts.browsing.display.background"
+                        "text": "shortcuts.browsing.display_options.background"
                     }, {
                         "shortcut": ["⌘B"],
-                        "text": "shortcuts.browsing.display.background_switch"
-                    }, {
-                        "shortcut": ["/"],
-                        "text": "shortcuts.browsing.display.toggle_minimap"
+                        "text": "shortcuts.browsing.display_options.background_switch"
                     }, {
                         "shortcut": ["F"],
-                        "text": "shortcuts.browsing.display.map_data"
+                        "text": "shortcuts.browsing.display_options.map_data"
                     }, {
                         "shortcut": ["W"],
-                        "text": "shortcuts.browsing.display.wireframe"
+                        "text": "shortcuts.browsing.display_options.wireframe"
+                    }, {
+                        "shortcut": ["/"],
+                        "text": "shortcuts.browsing.display_options.minimap"
+                    }
+                ]
+            }, {
+                "rows": [
+                    {
+                        "section": "selecting",
+                        "text": "shortcuts.browsing.selecting.title"
+                    }, {
+                        "shortcut": ["Left-click"],
+                        "text": "shortcuts.browsing.selecting.select_one"
+                    }, {
+                        "shortcut": ["⇧ Left-click"],
+                        "text": "shortcuts.browsing.selecting.select_multi"
+                    }, {
+                        "shortcut": ["⇧ Left-click + drag"],
+                        "text": "shortcuts.browsing.selecting.lasso"
+                    }, {
+                        "shortcut": [],
+                        "text": ""
                     },
 
                     {
-                        "section": "selected",
-                        "text": "shortcuts.browsing.selected.title"
+                        "section": "with_selected",
+                        "text": "shortcuts.browsing.with_selected.title"
                     }, {
                         "shortcut": ["⌘I"],
-                        "text": "shortcuts.browsing.selected.toggle_infobox"
+                        "text": "shortcuts.browsing.with_selected.infobox"
                     }, {
-                        "shortcut": ["Space"],
-                        "text": "shortcuts.browsing.selected.toggle_menu"
+                        "shortcut": ["Right-click", "Space"],
+                        "text": "shortcuts.browsing.with_selected.edit_menu"
+                    },
+
+                    {
+                        "section": "vertex_selected",
+                        "text": "shortcuts.browsing.vertex_selected.title"
+                    }, {
+                        "shortcut": ["[", "↖ PgUp"],
+                        "text": "shortcuts.browsing.vertex_selected.previous"
+                    }, {
+                        "shortcut": ["]", "↘ PgDn"],
+                        "text": "shortcuts.browsing.vertex_selected.next"
+                    }, {
+                        "shortcut": ["{", "⇞ Home"],
+                        "text": "shortcuts.browsing.vertex_selected.first"
+                    }, {
+                        "shortcut": ["}", "⇟ End"],
+                        "text": "shortcuts.browsing.vertex_selected.last"
+                    }, {
+                        "shortcut": ["\\", "↨ Pause"],
+                        "text": "shortcuts.browsing.vertex_selected.change_parent"
                     }
+
                 ]
             }
         ]
@@ -90,28 +128,31 @@
                         "shortcut": ["Space"],
                         "text": "shortcuts.editing.drawing.place_point"
                     }, {
-                        "shortcut": ["↵ Enter", "Esc"],
+                        "shortcut": ["⌥ Alt"],
+                        "text": "shortcuts.editing.drawing.disable_snap"
+                    }, {
+                        "shortcut": ["↵ Enter", "⎋ Esc"],
                         "text": "shortcuts.editing.drawing.stop_line"
                     },
 
                     {
-                        "section": "edit",
-                        "text": "shortcuts.editing.edit.title"
+                        "section": "commands",
+                        "text": "shortcuts.editing.commands.title"
                     }, {
                         "shortcut": ["⌘C"],
-                        "text": "shortcuts.editing.edit.copy"
+                        "text": "shortcuts.editing.commands.copy"
                     }, {
                         "shortcut": ["⌘V"],
-                        "text": "shortcuts.editing.edit.paste"
+                        "text": "shortcuts.editing.commands.paste"
                     }, {
                         "shortcut": ["⌘Z"],
-                        "text": "shortcuts.editing.edit.undo"
+                        "text": "shortcuts.editing.commands.undo"
                     }, {
                         "shortcut": ["⌘⇧Z"],
-                        "text": "shortcuts.editing.edit.redo"
+                        "text": "shortcuts.editing.commands.redo"
                     }, {
                         "shortcut": ["⌘S"],
-                        "text": "shortcuts.editing.edit.save"
+                        "text": "shortcuts.editing.commands.save"
                     }
                 ]
             }, {
@@ -152,6 +193,9 @@
                     }, {
                         "shortcut": ["operations.reflect.key.short"],
                         "text": "shortcuts.editing.operations.reflect_short"
+                    }, {
+                        "shortcut": ["⌘⌫", "⌦"],
+                        "text": "shortcuts.editing.operations.delete"
                     }
                 ]
             }
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 33ea1db4ea..c3e5eb98b7 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -626,7 +626,7 @@
         "help": {
             "title": "Help",
             "help": "# Help\n\nThis is an editor for [OpenStreetMap](http://www.openstreetmap.org/), the\nfree and editable map of the world. You can use it to add and update\ndata in your area, making an open-source and open-data map of the world\nbetter for everyone.\n\nEdits that you make on this map will be visible to everyone who uses\nOpenStreetMap. In order to make an edit, you'll need to\n[log in](https://www.openstreetmap.org/login).\n\nThe [iD editor](http://ideditor.com/) is a collaborative project with [source\ncode available on GitHub](https://github.com/openstreetmap/iD).\n",
-            "editing_saving": "# Editing & Saving\n\nThis editor is designed to work primarily online, and you're accessing\nit through a website right now.\n\n### Selecting Features\n\nTo select a map feature, like a road or point of interest, click\non it on the map. This will highlight the selected feature, open a panel with\ndetails about it, and show a menu of things you can do with the feature.\n\nTo select multiple features, hold down the 'Shift' key. Then either click\non the features you want to select, or drag on the map to draw a rectangle.\nThis will draw a box and select all the points within it.\n\n### Saving Edits\n\nWhen you make changes like editing roads, buildings, and places, these are\nstored locally until you save them to the server. Don't worry if you make\na mistake - you can undo changes by clicking the undo button, and redo\nchanges by clicking the redo button.\n\nClick 'Save' to finish a group of edits - for instance, if you've completed\nan area of town and would like to start on a new area. You'll have a chance\nto review what you've done, and the editor supplies helpful suggestions\nand warnings if something doesn't seem right about the changes.\n\nIf everything looks good, you can enter a short comment explaining the change\nyou made, and click 'Save' again to post the changes\nto [OpenStreetMap.org](http://www.openstreetmap.org/), where they are visible\nto all other users and available for others to build and improve upon.\n\nIf you can't finish your edits in one sitting, you can leave the editor\nwindow and come back (on the same browser and computer), and the\neditor application will offer to restore your work.\n\n### Using the editor\n\nA list of available keyboard shortcuts can be found [here](http://wiki.openstreetmap.org/wiki/ID/Shortcuts).\n",
+            "editing_saving": "# Editing & Saving\n\nThis editor is designed to work primarily online, and you're accessing\nit through a website right now.\n\n### Selecting Features\n\nTo select a map feature, like a road or point of interest, click\non it on the map. This will highlight the selected feature, open a panel with\ndetails about it, and show a menu of things you can do with the feature.\n\nTo select multiple features, hold down the 'Shift' key. Then either click\non the features you want to select, or drag on the map to draw a rectangle.\nThis will draw a box and select all the points within it.\n\n### Saving Edits\n\nWhen you make changes like editing roads, buildings, and places, these are\nstored locally until you save them to the server. Don't worry if you make\na mistake - you can undo changes by clicking the undo button, and redo\nchanges by clicking the redo button.\n\nClick 'Save' to finish a group of edits - for instance, if you've completed\nan area of town and would like to start on a new area. You'll have a chance\nto review what you've done, and the editor supplies helpful suggestions\nand warnings if something doesn't seem right about the changes.\n\nIf everything looks good, you can enter a short comment explaining the change\nyou made, and click 'Save' again to post the changes\nto [OpenStreetMap.org](http://www.openstreetmap.org/), where they are visible\nto all other users and available for others to build and improve upon.\n\nIf you can't finish your edits in one sitting, you can leave the editor\nwindow and come back (on the same browser and computer), and the\neditor application will offer to restore your work.\n\n### Using the editor\n\nYou can view a list of keyboard shortcuts by pressing the `?` key.\n",
             "roads": "# Roads\n\nYou can create, fix, and delete roads with this editor. Roads can be all\nkinds: paths, highways, trails, cycleways, and more - any often-crossed\nsegment should be mappable.\n\n### Selecting\n\nClick on a road to select it. An outline should become visible, along\nwith a small tools menu on the map and a sidebar showing more information\nabout the road.\n\n### Modifying\n\nOften you'll see roads that aren't aligned to the imagery behind them\nor to a GPS track. You can adjust these roads so they are in the correct\nplace.\n\nFirst click on the road you want to change. This will highlight it and show\ncontrol points along it that you can drag to better locations. If\nyou want to add new control points for more detail, double-click a part\nof the road without a node, and one will be added.\n\nIf the road connects to another road, but doesn't properly connect on\nthe map, you can drag one of its control points onto the other road in\norder to join them. Having roads connect is important for the map\nand essential for providing driving directions.\n\nYou can also click the 'Move' tool or press the `M` shortcut key to move the entire road at\none time, and then click again to save that movement.\n\n### Deleting\n\nIf a road is entirely incorrect - you can see that it doesn't exist in satellite\nimagery and ideally have confirmed locally that it's not present - you can delete\nit, which removes it from the map. Be cautious when deleting features -\nlike any other edit, the results are seen by everyone and satellite imagery\nis often out of date, so the road could simply be newly built.\n\nYou can delete a road by clicking on it to select it, then clicking the\ntrash can icon or pressing the 'Delete' key.\n\n### Creating\n\nFound somewhere there should be a road but there isn't? Click the 'Line'\nicon in the top-left of the editor or press the shortcut key `2` to start drawing\na line.\n\nClick on the start of the road on the map to start drawing. If the road\nbranches off from an existing road, start by clicking on the place where they connect.\n\nThen click on points along the road so that it follows the right path, according\nto satellite imagery or GPS. If the road you are drawing crosses another road, connect\nit by clicking on the intersection point. When you're done drawing, double-click\nor press 'Return' or 'Enter' on your keyboard.\n",
             "gps": "# GPS\n\nCollected GPS traces are one valuable source of data for OpenStreetMap. This editor\nsupports local traces - `.gpx` files on your local computer. You can collect\nthis kind of GPS trace with a number of smartphone applications as well as\npersonal GPS hardware.\n\nFor information on how to perform a GPS survey, read\n[Mapping with a smartphone, GPS, or paper](http://learnosm.org/en/mobile-mapping/).\n\nTo use a GPX track for mapping, drag and drop the GPX file onto the map\neditor. If it's recognized, it will be added to the map as a bright purple\nline. Click on the 'Map Data' menu on the right side to enable,\ndisable, or zoom to this new GPX-powered layer.\n\nThe GPX track isn't directly uploaded to OpenStreetMap - the best way to\nuse it is to draw on the map, using it as a guide for the new features that\nyou add, and also to [upload it to OpenStreetMap](http://www.openstreetmap.org/trace/create)\nfor other users to use.\n",
             "imagery": "# Imagery\n\nAerial imagery is an important resource for mapping. A combination of\nairplane flyovers, satellite views, and freely-compiled sources are available\nin the editor under the 'Background Settings' menu on the right.\n\nBy default a [Bing Maps](http://www.bing.com/maps/) satellite layer is\npresented in the editor, but as you pan and zoom the map to new geographical\nareas, new sources will become available. Some countries, like the United\nStates, France, and Denmark have very high-quality imagery available for some areas.\n\nImagery is sometimes offset from the map data because of a mistake on the\nimagery provider's side. If you see a lot of roads shifted from the background,\ndon't immediately move them all to match the background. Instead you can adjust\nthe imagery so that it matches the existing data by clicking 'Fix alignment' at\nthe bottom of the Background Settings UI.\n",
@@ -889,28 +889,42 @@
                 "title": "Browsing",
                 "navigation": {
                     "title": "Navigation",
-                    "pan_map": "Pan map",
-                    "pan_map_screen": "Pan map by one screenful",
+                    "pan": "Pan map",
+                    "pan_more": "Pan map by one screenful",
                     "zoom": "Zoom in / Zoom out",
-                    "zoom_large": "Zoom in / Zoom out by a lot"
-                },
-                "display": {
-                    "title": "Display",
-                    "background": "Background settings",
-                    "background_switch": "Switch back to last background",
-                    "toggle_minimap": "Toggle minimap",
-                    "map_data": "Map data settings",
-                    "wireframe": "Toggle wireframe mode"
+                    "zoom_more": "Zoom in / Zoom out by a lot"
                 },
                 "help": {
                     "title": "Help",
                     "help": "Show help/documentation",
                     "keyboard": "Show keyboard shortcuts"
                 },
-                "selected": {
-                    "title": "With selected",
-                    "toggle_infobox": "Toggle info box",
-                    "toggle_menu": "Toggle edit menu"
+                "display_options": {
+                    "title": "Display options",
+                    "background": "Show background options",
+                    "background_switch": "Switch back to last background",
+                    "map_data": "Show map data options",
+                    "wireframe": "Toggle wireframe mode",
+                    "minimap": "Toggle minimap"
+                },
+                "selecting": {
+                    "title": "Selecting features",
+                    "select_one": "Select a single feature",
+                    "select_multi": "Select multiple features",
+                    "lasso": "Draw a selection lasso around features"
+                },
+                "with_selected": {
+                    "title": "With feature selected",
+                    "infobox": "Toggle info / measurement box",
+                    "edit_menu": "Toggle edit menu"
+                },
+                "vertex_selected": {
+                    "title": "With node selected",
+                    "previous": "Jump to previous node",
+                    "next": "Jump to next node",
+                    "first": "Jump to first node",
+                    "last": "Jump to last node",
+                    "change_parent": "Switch parent way"
                 }
             },
             "editing": {
@@ -921,26 +935,28 @@
                     "add_line": "'Add line' mode",
                     "add_area": "'Add area' mode",
                     "place_point": "Place a point",
-                    "stop_line": "Stop drawing of a line or area"
+                    "disable_snap": "Hold to disable point snapping",
+                    "stop_line": "Finish drawing a line or area"
                 },
                 "operations": {
                     "title": "Operations",
                     "continue_line": "Continue a line at the selected node",
-                    "merge": "Combine (Merge) selected items",
+                    "merge": "Combine (merge) selected features",
                     "disconnect": "Disconnect features at the selected node",
                     "split": "Split a line into two at the selected node",
-                    "move": "Move selected items",
-                    "rotate": "Rotate selected items",
+                    "reverse": "Reverse a line",
+                    "move": "Move selected features",
+                    "rotate": "Rotate selected features",
                     "orthogonalize": "Straighten line / Square area corners",
-                    "circularize": "Circularize an area",
-                    "reflect_long": "Reflect items across the longer axis",
-                    "reflect_short": "Reflect items across the shorter axis",
-                    "reverse": "Reverse a line"
-                },
-                "edit": {
-                    "title": "Edit",
-                    "copy": "Copy map features",
-                    "paste": "Paste map features",
+                    "circularize": "Circularize a closed line or area",
+                    "reflect_long": "Reflect features across the longer axis",
+                    "reflect_short": "Reflect features across the shorter axis",
+                    "delete": "Delete selected features"
+                },
+                "commands": {
+                    "title": "Commands",
+                    "copy": "Copy selected features",
+                    "paste": "Paste selected features",
                     "undo": "Undo last action",
                     "redo": "Redo last action",
                     "save": "Save changes"
diff --git a/modules/ui/shortcuts.js b/modules/ui/shortcuts.js
index 95635b1e51..6179f41b99 100644
--- a/modules/ui/shortcuts.js
+++ b/modules/ui/shortcuts.js
@@ -7,12 +7,12 @@ import { dataShortcuts } from '../../data';
 
 
 export function uiShortcuts() {
-    var key = '⇧/';
     var activeTab = 0;
     var modalSelection;
     var savedSelection;
+
     var keybinding = d3keybinding('shortcuts')
-        .on(key, function () {
+        .on(['?', '⇧/'], function () {
             if (modalSelection) {
                 modalSelection.close();
                 modalSelection = null;
@@ -142,7 +142,7 @@ export function uiShortcuts() {
         shortcutRows
             .append('td')
             .attr('class', 'shortcut-desc')
-            .text(function (d) { return t(d.text); });
+            .text(function (d) { return d.text ? t(d.text) : '\u00a0'; });
 
 
         shortcuts = shortcuts