rounded top corners on os x

[pthrasher]

In OS X, the default window behavior is to have rounded corners on both top and bottom. With the frameless window on OS X, only the bottom corners are rounded.

Is there a fix in the works for this? If not, I'd be willing to take a stab at it if someone could point me in the right direction.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[zcbenz]

This behaviour follows Chrome's package app, but I think you're right that the top corners should be rounded, I'll fix it.

[pthrasher]

Awesome, thanks a bunch.

I'd love to fix it myself, but I've never touched CEF, so I'm sure I'd have a bit of a learning curve ahead of me. I plan on digging in soon. Regardless, thanks. I look forward to the fix.

[zcbenz]

Patches are welcomed, we're not using CEF but plain platform-dependent code to implement native windows, you can find the implementation on Mac at src/browser/native_window_mac.mm.

[akrymski]

We're considering using node-webkit for the desktop version of our email app (post.fm) - but the frameless window with rounded corners is a must for us. What's the status of this currently? Thanks for a great project!

[rogerwang]

@akrymski Thanks for your interest. We didn't spend much time in it since the last comment. Since it's important to your project, we'll see to fix it soon.

[akrymski]

@rogerwang great, thanks!

[akrymski]

@rogerwang need a hand with it?

[pthrasher]

I'd definitely like to see it in there. I'd try to do it myself, but I don't have space on my SSD to download the projects dependencies, lolll...

[akrymski]

One of the best examples of this is the Rdio app, looks lovely on os x, and built with embedded chromium (they had to roll their own wrapper cause this project didn't exist yet)

[akrymski]

Any update on this? We really need the top rounded corners since thats the standard on ALL platforms, linux included ...

[rogerwang]

I spent some time on it on OSX and found: since we want to draw the titlebar with webkit, the window is made with no titlebar from OS (NSThemeFrame) and the content of the view is made at the top of the window area. The content is for WebKit and it's draw by an OpenGL overlay.

In order to make an OpenGL overlay with rounded corner, one of the choices is to clip in OpenGL and made the area outside the corner transparent. That will depends on the transparent work in #315 which is a big thing to do. Another choice might be do the clipping with the support from OS Window system, but that may not work on an OpenGL overlay (I'll try with it).

Another choice will be make the content view from WebKit lower and draw the titlebar yourself with Objective-C in native_window_mac.mm. I'm almost sure this would work. But it requires building node-webkit yourself and writing native code.

[akrymski]

Ideally we want to control the clipping on all platforms with a switch. For example we'd love for the app to look the same on all platforms, which means rounded corners everywhere.

How much is there left to do for #315 ? It looks like it's been closed?

Clipping with the support from OS Window system: unfortunately I'm not much of a Cocoa coder, so can't really comment on whether this is feasible, but would be great if not hard to try. Here's a relevant discussion of someone trying to do something similar in Cocoa that you may find useful: http://www.cocoabuilder.com/archive/cocoa/314184-round-corners-of-borderless-nswindow-without-set-it-transparent.html

Re drawing a native titlebar - this would have to be done for all platforms, and means tonnes of works. And I'm afraid I don't have enough space on my SSD to even give building a try :(

[pthrasher]

It's only the frameless window that has this problem. Thus, defeating the need to re-draw the titlebars.

[akrymski]

As a feature I think it would be something that makes node-webkit really stand out as it would let you build apps with a consistent look and feel across all platforms. Currently only adobe air offers this as far as I know.

[akrymski]

I'd like to offer a $500 bounty to anyone who can get this working (rounded corners on all the platforms) ideally as a parameter in node-webkit package.json. You can reach me on akrymski@gmail.com.

[lahdekorpi]

This is also a must have feature for one of my projects.
Did anyone try clipping support without OpenGL overlay?

[lahdekorpi]

This is kind of out of topic, but would it be hard to keep the close, minimize, maximize and fullscreen buttons on top of the webkit element so that native window elements can be used in a frameless window?

[pthrasher]

@lahdekorpi I could certainly see some value in that approach, however, if it were doable, it'd need to be an option. Not everyone wants the native buttons there, especially when using frameless.

[akrymski]

Impossible. You can provide your own controls, it's easy to copy the look of native ones if you like.

On 19 Feb 2013, at 14:19, Toni Lähdekorpi notifications@github.com wrote:

This is kind of out of topic, but would it be hard to keep the close, minimize, maximize and fullscreen buttons on top of the webkit element so that native window elements can be used in a frameless window?

—
Reply to this email directly or view it on GitHub.

[lahdekorpi]

@akrymski Impossible with node-webkit atm, yes. But not totally impossible as many apps do this.
I meant something like this http://parmanoir.com/Custom_NSThemeFrame

And no, I can't copy the look of native ones since they change depending on the theme in use:

I would be happy even if I just had the ability to use a custom static image for a framed window, in my own private node-webkit build :)

[pthrasher]

@lahdekorpi There's a cocoa API call to determine the current theme, so you could set it up to know which one was in use.

That said... I do see value in this, but they would likely never be native. I can imagine they'd be "fake" the question is where in the stack they are drawn... HTML, or cocoa.

[dubcanada]

I'm going to take a stab at this this week and see how it goes.

[tommoor]

@dubcanada @rogerwang any luck with this one? Seems it's been hanging around for a while and those square corners are still about in the frameless window.

[dubcanada]

It seems to be that the transparency part can do this.

The window itself is controlled by chromium. So yah...

[tommoor]

@dubcanada what does that entail? It can't be done within the current release right?

[pthrasher]

bump

[jeromegn]

How's that coming along? Want to use a frameless window with rounded corners in all corners!

[sindresorhus]

👍

[nc]

+1 totally need this. Anyone got any pointers to where this change would need to be made?

[pthrasher]

@akrymski Did anyone contact you regarding your bounty?

[ccverg]

@akrymski @pthrasher have you heard of Bountysource? Node-webkit has an outstanding $100 bounty on another issue already.

You can put a bounty directly onto this issue here: https://www.bountysource.com/issues/172947.

[tommoor]

I would like to bump this issue :)

[kiyanwang]

I'd also like to bump this issue :)

[pthrasher]

Looks like issue #315 is still open. Did anyone ever figure out if this was actually a blocker?

/cc @rogerwang

[tommoor]

Anyone willing to tackle this If I put a nice bounty on it? ;-)

[pilosof]

any news / patch / hack on this issue 👍 ?

[jorangreef]

https://github.com/atom/atom-shell is very similar to node-webkit and supports rounded corners on frameless windows on Mac OS X.

[rogerwang]

Previously it's hard to do this with upstream architecture. atom-shell tried to do this with 'views' UI framework in recent upstream version. Due to more features we provided upwards and required on the underlying UI layer, node-webkit will adopt a clean solution once 'views' is stable in upstream for Mac, see https://code.google.com/p/chromium/issues/detail?id=363529 and https://code.google.com/p/chromium/issues/detail?id=331669

[atlemo]

Just adding my voice here, would love to see this solved.

[cristianfraser]

+1

[gastonmorixe]

+1

[zhangtao0x]

+1

[sashahilton00]

@rogerwang any update on this issue? I know it's a minor detail, but once noticed, it becomes an irritation. Just a fix without the options and all that... :)

[sqwk]

Is there a way to disable these rounded corners?

[razor-4eg]

On OS X 10.13 frameless app again lost their rounded corners

[denigada]

I also have the same problem. All corners are rectangular on osx 10.13. Anyone found a fix for this?

[Christywl]

I open a simple frameless app on Mac 10.13.3 with nwjs-sdk-v0.31.4, and can reproduce this issue, all corners aren't rounded. No issue on Mac 10.12.6.

[ayushmanchhabra]

Closing due to inactivity.