Merge branch 'font-config' into dev

docs/configuring-and-extending.md

@@ -55,8 +55,8 @@ Or you can use `observeConfig` to track changes from a view object.
 ```coffeescript
 class MyView extends View
   initialize: ->
-    @observeConfig 'editor.lineHeight', (lineHeight) =>
-      @adjustLineHeight(lineHeight)
+    @observeConfig 'editor.fontSize', () =>
+      @adjustFontSize()
 ```
 
 The `observeConfig` method will call the given callback immediately with the

spec/app/editor-spec.coffee

@@ -516,14 +516,61 @@ describe "Editor", ->
       editor.getBuffer().saveAs(path)
       expect(editor.getGrammar().name).toBe 'Plain Text'
 
-  describe "font size", ->
-    it "sets the initial font size based on the value from config", ->
-      config.set("editor.fontSize", 20)
-      newEditor = editor.splitRight()
-      expect(editor.css('font-size')).toBe '20px'
-      expect(newEditor.css('font-size')).toBe '20px'
+  describe "font family", ->
+    beforeEach ->
+      expect(editor.css('font-family')).not.toBe 'Courier'
+
+    it "sets the initial font family based on the value from config", ->
+      expect($("head style.font-family")).toExist()
+      expect($("head style.font-family").text()).toMatch "{font-family: #{config.get('editor.fontFamily')}}"
+
+    describe "when the font family changes", ->
+      it "updates the font family on new and existing editors", ->
+        rootView.attachToDom()
+        rootView.height(200)
+        rootView.width(200)
+
+        config.set("editor.fontFamily", "Courier")
+        newEditor = editor.splitRight()
+
+        expect($("head style.font-family").text()).toMatch "{font-family: Courier}"
+        expect(editor.css('font-family')).toBe 'Courier'
+        expect(newEditor.css('font-family')).toBe 'Courier'
+
+      it "updates the font family of editors and recalculates dimensions critical to cursor positioning", ->
+        rootView.attachToDom()
+        rootView.height(200)
+        rootView.width(200)
+
+        lineHeightBefore = editor.lineHeight
+        charWidthBefore = editor.charWidth
+        config.set("editor.fontFamily", "Courier")
+        editor.setCursorScreenPosition [5, 6]
+        expect(editor.charWidth).not.toBe charWidthBefore
+        expect(editor.getCursorView().position()).toEqual { top: 5 * editor.lineHeight, left: 6 * editor.charWidth }
+        expect(editor.verticalScrollbarContent.height()).toBe buffer.getLineCount() * editor.lineHeight
+
+  describe "font size", ->
+    beforeEach ->
+      expect(editor.css('font-size')).not.toBe "20px"
+
+    it "sets the initial font size based on the value from config", ->
+      expect($("head style.font-size")).toExist()
+      expect($("head style.font-size").text()).toMatch "{font-size: #{config.get('editor.fontSize')}px}"
+
+    describe "when the font size changes", ->
+      it "updates the font family on new and existing editors", ->
+        rootView.attachToDom()
+        rootView.height(200)
+        rootView.width(200)
+
+        config.set("editor.fontSize", 20)
+        newEditor = editor.splitRight()
+
+        expect($("head style.font-size").text()).toMatch "{font-size: 20px}"
+        expect(editor.css('font-size')).toBe '20px'
+        expect(newEditor.css('font-size')).toBe '20px'
 
-    describe "when the font size changes on the view", ->
       it "updates the font sizes of editors and recalculates dimensions critical to cursor positioning", ->
         rootView.attachToDom()
         rootView.height(200)

spec/app/root-view-spec.coffee

@@ -567,9 +567,9 @@ describe "RootView", ->
     editor = null
     beforeEach ->
       editor = rootView.getActiveEditor()
+      editor.attachToDom()
 
     it "increases/decreases font size when increase/decrease-font-size events are triggered", ->
-      editor = rootView.getActiveEditor()
       fontSizeBefore = editor.getFontSize()
       rootView.trigger 'window:increase-font-size'
       expect(editor.getFontSize()).toBe fontSizeBefore + 1

src/app/editor.coffee

@@ -14,6 +14,7 @@ _ = require 'underscore'
 module.exports =
 class Editor extends View
   @configDefaults:
+    fontFamily: "Inconsolata, Monaco, Courier"
     fontSize: 20
     showInvisibles: false
     autosave: false
@@ -341,6 +342,7 @@ class Editor extends View
     @observeConfig 'editor.showInvisibles', (showInvisibles) => @setShowInvisibles(showInvisibles)
     @observeConfig 'editor.invisibles', (invisibles) => @setInvisibles(invisibles)
     @observeConfig 'editor.fontSize', (fontSize) => @setFontSize(fontSize)
+    @observeConfig 'editor.fontFamily', (fontFamily) => @setFontFamily(fontFamily)
 
   handleEvents: ->
     @on 'focus', =>
@@ -681,16 +683,37 @@ class Editor extends View
   autosave: ->
     @save() if @getPath()?
 
-  setFontSize: (@fontSize) ->
-    if fontSize?
-      @css('font-size', fontSize + 'px')
-      return unless @attached
-      @calculateDimensions()
-      @updatePaddingOfRenderedLines()
-      @updateLayerDimensions()
-      @requestDisplayUpdate()
+  setFontSize: (fontSize) ->
+    headTag = $("head")
+    styleTag = headTag.find("style.font-size")
+    if styleTag.length == 0
+      styleTag = $$ -> @style class: 'font-size'
+      headTag.append styleTag
 
-  getFontSize: -> @fontSize
+    styleTag.text(".editor {font-size: #{fontSize}px}")
+    @redraw()
+
+  getFontSize: ->
+    parseInt(@css("font-size"))
+
+  setFontFamily: (fontFamily) ->
+    headTag = $("head")
+    styleTag = headTag.find("style.font-family")
+    if styleTag.length == 0
+      styleTag = $$ -> @style class: 'font-family'
+      headTag.append styleTag
+
+    styleTag.text(".editor {font-family: #{fontFamily}}")
+    @redraw()
+
+  getFontFamily: -> @css("font-family")
+
+  redraw: ->
+    return unless @attached
+    @calculateDimensions()
+    @updatePaddingOfRenderedLines()
+    @updateLayerDimensions()
+    @requestDisplayUpdate()
 
   newSplitEditor: (editSession) ->
     new Editor { editSession: editSession ? @activeEditSession.copy() }

src/packages/command-panel/src/command-panel-view.coffee

@@ -51,7 +51,7 @@ class CommandPanelView extends View
     @previewList.hide()
     @previewCount.hide()
     @errorMessages.hide()
-    @prompt.iconSize(@miniEditor.fontSize)
+    @prompt.iconSize(@miniEditor.getFontSize())
 
   serialize: ->
     text: @miniEditor.getText()

static/editor.css

@@ -103,4 +103,4 @@
   position: absolute;
   pointer-events: none;
   z-index: -1;
-}
+}