Layout the NTP footer with flexboxes.

This updates the CSS flexbox property names to their most recent
iterations, displays the entire footer in a flexbox to make the layout
more obvious, and rearranges the footer's right-side flexbox so that it
always has the same width.

The logo on the footer's left side is resized once when the page is
rendered to make it the same width as the right side.  This keeps the
nav dots centered in the footer.

BUG=


Review URL: https://chromiumcodereview.appspot.com/12038090

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@182190 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/ntp4/new_tab.css

@@ -180,8 +180,9 @@ html[dir='rtl'] #attribution {
 }
 
 #footer-content {
-  -webkit-box-align: center;
-  display: -webkit-box;
+  -webkit-align-items: center;
+  -webkit-justify-content: space-between;
+  display: -webkit-flex;
   height: 49px;
 }
 
@@ -385,7 +386,10 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
   z-index: 5;
 }
 
+/* Footer buttons. ************************************************************/
+
 #chrome-web-store-link {
+  -webkit-order: 3;
   -webkit-padding-end: 12px;
   /* Match transition delay of recently closed button. */
   -webkit-transition-delay: 100ms;
@@ -405,6 +409,11 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
   line-height: 49px;
 }
 
+#footer-menu-container .invisible {
+  -webkit-order: -1;
+  visibility: hidden;
+}
+
 #chrome-web-store-link:hover {
   color: #666;
 }
@@ -414,21 +423,24 @@ html[dir='rtl'] #chrome-web-store-title {
 }
 
 #vertical-separator {
+  -webkit-order: -1;
   background-color: rgb(178, 178, 178);
-  display: none;
+  display: inline-block;
   height: 20px;
   margin: 0;
   vertical-align: middle;
+  visibility: hidden;
   width: 1px;
 }
 
 /* Show the separator only if one of the menus is visible. */
-.footer-menu-button:not([hidden]) ~ #vertical-separator {
-  display: block;
+.footer-menu-button:not(.invisible) ~ #chrome-web-store-link:not(.invisible)
+                                    ~ #vertical-separator {
+  -webkit-order: 2;
+  visibility: visible;
 }
 
 /* In trash mode, hide the menus and web store link. */
-#footer.showing-trash-mode #chrome-web-store-link,
 #footer.showing-trash-mode .menu-container {
   -webkit-transition-delay: 0;
   opacity: 0;
@@ -436,13 +448,23 @@ html[dir='rtl'] #chrome-web-store-title {
 }
 
 #footer .menu-container {
-  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -webkit-flex-direction: row;
+  -webkit-justify-content: flex-end;
   /* Put menus in a box so the order can easily be swapped. */
-  display: -webkit-box;
+  display: -webkit-flex;
   height: 100%;
   margin: 0;
 }
 
+#recently-closed-menu-button:not(.invisible) {
+  -webkit-order: 1;
+}
+
+#other-sessions-menu-button:not(.invisible) {
+  -webkit-order: 0;
+}
+
 .other-sessions-promo-message {
   display: none;
   padding: 0;

chrome/browser/resources/ntp4/new_tab.html

@@ -106,23 +106,22 @@
 
       <div id="footer-menu-container" class="menu-container">
         <button id="other-sessions-menu-button"
-            class="footer-menu-button custom-appearance" hidden>
+            class="footer-menu-button custom-appearance invisible">
           <span i18n-content="otherSessions"></span>
           <div class="disclosure-triangle"></div>
         </button>
         <button id="recently-closed-menu-button"
-            class="footer-menu-button custom-appearance">
+            class="footer-menu-button custom-appearance invisible">
           <span i18n-content="recentlyclosed"></span>
           <div class="disclosure-triangle"></div>
         </button>
+        <a id="chrome-web-store-link">
+          <span id="chrome-web-store-title" i18n-content="webStoreTitleShort">
+          </span>
+        </a>
         <div id="vertical-separator"></div>
       </div>
 
-      <a id="chrome-web-store-link">
-        <span id="chrome-web-store-title" i18n-content="webStoreTitleShort">
-        </span>
-      </a>
-
       <div id="trash" class="trash">
         <span class="lid"></span>
         <span class="can"></span>

chrome/browser/resources/ntp4/new_tab.js

@@ -128,6 +128,7 @@ cr.define('ntp', function() {
     if (loadTimeData.getBoolean('isDiscoveryInNTPEnabled'))
       sectionsToWaitFor++;
     measureNavDots();
+    layoutFooter();
 
     // Load the current theme colors.
     themeChanged();
@@ -336,6 +337,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';
+  }
+
   function themeChanged(opt_hasAttribution) {
     $('themecss').href = 'chrome://theme/css/new_tab_theme.css?' + Date.now();
 

chrome/browser/resources/ntp4/other_sessions.js

@@ -247,7 +247,7 @@ cr.define('ntp', function() {
       }
 
       // The menu button is shown iff tab sync is enabled.
-      this.hidden = !isTabSyncEnabled;
+      this.classList.toggle('invisible', !isTabSyncEnabled);
     },
 
     /**
@@ -259,7 +259,7 @@ cr.define('ntp', function() {
       if (signedIn)
         chrome.send('getForeignSessions');
       else
-        this.hidden = true;
+        this.classList.add('invisible');
     },
   };
 

chrome/browser/resources/ntp4/recently_closed.js

@@ -36,7 +36,6 @@ cr.define('ntp', function() {
       document.body.appendChild(this.menu);
 
       this.needsRebuild_ = true;
-      this.hidden = true;
       this.anchorType = cr.ui.AnchorType.ABOVE;
       this.invertLeftRight = true;
     },
@@ -64,7 +63,7 @@ cr.define('ntp', function() {
     set dataItems(dataItems) {
       this.dataItems_ = dataItems;
       this.needsRebuild_ = true;
-      this.hidden = !dataItems.length;
+      this.classList.toggle('invisible', !dataItems.length);
     },
 
     /**