Layout the NTP footer with flexboxes.

chrome/browser/resources/ntp4/new_tab.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview New tab page
  * This is the main code for the new tab page used by touch-enabled Chrome
  * browsers.  For now this is still a prototype.
  */
 
@@ skipping 108 matching lines @@
   }
 
   /**
    * Invoked at startup once the DOM is available to initialize the app.
    */
   function onLoad() {
     sectionsToWaitFor = loadTimeData.getBoolean('showApps') ? 2 : 1;
     if (loadTimeData.getBoolean('isDiscoveryInNTPEnabled'))
       sectionsToWaitFor++;
     measureNavDots();
+    layoutFooter();
 
     // Load the current theme colors.
     themeChanged();
 
     newTabView = new NewTabView();
 
     notificationContainer = getRequiredElement('notification-container');
     notificationContainer.addEventListener(
         'webkitTransitionEnd', onNotificationTransitionEnd);
 
@@ skipping 188 matching lines @@
     var pxWidth = Math.max(measuringDiv.clientWidth * 1.15 + 4, 80);
 
     var styleElement = document.createElement('style');
     styleElement.type = 'text/css';
     // max-width is used because if we run out of space, the nav dots will be
     // shrunk.
     styleElement.textContent = '.dot { max-width: ' + pxWidth + 'px; }';
     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();
 
     if (typeof opt_hasAttribution != 'undefined') {
       document.documentElement.setAttribute('hasattribution',
                                             opt_hasAttribution);
     }
 
     updateAttribution();
   }
@@ skipping 305 matching lines @@
     themeChanged: themeChanged,
     updateLogin: updateLogin
   };
 });
 
 // This will end up calling ntp.gotShouldShowApps.
 chrome.send('getShouldShowApps');
 document.addEventListener('DOMContentLoaded', ntp.onLoad);
 
 var toCssPx = cr.ui.toCssPx;