add serialization for pane's flex scale when resize the pane

src/pane-axis-element.coffee

@@ -13,6 +13,7 @@ class PaneAxisElement extends HTMLElement
     @subscriptions.add @model.onDidAddChild(@childAdded.bind(this))
     @subscriptions.add @model.onDidRemoveChild(@childRemoved.bind(this))
     @subscriptions.add @model.onDidReplaceChild(@childReplaced.bind(this))
+    @subscriptions.add @model.observeFlexScale(@flexScaleChanged.bind(this))
 
     @childAdded({child, index}) for child, index in @model.getChildren()
 
@@ -58,6 +59,8 @@ class PaneAxisElement extends HTMLElement
     @childAdded({child: newChild, index})
     focusedElement?.focus() if document.activeElement is document.body
 
+  flexScaleChanged: (flexScale) -> @style.flexGrow = flexScale
+
   hasFocus: ->
     this is document.activeElement or @contains(document.activeElement)
 

src/pane-axis.coffee

@@ -12,13 +12,14 @@ class PaneAxis extends Model
   container: null
   orientation: null
 
-  constructor: ({@container, @orientation, children}) ->
+  constructor: ({@container, @orientation, children, flexScale}) ->
     @emitter = new Emitter
     @subscriptionsByChild = new WeakMap
     @subscriptions = new CompositeDisposable
     @children = []
     if children?
       @addChild(child) for child in children
+    @flexScale = flexScale ? 1
 
   deserializeParams: (params) ->
     {container} = params
@@ -28,6 +29,13 @@ class PaneAxis extends Model
   serializeParams: ->
     children: @children.map (child) -> child.serialize()
     orientation: @orientation
+    flexScale: @flexScale
+
+  getFlexScale: -> @flexScale
+
+  setFlexScale: (@flexScale) ->
+    @emitter.emit 'did-change-flex-scale', @flexScale
+    @flexScale
 
   getParent: -> @parent
 
@@ -59,6 +67,13 @@ class PaneAxis extends Model
   onDidDestroy: (fn) ->
     @emitter.on 'did-destroy', fn
 
+  onDidChangeFlexScale: (fn) ->
+    @emitter.on 'did-change-flex-scale', fn
+
+  observeFlexScale: (fn) ->
+    fn(@flexScale)
+    @onDidChangeFlexScale(fn)
+
   addChild: (child, index=@children.length) ->
     child.setParent(this)
     child.setContainer(@container)

src/pane-element.coffee

@@ -1,7 +1,6 @@
 {CompositeDisposable} = require 'event-kit'
 {$, callAttachHooks, callRemoveHooks} = require './space-pen-extensions'
 PaneView = require './pane-view'
-_ = require 'underscore-plus'
 
 class PaneElement extends HTMLElement
   attached: false
@@ -46,7 +45,7 @@ class PaneElement extends HTMLElement
       event.preventDefault()
       event.stopPropagation()
       @getModel().activate()
-      pathsToOpen = _.pluck(event.dataTransfer.files, 'path')
+      pathsToOpen = Array::map.call event.dataTransfer.files, (file) -> file.path
       atom.open({pathsToOpen}) if pathsToOpen.length > 0
 
     @addEventListener 'focus', handleFocus, true
@@ -63,6 +62,7 @@ class PaneElement extends HTMLElement
     @subscriptions.add @model.observeActiveItem(@activeItemChanged.bind(this))
     @subscriptions.add @model.onDidRemoveItem(@itemRemoved.bind(this))
     @subscriptions.add @model.onDidDestroy(@paneDestroyed.bind(this))
+    @subscriptions.add @model.observeFlexScale(@flexScaleChanged.bind(this))
     @__spacePenView.setModel(@model)
     this
 
@@ -116,6 +116,9 @@ class PaneElement extends HTMLElement
   paneDestroyed: ->
     @subscriptions.dispose()
 
+  flexScaleChanged: (flexScale) ->
+    @style.flexGrow = flexScale
+
   getActiveView: -> atom.views.getView(@model.getActiveItem())
 
   hasFocus: ->

src/pane-resize-handle-element.coffee

@@ -29,14 +29,13 @@ class PaneResizeHandleElement extends HTMLElement
     allRatio = ratio1 + ratio2
     [total * ratio1 / allRatio, total * ratio2 / allRatio]
 
-  getFlexGrow: (element) ->
-    parseFloat window.getComputedStyle(element).flexGrow
-
   setFlexGrow: (prevSize, nextSize) ->
-    flexGrow = @getFlexGrow(@previousSibling) + @getFlexGrow(@nextSibling)
-    flexGrows = @calcRatio(prevSize, nextSize, flexGrow)
-    @previousSibling.style.flexGrow = flexGrows[0]
-    @nextSibling.style.flexGrow = flexGrows[1]
+    @prevModel = @previousSibling.getModel()
+    @nextModel = @nextSibling.getModel()
+    totalScale = @prevModel.getFlexScale() + @nextModel.getFlexScale()
+    flexGrows = @calcRatio(prevSize, nextSize, totalScale)
+    @prevModel.setFlexScale flexGrows[0]
+    @nextModel.setFlexScale flexGrows[1]
 
   fixInRange: (val, minValue, maxValue) ->
     Math.min(Math.max(val, minValue), maxValue)

src/pane.coffee

@@ -20,6 +20,7 @@ class Pane extends Model
     container: undefined
     activeItem: undefined
     focused: false
+    flexScale: 1
 
   # Public: Only one pane is considered *active* at a time. A pane is activated
   # when it is focused, and when focus returns to the pane container after
@@ -38,6 +39,7 @@ class Pane extends Model
 
     @addItems(compact(params?.items ? []))
     @setActiveItem(@items[0]) unless @getActiveItem()?
+    @setFlexScale(params?.flexScale ? 1)
 
   # Called by the Serializable mixin during serialization.
   serializeParams: ->
@@ -50,6 +52,7 @@ class Pane extends Model
     items: compact(@items.map((item) -> item.serialize?()))
     activeItemURI: activeItemURI
     focused: @focused
+    flexScale: @flexScale
 
   # Called by the Serializable mixin during deserialization.
   deserializeParams: (params) ->
@@ -76,10 +79,36 @@ class Pane extends Model
       @container = container
       container.didAddPane({pane: this})
 
+  setFlexScale: (@flexScale) ->
+    @emitter.emit 'did-change-flex-scale', @flexScale
+    @flexScale
+
+  getFlexScale: -> @flexScale
   ###
   Section: Event Subscription
   ###
 
+  # Public: Invoke the given callback when the pane resize
+  #
+  # the callback will be invoked when pane's flexScale property changes
+  #
+  # * `callback` {Function} to be called when the pane is resized
+  #
+  # Returns a {Disposable} on which '.dispose()' can be called to unsubscribe.
+  onDidChangeFlexScale: (callback) ->
+    @emitter.on 'did-change-flex-scale', callback
+
+  # Public: Invoke the given callback with all current and future items.
+  #
+  # * `callback` {Function} to be called with current and future items.
+  #   * `item` An item that is present in {::getItems} at the time of
+  #     subscription or that is added at some later time.
+  #
+  # Returns a {Disposable} on which `.dispose()` can be called to unsubscribe.
+  observeFlexScale: (callback) ->
+    callback(@flexScale)
+    @onDidChangeFlexScale(callback)
+
   # Public: Invoke the given callback when the pane is activated.
   #
   # The given callback will be invoked whenever {::activate} is called on the