Cleanup Tool WebUI: Add functional HTML and skeleton JS for main content

Also add two icons, including a custom icon.

BUG=690020
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2788743002
Cr-Commit-Position: refs/heads/master@{#463423}

chrome/browser/browser_resources.grd

@@ -16,6 +16,9 @@
       <if expr="is_win">
         <structure name="IDR_CLEANUP_TOOL_BROWSER_PROXY_HTML" file="resources\cleanup_tool\cleanup_browser_proxy.html" type="chrome_html" />
         <structure name="IDR_CLEANUP_TOOL_BROWSER_PROXY_JS" file="resources\cleanup_tool\cleanup_browser_proxy.js" type="chrome_html" />
+        <structure name="IDR_CLEANUP_TOOL_ICONS_HTML" file="resources\cleanup_tool\icons.html" type="chrome_html" />
+        <structure name="IDR_CLEANUP_TOOL_MANAGER_HTML" file="resources\cleanup_tool\manager.html" type="chrome_html" />
+        <structure name="IDR_CLEANUP_TOOL_MANAGER_JS" file="resources\cleanup_tool\manager.js" type="chrome_html" />
         <structure name="IDR_CLEANUP_TOOL_HTML" file="resources\cleanup_tool\cleanup.html" type="chrome_html" />
         <structure name="IDR_CLEANUP_TOOL_TOOLBAR_HTML" file="resources\cleanup_tool\toolbar.html" type="chrome_html" />
         <structure name="IDR_CLEANUP_TOOL_TOOLBAR_JS" file="resources\cleanup_tool\toolbar.js" type="chrome_html" />

chrome/browser/resources/cleanup_tool/cleanup.html

@@ -27,6 +27,8 @@
   <link rel="import" href="chrome://resources/html/load_time_data.html">
   <link rel="import" href="chrome://resources/html/polymer.html">
   <link rel="import" href="chrome://cleanup/cleanup_browser_proxy.html">
+  <link rel="import" href="chrome://cleanup/icons.html">
+  <link rel="import" href="chrome://cleanup/manager.html">
   <link rel="import" href="chrome://cleanup/toolbar.html">
   <script src="strings.js"></script>
 </body>

chrome/browser/resources/cleanup_tool/cleanup_browser_proxy.js

@@ -13,7 +13,7 @@
  *   isInfected: boolean,
  *   detectionStatusText: string,
  *   detectionTimeText: string,
- * }};
+ * }}
  */
 var LastScanResult;
 

chrome/browser/resources/cleanup_tool/compiled_resources2.gyp

@@ -10,6 +10,18 @@
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'manager',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
+        '<(DEPTH)/ui/webui/resources/js/cr/compiled_resources2.gyp:ui',
+        'cleanup_browser_proxy',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
     {
       'target_name': 'toolbar',
       'dependencies': [

chrome/browser/resources/cleanup_tool/icons.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg size="24" name="cleanup">
+  <svg>
+    <defs>
+      <!--
+      This icon is not from Polymer's iron-icons; it was manually edited to put
+      an exclamation mark inside of a shield.
+      -->
+      <g id="infected-user"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm1 12h-2V6h2v6zm0 4h-2v-2h2v2z"></path></g>
+      <!--
+      These icons are copied from Polymer's iron-icons and kept in sorted order.
+      See http://goo.gl/Y1OdAq for instructions on adding additional icons.
+      -->
+      <g id="verified-user"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

chrome/browser/resources/cleanup_tool/manager.html

+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/icon.html">
+<link rel="import" href="chrome://resources/html/polymer.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-styles/shadow.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
+
+<dom-module id="cleanup-manager">
+  <template>
+    <style>
+      #content {
+        margin: 6px auto;
+        max-width: var(--cleanup-card-width);
+      }
+
+      :host {
+        -webkit-margin-start: 3px;
+        display: block;
+      }
+
+      #cleanup-tool-title {
+        margin: 24px auto 10px;
+      }
+
+      .section-title {
+        color: var(--paper-grey-600);
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      #card {
+        @apply(--shadow-elevation-2dp);
+        background: white;
+        border-radius: 2px;
+        font-size: 16px;
+        font-weight: 500;
+      }
+
+      .card-section {
+        align-items: center;
+        border-top: 1px solid var(--paper-grey-400);
+        display: flex;
+        min-height: 103px;
+      }
+
+      .card-section:first-child {
+        border-top: none;
+      }
+
+      .icon-wrapper {
+        margin: 0 24px;
+      }
+
+      .clean-icon {
+        color: var(--paper-blue-700);
+      }
+
+      .infected-icon {
+        color: var(--paper-red-700);
+      }
+
+      #status-icon {
+        height: 32px;
+        width: 32px;
+      }
+
+      .scan-details {
+        flex: 1;
+        min-width: 200px;
+      }
+
+      .under-text {
+        color: var(--paper-grey-500);
+      }
+
+      #spinner-container {
+        min-width: 28px;
+      }
+
+      #tool-action-container {
+        color: var(--paper-grey-700);
+        font-size: 18px;
+        padding: 24px;
+      }
+
+      .scan-or-cleanup-action {
+        @apply(--cr-actionable);
+        text-transform: uppercase;
+      }
+
+      #about-link {
+        color: var(--paper-blue-700);
+        padding: 24px;
+        text-decoration: none;
+      }
+    </style>
+
+    <div id="content">
+      <h3 id="cleanup-tool-title" class="section-title">
+        $i18n{sectionHeader}
+      </h3>
+      <div id="card">
+        <div class="card-section">
+          <div id="status-icon-wrapper" class="icon-wrapper">
+            <iron-icon icon="[[getStatusIcon_(hasScanResults, isInfected)]]"
+                class$="[[getIconClassName_(hasScanResults, isInfected)]]"
+                id="status-icon">
+            </iron-icon>
+          </div>
+          <div class="scan-details">
+            <div id="scan-detections">
+              [[detectionStatusText]]
+            </div>
+            <div class="under-text">
+              [[detectionTimeText]]
+            </div>
+          </div>
+          <div id="spinner-container" hidden="[[!isRunningScanner]]">
+            <paper-spinner active></paper-spinner>
+          </div>
+          <div id="tool-action-container">
+            <div class="scan-or-cleanup-action"
+                hidden="[[!shouldShowScan_(hasScanResults, isRunningScanner)]]"
+                on-tap="onScanTap_">$i18n{scanAction}</div>
+            <div hidden="[[!isRunningScanner]]">$i18n{scanning}</div>
+            <div class="scan-or-cleanup-action" hidden="[[!hasScanResults]]"
+                on-tap="onCleanupTap_">$i18n{cleanAction}</div>
+          </div>
+        </div>
+        <div class="card-section">
+          <!-- TODO(proberge): Replace answer ID with a P-link as per
+               crbug.com/679462 -->
+          <a id="about-link"
+              href="https://support.google.com/chrome/answer/6086368">
+            $i18n{about}
+          </a>
+        </div>
+      </div>
+    </div>
+
+  </template>
+  <script src="chrome://cleanup/manager.js"></script>
+</dom-module>

chrome/browser/resources/cleanup_tool/manager.js

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+Polymer({
+  is: 'cleanup-manager',
+
+  properties: {
+    hasScanResults: {
+      type: Boolean,
+      value: false,
+    },
+
+    isInfected: {
+      type: Boolean,
+      value: false,
+    },
+
+    isRunningScanner: {
+      type: Boolean,
+      value: false,
+    },
+
+    detectionStatusText: {
+      type: String,
+      value: ""
+    },
+
+    detectionTimeText: {
+      type: String,
+      value: ""
+    },
+
+    /** @private {!cleanup.CleanupBrowserProxy} */
+    browserProxy_: Object,
+  },
+
+  /** @override */
+  attached: function() {
+    // Fetch data to have it displayed as soon as possible.
+    this.requestLastScanResult_();
+  },
+
+  /** @override */
+  created: function() {
+    this.browserProxy_ = cleanup.CleanupBrowserProxyImpl.getInstance();
+  },
+
+  /**
+   * Sends a request for Chrome to start the Cleanup Tool's scanning process.
+   * @private
+   */
+  onScanTap_: function() {
+    // TODO implement me.
+  },
+
+  /**
+   * Sends a request for Chrome to open the Cleanup Tool's cleanup prompt.
+   * @private
+   */
+  onCleanupTap_: function() {
+    // TODO implement me.
+  },
+
+  /**
+   * @param {boolean} hasScanResults
+   * @param {boolean} isInfected
+   * @return {string} A class name for icon-specific styling.
+   * @private
+   */
+  getIconClassName_: function(hasScanResults, isInfected) {
+    return hasScanResults && isInfected ? "infected-icon" : "clean-icon";
+  },
+
+  /**
+   * @param {boolean} hasScanResults
+   * @param {boolean} isInfected
+   * @return {string} An icon id. See icons.html.
+   * @private
+   */
+  getStatusIcon_: function(hasScanResults, isInfected) {
+    return hasScanResults && isInfected ?
+        "cleanup:infected-user" :
+        "cleanup:verified-user";
+  },
+
+  /**
+   * @param {boolean} hasScanResults
+   * @param {boolean} isRunningScanner
+   * @return {boolean} True if the "Scan" button should be displayed, false
+   *     otherwise.
+   * @private
+   */
+  shouldShowScan_: function(hasScanResults, isRunningScanner) {
+    return !hasScanResults && !isRunningScanner;
+  },
+
+  /**
+   * Requests the latest Chrome Cleanup Tool scan results from Chrome, then
+   * updates the local state with the new information.
+   * @private
+   */
+  requestLastScanResult_: function() {
+    this.browserProxy_.requestLastScanResult().then(
+        this.updateLastScanState_.bind(this));
+  },
+
+  /**
+   @param {LastScanResult} lastScanResults
+  */
+  updateLastScanState_: function(lastScanResults) {
+    this.hasScanResults = lastScanResults.hasScanResults;
+    this.isInfected = lastScanResults.hasScanResults;
+    this.detectionStatusText = lastScanResults.detectionStatusText;
+    this.detectionTimeText = lastScanResults.detectionTimeText;
+  }
+});

chrome/browser/ui/webui/cleanup_tool/cleanup_tool_ui.cc

@@ -29,6 +29,9 @@ CleanupToolUI::CleanupToolUI(content::WebUI* web_ui)
                                IDR_CLEANUP_TOOL_BROWSER_PROXY_HTML);
   html_source->AddResourcePath("cleanup_browser_proxy.js",
                                IDR_CLEANUP_TOOL_BROWSER_PROXY_JS);
+  html_source->AddResourcePath("icons.html", IDR_CLEANUP_TOOL_ICONS_HTML);
+  html_source->AddResourcePath("manager.html", IDR_CLEANUP_TOOL_MANAGER_HTML);
+  html_source->AddResourcePath("manager.js", IDR_CLEANUP_TOOL_MANAGER_JS);
   html_source->AddResourcePath("toolbar.html", IDR_CLEANUP_TOOL_TOOLBAR_HTML);
   html_source->AddResourcePath("toolbar.js", IDR_CLEANUP_TOOL_TOOLBAR_JS);
   html_source->SetDefaultResource(IDR_CLEANUP_TOOL_HTML);