Font size in DomDistiller prefs syncs with local scaling

components/dom_distiller/core/javascript/dom_distiller_viewer.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // This variable will be changed by iOS scripts.
 var distiller_on_ios = false;
 
 function addToPage(html) {
   var div = document.createElement('div');
   div.innerHTML = html;
@@ skipping 98 matching lines @@
   if (themeClass == "sepia") {
     toolbarColor = "#BF9A73";
   } else if (themeClass == "dark") {
     toolbarColor = "#1A1A1A";
   } else {
     toolbarColor = "#F5F5F5";
   }
   document.getElementById('theme-color').content = toolbarColor;
 }
 
+function useFontScaling(scaling) {
+  pincher.useFontScaling(scaling);
+}
+
 var updateLoadingIndicator = function() {
   var colors = ["red", "yellow", "green", "blue"];
   return function(isLastPage) {
     if (!isLastPage && typeof this.colorShuffle == "undefined") {
       var loader = document.getElementById("loader");
       if (loader) {
         var colorIndex = -1;
         this.colorShuffle = setInterval(function() {
           colorIndex = (colorIndex + 1) % colors.length;
           loader.className = colors[colorIndex];
@@ skipping 98 matching lines @@
 
   var lastSpan;
   var lastClientMid;
 
   var scale = 1;
   var shiftX;
   var shiftY;
 
   // The zooming speed relative to pinching speed.
   var FONT_SCALE_MULTIPLIER = 0.5;
+
   var MIN_SPAN_LENGTH = 20;
 
   // The font size is guaranteed to be in px.
   var baseSize =
       parseFloat(getComputedStyle(document.documentElement).fontSize);
 
   var refreshTransform = function() {
     var slowedScale = Math.exp(Math.log(scale) * FONT_SCALE_MULTIPLIER);
     clampedScale = Math.max(0.4, Math.min(2.5, fontSizeAnchor * slowedScale));

[mdjones, 2015/09/25 22:26:28]

These numbers do not match the min/max of the android slider (i.e. is is
possible to zoom by pinch to min 40% but only possible to use the slider to make
it go to 50%). I would either change these or the android numbers to make them
consistent.

[wychen, 2015/09/25 23:31:43]

Done.

 
     // Use "fake" 3D transform so that the layer is not repainted.
     // With 2D transform, the frame rate would be much lower.
     document.body.style.transform =
         'translate3d(' + shiftX + 'px,' +
                          shiftY + 'px, 0px)' +
         'scale(' + clampedScale/fontSizeAnchor + ')';
   };
 
+  function saveCenter(clientMid) {
+    // Try to preserve the pinching center after text reflow.
+    // This is accurate to the HTML element level.
+    focusElement = document.elementFromPoint(clientMid.x, clientMid.y);
+    var rect = focusElement.getBoundingClientRect();
+    initClientMid = clientMid;
+    focusPos = (initClientMid.y - rect.top) / (rect.bottom - rect.top);
+  }
+
+  function restoreCenter() {
+    var rect = focusElement.getBoundingClientRect();
+    var targetTop = focusPos * (rect.bottom - rect.top) + rect.top +
+        document.body.scrollTop - (initClientMid.y + shiftY);
+    document.body.scrollTop = targetTop;
+  }
+
   function endPinch() {
     pinching = false;
 
     document.body.style.transformOrigin = '';
     document.body.style.transform = '';
     document.documentElement.style.fontSize = clampedScale * baseSize + "px";
 
-    var rect = focusElement.getBoundingClientRect();
-    var targetTop = focusPos * (rect.bottom - rect.top) + rect.top +
-        document.body.scrollTop - (initClientMid.y + shiftY);
-    document.body.scrollTop = targetTop;
+    restoreCenter();
+
+    var img = document.getElementById('fontscaling-img');
+    if (!img) {
+      img = document.createElement('img');
+      img.id = 'fontscaling-img';
+      img.style.display = 'none';
+      document.body.appendChild(img);
+    }
+    img.src = "/savefontscaling/" + clampedScale;
   }
 
   function touchSpan(e) {
     var count = e.touches.length;
     var mid = touchClientMid(e);
     var sum = 0;
     for (var i = 0; i < count; i++) {
       var dx = (e.touches[i].clientX - mid.x);
       var dy = (e.touches[i].clientY - mid.y);
       sum += Math.hypot(dx, dy);
@@ skipping 40 matching lines @@
 
       pinching = true;
       fontSizeAnchor =
           parseFloat(getComputedStyle(document.documentElement).fontSize) /
           baseSize;
 
       var pinchOrigin = touchPageMid(e);
       document.body.style.transformOrigin =
           pinchOrigin.x + 'px ' + pinchOrigin.y  + 'px';
 
-      // Try to preserve the pinching center after text reflow.
-      // This is accurate to the HTML element level.
-      focusElement = document.elementFromPoint(clientMid.x, clientMid.y);
-      var rect = focusElement.getBoundingClientRect();
-      initClientMid = clientMid;
-      focusPos = (initClientMid.y - rect.top) / (rect.bottom - rect.top);
+      saveCenter(clientMid);
 
       lastSpan = span;
       lastClientMid = clientMid;
 
       refreshTransform();
     },
 
     handleTouchMove: function(e) {
       if (!pinching) return;
       if (e.touches.length < 2) return;
@@ skipping 41 matching lines @@
       document.documentElement.style.fontSize = clampedScale * baseSize + "px";
     },
 
     status: function() {
       return {
         scale: scale,
         clampedScale: clampedScale,
         shiftX: shiftX,
         shiftY: shiftY
       };
+    },
+
+    useFontScaling: function(scaling) {
+      saveCenter({x: window.innerWidth/2, y: window.innerHeight/2});
+      shiftX = 0;
+      shiftY = 0;
+      document.documentElement.style.fontSize = scaling * baseSize + "px";
+      clampedScale = scaling;
+      restoreCenter();
     }
   };
 }());
 
 window.addEventListener('touchstart', pincher.handleTouchStart, false);
 window.addEventListener('touchmove', pincher.handleTouchMove, false);
 window.addEventListener('touchend', pincher.handleTouchEnd, false);
 window.addEventListener('touchcancel', pincher.handleTouchCancel, false);