Extract command panel as an extension

spec/extensions/command-panel-spec.coffee

@@ -1,4 +1,5 @@
 RootView = require 'root-view'
+CommandPanel = require 'command-panel'
 
 describe "CommandPanel", ->
   [rootView, commandPanel] = []
@@ -7,7 +8,7 @@ describe "CommandPanel", ->
     rootView = new RootView
     rootView.open()
     rootView.enableKeymap()
-    commandPanel = rootView.commandPanel
+    commandPanel = rootView.activateExtension(CommandPanel)
 
   describe "when toggle-command-panel is triggered on the root view", ->
     it "toggles the command panel", ->
@@ -43,8 +44,8 @@ describe "CommandPanel", ->
   describe "when command-panel:find-in-file is triggered on an editor", ->
     it "pre-populates command panel's editor with /", ->
       rootView.activeEditor().trigger "command-panel:find-in-file"
-      expect(rootView.commandPanel.parent).not.toBeEmpty()
-      expect(rootView.commandPanel.editor.getText()).toBe "/"
+      expect(commandPanel.parent).not.toBeEmpty()
+      expect(commandPanel.editor.getText()).toBe "/"
 
   describe "when esc is pressed in the command panel", ->
     it "closes the command panel", ->

src/app/root-view.coffee

@@ -8,7 +8,6 @@ Buffer = require 'buffer'
 Editor = require 'editor'
 Project = require 'project'
 VimMode = require 'vim-mode'
-CommandPanel = require 'command-panel'
 Pane = require 'pane'
 PaneColumn = require 'pane-column'
 PaneRow = require 'pane-row'
@@ -31,14 +30,12 @@ class RootView extends View
   extensionStates: null
 
   initialize: ({ pathToOpen }) ->
-    @handleEvents()
-
     @extensions = {}
     @extensionStates = {}
-    @commandPanel = new CommandPanel({rootView: this})
-
-    @setTitle()
     @project = new Project(pathToOpen)
+
+    @handleEvents()
+    @setTitle()
     @open(pathToOpen) if fs.isFile(pathToOpen)
 
   serialize: ->

src/extensions/command-panel.coffee

@@ -5,6 +5,22 @@ Editor = require 'editor'
 
 module.exports =
 class CommandPanel extends View
+  @activate: (rootView, state) ->
+    requireStylesheet 'command-panel.css'
+    if state?
+      @instance = CommandPanel.deserialize(state, rootView)
+    else
+      @instance = new CommandPanel(rootView)
+
+  @serialize: ->
+    text: @instance.editor.getText()
+    visible: @instance.hasParent()
+
+  @deserialize: (state, rootView) ->
+    commandPanel = new CommandPanel(rootView)
+    commandPanel.show(state.text) if state.visible
+    commandPanel
+
   @content: ->
     @div class: 'command-panel', =>
       @div ':', class: 'prompt', outlet: 'prompt'
@@ -14,9 +30,7 @@ class CommandPanel extends View
   history: null
   historyIndex: 0
 
-  initialize: ({@rootView})->
-    requireStylesheet 'command-panel.css'
-
+  initialize: (@rootView)->
     @commandInterpreter = new CommandInterpreter()
     @history = []
 

static/command-panel.css

@@ -1,10 +1,12 @@
 .command-panel {
   position: absolute;
   bottom: 0;
+  width: 100%;
   background: #515151;
-  display: -webkit-box;
   padding: 3px;
   -webkit-transition: background 200ms ease-out;
+
+  display: -webkit-box;
 }
 
 .command-panel.error {
@@ -13,8 +15,6 @@
 
 .command-panel .prompt {
   color: white;
-}
-
-.command-panel .editor {
-  -webkit-box-flex: 1
-}
+  font-weight: bold;
+  padding: .2em;
+}