Layout the NTP footer with flexboxes.

chrome/browser/resources/ntp4/new_tab.js

Index: chrome/browser/resources/ntp4/new_tab.js
diff --git a/chrome/browser/resources/ntp4/new_tab.js b/chrome/browser/resources/ntp4/new_tab.js
index 2a6c63bc4ed55e958f4d526b4b40df80bfe9f47f..c9fa32fc2351a04952e01486563b80a3fb54c2ed 100644
--- a/chrome/browser/resources/ntp4/new_tab.js
+++ b/chrome/browser/resources/ntp4/new_tab.js
@@ -126,6 +126,7 @@ cr.define('ntp', function() {
     if (loadTimeData.getBoolean('isDiscoveryInNTPEnabled'))
       sectionsToWaitFor++;
     measureNavDots();
+    layoutFooter();
 
     // Load the current theme colors.
     themeChanged();
@@ -334,6 +335,16 @@ cr.define('ntp', function() {
     document.querySelector('head').appendChild(styleElement);
   }
 
+  /**
+   * Layout the footer so that the nav dots stay centered.
+   */
+  function layoutFooter() {
+    var menu = $('footer-menu-container');
+    var logo = $('logo-img');
+    if (menu.clientWidth > logo.clientWidth)
+      logo.style.width = menu.clientWidth + 'px';

[Dan Beam, 2013/01/31 20:22:11]

this shouldn't be necessary and can be done in CSS

[dconnelly, 2013/02/01 14:34:14]

Continuing from the previous comment, even with the button group a fixed size,
the logo and button group aren't necessarily equal widths, so the nav dots can
still be off-centered.  Patrick suggested detecting the button group width on
page load and padding the logo.  I can't find anything in CSS that allows you to
express that one element should have the same width as another--can you point me
in the right direction?

+  }
+
   function themeChanged(opt_hasAttribution) {
     $('themecss').href = 'chrome://theme/css/new_tab_theme.css?' + Date.now();