Hide title bar on OS X

[anaisbetts]

This PR is mostly to get folx excited, because my CSS-fu is far too poor to make it actually work - on OS X, remove the Title Bar to fit in with other Yosemite apps - based on @simurai's design at https://discuss.atom.io/t/hide-system-window-title-bar/14578/8:

In safe mode:

TODO:

• Set title-bar-style on the window
• Ensure window is draggable in the parts that it should be (window background, top-left corner), but buttons are still clickable
• Solve weird race condition in CSS where padding doesn't apply when tree view is collapsed / recreated
• Solve how to make tabs indented to the right a bit when left panes are collapsed
• Figure out a way to make tabs draggable
• Special case OS X 10.7/10.8, where this API isn't supported

Closes #4599

[joshaber]

😻

[simurai]

😋

Solve how to make tabs indented to the right a bit when left panes are collapsed

The following should add extra padding if the left atom-panel-container is empty. Kinda a hack to rely on an empty element, but maybe ok to test it out.

.platform-darwin {
  atom-panel-container.left:empty + atom-workspace-axis.vertical .tab-bar {
    padding-left: 100px;
  }
}

[simurai]

It seems that you can't drag the tabs. Probably issue electron/electron#3009.

If we don't wanna wait for a fix, we could mimic a title bar that is full width. And maybe add the title to make some use of the space.

.platform-darwin {
  atom-panel.left {
    padding-top: 0;
  }

  atom-workspace {
    padding-top: 36px;
  }
}

[mnquintana]

Refs #4599

[anaisbetts]

@simurai I bet we can work around this by creating dummy divs that take up the extra space in places we want draggable - basically, the bug revolves around visually overlapping -webkit-app-regions and if you can make them not overlap, it works

[anaisbetts]

@zcbenz Is there any clever trick that we can do to make tabs draggable in the non-client region?

[zcbenz]

@zcbenz Is there any clever trick that we can do to make tabs draggable in the non-client region?

No, it has been a long hurting issue but we still don't know how to solve it.

[benogle]

Oh cool. Crazy it's so little code.

[simurai]

For now.. how about this:

1. Wait till Add top/bottom bars #9274 is merged.
2. Change to 'title-bar-style': 'hidden'. I think it makes the traffic lights more compact, have less padding.
3. Add a title-bar. It could say the same as it currently does. Directory and current file. Not sure if the "right click to open parent folder" is needed.

It's not as compact as having the traffic lights next to the tabs. But on the other hand it gives a larger reserved area to drag around the window vs. the smaller space next to the tabs.

[benogle]

Is this an osx only thing? How does it look on other platforms?

[anaisbetts]

Is this an osx only thing? How does it look on other platforms?

Yeah, this only applies on OS X, other platforms will have the normal title bar

[anaisbetts]

This will be harder than one would assume from a CSS perspective, a lot of components use height: 100% which breaks being able to add any vertical component, we probably have to retool the panes to use Flexbox

[lee-dohm]

@paulcbetts Is this something that you're still interested in pursuing? Is it blocked by something?

[benogle]

@lee-dohm I think we're going to do what @simurai mentioned above:

• Wait till Add top/bottom bars #9274 is merged.
• Change to 'title-bar-style': 'hidden'. I think it makes the traffic lights more compact, have less padding.
• Add a title-bar. It could say the same as it currently does. Directory and current file. Not sure if the "right click to open parent folder" is needed.

(#9274 is merged now!) Not sure if it will happen in this PR or not though.

[anaisbetts]

@benogle I'll have a look soonish

[jneubrand]

It's been two months—can we get an update? Can we help somehow? 😁

[samwillis]

It looks to me like the Brave guys have fixed it in their fork of Electron brave/muon#13 and it just needs merging upstream.

[simurai]

The dragging issue seems to be fixed in electron/electron#5557

🔜 🔜 🔜 😻

[anaisbetts]

@simurai 💖

[FezVrasta]

Is there a way to apply these changes without compiling the whole app from scratch?

[anaisbetts]

@FezVrasta Nope

[controversial]

@simurai Any update? I assume your last comment about the electron fix means we won't have to settle for the look where the buttons are above the tabs, it can all be inline 😃, and we can have the ideal solution proposed in the initial post. Is this correct? I hope so, that would mean there's only one more checkbox to go.

So, any updates? (this is the feature I want the most out of Atom, it would really give it an awesome native feel.)

[simurai]

@The-Penultimate-Defenestrator I assume your last comment about the electron fix means we won't have to settle for the look where the buttons are above the tabs

Yeah, once Atom uses Electron 1.1.1 the tabs could be at the top (without title-bar).

But if, it probably should stay opt-in to not remove existing functionality, see #11790 (comment). Maybe like #11790 (comment).

[rjcorwin]

@50Wliu Hehe, ya, I meant Electron. Woops :P

Some screenshots of hyperterm...

[smlombardi]

@FezVrasta Thanks for sharing, but adding that code to my styles.less did not remove the titlebar in 1.11.0-beta0. The tabs and tree did move up, but I still have the default Mac titlebar.

[FezVrasta]

@smlombardi you have to compile the master to use this feature

[smlombardi]

Ah, I was confused as the release notes for 1.11 simply say

An option to show a custom title bar on macOS got added by @brumm ✨

Nothing about having to build my own atom.

[FezVrasta]

Ops sorry I didn't noticed it, then you just need to enable it from the settings 🙃

[CvX]

@smlombardi To hide macOS titlebar go to "Atom Beta" -> "Config…", and then under "core" add: useCustomTitleBar: true.

[steverandy]

I really like the look with titlebar hidden. Much cleaner.

.title-bar {
  height: 17px;
  visibility: hidden;
}

[nicooprat]

Works great! Any way to move these 3 Mac buttons? It's outside Atom view so I guess it's not possible with CSS only... Here's what I mean, I would like to move them a few pixels to bottom/right to make it more consistent:

It's really pixel perfection but, you know... Useless, so essential :)

[austincondiff]

Regarding "Figure out a way to make tabs draggable", isn't it possible to hide the titlebar altogether and make your own traffic lights using css like Nylas does? Wouldn't that make tabs draggable again because an invisible titlebar isn't in the way?

[50Wliu]

No longer blocked.

[simurai]

Ok, this PR currently looks like this:

Difference to master: Uses hidden-inset, which adds more padding to the traffic lights. But also the title-bar is bigger in height.

Hiding that custom title-bar

Now about entirely hiding the title-bar. It's not too hard in the default configuration, but it can get tricky if you consider all the possible options how people might use/customize Atom. Like when hiding the tree-view, the tabs need some padding:

But not when you add a top panel (like the tool-bar package):

Or what should happen if the left panel isn't wide enough, should the tab-bar add the padding?

There are probably more edge cases. I can think of the following:

1. Merge this PR, but let a community package, themes or style.less do the hiding.

2. Hide it in core, and add some warning to the toggle in the settings. Like "Note: Hiding the title-bar could cause issues when adding top/left panels".

3. Try to solve all those edge cases.. probably only doable with JS and not that easy.

4. Have a minimum width for the atom-panel-container.left so that the tabs and top panels don't have to worry about adding padding. But it adds extra space for people that wanna hide the tree-view. See below:

   

   And not ideal for panels that are smaller than the minimum width:

   

5. Also remove the traffic lights (frameless). You'd have to use keyboard shortcuts or the menu to do stuff like minimize or fullscreen. But would solve all the space problems.

Any other ideas?

[nicooprat]

I'd vote for solutions #1 + #2, for now at least, and provide here or wherever some fixes for styles.less?

[simurai]

For #1 there is now a PR: #12767

Maybe good thing to test it out in a package/theme first.

[simurai]

Superseded by #13616

[ghost]

I'm not sure if I understand these instructions, this is my config file and I can't "core.titleBar" to set to custom. I want to get ride of the title above the tabs.

[simurai]

@abduljamac Easiest way is to open the Atom Settings > Core and then at the bottom there is a "Title Bar" option with a drop down: