From 734a79b7ec9f449669e1871871fd0289397f9b60 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Tue, 14 Oct 2014 17:45:13 -0700
Subject: [PATCH 01/21] Add initial panel API.

It can only add things to the left right now.
---
 spec/workspace-spec.coffee      | 12 +++++++++++
 spec/workspace-view-spec.coffee | 37 +++++++++++++++++++++++++++++++++
 src/panel-element.coffee        | 17 +++++++++++++++
 src/panel.coffee                | 26 +++++++++++++++++++++++
 src/workspace-element.coffee    |  9 ++++++++
 src/workspace.coffee            | 18 ++++++++++++++++
 6 files changed, 119 insertions(+)
 create mode 100644 src/panel-element.coffee
 create mode 100644 src/panel.coffee

diff --git a/spec/workspace-spec.coffee b/spec/workspace-spec.coffee
index 5230fe966..b3a8bac1a 100644
--- a/spec/workspace-spec.coffee
+++ b/spec/workspace-spec.coffee
@@ -456,3 +456,15 @@ describe "Workspace", ->
 
       expect(item2.isModified()).toBe false
       expect(atom.setDocumentEdited).toHaveBeenCalledWith(false)
+
+  describe "adding panels", ->
+    class TestPanel
+      constructior: ->
+
+    describe '::addLeftPanel(model)', ->
+      it 'emits an onDidAddPanel event and returns a panel', ->
+        atom.workspace.onDidAddPanel addPanelSpy = jasmine.createSpy()
+        panel = atom.workspace.addLeftPanel(item: new TestPanel())
+
+        expect(panel).toBeDefined()
+        expect(addPanelSpy).toHaveBeenCalledWith(panel)
diff --git a/spec/workspace-view-spec.coffee b/spec/workspace-view-spec.coffee
index fd8750910..8b648d3b4 100644
--- a/spec/workspace-view-spec.coffee
+++ b/spec/workspace-view-spec.coffee
@@ -270,3 +270,40 @@ describe "WorkspaceView", ->
       atom.config.set('editor.lineHeight', '30px')
       expect(getComputedStyle(editorNode).lineHeight).toBe atom.config.get('editor.lineHeight')
       expect(editor.getLineHeightInPixels()).not.toBe initialLineHeight
+
+  describe 'adding panels', ->
+    workspaceElement = null
+    class TestPanel
+      constructior: ->
+
+    class TestPanelElement extends HTMLElement
+      createdCallback: ->
+        @classList.add('test-root')
+      setModel: (@model) ->
+    TestPanelElement = document.registerElement 'atom-test-element', prototype: TestPanelElement.prototype
+
+    beforeEach ->
+      workspaceElement = atom.workspace.getView(atom.workspace)
+      atom.workspace.addViewProvider
+        modelConstructor: TestPanel
+        viewConstructor: TestPanelElement
+
+    describe 'Workspace::addLeftPanel(panel)', ->
+      it 'adds an atom-panel and removes it when Panel::destroy() is called', ->
+        panelNode = workspaceElement.querySelector('atom-panel')
+        expect(panelNode).toBe null
+
+        panel = atom.workspace.addLeftPanel(item: new TestPanel())
+
+        panelNode = workspaceElement.querySelector('atom-panel')
+        expect(panelNode instanceof HTMLElement).toBe true
+        expect(panelNode.childNodes[0]).toHaveClass 'test-root'
+
+        panel.destroy()
+        panelNode = workspaceElement.querySelector('atom-panel')
+        expect(panelNode).toBe null
+
+      it 'adds the panel before the vertical axis', ->
+        panel = atom.workspace.addLeftPanel(item: new TestPanel())
+        panelNode = workspaceElement.querySelector('atom-panel')
+        expect(panelNode.nextSibling).toBe workspaceElement.verticalAxis
diff --git a/src/panel-element.coffee b/src/panel-element.coffee
new file mode 100644
index 000000000..bf5f086ea
--- /dev/null
+++ b/src/panel-element.coffee
@@ -0,0 +1,17 @@
+{CompositeDisposable} = require 'event-kit'
+
+class PanelElement extends HTMLElement
+  createdCallback: ->
+    @subscriptions = new CompositeDisposable
+
+  getModel: -> @model
+
+  setModel: (@model) ->
+    @appendChild(@model.getView())
+    @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
+
+  destroyed: ->
+    @subscriptions.dispose()
+    @parentNode?.removeChild(this)
+
+module.exports = PanelElement = document.registerElement 'atom-panel', prototype: PanelElement.prototype
diff --git a/src/panel.coffee b/src/panel.coffee
new file mode 100644
index 000000000..01fb16b6b
--- /dev/null
+++ b/src/panel.coffee
@@ -0,0 +1,26 @@
+{Emitter} = require 'event-kit'
+
+# Public:
+module.exports =
+class Panel
+  constructor: ({@viewRegistry, @item, @orientation}) ->
+    @emitter = new Emitter
+
+  destroy: ->
+    @emitter.emit 'did-destroy', this
+
+  getView: -> @viewRegistry.getView(@item)
+
+  getOrientation: -> @orientation
+
+  ###
+  Section: Event Subscription
+  ###
+
+  # Public: Invoke the given callback when the pane is destroyed.
+  #
+  # * `callback` {Function} to be called when the pane is destroyed.
+  #
+  # Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
+  onDidDestroy: (callback) ->
+    @emitter.on 'did-destroy', callback
diff --git a/src/workspace-element.coffee b/src/workspace-element.coffee
index 686674cde..d9219b664 100644
--- a/src/workspace-element.coffee
+++ b/src/workspace-element.coffee
@@ -65,6 +65,8 @@ class WorkspaceElement extends HTMLElement
     window.addEventListener 'focus', handleWindowFocus
     @subscriptions.add(new Disposable -> window.removeEventListener 'focus', handleWindowFocus)
 
+    @subscriptions.add @model.onDidAddPanel(@panelAdded.bind(this))
+
     @__spacePenView.setModel(@model)
 
   setTextEditorFontSize: (fontSize) ->
@@ -90,6 +92,13 @@ class WorkspaceElement extends HTMLElement
 
   focusPaneViewOnRight: -> @paneContainer.focusPaneViewOnRight()
 
+  panelAdded: (panel) ->
+    panelView = @model.getView(panel)
+
+    switch panel.getOrientation()
+      when 'left'
+        @horizontalAxis.insertBefore(panelView, @verticalAxis)
+
 atom.commands.add 'atom-workspace',
   'window:increase-font-size': -> @getModel().increaseFontSize()
   'window:decrease-font-size': -> @getModel().decreaseFontSize()
diff --git a/src/workspace.coffee b/src/workspace.coffee
index 7c072ff77..73d07868f 100644
--- a/src/workspace.coffee
+++ b/src/workspace.coffee
@@ -10,6 +10,8 @@ Grim = require 'grim'
 TextEditor = require './text-editor'
 PaneContainer = require './pane-container'
 Pane = require './pane'
+Panel = require './panel'
+PanelElement = require './panel-element'
 ViewRegistry = require './view-registry'
 WorkspaceElement = require './workspace-element'
 
@@ -62,6 +64,10 @@ class Workspace extends Model
       modelConstructor: Workspace
       viewConstructor: WorkspaceElement
 
+    @addViewProvider
+      modelConstructor: Panel
+      viewConstructor: PanelElement
+
   # Called by the Serializable mixin during deserialization
   deserializeParams: (params) ->
     for packageName in params.packagesWithActiveGrammars ? []
@@ -277,6 +283,9 @@ class Workspace extends Model
     @onDidAddPaneItem ({item, pane, index}) ->
       callback({textEditor: item, pane, index}) if item instanceof TextEditor
 
+  onDidAddPanel: (callback) ->
+    @emitter.on 'did-add-panel', callback
+
   eachEditor: (callback) ->
     deprecate("Use Workspace::observeTextEditors instead")
 
@@ -659,3 +668,12 @@ class Workspace extends Model
   # added provider.
   addViewProvider: (providerSpec) ->
     @viewRegistry.addViewProvider(providerSpec)
+
+  ###
+  Section: Panels
+  ###
+
+  addLeftPanel: (options) ->
+    panel = new Panel(_.extend(options, {@viewRegistry, orientation: 'left'}))
+    @emitter.emit('did-add-panel', panel)
+    panel

From 5c2e55861c4820a99494de9e95a356c116eefe53 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 15:33:28 -0700
Subject: [PATCH 02/21] Add panel containers

---
 spec/panel-container-element-spec.coffee | 58 ++++++++++++++++++++++++
 spec/panel-container-spec.coffee         | 42 +++++++++++++++++
 src/panel-container-element.coffee       | 28 ++++++++++++
 src/panel-container.coffee               | 48 ++++++++++++++++++++
 4 files changed, 176 insertions(+)
 create mode 100644 spec/panel-container-element-spec.coffee
 create mode 100644 spec/panel-container-spec.coffee
 create mode 100644 src/panel-container-element.coffee
 create mode 100644 src/panel-container.coffee

diff --git a/spec/panel-container-element-spec.coffee b/spec/panel-container-element-spec.coffee
new file mode 100644
index 000000000..f4cb754f5
--- /dev/null
+++ b/spec/panel-container-element-spec.coffee
@@ -0,0 +1,58 @@
+ViewRegistry = require '../src/view-registry'
+Panel = require '../src/panel'
+PanelElement = require '../src/panel-element'
+PanelContainer = require '../src/panel-container'
+PanelContainerElement = require '../src/panel-container-element'
+
+describe "PanelContainerElement", ->
+  [jasmineContent, element, container, viewRegistry] = []
+
+  class TestPanelItem
+    constructior: ->
+
+  class TestPanelItemElement extends HTMLElement
+    createdCallback: ->
+      @classList.add('test-root')
+    setModel: (@model) ->
+  TestPanelItemElement = document.registerElement 'atom-test-item-element', prototype: TestPanelItemElement.prototype
+
+  beforeEach ->
+    jasmineContent = document.body.querySelector('#jasmine-content')
+
+    viewRegistry = new ViewRegistry
+    viewRegistry.addViewProvider
+      modelConstructor: Panel
+      viewConstructor: PanelElement
+    viewRegistry.addViewProvider
+      modelConstructor: PanelContainer
+      viewConstructor: PanelContainerElement
+    viewRegistry.addViewProvider
+      modelConstructor: TestPanelItem
+      viewConstructor: TestPanelItemElement
+
+    container = new PanelContainer({viewRegistry})
+    element = container.getView()
+    jasmineContent.appendChild(element)
+
+  it 'removes the element when the container is destroyed', ->
+    expect(element.parentNode).toBe jasmineContent
+    container.destroy()
+    expect(element.parentNode).not.toBe jasmineContent
+
+  describe "adding and removing panels", ->
+    it "adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed", ->
+      expect(element.childNodes.length).toBe 0
+
+      panel1 = new Panel({viewRegistry, item: new TestPanelItem(), orientation: 'left'})
+      container.addPanel(panel1)
+      expect(element.childNodes.length).toBe 1
+
+      panel2 = new Panel({viewRegistry, item: new TestPanelItem(), orientation: 'left'})
+      container.addPanel(panel2)
+      expect(element.childNodes.length).toBe 2
+
+      panel1.destroy()
+      expect(element.childNodes.length).toBe 1
+
+      panel2.destroy()
+      expect(element.childNodes.length).toBe 0
diff --git a/spec/panel-container-spec.coffee b/spec/panel-container-spec.coffee
new file mode 100644
index 000000000..8afc7a439
--- /dev/null
+++ b/spec/panel-container-spec.coffee
@@ -0,0 +1,42 @@
+ViewRegistry = require '../src/view-registry'
+Panel = require '../src/panel'
+PanelContainer = require '../src/panel-container'
+
+describe "PanelContainer", ->
+  [container] = []
+
+  class TestPanelItem
+    constructior: ->
+
+  beforeEach ->
+    viewRegistry = new ViewRegistry
+    container = new PanelContainer({viewRegistry})
+
+  describe "::addPanel(panel)", ->
+    it 'emits an onDidAddPanel event with the index the panel was inserted at', ->
+      container.onDidAddPanel addPanelSpy = jasmine.createSpy()
+
+      panel1 = new Panel(item: new TestPanelItem(), orientation: 'left')
+      container.addPanel(panel1)
+      expect(addPanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0})
+
+      panel2 = new Panel(item: new TestPanelItem(), orientation: 'left')
+      container.addPanel(panel2)
+      expect(addPanelSpy).toHaveBeenCalledWith({panel: panel2, index: 1})
+
+  describe "when a panel is destroyed", ->
+    it 'emits an onDidRemovePanel event with the index of the removed item', ->
+      container.onDidRemovePanel removePanelSpy = jasmine.createSpy()
+
+      panel1 = new Panel(item: new TestPanelItem(), orientation: 'left')
+      container.addPanel(panel1)
+      panel2 = new Panel(item: new TestPanelItem(), orientation: 'left')
+      container.addPanel(panel2)
+
+      expect(removePanelSpy).not.toHaveBeenCalled()
+
+      panel2.destroy()
+      expect(removePanelSpy).toHaveBeenCalledWith({panel: panel2, index: 1})
+
+      panel1.destroy()
+      expect(removePanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0})
diff --git a/src/panel-container-element.coffee b/src/panel-container-element.coffee
new file mode 100644
index 000000000..dca4adce3
--- /dev/null
+++ b/src/panel-container-element.coffee
@@ -0,0 +1,28 @@
+{CompositeDisposable} = require 'event-kit'
+
+class PanelContainerElement extends HTMLElement
+  createdCallback: ->
+    @subscriptions = new CompositeDisposable
+
+  getModel: -> @model
+
+  setModel: (@model) ->
+    @subscriptions.add @model.onDidAddPanel(@panelAdded.bind(this))
+    @subscriptions.add @model.onDidRemovePanel(@panelRemoved.bind(this))
+    @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
+
+  panelAdded: ({panel, index}) ->
+    if index >= @childNodes.length
+      @appendChild(panel.getView())
+    else
+      referenceItem = @childNodes[index + 1]
+      @insertBefore(panel.getView(), referenceItem)
+
+  panelRemoved: ({panel, index}) ->
+    @removeChild(@childNodes[index])
+
+  destroyed: ->
+    @subscriptions.dispose()
+    @parentNode?.removeChild(this)
+
+module.exports = PanelContainerElement = document.registerElement 'atom-panel-container', prototype: PanelContainerElement.prototype
diff --git a/src/panel-container.coffee b/src/panel-container.coffee
new file mode 100644
index 000000000..3ea807769
--- /dev/null
+++ b/src/panel-container.coffee
@@ -0,0 +1,48 @@
+{Emitter, CompositeDisposable} = require 'event-kit'
+
+# Public:
+module.exports =
+class PanelContainer
+  constructor: ({@viewRegistry}) ->
+    @emitter = new Emitter
+    @subscriptions = new CompositeDisposable
+    @panels = []
+
+  destroy: ->
+    pane.destroy() for pane in @getPanels()
+    @subscriptions.dispose()
+    @emitter.emit 'did-destroy', this
+    @emitter.dispose()
+
+  ###
+  Section: Event Subscription
+  ###
+
+  onDidAddPanel: (callback) ->
+    @emitter.on 'did-add-panel', callback
+
+  onDidRemovePanel: (callback) ->
+    @emitter.on 'did-remove-panel', callback
+
+  onDidDestroy: (callback) ->
+    @emitter.on 'did-destroy', callback
+
+  ###
+  Section: Panels
+  ###
+
+  getView: -> @viewRegistry.getView(this)
+
+  getPanels: -> @panels
+
+  addPanel: (panel) ->
+    @subscriptions.add panel.onDidDestroy(@panelDestoryed.bind(this))
+    index = @panels.length
+    @panels.push(panel)
+    @emitter.emit 'did-add-panel', {panel, index}
+
+  panelDestoryed: (panel) ->
+    index = @panels.indexOf(panel)
+    if index > -1
+      @panels.splice(index, 1)
+      @emitter.emit 'did-remove-panel', {panel, index}

From 83e5873f3beab4c28188ab8104c0cc03fc6d9968 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 16:16:49 -0700
Subject: [PATCH 03/21] Panel containers have the orientation

---
 spec/panel-container-element-spec.coffee | 5 ++++-
 src/panel-container-element.coffee       | 2 ++
 src/panel-container.coffee               | 4 +++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/spec/panel-container-element-spec.coffee b/spec/panel-container-element-spec.coffee
index f4cb754f5..89dd64065 100644
--- a/spec/panel-container-element-spec.coffee
+++ b/spec/panel-container-element-spec.coffee
@@ -30,10 +30,13 @@ describe "PanelContainerElement", ->
       modelConstructor: TestPanelItem
       viewConstructor: TestPanelItemElement
 
-    container = new PanelContainer({viewRegistry})
+    container = new PanelContainer({viewRegistry, orientation: 'left'})
     element = container.getView()
     jasmineContent.appendChild(element)
 
+  it 'has an oritation attribute with value from the model', ->
+    expect(element.getAttribute('orientation')).toBe 'left'
+
   it 'removes the element when the container is destroyed', ->
     expect(element.parentNode).toBe jasmineContent
     container.destroy()
diff --git a/src/panel-container-element.coffee b/src/panel-container-element.coffee
index dca4adce3..b8d8123d3 100644
--- a/src/panel-container-element.coffee
+++ b/src/panel-container-element.coffee
@@ -11,6 +11,8 @@ class PanelContainerElement extends HTMLElement
     @subscriptions.add @model.onDidRemovePanel(@panelRemoved.bind(this))
     @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
 
+    @setAttribute('orientation', @model.getOrientation())
+
   panelAdded: ({panel, index}) ->
     if index >= @childNodes.length
       @appendChild(panel.getView())
diff --git a/src/panel-container.coffee b/src/panel-container.coffee
index 3ea807769..daa4235d4 100644
--- a/src/panel-container.coffee
+++ b/src/panel-container.coffee
@@ -3,7 +3,7 @@
 # Public:
 module.exports =
 class PanelContainer
-  constructor: ({@viewRegistry}) ->
+  constructor: ({@viewRegistry, @orientation}) ->
     @emitter = new Emitter
     @subscriptions = new CompositeDisposable
     @panels = []
@@ -33,6 +33,8 @@ class PanelContainer
 
   getView: -> @viewRegistry.getView(this)
 
+  getOrientation: -> @orientation
+
   getPanels: -> @panels
 
   addPanel: (panel) ->

From 299710f08a770bece5cebdaa11a3b85ff4de352d Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 16:17:44 -0700
Subject: [PATCH 04/21] Integrate the pane containers into the workspace

---
 spec/workspace-spec.coffee      | 30 +++++++++++++++++++++---
 spec/workspace-view-spec.coffee | 41 ++++++++-------------------------
 src/panel-container.coffee      |  1 +
 src/panel.coffee                |  4 +---
 src/workspace-element.coffee    | 19 ++++++++-------
 src/workspace.coffee            | 33 +++++++++++++++++++++-----
 6 files changed, 77 insertions(+), 51 deletions(-)

diff --git a/spec/workspace-spec.coffee b/spec/workspace-spec.coffee
index b3a8bac1a..e844acecd 100644
--- a/spec/workspace-spec.coffee
+++ b/spec/workspace-spec.coffee
@@ -462,9 +462,33 @@ describe "Workspace", ->
       constructior: ->
 
     describe '::addLeftPanel(model)', ->
-      it 'emits an onDidAddPanel event and returns a panel', ->
-        atom.workspace.onDidAddPanel addPanelSpy = jasmine.createSpy()
+      it 'adds a panel to the correct panel container', ->
+        atom.workspace.panelContainers.left.onDidAddPanel addPanelSpy = jasmine.createSpy()
         panel = atom.workspace.addLeftPanel(item: new TestPanel())
 
         expect(panel).toBeDefined()
-        expect(addPanelSpy).toHaveBeenCalledWith(panel)
+        expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
+
+    describe '::addRightPanel(model)', ->
+      it 'adds a panel to the correct panel container', ->
+        atom.workspace.panelContainers.right.onDidAddPanel addPanelSpy = jasmine.createSpy()
+        panel = atom.workspace.addRightPanel(item: new TestPanel())
+
+        expect(panel).toBeDefined()
+        expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
+
+    describe '::addTopPanel(model)', ->
+      it 'adds a panel to the correct panel container', ->
+        atom.workspace.panelContainers.top.onDidAddPanel addPanelSpy = jasmine.createSpy()
+        panel = atom.workspace.addTopPanel(item: new TestPanel())
+
+        expect(panel).toBeDefined()
+        expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
+
+    describe '::addBottomPanel(model)', ->
+      it 'adds a panel to the correct panel container', ->
+        atom.workspace.panelContainers.bottom.onDidAddPanel addPanelSpy = jasmine.createSpy()
+        panel = atom.workspace.addBottomPanel(item: new TestPanel())
+
+        expect(panel).toBeDefined()
+        expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
diff --git a/spec/workspace-view-spec.coffee b/spec/workspace-view-spec.coffee
index 8b648d3b4..4e3f40c52 100644
--- a/spec/workspace-view-spec.coffee
+++ b/spec/workspace-view-spec.coffee
@@ -271,39 +271,18 @@ describe "WorkspaceView", ->
       expect(getComputedStyle(editorNode).lineHeight).toBe atom.config.get('editor.lineHeight')
       expect(editor.getLineHeightInPixels()).not.toBe initialLineHeight
 
-  describe 'adding panels', ->
+  describe 'panel containers', ->
     workspaceElement = null
-    class TestPanel
-      constructior: ->
-
-    class TestPanelElement extends HTMLElement
-      createdCallback: ->
-        @classList.add('test-root')
-      setModel: (@model) ->
-    TestPanelElement = document.registerElement 'atom-test-element', prototype: TestPanelElement.prototype
-
     beforeEach ->
       workspaceElement = atom.workspace.getView(atom.workspace)
-      atom.workspace.addViewProvider
-        modelConstructor: TestPanel
-        viewConstructor: TestPanelElement
 
-    describe 'Workspace::addLeftPanel(panel)', ->
-      it 'adds an atom-panel and removes it when Panel::destroy() is called', ->
-        panelNode = workspaceElement.querySelector('atom-panel')
-        expect(panelNode).toBe null
+    it 'inserts panel container elements in the correct places in the DOM', ->
+      leftContainer = workspaceElement.querySelector('atom-panel-container[orientation="left"]')
+      rightContainer = workspaceElement.querySelector('atom-panel-container[orientation="right"]')
+      expect(leftContainer.nextSibling).toBe workspaceElement.verticalAxis
+      expect(rightContainer.previousSibling).toBe workspaceElement.verticalAxis
 
-        panel = atom.workspace.addLeftPanel(item: new TestPanel())
-
-        panelNode = workspaceElement.querySelector('atom-panel')
-        expect(panelNode instanceof HTMLElement).toBe true
-        expect(panelNode.childNodes[0]).toHaveClass 'test-root'
-
-        panel.destroy()
-        panelNode = workspaceElement.querySelector('atom-panel')
-        expect(panelNode).toBe null
-
-      it 'adds the panel before the vertical axis', ->
-        panel = atom.workspace.addLeftPanel(item: new TestPanel())
-        panelNode = workspaceElement.querySelector('atom-panel')
-        expect(panelNode.nextSibling).toBe workspaceElement.verticalAxis
+      topContainer = workspaceElement.querySelector('atom-panel-container[orientation="top"]')
+      bottomContainer = workspaceElement.querySelector('atom-panel-container[orientation="bottom"]')
+      expect(topContainer.nextSibling).toBe workspaceElement.paneContainer
+      expect(bottomContainer.previousSibling).toBe workspaceElement.paneContainer
diff --git a/src/panel-container.coffee b/src/panel-container.coffee
index daa4235d4..ca23dcfb8 100644
--- a/src/panel-container.coffee
+++ b/src/panel-container.coffee
@@ -42,6 +42,7 @@ class PanelContainer
     index = @panels.length
     @panels.push(panel)
     @emitter.emit 'did-add-panel', {panel, index}
+    panel
 
   panelDestoryed: (panel) ->
     index = @panels.indexOf(panel)
diff --git a/src/panel.coffee b/src/panel.coffee
index 01fb16b6b..3ae8778bd 100644
--- a/src/panel.coffee
+++ b/src/panel.coffee
@@ -3,7 +3,7 @@
 # Public:
 module.exports =
 class Panel
-  constructor: ({@viewRegistry, @item, @orientation}) ->
+  constructor: ({@viewRegistry, @item}) ->
     @emitter = new Emitter
 
   destroy: ->
@@ -11,8 +11,6 @@ class Panel
 
   getView: -> @viewRegistry.getView(@item)
 
-  getOrientation: -> @orientation
-
   ###
   Section: Event Subscription
   ###
diff --git a/src/workspace-element.coffee b/src/workspace-element.coffee
index d9219b664..158e86bd3 100644
--- a/src/workspace-element.coffee
+++ b/src/workspace-element.coffee
@@ -65,7 +65,17 @@ class WorkspaceElement extends HTMLElement
     window.addEventListener 'focus', handleWindowFocus
     @subscriptions.add(new Disposable -> window.removeEventListener 'focus', handleWindowFocus)
 
-    @subscriptions.add @model.onDidAddPanel(@panelAdded.bind(this))
+    @panelContainers =
+      top: @model.panelContainers.top.getView()
+      left: @model.panelContainers.left.getView()
+      right: @model.panelContainers.right.getView()
+      bottom: @model.panelContainers.bottom.getView()
+
+    @horizontalAxis.insertBefore(@panelContainers.left, @verticalAxis)
+    @horizontalAxis.appendChild(@panelContainers.right)
+
+    @verticalAxis.insertBefore(@panelContainers.top, @paneContainer)
+    @verticalAxis.appendChild(@panelContainers.bottom)
 
     @__spacePenView.setModel(@model)
 
@@ -92,13 +102,6 @@ class WorkspaceElement extends HTMLElement
 
   focusPaneViewOnRight: -> @paneContainer.focusPaneViewOnRight()
 
-  panelAdded: (panel) ->
-    panelView = @model.getView(panel)
-
-    switch panel.getOrientation()
-      when 'left'
-        @horizontalAxis.insertBefore(panelView, @verticalAxis)
-
 atom.commands.add 'atom-workspace',
   'window:increase-font-size': -> @getModel().increaseFontSize()
   'window:decrease-font-size': -> @getModel().decreaseFontSize()
diff --git a/src/workspace.coffee b/src/workspace.coffee
index 73d07868f..2d6f11909 100644
--- a/src/workspace.coffee
+++ b/src/workspace.coffee
@@ -12,6 +12,8 @@ PaneContainer = require './pane-container'
 Pane = require './pane'
 Panel = require './panel'
 PanelElement = require './panel-element'
+PanelContainer = require './panel-container'
+PanelContainerElement = require './panel-container-element'
 ViewRegistry = require './view-registry'
 WorkspaceElement = require './workspace-element'
 
@@ -47,6 +49,12 @@ class Workspace extends Model
     @paneContainer ?= new PaneContainer({@viewRegistry})
     @paneContainer.onDidDestroyPaneItem(@onPaneItemDestroyed)
 
+    @panelContainers =
+      top: new PanelContainer({@viewRegistry, orientation: 'top'})
+      left: new PanelContainer({@viewRegistry, orientation: 'left'})
+      right: new PanelContainer({@viewRegistry, orientation: 'right'})
+      bottom: new PanelContainer({@viewRegistry, orientation: 'bottom'})
+
     @subscribeToActiveItem()
 
     @addOpener (filePath) =>
@@ -64,6 +72,10 @@ class Workspace extends Model
       modelConstructor: Workspace
       viewConstructor: WorkspaceElement
 
+    @addViewProvider
+      modelConstructor: PanelContainer
+      viewConstructor: PanelContainerElement
+
     @addViewProvider
       modelConstructor: Panel
       viewConstructor: PanelElement
@@ -283,9 +295,6 @@ class Workspace extends Model
     @onDidAddPaneItem ({item, pane, index}) ->
       callback({textEditor: item, pane, index}) if item instanceof TextEditor
 
-  onDidAddPanel: (callback) ->
-    @emitter.on 'did-add-panel', callback
-
   eachEditor: (callback) ->
     deprecate("Use Workspace::observeTextEditors instead")
 
@@ -673,7 +682,19 @@ class Workspace extends Model
   Section: Panels
   ###
 
+  addTopPanel: (options) ->
+    @addPanel('top', options)
+
+  addBottomPanel: (options) ->
+    @addPanel('bottom', options)
+
   addLeftPanel: (options) ->
-    panel = new Panel(_.extend(options, {@viewRegistry, orientation: 'left'}))
-    @emitter.emit('did-add-panel', panel)
-    panel
+    @addPanel('left', options)
+
+  addRightPanel: (options) ->
+    @addPanel('right', options)
+
+  addPanel: (orientation, options) ->
+    options ?= {}
+    options.viewRegistry = @viewRegistry
+    @panelContainers[orientation].addPanel(new Panel(options))

From 52c05eade771a779164a4ed0906a2f0b427b7f10 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 16:48:56 -0700
Subject: [PATCH 05/21] Render proper atom-panels as children of containers

---
 spec/panel-container-element-spec.coffee | 2 ++
 src/panel-element.coffee                 | 2 +-
 src/panel.coffee                         | 4 +++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/spec/panel-container-element-spec.coffee b/spec/panel-container-element-spec.coffee
index 89dd64065..8279c9e19 100644
--- a/spec/panel-container-element-spec.coffee
+++ b/spec/panel-container-element-spec.coffee
@@ -50,6 +50,8 @@ describe "PanelContainerElement", ->
       container.addPanel(panel1)
       expect(element.childNodes.length).toBe 1
 
+      expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
+
       panel2 = new Panel({viewRegistry, item: new TestPanelItem(), orientation: 'left'})
       container.addPanel(panel2)
       expect(element.childNodes.length).toBe 2
diff --git a/src/panel-element.coffee b/src/panel-element.coffee
index bf5f086ea..3fee9da0a 100644
--- a/src/panel-element.coffee
+++ b/src/panel-element.coffee
@@ -7,7 +7,7 @@ class PanelElement extends HTMLElement
   getModel: -> @model
 
   setModel: (@model) ->
-    @appendChild(@model.getView())
+    @appendChild(@model.getItemView())
     @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
 
   destroyed: ->
diff --git a/src/panel.coffee b/src/panel.coffee
index 3ae8778bd..dc5e18939 100644
--- a/src/panel.coffee
+++ b/src/panel.coffee
@@ -9,7 +9,9 @@ class Panel
   destroy: ->
     @emitter.emit 'did-destroy', this
 
-  getView: -> @viewRegistry.getView(@item)
+  getView: -> @viewRegistry.getView(this)
+
+  getItemView: -> @viewRegistry.getView(@item)
 
   ###
   Section: Event Subscription

From 99aedbab8972bfce2268ab1f7b6d083d2a658784 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 16:49:18 -0700
Subject: [PATCH 06/21] Panel container probably not public

---
 src/panel-container.coffee | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/panel-container.coffee b/src/panel-container.coffee
index ca23dcfb8..5c3ecebf8 100644
--- a/src/panel-container.coffee
+++ b/src/panel-container.coffee
@@ -1,6 +1,5 @@
 {Emitter, CompositeDisposable} = require 'event-kit'
 
-# Public:
 module.exports =
 class PanelContainer
   constructor: ({@viewRegistry, @orientation}) ->

From 4ca630a7daac60d8226052537b2216a21d783f4b Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 16:54:08 -0700
Subject: [PATCH 07/21] orientation -> location

---
 spec/panel-container-element-spec.coffee |  8 ++++----
 spec/panel-container-spec.coffee         |  8 ++++----
 spec/workspace-view-spec.coffee          |  8 ++++----
 src/panel-container-element.coffee       |  2 +-
 src/panel-container.coffee               |  4 ++--
 src/workspace.coffee                     | 12 ++++++------
 6 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/spec/panel-container-element-spec.coffee b/spec/panel-container-element-spec.coffee
index 8279c9e19..45317a676 100644
--- a/spec/panel-container-element-spec.coffee
+++ b/spec/panel-container-element-spec.coffee
@@ -30,12 +30,12 @@ describe "PanelContainerElement", ->
       modelConstructor: TestPanelItem
       viewConstructor: TestPanelItemElement
 
-    container = new PanelContainer({viewRegistry, orientation: 'left'})
+    container = new PanelContainer({viewRegistry, location: 'left'})
     element = container.getView()
     jasmineContent.appendChild(element)
 
   it 'has an oritation attribute with value from the model', ->
-    expect(element.getAttribute('orientation')).toBe 'left'
+    expect(element.getAttribute('location')).toBe 'left'
 
   it 'removes the element when the container is destroyed', ->
     expect(element.parentNode).toBe jasmineContent
@@ -46,13 +46,13 @@ describe "PanelContainerElement", ->
     it "adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed", ->
       expect(element.childNodes.length).toBe 0
 
-      panel1 = new Panel({viewRegistry, item: new TestPanelItem(), orientation: 'left'})
+      panel1 = new Panel({viewRegistry, item: new TestPanelItem(), location: 'left'})
       container.addPanel(panel1)
       expect(element.childNodes.length).toBe 1
 
       expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
 
-      panel2 = new Panel({viewRegistry, item: new TestPanelItem(), orientation: 'left'})
+      panel2 = new Panel({viewRegistry, item: new TestPanelItem(), location: 'left'})
       container.addPanel(panel2)
       expect(element.childNodes.length).toBe 2
 
diff --git a/spec/panel-container-spec.coffee b/spec/panel-container-spec.coffee
index 8afc7a439..305036a03 100644
--- a/spec/panel-container-spec.coffee
+++ b/spec/panel-container-spec.coffee
@@ -16,11 +16,11 @@ describe "PanelContainer", ->
     it 'emits an onDidAddPanel event with the index the panel was inserted at', ->
       container.onDidAddPanel addPanelSpy = jasmine.createSpy()
 
-      panel1 = new Panel(item: new TestPanelItem(), orientation: 'left')
+      panel1 = new Panel(item: new TestPanelItem(), location: 'left')
       container.addPanel(panel1)
       expect(addPanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0})
 
-      panel2 = new Panel(item: new TestPanelItem(), orientation: 'left')
+      panel2 = new Panel(item: new TestPanelItem(), location: 'left')
       container.addPanel(panel2)
       expect(addPanelSpy).toHaveBeenCalledWith({panel: panel2, index: 1})
 
@@ -28,9 +28,9 @@ describe "PanelContainer", ->
     it 'emits an onDidRemovePanel event with the index of the removed item', ->
       container.onDidRemovePanel removePanelSpy = jasmine.createSpy()
 
-      panel1 = new Panel(item: new TestPanelItem(), orientation: 'left')
+      panel1 = new Panel(item: new TestPanelItem(), location: 'left')
       container.addPanel(panel1)
-      panel2 = new Panel(item: new TestPanelItem(), orientation: 'left')
+      panel2 = new Panel(item: new TestPanelItem(), location: 'left')
       container.addPanel(panel2)
 
       expect(removePanelSpy).not.toHaveBeenCalled()
diff --git a/spec/workspace-view-spec.coffee b/spec/workspace-view-spec.coffee
index 4e3f40c52..d37281cc0 100644
--- a/spec/workspace-view-spec.coffee
+++ b/spec/workspace-view-spec.coffee
@@ -277,12 +277,12 @@ describe "WorkspaceView", ->
       workspaceElement = atom.workspace.getView(atom.workspace)
 
     it 'inserts panel container elements in the correct places in the DOM', ->
-      leftContainer = workspaceElement.querySelector('atom-panel-container[orientation="left"]')
-      rightContainer = workspaceElement.querySelector('atom-panel-container[orientation="right"]')
+      leftContainer = workspaceElement.querySelector('atom-panel-container[location="left"]')
+      rightContainer = workspaceElement.querySelector('atom-panel-container[location="right"]')
       expect(leftContainer.nextSibling).toBe workspaceElement.verticalAxis
       expect(rightContainer.previousSibling).toBe workspaceElement.verticalAxis
 
-      topContainer = workspaceElement.querySelector('atom-panel-container[orientation="top"]')
-      bottomContainer = workspaceElement.querySelector('atom-panel-container[orientation="bottom"]')
+      topContainer = workspaceElement.querySelector('atom-panel-container[location="top"]')
+      bottomContainer = workspaceElement.querySelector('atom-panel-container[location="bottom"]')
       expect(topContainer.nextSibling).toBe workspaceElement.paneContainer
       expect(bottomContainer.previousSibling).toBe workspaceElement.paneContainer
diff --git a/src/panel-container-element.coffee b/src/panel-container-element.coffee
index b8d8123d3..fb5c6684e 100644
--- a/src/panel-container-element.coffee
+++ b/src/panel-container-element.coffee
@@ -11,7 +11,7 @@ class PanelContainerElement extends HTMLElement
     @subscriptions.add @model.onDidRemovePanel(@panelRemoved.bind(this))
     @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
 
-    @setAttribute('orientation', @model.getOrientation())
+    @setAttribute('location', @model.getLocation())
 
   panelAdded: ({panel, index}) ->
     if index >= @childNodes.length
diff --git a/src/panel-container.coffee b/src/panel-container.coffee
index 5c3ecebf8..9bd6971ef 100644
--- a/src/panel-container.coffee
+++ b/src/panel-container.coffee
@@ -2,7 +2,7 @@
 
 module.exports =
 class PanelContainer
-  constructor: ({@viewRegistry, @orientation}) ->
+  constructor: ({@viewRegistry, @location}) ->
     @emitter = new Emitter
     @subscriptions = new CompositeDisposable
     @panels = []
@@ -32,7 +32,7 @@ class PanelContainer
 
   getView: -> @viewRegistry.getView(this)
 
-  getOrientation: -> @orientation
+  getLocation: -> @location
 
   getPanels: -> @panels
 
diff --git a/src/workspace.coffee b/src/workspace.coffee
index 2d6f11909..8eb1e1a57 100644
--- a/src/workspace.coffee
+++ b/src/workspace.coffee
@@ -50,10 +50,10 @@ class Workspace extends Model
     @paneContainer.onDidDestroyPaneItem(@onPaneItemDestroyed)
 
     @panelContainers =
-      top: new PanelContainer({@viewRegistry, orientation: 'top'})
-      left: new PanelContainer({@viewRegistry, orientation: 'left'})
-      right: new PanelContainer({@viewRegistry, orientation: 'right'})
-      bottom: new PanelContainer({@viewRegistry, orientation: 'bottom'})
+      top: new PanelContainer({@viewRegistry, location: 'top'})
+      left: new PanelContainer({@viewRegistry, location: 'left'})
+      right: new PanelContainer({@viewRegistry, location: 'right'})
+      bottom: new PanelContainer({@viewRegistry, location: 'bottom'})
 
     @subscribeToActiveItem()
 
@@ -694,7 +694,7 @@ class Workspace extends Model
   addRightPanel: (options) ->
     @addPanel('right', options)
 
-  addPanel: (orientation, options) ->
+  addPanel: (location, options) ->
     options ?= {}
     options.viewRegistry = @viewRegistry
-    @panelContainers[orientation].addPanel(new Panel(options))
+    @panelContainers[location].addPanel(new Panel(options))

From 568349102936158ac57c0e6633b9c0efdf3194e7 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 17:30:54 -0700
Subject: [PATCH 08/21] Rename custom element so as not to clash

---
 spec/panel-container-element-spec.coffee | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/spec/panel-container-element-spec.coffee b/spec/panel-container-element-spec.coffee
index 45317a676..3dd6b2b18 100644
--- a/spec/panel-container-element-spec.coffee
+++ b/spec/panel-container-element-spec.coffee
@@ -7,14 +7,14 @@ PanelContainerElement = require '../src/panel-container-element'
 describe "PanelContainerElement", ->
   [jasmineContent, element, container, viewRegistry] = []
 
-  class TestPanelItem
+  class TestPanelContainerItem
     constructior: ->
 
-  class TestPanelItemElement extends HTMLElement
+  class TestPanelContainerItemElement extends HTMLElement
     createdCallback: ->
       @classList.add('test-root')
     setModel: (@model) ->
-  TestPanelItemElement = document.registerElement 'atom-test-item-element', prototype: TestPanelItemElement.prototype
+  TestPanelContainerItemElement = document.registerElement 'atom-test-container-item-element', prototype: TestPanelContainerItemElement.prototype
 
   beforeEach ->
     jasmineContent = document.body.querySelector('#jasmine-content')
@@ -27,14 +27,14 @@ describe "PanelContainerElement", ->
       modelConstructor: PanelContainer
       viewConstructor: PanelContainerElement
     viewRegistry.addViewProvider
-      modelConstructor: TestPanelItem
-      viewConstructor: TestPanelItemElement
+      modelConstructor: TestPanelContainerItem
+      viewConstructor: TestPanelContainerItemElement
 
     container = new PanelContainer({viewRegistry, location: 'left'})
     element = container.getView()
     jasmineContent.appendChild(element)
 
-  it 'has an oritation attribute with value from the model', ->
+  it 'has a location attribute with value from the model', ->
     expect(element.getAttribute('location')).toBe 'left'
 
   it 'removes the element when the container is destroyed', ->
@@ -46,13 +46,13 @@ describe "PanelContainerElement", ->
     it "adds atom-panel elements when a new panel is added to the container; removes them when the panels are destroyed", ->
       expect(element.childNodes.length).toBe 0
 
-      panel1 = new Panel({viewRegistry, item: new TestPanelItem(), location: 'left'})
+      panel1 = new Panel({viewRegistry, item: new TestPanelContainerItem(), location: 'left'})
       container.addPanel(panel1)
       expect(element.childNodes.length).toBe 1
 
       expect(element.childNodes[0].tagName).toBe 'ATOM-PANEL'
 
-      panel2 = new Panel({viewRegistry, item: new TestPanelItem(), location: 'left'})
+      panel2 = new Panel({viewRegistry, item: new TestPanelContainerItem(), location: 'left'})
       container.addPanel(panel2)
       expect(element.childNodes.length).toBe 2
 

From 37a7cfaf9af9a825e823f713ac468dafe79d8cb5 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 17:31:13 -0700
Subject: [PATCH 09/21] Remove location junk from panel creation

---
 spec/panel-container-spec.coffee | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/spec/panel-container-spec.coffee b/spec/panel-container-spec.coffee
index 305036a03..7931d6b3c 100644
--- a/spec/panel-container-spec.coffee
+++ b/spec/panel-container-spec.coffee
@@ -16,11 +16,11 @@ describe "PanelContainer", ->
     it 'emits an onDidAddPanel event with the index the panel was inserted at', ->
       container.onDidAddPanel addPanelSpy = jasmine.createSpy()
 
-      panel1 = new Panel(item: new TestPanelItem(), location: 'left')
+      panel1 = new Panel(item: new TestPanelItem())
       container.addPanel(panel1)
       expect(addPanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0})
 
-      panel2 = new Panel(item: new TestPanelItem(), location: 'left')
+      panel2 = new Panel(item: new TestPanelItem())
       container.addPanel(panel2)
       expect(addPanelSpy).toHaveBeenCalledWith({panel: panel2, index: 1})
 
@@ -28,9 +28,9 @@ describe "PanelContainer", ->
     it 'emits an onDidRemovePanel event with the index of the removed item', ->
       container.onDidRemovePanel removePanelSpy = jasmine.createSpy()
 
-      panel1 = new Panel(item: new TestPanelItem(), location: 'left')
+      panel1 = new Panel(item: new TestPanelItem())
       container.addPanel(panel1)
-      panel2 = new Panel(item: new TestPanelItem(), location: 'left')
+      panel2 = new Panel(item: new TestPanelItem())
       container.addPanel(panel2)
 
       expect(removePanelSpy).not.toHaveBeenCalled()

From 3f170a8b5ecfc664e872ea73d3da7fdbb6c6d1e0 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 17:31:30 -0700
Subject: [PATCH 10/21] Add matcher toHide()

---
 spec/spec-helper.coffee | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/spec/spec-helper.coffee b/spec/spec-helper.coffee
index 0396f4673..460378be8 100644
--- a/spec/spec-helper.coffee
+++ b/spec/spec-helper.coffee
@@ -224,9 +224,16 @@ addCustomMatchers = (spec) ->
       notText = if @isNot then " not" else ""
       element = @actual
       element = element.get(0) if element.jquery
-      @message = -> return "Expected element '#{element}' or its descendants #{notText} to show."
+      @message = -> return "Expected element '#{element}' or its descendants#{notText} to show."
       element.style.display in ['block', 'inline-block', 'static', 'fixed']
 
+    toHide: ->
+      notText = if @isNot then " not" else ""
+      element = @actual
+      element = element.get(0) if element.jquery
+      @message = -> return "Expected element '#{element}' or its descendants#{notText} to hide."
+      element.style.display in ['none']
+
 window.keyIdentifierForKey = (key) ->
   if key.length > 1 # named key
     key

From f0fd7c268242edf9b1d44f69b61f90bf8cf390ba Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Thu, 16 Oct 2014 17:32:24 -0700
Subject: [PATCH 11/21] Add hide/show ability for panels

---
 spec/panel-element-spec.coffee | 56 ++++++++++++++++++++++++++++++++++
 spec/panel-spec.coffee         | 23 ++++++++++++++
 src/panel-element.coffee       | 10 ++++++
 src/panel.coffee               | 30 +++++++++++++++---
 4 files changed, 114 insertions(+), 5 deletions(-)
 create mode 100644 spec/panel-element-spec.coffee
 create mode 100644 spec/panel-spec.coffee

diff --git a/spec/panel-element-spec.coffee b/spec/panel-element-spec.coffee
new file mode 100644
index 000000000..11ccf4afa
--- /dev/null
+++ b/spec/panel-element-spec.coffee
@@ -0,0 +1,56 @@
+ViewRegistry = require '../src/view-registry'
+Panel = require '../src/panel'
+PanelElement = require '../src/panel-element'
+
+describe "PanelElement", ->
+  [jasmineContent, element, panel, viewRegistry] = []
+
+  class TestPanelItem
+    constructior: ->
+
+  class TestPanelItemElement extends HTMLElement
+    createdCallback: ->
+      @classList.add('test-root')
+    setModel: (@model) ->
+  TestPanelItemElement = document.registerElement 'atom-test-item-element', prototype: TestPanelItemElement.prototype
+
+  beforeEach ->
+    jasmineContent = document.body.querySelector('#jasmine-content')
+
+    viewRegistry = new ViewRegistry
+    viewRegistry.addViewProvider
+      modelConstructor: Panel
+      viewConstructor: PanelElement
+    viewRegistry.addViewProvider
+      modelConstructor: TestPanelItem
+      viewConstructor: TestPanelItemElement
+
+  it 'removes the element when the panel is destroyed', ->
+    panel = new Panel({viewRegistry, item: new TestPanelItem})
+    element = panel.getView()
+    jasmineContent.appendChild(element)
+
+    expect(element.parentNode).toBe jasmineContent
+    panel.destroy()
+    expect(element.parentNode).not.toBe jasmineContent
+
+  describe "changing panel visibility", ->
+    it 'initially renders panel created with visibile: false', ->
+      panel = new Panel({viewRegistry, visible: false, item: new TestPanelItem})
+      element = panel.getView()
+      jasmineContent.appendChild(element)
+
+      expect(element).toHide()
+
+    it 'hides and shows the panel element when Panel::hide() and Panel::show() are called', ->
+      panel = new Panel({viewRegistry, item: new TestPanelItem})
+      element = panel.getView()
+      jasmineContent.appendChild(element)
+
+      expect(element).not.toHide()
+
+      panel.hide()
+      expect(element).toHide()
+
+      panel.show()
+      expect(element).not.toHide()
diff --git a/spec/panel-spec.coffee b/spec/panel-spec.coffee
new file mode 100644
index 000000000..fb5945a7a
--- /dev/null
+++ b/spec/panel-spec.coffee
@@ -0,0 +1,23 @@
+Panel = require '../src/panel'
+
+describe "Panel", ->
+  [panel] = []
+
+  class TestPanelItem
+    constructior: ->
+
+  beforeEach ->
+    panel = new Panel(item: new TestPanelItem())
+
+  describe "changing panel visibility", ->
+    it 'emits an event when visibility changes', ->
+      panel.onDidChangeVisible spy = jasmine.createSpy()
+
+      panel.hide()
+      expect(panel.isVisible()).toBe false
+      expect(spy).toHaveBeenCalledWith(false)
+      spy.reset()
+
+      panel.show()
+      expect(panel.isVisible()).toBe true
+      expect(spy).toHaveBeenCalledWith(true)
diff --git a/src/panel-element.coffee b/src/panel-element.coffee
index 3fee9da0a..4fa0e9c69 100644
--- a/src/panel-element.coffee
+++ b/src/panel-element.coffee
@@ -8,8 +8,18 @@ class PanelElement extends HTMLElement
 
   setModel: (@model) ->
     @appendChild(@model.getItemView())
+    @subscriptions.add @model.onDidChangeVisible(@visibleChanged.bind(this))
     @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
 
+  attachedCallback: ->
+    @visibleChanged(@model.isVisible())
+
+  visibleChanged: (visible) ->
+    if visible
+      @style.display = null
+    else
+      @style.display = 'none'
+
   destroyed: ->
     @subscriptions.dispose()
     @parentNode?.removeChild(this)
diff --git a/src/panel.coffee b/src/panel.coffee
index dc5e18939..c90b35165 100644
--- a/src/panel.coffee
+++ b/src/panel.coffee
@@ -3,16 +3,13 @@
 # Public:
 module.exports =
 class Panel
-  constructor: ({@viewRegistry, @item}) ->
+  constructor: ({@viewRegistry, @item, @visible}) ->
     @emitter = new Emitter
+    @visible ?= true
 
   destroy: ->
     @emitter.emit 'did-destroy', this
 
-  getView: -> @viewRegistry.getView(this)
-
-  getItemView: -> @viewRegistry.getView(@item)
-
   ###
   Section: Event Subscription
   ###
@@ -24,3 +21,26 @@ class Panel
   # Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
   onDidDestroy: (callback) ->
     @emitter.on 'did-destroy', callback
+
+  onDidChangeVisible: (callback) ->
+    @emitter.on 'did-change-visible', callback
+
+  ###
+  Section: Panel Details
+  ###
+
+  getView: -> @viewRegistry.getView(this)
+
+  getItemView: -> @viewRegistry.getView(@item)
+
+  isVisible: -> @visible
+
+  hide: ->
+    wasVisible = @visible
+    @visible = false
+    @emitter.emit 'did-change-visible', @visible if wasVisible
+
+  show: ->
+    wasVisible = @visible
+    @visible = true
+    @emitter.emit 'did-change-visible', @visible unless wasVisible

From b94485eafdcd88d45847f3b385e75b22cf367e95 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 17 Oct 2014 11:58:18 -0700
Subject: [PATCH 12/21] Set the heights of atom panels for location left and
 right.

---
 static/panels.less | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/static/panels.less b/static/panels.less
index ea842dc7d..687245e3c 100644
--- a/static/panels.less
+++ b/static/panels.less
@@ -1,5 +1,16 @@
 @import "ui-variables";
 
+atom-panel-container[location="left"],
+atom-panel-container[location="right"] {
+  display: -webkit-flex;
+  -webkit-flex-direction: row;
+  -webkit-align-items: stretch;
+  height: 100%;
+  atom-panel {
+    height: 100%;
+  }
+}
+
 // Override bootstrap styles here.
 .panel {
   border-radius: 0;

From de78e53b35938bd9364f289a900205380e245314 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 17 Oct 2014 13:44:40 -0700
Subject: [PATCH 13/21] Add priority system to the panels

---
 spec/panel-container-spec.coffee | 54 ++++++++++++++++++++++++++++++++
 src/panel-container.coffee       | 20 ++++++++++--
 src/panel.coffee                 |  5 ++-
 3 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/spec/panel-container-spec.coffee b/spec/panel-container-spec.coffee
index 7931d6b3c..7633a963b 100644
--- a/spec/panel-container-spec.coffee
+++ b/spec/panel-container-spec.coffee
@@ -40,3 +40,57 @@ describe "PanelContainer", ->
 
       panel1.destroy()
       expect(removePanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0})
+
+  describe "panel priority", ->
+    describe 'left panel container', ->
+      [initialPanel] = []
+      beforeEach ->
+        container = new PanelContainer({viewRegistry, location: 'left'})
+        initialPanel = new Panel(item: new TestPanelItem())
+        container.addPanel(initialPanel)
+
+      describe 'when a panel with low piority is added', ->
+        it 'is inserted at the beginning of the list', ->
+          container.onDidAddPanel addPanelSpy = jasmine.createSpy()
+          panel = new Panel(item: new TestPanelItem(), priority: 0)
+          container.addPanel(panel)
+
+          expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
+          expect(container.getPanels()[0]).toBe panel
+
+      describe 'when a panel with piority between two other panels is added', ->
+        it 'is inserted at the between the two panels', ->
+          panel = new Panel(item: new TestPanelItem(), priority: 1000)
+          container.addPanel(panel)
+
+          container.onDidAddPanel addPanelSpy = jasmine.createSpy()
+          panel = new Panel(item: new TestPanelItem(), priority: 101)
+          container.addPanel(panel)
+
+          expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 1})
+          expect(container.getPanels()[1]).toBe panel
+
+    describe 'right panel container', ->
+      [initialPanel] = []
+      beforeEach ->
+        container = new PanelContainer({viewRegistry, location: 'right'})
+        initialPanel = new Panel(item: new TestPanelItem())
+        container.addPanel(initialPanel)
+
+      describe 'when a panel with high piority is added', ->
+        it 'is inserted at the beginning of the list', ->
+          container.onDidAddPanel addPanelSpy = jasmine.createSpy()
+          panel = new Panel(item: new TestPanelItem(), priority: 1000)
+          container.addPanel(panel)
+
+          expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
+          expect(container.getPanels()[0]).toBe panel
+
+      describe 'when a panel with low piority is added', ->
+        it 'is inserted at the end of the list', ->
+          container.onDidAddPanel addPanelSpy = jasmine.createSpy()
+          panel = new Panel(item: new TestPanelItem(), priority: 0)
+          container.addPanel(panel)
+
+          expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 1})
+          expect(container.getPanels()[1]).toBe panel
diff --git a/src/panel-container.coffee b/src/panel-container.coffee
index 9bd6971ef..4bf7e30ba 100644
--- a/src/panel-container.coffee
+++ b/src/panel-container.coffee
@@ -38,8 +38,13 @@ class PanelContainer
 
   addPanel: (panel) ->
     @subscriptions.add panel.onDidDestroy(@panelDestoryed.bind(this))
-    index = @panels.length
-    @panels.push(panel)
+
+    index = @getPanelIndex(panel)
+    if index is @panels.length
+      @panels.push(panel)
+    else
+      @panels.splice(index, 0, panel)
+
     @emitter.emit 'did-add-panel', {panel, index}
     panel
 
@@ -48,3 +53,14 @@ class PanelContainer
     if index > -1
       @panels.splice(index, 1)
       @emitter.emit 'did-remove-panel', {panel, index}
+
+  getPanelIndex: (panel) ->
+    priority = panel.getPriority()
+    if @location in ['bottom', 'right']
+      for p, i in @panels by -1
+        return i + 1 if priority < p.getPriority()
+      0
+    else
+      for p, i in @panels
+        return i if priority < p.getPriority()
+      @panels.length
diff --git a/src/panel.coffee b/src/panel.coffee
index c90b35165..87284eea8 100644
--- a/src/panel.coffee
+++ b/src/panel.coffee
@@ -3,9 +3,10 @@
 # Public:
 module.exports =
 class Panel
-  constructor: ({@viewRegistry, @item, @visible}) ->
+  constructor: ({@viewRegistry, @item, @visible, @priority}) ->
     @emitter = new Emitter
     @visible ?= true
+    @priority ?= 100
 
   destroy: ->
     @emitter.emit 'did-destroy', this
@@ -33,6 +34,8 @@ class Panel
 
   getItemView: -> @viewRegistry.getView(@item)
 
+  getPriority: -> @priority
+
   isVisible: -> @visible
 
   hide: ->

From 155d14478856a65d8c3d075c76c63a438ce6324c Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 17 Oct 2014 15:23:06 -0700
Subject: [PATCH 14/21] Fix spec

---
 spec/panel-container-spec.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/panel-container-spec.coffee b/spec/panel-container-spec.coffee
index 7633a963b..581ecfbe3 100644
--- a/spec/panel-container-spec.coffee
+++ b/spec/panel-container-spec.coffee
@@ -3,7 +3,7 @@ Panel = require '../src/panel'
 PanelContainer = require '../src/panel-container'
 
 describe "PanelContainer", ->
-  [container] = []
+  [container, viewRegistry] = []
 
   class TestPanelItem
     constructior: ->

From 29ea506f93c7c162965c51dba16583af9dee2168 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 17 Oct 2014 15:23:20 -0700
Subject: [PATCH 15/21] Doc Panel class

---
 src/panel.coffee | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/panel.coffee b/src/panel.coffee
index 87284eea8..048d6840e 100644
--- a/src/panel.coffee
+++ b/src/panel.coffee
@@ -1,13 +1,25 @@
 {Emitter} = require 'event-kit'
 
-# Public:
+# Extended: A container representing a panel on the edges of the editor window.
+# You should not create a `Panel` directly, instead use {Workspace::addTopPanel}
+# and friends to add panels.
+#
+# Examples: [tree-view](https://github.com/atom/tree-view),
+# [status-bar](https://github.com/atom/status-bar),
+# and [find-and-replace](https://github.com/atom/find-and-replace) all use
+# panels.
 module.exports =
 class Panel
+  ###
+  Section: Construction and Destruction
+  ###
+
   constructor: ({@viewRegistry, @item, @visible, @priority}) ->
     @emitter = new Emitter
     @visible ?= true
     @priority ?= 100
 
+  # Public: Destroy and remove this panel from the UI.
   destroy: ->
     @emitter.emit 'did-destroy', this
 
@@ -15,34 +27,51 @@ class Panel
   Section: Event Subscription
   ###
 
+  # Public: Invoke the given callback when the pane hidden or shown.
+  #
+  # * `callback` {Function} to be called when the pane is destroyed.
+  #   * `visible` {Boolean} true when the panel has been shown
+  #
+  # Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
+  onDidChangeVisible: (callback) ->
+    @emitter.on 'did-change-visible', callback
+
   # Public: Invoke the given callback when the pane is destroyed.
   #
   # * `callback` {Function} to be called when the pane is destroyed.
+  #   * `panel` {Panel} this panel
   #
   # Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
   onDidDestroy: (callback) ->
     @emitter.on 'did-destroy', callback
 
-  onDidChangeVisible: (callback) ->
-    @emitter.on 'did-change-visible', callback
-
   ###
   Section: Panel Details
   ###
 
+  # Public: Gets this panel model's view DOM node.
+  #
+  # Returns an `<atom-panel>` {Element}
   getView: -> @viewRegistry.getView(this)
 
+  # Public: Gets your panel contents view.
+  #
+  # Returns an {Element} or jQuery element, depeneding on how you created the panel.
   getItemView: -> @viewRegistry.getView(@item)
 
+  # Public: Returns a {Number} indicating this panel's priority.
   getPriority: -> @priority
 
+  # Public: Returns a {Boolean} true when the panel is visible.
   isVisible: -> @visible
 
+  # Public: Hide this panel
   hide: ->
     wasVisible = @visible
     @visible = false
     @emitter.emit 'did-change-visible', @visible if wasVisible
 
+  # Public: Show this panel
   show: ->
     wasVisible = @visible
     @visible = true

From 657cbc9c176120a316a095f98d171b1a3d979d89 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 17 Oct 2014 15:24:20 -0700
Subject: [PATCH 16/21] :memo: Doc the new panel methods

---
 src/workspace.coffee | 48 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/workspace.coffee b/src/workspace.coffee
index 8eb1e1a57..8ff1fc4ee 100644
--- a/src/workspace.coffee
+++ b/src/workspace.coffee
@@ -682,15 +682,63 @@ class Workspace extends Model
   Section: Panels
   ###
 
+  # Essential: Adds a panel item to the top of the editor window above the tabs.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {::addViewProvider}. We recommend the
+  #     latter. See {::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
   addTopPanel: (options) ->
     @addPanel('top', options)
 
+  # Essential: Adds a panel item to the bottom of the editor window.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {::addViewProvider}. We recommend the
+  #     latter. See {::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
   addBottomPanel: (options) ->
     @addPanel('bottom', options)
 
+  # Essential: Adds a panel item to the left of the editor window.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {::addViewProvider}. We recommend the
+  #     latter. See {::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
   addLeftPanel: (options) ->
     @addPanel('left', options)
 
+  # Essential: Adds a panel item to the right of the editor window.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {::addViewProvider}. We recommend the
+  #     latter. See {::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
   addRightPanel: (options) ->
     @addPanel('right', options)
 

From 66d469ee1080ae24e5282a35b80aef9562ef0192 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 17 Oct 2014 15:31:56 -0700
Subject: [PATCH 17/21] Deprecate workspace pane methods

---
 src/workspace-view.coffee | 39 ++++++++-------------------------------
 1 file changed, 8 insertions(+), 31 deletions(-)

diff --git a/src/workspace-view.coffee b/src/workspace-view.coffee
index bb54a5345..28ee66b2f 100644
--- a/src/workspace-view.coffee
+++ b/src/workspace-view.coffee
@@ -141,59 +141,36 @@ class WorkspaceView extends View
   Section: Adding elements to the workspace
   ###
 
-  # Essential: Prepend an element or view to the panels at the top of the
-  # workspace.
-  #
-  # * `element` jQuery object or DOM element
   prependToTop: (element) ->
+    deprecate 'Please use Workspace::addTopPanel() instead'
     @vertical.prepend(element)
 
-  # Essential: Append an element or view to the panels at the top of the workspace.
-  #
-  # * `element` jQuery object or DOM element
   appendToTop: (element) ->
+    deprecate 'Please use Workspace::addTopPanel() instead'
     @panes.before(element)
 
-  # Essential: Prepend an element or view to the panels at the bottom of the
-  # workspace.
-  #
-  # * `element` jQuery object or DOM element
   prependToBottom: (element) ->
+    deprecate 'Please use Workspace::addBottomPanel() instead'
     @panes.after(element)
 
-  # Essential: Append an element or view to the panels at the bottom of the
-  # workspace.
-  #
-  # * `element` jQuery object or DOM element
   appendToBottom: (element) ->
+    deprecate 'Please use Workspace::addBottomPanel() instead'
     @vertical.append(element)
 
-  # Essential: Prepend an element or view to the panels at the left of the
-  # workspace.
-  #
-  # * `element` jQuery object or DOM element
   prependToLeft: (element) ->
+    deprecate 'Please use Workspace::addLeftPanel() instead'
     @horizontal.prepend(element)
 
-  # Essential: Append an element or view to the panels at the left of the
-  # workspace.
-  #
-  # * `element` jQuery object or DOM element
   appendToLeft: (element) ->
+    deprecate 'Please use Workspace::addLeftPanel() instead'
     @vertical.before(element)
 
-  # Essential: Prepend an element or view to the panels at the right of the
-  # workspace.
-  #
-  # * `element` jQuery object or DOM element
   prependToRight: (element) ->
+    deprecate 'Please use Workspace::addRightPanel() instead'
     @vertical.after(element)
 
-  # Essential: Append an element or view to the panels at the right of the
-  # workspace.
-  #
-  # * `element` jQuery object or DOM element
   appendToRight: (element) ->
+    deprecate 'Please use Workspace::addRightPanel() instead'
     @horizontal.append(element)
 
   ###

From 995e89b5f6a005bbef9de16153583d881e21c1a0 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 17 Oct 2014 15:40:17 -0700
Subject: [PATCH 18/21] :memo: Move panels API for the sake of the docs

---
 src/workspace.coffee | 141 ++++++++++++++++++++++---------------------
 1 file changed, 71 insertions(+), 70 deletions(-)

diff --git a/src/workspace.coffee b/src/workspace.coffee
index 8ff1fc4ee..5b640b61b 100644
--- a/src/workspace.coffee
+++ b/src/workspace.coffee
@@ -596,6 +596,76 @@ class Workspace extends Model
     @paneContainer.destroy()
     @activeItemSubscriptions?.dispose()
 
+
+  ###
+  Section: Panels
+  ###
+
+  # Essential: Adds a panel item to the bottom of the editor window.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {::addViewProvider}. We recommend the
+  #     latter. See {::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
+  addBottomPanel: (options) ->
+    @addPanel('bottom', options)
+
+  # Essential: Adds a panel item to the left of the editor window.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {::addViewProvider}. We recommend the
+  #     latter. See {::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
+  addLeftPanel: (options) ->
+    @addPanel('left', options)
+
+  # Essential: Adds a panel item to the right of the editor window.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {::addViewProvider}. We recommend the
+  #     latter. See {::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
+  addRightPanel: (options) ->
+    @addPanel('right', options)
+
+  # Essential: Adds a panel item to the top of the editor window above the tabs.
+  #
+  # * `options` {Object}
+  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
+  #     a model with a view registered via {::addViewProvider}. We recommend the
+  #     latter. See {::addViewProvider} for more information.
+  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
+  #     (default: true)
+  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
+  #     forced closer to the edges of the window. (default: 100)
+  #
+  # Returns a {Panel}
+  addTopPanel: (options) ->
+    @addPanel('top', options)
+
+  addPanel: (location, options) ->
+    options ?= {}
+    options.viewRegistry = @viewRegistry
+    @panelContainers[location].addPanel(new Panel(options))
+
   ###
   Section: View Management
   ###
@@ -646,7 +716,7 @@ class Workspace extends Model
   # makes [HTML 5 custom elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/)
   # an ideal tool for implementing views in Atom.
   #
-  # ## Example
+  # ## Examples
   #
   # Text editors are divided into a model and a view layer, so when you interact
   # with methods like `atom.workspace.getActiveTextEditor()` you're only going
@@ -677,72 +747,3 @@ class Workspace extends Model
   # added provider.
   addViewProvider: (providerSpec) ->
     @viewRegistry.addViewProvider(providerSpec)
-
-  ###
-  Section: Panels
-  ###
-
-  # Essential: Adds a panel item to the top of the editor window above the tabs.
-  #
-  # * `options` {Object}
-  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
-  #     a model with a view registered via {::addViewProvider}. We recommend the
-  #     latter. See {::addViewProvider} for more information.
-  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
-  #     (default: true)
-  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
-  #     forced closer to the edges of the window. (default: 100)
-  #
-  # Returns a {Panel}
-  addTopPanel: (options) ->
-    @addPanel('top', options)
-
-  # Essential: Adds a panel item to the bottom of the editor window.
-  #
-  # * `options` {Object}
-  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
-  #     a model with a view registered via {::addViewProvider}. We recommend the
-  #     latter. See {::addViewProvider} for more information.
-  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
-  #     (default: true)
-  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
-  #     forced closer to the edges of the window. (default: 100)
-  #
-  # Returns a {Panel}
-  addBottomPanel: (options) ->
-    @addPanel('bottom', options)
-
-  # Essential: Adds a panel item to the left of the editor window.
-  #
-  # * `options` {Object}
-  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
-  #     a model with a view registered via {::addViewProvider}. We recommend the
-  #     latter. See {::addViewProvider} for more information.
-  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
-  #     (default: true)
-  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
-  #     forced closer to the edges of the window. (default: 100)
-  #
-  # Returns a {Panel}
-  addLeftPanel: (options) ->
-    @addPanel('left', options)
-
-  # Essential: Adds a panel item to the right of the editor window.
-  #
-  # * `options` {Object}
-  #   * `item` Your panel content. It can be DOM element, a jQuery element, or
-  #     a model with a view registered via {::addViewProvider}. We recommend the
-  #     latter. See {::addViewProvider} for more information.
-  #   * `visible` (optional) {Boolean} false if you want the panel to initially be hidden
-  #     (default: true)
-  #   * `priority` (optional) {Number} Determines stacking order. Lower priority items are
-  #     forced closer to the edges of the window. (default: 100)
-  #
-  # Returns a {Panel}
-  addRightPanel: (options) ->
-    @addPanel('right', options)
-
-  addPanel: (location, options) ->
-    options ?= {}
-    options.viewRegistry = @viewRegistry
-    @panelContainers[location].addPanel(new Panel(options))

From 6e034c6319bcfe68bddc8a98d9b0fb6e30bb452e Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Fri, 17 Oct 2014 16:04:00 -0700
Subject: [PATCH 19/21] Call the attach hooks after adding a view to a panel.

---
 src/panel-element.coffee | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/panel-element.coffee b/src/panel-element.coffee
index 4fa0e9c69..87d0fdafc 100644
--- a/src/panel-element.coffee
+++ b/src/panel-element.coffee
@@ -1,4 +1,5 @@
 {CompositeDisposable} = require 'event-kit'
+{callAttachHooks} = require './space-pen-extensions'
 
 class PanelElement extends HTMLElement
   createdCallback: ->
@@ -7,7 +8,10 @@ class PanelElement extends HTMLElement
   getModel: -> @model
 
   setModel: (@model) ->
-    @appendChild(@model.getItemView())
+    view = @model.getItemView()
+    @appendChild(view)
+    callAttachHooks(view) # for backward compatibility with SpacePen views
+
     @subscriptions.add @model.onDidChangeVisible(@visibleChanged.bind(this))
     @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
 

From 5a82afd33306e9c18e5e5d1a89e1a63320221987 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Mon, 20 Oct 2014 12:03:48 -0700
Subject: [PATCH 20/21] :lipstick:

---
 spec/panel-container-spec.coffee | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/spec/panel-container-spec.coffee b/spec/panel-container-spec.coffee
index 581ecfbe3..d4356e6b8 100644
--- a/spec/panel-container-spec.coffee
+++ b/spec/panel-container-spec.coffee
@@ -42,14 +42,15 @@ describe "PanelContainer", ->
       expect(removePanelSpy).toHaveBeenCalledWith({panel: panel1, index: 0})
 
   describe "panel priority", ->
-    describe 'left panel container', ->
+    describe 'left / top panel container', ->
       [initialPanel] = []
       beforeEach ->
+        # 'left' logic is the same as 'top'
         container = new PanelContainer({viewRegistry, location: 'left'})
         initialPanel = new Panel(item: new TestPanelItem())
         container.addPanel(initialPanel)
 
-      describe 'when a panel with low piority is added', ->
+      describe 'when a panel with low priority is added', ->
         it 'is inserted at the beginning of the list', ->
           container.onDidAddPanel addPanelSpy = jasmine.createSpy()
           panel = new Panel(item: new TestPanelItem(), priority: 0)
@@ -58,7 +59,7 @@ describe "PanelContainer", ->
           expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
           expect(container.getPanels()[0]).toBe panel
 
-      describe 'when a panel with piority between two other panels is added', ->
+      describe 'when a panel with priority between two other panels is added', ->
         it 'is inserted at the between the two panels', ->
           panel = new Panel(item: new TestPanelItem(), priority: 1000)
           container.addPanel(panel)
@@ -70,14 +71,15 @@ describe "PanelContainer", ->
           expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 1})
           expect(container.getPanels()[1]).toBe panel
 
-    describe 'right panel container', ->
+    describe 'right / bottom panel container', ->
       [initialPanel] = []
       beforeEach ->
+        # 'bottom' logic is the same as 'right'
         container = new PanelContainer({viewRegistry, location: 'right'})
         initialPanel = new Panel(item: new TestPanelItem())
         container.addPanel(initialPanel)
 
-      describe 'when a panel with high piority is added', ->
+      describe 'when a panel with high priority is added', ->
         it 'is inserted at the beginning of the list', ->
           container.onDidAddPanel addPanelSpy = jasmine.createSpy()
           panel = new Panel(item: new TestPanelItem(), priority: 1000)
@@ -86,7 +88,7 @@ describe "PanelContainer", ->
           expect(addPanelSpy).toHaveBeenCalledWith({panel, index: 0})
           expect(container.getPanels()[0]).toBe panel
 
-      describe 'when a panel with low piority is added', ->
+      describe 'when a panel with low priority is added', ->
         it 'is inserted at the end of the list', ->
           container.onDidAddPanel addPanelSpy = jasmine.createSpy()
           panel = new Panel(item: new TestPanelItem(), priority: 0)

From 2ac1862e5fde7e1589d78c852f91333568cea606 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Mon, 20 Oct 2014 12:12:21 -0700
Subject: [PATCH 21/21] Remove toHide matcher.

---
 spec/panel-element-spec.coffee | 8 ++++----
 spec/spec-helper.coffee        | 7 -------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/spec/panel-element-spec.coffee b/spec/panel-element-spec.coffee
index 11ccf4afa..7cf7f8d8b 100644
--- a/spec/panel-element-spec.coffee
+++ b/spec/panel-element-spec.coffee
@@ -40,17 +40,17 @@ describe "PanelElement", ->
       element = panel.getView()
       jasmineContent.appendChild(element)
 
-      expect(element).toHide()
+      expect(element.style.display).toBe 'none'
 
     it 'hides and shows the panel element when Panel::hide() and Panel::show() are called', ->
       panel = new Panel({viewRegistry, item: new TestPanelItem})
       element = panel.getView()
       jasmineContent.appendChild(element)
 
-      expect(element).not.toHide()
+      expect(element.style.display).not.toBe 'none'
 
       panel.hide()
-      expect(element).toHide()
+      expect(element.style.display).toBe 'none'
 
       panel.show()
-      expect(element).not.toHide()
+      expect(element.style.display).not.toBe 'none'
diff --git a/spec/spec-helper.coffee b/spec/spec-helper.coffee
index 460378be8..6da2a2699 100644
--- a/spec/spec-helper.coffee
+++ b/spec/spec-helper.coffee
@@ -227,13 +227,6 @@ addCustomMatchers = (spec) ->
       @message = -> return "Expected element '#{element}' or its descendants#{notText} to show."
       element.style.display in ['block', 'inline-block', 'static', 'fixed']
 
-    toHide: ->
-      notText = if @isNot then " not" else ""
-      element = @actual
-      element = element.get(0) if element.jquery
-      @message = -> return "Expected element '#{element}' or its descendants#{notText} to hide."
-      element.style.display in ['none']
-
 window.keyIdentifierForKey = (key) ->
   if key.length > 1 # named key
     key