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..b54e6a50c486087e6acb21e7bef27142a6f9a236 100644
--- a/chrome/browser/resources/ntp4/md_incognito_tab.js
+++ b/chrome/browser/resources/ntp4/md_incognito_tab.js
@@ -20,7 +20,7 @@ var ntp = {
 
 // 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');
 
@@ -43,7 +43,29 @@ window.addEventListener('load', function() {
     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 */);
+  }
 });