🐛 Fix minimap broken with changes in flex box behaviour

lib/minimap-element.coffee

@@ -77,7 +77,8 @@ class MinimapElement extends HTMLElement
       'minimap.absoluteMode': (@absoluteMode) =>
         @classList.toggle('absolute', @absoluteMode)
 
-      'editor.preferredLineLength': => @requestUpdate() if @attached
+      'editor.preferredLineLength': =>
+        @measureHeightAndWidth() if @attached
 
       'editor.softWrap': => @requestUpdate() if @attached
 
@@ -334,15 +335,15 @@ class MinimapElement extends HTMLElement
   update: ->
     return unless @attached and @isVisible() and @minimap?
 
-    if @adjustToSoftWrap and @marginRight?
-      @style.marginRight = @marginRight + 'px'
-    else
-      @style.marginRight = null
-
     visibleAreaLeft = @minimap.getTextEditorScaledScrollLeft()
     visibleAreaTop = @minimap.getTextEditorScaledScrollTop() - @minimap.getScrollTop()
     visibleWidth = Math.min(@canvas.width / devicePixelRatio, @width)
 
+    if @adjustToSoftWrap and @flexBasis
+      @style.flexBasis = @flexBasis + 'px'
+    else
+      @style.flexBasis = null
+
     if atom.inSpecMode()
       @applyStyles @visibleArea,
         width: visibleWidth + 'px'
@@ -448,13 +449,13 @@ class MinimapElement extends HTMLElement
         softWrapAtPreferredLineLength = atom.config.get('editor.softWrapAtPreferredLineLength')
         width = lineLength * @minimap.getCharWidth()
 
-        if softWrap and softWrapAtPreferredLineLength and lineLength and width < @width
-          @marginRight = width - @width
+        if softWrap and softWrapAtPreferredLineLength and lineLength and width <= @width
+          @flexBasis = width
           canvasWidth = width
         else
-          @marginRight = null
+          delete @flexBasis
       else
-        delete @marginRight
+        delete @flexBasis
 
       if canvasWidth isnt @canvas.width or @height isnt @canvas.height
         @canvas.width = canvasWidth * devicePixelRatio

spec/minimap-element-spec.coffee

@@ -19,7 +19,7 @@ realOffsetLeft = (o) ->
 isVisible = (node) -> node.offsetWidth > 0 or node.offsetHeight > 0
 
 # Modify the global `devicePixelRatio` variable.
-window.devicePixelRatio = 2
+# window.devicePixelRatio = 2
 
 sleep = (duration) ->
   t = new Date
@@ -102,7 +102,7 @@ describe 'MinimapElement', ->
 
         atom-text-editor, atom-text-editor::shadow {
           height: 10px;
-          font-size: 9px;
+          /* font-size: 9px; */
         }
 
         atom-text-editor atom-text-editor-minimap, atom-text-editor::shadow atom-text-editor-minimap {
@@ -139,9 +139,7 @@ describe 'MinimapElement', ->
     it 'takes the height of the editor', ->
       expect(minimapElement.offsetHeight).toEqual(editorElement.clientHeight)
 
-      # Actually, when in a flex display of 200px width, 10% gives 18px
-      # and not 20px
-      expect(minimapElement.offsetWidth).toBeCloseTo(editorElement.clientWidth / 11, 0)
+      expect(minimapElement.offsetWidth).toBeCloseTo(editorElement.clientWidth / 10, 0)
 
     it 'knows when attached to a text editor', ->
       expect(minimapElement.attachedToTextEditor).toBeTruthy()
@@ -319,8 +317,8 @@ describe 'MinimapElement', ->
           waitsFor -> nextAnimationFrame isnt noAnimationFrame
           runs -> nextAnimationFrame()
 
-        it 'detect the resize and adjust itself', ->
-          expect(minimapElement.offsetWidth).toBeCloseTo(editorElement.offsetWidth / 11, 0)
+        it 'detects the resize and adjust itself', ->
+          expect(minimapElement.offsetWidth).toBeCloseTo(editorElement.offsetWidth / 10, 0)
           expect(minimapElement.offsetHeight).toEqual(editorElement.offsetHeight)
 
           expect(canvas.offsetWidth / devicePixelRatio).toBeCloseTo(minimapElement.offsetWidth, 0)
@@ -438,7 +436,7 @@ describe 'MinimapElement', ->
               {top, height} = visibleArea.getBoundingClientRect()
 
               visibleCenterY = top + (height / 2)
-              expect(visibleCenterY).toBeCloseTo(200)
+              expect(visibleCenterY).toBeCloseTo(200, 0)
 
         describe 'scrolling the editor to an arbitrary location', ->
           [scrollTo, scrollRatio] = []
@@ -490,7 +488,10 @@ describe 'MinimapElement', ->
           mousedown(canvas)
 
         it 'scrolls the editor to the line below the mouse', ->
-          expect(editorElement.getScrollTop()).toEqual(400)
+          {top, left, width, height} = minimapElement.canvas.getBoundingClientRect()
+          middle = top + height / 2
+          scrollTop =
+          expect(editorElement.getScrollTop()).toEqual(480)
 
       describe 'pressing the mouse on the minimap canvas (with scroll animation)', ->
         beforeEach ->
@@ -507,11 +508,11 @@ describe 'MinimapElement', ->
 
           waitsFor -> nextAnimationFrame isnt noAnimationFrame
 
-        xit 'scrolls the editor gradually to the line below the mouse', ->
+        it 'scrolls the editor gradually to the line below the mouse', ->
           # wait until all animations run out
           waitsFor ->
             nextAnimationFrame isnt noAnimationFrame and nextAnimationFrame()
-            editorElement.getScrollTop() >= 400
+            editorElement.getScrollTop() >= 480
 
       describe 'dragging the visible area', ->
         [visibleArea, originalTop] = []
@@ -688,7 +689,7 @@ describe 'MinimapElement', ->
 
         it 'offsets the scroll indicator by the difference', ->
           indicator = minimapElement.shadowRoot.querySelector('.minimap-scroll-indicator')
-          expect(realOffsetLeft(indicator)).toBeCloseTo(16, -1)
+          expect(realOffsetLeft(indicator)).toBeCloseTo(minimapElement.offsetWidth, -1)
 
       describe 'pressing the mouse on the minimap canvas', ->
         beforeEach ->
@@ -851,7 +852,7 @@ describe 'MinimapElement', ->
 
       it 'offsets the minimap by the difference', ->
         expect(realOffsetLeft(minimapElement)).toBeCloseTo(editorElement.clientWidth - 4, -1)
-        expect(minimapElement.clientWidth).toBeCloseTo(minimapWidth, -1)
+        expect(minimapElement.clientWidth).toEqual(4)
 
       describe 'the dom polling routine', ->
         it 'does not change the value', ->
@@ -874,7 +875,7 @@ describe 'MinimapElement', ->
           runs -> nextAnimationFrame()
 
         it 'makes the minimap smaller than soft wrap', ->
-          expect(minimapElement.offsetWidth).toBeCloseTo(10, -1)
+          expect(minimapElement.offsetWidth).toBeCloseTo(12, -1)
           expect(minimapElement.style.marginRight).toEqual('')
 
       describe 'and when minimap.minimapScrollIndicator setting is true', ->
@@ -910,7 +911,7 @@ describe 'MinimapElement', ->
           runs -> nextAnimationFrame()
 
         it 'adjusts the width of the minimap', ->
-          expect(minimapElement.offsetWidth).toBeCloseTo(editorElement.offsetWidth / 11, -1)
+          expect(minimapElement.offsetWidth).toBeCloseTo(editorElement.offsetWidth / 10, -1)
           expect(minimapElement.style.width).toEqual('')
 
       describe 'and when preferredLineLength >= 16384', ->
@@ -921,7 +922,7 @@ describe 'MinimapElement', ->
           runs -> nextAnimationFrame()
 
         it 'adjusts the width of the minimap', ->
-          expect(minimapElement.offsetWidth).toBeCloseTo(editorElement.offsetWidth / 11, -1)
+          expect(minimapElement.offsetWidth).toBeCloseTo(editorElement.offsetWidth / 10, -1)
           expect(minimapElement.style.width).toEqual('')
 
     describe 'when minimap.minimapScrollIndicator setting is true', ->

styles/minimap.less

@@ -6,6 +6,7 @@ atom-notifications:empty {
 
 atom-text-editor::shadow .editor--private {
   order: 2;
+  flex: 1 0 0;
 }
 
 atom-text-editor::shadow, atom-text-editor, html {
@@ -15,7 +16,8 @@ atom-text-editor::shadow, atom-text-editor, html {
     height: 100%;
     overflow: hidden;
     position: relative;
-    order: 2;
+    order: 3;
+    flex: 0 0 10%;
 
     -webkit-user-select: none;