Refresh the Incognito NTP layout on default font size change

chrome/browser/resources/ntp4/md_incognito_tab.js

Index: chrome/browser/resources/ntp4/md_incognito_tab.js
diff --git a/chrome/browser/resources/ntp4/md_incognito_tab.js b/chrome/browser/resources/ntp4/md_incognito_tab.js
index a48c9a0d3ba991e267c72305f3272989c1ade41a..b0d7df43cb79315803ae028e27e387286cdc06b5 100644
--- a/chrome/browser/resources/ntp4/md_incognito_tab.js
+++ b/chrome/browser/resources/ntp4/md_incognito_tab.js
@@ -2,25 +2,9 @@
 // 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');
 
@@ -39,11 +23,34 @@ window.addEventListener('load', function() {
   // 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');
-  }
+  var MAX_ALLOWED_WIDTH = 600;
+  var tooWide = maxWidth > MAX_ALLOWED_WIDTH;
+  bulletpoints[1].classList.toggle('tooWide', tooWide);

[Dan Beam, 2017/05/25 01:02:39]

classes should be dash-form

[msramek, 2017/05/25 01:49:35]

Done.

+  if (tooWide)
+    maxWidth = MAX_ALLOWED_WIDTH;
 
   content.style.maxWidth = maxWidth + "px";
-});
+}
+
+window.addEventListener('load', recomputeLayoutWidth);
+
+// Handle the bookmark bar, theme, and font size 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();
+  },
+
+  defaultFontSizeChanged: function() {
+    setTimeout(recomputeLayoutWidth, 100);

[Dan Beam, 2017/05/25 01:02:39]

why are you doing this on a 100ms delay?  can we use requestAnimationFrame()
instead?

[msramek, 2017/05/25 01:49:35]

No, that's still too soon.

There is simply a delay somewhere between changing the font size in settings and
Blink redrawing the page. I'm not sure where it comes from, but I see it on
other pages, even chrome://settings itself. We manage to run JS code (this
method) before the font size is actually updated, so the delay is somewhere in
the C++ code, and not represented by a JS event.

I just chose 100ms because it seems to be large enough for the font size to
update, but small enough so that it doesn't look bad...

[Dan Beam, 2017/05/25 03:11:27]

for what it's worth, there's a very very low chance this works for everybody. 
if you really need this to work 100%, you should poll until your condition is
satisfied.

+  }
+};