downloads: Make header look more like settings, extensions, history, and

chrome/browser/resources/downloads/downloads.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. */
 
-body {
-  margin: 10px 10px 34px 10px;
+header {
+  align-items: center;
+  display: flex;
+  margin: 0 12px;

[benjhayden, 2014/08/22 16:54:01]

I know most of these magic numbers were here before you (and me), but can you
tell how hard it would be to share them with the bookmarks page, if only for a
TODO?

[Dan Beam, 2014/08/22 23:33:47]

https://codereview.chromium.org/502613003

 }
 
-.header {
-  clear: both;
-  overflow: auto;
+header h2 {
+  flex: 1;
+  font-size: 1.5em;
+  margin: 15px 0;
 }
 
-.header .logo {
-  float: left;
-}
-
-html[dir='rtl'] .logo,
-html[dir='rtl'] .form {

[benjhayden, 2014/08/22 16:54:01]

Yay, no more floats!
Sorry, I'm not very familiar with how flex handles rtl. Can you take a before
and after in an RTL language?

[Dan Beam, 2014/08/22 23:33:47]

http://imgur.com/a/89oEk

-  float: right;
-}
-
-.header .form {
-  -webkit-margin-start: 12px;
-  float: left;
-  margin-top: 4px;
+#term {
+  flex: none;
 }
 
 #downloads-summary {
   background-color: rgb(235, 239, 249);
   border-top: 1px solid rgb(156, 194, 239);
-  margin-bottom: 6px;
-  margin-top: 12px;
-  padding: 3px;
+  display: flex;
+  padding: 5px 10px;
 }
 
 #downloads-summary-text {
+  flex: 1;
   font-weight: bold;
 }
 
 #downloads-actions {
-  float: right;
-}
-
-html[dir=rtl] #downloads-actions {
-  float: left;
+  flex: none;
 }
 
 .disabled-link {
   color: #999;
   text-decoration: none;
 }
 
 #downloads-actions > a,
 #downloads-actions > .disabled-link {
   -webkit-margin-start: 10px;
 }
 
 #downloads-actions > a:first-child {
   -webkit-margin-start: 0;
 }
 
 #open-downloads-folder {
   -webkit-margin-end: 16px;
 }
 
 #downloads-display {
   max-width: 740px;
+  padding: 0 10px 34px;
 }
 
 .download {
   -webkit-margin-start: 114px;
   -webkit-padding-start: 56px;
   margin-bottom: 15px;
   margin-top: 6px;
   position: relative;
 }
 
@@ skipping 99 matching lines @@
 
 .controls a {
   -webkit-margin-end: 16px;
   color: #777;
 }
 
 #downloads-pagination {
   -webkit-margin-start: 18px;
   padding-top: 24px;
 }