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..91d0821b39aca0156a68b35bf32fbb66b7195105 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/chrome/browser/resources/ntp4/new_tab.css
@@ -180,8 +180,10 @@ html[dir='rtl'] #attribution {
 }
 
 #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;
 }
 
@@ -385,7 +387,10 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
   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;
@@ -405,6 +410,11 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
   line-height: 49px;
 }
 
+#chrome-web-store-link.invisible {
+  -webkit-order: -1;
+  visibility: hidden;
+}
+
 #chrome-web-store-link:hover {
   color: #666;
 }
@@ -415,20 +425,20 @@ html[dir='rtl'] #chrome-web-store-title {
 
 #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;
@@ -436,13 +446,33 @@ 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.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;