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-flex-direction: row;

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

this seems to be the default value (so probably not needed)

[dconnelly, 2013/02/04 16:40:45]

Done.

+  -webkit-justify-content: space-between;

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

why is -webkit-justify-content needed?

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

Re: justify, .invisible, etc: I think explaining the overall approach should
help, or at least perhaps you can suggest a better approach since I'm far from
fluent in CSS.

First, the goal is to keep the nav dots centered in the footer regardless of how
many of the right-side buttons are visible.  Otherwise, when they're all present
or all missing, the nav dots are significantly off-centered and look pretty
funny.

The footer contents are then split into three groups: the logo (left side), the
nav dots, and the buttons (right side).  Storing these three containers in a
flexbox with "justify-content: space-between" ensures that the logo sticks to
the left side of the footer, the button group to the right side of the footer,
and the empty spaces between the logo and nav dots and the nav dots and button
group are equal widths.

[ logo ] ----(space)---- [ nav dots ] ----(space)---- [ button group ]

+  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: 2;
   -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;
 }
 
+#chrome-web-store-link.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 {
   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 > #vertical-separator {

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

80 col wrap, > isn't needed

[dconnelly, 2013/02/04 16:40:45]

Done.

+  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.invisible {

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

why did you bring back this whole .invisible business?  IIRC it messes up the
centering of the nav "dots" ([ Most visited ][ Apps ] thingies)?

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

The problem is that the button group has variable width when any of the buttons
are "hidden: true", so as the button group expands/contracts, the nav dots will
shift.  So 'visibility: hidden' keeps the button group a fixed size.

(Patrick thought the .invisible approach was the right way, and we couldn't
really figure out from the Git logs why it was removed.  You're saying it broke
the centering?)

+  -webkit-order: -1;
+  visibility: hidden;
+}
+
+#recently-closed-menu-button:not(.invisible) {
+  -webkit-order: 1;
+}
+
+#other-sessions-menu-button.invisible {

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

combine with selector above, i.e.

  #chrome-web-store-link.invisible,
  #recently-closed-menu-button.invisible,
  #other-sessions-menu-button.invisible {
    -webkit-order: -1;
    visibility: hidden;
  }

or better yet

  #footer-menu-container .invisible {
    -webkit-order: -1;
    visibility: hidden;
  }

[dconnelly, 2013/02/04 16:40:45]

Done.

+  -webkit-order: -1;
+  visibility: hidden;
+}
+
+#other-sessions-menu-button::not(.invisible) {

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

::not() should be :not() (:: means psuedo-element, : means psuedo-selector)

[dconnelly, 2013/02/04 16:40:45]

Done.

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