Keybinding view is an extension

src/app/keymaps/atom.coffee

@@ -4,5 +4,4 @@ window.keymap.bindKeys '*'
   right: 'move-right'
   left: 'move-left'
   down: 'move-down'
-  up: 'move-up'
-  'ctrl-?': 'toggle-keybindings-view'
+  up: 'move-up'

src/app/keymaps/keybindings-view.coffee

@@ -0,0 +1,5 @@
+window.keymap.bindKeys '*',
+  'ctrl-?': 'keybindings-view:attach'
+
+window.keymap.bindKeys ".keybindings-view",
+  'escape': 'keybindings-view:detach'

src/app/root-view.coffee

@@ -29,7 +29,6 @@ class RootView extends View
   extensions: null
   extensionStates: null
   fontSize: 18
-  keybindingsView: null
 
   initialize: (pathToOpen) ->
     @extensions = {}
@@ -60,7 +59,6 @@ class RootView extends View
 
     @on 'increase-font-size', => @setFontSize(@getFontSize() + 1)
     @on 'decrease-font-size', => @setFontSize(@getFontSize() - 1)
-    @on 'toggle-keybindings-view', => @toggleKeybindingsView()
 
   afterAttach: (onDom) ->
     @focus() if onDom
@@ -116,22 +114,6 @@ class RootView extends View
     if not previousActiveEditor or editor.buffer.path != previousActiveEditor.buffer.path
       @trigger 'active-editor-path-change', editor.buffer.path
 
-  toggleKeybindingsView: ->
-    if @keybindingsView?
-      @keybindingsView.remove()
-      @keybindingsView = null
-    else
-      keybindings = @activeKeybindings()
-      @keybindingsView = $$ ->
-        @div class: 'keybindings-view', =>
-          @ul =>
-            for keystroke, command of keybindings
-              @li =>
-                @span class: 'keystroke', "#{keystroke}"
-                @span "#{command}"
-
-      @append(@keybindingsView)
-
   activeKeybindings: ->
     keymap.bindingsForElement(document.activeElement)
 

src/extensions/keybindings-view/index.coffee

@@ -0,0 +1 @@
+module.exports = require 'keybindings-view/keybindings-view'

src/extensions/keybindings-view/keybindings-view.coffee

@@ -0,0 +1,31 @@
+{View, $$} = require 'space-pen'
+
+module.exports =
+class KeybindingsView extends View
+  @activate: (rootView, state) ->
+    requireStylesheet 'keybinding-view.css'
+    @instance = new this(rootView)
+
+  @content: (rootView) ->
+    @div class: 'keybindings-view', tabindex: -1, =>
+      @ul outlet: 'keybindingList'
+
+  initialize: (@rootView) ->
+    @rootView.on 'keybindings-view:attach', => @attach()
+    @on 'keybindings-view:detach', => @detach()
+
+  attach: ->
+    @keybindingList.empty()
+    @keybindingList.append $$ ->
+      for keystroke, command of rootView.activeKeybindings()
+        @li =>
+          @span class: 'keystroke', "#{keystroke}"
+          @span ":"
+          @span "#{command}"
+
+    @rootView.append(this)
+    @focus()
+
+  detach: ->
+    super()
+    @rootView.focus()

static/atom.css

@@ -61,24 +61,4 @@ body {
 .error {
   background: #991212;
   -webkit-transition: background 200ms ease-out;
-}
-
-.keybindings-view {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-  background-color: white;
-  overflow: scroll;
-  opacity: 0.9;
-}
-
-.keybindings-view li .keystroke {
-  font-weight: bold;
-  float: left;
-  text-align: right;
-  padding-right: 10px;
-  width: 100px;
-}
-
+}

static/keybinding-view.css

@@ -0,0 +1,18 @@
+.keybindings-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  background-color: white;
+  overflow: scroll;
+  opacity: 0.9;
+}
+
+.keybindings-view li .keystroke {
+  font-weight: bold;
+  float: left;
+  text-align: right;
+  padding-right: 10px;
+  width: 200px;
+}