Add support for window transparency #949

zcbenz · 2014-12-23T01:52:11Z

Patches in libchromiumcontent:
https://github.com/brightray/libchromiumcontent/blob/atom/patches/use_transparent_window.patch
https://github.com/brightray/libchromiumcontent/blob/atom/patches/render_widget_host_view_mac.patch

Fixes #381.

1. Avoid capturing key event to menu. electron/electron#170 2. Enable accepting first mouse event. electron/electron#212 3. Enable using transparent window. electron/electron#949

zcbenz · 2014-12-23T21:13:14Z

The native window shadow does not show for transparent window on Mac when the window is created, the shadow only shows after the focus is switched to/from other windows. This is strange, but since we can draw shadows directly in HTML, we just disable native window shadow for now.

zcbenz · 2014-12-23T21:31:20Z

Another problem with transparent window is that you can not click through the transparent areas in the window, because the web page's underlying view still covers the whole window. One solution is to calculate whether the point is transparent when user clicks on the page, and then decide whether to ignore the mouse event, but this solution is quite expensive and needs some more patches in Chromium.

In Chromium they also have support for transparent background in web pages (but without support on Mac), and they also have the same problem with us. What they did to solve it is to provide a API to specify the shape of window, so instead of calculating which area can be clicked through, they just let the users decide. I think we should take this approach too.

zcbenz · 2014-12-23T21:58:27Z

One limitation of transparent window is you can not apply blur effects on background, the blur effect is only calculated on HTML elements, so you can not implement Yosemite style toolbar with pure HTML. I am not sure whether this is a operating system limitation or a Chrome bug.

An example without blur:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css" media="screen">
    .back {
      -webkit-app-region: drag;
      width: 400px;
      height: 80px;
      text-align: center;
      background-color: #555;
      border-radius: 10px;
      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.7);
      -webkit-filter: blur(4px);
      opacity: 0.4;
    }
    .title {
      float: left;
      margin: 30px 0 0 170px;
    }
  </style>
</head>
<body>
<div class="title">Atom Shell</div>
<div class="back"></div>
</body>
</html>

After we add following style rule:

    .back {
      -webkit-filter: blur(4px);
    }

zcbenz · 2014-12-24T01:15:55Z

I have made transparent window work on Windows and Linux, and we need no patch to libchromiumcontent, which is quite good.

But to use transparent window on Linux we have to disable GPU acceleration, and users must put --enable-transparent-visuals --disable-gpu in the command line. This bug is tracked at an upstream bug.

anaisbetts · 2014-12-24T13:55:52Z

😍

lynchpin4 · 2014-12-25T09:22:53Z

your the man zcbenz ! +1

zcbenz · 2014-12-31T23:46:51Z

Enabling clicking through the transparent areas is possible, but it requires disabling GPU acceleration on all platforms, which doesn't seems a solution to me. So I'll choose to add API to set window shape.

zcbenz · 2015-01-02T20:31:28Z

Clipping a window on Mac into a custom shape seems quite difficult in Chromium, traditional ways only work if we have GPU acceleration turned off, and I'm not familiar with how GPU acceleration works in Chromium. In upstream there is an issue to implement window shape API on Mac, I think we should wait for it instead of spending too much time hacking on it.

anaisbetts · 2015-01-02T20:44:30Z

@zcbenz Can you keep this PR open while we wait? We're using this version at the moment and since we don't care too much about clickthrough it works for us quite well

zcbenz · 2015-01-02T20:46:52Z

@paulcbetts Sure, feedbacks are welcomed!

anaisbetts · 2015-01-02T21:02:15Z

@zcbenz So far, everything is 💎

1. Avoid capturing key event to menu. electron/electron#170 2. Enable accepting first mouse event. electron/electron#212 3. Enable using transparent window. electron/electron#949

1. Avoid capturing key event to menu. electron/electron#170 2. Enable accepting first mouse event. electron/electron#212 3. Enable using transparent window. electron/electron#949 4. Enable turning off auto hide cursor. electron/electron#995

1. Avoid capturing key event to menu. electron/electron#170 2. Enable accepting first mouse event. electron/electron#212 3. Enable using transparent window. electron/electron#949 4. Enable turning off auto hide cursor. electron/electron#995 5. Disable beeps when pressing certain keys. electron/electron#2617

1. Avoid capturing key event to menu. electron/electron#170 2. Enable accepting first mouse event. electron/electron#212 3. Enable using transparent window. electron/electron#949 4. Enable turning off auto hide cursor. electron/electron#995

TODO: Restore support of transparent windows, see electron/electron#949. https://chromium-review.googlesource.com/c/chromium/src/+/607608

Add "transparent" option

9593c71

zcbenz added 4 commits December 23, 2014 11:17

Tell the render widget to use transparent background.

4fc7311

mac: Use transparent window

45c41fe

mac: Don't show title text in transparent window

8506725

mac: Fix a crash when closing window

5b312e8

Upgrade libchromiumcontent to make transparent window work on Mac

effcf18

zcbenz added 2 commits December 23, 2014 15:31

OVERRIDE => override in native_window_mac.h

4ca0458

mac: Simplify frameless window dragging code

85685fe

zcbenz force-pushed the window-transparency branch from 80bb71c to 85685fe Compare December 23, 2014 23:56

views: Make transparent window work

1a34e09

win: Make transparent window resizable

6939567

This was referenced Jan 7, 2015

Ship headers required by implementing window transparency electron/libchromiumcontent#87

Merged

Export "platform" headers of blink electron/libchromiumcontent#88

Merged

daviwil mentioned this pull request Jan 11, 2016

Enable transparent background daviwil/electroshell#1

Open

digitalfiz mentioned this pull request Aug 23, 2016

Transparency built in now? dfrankland/hyper-transparent-bg#5

Closed

maximbaz mentioned this pull request Feb 3, 2017

Drop shadow and background blur cerebroapp/cerebro#81

Closed

bridiver mentioned this pull request Jul 11, 2017

Chromium60.0.3112.50 brave/muon#237

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for window transparency #949

Add support for window transparency #949

zcbenz commented Dec 23, 2014

zcbenz commented Dec 23, 2014

zcbenz commented Dec 23, 2014

zcbenz commented Dec 23, 2014

zcbenz commented Dec 24, 2014

anaisbetts commented Dec 24, 2014

lynchpin4 commented Dec 25, 2014

zcbenz commented Dec 31, 2014

zcbenz commented Jan 2, 2015

anaisbetts commented Jan 2, 2015

zcbenz commented Jan 2, 2015

anaisbetts commented Jan 2, 2015

Add support for window transparency #949

Add support for window transparency #949

Conversation

zcbenz commented Dec 23, 2014

zcbenz commented Dec 23, 2014

zcbenz commented Dec 23, 2014

zcbenz commented Dec 23, 2014

zcbenz commented Dec 24, 2014

anaisbetts commented Dec 24, 2014

lynchpin4 commented Dec 25, 2014

zcbenz commented Dec 31, 2014

zcbenz commented Jan 2, 2015

anaisbetts commented Jan 2, 2015

zcbenz commented Jan 2, 2015

anaisbetts commented Jan 2, 2015