Move-up / move-down on command panel change the selected operation

spec/extensions/command-panel-spec.coffee

@@ -1,5 +1,6 @@
 RootView = require 'root-view'
 CommandPanel = require 'command-panel'
+_ = require 'underscore'
 
 describe "CommandPanel", ->
   [rootView, editor, buffer, commandPanel] = []
@@ -270,20 +271,43 @@ describe "CommandPanel", ->
       commandPanel.miniEditor.trigger 'move-down'
       expect(commandPanel.miniEditor.getText()).toBe ''
 
-  describe ".execute()", ->
-    it "executes the command and closes the command panel", ->
-      rootView.getActiveEditor().setText("i hate love")
-      rootView.getActiveEditor().getSelection().setBufferRange [[0,0], [0,Infinity]]
-      rootView.trigger 'command-panel:toggle'
-      commandPanel.miniEditor.insertText 's/hate/love/'
-      commandPanel.execute()
-      expect(rootView.getActiveEditor().getText()).toBe "i love love"
-      expect(rootView.find('.command-panel')).not.toExist()
-
   describe "when the preview list is focused", ->
+    previewList = null
+
     beforeEach ->
+      previewList = commandPanel.previewList
       rootView.trigger 'command-panel:toggle'
       waitsForPromise -> commandPanel.execute('X x/a+/')
 
     describe "when move-down and move-up are triggered on the preview list", ->
-      it "selects the next/previous operation", ->
+      it "selects the next/previous operation (if there is one), and scrolls the list if needed", ->
+        rootView.attachToDom()
+        expect(previewList.find('li:eq(0)')).toHaveClass 'selected'
+        expect(previewList.getSelectedOperation()).toBe previewList.getOperations()[0]
+
+        previewList.trigger 'move-up'
+        expect(previewList.find('li:eq(0)')).toHaveClass 'selected'
+        expect(previewList.getSelectedOperation()).toBe previewList.getOperations()[0]
+
+        previewList.trigger 'move-down'
+        expect(previewList.find('li:eq(1)')).toHaveClass 'selected'
+        expect(previewList.getSelectedOperation()).toBe previewList.getOperations()[1]
+
+        previewList.trigger 'move-down'
+        expect(previewList.find('li:eq(2)')).toHaveClass 'selected'
+        expect(previewList.getSelectedOperation()).toBe previewList.getOperations()[2]
+
+        previewList.trigger 'move-up'
+        expect(previewList.find('li:eq(1)')).toHaveClass 'selected'
+        expect(previewList.getSelectedOperation()).toBe previewList.getOperations()[1]
+
+        _.times previewList.getOperations().length, -> previewList.trigger 'move-down'
+
+        expect(previewList.find('li:last')).toHaveClass 'selected'
+        expect(previewList.getSelectedOperation()).toBe _.last(previewList.getOperations())
+
+        expect(previewList.scrollBottom()).toBe previewList.prop('scrollHeight')
+
+        _.times previewList.getOperations().length, -> previewList.trigger 'move-up'
+
+        console.log previewList.find('li:first').position().top

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

@@ -8,6 +8,10 @@ class PreviewList extends View
   selectedOperationIndex: 0
   operations: null
 
+  initialize: ->
+    @on 'move-down', => @selectNextOperation()
+    @on 'move-up', => @selectPreviousOperation()
+
   hasOperations: -> @operations?
 
   populate: (@operations) ->
@@ -26,9 +30,32 @@ class PreviewList extends View
 
     @show()
 
-  setSelectedOperationIndex: (index) ->
-    @children(".selected").removeClass('selected')
-    @children("li:eq(#{index})").addClass('selected')
+  selectNextOperation: ->
+    @setSelectedOperationIndex(@selectedOperationIndex + 1)
 
-  #getSelectedOperation: ->
-    #@operations[@selectedOperationIndex]
+  selectPreviousOperation: ->
+    @setSelectedOperationIndex(@selectedOperationIndex - 1)
+
+  setSelectedOperationIndex: (index) ->
+    index = Math.max(0, index)
+    index = Math.min(@operations.length - 1, index)
+    @children(".selected").removeClass('selected')
+    element = @children("li:eq(#{index})")
+    element.addClass('selected')
+    @scrollToElement(element)
+    @selectedOperationIndex = index
+
+  getOperations: ->
+    new Array(@operations...)
+
+  getSelectedOperation: ->
+    @operations[@selectedOperationIndex]
+
+  scrollToElement: (element) ->
+    top = @scrollTop() + element.position().top
+    bottom = top + element.outerHeight()
+
+    if bottom > @scrollBottom()
+      @scrollBottom(bottom)
+    if top < @scrollTop()
+      @scrollTop(top)

static/command-panel.css

@@ -9,10 +9,11 @@
 .command-panel .preview-list {
   max-height: 300px;
   overflow: auto;
-  padding-bottom: 3px;
+  margin-bottom: 3px;
+  position: relative;
 }
 
-.command-panel .preview-list .path{
+.command-panel .preview-list .path {
   padding-left: 3px;
   color: #00ffff;
 }
@@ -22,11 +23,15 @@
   color: #f6f3e8;
 }
 
-.command-panel .preview-list .preview .match{
+.command-panel .preview-list .preview .match {
   background-color: #8E8A8A;
   padding: 1px;
 }
 
+.command-panel .preview-list li.selected {
+  background-color: green;
+}
+
 .command-panel .prompt-and-editor {
   display: -webkit-box;
 }
@@ -36,7 +41,3 @@
   font-weight: bold;
   padding: .2em;
 }
-
-.command-panel .preview-list li.selected {
-  background-color: green;
-}