Browser and Editor are panes. I hate the pane HTML code now.

src/browser.coffee

@@ -1,19 +1,28 @@
 $ = require 'jquery'
 
 Event = require 'event'
+Pane = require 'pane'
 
 module.exports =
-class Browser
-  constructor: (@path) ->
-    $('.main.pane').append @html().hide()
+class Browser extends Pane
+  buffers: {}
 
-    Event.on "editor:bufferFocus", (e) =>
-      @hide() if e.details isnt @path
+  html: $ "<div id='browser'></div>"
 
-  on: ->
-  html: ->
-    $ "<iframe src='#{@path}' style='width:100%;height:100%'></iframe>"
-  show: ->
-    $(".main iframe[src='#{@path}']").show()
-  hide: ->
-    $(".main iframe[src='#{@path}']").hide()
+  position: 'main'
+
+  @isPathUrl: (path) ->
+    /^https?:\/\//.test path
+
+  constructor: ->
+    Event.on "window:open", (e) =>
+      path = e.details
+      return unless @constructor.isPathUrl path
+
+      @buffers[path] ?= $ "<iframe src='#{path}' style='width:100%;height:100%'></iframe>"
+
+      @html.html @buffers[path]
+
+      @show()
+
+      Event.trigger "browser:focus", path

src/editor.coffee

@@ -7,25 +7,31 @@ Event = require 'event'
 KeyBinder = require 'key-binder'
 Native = require 'native'
 Storage = require 'storage'
-Browser = require 'browser'
 Pane = require 'pane'
 
 {EditSession} = require 'ace/edit_session'
 {UndoManager} = require 'ace/undomanager'
 
 module.exports =
-class Editor
+class Editor extends Pane
   activePath: null
 
   buffers: {}
 
   openPathsKey: "editor.openPaths.#{window.path}"
+
   focusedPathKey: "editor.focusedPath.#{window.path}"
 
-  constructor: (path) ->
+  html: $ "<div id='ace-editor'></div>"
+
+  position: "main"
+
+  constructor: ->
     KeyBinder.register "editor", @
 
-    @ace = ace.edit "ace-editor"
+    @show()
+
+    @ace = ace.edit 'ace-editor'
 
     # This stuff should all be grabbed from the .atomicity dir
     @ace.setTheme require "ace/theme/twilight"
@@ -41,8 +47,6 @@ class Editor
     Event.on 'window:close', (e) => @removeBuffer e.details
     Event.on 'editor:bufferFocus', (e) => @resize()
 
-    @addBuffer path if path
-
     # Resize editor when panes are added/removed
     el = document.body
     el.addEventListener 'DOMNodeInsertedIntoDocument', => @resize()
@@ -89,22 +93,17 @@ class Editor
 
     buffer = @buffers[path]
     if not buffer
-      if fs.isFile path
-        code = if path then fs.read path else ''
-        buffer = new EditSession code
-        buffer.setUndoManager new UndoManager
-        buffer.setUseSoftTabs useSoftTabs = @usesSoftTabs code
-        buffer.setTabSize if useSoftTabs then @guessTabSize code else 8
-        mode = @modeForPath path
-        buffer.setMode new mode if mode
-      else if /^https?:\/\//.test path
-        buffer = new Browser path
-      else
-        throw "#{@constructor.name}: I don't know what to do with `#{path}`"
+      code = if path then fs.read path else ''
+      buffer = new EditSession code
+      buffer.setUndoManager new UndoManager
+      buffer.setUseSoftTabs useSoftTabs = @usesSoftTabs code
+      buffer.setTabSize if useSoftTabs then @guessTabSize code else 8
+
+      mode = @modeForPath path
+      buffer.setMode new mode if mode
 
       @buffers[path] = buffer
 
-
     openPaths = Storage.get @openPathsKey, []
     unless path in openPaths
       openPaths.push path
@@ -154,17 +153,13 @@ class Editor
         @ace.setSession  new EditSession ''
 
   focusBuffer: (path) ->
-    return if not path or @activePath == path
+    return if not path
 
+    @show()
     @activePath = path
 
     buffer = @buffers[path] or @addBuffer path
-    if buffer.constructor is EditSession
-      $('#ace-editor').show()
-      @ace.setSession buffer
-    else
-      $('#ace-editor').hide()
-      buffer.show()
+    @ace.setSession buffer
 
     Storage.set @focusedPathKey, path
     Event.trigger "editor:bufferFocus", path

src/pane.coffee

@@ -6,40 +6,45 @@ class Pane
 
   html: null
 
-  showing: false
-
   add: ->
     verticalDiv = $('#app-vertical')
     horizontalDiv = $('#app-horizontal')
 
-    el = $ "<div>"
-    el.addClass "pane " + @position
-    el.append @html
+    @pane = $ "<div>"
+    @pane.addClass "pane " + @position
+    @pane.append @html
 
     switch @position
       when 'main'
-        $('.main').replaceWith el
+        # ICK: There can be multiple 'main' panes, but only one can be active
+        # at at time.
+        $('#main-container').children().css 'display', 'none !important'
+        $('#main-container').append @pane
       when 'top'
-        verticalDiv.prepend el
+        verticalDiv.prepend @pane
       when 'left'
-        horizontalDiv.prepend el
+        horizontalDiv.prepend @pane
       when 'bottom'
-        verticalDiv.append el
+        verticalDiv.append @pane
       when 'right'
-        horizontalDiv.append el
+        horizontalDiv.append @pane
       else
         throw "I DON'T KNOW HOW TO DEAL WITH #{@position}"
 
+  showing: ->
+    @pane and not @pane.css('display').match /none/
+
   show: ->
-    @add this
-    @showing = true
+    if @position == 'main'
+      $('#main-container').children().css 'display', 'none !important'
+
+    if not @pane then @add() else @pane.css 'display', '-webkit-box !important'
 
   hide: ->
-    @html.parent().detach()
-    @showing = false
+    @pane.css 'display', 'none !important'
 
   toggle: ->
-    if @showing
+    if @showing()
       @hide()
     else
       @show()

src/window.coffee

@@ -1,3 +1,4 @@
+Browser = require 'browser'
 Editor = require 'editor'
 Extension = require 'extension'
 Event = require 'event'
@@ -13,6 +14,8 @@ _ = require 'underscore'
 windowAdditions =
   editor: null
 
+  browser: null
+
   extensions: {}
 
   appRoot: OSX.NSBundle.mainBundle.resourcePath
@@ -23,10 +26,8 @@ windowAdditions =
     @path = atomController.path
     @setTitle _.last @path.split '/'
 
-    @editor = if fs.isFile @path
-      new Editor @path
-    else
-      new Editor
+    @editor = new Editor
+    @browser = new Browser
 
     @loadExtensions()
     @loadKeyBindings()