Refresh the Incognito NTP layout on default font size change

chrome/browser/resources/ntp4/md_incognito_tab.js

 // Copyright 2017 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.
 
 // Handle the bookmark bar and theme change requests from the C++ side.
 var ntp = {
   /** @param {string} attached */
   setBookmarkBarAttached: function(attached) {
     document.documentElement.setAttribute('bookmarkbarattached', attached);
   },
 
   /** @param {!{hasCustomBackground: boolean}} themeData */
   themeChanged: function(themeData) {
     document.documentElement.setAttribute('hascustombackground',
                                           themeData.hasCustomBackground);
     $('incognitothemecss').href =
         'chrome://theme/css/incognito_new_tab_theme.css?' + Date.now();
   },
 };
 
 // Let the width of two lists of bulletpoints in a horizontal alignment
 // determine the maximum content width.
-window.addEventListener('load', function() {
+function recomputeLayoutWidth() {
   var bulletpoints = document.querySelectorAll('.bulletpoints');
   var content = document.querySelector('.content');
 
   // Unless this is the first load of the Incognito NTP in this session and
   // with this font size, we already have the maximum content width determined.
   var fontSize = window.getComputedStyle(document.body).fontSize;
   var maxWidth = localStorage[fontSize] ||
       (bulletpoints[0].offsetWidth + bulletpoints[1].offsetWidth +
            40 /* margin */ + 2 /* offsetWidths may be rounded down */);
 
   // Save the data for quicker access when the NTP is reloaded. Note that since
   // we're in the Incognito mode, the local storage is ephemeral and the data
   // will be discarded when the session ends.
   localStorage[fontSize] = maxWidth;
 
   // Limit the maximum width to 600px. That might force the two lists
   // of bulletpoints under each other, in which case we must swap the left
   // and right margin.
   if (maxWidth > 600) {
     maxWidth = 600;
 
     bulletpoints[1].classList.add('tooWide');
+  } else {
+    bulletpoints[1].classList.remove('tooWide');

[Dan Beam, 2017/05/24 03:09:19]

nit:

var MAX_ALLOWED_WIDTH = 600;

var tooWide = maxWidth > MAX_ALLOWED_WIDTH;
bulletpoints[1].classList.add('tooWide', tooWide);
if (tooWide)
  maxWidth = MAX_ALLOWED_WIDTH;

[msramek, 2017/05/24 12:56:02]

bulletpoints[1].classList.add('tooWide', tooWide) would add two classes -
"tooWide" and "true"/"false". I think you're confusing this with setAttribute()?

That said, we can change this to an attribute as well.

[Dan Beam, 2017/05/24 17:43:54]

sorry, classList.toggle

[msramek, 2017/05/24 23:16:37]

Ah, right. Done.

   }
 
   content.style.maxWidth = maxWidth + "px";
+};

[Dan Beam, 2017/05/24 03:09:19]

no semi

[msramek, 2017/05/24 12:56:02]

Done.

+
+window.addEventListener('load', function() {
+  recomputeLayoutWidth();
+
+  var fontSizeEstimator = $('font-size-estimator');
+  if (ResizeObserver) {

[Dan Beam, 2017/05/24 03:09:19]

errr, why do you need to feature detect this?

[msramek, 2017/05/24 12:56:02]

It has existed for a few milestones, but it's still behind the experimental web
features flag. Anyways, I removed it for now.

+    var observer = new ResizeObserver(recomputeLayoutWidth);
+    observer.observe(fontSizeEstimator);

[Dan Beam, 2017/05/24 03:09:19]

new ResizeObserver(recomputeLayoutWidth).observe(fontSizeEstimator);

[msramek, 2017/05/24 12:56:02]

Acknowledged, but I removed this code.

+  } else {
+    var currentFontSize = window.getComputedStyle(document.body).fontSize;
+
+    setInterval(function() {
+      if (window.getComputedStyle(document.body).fontSize == currentFontSize)

[Dan Beam, 2017/05/24 03:09:19]

why are you calling this so much?  this is a mildly expensive call...

[msramek, 2017/05/24 12:56:02]

Acknowledged, but I removed this code.

+        return;
+
+      currentFontSize = window.getComputedStyle(document.body).fontSize;
+      recomputeLayoutWidth();
+    }, 1000 /* ms */);
+  }
 });