Permalink
Browse files

Use out of process WebView, add zoom setting

  • Loading branch information...
david-risney committed Feb 28, 2018
1 parent 48c5c43 commit 58987dcbc44b0818602e99574a3dec9406f4fa2e
Showing with 36 additions and 3 deletions.
  1. +1 −2 JSBrowser/css/browser.css
  2. +2 −0 JSBrowser/default.html
  3. +33 −1 JSBrowser/js/browser.js
@@ -234,8 +234,7 @@ html {
}
#WebView {
width: 100%;
height: calc(100% - 40px);
transform-origin: 0% 0%;
}
.fullscreen #WebView {
@@ -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>
@@ -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());

0 comments on commit 58987dc

Please sign in to comment.