Precompute pixel rects for highlight decorations in EditorComponent

src/editor-component.coffee

@@ -12,7 +12,7 @@ ScrollbarComponent = require './scrollbar-component'
 ScrollbarCornerComponent = require './scrollbar-corner-component'
 SubscriberMixin = require './subscriber-mixin'
 
-DummyHighlightDecoration = {id: 'dummy', screenRange: new Range(new Point(0, 0), new Point(0, 0)), decorations: [{class: 'dummy'}]}
+DummyHighlightDecoration = {id: 'dummy', startPixelPosition: {top: 0, left: 0}, endPixelPosition: {top: 0, left: 0}, decorations: [{class: 'dummy'}]}
 
 module.exports =
 EditorComponent = React.createClass
@@ -289,10 +289,15 @@ EditorComponent = React.createClass
     filteredDecorations = {}
     for markerId, decorations of decorationsByMarkerId
       marker = editor.getMarker(markerId)
-      if marker.isValid() and not marker.getScreenRange().isEmpty()
+      screenRange = marker.getScreenRange()
+      if marker.isValid() and not screenRange.isEmpty()
         for decoration in decorations
           if editor.decorationMatchesType(decoration, 'highlight')
-            filteredDecorations[markerId] ?= {id: markerId, screenRange: marker.getScreenRange(), decorations: []}
+            filteredDecorations[markerId] ?=
+              id: markerId
+              startPixelPosition: editor.pixelPositionForScreenPosition(screenRange.start)
+              endPixelPosition: editor.pixelPositionForScreenPosition(screenRange.end)
+              decorations: []
             filteredDecorations[markerId].decorations.push decoration
 
     # At least in Chromium 31, removing the last highlight causes a rendering

src/highlight-component.coffee

@@ -6,22 +6,18 @@ HighlightComponent = React.createClass
   displayName: 'HighlightComponent'
 
   render: ->
-    {editor, screenRange, decoration} = @props
-    {start, end} = screenRange
-    rowCount = end.row - start.row + 1
-    startPixelPosition = editor.pixelPositionForScreenPosition(start)
-    endPixelPosition = editor.pixelPositionForScreenPosition(end)
+    {startPixelPosition, endPixelPosition, decoration} = @props
 
     className = 'highlight'
     className += " #{decoration.class}" if decoration.class?
     div {className},
-      if rowCount is 1
-        @renderSingleLineRegions(startPixelPosition, endPixelPosition)
+      if endPixelPosition.top is startPixelPosition.top
+        @renderSingleLineRegions()
       else
-        @renderMultiLineRegions(startPixelPosition, endPixelPosition, rowCount)
+        @renderMultiLineRegions()
 
-  renderSingleLineRegions: (startPixelPosition, endPixelPosition) ->
-    {lineHeightInPixels} = @props
+  renderSingleLineRegions: ->
+    {startPixelPosition, endPixelPosition, lineHeightInPixels} = @props
 
     [
       div className: 'region', key: 0, style:
@@ -31,8 +27,8 @@ HighlightComponent = React.createClass
         width: endPixelPosition.left - startPixelPosition.left
     ]
 
-  renderMultiLineRegions: (startPixelPosition, endPixelPosition, rowCount) ->
-    {lineHeightInPixels} = @props
+  renderMultiLineRegions: ->
+    {startPixelPosition, endPixelPosition, lineHeightInPixels} = @props
     regions = []
     index = 0
 
@@ -46,11 +42,11 @@ HighlightComponent = React.createClass
     )
 
     # Middle rows, extending from left side to right side of screen
-    if rowCount > 2
+    if endPixelPosition.top - startPixelPosition.top > lineHeightInPixels
       regions.push(
         div className: 'region', key: index++, style:
           top: startPixelPosition.top + lineHeightInPixels
-          height: (rowCount - 2) * lineHeightInPixels
+          height: endPixelPosition.top - startPixelPosition.top - lineHeightInPixels
           left: 0
           right: 0
       )

src/highlights-component.coffee

@@ -12,12 +12,12 @@ HighlightsComponent = React.createClass
       @renderHighlights() if @isMounted()
 
   renderHighlights: ->
-    {editor, highlightDecorations, lineHeightInPixels} = @props
+    {highlightDecorations, lineHeightInPixels} = @props
 
     highlightComponents = []
-    for markerId, {screenRange, decorations} of highlightDecorations
+    for markerId, {startPixelPosition, endPixelPosition, decorations} of highlightDecorations
       for decoration in decorations
-        highlightComponents.push(HighlightComponent({key: "#{markerId}-#{decoration.class}", screenRange, decoration, editor, lineHeightInPixels}))
+        highlightComponents.push(HighlightComponent({key: "#{markerId}-#{decoration.class}", startPixelPosition, endPixelPosition, decoration, lineHeightInPixels}))
 
     highlightComponents