nsa - Dave's Blog

Search
My timeline on Mastodon

Tiny browser features: JSBrowser zoom

2018 May 10, 3:49

JSBrowser is a basic browser built as a Win10 JavaScript UWP app around the WebView HTML element. Its fun and relatively simple to implement tiny browser features in JavaScript and in this post I'm implementing zoom.

My plan to implement zoom is to add a zoom slider to the settings div that controls the scale of the WebView element via CSS transform. My resulting zoom change is in git and you can try the whole thing out in my JSBrowser fork.

Slider

I can implement the zoom settings slider as a range type input HTML element. This conveniently provides me a min, max, and step property and suits exactly my purposes. I chose some values that I thought would be reasonable so the browser can scale between half to 3x by increments of one quarter. This is a tiny browser feature after all so there's no custom zoom entry.

<a><label for="webviewZoom">Zoom</label><input type="range" min="50" max="300" step="25" value="100" id="webviewZoom" /></a>

To let the user know this slider is for controlling zoom, I make a label HTML element that says Zoom. The label HTML element has a for attribute which takes the id of another HTML element. This lets the browser know what the label is labelling and lets the browser do things like when the label is clicked to put focus on the slider.

Scale

There are no explicit scale APIs for WebView so to change the size of the content in the WebView we use CSS.

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

Because the user changes the scale at runtime I accordingly replace the static CSS for the WebView element with the script above to programmatically modify the style of the WebView. I change the style with one setAttribute call to do my best to avoid the browser performing unnecessary work or displaying the WebView in an intermediate and incomplete state. Applying the scale to the element is as simple as adding 'transform: scale(X)' but then there are two interesting problems.

The first is that the size of the WebView is also scaled not just the content within it. To keep the WebView the same effective size so that it still fits properly into our browser UI, we must compensate for the scale in the WebView width and height. Accordingly, you can see that we scale up by scaleValue and then in width and height we divide by the scaleValue.

transform-origin: 0% 0%;

The other issue is that by default the scale transform's origin is the center of the WebView element. This means when scaled up all sides of the WebView would expand out. But when modifying the width and height those apply relative to the upper left of the element so our inverse scale application to the width and height above aren't quite enough. We also have to change the origin of the scale transform to match the origin of the changes to the width and height.

PermalinkCommentsbrowser css-transform javascript JS jsbrowser uwp webview win10

Retweet of Snowden

2016 Feb 23, 9:19
@SwiftOnSecurity @thegrugq What if you have a lot of NSA rootkit problems? Asking for a friend.
PermalinkComments

Retweet of azizansari

2016 Jan 18, 12:11
.@alanmyang with my favorite line at Critics' Choice: pic.twitter.com/soQaFBkx87
PermalinkComments

Retweet of neiltyson

2016 Jan 13, 6:42
With Lotteries funding State education budgets, the best way to sustain them is to NOT teach probability&statistics in school
PermalinkComments

Tweet from David_Risney

2016 Jan 3, 10:28
CSP report gripe: no distinction between violation of unsafe-eval and unsafe-inline. I use 2 hdrs w diff rules & report URIs to distinguish.
PermalinkComments

Retweet of SwiftOnSecurity

2015 Dec 23, 7:28
Does the NSA actually hack anybody, or do they just make PowerPoint presentations
PermalinkComments

Retweet of unconed

2015 Dec 19, 5:41
Here's an elaboration of that last thought. Mathematicians are insane. Q.E.D. pic.twitter.com/OqbJAokBTg
PermalinkComments

Retweet of mikeyface

2015 Oct 26, 9:03
Posting again because I seriously can’t get over how insanely well executed @krisstraub’s new short is: https://www.youtube.com/watch?v=mw_HKzo9Ync …
PermalinkComments

Retweet of zeynep

2015 Oct 14, 6:11
Ran into Alex Halderman recently. He casually said "we found a weakness in Diffie-Hellman." My jaw dropped. GO READ. https://freedom-to-tinker.com/blog/haldermanheninger/how-is-nsa-breaking-so-much-crypto/ …
PermalinkComments

Retweet of krisstraub

2015 Sep 20, 8:34
RT @chainsawsuit: good for what ails ya http://fb.me/7nPENCYPZ  pic.twitter.com/Rm8rLguHXx
PermalinkComments

workjuice: Such whimsy! Video of the “Captain Laserbeam”...

2015 Sep 17, 3:02


workjuice:

Such whimsy! Video of the “Captain Laserbeam” segment of our April Fool’s Funaround is up; just click this sentence!
Starring Paul F. Tompkins​, John Hodgman​, Michael McMillian​, Lauren Lapkus​, Marc Evan Jackson​, Ben Schwartz​, Felicia Day​, Hal Lublin​, Annie Savage, Craig Cackowski, Busy Philipps​, and more!

Tickets are still on sale for our Improv show and other shows in NY in October. Get ‘em here.

PermalinkComments

workjuice: Such whimsy! Video of the “Captain Laserbeam”...

2015 Sep 17, 3:02


workjuice:

Such whimsy! Video of the “Captain Laserbeam” segment of our April Fool’s Funaround is up; just click this sentence!
Starring Paul F. Tompkins​, John Hodgman​, Michael McMillian​, Lauren Lapkus​, Marc Evan Jackson​, Ben Schwartz​, Felicia Day​, Hal Lublin​, Annie Savage, Craig Cackowski, Busy Philipps​, and more!

Tickets are still on sale for our Improv show and other shows in NY in October. Get ‘em here.

PermalinkComments

Retweet of ncardozo

2015 Apr 11, 10:58
The NSA does not have "an absolute right to gain access to every way in which two people may choose to communicate." http://arstechnica.com/tech-policy/2015/04/nsa-dreams-of-smartphones-with-split-crypto-keys-protecting-user-data/ …
PermalinkComments

Retweet of NSA_PR

2015 Apr 1, 2:23
#FreeSnowden #WithThePurchaseOfAMediumOrLargeDataCenter
PermalinkComments

Retweet of newsycombinator

2015 Mar 30, 12:31
NSA's Backdoor Key from Lotus Notes http://www.cypherspace.org/adam/hacks/lotus-nsa-key.html …
PermalinkComments

Retweet of getify

2015 Feb 24, 6:25
Lots of questions about my #ES6 arrow functions assertions. Here's full context (and some cleanup/clarifications): https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md#arrow-functions …
PermalinkComments

Retweet of azizansari

2015 Feb 20, 4:33
I miss him so much. I hope reading these stories will help you get why everyone is so devastated about his passing: http://bit.ly/1EeLDfW 
PermalinkComments

PFTompkins: Did you wish "Hitch" had been about weddings? YOU HAVE TWO WISHES LEFT.

2015 Jan 17, 4:42
Paul F. Tompkins        ✔ @PFTompkins :
Did you wish "Hitch" had been about weddings? YOU HAVE TWO WISHES LEFT.
PermalinkComments

Encrypted Web Traffic More Than Doubles

2014 May 18, 1:20

RT @PeerProd In Europe, encrypted traffic went from 1.47% to 6.10%, and in Latin America, it increased from 1.8% to 10.37%
http://www.wired.com/2014/05/sandvine-report/ #NSA

PermalinkCommentstechnical security nsa encryption

Would an American Jury Even Convict Edward Snowden?

2013 Jul 16, 4:17
PermalinkCommentsnsa edward-snowden law legal
Older Entries Creative Commons License Some rights reserved.