Layout the NTP footer with flexboxes.

chrome/browser/resources/ntp4/new_tab.css

 /* 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. */
 
 html {
   /* It's necessary to put this here instead of in body in order to get the
      background-size of 100% to work properly */
   height: 100%;
   overflow: hidden;
 }
@@ skipping 162 matching lines @@
 }
 
 /* TODO(estade): remove this border hack and replace with a webkit-gradient
  * border-image on #footer once WebKit supports border-image-slice.
  * See https://bugs.webkit.org/show_bug.cgi?id=20127 */
 #footer-border {
   height: 1px;
 }
 
 #footer-content {
-  -webkit-box-align: center;
-  display: -webkit-box;
+  -webkit-align-items: center;
+  -webkit-justify-content: space-between;
+  display: -webkit-flex;
   height: 49px;
 }
 
 #footer-content > * {
   margin: 0 9px;
 }
 
 #logo-img {
   display: inline-block;
   margin-top: 4px;
@@ skipping 183 matching lines @@
   margin: 0;
   max-width: 150px;
   min-width: 90px;
   outline: none;
   padding: 0;
   position: absolute;
   top: 0;
   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;
   color: inherit;
   cursor: pointer;
   display: inline-block;
   margin: 0;
   text-decoration: none;
   white-space: nowrap;
 }
 
 #chrome-web-store-title {
   -webkit-padding-end: 36px;
   -webkit-padding-start: 15px;
   background: url('chrome://theme/IDR_WEBSTORE_ICON_24') right 50% no-repeat;
   display: inline-block;
   line-height: 49px;
 }
 
+#footer-menu-container .invisible {
+  -webkit-order: -1;
+  visibility: hidden;
+}
+
 #chrome-web-store-link:hover {
   color: #666;
 }
 
 html[dir='rtl'] #chrome-web-store-title {
   background-position-x: left;
 }
 
 #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;
   visibility: hidden;
 }
 
 #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;
 }
 
 .other-sessions-promo-message:only-child {
   display: block;
 }
 
 .other-sessions-promo-message p {
   margin: 0;
 }