Nice! It works!

Great !!! Thanks, excited to give a try the build, Do you have any
developer/pre-compiled node-webkit build so we could give a try.

On Wed, Oct 15, 2014 at 8:58 AM, jtg-gg [email protected] wrote:

---

You can merge this Pull Request by running

git pull https://github.com/jtg-gg/node-webkit transparency

Or view, comment on, or merge it at:

#2463
Commit Summary

• [Transparency] add javascript function and manifest, OSX
  Implementation, stubs for Linux/Windows
• [Transparency][Win] add d3dcompiler_46 when packaging, fix the
  marginVal for compatibility (+1 squashed commits)
• [Transparency][Linux] implement the transparent window, using
  expose-event

File Changes

• M src/api/window/window.cc
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-0 (7)
• M src/api/window_bindings.js
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-1 (9)
• M src/browser/native_window.cc
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-2 (2)
• M src/browser/native_window.h
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-3 (4)
• M src/browser/native_window_gtk.cc
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-4 (51)
• M src/browser/native_window_gtk.h
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-5 (3)
• M src/browser/native_window_mac.h
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-6 (4)
• M src/browser/native_window_mac.mm
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-7 (37)
• M src/browser/native_window_win.cc
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-8 (74)
• M src/browser/native_window_win.h
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-9 (1)
• M src/common/shell_switches.cc
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-10 (1)
• M src/common/shell_switches.h
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-11 (1)
• M src/nw_shell.cc
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-12 (1)
• M tools/package_binaries.py
  https://github.com/rogerwang/node-webkit/pull/2463/files#diff-13 (1)

Patch Links:

• https://github.com/rogerwang/node-webkit/pull/2463.patch
• https://github.com/rogerwang/node-webkit/pull/2463.diff

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

MERGE MERGE MERGE <3

@kamesh-a here is my build
https://github.com/jtg-gg/node-webkit/releases/tag/nw-v0.10.2-transparency

Great work!

Works Great !!! Thanks @jtg-gg

Does it work on Linux?

@jtg-gg is there any build of nw-v0.10.5 ?

This is awesome!

@dncnmcdougall yes it works, at least on my Ubuntu virtual machine

@sapjax lets wait for @rogerwang to merge and made a new build ;)

I assume this doesn't allow click events through to stuff behind / below the app?

@jtg-gg Sweet work! Can we get a v0.10.5 build?

Yes, based on my tests it doesn't allow click events through, unless I'm doing something wrong...

Congrats! I am glad to hear that you added transparency support to node-webkit in linux too. Where can I download binary for linux 32 bit?

@kensully is this what you mean?

@adam-lynch
Thank you for the link. Yes, It's what I was looking for. But I haven't tested it yet. Would anybody post a transparent example?

Does anyone know if this also fixes the rounded corners on frameless windows? 😉

It doesn't fix it but you can use this to make rounded corners

—
Sent from Mailbox

On Sun, Oct 26, 2014 at 12:33 PM, Tom Moor [email protected]
wrote:

Does anyone know if this also fixes the rounded corners on frameless windows? 😉

Reply to this email directly or view it on GitHub:
#2463 (comment)

@tommoor Well, you cannot set a border-radius to body, but you can make the app transparent, then set a wrapper div and give it border-radius

<div class="wrapper">
  <!-- content here! -->
</div>

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
}
.wrapper {
  box-sizing: border-box;
  height: 100vh;
  overflow: auto;
  border-radius: 1em;

  background: rgba(255,255,255,.8);
  border: 1px solid #333;
}

It would be nice to get a real fix for that issue as having half the corners square and half rounded is clearly a bug.

I vote we keep it open until that's fixed

On Sun, Oct 26, 2014 at 10:20 AM, Mauricio [email protected]
wrote:

@Manak Well, you cannot set a border-radius to body, but you can make the app transparent, then set a wrapper div and give it border-radius

<div class="wrapper">
  <!-- content here! -->
</div>

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
}
.wrapper {
  height: 100vh;
  overflow: auto;
  border-radius: 1em;
  background: rgba(0,0,0,.8);
}

---

Reply to this email directly or view it on GitHub:
#2463 (comment)

click through events, for transparent pixel not supported yet
and currently the code is not merged yet to the roger wang's, so no official build
we are busy supporting nw11, so not sure when I can address these issues

+1 for merge this PR please!

@jtg-gg can you fetch the original repo and fix the conflicts? I need to use notifications and with your v0.10.2 release doesn't works.

@sergiovilar Roger has merged NW11 into master, thats why now the pull request has conflict
I will try to merge the transparency feature to NW11, but I might need some time

i wonder if it's possible to get a blurred transparent background using this ?

@Manak:
i doubt that. but it would be very neat if we were able to take real
screenshots from underneath the stage/body rectangle.
on the other hand: there might be plenty of commandline tools that could do
that for us. so ...

micha

2014-11-05 16:27 GMT+01:00 Manak [email protected]:

i wonder if it's possible to get a blurred transparent background using
this ?

—
Reply to this email directly or view it on GitHub
#2463 (comment)
.

+1. Thought this was in 0.11.0 😦. Any ETA?

+1

@jtg-gg native_window_gtk.cc is not used anymore -- it's switched to aura (native_window_aura) in nw 0.11. Please fix that.

And please add a command line switch to turn this completely off to rule out side effects if we'd get some bug report. The switch should also turn off the modifications you've done in the chromium & blink repo.

@rogerwang I've removed my changes for gtk, and add global variable g_support_transparency to disable my changes. this can be activated by "--disable_transparency"

@jtg-gg and @rogerwang: Thank you !!!!

Transparency + Chrome 38 is a dream come true.
My test app works just as it did on your NW 10.2-"T" build. You had mentioned "click through events, for transparent pixels" as one final TODO -- is this now implemented? I am on Windows and would like to test this feature, but am not exactly sure what the desired result would be..... Clicking on a transparent part of an NW Window does not select/activate underlying windows or desktop icons -- should it? Or does this refer to overlying objects within the NW window... so that a button lying under a transparent part of an overlying object could be clicked? (Clearly, I need some more information about this new capability, but I love what I see so far !!!!).

Thank you,

Jonathan Dodd

please try the live build here: http://dl.node-webkit.org/live-build/11-22-2014/0b2dabc-d8e3707-49872e2-f2f89e2-70e314f-cdd879e/

I am unable to resize a frameless window that has transparency enabled.

Hello Roger:
Yes, I am using the live build on Windows 7 (32-bit).

The red "badge" and empty (transparent) rectangle on my desktop are inside a frameless NW 11.2 window. Clicks on the underlying icons or windows "through" the transparent portions of the NW window are NOT passed through -- is this correct, or an issue with the 32-bit Win build?

Jonathan Dodd

@jakehh what's your OS version?

Windows 8.1 (Pro) 64bit

@jakehh can you give us the sample code ? I can't resize frameless window even if it is not transparent

@notsospecial1 it is not yet implemented, I'm still investigating. on Windows, I think we will need to disable GPU compositor if we want the click through feature. while on OSX is it possible ? I'm still searching for sample code that, if any one have it, please share it with me

@jtg-gg https://gist.github.com/jakehh/7b1842782f3dc041733f

@jakehh @rogerwang I've fixed the window resize problem, here is my pull request https://github.com/rogerwang/chromium.src/pull/28

@notsospecial1 you can try running node-webkit with "--disable-gpu" but it only works on frameless window

@jtg-gg:

Thank you. I can verify that the "click-through" feature of transparency works on my Windows 7 (32-bit) system. ( Frameless window, with "chromium-args" : "--disable-gpu" in the manifest). Great stuff !!!

Thanks again,
Jonathan Dodd

I've found a bug in Linux 32 bit. I tried jakehh's code above. When I open index.html in my browser Dropdown menu clickable and menu appears but it's not the same when I pack them into website.zip and run it ./nw ./website.zip --enable-transparent-visuals --disable-gpu . Dropdown menu is not clickable.
EDIT: I'm sorry, it's not a bug indeed. It's due to style="-webkit-app-region: drag" in navigation bar

Hey, transparency doesn't seem to work on xubuntu 14.04, 64 bit version.
Here is what I get:

I run: nw . --enable-transparent-visual --disable-gpu

My nw is 0.11.2

My code is the floowing:

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "main": "index.html",
  "window": {
    "transparent": true
  },
  "author": "",
  "license": "ISC"
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background-color:rgba(255,255,255,0.8)">

Hello World
</body>
</html>

@edi9999 what window manager you are using ?

@jtg-gg I'm using lightdm

@edi9999 lightdm is a display manager. WMs such as compiz, mutter, metacity. FYI I noticed that metacity doesn't work with node-webkit transparency

Ok, right, my window manager is xfwm4, the one that comes with xubuntu by default

on linux, you'll need window manager with compositing capability
@kensully I manage to run it on metacity by enabling the desktop composition
https://help.ubuntu.com/community/Metacity
'gconftool-2 -s --type bool /apps/metacity/general/compositing_manager true'

@edi9999 can you enable the compositing on xfwm4 and inform us if the transparency is working ?
and you are missing the 's' in the command line, it should be '--enable-transparent-visuals'

@jtg-gg with window-compositing enabled, my example seems to work on xfwm4.

For other xfwm4 users, to enable it, just go to the "window manager tweaks" application, then under compositor tab, check "enable display compositing"

@jtg-gg I found if I comment out the 'if' statement block above, there is no negative impacts. Is it correct?

@rogerwang but this will cause flicker on frameless window as described by #2784 (regardless transparency enabled/disabled)
I've a solution already, now testing it

@rogerwang I've made a pull request #2859