Use out of process WebView, add zoom setting

JSBrowser/css/browser.css

@@ -234,8 +234,7 @@ html {
 }
 
 #WebView {
-    width: 100%;
-    height: calc(100% - 40px);
+    transform-origin: 0% 0%;
 }
 
 .fullscreen #WebView {

JSBrowser/default.html

@@ -48,9 +48,11 @@ <h1>Favorites</h1>
             <div>
                 <h1>Settings</h1>
                 <a id="goFullscreen"></a>
+                <a><label for="webviewZoom">Zoom</label> <input type="range" min="50" max="300" step="25" value="100" id="webviewZoom" /></a>
                 <hr />
                 <a id="clearCacheButton">Clear cache</a>
                 <a id="clearFavButton">Clear favorites</a>
+
                 <a id="citation">Logo based on trees by Nicholas Menghini from the Noun Project.</a>
             </div>
         </nav>

JSBrowser/js/browser.js

@@ -61,6 +61,18 @@
 
     addEventListener("DOMContentLoaded", function () {
         // Get the UI elements
+
+        // The normal webview created via HTML is in proc.
+        // Replace it with a webview created via new MSWebView for an out of proc webview.
+        {
+            let webview = document.querySelector("#WebView");
+            const webviewParent = webview.parentElement;
+            webviewParent.removeChild(webview);
+            webview = new MSWebView();
+            webview.setAttribute("id", "WebView");
+            webviewParent.appendChild(webview);
+        }
+
         Object.assign(this, {
             "addFavButton": document.querySelector("#addFavButton"),
             "backButton": document.querySelector("#backButton"),
@@ -83,9 +95,26 @@
             "stopButton": document.querySelector("#stopButton"),
             "tweetIcon": document.querySelector("#tweet"),
             "urlInput": document.querySelector("#urlInput"),
-            "webview": document.querySelector("#WebView")
+            "webview": document.querySelector("#WebView"),
+            "webviewZoom": document.querySelector("#webviewZoom")
         });
 
+        this.applyWebviewZoom = state => {
+            const minValue = this.webviewZoom.getAttribute("min");
+            const maxValue = this.webviewZoom.getAttribute("max");
+            const scaleValue = Math.max(Math.min(parseInt(this.webviewZoom.value, 10), maxValue), minValue) / 100;
+
+            // Use setAttribute so they all change together to avoid weird visual glitches
+            this.webview.setAttribute("style", [
+                ["width", (100 / scaleValue) + "%"],
+                ["height", "calc(" + (-40 / scaleValue) + "px + " + (100 / scaleValue) + "%)"],
+                ["transform", "scale(" + scaleValue + ")"]
+            ].map(pair => pair[0] + ": " + pair[1]).join("; "));
+        };
+
+        // Apply the webview zoom immediately so we don't have to worry about duplicating CSS properties.
+        this.applyWebviewZoom();
+
         // Apply the fullscreen mode
         this.applyFullscreenMode = state => {
             let mode = state;
@@ -208,6 +237,9 @@
         // Listen for a change in fullscreen mode
         this.appView.addEventListener("visibleboundschanged", () => this.applyFullscreenMode());
 
+        // Listen for the webview zoom control changes.
+        this.webviewZoom.addEventListener("change", () => this.applyWebviewZoom());
+
         // Listen for a click on the skewed container to close the menu
         this.container.addEventListener("click", () => this.closeMenu());