Replace webview tag to iframe (#554)

Signed-off-by: Roman <ixrock@gmail.com>

src/main/window-manager.ts

@@ -55,7 +55,13 @@ export class WindowManager {
     // handle close event
     this.mainWindow.on("close", () => {
       this.mainWindow = null;
-    })
+    });
+
+    // open external links in default browser (target=_blank, window.open)
+    this.mainWindow.webContents.on("new-window", (event, url) => {
+      event.preventDefault();
+      shell.openExternal(url);
+    });
 
     // handle external links
     this.mainWindow.webContents.on("will-navigate", (event, link) => {

src/renderer/_vue/assets/css/app.scss

@@ -203,4 +203,9 @@ h1, h2, h3, h4, h5, h6{
   height: 100%;
   z-index: 100;
   display: none;
+
+  > iframe {
+    height: calc(100% - var(--lens-bottom-bar-height));
+    border: none;
+  }
 }

src/renderer/_vue/assets/css/custom.scss

@@ -9,7 +9,7 @@ $lens-text-color-light: #a0a0a0 !default;
 $lens-primary: #3d90ce !default;
 
 // export as css variables
-* {
+:root {
   --lens-main-bg: #{$lens-main-bg}; // dark bg
   --lens-pane-bg: #{$lens-pane-bg}; // all panels main bg
   --lens-dock-bg: #{$lens-dock-bg}; // terminal and top menu bar
@@ -18,6 +18,7 @@ $lens-primary: #3d90ce !default;
   --lens-text-color: #{$lens-text-color};
   --lens-text-color-light: #{$lens-text-color-light};
   --lens-primary: #{$lens-primary};
+  --lens-bottom-bar-height: 20px;
 }
 
 // Base grayscale colors definitions

src/renderer/_vue/components/BottomBar/BottomBar.vue

@@ -63,7 +63,7 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 20px;
+  height: var(--lens-bottom-bar-height);
   background-color: var(--lens-primary);
   z-index: 2000;
 }

src/renderer/_vue/components/ClusterPage.vue

@@ -27,7 +27,6 @@
 
 <script>
 import CubeSpinner from "@/_vue/components/CubeSpinner";
-import { remote, shell } from 'electron';
 export default {
   name: "ClusterPage",
   components: {
@@ -92,10 +91,6 @@ export default {
     lensLoaded: function() {
       console.log("lens loaded")
       this.lens.loaded = true;
-      remote.webContents.fromId(this.lens.webview.getWebContentsId()).on('new-window', (e, url) => {
-        e.preventDefault()
-        shell.openExternal(url)
-      })
       this.$store.commit("updateLens", this.lens);
     },
     // Called only when online state changes
@@ -110,9 +105,9 @@ export default {
     activateLens: async function() {
       console.log("activate lens")
       if (!this.lens.webview) {
-        console.log("create webview")
+        console.log("creating an iframe")
-        const webview = document.createElement('webview');
+        const webview = document.createElement('iframe');
-        webview.addEventListener('did-finish-load', this.lensLoaded);
+        webview.addEventListener('load', this.lensLoaded);
         webview.src = this.cluster.url;
         this.lens.webview = webview;
       }

src/renderer/_vue/store/modules/clusters.ts

@@ -13,7 +13,7 @@ const tracker = new Tracker(remote.app);
 export interface LensWebview {
   id: string;
   loaded: boolean;
-  webview?: any;
+  webview?: HTMLIFrameElement;
 }
 
 export interface ClusterState {