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 notifications@github.com

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/rogerwang/node-webkit/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 notifications@github.comwrote:

@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/rogerwang/node-webkit/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:

https://github.com/trevorlinton/chromium/commit/794af4b3f3b66945fd2e99272157b069c7f61100 https://github.com/trevorlinton/chromium/commit/0a6eec7213ee005da9c7b8e4383743c7dd82eeb5 https://github.com/trevorlinton/node-webkit/commit/05572fb60c4ae1486c27fd2a609b21025b9d69f6 https://github.com/trevorlinton/node-webkit/commit/e9ac9ef9820a3e9f0a0072603ecdc708f415ef80

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.

[ButzYung]

@trevorlinton Email sent. Thanks in advance.

I suppose Windows 7 Basic/Starter shares similar problems as Vista Basic, but I suppose these OS have all the requested features. They are just being hidden instead of missing. I have seen some hacks on the Internet which goes as far as enabling Aero glass transparency on Vista Basic.

The problems/issues described can be reproduced with any node-webkit apps.

[nprbst]

I would like to try a Mac OS X build with transparency. If there's anything I can do to help get this merged to master, just ask!

[trevorlinton]

@nathanprobst you can pick up a debug build: http://www.cs.utah.edu/~tlinton/nw-mac.zip

@ButzYung Do you have the Direct3D DLL's in the same directory as the executable? Tested this on Windows Vista home basic and didn't have any issues. I have about 3 more tests to try out.

[ButzYung]

@trevorlinton Do you mean "d3dcompiler_43.dll" and "d3dx9_43.dll"? I just did, but didn't seem to change anything.

Just to make sure, since the debug version contains only "nw.exe", I copied all the files from 0.3.7 to the folder of the debug nw.exe. Is this the correct way to run it?

[nprbst]

@trevorlinton Thanks! Sadly, my app loads and works correctly with "transparent: false", but the node-webkit process hangs and must be "Force Quit" when "transparent: true" is used. By "hangs" I mean:

• Only the "node-webkit" menu item is drawn. "Edit" and "Window" are missing.
• Clicking on "node-webkit" menu item only highlights, no menu appears
• No window becomes visible.

The following is the console output:

nathan$ /data/Downloads/node-webkit\ 2.app/Contents/MacOS/node-webkit 
[4411:0118/123106:ERROR:process_singleton_mac.cc(106)] Unable to obtain profile lock.
2013-01-18 12:31:06.110 node-webkit[4411:207] -[NSThemeFrame _fullScreenButtonOriginOriginal]: unrecognized selector sent to instance 0x6c15df30
2013-01-18 12:31:06.111 node-webkit[4411:207] -[NSThemeFrame _fullScreenButtonOriginOriginal]: unrecognized selector sent to instance 0x6c15df30

Here is the "window" segment of package.json:

  "window": {
    "frame": false,
    "toolbar": false,
    "transparent": true,
    "width": 975,
    "height": 600
  }

I'm happy to test future builds...

[ButzYung]

A few more things to report:

1. In my case, "transparent:true" automatically turns "toobar" and "frame" to false (ie. window is always frameless). Is this normal?
2. When "transparent" is false, everything works, except that things appear to be slower than usual (eg. console window takes seconds to draw and load, while it shows up immediately in the usual node-webkit build).

[pauliusuza]

@nathanprobst it seems that you are running two instances of the application: [4411:0118/123106:ERROR:process_singleton_mac.cc(106)] Unable to obtain profile lock.

try killing the node-webkit process, and launch app, see if it works.

[nprbst]

@pauliusuza You are correct that another process was running. However, that did not fix the issue...

nathan$ /data/Downloads/node-webkit\ 2.app/Contents/MacOS/node-webkit /data/VirtualBox/Shared/app.nw
[1783:0121/105523:ERROR:renderer_main.cc(218)] Running without renderer sandbox
^C
nathan$ /data/Downloads/node-webkit\ 2.app/Contents/MacOS/node-webkit /data/VirtualBox/Shared/app.nw
2013-01-21 10:56:17.462 node-webkit[1800:207] -[NSThemeFrame _fullScreenButtonOriginOriginal]: unrecognized selector sent to instance 0x6c329cf0
2013-01-21 10:56:17.464 node-webkit[1800:207] -[NSThemeFrame _fullScreenButtonOriginOriginal]: unrecognized selector sent to instance 0x6c329cf0

In the above, the first run (with @trevorlinton's custom build) had no transparent: true in package.json, while the second run did. The first run worked correctly, while the second run behaved as I previously described.

Thoughs? Suggestions?

[trevorlinton]

I have a new build for transparency (with many bug/performance fixes) and screen resolution / display support almost ready. I'm finishing the testing on Mac OS X. I'll try to post a beta build today or tomorrow.

A few notes on transparency support:

1. Support for both accelerated and non-accelerated painting is now supported.
2. Compositing is no longer required for transparency support.
3. I've made a graceful fall back if transparency isn't supported, adding IsTransparent property to Window
4. Transparency unfortunately cannot have any other sibling controls, which means no file menu (in windows), no toolbar, no shadow and no frame. All max/min/resize/move events have to be handled via JavaScript (although all of them can be).
5. Hit tests do not work on transparent regions. Unfortunately, this is quite a large problem (only in Windows), still looking for a solution.
6. Added ability to see mousemove events outside of the window's client area.
7. You can now get an array with the DPI, screen size, offset from origin (0,0) for each screen along with what screen the window's origin is in.
8. Vista+ is only supported in windows, in addition if compositing is turned in DWM on windows transparency will fail.

More to come, hopefully this will wrap up to a stable transparency build.

[darsain]

What do you mean by "Hit tests do not work on transparent regions." ?

[ButzYung]

Can't wait to try a new test build. No hit test on transparent regions can be useful in some cases I guess lol. In the worst case, one can add an "invisible" background (with a very small alpha value) to make hit test work I suppose.

[trevorlinton]

Okie dokie, lets give this a second shot. Windows and Mac OS X version: http://www.cs.utah.edu/~tlinton/nw-transparency.zip

Add transparent:true to the manifest window options. A few notes:

1. It doesn't work prior to Vista in windows.
2. No toolbar, no frame, however you can add these via javascript.
3. Hit tests do not work, e.g., the rectangle will still capture mouse clicks regardless of alpha
4. Set your body background to transparent or an RGBA value
5. Supports both composite/blt/accelerated rendering
6. Use Window.IsTransparent() to detect if transparency is enabled.
7. Will fallback gracefully to a regular no-frame with white background if it fails.

Screen information/event changes has been moved to another bug. Hopefully a build for that soon-ish (next week?).

[cadorn]

@trevorlinton tested on OXS 10.7. Am getting following and then hangs:

2013-02-06 22:25:10.272 node-webkit[83405:107] -[NSThemeFrame _fullScreenButtonOriginOriginal]: unrecognized selector sent to instance 0x6ca58de0
2013-02-06 22:25:10.273 node-webkit[83405:107] -[NSThemeFrame _fullScreenButtonOriginOriginal]: unrecognized selector sent to instance 0x6ca58de0

[trevorlinton]

@cadorn Are you trying to use fullscreen and transparency at the same time?

[cadorn]

No. See: https://gist.github.com/cadorn/4729127

[ButzYung]

@trevorlinton Tested on Vista Basic. Transparency works when using Standard theme (in basic theme, the background is white), with no noticeable performance hit (hardware accelerated) and additional RAM usage. Some issues:

1. Some HTML form elements have some minor display glitches, but they don't affect actual usage.
2. The background becomes black for Canvas and any elements that use CSS 3D transforms.

[trevorlinton]

@ButzYung I'll see what I can do to fix this, if compositing is turned off in DWM it disables transparency, there's a way for turning it on programmatically but microsoft has deprecated the function for some reason. What do you mean by HTML form elements have minor glitches? I'll take a look at the background becoming black for Canvas elements. I'd imagine this is a corner case where part of the renderer is blt and another part is compositing. Is there an example on the web I can use to test?

@cardorn I'll try out your post. This code is based on node-webkit 0.4.1, is the latest stable build working correctly? I'm just trying to rule out a bug that might have been introduced with the rebase at 0.4.0 or if this is related to transparency.

[ButzYung]

@trevorlinton For form elements glitches, I mean some elements like dropdown box and input box may look corruped or even missing in some occasions, but when you click on them they will appear and are actually usable.

The following code will repdocue the canvas problem. If you comment out the script part (ie. empty canvas), everything looks fine with a transparent background. However, if you let the script run and draw the blue rectangle on the canvas, the background of the whole page will become black.

<canvas id="C" width="320" height="240"></canvas>
<script>
var context = document.getElementById("C").getContext("2d")
context.fillStyle = "blue"
context.fillRect(80,60,160,120)
</script>

The following code will reproduce the CSS 3D transform problem. You can see a CSS transformed blue div layer, but the whole background becomes black.

<div id="L3D" style="position:absolute; width:320px; height:240px; -webkit-perspective:800px">
  <div id="L3D_object" style="position:absolute; left:0px; top:0px; width:320px; height:240px; background-color:blue; -webkit-transform:translateZ(-800px)"></div>
</div>

[cadorn]

@trevorlinton The example works with 0.4.1 (obviously no transparency).

[akrymski]

@trevorlinton excellend, thanks for your work! works like a charm on os x 10.8! only one minor glitch: in order to add a shadow to the window, I've tried leaving a margin between the content and the body and adding

box-shadow(0 1px 4px rbga(0,0,0,0.5))

which does work, except when the window receives focus and or scrolling an overflow element within the window, causes the shadow to display without transparency temporarily and flickers ...

[trevorlinton]

@cadorn I spent a day looking into this and apparently for chromium/node-webkit to work on 10.6 it has to be compiled on 10.6. There's currently a hack if you set plugin=false may help. Unfortunately Apple forbids running Snow Leopard in a virtual machine so I can't get a build for 10.6. Apple also no longer supports 10.6 for developers so I can't get older versions of 10.6. Mac OS X SDK anymore. See this bug for more details: https://github.com/rogerwang/node-webkit/issues/97