fix: transparency on Windows (#217)

* Fix transparency on Windows * Fix transparency on Windows * Add change file * Fix custom titlebar example
tauri-apps · Apr 28, 2021 · e278556 · e278556
1 parent ac507ed
commit e278556
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 11 deletions.
diff --git a/.changes/transparent.md b/.changes/transparent.md
@@ -0,0 +1,5 @@
+---
+"wry": minor
+---
+
+Fix transparency on Windows
diff --git a/Cargo.toml b/Cargo.toml
@@ -25,7 +25,7 @@ default = [ "file-drop", "protocol", "win32" ]
 file-drop = [ ]
 protocol = [ ]
 winrt = [ "windows-webview2", "windows" ]
-win32 = [ "webview2", "winapi" ]
+win32 = [ "webview2", "winapi", "webview2-sys" ]
 
 [dependencies]
 libc = "0.2"
@@ -50,7 +50,8 @@ gdk = "0.13"
 gdk-pixbuf = "0.9"
 
 [target."cfg(target_os = \"windows\")".dependencies]
-webview2 = { version = "0.1.0-beta.1", optional = true }
+webview2 = { version = "0.1.0", optional = true }
+webview2-sys = { version = "0.1.0", optional = true }
 winapi = { version = "0.3", features = [ "libloaderapi", "oleidl" ], optional = true }
 windows-webview2 = { version = "0.1", optional = true }
 windows = { version = "0.7", optional = true }

diff --git a/examples/custom_titlebar.rs b/examples/custom_titlebar.rs
@@ -131,8 +131,8 @@ fn main() -> wry::Result<()> {
       }
     }
 
-    match event {
-      Event::WindowEvent { event, window_id } => match event {
+    if let Event::WindowEvent { event, window_id } = event {
+      match event {
         WindowEvent::CloseRequested => {
           webviews.remove(&window_id);
           if webviews.is_empty() {
@@ -143,8 +143,7 @@ fn main() -> wry::Result<()> {
           let _ = webviews[&window_id].resize();
         }
         _ => (),
-      },
-      _ => (),
+      }
     }
   });
 }
diff --git a/examples/transparent.rs b/examples/transparent.rs
@@ -15,17 +15,21 @@ fn main() -> wry::Result<()> {
   let event_loop = EventLoop::new();
   let window = WindowBuilder::new()
     .with_decorations(false)
+    // There are actually three layer of background color when creating webview window.
+    // The first is window background...
     .with_transparent(true)
     .build(&event_loop)
     .unwrap();
 
   let webview = WebViewBuilder::new(window)?
+    // The second is on webview...
     .with_transparent(true)
+    // And the last is in html.
     .with_url(
       r#"data:text/html,
             <!doctype html>
             <html>
-              <body style="background-color:rgba(87,87,87,0.);">hello</body>
+              <body style="background-color:rgba(87,87,87,0.5);">hello</body>
               <script>
                 window.onload = function() {
                   document.body.innerText = `hello, ${navigator.userAgent}`;

diff --git a/rustfmt.toml b/rustfmt.toml
@@ -12,4 +12,4 @@ use_try_shorthand = false
 use_field_init_shorthand = false
 force_explicit_abi = true
 imports_granularity = "Crate"
-license_template_path = ".license_template"
+#license_template_path = ".license_template"
diff --git a/src/webview/win32/mod.rs b/src/webview/win32/mod.rs
@@ -34,9 +34,7 @@ impl InnerWebView {
     window: Rc<Window>,
     scripts: Vec<String>,
     url: Option<Url>,
-    // TODO default background color option just adds to webview2 recently and it requires
-    // canary build. Implement this once it's in official release.
-    _transparent: bool,
+    transparent: bool,
     custom_protocols: Vec<(
       String,
       Box<dyn Fn(&Window, &str) -> Result<Vec<u8>> + 'static>,
@@ -72,6 +70,18 @@ impl InnerWebView {
         let controller = controller?;
         let w = controller.get_webview()?;
 
+        // Transparent
+        if transparent {
+          if let Ok(c2) = controller.get_controller2() {
+            c2.put_default_background_color(webview2_sys::Color {
+              r: 0,
+              g: 0,
+              b: 0,
+              a: 0,
+            })?;
+          }
+        }
+
         // Enable sensible defaults
         let settings = w.get_settings()?;
         settings.put_is_status_bar_enabled(false)?;