🐎 Use translate and translate3d for offsets

atom-minimap · Dec 16, 2014 · 98083d8 · 98083d8
1 parent f93e50c
commit 98083d8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/lib/minimap-element.coffee b/lib/minimap-element.coffee
@@ -40,6 +40,9 @@ class MinimapElement extends HTMLElement
           @measureHeightAndWidth()
           @requestForcedUpdate()
 
+      'minimap.useHardwareAcceleration': (@useHardwareAcceleration) =>
+        @requestUpdate() if @attached
+
   observeConfig: (configs={}) ->
     for config, callback of configs
       @subscriptions.add atom.config.observe config, callback
@@ -131,14 +134,15 @@ class MinimapElement extends HTMLElement
 
   measureHeightAndWidth: ->
     @height = @clientHeight
-    @width = @clientWidth
 
     if @adjustToSoftWrap
       lineLength = atom.config.get('editor.preferredLineLength')
       softWrap = atom.config.get('editor.softWrap')
       width = lineLength * @minimap.getCharWidth()
 
-      @width = width if softWrap and lineLength and width < @width
+      @width = width if softWrap and lineLength and (not @width? or width < @width)
+    else
+      @width = @clientWidth
 
     if @width isnt @canvas.width or @height isnt @canvas.height
       @canvas.width = @width * devicePixelRatio
@@ -181,12 +185,16 @@ class MinimapElement extends HTMLElement
     else
       @style.width = null
 
+    visibleAreaLeft = @minimap.getTextEditorScrollLeft()
+    visibleAreaTop = @minimap.getTextEditorScrollTop() - @minimap.getMinimapScrollTop()
+
     @visibleArea.style.width = @clientWidth + 'px'
     @visibleArea.style.height = @minimap.getTextEditorHeight() + 'px'
-    @visibleArea.style.top = (@minimap.getTextEditorScrollTop() - @minimap.getMinimapScrollTop()) + 'px'
-    @visibleArea.style.left = (@minimap.getTextEditorScrollLeft()) + 'px'
+    @transformElement @visibleArea, @makeTranslate(visibleAreaLeft, visibleAreaTop)
+
+    canvasTop = @minimap.getFirstVisibleScreenRow() * @minimap.getLineHeight() - @minimap.getMinimapScrollTop()
 
-    @canvas.style.top = (@minimap.getFirstVisibleScreenRow() * @minimap.getLineHeight() - @minimap.getMinimapScrollTop()) + 'px'
+    @transformElement(@canvas, @makeTranslate(0, canvasTop))
 
     if @minimapScrollIndicator and @minimap.canScroll() and not @scrollIndicator
       @initializeScrollIndicator()
@@ -197,12 +205,21 @@ class MinimapElement extends HTMLElement
       indicatorScroll = (editorHeight - indicatorHeight) * @minimap.getTextEditorScrollRatio()
 
       @scrollIndicator.style.height = indicatorHeight + 'px'
-      @scrollIndicator.style.top = indicatorScroll + 'px'
+      @transformElement @scrollIndicator, @makeTranslate(0, indicatorScroll)
 
       @disposeScrollIndicator() if not @minimap.canScroll()
 
     @updateCanvas()
 
+  transformElement: (el, transform) ->
+    el.style.transform = transform
+
+  makeTranslate: (x=0,y=0) ->
+    if @useHardwareAcceleration
+      "translate3d(#{x}px, #{y}px, 0)"
+    else
+      "translate(#{x}px, #{y}px)"
+
 #    ######## ##       ######## ##     ## ######## ##    ## ########
 #    ##       ##       ##       ###   ### ##       ###   ##    ##
 #    ##       ##       ##       #### #### ##       ####  ##    ##

diff --git a/spec/minimap-element-spec.coffee b/spec/minimap-element-spec.coffee
@@ -7,6 +7,14 @@ MinimapElement = require '../lib/minimap-element'
 stylesheetPath = path.resolve __dirname, '..', 'stylesheets', 'minimap.less'
 stylesheet = atom.themes.loadStylesheet(stylesheetPath)
 
+realOffsetTop = (o) ->
+  transform = new WebKitCSSMatrix window.getComputedStyle(o).transform
+  o.offsetTop + transform.m42
+
+realOffsetLeft = (o) ->
+  transform = new WebKitCSSMatrix window.getComputedStyle(o).transform
+  o.offsetLeft + transform.m41
+
 describe 'MinimapElement', ->
   [editor, minimap, largeSample, mediumSample, smallSample, jasmineContent, editorElement, minimapElement] = []
 
@@ -132,14 +140,14 @@ describe 'MinimapElement', ->
         expect(visibleArea.offsetHeight).toBeCloseTo(minimap.getTextEditorHeight(), 0)
 
       it 'sets the visible visible area offset', ->
-        expect(visibleArea.offsetTop).toBeCloseTo(minimap.getTextEditorScrollTop() - minimap.getMinimapScrollTop(), 0)
-        expect(visibleArea.offsetLeft).toBeCloseTo(minimap.getTextEditorScrollLeft(), 0)
+        expect(realOffsetTop(visibleArea)).toBeCloseTo(minimap.getTextEditorScrollTop() - minimap.getMinimapScrollTop(), 0)
+        expect(realOffsetLeft(visibleArea)).toBeCloseTo(minimap.getTextEditorScrollLeft(), 0)
 
       it 'offsets the canvas when the scroll does not match line height', ->
         editor.setScrollTop(1004)
         nextAnimationFrame()
 
-        expect(canvas.offsetTop).toEqual(-2)
+        expect(realOffsetTop(canvas)).toBeCloseTo(-2, -1)
 
       it 'renders the visible line decorations', ->
         spyOn(minimapElement, 'drawLineDecorations').andCallThrough()
@@ -175,8 +183,8 @@ describe 'MinimapElement', ->
           nextAnimationFrame()
 
         it 'updates the visible area', ->
-          expect(visibleArea.offsetTop).toBeCloseTo(minimap.getTextEditorScrollTop() - minimap.getMinimapScrollTop(), 0)
-          expect(visibleArea.offsetLeft).toBeCloseTo(minimap.getTextEditorScrollLeft(), 0)
+          expect(realOffsetTop(visibleArea)).toBeCloseTo(minimap.getTextEditorScrollTop() - minimap.getMinimapScrollTop(), 0)
+          expect(realOffsetLeft(visibleArea)).toBeCloseTo(minimap.getTextEditorScrollLeft(), 0)
 
       describe 'when the editor is resized to a greater size', ->
         beforeEach ->
@@ -286,6 +294,12 @@ describe 'MinimapElement', ->
       it 'adjusts the width of the minimap', ->
         expect(minimapElement.offsetWidth).toEqual(4)
 
+      describe 'the dom polling routine', ->
+        it 'does not change the value', ->
+          advanceClock(150)
+          nextAnimationFrame()
+          expect(minimapElement.offsetWidth).toEqual(4)
+
       describe 'and then disabled', ->
         beforeEach ->
           atom.config.set 'minimap.adjustMinimapWidthToSoftWrap', false
@@ -329,7 +343,7 @@ describe 'MinimapElement', ->
           scroll = (editor.getHeight() - height) * minimap.getTextEditorScrollRatio()
 
           expect(indicator.offsetHeight).toBeCloseTo(height, 0)
-          expect(indicator.offsetTop).toBeCloseTo(scroll, 0)
+          expect(realOffsetTop(indicator)).toBeCloseTo(scroll, 0)
 
       describe 'when the minimap cannot scroll', ->
         beforeEach ->