Chrome Cleanup WebUI: polishing fixes from implementation review

Resize spinner, standardize color use, add learn more to error state,
change reboot required icon

Also makes chrome://settings/help use the right colors.

Bug: 747124
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ifae6b61cc4ffa668dbe095333f3590a2d97277a4
Reviewed-on: https://chromium-review.googlesource.com/580360
Reviewed-by: Tommy Li <[email protected]>
Commit-Queue: proberge <[email protected]>
Cr-Commit-Position: refs/heads/master@{#488992}
(cherry picked from commit 435ed18)

Change-Id: I6f20ec0a45aec8f19e4df42921a994567576c7d9
Reviewed-on: https://chromium-review.googlesource.com/590349
Reviewed-by: proberge <[email protected]>
Cr-Commit-Position: refs/branch-heads/3163@{#85}
Cr-Branched-From: ff259ba-refs/heads/master@{#488528}

Author: proberge

chrome/browser/resources/settings/about_page/about_page.html

@@ -64,7 +64,7 @@
       }
 
       iron-icon[icon='settings:error'] {
-        fill: var(--paper-red-600);
+        fill: var(--google-red-700);
       }
 
       .settings-box .start {

chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html

@@ -18,6 +18,11 @@
 <dom-module id="settings-chrome-cleanup-page">
   <template>
     <style include="settings-shared">
+      #cleaning-spinner {
+        height: 20px;
+        width: 20px;
+      }
+
       #files-to-remove-container {
         padding: 0 var(--settings-box-row-padding);
         /* Use the full available width for file paths to avoid inconsistent
@@ -31,6 +36,10 @@
         word-break: break-all;
       }
 
+      #learn-more {
+        -webkit-margin-start: 0;
+      }
+
       #powered-by-settings-box {
         min-height: 1em;
       }
@@ -51,25 +60,25 @@
       }
 
       #status-icon {
-        height: 24px;
-        width: 24px;
+        height: 20px;
+        vertical-align: top;
+        width: 20px;
       }
 
       .status-icon-container {
-        -webkit-padding-end: 12px;
-        min-width: 28px;
+        -webkit-padding-end: var(--settings-box-row-padding);
       }
 
       .status-icon-remove {
         --iron-icon-fill-color: var(--paper-grey-700);
       }
 
       .status-icon-done {
-        --iron-icon-fill-color: var(--paper-blue-500);
+        --iron-icon-fill-color: var(--google-blue-500);
       }
 
       .status-icon-warning {
-        --iron-icon-fill-color: var(--paper-red-700);
+        --iron-icon-fill-color: var(--google-red-700);
       }
 
       .top-aligned-settings-box {
@@ -85,15 +94,16 @@
             hidden="[[!isRemoving_]]">
         </paper-spinner>
         <iron-icon icon="[[statusIcon_]]" hidden="[[isRemoving_]]"
-            class$="[[statusIconClassName_]]"
-            id="status-icon">
-        </iron-icon>
+            class$="[[statusIconClassName_]]" id="status-icon"></iron-icon>
       </div>
       <div class="start">
         <div>[[title_]]</div>
-        <div class="secondary" hidden="[[!showDetails_]]">
-          $i18n{chromeCleanupExplanation}
-          <a href="$i18n{chromeCleanupLearnMoreUrl}" target="_blank">
+        <div class="secondary">
+          <span hidden="[[!showDetails_]]">
+            $i18n{chromeCleanupExplanation}
+          </span>
+          <a id="learn-more" href="$i18n{chromeCleanupLearnMoreUrl}"
+              target="_blank" hidden="[[!showLearnMore_]]">
             $i18n{learnMore}
           </a>
         </div>

chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.js

@@ -65,6 +65,16 @@ Polymer({
       value: false,
     },
 
+    /**
+     * Learn more should only be visible for the infected, cleaning and error
+     * states.
+     * @private
+     */
+    showLearnMore_: {
+      type: Boolean,
+      value: false,
+    },
+
     /** @private */
     showLogsPermission_: {
       type: Boolean,
@@ -119,12 +129,6 @@ Polymer({
   /** @private {?function()} */
   doAction_: null,
 
-  /**
-   * If true, this settings page is waiting for cleanup results.
-   * @private {boolean}
-   */
-  waitingForCleanupResults_: false,
-
   /** @override */
   attached: function() {
     this.browserProxy_ = settings.ChromeCleanupProxyImpl.getInstance();
@@ -196,6 +200,7 @@ Polymer({
       this.enableActionButton_(
           this.i18n('chromeCleanupDoneButtonLabel'), this.dismiss_.bind(this));
       this.setIconDone_();
+      this.showLearnMore_ = false;
     } else if (idleReason == settings.ChromeCleanupIdleReason.INITIAL) {
       this.dismiss_();
     } else {
@@ -205,11 +210,11 @@ Polymer({
       this.enableActionButton_(
           this.i18n('chromeCleanupDoneButtonLabel'), this.dismiss_.bind(this));
       this.setIconWarning_();
+      this.showLearnMore_ = true;
     }
 
     this.isRemoving_ = false;
     this.disableDetails_();
-    this.waitingForCleanupResults_ = false;
   },
 
   /**
@@ -249,7 +254,6 @@ Polymer({
    * @private
    */
   onCleaning_: function(files) {
-    this.waitingForCleanupResults_ = true;
     this.title_ = this.i18n('chromeCleanupTitleRemoving');
     this.isRemoving_ = true;
     this.resetIcon_();
@@ -267,7 +271,8 @@ Polymer({
   onRebootRequired_: function() {
     this.title_ = this.i18n('chromeCleanupTitleRestart');
     this.isRemoving_ = false;
-    this.setIconWarning_();
+    this.showLearnMore_ = false;
+    this.setIconDone_();
     this.enableActionButton_(
         this.i18n('chromeCleanupRestartButtonLabel'),
         this.restartComputer_.bind(this));
@@ -354,6 +359,7 @@ Polymer({
   enableDetails_: function(files) {
     this.showDetails_ = true;
     this.showLogsPermission_ = true;
+    this.showLearnMore_ = true;
     // Note: doesn't change the state of this.showFilesToRemove_.
     this.filesToRemove_ = files;
   },
@@ -385,8 +391,7 @@ Polymer({
   },
 
   /**
-   * Sets the card's icon as a warning (in case of computer restart required
-   * or failure).
+   * Sets the card's icon as a warning (in case of failure).
    * @private
    */
   setIconWarning_: function() {
@@ -395,7 +400,7 @@ Polymer({
   },
 
   /**
-   * Sets the card's icon as a completed indication.
+   * Sets the card's icon as a completed or reboot required indication.
    * @private
    */
   setIconDone_: function() {