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());