MD Downloads: fix a lot of visual design nits

1) Change timestamp color
2) Make remove (X) smaller and change color
3) Hide remove (X) when in progress or dangerous (instead of disabling)
4) Make cancelled downloads 50% opaque
5) Strikethrough cancelled file names
6) Remove ripple from "Show in folder"
7) Aligned buttons to text edge (rather than ripple edge)
8) Various alignment/padding/sizes tweaks
9) Lighten shadow around each item
10) Fix search icon colors/input text indent

R=groby@chromium.org
BUG=425626

Review URL: https://codereview.chromium.org/1301293003

Cr-Commit-Position: refs/heads/master@{#344791}

9 files changed, 57 insertions, 24 deletions

diff --git a/chrome/browser/resources/md_downloads/item.css b/chrome/browser/resources/md_downloads/item.css
index b80cbac..0f39c80 100644
--- a/chrome/browser/resources/md_downloads/item.css
+++ b/chrome/browser/resources/md_downloads/item.css
@@ -23,7 +23,7 @@
 }
 
 #date-container > * {
-  color: #5a5a5a;
+  color: #7c7c7c;
   font-size: 92.3%;
   font-weight: 500;
 }
@@ -34,30 +34,42 @@
 
 #content {
   background: white;
-  border-radius: 2px;  /* TODO(dbeam): why does this differ from Polymer? */
+  border-radius: 2px;  /* TODO(dbeam): change to paper-card instead. */
   display: flex;
   flex: none;
   min-height: 103px;
   width: var(--downloads-item-width);
 }
 
+#content[elevation='1'] {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08),
+              0 3px 1px -2px rgba(0, 0, 0, .2);
+}
+
 #details {
   -webkit-border-start: 1px #d8d8d8 solid;
+  -webkit-padding-end: 16px;
+  -webkit-padding-start: 24px;
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding: 16px 16px 12px 16px;
+  padding-bottom: 12px;
+  padding-top: 16px;
 }
 
 #content:not(.is-active) #details {
   color: #bababa;
 }
 
+#content:not(.is-active) #name {
+  text-decoration: line-through;
+}
+
 .icon-wrapper {
   align-self: center;
   flex: none;
   justify-content: center;
-  margin: 0 32px;
+  margin: 0 24px;
 }
 
 .icon {
@@ -73,6 +85,7 @@
 
 #content:not(.is-active) .icon {
   -webkit-filter: grayscale(100%);
+  opacity: .5;
 }
 
 #warning {
@@ -144,6 +157,10 @@
   display: none;
 }
 
+.controls {
+  -webkit-margin-start: -8px;
+}
+
 #cancel,
 #retry,
 .keep,
@@ -157,17 +174,17 @@
 }
 
 #remove {
-  --iron-icon-height: 20px;
-  --iron-icon-width: 20px;
+  --iron-icon-height: 16px;
+  --iron-icon-width: 16px;
   --paper-icon-button: {
-    height: 20px;
-    padding: 6px;
-    width: 20px;
+    height: 16px;
+    padding: 8px;
+    width: 16px;
   };
 }
 
 #incognito {
-  bottom: 16px;
+  bottom: 20px;
   content: -webkit-image-set(url(1x/incognito_marker.png) 1x,
                              url(2x/incognito_marker.png) 2x);
   position: absolute;
diff --git a/chrome/browser/resources/md_downloads/item.html b/chrome/browser/resources/md_downloads/item.html
index 6588516..22c5212 100644
--- a/chrome/browser/resources/md_downloads/item.html
+++ b/chrome/browser/resources/md_downloads/item.html
@@ -39,7 +39,7 @@
         <div id="safe" class="controls" hidden$="[[isDangerous_]]">
           <cr-button id="show" focus-type="show"
               on-click="onShowClick_" i18n-content="controlShowInFolder"
-              lowercase></cr-button>
+              noink lowercase></cr-button>
           <cr-button id="retry" focus-type="retry" on-click="onRetryClick_"
               i18n-content="controlRetry"></cr-button>
           <cr-button id="pause" focus-type="pause" on-click="onPauseClick_"
diff --git a/chrome/browser/resources/md_downloads/item.js b/chrome/browser/resources/md_downloads/item.js
index 62eb9ba..478667b 100644
--- a/chrome/browser/resources/md_downloads/item.js
+++ b/chrome/browser/resources/md_downloads/item.js
@@ -88,7 +88,7 @@ cr.define('downloads', function() {
         this.$.progress.value = data.percent;
       }
 
-      var disableRemove;
+      var hideRemove;
 
       if (this.isDangerous_) {
         this.isMalware_ =
@@ -96,7 +96,7 @@ cr.define('downloads', function() {
             data.danger_type == downloads.DangerType.DANGEROUS_HOST ||
             data.danger_type == downloads.DangerType.DANGEROUS_URL ||
             data.danger_type == downloads.DangerType.POTENTIALLY_UNWANTED;
-        disableRemove = true;
+        hideRemove = true;
       } else {
         /** @const */ var completelyOnDisk =
             data.state == downloads.States.COMPLETE &&
@@ -121,7 +121,7 @@ cr.define('downloads', function() {
         /** @const */ var showCancel = isPaused || isInProgress;
         this.$.cancel.hidden = !showCancel;
 
-        disableRemove = showCancel ||
+        hideRemove = showCancel ||
             !loadTimeData.getBoolean('allowDeletingHistory');
 
         /** @const */ var controlledByExtension = data.by_ext_id &&
@@ -138,7 +138,7 @@ cr.define('downloads', function() {
         this.iconLoader_.loadScaledIcon(this.$['file-icon'], icon);
       }
 
-      this.$.remove.disabled = disableRemove;
+      this.$.remove.style.visibility = hideRemove ? 'hidden' : '';
     },
 
     /**
diff --git a/chrome/browser/resources/md_downloads/manager.css b/chrome/browser/resources/md_downloads/manager.css
index 189a131..b2505a0 100644
--- a/chrome/browser/resources/md_downloads/manager.css
+++ b/chrome/browser/resources/md_downloads/manager.css
@@ -12,7 +12,7 @@
 
 @media screen and (max-width: 1024px) {
   :host {
-    flex-basis: 670px;
+    flex-basis: 670px;  /* 622 card width + 24 left margin + 24 right margin. */
   }
 }
 
diff --git a/chrome/browser/resources/md_downloads/shared_style.css b/chrome/browser/resources/md_downloads/shared_style.css
index 124498b..dd1f6ea 100644
--- a/chrome/browser/resources/md_downloads/shared_style.css
+++ b/chrome/browser/resources/md_downloads/shared_style.css
@@ -3,11 +3,11 @@
  * found in the LICENSE file. */
 
 * {
-  --downloads-item-width: 606px;
+  --downloads-item-width: 622px;
   --downloads-shared-style: {
   };
-  /* (1024 total width - 606 item width) / 2 = 209 room to play. */
-  --downloads-side-column-basis: 209px;
+  /* (1024 total width - 622 item width) / 2 = 201 room to play. */
+  --downloads-side-column-basis: 201px;
 }
 
 cr-button:not([lowercase]) {
diff --git a/chrome/browser/resources/md_downloads/toolbar.css b/chrome/browser/resources/md_downloads/toolbar.css
index 57c7f9b..63e7037 100644
--- a/chrome/browser/resources/md_downloads/toolbar.css
+++ b/chrome/browser/resources/md_downloads/toolbar.css
@@ -32,8 +32,12 @@
   width: var(--downloads-item-width);
 }
 
+#actions cr-button {
+  -webkit-margin-end: 8px;
+}
+
 #actions,
-#search {
+#search-term {
   color: rgb(192, 199, 205);
 }
 
@@ -58,12 +62,12 @@
     color: inherit;
     font-family: inherit;
     font-size: inherit;
-    font-weight: 500;
   };
   --paper-input-container-input-color: rgb(192, 199, 205);
   z-index: 0;
 }
 
+#search-term input[type='search']::-webkit-search-decoration,
 #search-term input[type='search']::-webkit-search-cancel-button,
 #search-term input[type='search']::-webkit-search-results-button {
   -webkit-appearance: none;
@@ -99,10 +103,11 @@ paper-icon-button {
   right: auto;
 }
 
-paper-menu-button {
+#more {
   --paper-menu-button: {
     padding: 0;
   };
+  -webkit-margin-start: 16px;
 }
 
 paper-item {
diff --git a/chrome/browser/resources/md_downloads/toolbar.html b/chrome/browser/resources/md_downloads/toolbar.html
index 68c1a0f..bfb4d98 100644
--- a/chrome/browser/resources/md_downloads/toolbar.html
+++ b/chrome/browser/resources/md_downloads/toolbar.html
@@ -32,7 +32,7 @@
             on-click="toggleShowingSearch_"
             hidden$="[[!showingSearch_]]"></paper-icon-button>
       </paper-input-container>
-      <paper-menu-button horizontal-align="right">
+      <paper-menu-button id="more" horizontal-align="right">
         <paper-icon-button icon="more-vert"
             class="dropdown-trigger"></paper-icon-button>
         <paper-menu class="dropdown-content">
diff --git a/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.html b/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.html
index 842f040..d6bda38 100644
--- a/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.html
+++ b/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.html
@@ -5,7 +5,8 @@
   <link rel="import" type="css" href="cr_button.css">
   <template>
     <paper-button active="{{active}}" disabled="[[disabled]]"
-        raised="[[raised]]" toggles="[[toggles]]" noink$="[[toggles]]">
+        raised="[[raised]]" toggles="[[toggles]]"
+        noink$="[[computeNoInk_(toggles, noink)]]">
       <content></content>
     </paper-button>
   </template>
diff --git a/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.js b/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.js
index f1dab20..38b46f1 100644
--- a/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.js
+++ b/ui/webui/resources/cr_elements/v1_0/cr_button/cr_button.js
@@ -47,6 +47,11 @@ Polymer({
       value: false
     },
 
+    noink: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * If true, the button is in the active state. Mostly useful when
      * |toggles| is true.
@@ -57,4 +62,9 @@ Polymer({
       notify: true
     }
   },
+
+  /** @private */
+  computeNoInk_: function() {
+    return this.toggles || this.noink;
+  },
 });