Merge pull request atom#15506 from atom/as-honor-scrollbar-visible-on…

…ly-when-scrolling Honor macOS "Show scrollbars only when scrolling" setting
feicc · Aug 31, 2017 · 3e10a84 · 3e10a84
2 parents f85deec + 50088b1
commit 3e10a84
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
@@ -688,17 +688,17 @@ describe('TextEditorComponent', () => {
       await component.getNextUpdatePromise()
       element.style.width = component.getGutterContainerWidth() + component.getContentHeight() - 20 + 'px'
       await component.getNextUpdatePromise()
-      expect(component.isHorizontalScrollbarVisible()).toBe(true)
-      expect(component.isVerticalScrollbarVisible()).toBe(false)
+      expect(component.canScrollHorizontally()).toBe(true)
+      expect(component.canScrollVertically()).toBe(false)
       expect(element.offsetHeight).toBe(component.getContentHeight() + component.getHorizontalScrollbarHeight() + 2 * editorPadding)
 
       // When a vertical scrollbar is visible, autoWidth accounts for it
       editor.update({autoWidth: true, autoHeight: false})
       await component.getNextUpdatePromise()
       element.style.height = component.getContentHeight() - 20
       await component.getNextUpdatePromise()
-      expect(component.isHorizontalScrollbarVisible()).toBe(false)
-      expect(component.isVerticalScrollbarVisible()).toBe(true)
+      expect(component.canScrollHorizontally()).toBe(false)
+      expect(component.canScrollVertically()).toBe(true)
       expect(element.offsetWidth).toBe(
         component.getGutterContainerWidth() +
         component.getContentWidth() +
@@ -898,8 +898,8 @@ describe('TextEditorComponent', () => {
       editor.setText('x'.repeat(20) + 'y'.repeat(20))
       await component.getNextUpdatePromise()
 
-      expect(component.isHorizontalScrollbarVisible()).toBe(false)
-      expect(component.isVerticalScrollbarVisible()).toBe(false)
+      expect(component.canScrollVertically()).toBe(false)
+      expect(component.canScrollHorizontally()).toBe(false)
       expect(component.refs.horizontalScrollbar).toBeUndefined()
       expect(component.refs.verticalScrollbar).toBeUndefined()
     })

diff --git a/src/text-editor-component.js b/src/text-editor-component.js
@@ -381,7 +381,10 @@ class TextEditorComponent {
       this.measureGutterDimensions()
       this.remeasureGutterDimensions = false
     }
-    const wasHorizontalScrollbarVisible = this.isHorizontalScrollbarVisible()
+    const wasHorizontalScrollbarVisible = (
+      this.canScrollHorizontally() &&
+      this.getHorizontalScrollbarHeight() > 0
+    )
 
     this.measureLongestLineWidth()
     this.measureHorizontalPositions()
@@ -391,7 +394,12 @@ class TextEditorComponent {
       this.derivedDimensionsCache = {}
       const {screenRange, options} = this.pendingAutoscroll
       this.autoscrollHorizontally(screenRange, options)
-      if (!wasHorizontalScrollbarVisible && this.isHorizontalScrollbarVisible()) {
+
+      const isHorizontalScrollbarVisible = (
+        this.canScrollHorizontally() &&
+        this.getHorizontalScrollbarHeight() > 0
+      )
+      if (!wasHorizontalScrollbarVisible && isHorizontalScrollbarVisible) {
         this.autoscrollVertically(screenRange, options)
       }
       this.pendingAutoscroll = null
@@ -439,13 +447,13 @@ class TextEditorComponent {
     if (this.hasInitialMeasurements) {
       if (model.getAutoHeight()) {
         clientContainerHeight = this.getContentHeight()
-        if (this.isHorizontalScrollbarVisible()) clientContainerHeight += this.getHorizontalScrollbarHeight()
+        if (this.canScrollHorizontally()) clientContainerHeight += this.getHorizontalScrollbarHeight()
         clientContainerHeight += 'px'
       }
       if (model.getAutoWidth()) {
         style.width = 'min-content'
         clientContainerWidth = this.getGutterContainerWidth() + this.getContentWidth()
-        if (this.isVerticalScrollbarVisible()) clientContainerWidth += this.getVerticalScrollbarWidth()
+        if (this.canScrollVertically()) clientContainerWidth += this.getVerticalScrollbarWidth()
         clientContainerWidth += 'px'
       } else {
         style.width = this.element.style.width
@@ -716,18 +724,21 @@ class TextEditorComponent {
     if (this.shouldRenderDummyScrollbars && !this.props.model.isMini()) {
       let scrollHeight, scrollTop, horizontalScrollbarHeight
       let scrollWidth, scrollLeft, verticalScrollbarWidth, forceScrollbarVisible
+      let canScrollHorizontally, canScrollVertically
 
       if (this.hasInitialMeasurements) {
         scrollHeight = this.getScrollHeight()
         scrollWidth = this.getScrollWidth()
         scrollTop = this.getScrollTop()
         scrollLeft = this.getScrollLeft()
+        canScrollHorizontally = this.canScrollHorizontally()
+        canScrollVertically = this.canScrollVertically()
         horizontalScrollbarHeight =
-          this.isHorizontalScrollbarVisible()
+          canScrollHorizontally
           ? this.getHorizontalScrollbarHeight()
           : 0
         verticalScrollbarWidth =
-          this.isVerticalScrollbarVisible()
+          canScrollVertically
           ? this.getVerticalScrollbarWidth()
           : 0
         forceScrollbarVisible = this.remeasureScrollbars
@@ -741,20 +752,20 @@ class TextEditorComponent {
           orientation: 'vertical',
           didScroll: this.didScrollDummyScrollbar,
           didMouseDown: this.didMouseDownOnContent,
+          canScroll: canScrollVertically,
           scrollHeight,
           scrollTop,
           horizontalScrollbarHeight,
-          verticalScrollbarWidth,
           forceScrollbarVisible
         }),
         $(DummyScrollbarComponent, {
           ref: 'horizontalScrollbar',
           orientation: 'horizontal',
           didScroll: this.didScrollDummyScrollbar,
           didMouseDown: this.didMouseDownOnContent,
+          canScroll: canScrollHorizontally,
           scrollWidth,
           scrollLeft,
-          horizontalScrollbarHeight,
           verticalScrollbarWidth,
           forceScrollbarVisible
         })
@@ -2576,22 +2587,22 @@ class TextEditorComponent {
   }
 
   getScrollContainerClientWidth () {
-    if (this.isVerticalScrollbarVisible()) {
+    if (this.canScrollVertically()) {
       return this.getScrollContainerWidth() - this.getVerticalScrollbarWidth()
     } else {
       return this.getScrollContainerWidth()
     }
   }
 
   getScrollContainerClientHeight () {
-    if (this.isHorizontalScrollbarVisible()) {
+    if (this.canScrollHorizontally()) {
       return this.getScrollContainerHeight() - this.getHorizontalScrollbarHeight()
     } else {
       return this.getScrollContainerHeight()
     }
   }
 
-  isVerticalScrollbarVisible () {
+  canScrollVertically () {
     const {model} = this.props
     if (model.isMini()) return false
     if (model.getAutoHeight()) return false
@@ -2602,7 +2613,7 @@ class TextEditorComponent {
     )
   }
 
-  isHorizontalScrollbarVisible () {
+  canScrollHorizontally () {
     const {model} = this.props
     if (model.isMini()) return false
     if (model.getAutoWidth()) return false
@@ -2951,15 +2962,18 @@ class DummyScrollbarComponent {
   render () {
     const {
       orientation, scrollWidth, scrollHeight,
-      verticalScrollbarWidth, horizontalScrollbarHeight, forceScrollbarVisible,
-      didScroll, didMouseDown
+      verticalScrollbarWidth, horizontalScrollbarHeight,
+      canScroll, forceScrollbarVisible, didScroll, didMouseDown
     } = this.props
 
     const outerStyle = {
       position: 'absolute',
       contain: 'strict',
-      zIndex: 1
+      zIndex: 1,
+      willChange: 'transform'
     }
+    if (!canScroll) outerStyle.visibility = 'hidden'
+
     const innerStyle = {}
     if (orientation === 'horizontal') {
       let right = (verticalScrollbarWidth || 0)
@@ -2970,9 +2984,6 @@ class DummyScrollbarComponent {
       outerStyle.overflowY = 'hidden'
       outerStyle.overflowX = forceScrollbarVisible ? 'scroll' : 'auto'
       outerStyle.cursor = 'default'
-      if (horizontalScrollbarHeight === 0) {
-        outerStyle.visibility = 'hidden'
-      }
       innerStyle.height = '15px'
       innerStyle.width = (scrollWidth || 0) + 'px'
     } else {
@@ -2984,9 +2995,6 @@ class DummyScrollbarComponent {
       outerStyle.overflowX = 'hidden'
       outerStyle.overflowY = forceScrollbarVisible ? 'scroll' : 'auto'
       outerStyle.cursor = 'default'
-      if (verticalScrollbarWidth === 0) {
-        outerStyle.visibility = 'hidden'
-      }
       innerStyle.width = '15px'
       innerStyle.height = (scrollHeight || 0) + 'px'
     }