Ctrl-2 & ctrl-0 mediate visibility focus of command-panel and the preview list

If the command panel is toggled with ctrl-2, then the preview list will show and become focused. If it's toggled with ctrl-0, the preview list won't be shown. But if it's already showing, focus will just switch to the editor, leaving it visible. It's kind of hard to explain but feels intuitive to me to use.

spec/extensions/command-panel-spec.coffee

@@ -64,7 +64,6 @@ describe "CommandPanel", ->
       expect(commandPanel.hasParent()).toBeTruthy()
       expect(commandPanel.miniEditor.hiddenInput).not.toMatchSelector ':focus'
 
-
   describe "when command-panel:repeat-relative-address is triggered on the root view", ->
     it "repeats the last search command if there is one", ->
       rootView.trigger 'command-panel:repeat-relative-address'
@@ -146,23 +145,53 @@ describe "CommandPanel", ->
         expect(buffer.lineForRow(1)).toMatch /var torta/
 
     describe "when the command returns operations to be previewed", ->
-      it "displays a preview of the operations above the mini-editor", ->
+      beforeEach ->
         rootView.attachToDom()
         editor.remove()
-
         rootView.trigger 'command-panel:toggle'
-
         waitsForPromise -> commandPanel.execute('X x/a+/')
 
-        runs ->
-          expect(commandPanel).toBeVisible()
-          expect(commandPanel.previewList).toBeVisible()
-          previewItem = commandPanel.previewList.find("li:contains(dir/a):first")
-          expect(previewItem.find('.path').text()).toBe "dir/a"
-          expect(previewItem.find('.preview').text()).toBe "aaa bbb"
-          expect(previewItem.find('.preview > .match').text()).toBe "aaa"
+      it "displays and focuses the operation preview list", ->
+        expect(commandPanel).toBeVisible()
+        expect(commandPanel.previewList).toBeVisible()
+        expect(commandPanel.previewList).toMatchSelector ':focus'
+        previewItem = commandPanel.previewList.find("li:contains(dir/a):first")
+        expect(previewItem.find('.path').text()).toBe "dir/a"
+        expect(previewItem.find('.preview').text()).toBe "aaa bbb"
+        expect(previewItem.find('.preview > .match').text()).toBe "aaa"
 
-          rootView.trigger 'command-panel:toggle' # ensure we can close panel without problems
+        rootView.trigger 'command-panel:toggle-preview' # ensure we can close panel without problems
+        expect(commandPanel).toBeHidden()
+
+      it "shifts focus between the preview and the mini editor on 'toggle' and 'toggle-preview' events", ->
+        rootView.trigger 'command-panel:toggle'
+        expect(commandPanel.miniEditor.hiddenInput).toMatchSelector ':focus'
+        rootView.trigger 'command-panel:toggle-preview'
+        expect(commandPanel.previewList).toMatchSelector ':focus'
+
+        rootView.trigger 'command-panel:toggle-preview'
+        expect(commandPanel.hasParent()).toBeFalsy()
+
+        rootView.trigger 'command-panel:toggle'
+        rootView.trigger 'command-panel:toggle'
+        expect(commandPanel.hasParent()).toBeFalsy()
+        expect(commandPanel.previewList).toBeHidden()
+
+        # preview should be hidden if we toggle command panel on normally
+        rootView.trigger 'command-panel:toggle'
+        expect(commandPanel.hasParent()).toBeTruthy()
+        expect(commandPanel.previewList).toBeHidden()
+
+        rootView.trigger 'command-panel:toggle-preview'
+        expect(commandPanel.previewList).toBeVisible()
+
+        rootView.trigger 'command-panel:toggle-preview'
+        expect(commandPanel.hasParent()).toBeFalsy()
+
+        # preview should be visible if we toggle-preview the command panel
+        rootView.trigger 'command-panel:toggle-preview'
+        expect(commandPanel.hasParent()).toBeTruthy()
+        expect(commandPanel.previewList).toBeVisible()
 
     describe "if the command is malformed", ->
       it "adds and removes an error class to the command panel and does not close it", ->

src/extensions/command-panel/command-panel.coffee

@@ -46,6 +46,7 @@ class CommandPanel extends View
 
     @on 'command-panel:unfocus', => @rootView.focus()
     @rootView.on 'command-panel:toggle', => @toggle()
+    @rootView.on 'command-panel:toggle-preview', => @togglePreview()
     @rootView.on 'command-panel:execute', => @execute()
     @rootView.on 'command-panel:find-in-file', => @attach("/")
     @rootView.on 'command-panel:find-in-project', => @attach("Xx/")
@@ -65,15 +66,24 @@ class CommandPanel extends View
       @attach() unless @hasParent()
       @miniEditor.focus()
 
+  togglePreview: ->
+    if @previewList.is(':focus')
+      @previewList.hide()
+      @detach()
+      @rootView.focus()
+    else
+      @attach() unless @hasParent()
+      @previewList.show().focus()
+
   attach: (text='') ->
     @rootView.append(this)
-    @previewList.hide()
     @miniEditor.focus()
     @miniEditor.setText(text)
     @miniEditor.setCursorBufferPosition([0, Infinity])
 
   detach: ->
     @rootView.focus()
+    @previewList.hide()
     if @previewedOperations
       operation.destroy() for operation in @previewedOperations
       @previewedOperations = undefined
@@ -98,6 +108,7 @@ class CommandPanel extends View
   populatePreviewList: (operations) ->
     @previewedOperations = operations
     @previewList.populate(operations)
+    @previewList.focus()
 
   navigateBackwardInHistory: ->
     return if @historyIndex == 0

src/extensions/command-panel/keymap.coffee

@@ -1,6 +1,6 @@
 window.keymap.bindKeys '*'
   'ctrl-0': 'command-panel:toggle'
-  'ctrl-meta-0': 'command-panel:toggle-preview'
+  'ctrl-2': 'command-panel:toggle-preview'
   'meta-:': 'command-panel:toggle'
   'meta-F': 'command-panel:find-in-project'
 

src/extensions/command-panel/preview-list.coffee

@@ -3,7 +3,7 @@
 module.exports =
 class PreviewList extends View
   @content: ->
-    @ol class: 'preview-list', ->
+    @ol class: 'preview-list', tabindex: -1, ->
 
   selectedOperationIndex: 0
   operations: null