Layout the NTP footer with flexboxes.

chrome/browser/resources/ntp4/new_tab.css

Index: chrome/browser/resources/ntp4/new_tab.css
diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css
index 9c77147cbe5481f135aca2c52aeb9e068625e6ad..d44a767331cf645abcd2ffef7489bdb9c4ac47fd 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/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;

[Evan Stade, 2013/02/06 22:09:14]

I think the order should always remain the same, or else the webstore link will
jump around when a menu becomes visible, no?

[dconnelly, 2013/02/06 23:09:24]

I don't understand--this just selects the separator.  The order of non-invisible
elements is fixed: 0: other sessions, 1: recently closed, 2: separator, 3:
webstore

[Evan Stade, 2013/02/06 23:15:43]

my question is why it moves when it is invisible.

+  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;