Cocoa: Custom Window Shape

[Qabal]

TL;DR: How can I host a Cef browser within a custom shaped window in Cocoa?

The Problem: I'm working with content designers that are creating "flyout" windows that display when the user mouses over some element in an HTML5 page. This flyout needs to be a separate browser window because they do not want the flyout window to be clipped by the browser in which the element is displayed. They would also like these flyout windows to have a custom shape (a rectangle with some rounded corners and a triangle that juts out that "anchors" the flyout to the HTML5 element, like a conversation bubble).

This is very straightforward to do on Windows. I just use SetWindowRgn to apply a mask to the parent HWND of the CefBrowser host. It's working perfectly there.

On Cocoa, I'm attempting to use the technique demonstrated here:

http://www.cocoawithlove.com/2008/12/dr ... -os-x.html

I have my own NSWindow-derived class that hosts the CefBrowser. Within that NSWindow, I've overridden setContentView and contentView as described in the link above, so that my own NSView-derived class that does custom drawing is injected between NSNextStepFrame and the actual NSView. And the thing is, it works. For about 1 second. I see my nice masked shape on the screen, but then it reverts back to an unmasked rectangle displaying the content of the browser.

It looks like Cef is overwriting some NSView somewhere with its own, or perhaps, there are some settings for Cef's views that don't respect the superview's custom shape. I've been programming Windows for 15 years but Cocoa for less than one, so I don't really know where to begin or if there is another approach that would achieve my goals. Does anyone have any insight into this problem?

[magreenblatt]

Does display of the rectangle correspond with the loading of the browser content? If so then you're likely seeing the underlay window. The window hosting GPU accelerated content is owned by the GPU process. OS X unlike Windows does not allow a child view/window to be owned by a separate process. Therefore, in order to show GPU accelerated content on OS X, it's necessary to make the parent window transparent and show the GPU window underneath it. You can try disabling the GPU (pass `--disable-gpu --disable-gpu-compositing` command-line flags), using in-process GPU (`--in-process-gpu`) or running in single-process mode (`--single-process`). However, all of these modes are unsupported and likely to cause other issues.

[Qabal]

Got it, thanks, that sounds exactly like what we're seeing. Do you know, does Cocoa support per-pixel transparency in its rendering? If so, I may be able to just give the window an alpha channel and let it remain a full rectangle while the content producers just use images with an alpha channel to provide the "shape."

[magreenblatt]

Got it, thanks, that sounds exactly like what we're seeing. Do you know, does Cocoa support per-pixel transparency in its rendering? If so, I may be able to just give the window an alpha channel and let it remain a full rectangle while the content producers just use images with an alpha channel to provide the "shape."

I'm not sure that will help since the GPU underlay window is rectangular and, because it manipulates the transparency of the overlay window, you'll still see the rectangle. You would likely need to use some other approach like capturing an image of what's behind the window and then rendering that in your window instead of relying on an alpha channel to do it for you.

[gonzo]

I'm doing some research on a project where I need to create a similar custom "flyout" window but on Windows instead of Mac. Would SetWindowRgn() (mentioned in the OP) with a polygon region work on its own? Or would we also need to impl OSR?

Code: Select all

                 /\
                /  \
+--------------+    +---------------+
|                                   |
|                                   |
|                                   |
|                                   |
|        Custom Flyout Window       |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
+-----------------------------------+