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

chrome/browser/resources/downloads/downloads.css

Index: chrome/browser/resources/downloads/downloads.css
diff --git a/chrome/browser/resources/downloads/downloads.css b/chrome/browser/resources/downloads/downloads.css
index bbc2c1065bf44093289e9051e5bc93a153315e61..dc3031b8c2c16cf447032a99a10278ea530e666b 100644
--- a/chrome/browser/resources/downloads/downloads.css
+++ b/chrome/browser/resources/downloads/downloads.css
@@ -2,48 +2,36 @@
  * 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 {
@@ -66,6 +54,7 @@ html[dir=rtl] #downloads-actions {
 
 #downloads-display {
   max-width: 740px;
+  padding: 0 10px 34px;
 }
 
 .download {