Support for screen geometry and transparency [$145 awarded]

[peters]

Adding screen geometry is crucial for multi-monitor applications and for enabling docked applications (clock-wise of course).

Transparency is always handy, i know WebkitGtk (experimental) and CEF has solved this already, so i guess this should be an easy fix, if there is not any major blockers that i'm unaware of.

What is your policy on accepting patches for these kind of features (I would only submit for linux and windows) and what code style should one adhere to?

The $145 bounty on this issue has been claimed at Bountysource.

[rogerwang]

We like this feature and it would be great to accept patches from you.

If it's not ready for all the 3 platform, please add build flag in gyp file so it's off by default until it's implemented for all the 3 platforms. The coding style is the same as the Chromium project, except the patches for the Node sub-repo, which should follow Node's style.

[peters]

Great! :)

[darsain]

Is there any update on state of this patch? :) Transparency of the main window background was one of the first features I was looking for in the nw docs when I first discovered node-webkit (ehm, yesterday).

The absence of it really surprised me, but not as much as @zcbenz opinion on it in one of the node-webkit's mailing group topics, where he labeled this feature as a useless annoyance of users, seeing no use cases, and having small motivation to implement it (i.e. not any time soon). I wanted to cry myself to sleep after reading that :( There are amazing use cases, and it is sad that Zhao doesn't see them (like enabling us to create a really custom app UI's with any amount of rounded corners, or gaps between different elements in the window,... whatever I desire).

So I guess you are our only current hope @peters :)

Also, there is another issue going hand in hand with this, and that is a click-through API that would allow us to set the default background, whole app, or just a section of an app to ignore mouse events, and all clicks on this bg/window/section would go through to whatever is behind it. There have to be APIs for this in operating systems, so creating a unified node-webkit wrapper around them should be doable, right? ... right?! :)

[darsain]

There was an issue #19 asking for this, that got merged into #30, and that was marked as complete and closed with the introduction of frameless windows, but without the transparency implementation.

The mailing group topic about this is here: https://groups.google.com/forum/?fromgroups=#!topic/node-webkit/mrkjDJGjCVA/discussion

With links to solutions here: https://trac.mediamatic.nl/devcamps/wiki/TransparentWebView
and here: http://opensource.apple.com/source/WebKit/WebKit-6531.9/gtk/webkit/webkitwebview.cpp

with:

case PROP_TRANSPARENT:
        webkit_web_view_set_transparent(webView, g_value_get_boolean(value));

And that's about all I can help with :)

[yeudoblogqm]

hi @peters ,how to open your code ?

[allencblee]

I'd like to try working on this. But can't find any info on Content Shell supporting transparency. Any one any clues?

[rogerwang]

Welcome for your contribution! e.g. for Windows you could look into https://github.com/rogerwang/node-webkit/blob/master/src/browser/native_window_win.cc

[trevorlinton]

I've been working on this for Mac OS X Lion and Leopard. The chromium compositing IO path doesn't support native transparency, but (depending on the OpenGL implementation) shouldn't be hard to turn on. The Quartz 2D rendering path is a different story, I have it working however its buggy, especially with higher DPI's due to device scale factors.

Long story short it may end up with support in mac's but probably only using the compositing IO path :/, also it has significant performance hits in addition to what i've seen so far does not support hit/pass-through tests.

I believe transparency is already supported in Windows; however I haven't tested it.

[allencblee]

I've tested transparency in Win7. It doesn't work. I set the background of body to transparent. Anything I missed?

[yeudoblogqm]

2012/12/25 allencblee [email protected]

I've tested transparency in Win7. It doesn't work. I set the background of
body to transparent. Anything I missed?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/132#issuecomment-11662600.

how did you test it?

[trevorlinton]

Merry christmas, I've found a solution to transparency (at least in Mac OS X), working on an experimental patch. It works beautifully in Mac OS X and Windows but requires some changes in chromium (not optimal..)

1. Run in WebViewImpl.cc (WebView object) setIsTransparent(true)
2. compositing_iosurface_mac.mm, change line 50 from gl_FragColor = vec4(texture2DRect(texture, texture_coordinate).rgb,1); to gl_FragColor = vec4(texture2DRect(texture, texture_coordinate).rgba); The compositing surface in chromium won't copy alpha layers since they outright don't support transparency.
3. enable prefs.force_compositing_mode.

Obviously all NSViews/NSWindows in mac must be set to IsOpaque to NO. This however doesn't solve hit test problems (they're still getting trapped), and shadows on the frame need to be disabled for esthetic and functional reasons. From what I can see with Windows XP, 7 and 8 simply setting setIsTransparent works and that's it.

I don't have a linux environment to test it, hopefully someone else can shed some light on this problem. I'll push up a patch to (??) once its ready.

[joshuasmartin]

This was one of the features I was looking for too, @darsain. This would be extremely useful for emulating a JS windowing layer, without the user seeing the typical white canvas from the browser behind it.

[darsain]

@josmar52789: appjs has support for borderless mode, alpha transparency, and window opacity, but the alpha feature seems buggy, and project is somewhat stagnating right now - last commit 21 days ago, and issues tracker has a lot of issues without any dev response.

[allencblee]

Tried appjs too. There's still some major bugs like crashing when clicking the quit menu in the Mac OS dock. There're other similar opensource projects supporting transparency like XULRunner and TideSDK (used to be Titanium). XULRunner is basically the Firefox engine and it's a bit slow compared with V8/Webkit but it is very mature and has a comprehensive API. TideSDK is based on JSC/Webkit and is ok for small applications but could be slow for javascript intensive ones.

[Mithgol]

The API of XULRunner is generally more complicated than node-webkit's API and Node's API, because an incantation to call for any Mozilla's XPCOM is significantly larger than require(...).

[allencblee]

@trevorlinton, great work. Any further updates on your progress? By the way, how do I use it in HTML? Set body's background colour to transparent?

[trevorlinton]

I have transparency working in Mac OS X, windows support only works in
non-accelerated mode right now. There's some bugs currently in the
accelerated mode. The transparency support hasn't been integrated yet with
node webkits main build. I've added an additional switch to the manifest;
once transparency:true is set and you'll need to set the body background to
transparent.

You can find the forked code at trevorlinton/node-webkit and
trevorlinton/chromium.

On Fri, Jan 4, 2013 at 12:01 AM, allencblee [email protected]:

@trevorlinton https://github.com/trevorlinton, great work. Any further
updates on your progress? By the way, how do I use it in HTML? Set body's
background colour to transparent?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/132#issuecomment-11874155.

Trevor Linton
Cell: 801.556.5465

[trevorlinton]

Transparency support is ready for windows and mac os x. I've tested this in Leopard, Snow Leopard, Mountain Lion, Vista, Win7, Win8 with both software and hardware acceleration. You can find the commits here:

trevorlinton/chromium@794af4b
trevorlinton/chromium@0a6eec7
trevorlinton@05572fb
trevorlinton@e9ac9ef

I don't have a Linux/Aura build environment, if someone adds support for Linux/Aura please let me know.

-t

[rogerwang]

cool. Thanks for your work! Please add yourself to the AUTHORS file.

If no one would take the Linux work I'll do it.

And since the Linux support is not ready, please submit them to the nw-transparency branch, which I just created for both repos. Once Linux support is done I'll merge them to master.

[trevorlinton]

@rogerwang I pushed the patch into nw-transparency branch of node-webkit. However there are a few minor changes that need to be made to Chromium.src git repo, do you want to create a branch for that as well? I'm a little unsure where to put those changes...

[rogerwang]

@trevorlinton , our chromium repo is here:

https://github.com/zcbenz/chromium/tree/nw-transparency

apologies for the confusion

[ButzYung]

Any updates on the transparency support? This will be a very important feature for my desktop gadget project which often needs background transparency.

[trevorlinton]

Transparency has been added for leopard, snow leopard, lion, mountain lion, vista, win7, win8. I've merged all of the changes up with the branch. I believe roger's waiting for support for linux before merging into the main trunk and putting into the releases. I'm not sure of the status on linux.

[Mithgol]

Why is not Windows XP supported?

[ButzYung]

@trevorlinton Thanks for the info, but I prefer a release or built version (Windows Vista), as I don't have the resources to make my own build of node-webkit right now lol

@Mithgol I suppose the Windows transparency patch uses Desktop Window Manager, which is not available on XP. XP will require another approach.

[trevorlinton]

@Mithgol XP doesn't support DWM which is required for direct3d compositing with alpha transparency. Unfortunately this is a limitation from XP, most software vendors in addition are beginning to not support it since its been nearly ~10 years since it came out.

@ButzYung If you want to try a debug version (not guaranteed to work correctly) feel free http://www.cs.utah.edu/~tlinton/nw.zip. Let me know if you need a Mac OS X copy. Just set transparent=true in your json manifest as a config setting (or with Window.Create). In addition make sure you've set your background transparent. Hopefully this'll be worked into the main trunk soon.

[ButzYung]

@trevorlinton Yeah I would like to try a debug version... but your link is broken :P

[ButzYung]

@trevorlinton I have tried your debug version, but unfortunately it doesn't work as expected. I am using Windows Vista Home Basic 32-bit (yeah I know it's outdated with some features missing), with the latest service pack and all patches. With the "transparent=true" switch on and a CSS transparent bg on the page, the actual background is still solid (black instead of the usual white), with various other glitches. For example, buttons are missing on alert popup, and the usual context menu (with the close option) doesn't appear when right-click on the taskbar icon. I can close it only by manually closing all 3 instances of nw.exe on the task manager.

I know Vista Home Basic is missing/hiding some DWM feature (such as Aero Glass), and so I tried a hack on the Internet by editing some registry entries (mainly DWM/Composition and DWM/CompositionPolicy) and did the test again. It still begins as described above, but somehow when I close 1 or 2 nw.exe on task manager, the expected background transparency finally appears. The glitches are still there though, and the rendering speed appears to be slow, as if it is rendered in software instead of GPU.

[trevorlinton]

@ButzYung I'll look into vista home basic. Can you post the results of chrome://gpu to me at trevor dot linton at gmail? Can you also let me know what specific platform hardware you have? If you can include the software you're testing that'd be useful as well.

I'll test on vista home basic. I'd imagine it has to do with software rendering and the hack to enable compositing. Windows has 6 different window management systems, its difficult to tell (out of 5 different rendering composite contexts, with 7 different WM systems) what's going on.

[scottmas]

Woohoo! Thanks Roger. This is an awesome feature

[zzz654321]

win2003 下测试, 不能透明.
还有, 可以把工程里面的第三方模块和主体模块编译为动态库方式吗? 这样可以减少 nw,exe 的体积,
二次开发也方便.
我在研究 wke, 要做异型透明很方便. 但就是不能跨平台, jsc 的性能也太低了.

[charliewolf]

On Arch Linux x64 with the latest build a transparent window is showing up black instead of transparent. I have tried the extra command line switches. Any ideas?

[ButzYung]

I am (still) using Windows Vista Basic. I have been following this transparent feature since the beginning, and I have tested various test builds during the time, but none really worked well. Various things were broken in one way or another. @trevorlinton said the transparent feature was not supposed to work on Windows Vista version (probably Vista Basic and Windows 7 Basic as well) that didn't support Aero (DWM). Still, I downloaded v0.11.2 and gave it a try, and to my surprise, the transparency feature DOES work! There are some speed issues with 2D canvas, but it is still acceptable. What is really amazing is that WebGL works very well with no significant performance issue. All tests on my side have been fine so far. Thanks for the great works guys.

PS: Transparency works on Vista Basic only if the display is in "standard theme" (ie. DWM on). On "basic theme", transparency doesn't work with the "usual" white background displayed instead.

[jakejarrett]

Can confirm the bug @ori listed, in console it will list "color: lightgreen; background-color: black;"", source: file://thecurrentfile" without those arguments in package.json

[jtg-gg]

@ori @jakehh I'm not sure if i can support all linux platform. my linux environment is Ubuntu
anyway, what desktop / window manager you are using ? I'll try to install / test it on Ubuntu if I have time

[jakejarrett]

@jtg-gg I'm using elementary OS (just an ubuntu 14.04 base and custom Gnome 3.12 theme essentially)

[trappedinspacetime]

@jakehh Which window manager are you using? It doesn't work in metacity.

[jakejarrett]

@kensully The wm is mutter.

[trappedinspacetime]

I tested it in mutter 3.10.4 it seems to work.

[jtg-gg]

@kensully thx for testing it
@jakehh have you run the nodewebkit with "--enable-transparent-visuals --disable-gpu" params ?
@charliewolf what window manager are you using ? the window manager needs to have compositing capability. some window manager (like metacity) disabled it by default. you might want to search if you window manager support compositing, and how to enable it

[trevorlinton]

@jtg-gg You should email me when you have a second (see my github).

[rurigk]

@jakehh The problem is an outdated library in elementary os moon has to do with the version of ubuntu 12.04 is not supported

I think you will not have problems when released freya

[jakejarrett]

@rurigk i was using freya beta 1.

[Ivshti]

@jtg-gg is resizing a transparent window supported on Windows? It doesn't seem so for me (tested with NW 0.11 and 0.12 alpha)

[fritx]

any progress on background blurring effect? @rogerwang @jtg-gg

[tomasdev]

@fritx you could use http://www.blurjs.com/ ...

[ghost]

<style>
    body {
        -webkit-backdrop-filter: blur(10px);
    }
</style>

[matthew-dean]

@tomasdev @dkfiresky I doubt either of those will have the effect you think it will, because you have to consider that that takes effect on the rendering context of the web page. The background of the OS desktop is not "visible" to CSS, nor rendered by the browser, so it's not possible for anything you do in the browser to have an effect on it. It has to be done at the native / OS binding level.

[jtg-gg]

@fritx currently we have no plan for it, sorry about that, we are now busy with nw13

[fritx]

Thanks, guys!

[ghost]

@matthew-dean I agree that this might not work. If somehow this would be implemented not only to allow backdrop filters, but using them on background under the window – this would be great.

[psmithiv]

Any updates on click through on Linux? Thx.

[rogerwang]

@jeancode @enber79 please use only English in this project so all users can read. Thanks.