Recycle bracket highlight views

src/packages/bracket-matcher/lib/bracket-matcher.coffee

@@ -31,6 +31,13 @@ module.exports =
     editor.command 'editor:go-to-matching-bracket.bracket-matcher', =>
       @goToMatchingPair(editor)
     editor.on 'editor:will-be-removed', => editor.off('.bracket-matcher')
+    editor.startHighlightView = @addHighlightView(editor)
+    editor.endHighlightView = @addHighlightView(editor)
+
+  addHighlightView: (editor) ->
+    view = $$ -> @div class: 'bracket-matcher', style: 'display: none'
+    editor.underlayer.append(view)
+    view
 
   goToMatchingPair: (editor) ->
     return unless @pairHighlighted
@@ -50,23 +57,33 @@ module.exports =
     else if previousPosition.isEqual(endPosition)
       editor.setCursorBufferPosition(startPosition)
 
-  addHighlightViews: (editor, bufferRange) ->
+  moveHighlightViews: (editor, bufferRange) ->
     { start, end } = Range.fromObject(bufferRange)
     startPixelPosition = editor.pixelPositionForBufferPosition(start)
     endPixelPosition = editor.pixelPositionForBufferPosition(end)
-    @addHighlightViewAtPixelPosition(editor, bufferPosition: start, pixelPosition: startPixelPosition)
-    @addHighlightViewAtPixelPosition(editor, bufferPosition: end, pixelPosition: endPixelPosition)
+    @moveHighlightView
+      editor: editor
+      view: editor.startHighlightView
+      bufferPosition: start
+      pixelPosition: startPixelPosition
+    @moveHighlightView
+      editor: editor
+      view: editor.endHighlightView
+      bufferPosition: end
+      pixelPosition: endPixelPosition
 
-  addHighlightViewAtPixelPosition: (editor, {bufferPosition, pixelPosition}) ->
-    view = $$ -> @div class: 'bracket-matcher'
+  moveHighlightView: ({editor, view, bufferPosition, pixelPosition}) ->
     view.data('bufferPosition', bufferPosition)
-    view.css(
+    view.css
+      display: 'block'
       top: pixelPosition.top
       left: pixelPosition.left
       width: editor.charWidth
       height: editor.lineHeight
-    )
-    editor.underlayer.append(view)
+
+  hideHighlightViews: (editor) ->
+    editor.startHighlightView.hide()
+    editor.endHighlightView.hide()
 
   findCurrentPair: (editor, buffer, matches) ->
     position = editor.getCursorBufferPosition()
@@ -112,7 +129,7 @@ module.exports =
   updateMatch: (editor) ->
     return unless underlayer = editor.pane()?.find('.underlayer')
 
-    underlayer.find('.bracket-matcher').remove() if @pairHighlighted
+    @hideHighlightViews(editor) if @pairHighlighted
     @pairHighlighted = false
 
     return unless editor.getSelection().isEmpty()
@@ -128,7 +145,7 @@ module.exports =
         matchPosition = @findMatchingStartPair(buffer, position, matchingPair, currentPair)
 
     if position? and matchPosition?
-      @addHighlightViews(editor, [position, matchPosition])
+      @moveHighlightViews(editor, [position, matchPosition])
       @pairHighlighted = true
 
   subscribeToEditSession: (editSession) ->

src/packages/bracket-matcher/spec/bracket-matcher-spec.coffee

@@ -19,14 +19,14 @@ describe "bracket matching", ->
       it "highlights the starting pair and ending pair", ->
         editor.moveCursorToEndOfLine()
         editor.moveCursorLeft()
-        expect(editor.underlayer.find('.bracket-matcher').length).toBe 2
+        expect(editor.underlayer.find('.bracket-matcher:visible').length).toBe 2
         expect(editor.underlayer.find('.bracket-matcher:first').position()).toEqual editor.pixelPositionForBufferPosition([0,28])
         expect(editor.underlayer.find('.bracket-matcher:last').position()).toEqual editor.pixelPositionForBufferPosition([12,0])
 
     describe "when the cursor is after a starting pair", ->
       it "highlights the starting pair and ending pair", ->
         editor.moveCursorToEndOfLine()
-        expect(editor.underlayer.find('.bracket-matcher').length).toBe 2
+        expect(editor.underlayer.find('.bracket-matcher:visible').length).toBe 2
         expect(editor.underlayer.find('.bracket-matcher:first').position()).toEqual editor.pixelPositionForBufferPosition([0,28])
         expect(editor.underlayer.find('.bracket-matcher:last').position()).toEqual editor.pixelPositionForBufferPosition([12,0])
 
@@ -35,7 +35,7 @@ describe "bracket matching", ->
         editor.moveCursorToBottom()
         editor.moveCursorLeft()
         editor.moveCursorLeft()
-        expect(editor.underlayer.find('.bracket-matcher').length).toBe 2
+        expect(editor.underlayer.find('.bracket-matcher:visible').length).toBe 2
         expect(editor.underlayer.find('.bracket-matcher:last').position()).toEqual editor.pixelPositionForBufferPosition([12,0])
         expect(editor.underlayer.find('.bracket-matcher:first').position()).toEqual editor.pixelPositionForBufferPosition([0,28])
 
@@ -43,22 +43,22 @@ describe "bracket matching", ->
       it "highlights the starting pair and ending pair", ->
         editor.moveCursorToBottom()
         editor.moveCursorLeft()
-        expect(editor.underlayer.find('.bracket-matcher').length).toBe 2
+        expect(editor.underlayer.find('.bracket-matcher:visible').length).toBe 2
         expect(editor.underlayer.find('.bracket-matcher:last').position()).toEqual editor.pixelPositionForBufferPosition([12,0])
         expect(editor.underlayer.find('.bracket-matcher:first').position()).toEqual editor.pixelPositionForBufferPosition([0,28])
 
     describe "when the cursor is moved off a pair", ->
       it "removes the starting pair and ending pair highlights", ->
         editor.moveCursorToEndOfLine()
-        expect(editor.underlayer.find('.bracket-matcher').length).toBe 2
+        expect(editor.underlayer.find('.bracket-matcher:visible').length).toBe 2
         editor.moveCursorToBeginningOfLine()
-        expect(editor.underlayer.find('.bracket-matcher').length).toBe 0
+        expect(editor.underlayer.find('.bracket-matcher:visible').length).toBe 0
 
     describe "pair balancing", ->
       describe "when a second starting pair preceeds the first ending pair", ->
         it "advances to the second ending pair", ->
           editor.setCursorBufferPosition([8,42])
-          expect(editor.underlayer.find('.bracket-matcher').length).toBe 2
+          expect(editor.underlayer.find('.bracket-matcher:visible').length).toBe 2
           expect(editor.underlayer.find('.bracket-matcher:first').position()).toEqual editor.pixelPositionForBufferPosition([8,42])
           expect(editor.underlayer.find('.bracket-matcher:last').position()).toEqual editor.pixelPositionForBufferPosition([8,54])