Merge pull request #16546 from atom/as-allow-clicking-scrollbar-with-dock-indicators

Programmatically detect when mouse approaches the edge of a dock

spec/dock-spec.js

@@ -201,11 +201,7 @@ describe('Dock', () => {
         const dockElement = atom.workspace.getBottomDock().getElement()
         dockElement.querySelector('.atom-dock-resize-handle').dispatchEvent(new MouseEvent('mousedown', {detail: 2}))
         expect(dockElement.offsetHeight).toBe(0)
-
-        // There should still be a hoverable, absolutely-positioned element so users can reveal the
-        // toggle affordance even when fullscreened.
-        expect(dockElement.querySelector('.atom-dock-inner').offsetHeight).toBe(1)
-
+        expect(dockElement.querySelector('.atom-dock-inner').offsetHeight).toBe(0)
         // The content should be masked away.
         expect(dockElement.querySelector('.atom-dock-mask').offsetHeight).toBe(0)
       })

spec/workspace-element-spec.js

@@ -561,8 +561,6 @@ describe('WorkspaceElement', () => {
       expectToggleButtonHidden(rightDock)
       expectToggleButtonHidden(bottomDock)
 
-      workspaceElement.paneContainer.dispatchEvent(new MouseEvent('mouseleave'))
-
       // --- Right Dock ---
 
       // Mouse over where the toggle button would be if the dock were hovered
@@ -591,7 +589,7 @@ describe('WorkspaceElement', () => {
       // Mouse to edge of the window
       moveMouse({clientX: 575, clientY: 150})
       expectToggleButtonHidden(rightDock)
-      moveMouse({clientX: 600, clientY: 150})
+      moveMouse({clientX: 598, clientY: 150})
       expectToggleButtonVisible(rightDock, 'icon-chevron-left')
 
       // Click the toggle button again
@@ -627,7 +625,7 @@ describe('WorkspaceElement', () => {
       // Mouse to edge of the window
       moveMouse({clientX: 25, clientY: 150})
       expectToggleButtonHidden(leftDock)
-      moveMouse({clientX: 0, clientY: 150})
+      moveMouse({clientX: 2, clientY: 150})
       expectToggleButtonVisible(leftDock, 'icon-chevron-right')
 
       // Click the toggle button again
@@ -663,7 +661,7 @@ describe('WorkspaceElement', () => {
       // Mouse to edge of the window
       moveMouse({clientX: 300, clientY: 290})
       expectToggleButtonHidden(leftDock)
-      moveMouse({clientX: 300, clientY: 300})
+      moveMouse({clientX: 300, clientY: 299})
       expectToggleButtonVisible(bottomDock, 'icon-chevron-up')
 
       // Click the toggle button again

src/dock.js

@@ -327,12 +327,15 @@ module.exports = class Dock {
     // Include all panels that are closer to the edge than the dock in our calculations.
     switch (this.location) {
       case 'right':
+        if (!this.isVisible()) bounds.left = bounds.right - 2
         bounds.right = Number.POSITIVE_INFINITY
         break
       case 'bottom':
+        if (!this.isVisible()) bounds.top = bounds.bottom - 1
         bounds.bottom = Number.POSITIVE_INFINITY
         break
       case 'left':
+        if (!this.isVisible()) bounds.right = bounds.left + 2
         bounds.left = Number.NEGATIVE_INFINITY
         break
     }

src/workspace-element.js

@@ -104,6 +104,7 @@ class WorkspaceElement extends HTMLElement {
 
     this.addEventListener('mousewheel', this.handleMousewheel.bind(this), true)
     window.addEventListener('dragstart', this.handleDragStart)
+    window.addEventListener('mousemove', this.handleEdgesMouseMove)
 
     this.panelContainers = {
       top: this.model.panelContainers.top.getElement(),
@@ -132,6 +133,10 @@ class WorkspaceElement extends HTMLElement {
     return this
   }
 
+  destroy () {
+    this.subscriptions.dispose()
+  }
+
   getModel () { return this.model }
 
   handleDragStart (event) {
@@ -169,7 +174,6 @@ class WorkspaceElement extends HTMLElement {
     // being hovered.
     this.cursorInCenter = false
     this.updateHoveredDock({x: event.pageX, y: event.pageY})
-    window.addEventListener('mousemove', this.handleEdgesMouseMove)
     window.addEventListener('dragend', this.handleDockDragEnd)
   }
 
@@ -199,7 +203,6 @@ class WorkspaceElement extends HTMLElement {
 
   checkCleanupDockHoverEvents () {
     if (this.cursorInCenter && !this.hoveredDock) {
-      window.removeEventListener('mousemove', this.handleEdgesMouseMove)
       window.removeEventListener('dragend', this.handleDockDragEnd)
     }
   }

src/workspace.js

@@ -310,7 +310,10 @@ module.exports = class Workspace extends Model {
     this.originalFontSize = null
     this.openers = []
     this.destroyedItemURIs = []
-    this.element = null
+    if (this.element) {
+      this.element.destroy()
+      this.element = null
+    }
     this.consumeServices(this.packageManager)
   }
 
@@ -1570,6 +1573,7 @@ module.exports = class Workspace extends Model {
     if (this.activeItemSubscriptions != null) {
       this.activeItemSubscriptions.dispose()
     }
+    if (this.element) this.element.destroy()
   }
 
   /*

static/docks.less

@@ -16,12 +16,6 @@ atom-dock {
 .atom-dock-inner {
   display: flex;
 
-  // Keep the area at least 2 pixels wide so that you have something to hover
-  // over to trigger the toggle button affordance even when fullscreen.
-  // Needs to be 2 pixels to work on Windows when scaled to 150%. See atom/atom #15728
-  &.left, &.right { min-width: 2px; }
-  &.bottom { min-height: 1px; }
-
   &.bottom { width: 100%; }
   &.left, &.right { height: 100%; }