Fix webview usage with electron 21

apps/ledger-live-desktop/src/main/index.js

@@ -4,7 +4,7 @@ require("@electron/remote/main").initialize();
 
 /* eslint-disable import/first */
 import "./setup";
-import { app, Menu, ipcMain, session } from "electron";
+import { app, Menu, ipcMain, session, webContents, shell } from "electron";
 import menu from "./menu";
 import {
   createMainWindow,
@@ -158,6 +158,19 @@ app.on("ready", async () => {
 
   ipcMain.on("log", (event, { log }) => logger.log(log));
 
+  // To handle openning new windows from webview
+  // cf. https://gist.github.com/codebytere/409738fcb7b774387b5287db2ead2ccb
+  ipcMain.on("webview-dom-ready", (_, id) => {
+    const wc = webContents.fromId(id);
+    wc.setWindowOpenHandler(({ url }) => {
+      const protocol = new URL(url).protocol;
+      if (["https:", "http:"].includes(protocol)) {
+        shell.openExternal(url);
+      }
+      return { action: "deny" };
+    });
+  });
+
   Menu.setApplicationMenu(menu);
 
   const windowParams = await db.getKey("windowParams", "MainWindow", {});

apps/ledger-live-desktop/src/preloader/index.js

@@ -32,9 +32,13 @@ const appLoaded = () => {
 
 const reloadRenderer = () => ipcRenderer.invoke("reloadRenderer");
 
+// cf. https://gist.github.com/codebytere/409738fcb7b774387b5287db2ead2ccb
+const openWindow = id => ipcRenderer.send("webview-dom-ready", id);
+
 window.api = {
   appLoaded,
   reloadRenderer,
+  openWindow,
 };
 
 /**

apps/ledger-live-desktop/src/renderer/components/WebPlatformPlayer/index.tsx

@@ -1,4 +1,4 @@
-import { shell, WebviewTag } from "electron";
+import { WebviewTag } from "electron";
 import * as remote from "@electron/remote";
 import { JSONRPCRequest } from "json-rpc-2.0";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -400,31 +400,35 @@ export default function WebPlatformPlayer({ manifest, onClose, inputs = {}, conf
     }
   }, [manifest]);
 
-  const handleNewWindow = useCallback(async e => {
-    const protocol = new URL(e.url).protocol;
-    if (protocol === "http:" || protocol === "https:") {
-      await shell.openExternal(e.url);
+  const handleDomReady = useCallback(() => {
+    const webview = targetRef.current;
+    if (!webview) {
+      return;
     }
+
+    const id = webview.getWebContentsId();
+
+    // cf. https://gist.github.com/codebytere/409738fcb7b774387b5287db2ead2ccb
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.api.openWindow(id);
   }, []);
 
   useEffect(() => {
     const webview = targetRef.current;
 
     if (webview) {
-      // For mysterious reasons, the webpreferences attribute does not
-      // pass through the styled component when added in the JSX.
-      webview.webpreferences = "nativeWindowOpen=no";
-      webview.addEventListener("new-window", handleNewWindow);
       webview.addEventListener("did-finish-load", handleLoad);
+      webview.addEventListener("dom-ready", handleDomReady);
     }
 
     return () => {
       if (webview) {
-        webview.removeEventListener("new-window", handleNewWindow);
         webview.removeEventListener("did-finish-load", handleLoad);
+        webview.removeEventListener("dom-ready", handleDomReady);
       }
     };
-  }, [handleLoad, handleNewWindow]);
+  }, [handleLoad, handleDomReady]);
 
   return (
     <Container>
@@ -438,11 +442,32 @@ export default function WebPlatformPlayer({ manifest, onClose, inputs = {}, conf
       />
 
       <Wrapper>
-        <CustomWebview
+        <webview
           src={url.toString()}
           ref={targetRef}
-          style={{ opacity: widgetLoaded ? 1 : 0 }}
+          /**
+           * There seem to be an issue between Electron webview and styled-components
+           * (and React more broadly, cf. comment bellow).
+           * When using a styled webview componennt, the `allowpopups` prop does not
+           * seem to be set
+           */
+          style={{
+            opacity: widgetLoaded ? 1 : 0,
+            border: "none",
+            width: "100%",
+            flex: 1,
+            transition: "opacity 200ms ease-out",
+          }}
           preload={`file://${remote.app.dirname}/webviewPreloader.bundle.js`}
+          /**
+           * There seems to be an issue between Electron webview and react
+           * Hense, the normal `allowpopups` prop does not work and we need to
+           * explicitly set it's value to "true" as a string
+           * cf. https://github.com/electron/electron/issues/6046
+           */
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          allowpopups="true"
         />
         {!widgetLoaded ? (
           <Loader>