Font size in DomDistiller prefs syncs with local scaling

components/dom_distiller/core/javascript/dom_distiller_viewer.js

Index: components/dom_distiller/core/javascript/dom_distiller_viewer.js
diff --git a/components/dom_distiller/core/javascript/dom_distiller_viewer.js b/components/dom_distiller/core/javascript/dom_distiller_viewer.js
index f953414f028f055b849012a2330f92f1f680a242..d622ca58b57950e99e3128d99f92a6b58c96b0c7 100644
--- a/components/dom_distiller/core/javascript/dom_distiller_viewer.js
+++ b/components/dom_distiller/core/javascript/dom_distiller_viewer.js
@@ -90,6 +90,10 @@ function useTheme(theme) {
   document.body.className = cssClass + " " + fontFamilyClass;
 }
 
+function useFontScaling(scaling) {
+  pincher.useFontScaling(scaling);
+}
+
 var updateLoadingIndicator = function() {
   var colors = ["red", "yellow", "green", "blue"];
   return function(isLastPage) {
@@ -212,6 +216,7 @@ var pincher = (function() {
 
   // 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.
@@ -230,6 +235,22 @@ var pincher = (function() {
         '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;
 
@@ -237,10 +258,16 @@ var pincher = (function() {
     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) {
@@ -301,12 +328,7 @@ var pincher = (function() {
       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;
@@ -368,6 +390,15 @@ var pincher = (function() {
         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();
     }
   };
 }());