WebUI MD Refresh: Refresh downloads buttons

Bug: 850719
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I63fb963d90fe8b240fce80b52f8b852d5c77f311
Reviewed-on: https://chromium-review.googlesource.com/1101923
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568101}

chrome/browser/resources/md_downloads/item.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/action_link_css.html">
@@ -19,7 +20,7 @@
 
 <dom-module id="downloads-item">
   <template>
-    <style include="action-link cr-hidden-style cr-icons">
+    <style include="action-link cr-hidden-style cr-icons paper-button-style">
       :host {
         display: flex;
         flex-direction: column;
@@ -129,13 +130,12 @@
         word-break: break-all;
       }
 
-      #name {
-        -webkit-margin-end: 12px;  /* Only really affects #tag. */
+      .is-active :-webkit-any(#name, #file-link, #show) {
+        color: var(--google-blue-600);
       }
 
-      #pause-or-resume,
-      .is-active :-webkit-any(#name, #file-link, #show) {
-        color: rgb(51, 103, 214);
+      #name {
+        -webkit-margin-end: 12px;  /* Only really affects #tag. */
       }
 
       #tag {
@@ -168,24 +168,13 @@
       }
 
       #progress {
-        --paper-progress-active-color: rgb(54, 126, 237);
+        --paper-progress-active-color: var(--google-blue-600);
         --paper-progress-container-color: rgb(223, 222, 223);
         width: auto;
       }
 
-      .controls {
-        -webkit-margin-start: -.57em;
-      }
-
-      #cancel,
-      #retry,
-      .keep,
-      .discard {
-        color: #5a5a5a;
-      }
-
       #show {
-        margin: .7em .57em;
+        margin: .7em 0;
       }
 
       #controlled-by {
@@ -202,7 +191,7 @@
       }
 
       .is-active #controlled-by a {
-        color: rgb(51, 103, 214);
+        color: var(--google-blue-600);
       }
 
       #remove-wrapper {
@@ -265,17 +254,18 @@
           <a is="action-link" id="show" on-click="onShowTap_"
               hidden="[[!completelyOnDisk_]]">$i18n{controlShowInFolder}</a>
           <template is="dom-if" if="[[data.retry]]">
-            <paper-button id="retry" on-click="onRetryTap_">
+            <paper-button class="action-button" on-click="onRetryTap_">
               $i18n{controlRetry}
             </paper-button>
           </template>
           <template is="dom-if" if="[[pauseOrResumeText_]]">
-            <paper-button id="pause-or-resume" on-click="onPauseOrResumeTap_">
+            <paper-button class$="[[pauseOrResumeClass_]]"
+                on-click="onPauseOrResumeTap_">
               [[pauseOrResumeText_]]
             </paper-button>
           </template>
           <template is="dom-if" if="[[showCancel_]]">
-            <paper-button id="cancel" on-click="onCancelTap_">
+            <paper-button on-click="onCancelTap_">
               $i18n{controlCancel}
             </paper-button>
           </template>
@@ -286,18 +276,19 @@
           <div id="dangerous" class="controls">
             <!-- Dangerous file types (e.g. .exe, .jar). -->
             <template is="dom-if" if="[[!isMalware_]]">
-              <paper-button id="discard" on-click="onDiscardDangerousTap_"
-                  class="discard">$i18n{dangerDiscard}</paper-button>
-              <paper-button id="save" on-click="onSaveDangerousTap_"
-                  class="keep">$i18n{dangerSave}</paper-button>
+              <paper-button on-click="onDiscardDangerousTap_"
+                  class="action-button">$i18n{dangerDiscard}</paper-button>
+              <paper-button on-click="onSaveDangerousTap_">
+                $i18n{dangerSave}</paper-button>
             </template>
 
             <!-- Things that safe browsing has determined to be dangerous. -->
             <template is="dom-if" if="[[isMalware_]]">
-              <paper-button id="danger-remove" on-click="onDiscardDangerousTap_"
-                  class="discard">$i18n{controlRemoveFromList}</paper-button>
-              <paper-button id="restore" on-click="onSaveDangerousTap_"
-                  class="keep">$i18n{dangerRestore}</paper-button>
+              <paper-button on-click="onDiscardDangerousTap_"
+                  class="action-button">
+                $i18n{controlRemoveFromList}</paper-button>
+              <paper-button on-click="onSaveDangerousTap_">
+                $i18n{dangerRestore}</paper-button>
             </template>
           </div>
         </template>

chrome/browser/resources/md_downloads/item.js

@@ -49,6 +49,11 @@ cr.define('downloads', function() {
         value: false,
       },
 
+      pauseOrResumeClass_: {
+        computed: 'computePauseOrResumeClass_(isInProgress_, data.resume)',
+        type: String,
+      },
+
       pauseOrResumeText_: {
         computed: 'computePauseOrResumeText_(isInProgress_, data.resume)',
         type: String,
@@ -195,6 +200,14 @@ cr.define('downloads', function() {
            this.data.danger_type == downloads.DangerType.POTENTIALLY_UNWANTED);
     },
 
+    /**
+     * @return {string} 'action-button' for a resume button, empty otherwise.
+     * @private
+     */
+    computePauseOrResumeClass_: function() {
+      return !this.isInProgress_ && this.data.resume ? 'action-button' : '';
+    },
+
     /** @private */
     computePauseOrResumeText_: function() {
       if (this.isInProgress_)