diff --git a/spec/dock-spec.js b/spec/dock-spec.js index c51122f5b..8fda3900e 100644 --- a/spec/dock-spec.js +++ b/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) }) }) }) diff --git a/src/dock.js b/src/dock.js index b805a6401..f6a7aa0e4 100644 --- a/src/dock.js +++ b/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 } diff --git a/src/workspace-element.js b/src/workspace-element.js index 5c42572b2..5d9b28039 100644 --- a/src/workspace-element.js +++ b/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 () { diff --git a/static/docks.less b/static/docks.less index 320ac4c4a..7e0e88aa2 100644 --- a/static/docks.less +++ b/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%;