Revamp the Incognito NTP on Desktop

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
new file mode 100644
index 0000000000000000000000000000000000000000..bdf965a65b1bb4612802b5d3a75b690d094559b0
--- /dev/null
+++ b/chrome/browser/resources/ntp4/md_incognito_tab.js
@@ -0,0 +1,41 @@
+// 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() {
+  var b1 = $('firstBulletpoints');

[Dan Beam, 2017/04/20 18:27:51]

nit: why not just

var bullets = querySelectorAll('.bulletpoints');
bullet[0]/bullet[1]

then you can drop the IDs?  maybe more brittle?  just a nit.

[msramek, 2017/04/21 12:20:36]

Done. I'm actually using '.bulletpoints + .bulletpoints' selector in the CSS, so
if it's brittle here, then it's brittle there already.

+  var b2 = $('secondBulletpoints');
+  var c = document.querySelector('.content');
+
+  var maxWidth = (b1.offsetWidth + b2.offsetWidth +
+      40 /* margin */ + 2 /* offsetWidths may be rounded down */);
+
+  // 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;
+
+    b2.className += " tooWide";

[Dan Beam, 2017/04/20 18:27:51]

b2.classList.add('tooWide');

[msramek, 2017/04/21 12:20:36]

Done. (Thanks, my JS-fu seems to have degraded over the years.)

+  }
+
+  c.style.maxWidth = maxWidth + "px";
+});