Programmatically detect when mouse approaches the edge of a dock

Previously, we would assign dock elements a minimum width/height of 2
pixels so that we could detect when the mouse approached the edge of a
hidden dock in order to show the chevron buttons. This, however, was
causing confusion for users, who expected that extra space to be
clickable in order to scroll editors located in the center dock.

With this commit we will instead register a global `mousemove` event on
the window right when attaching the workspace element to the DOM (the
event handler is debounced, so this shouldn't have any performance
consequence). Then, when mouse moves, we will programmatically detect
when it is approaching to the edge of a dock and show the chevron button
accordingly. This allows us to remove the `min-width` property from the
dock container element, which eliminates the confusing behavior
described above.

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(),
@@ -173,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)
   }
 
@@ -203,7 +203,6 @@ class WorkspaceElement extends HTMLElement {
 
   checkCleanupDockHoverEvents () {
     if (this.cursorInCenter && !this.hoveredDock) {
-      window.removeEventListener('mousemove', this.handleEdgesMouseMove)
       window.removeEventListener('dragend', this.handleDockDragEnd)
     }
   }

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%; }