More title-bar options (macOS) #13616

Merged
merged 23 commits into from Feb 22, 2017

Conversation

Projects
None yet
@simurai
Member

simurai commented Jan 14, 2017

Description of the Change

This replaces the current "Use Custom Title Bar" checkbox with a "Title Bar" dropdown. It has the following options:

  • native (default)
  • custom adapts to themes
  • custom-inset New! has more padding
  • hidden New! completely hidden

screen shot 2017-01-14 at 4 30 55 pm

Native

title-bar

Custom

title-bar 2

Custom Inset (new)

title-bar 3

Hidden (new)

title-bar 4

Alternate Designs

I also tried to add a "hide title-bar but keep the traffic lights" option:

title-bar-custom

Unfortunately there are a few edge cases that would make the UI look broken. It's something that a package, theme or styles.less could provide when custom-inset is used.

Another example with the tool-bar package taking the role of a "title bar":

title-bar-custom 2

Why Should This Be In Core?

Needs access to the BrowserWindow API.

Benefits

  • Provides more title-bar variations.
  • Themes can adapt to the different title-bar modes. Before there was no way to tell.
  • Allows packages/themes to customize even further, like hide the title-bar but keep the traffic lights.

Possible Drawbacks

When hiding the title-bar, managing the window needs to be done with the keyboard or from the menu. Dragging the window needs to be done with the status-bar. Not really a drawback since it's a choice and not the default.

Applicable Issues

This PR contiues from #10208 (Hide title bar on OS X) and #11790 (already merged).

/cc @atom/feedback @atom/design

paulcbetts and others added some commits Dec 29, 2015

Merge branch 'master' into pb-hidden-inset
# Conflicts:
#	src/main-process/atom-window.coffee
🔥 Remove paddings
Might get added again later.
Increase title-bar height
to fit the traffic lights when `titleBarStyle = 'hidden-inset'` is used.
Add custom-title-bar class
So themes/packages can adapt to the custom title-bar
Change box-sizing
So that the border doesn’t affect the height.
Merge branch 'master' into sm-hidden-inset
# Conflicts:
#	src/main-process/atom-application.coffee
Merge branch 'master' into sm-hidden-inset
# Conflicts:
#	src/config-schema.js
@net

This comment has been minimized.

Show comment
Hide comment
@net

net Jan 14, 2017

When hiding the title-bar, managing the window needs to be done with the keyboard or from the menu. Dragging the window needs to be done with the status-bar (or tree-view and tab-bar, but those could be hidden too). Not really a drawback since it's a choice and not the default.

Not entirely true. To move a window on macOS without a title bar, you can hover over the edge of the window so the resize arrow appears, then drag perpendicular to the direction of the resize arrow. For example, when hovering over the left or right edge, drag vertically instead of horizontally. (This also works for windows with a title bar, of course.)

net commented Jan 14, 2017

When hiding the title-bar, managing the window needs to be done with the keyboard or from the menu. Dragging the window needs to be done with the status-bar (or tree-view and tab-bar, but those could be hidden too). Not really a drawback since it's a choice and not the default.

Not entirely true. To move a window on macOS without a title bar, you can hover over the edge of the window so the resize arrow appears, then drag perpendicular to the direction of the resize arrow. For example, when hovering over the left or right edge, drag vertically instead of horizontally. (This also works for windows with a title bar, of course.)

@p-e-w

This comment has been minimized.

Show comment
Hide comment
@p-e-w

p-e-w Jan 14, 2017

Contributor

Since the traffic lights are gone now, it appears that the hidden option has nothing left that makes it macOS-specific – so why not enable that option for Linux and Windows as well?

If the only concern is rendering of the menu bar, I'd be more than happy with the menu bar being completely disabled in hidden mode (I don't use it anyway – the command palette is enough) if only it meant I could get rid of the eyesore that the light-colored titlebar is in GNOME, and I doubt I'm the only one who feels that way.

Contributor

p-e-w commented Jan 14, 2017

Since the traffic lights are gone now, it appears that the hidden option has nothing left that makes it macOS-specific – so why not enable that option for Linux and Windows as well?

If the only concern is rendering of the menu bar, I'd be more than happy with the menu bar being completely disabled in hidden mode (I don't use it anyway – the command palette is enough) if only it meant I could get rid of the eyesore that the light-colored titlebar is in GNOME, and I doubt I'm the only one who feels that way.

@simurai

This comment has been minimized.

Show comment
Hide comment
@simurai

simurai Jan 17, 2017

Member

@net To move a window on macOS without a title bar, you can hover over the edge of the window so the resize arrow appears, then drag perpendicular to the direction of the resize arrow. For example, when hovering over the left or right edge, drag vertically instead of horizontally.

Wow.. 🙀 I didn't know that. That's actually really clever. Had to gif it:

dragging

Member

simurai commented Jan 17, 2017

@net To move a window on macOS without a title bar, you can hover over the edge of the window so the resize arrow appears, then drag perpendicular to the direction of the resize arrow. For example, when hovering over the left or right edge, drag vertically instead of horizontally.

Wow.. 🙀 I didn't know that. That's actually really clever. Had to gif it:

dragging

@simurai

This comment has been minimized.

Show comment
Hide comment
@simurai

simurai Jan 17, 2017

Member

@p-e-w I doubt I'm the only one who feels that way.

Not the only one: #13249. And I agree too. But maybe better to create a new PR for Windows/Linux.

Member

simurai commented Jan 17, 2017

@p-e-w I doubt I'm the only one who feels that way.

Not the only one: #13249. And I agree too. But maybe better to create a new PR for Windows/Linux.

@tyrollins

This comment has been minimized.

Show comment
Hide comment
@tyrollins

tyrollins Jan 21, 2017

Would it be possible to add "close window" option to context menu when title bar is "hidden"?

Would it be possible to add "close window" option to context menu when title bar is "hidden"?

@simurai

This comment has been minimized.

Show comment
Hide comment
@simurai

simurai Jan 24, 2017

Member

@tyrollins It should be possible, although that would clutter up the context menu with something that isn't directly related to where your mouse is and more global.

Member

simurai commented Jan 24, 2017

@tyrollins It should be possible, although that would clutter up the context menu with something that isn't directly related to where your mouse is and more global.

@thomasjo

This comment has been minimized.

Show comment
Hide comment
@thomasjo

thomasjo Jan 24, 2017

Member

@tyrollins Possible yes, but as alluded to by @simurai, such an option does not belong there. Adding such an option would then also necessitate adding e.g. Save, Save As…, Quit, Close Tab, etc.

Member

thomasjo commented Jan 24, 2017

@tyrollins Possible yes, but as alluded to by @simurai, such an option does not belong there. Adding such an option would then also necessitate adding e.g. Save, Save As…, Quit, Close Tab, etc.

@tyrollins

This comment has been minimized.

Show comment
Hide comment
@tyrollins

tyrollins Jan 31, 2017

@simurai @thomasjo Thanks for the response, your comments convinced me. I was a bit to prompt with the previous comment. Very keen to see this implemented. Great work!

@simurai @thomasjo Thanks for the response, your comments convinced me. I was a bit to prompt with the previous comment. Very keen to see this implemented. Great work!

simurai added some commits Feb 21, 2017

Only allow status-bar to be dragged
It's the only area that is there all the time. The other areas change
depending on how much content there is. This could lead to wrongly train
your muscle memory.

@simurai simurai merged commit 98d859a into master Feb 22, 2017

5 checks passed

ci/circleci Your tests passed on CircleCI!
Details
continuous-integration/appveyor/branch AppVeyor build succeeded
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@simurai simurai deleted the sm-custom-title-bar branch Feb 22, 2017

@saschaeggi

This comment has been minimized.

Show comment
Hide comment
@saschaeggi

saschaeggi Mar 7, 2017

@simurai how can I get this new feature? :)

@simurai how can I get this new feature? :)

@simurai

This comment has been minimized.

Show comment
Hide comment
@simurai

simurai Mar 8, 2017

Member

@saschaeggi this will be in Atom 1.16. Beta should be out soon-ish.

Member

simurai commented Mar 8, 2017

@saschaeggi this will be in Atom 1.16. Beta should be out soon-ish.

@saschaeggi

This comment has been minimized.

Show comment
Hide comment
@saschaeggi

saschaeggi Mar 8, 2017

@simurai great news, cheers from Zurich :)

@simurai great news, cheers from Zurich :)

@jdsimcoe

This comment has been minimized.

Show comment
Hide comment
@jdsimcoe

jdsimcoe Mar 9, 2017

@simurai In my zero-title-bar plugin I was able to use the empty space to the right of the tab-bar area to allow dragging:

https://github.com/jdsimcoe/zero-title-bar

I simply set .tab-bar .tab to -webkit-app-region: no-drag;. This ensured that tabs retained their default behavior. It's worth considering adding support for this when hidden mode is activated.

jdsimcoe commented Mar 9, 2017

@simurai In my zero-title-bar plugin I was able to use the empty space to the right of the tab-bar area to allow dragging:

https://github.com/jdsimcoe/zero-title-bar

I simply set .tab-bar .tab to -webkit-app-region: no-drag;. This ensured that tabs retained their default behavior. It's worth considering adding support for this when hidden mode is activated.

@lexicalunit

This comment has been minimized.

Show comment
Hide comment
@lexicalunit

lexicalunit Mar 9, 2017

Contributor

@jdsimcoe, it seems like your plugin is a fork with a small modification of my no-title-bar package.

My copyright is even in your repository's commit history.

I am perfectly fine with you or anyone copying, modifying, and distributing my original codebase. However I am not sure that you've satisfied the following provision of the MIT license in the case of zero-title-bar:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

Considering a substantial portion of your package is my code, if you wouldn't mind please updating your repository's LICENSE and README to reflect as much, I would be grateful!

You might also be interested in the recent PR that author @thfrlw submitted to my package which provides the same functionality of being able to drag the window using the empty space to the right of non-full-width tab-bars. It does so in a way that does not force a tab height as your package does.

Your zero-title-bar:

zero

See how the tab hight has been incorrectly adjusted to be wider than intended by the theme I am using?

My no-title-bar:

no

With @thfrlw's solution, I do not have this problem. Perhaps your modification would best be implemented within no-title-bar. I would be happy to accept a PR or respond to an issue you are having with my package. Cheers!

Contributor

lexicalunit commented Mar 9, 2017

@jdsimcoe, it seems like your plugin is a fork with a small modification of my no-title-bar package.

My copyright is even in your repository's commit history.

I am perfectly fine with you or anyone copying, modifying, and distributing my original codebase. However I am not sure that you've satisfied the following provision of the MIT license in the case of zero-title-bar:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

Considering a substantial portion of your package is my code, if you wouldn't mind please updating your repository's LICENSE and README to reflect as much, I would be grateful!

You might also be interested in the recent PR that author @thfrlw submitted to my package which provides the same functionality of being able to drag the window using the empty space to the right of non-full-width tab-bars. It does so in a way that does not force a tab height as your package does.

Your zero-title-bar:

zero

See how the tab hight has been incorrectly adjusted to be wider than intended by the theme I am using?

My no-title-bar:

no

With @thfrlw's solution, I do not have this problem. Perhaps your modification would best be implemented within no-title-bar. I would be happy to accept a PR or respond to an issue you are having with my package. Cheers!

@jdsimcoe

This comment has been minimized.

Show comment
Hide comment
@jdsimcoe

jdsimcoe Mar 9, 2017

@lexicalunit I meant you know direspect, so sorry for lousing that up. I adjusted my README to reflect that my plugin is based on your no-title-bar plugin:

https://github.com/jdsimcoe/zero-title-bar

I adjusted the license and put my name in there because I wasn't sure how I should probably document the LICENSE portion but will change it any way that satisfies your request.

jdsimcoe commented Mar 9, 2017

@lexicalunit I meant you know direspect, so sorry for lousing that up. I adjusted my README to reflect that my plugin is based on your no-title-bar plugin:

https://github.com/jdsimcoe/zero-title-bar

I adjusted the license and put my name in there because I wasn't sure how I should probably document the LICENSE portion but will change it any way that satisfies your request.

@lexicalunit

This comment has been minimized.

Show comment
Hide comment
@lexicalunit

lexicalunit Mar 9, 2017

Contributor

Thank you @jdsimcoe! I assumed you had no ill-intention. I think diversity in open source is an asset and look forward to seeing where you take zero-title-bar as you maintain it and it diverges from my package in potentially exciting ways.

I have also forked others' source code in the past and in one particular instance I modified, over time, their source to the point where it was nearly an entirely different codebase of my own writing. Yet I maintained some prominent documentation about the history of the source code in good faith.

Thank you again for the quick turn around on this issue! 🎉

Contributor

lexicalunit commented Mar 9, 2017

Thank you @jdsimcoe! I assumed you had no ill-intention. I think diversity in open source is an asset and look forward to seeing where you take zero-title-bar as you maintain it and it diverges from my package in potentially exciting ways.

I have also forked others' source code in the past and in one particular instance I modified, over time, their source to the point where it was nearly an entirely different codebase of my own writing. Yet I maintained some prominent documentation about the history of the source code in good faith.

Thank you again for the quick turn around on this issue! 🎉

@jdsimcoe

This comment has been minimized.

Show comment
Hide comment
@jdsimcoe

jdsimcoe Mar 9, 2017

@lexicalunit 👍 Yeah I'm going to dive into the new beta features and explore monkeying with custom-inset styles per @simurai's comments above:

screenshot

jdsimcoe commented Mar 9, 2017

@lexicalunit 👍 Yeah I'm going to dive into the new beta features and explore monkeying with custom-inset styles per @simurai's comments above:

screenshot

@lexicalunit

This comment has been minimized.

Show comment
Hide comment
@lexicalunit

lexicalunit Mar 9, 2017

Contributor

Awesome! Yeah this PR has some big implications for both of our packages, @jdsimcoe. I have been meaning to take some time to explore different options for the direction of my package in the new Atom beta using the new hidden custom title bar setting. Thank you @simurai for this feature, I know I'm going to love it!

Contributor

lexicalunit commented Mar 9, 2017

Awesome! Yeah this PR has some big implications for both of our packages, @jdsimcoe. I have been meaning to take some time to explore different options for the direction of my package in the new Atom beta using the new hidden custom title bar setting. Thank you @simurai for this feature, I know I'm going to love it!

@simurai

This comment has been minimized.

Show comment
Hide comment
@simurai

simurai Mar 10, 2017

Member

@jdsimcoe In my zero-title-bar plugin I was able to use the empty space to the right of the tab-bar area to allow dragging
@lexicalunit being able to drag the window using the empty space to the right of non-full-width tab-bars.

Yeah, was considering that but then decided against it. The reason is that you can't rely on the empty space because it keeps changing. If your muscle memory is trained to move towards the tab bar, it might be frustrating to realized that the tab bar is full and now you have to move your mouse down to the status bar. Probably better to let themes/packages enable it if the tab bar has some padding around the tabs. Or add some padding on the right (maybe with a border, icon on hover) so that you always know there is a place to drag.

Anyways, with this PR there are now 3 CSS classes that you could use to customize the tabs or other things:

  1. .custom-title-bar 👉 traffic-lights height: 22px
  2. .custom-inset-title-bar 👉 traffic-lights height: 38px
  3. .hidden-title-bar 👉 no traffic-lights
Member

simurai commented Mar 10, 2017

@jdsimcoe In my zero-title-bar plugin I was able to use the empty space to the right of the tab-bar area to allow dragging
@lexicalunit being able to drag the window using the empty space to the right of non-full-width tab-bars.

Yeah, was considering that but then decided against it. The reason is that you can't rely on the empty space because it keeps changing. If your muscle memory is trained to move towards the tab bar, it might be frustrating to realized that the tab bar is full and now you have to move your mouse down to the status bar. Probably better to let themes/packages enable it if the tab bar has some padding around the tabs. Or add some padding on the right (maybe with a border, icon on hover) so that you always know there is a place to drag.

Anyways, with this PR there are now 3 CSS classes that you could use to customize the tabs or other things:

  1. .custom-title-bar 👉 traffic-lights height: 22px
  2. .custom-inset-title-bar 👉 traffic-lights height: 38px
  3. .hidden-title-bar 👉 no traffic-lights

@simurai simurai referenced this pull request in suda/tool-bar Mar 10, 2017

Open

Replace custom inset title bar (macOS) #186

@jdsimcoe

This comment has been minimized.

Show comment
Hide comment
@jdsimcoe

jdsimcoe Mar 10, 2017

Fabulous, @simurai! 👏 Thanks for the color!

Fabulous, @simurai! 👏 Thanks for the color!

@eboracus

This comment has been minimized.

Show comment
Hide comment
@eboracus

eboracus Mar 10, 2017

For the ability to still drag the window with little or no (or unreliable) empty space available, would it be a good suggestion to introduce a hotkey to change dragging a tab from move tab position to move entire window position.

So for example click and drag on any tab and it behave as it does now and moves the relative position of that particular tab, but hold down say alt + click and drag moves the whole window. Similar to alt + click anywhere on window to drag it on some platforms.

Having this off by default and toggle-able would allow the user to know what is needed to move the window, as opposed to introducing a 'hidden' method.

For the ability to still drag the window with little or no (or unreliable) empty space available, would it be a good suggestion to introduce a hotkey to change dragging a tab from move tab position to move entire window position.

So for example click and drag on any tab and it behave as it does now and moves the relative position of that particular tab, but hold down say alt + click and drag moves the whole window. Similar to alt + click anywhere on window to drag it on some platforms.

Having this off by default and toggle-able would allow the user to know what is needed to move the window, as opposed to introducing a 'hidden' method.

@lexicalunit

This comment has been minimized.

Show comment
Hide comment
@lexicalunit

lexicalunit Mar 10, 2017

Contributor

@eboracus that actually sounds like a neat idea! I may take a crack at it this weekend.

Contributor

lexicalunit commented Mar 10, 2017

@eboracus that actually sounds like a neat idea! I may take a crack at it this weekend.

@j-f1

This comment has been minimized.

Show comment
Hide comment
@j-f1

j-f1 Mar 10, 2017

@lexicalunit You could also toggle the visibility of the tab bar to show a draggable area.

j-f1 commented Mar 10, 2017

@lexicalunit You could also toggle the visibility of the tab bar to show a draggable area.

@lexicalunit lexicalunit referenced this pull request in lexicalunit/no-title-bar Mar 10, 2017

Closed

Optional drag window using keyboard modifier #13

@thfrlw

This comment has been minimized.

Show comment
Hide comment
@thfrlw

thfrlw Mar 14, 2017

Managed to get this, using One light theme, hidden title bar, flex-tool-bar package and some custom stylesheets.
screen-shot-2017-03-14-at-15 03 21

thfrlw commented Mar 14, 2017

Managed to get this, using One light theme, hidden title bar, flex-tool-bar package and some custom stylesheets.
screen-shot-2017-03-14-at-15 03 21

@simurai

This comment has been minimized.

Show comment
Hide comment
@simurai

simurai Mar 14, 2017

Member

@thfrlw Hehe.. probably a little against Apple's HIG, but clever hack. 😆

Do the custom traffic lights actually work, or would they still need to be wired up?

Member

simurai commented Mar 14, 2017

@thfrlw Hehe.. probably a little against Apple's HIG, but clever hack. 😆

Do the custom traffic lights actually work, or would they still need to be wired up?

@thfrlw

This comment has been minimized.

Show comment
Hide comment
@thfrlw

thfrlw Mar 14, 2017

It does work, here is a snippet from toolbar.cson, it explains how.

{
	"type": "button",
	"callback": "window:close",
	"className": "window-ctrl, red"
},
{
	"type": "button",
	"callback": "application:minimize",
	"className": "window-ctrl, green"
},
{
	"type": "button",
	"callback": "window:toggle-full-screen",
	"className": "window-ctrl, yellow"
}

thfrlw commented Mar 14, 2017

It does work, here is a snippet from toolbar.cson, it explains how.

{
	"type": "button",
	"callback": "window:close",
	"className": "window-ctrl, red"
},
{
	"type": "button",
	"callback": "application:minimize",
	"className": "window-ctrl, green"
},
{
	"type": "button",
	"callback": "window:toggle-full-screen",
	"className": "window-ctrl, yellow"
}
@lee-dohm

This comment has been minimized.

Show comment
Hide comment
@lee-dohm

lee-dohm Mar 14, 2017

Member

Since this PR is merged and this discussion is not directly regarding the PR itself, could we move it to Discuss? It will also make these suggested enhancements more visible to the community, I think 😀

Member

lee-dohm commented Mar 14, 2017

Since this PR is merged and this discussion is not directly regarding the PR itself, could we move it to Discuss? It will also make these suggested enhancements more visible to the community, I think 😀

@jdsimcoe

This comment has been minimized.

Show comment
Hide comment

👍

@Wolfr

This comment has been minimized.

Show comment
Hide comment
@Wolfr

Wolfr Mar 15, 2017

Haha @thfrlw that is awesome :)

Wolfr commented Mar 15, 2017

Haha @thfrlw that is awesome :)

@xtoolkit

This comment has been minimized.

Show comment
Hide comment
@xtoolkit

xtoolkit Mar 19, 2017

hi
my customize for hide titlebar: xtoolkit/arshen-ac#1

hi
my customize for hide titlebar: xtoolkit/arshen-ac#1

@xtoolkit xtoolkit referenced this pull request in xtoolkit/arshen-ac Mar 19, 2017

Open

pre v1 #1

@deiga deiga referenced this pull request in lexicalunit/no-title-bar May 5, 2017

Closed

Should this be closed, as core includes this functionality already? #16

@danielbayley

This comment has been minimized.

Show comment
Hide comment
@danielbayley

danielbayley Jul 31, 2017

Contributor

@thfrlw Neat! Mind sharing your styles? I kind of got it working, but the behaviour doesn't quite match the native controls…

Contributor

danielbayley commented Jul 31, 2017

@thfrlw Neat! Mind sharing your styles? I kind of got it working, but the behaviour doesn't quite match the native controls…

@thfrlw

This comment has been minimized.

Show comment
Hide comment
@thfrlw

thfrlw Aug 2, 2017

@danielbayley Thanks!
I actually stoped using custom buttons & use native buttons now with styling around it.
You should check this gist. It might have something useful.
https://gist.github.com/thfrlw/8a89b1c93ee2bf27ebedcbbdc5ce5ade

thfrlw commented Aug 2, 2017

@danielbayley Thanks!
I actually stoped using custom buttons & use native buttons now with styling around it.
You should check this gist. It might have something useful.
https://gist.github.com/thfrlw/8a89b1c93ee2bf27ebedcbbdc5ce5ade

@lexicalunit lexicalunit referenced this pull request in lexicalunit/no-title-bar Aug 9, 2017

Closed

Vertical traffic-light alignment/bleed issue on 1.18/"one light" #17

@bugaevc bugaevc referenced this pull request in electron/electron Feb 13, 2018

Open

Native headerbars #11907

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment