Merge pull request #14203 from atom/fb-mdt-dock-affordance-fixes

Ensure that dock toggle affordances can always be revealed

spec/dock-spec.js

@@ -110,6 +110,13 @@ 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)
+
+        // The content should be masked away.
+        expect(dockElement.querySelector('.atom-dock-mask').offsetHeight).toBe(0)
       })
     })
   })

src/dock.js

@@ -316,7 +316,7 @@ module.exports = class Dock {
         bounds.bottom = Number.POSITIVE_INFINITY
         break
       case 'left':
-        bounds.left = 0
+        bounds.left = Number.NEGATIVE_INFINITY
         break
     }
 

src/workspace-element.js

@@ -12,10 +12,13 @@ const _ = require('underscore-plus')
 class WorkspaceElement extends HTMLElement {
   attachedCallback () {
     this.focus()
+    this.htmlElement = document.querySelector('html')
+    this.htmlElement.addEventListener('mouseleave', this.handleCenterLeave)
   }
 
   detachedCallback () {
     this.subscriptions.dispose()
+    this.htmlElement.removeEventListener('mouseleave', this.handleCenterLeave)
   }
 
   initializeContent () {

static/docks.less

@@ -16,6 +16,11 @@ atom-dock {
 .atom-dock-inner {
   display: flex;
 
+  // Keep the area at least a pixel wide so that you have something to hover
+  // over to trigger the toggle button affordance even when fullscreen.
+  &.left, &.right { min-width: 1px; }
+  &.bottom { min-height: 1px; }
+
   &.bottom { width: 100%; }
   &.left, &.right { height: 100%; }
 
@@ -46,14 +51,6 @@ atom-dock {
   background-color: @tool-panel-background-color;
   overflow: hidden; // Mask the content.
 
-  // This shouldn't technically be necessary. Apparently, there's a bug in
-  // Chrome whereby the 100% width (in the bottom dock) and height (in left and
-  // right docks) won't actually take effect when the docks are given more
-  // space because another dock is hidden. Unsetting and resetting the width
-  // will correct the issue, as will changing its "display." However, only this
-  // seems to fix it without an actual runtime change occurring.
-  flex: 1;
-
   // One of these will be overridden by the component with an explicit size.
   // Which depends on the position of the dock.
   width: 100%;