Chrome Cleanup WebUI: Remove the "security icon" to streamline the UI

A spinner previously replaced the icon while scanning or cleaning was
in progress. Since the icon is removed, the spinner is now positioned
to the right of the text, replacing the action button while scanning or
cleaning is in progress.

Bug: 803683
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I2272ae8280d464c252cb10c00d77bbee35983a03
Reviewed-on: https://chromium-review.googlesource.com/1133318
Commit-Queue: proberge <proberge@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Chris Sharp <csharp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#577346}

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
@@ -13,7 +11,6 @@
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="../controls/controlled_button.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
-<link rel="import" href="../icons.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="chrome_cleanup_proxy.html">
 <link rel="import" href="items_to_remove_list.html">
@@ -22,6 +19,7 @@
   <template>
     <style include="settings-shared">
       #waiting-spinner {
+        flex-shrink: 0;
         height: 20px;
         width: 20px;
       }
@@ -43,28 +41,6 @@
         height: 22px;
       }
 
-      #status-icon {
-        height: 20px;
-        vertical-align: top;
-        width: 20px;
-      }
-
-      .status-icon-container {
-        -webkit-padding-end: var(--settings-box-row-padding);
-      }
-
-      .status-icon-remove {
-        --iron-icon-fill-color: var(--google-grey-refresh-700);
-      }
-
-      .status-icon-done {
-        --iron-icon-fill-color: var(--google-blue-500);
-      }
-
-      .status-icon-warning {
-        --iron-icon-fill-color: var(--google-red-700);
-      }
-
       .top-aligned-settings-box {
         align-items: center;
         /* override settings-box min-height since we use vertical padding */
@@ -74,14 +50,6 @@
     </style>
     <div class$="settings-box first
                  [[getTopSettingsBoxClass_(showExplanation_)]]">
-      <div class="status-icon-container">
-        <paper-spinner-lite id="waiting-spinner"
-            hidden="[[!isWaitingForResult_]]" active="[[isWaitingForResult_]]">
-        </paper-spinner-lite>
-        <iron-icon id="status-icon" hidden="[[isWaitingForResult_]]"
-            icon="[[statusIcon_]]" class$="[[statusIconClassName_]]">
-        </iron-icon>
-      </div>
       <div class="start">
         <div id="status-title" role="status" inner-h-t-m-l="[[title_]]"></div>
         <div hidden="[[!showExplanation_]]">
@@ -91,6 +59,9 @@
       <cr-policy-pref-indicator
           pref="[[prefs.software_reporter.enabled]]">
       </cr-policy-pref-indicator>
+      <paper-spinner-lite id="waiting-spinner"
+          hidden="[[!isWaitingForResult_]]" active="[[isWaitingForResult_]]">
+      </paper-spinner-lite>
       <template is="dom-if" if="[[showActionButton_]]">
         <div class="separator"></div>
         <paper-button id="action-button" class="action-button"

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

@@ -58,14 +58,6 @@ settings.ChromeCleanupOngoingAction = {
   CLEANING: 2,
 };
 
-/**
- * @typedef {{
- *   statusIcon: string,
- *   statusIconClassName: string,
- * }}
- */
-settings.ChromeCleanupCardIcon;
-
 /**
  * @typedef {{
  *   label: string,
@@ -78,7 +70,6 @@ settings.ChromeCleanupCardActionButton;
  * @typedef {{
  *   title: ?string,
  *   explanation: ?string,
- *   icon: ?settings.ChromeCleanupCardIcon,
  *   actionButton: ?settings.ChromeCleanupCardActionButton,
  *   flags: number,
  * }}
@@ -214,18 +205,6 @@ Polymer({
       computed: 'computeHasExtensionsToShow_(scannerResults_)',
     },
 
-    /** @private */
-    statusIcon_: {
-      type: String,
-      value: '',
-    },
-
-    /** @private */
-    statusIconClassName_: {
-      type: String,
-      value: '',
-    },
-
     /** @private {chrome.settingsPrivate.PrefObject} */
     logsUploadPref_: {
       type: Object,
@@ -521,27 +500,10 @@ Polymer({
 
     this.title_ = components.title || '';
     this.explanation_ = components.explanation || '';
-    this.updateIcon_(components.icon);
     this.updateActionButton_(components.actionButton);
     this.updateCardFlags_(components.flags);
   },
 
-  /**
-   * Updates the icon on the cleanup card to show the current state.
-   * @param {?settings.ChromeCleanupCardIcon} icon The icon to
-   *     render, or null if no icon should be shown.
-   * @private
-   */
-  updateIcon_: function(icon) {
-    if (!icon) {
-      this.statusIcon_ = '';
-      this.statusIconClassName_ = '';
-    } else {
-      this.statusIcon_ = icon.statusIcon;
-      this.statusIconClassName_ = icon.statusIconClassName;
-    }
-  },
-
   /**
    * Updates the action button on the cleanup card as the action expected for
    * the current state.
@@ -662,30 +624,6 @@ Polymer({
    * @private
    */
   buildCardStateToComponentsMap_: function() {
-    /**
-     * The icons to show on the card.
-     * @enum {settings.ChromeCleanupCardIcon}
-     */
-    const icons = {
-      // Card's icon indicates a cleanup offer.
-      SYSTEM: {
-        statusIcon: 'cr:security',
-        statusIconClassName: 'status-icon-remove',
-      },
-
-      // Card's icon indicates a warning (in case of failure).
-      WARNING: {
-        statusIcon: 'cr:error',
-        statusIconClassName: 'status-icon-warning',
-      },
-
-      // Card's icon indicates completion or reboot required.
-      DONE: {
-        statusIcon: 'settings:check-circle',
-        statusIconClassName: 'status-icon-done',
-      },
-    };
-
     /**
      * The action buttons to show on the card.
      * @enum {settings.ChromeCleanupCardActionButton}
@@ -719,7 +657,6 @@ Polymer({
         settings.ChromeCleanerCardState.CLEANUP_OFFERED, {
           title: this.i18n('chromeCleanupTitleRemove'),
           explanation: this.i18n('chromeCleanupExplanationRemove'),
-          icon: icons.SYSTEM,
           actionButton: actionButtons.REMOVE,
           flags: settings.ChromeCleanupCardFlags.SHOW_LOGS_PERMISSIONS |
               settings.ChromeCleanupCardFlags.SHOW_ITEMS_TO_REMOVE,
@@ -729,7 +666,6 @@ Polymer({
         settings.ChromeCleanerCardState.CLEANING, {
           title: this.i18n('chromeCleanupTitleRemoving'),
           explanation: this.i18n('chromeCleanupExplanationRemoving'),
-          icon: null,
           actionButton: null,
           flags: settings.ChromeCleanupCardFlags.WAITING_FOR_RESULT |
               settings.ChromeCleanupCardFlags.SHOW_ITEMS_TO_REMOVE,
@@ -739,7 +675,6 @@ Polymer({
         settings.ChromeCleanerCardState.REBOOT_REQUIRED, {
           title: this.i18n('chromeCleanupTitleRestart'),
           explanation: null,
-          icon: icons.DONE,
           actionButton: actionButtons.RESTART_COMPUTER,
           flags: settings.ChromeCleanupCardFlags.NONE,
         }
@@ -748,7 +683,6 @@ Polymer({
         settings.ChromeCleanerCardState.CLEANUP_SUCCEEDED, {
           title: this.i18nAdvanced('chromeCleanupTitleRemoved', {tags: ['a']}),
           explanation: null,
-          icon: icons.DONE,
           actionButton: null,
           flags: settings.ChromeCleanupCardFlags.NONE,
         }
@@ -757,7 +691,6 @@ Polymer({
         settings.ChromeCleanerCardState.CLEANING_FAILED, {
           title: this.i18n('chromeCleanupTitleErrorCantRemove'),
           explanation: this.i18n('chromeCleanupExplanationCleanupError'),
-          icon: icons.WARNING,
           actionButton: null,
           flags: settings.ChromeCleanupCardFlags.NONE,
         }
@@ -766,7 +699,6 @@ Polymer({
         settings.ChromeCleanerCardState.SCANNING_OFFERED, {
           title: this.i18n('chromeCleanupTitleFindAndRemove'),
           explanation: this.i18n('chromeCleanupExplanationFindAndRemove'),
-          icon: icons.SYSTEM,
           actionButton: actionButtons.FIND,
           flags: settings.ChromeCleanupCardFlags.SHOW_LOGS_PERMISSIONS,
         }
@@ -775,7 +707,6 @@ Polymer({
         settings.ChromeCleanerCardState.SCANNING, {
           title: this.i18n('chromeCleanupTitleScanning'),
           explanation: null,
-          icon: null,
           actionButton: null,
           flags: settings.ChromeCleanupCardFlags.WAITING_FOR_RESULT,
         }
@@ -785,7 +716,6 @@ Polymer({
         settings.ChromeCleanerCardState.SCANNING_FOUND_NOTHING, {
           title: this.i18n('chromeCleanupTitleNothingFound'),
           explanation: null,
-          icon: icons.DONE,
           actionButton: null,
           flags: settings.ChromeCleanupCardFlags.NONE,
         }
@@ -794,7 +724,6 @@ Polymer({
         settings.ChromeCleanerCardState.SCANNING_FAILED, {
           title: this.i18n('chromeCleanupTitleScanningFailed'),
           explanation: this.i18n('chromeCleanupExplanationScanError'),
-          icon: icons.WARNING,
           actionButton: null,
           flags: settings.ChromeCleanupCardFlags.NONE,
         }
@@ -806,7 +735,6 @@ Polymer({
           // connectivity and cleanups being disabled by the server.
           title: this.i18n('chromeCleanupTitleCleanupUnavailable'),
           explanation: this.i18n('chromeCleanupExplanationCleanupUnavailable'),
-          icon: icons.WARNING,
           actionButton: actionButtons.TRY_SCAN_AGAIN,
           flags: settings.ChromeCleanupCardFlags.NONE,
         },