feat: Add zoom hotkey polyfill for non windows platforms (#9386)

Author: Legend-Master

.changes/zoom-polyfill.md

@@ -0,0 +1,6 @@
+---
+"tauri": minor:feat
+"tauri-runtime": minor:feat
+---
+
+Provide a basic zoom hotkey polyfill for non-Windows platforms

core/tauri-config-schema/schema.json

@@ -452,7 +452,7 @@
           "format": "uri"
         },
         "zoomHotkeysEnabled": {
-          "description": "Whether page zooming by hotkeys is enabled **Windows Only**",
+          "description": "Whether page zooming by hotkeys is enabled\n\n## Platform-specific:\n\n- **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting. - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`, 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission\n\n- **Android / iOS**: Unsupported.",
           "default": false,
           "type": "boolean"
         }

core/tauri-runtime/src/webview.rs

@@ -350,6 +350,14 @@ impl WebviewAttributes {
   }
 
   /// Whether page zooming by hotkeys is enabled
+  ///
+  /// ## Platform-specific:
+  ///
+  /// - **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting.
+  /// - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`,
+  /// 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission
+  ///
+  /// - **Android / iOS**: Unsupported.
   #[must_use]
   pub fn zoom_hotkeys_enabled(mut self, enabled: bool) -> Self {
     self.zoom_hotkeys_enabled = enabled;

core/tauri-utils/src/config.rs

@@ -1293,7 +1293,15 @@ pub struct WindowConfig {
   ///
   /// - **macOS**: Requires the `macos-proxy` feature flag and only compiles for macOS 14+.
   pub proxy_url: Option<Url>,
-  /// Whether page zooming by hotkeys is enabled **Windows Only**
+  /// Whether page zooming by hotkeys is enabled
+  ///
+  /// ## Platform-specific:
+  ///
+  /// - **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting.
+  /// - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`,
+  /// 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission
+  ///
+  /// - **Android / iOS**: Unsupported.
   #[serde(default)]
   pub zoom_hotkeys_enabled: bool,
 }

core/tauri/src/manager/webview.rs

@@ -534,6 +534,23 @@ impl<R: Runtime> WebviewManager<R> {
       }
     }
 
+    #[cfg(all(desktop, not(target_os = "windows")))]
+    if pending.webview_attributes.zoom_hotkeys_enabled {
+      #[derive(Template)]
+      #[default_template("../webview/scripts/zoom-hotkey.js")]
+      struct HotkeyZoom<'a> {
+        os_name: &'a str,
+      }
+
+      pending.webview_attributes.initialization_scripts.push(
+        HotkeyZoom {
+          os_name: std::env::consts::OS,
+        }
+        .render_default(&Default::default())?
+        .into_string(),
+      )
+    }
+
     #[cfg(feature = "isolation")]
     let pattern = app_manager.pattern.clone();
     let navigation_handler = pending.navigation_handler.take();

core/tauri/src/webview/mod.rs

@@ -776,7 +776,15 @@ fn main() {
     self
   }
 
-  /// Whether page zooming by hotkeys is enabled **Windows Only**
+  /// Whether page zooming by hotkeys is enabled
+  ///
+  /// ## Platform-specific:
+  ///
+  /// - **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting.
+  /// - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`,
+  /// 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission
+  ///
+  /// - **Android / iOS**: Unsupported.
   #[must_use]
   pub fn zoom_hotkeys_enabled(mut self, enabled: bool) -> Self {
     self.webview_attributes.zoom_hotkeys_enabled = enabled;

core/tauri/src/webview/scripts/zoom-hotkey.js

@@ -0,0 +1,28 @@
+// Copyright 2019-2024 Tauri Programme within The Commons Conservancy
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-License-Identifier: MIT
+
+const OS_NAME = __TEMPLATE_os_name__
+
+let zoomLevel = 1
+
+const MAX_ZOOM_LEVEL = 10
+const MIN_ZOOM_LEVEL = 0.2
+
+window.addEventListener('keydown', (event) => {
+  if (OS_NAME === 'macos' ? event.metaKey : event.ctrlKey) {
+    if (event.key === '-') {
+      zoomLevel -= 0.2
+    } else if (event.key === '=') {
+      zoomLevel += 0.2
+    } else if (event.key === '0') {
+      zoomLevel = 1
+    } else {
+      return
+    }
+    zoomLevel = Math.min(Math.max(zoomLevel, MIN_ZOOM_LEVEL), MAX_ZOOM_LEVEL)
+    window.__TAURI_INTERNALS__.invoke('plugin:webview|set_webview_zoom', {
+      value: zoomLevel
+    })
+  }
+})

core/tauri/src/webview/webview_window.rs

@@ -839,7 +839,15 @@ fn main() {
     self
   }
 
-  /// Whether page zooming by hotkeys is enabled **Windows only**
+  /// Whether page zooming by hotkeys is enabled
+  ///
+  /// ## Platform-specific:
+  ///
+  /// - **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting.
+  /// - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`,
+  /// 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission
+  ///
+  /// - **Android / iOS**: Unsupported.
   #[must_use]
   pub fn zoom_hotkeys_enabled(mut self, enabled: bool) -> Self {
     self.webview_builder = self.webview_builder.zoom_hotkeys_enabled(enabled);

tooling/api/src/webview.ts

@@ -666,7 +666,15 @@ interface WebviewOptions {
    * */
   proxyUrl?: string
   /**
-   * Whether page zooming by hotkeys or gestures is enabled **Windows Only**
+   * Whether page zooming by hotkeys is enabled
+   *
+   * ## Platform-specific:
+   *
+   * - **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting.
+   * - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`,
+   * 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission
+   *
+   * - **Android / iOS**: Unsupported.
    */
   zoomHotkeysEnabled?: boolean
 }

tooling/cli/schema.json

@@ -452,7 +452,7 @@
           "format": "uri"
         },
         "zoomHotkeysEnabled": {
-          "description": "Whether page zooming by hotkeys is enabled **Windows Only**",
+          "description": "Whether page zooming by hotkeys is enabled\n\n## Platform-specific:\n\n- **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting. - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`, 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission\n\n- **Android / iOS**: Unsupported.",
           "default": false,
           "type": "boolean"
         }