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

chrome/browser/resources/cleanup_tool/manager.html

Index: chrome/browser/resources/cleanup_tool/manager.html
diff --git a/chrome/browser/resources/cleanup_tool/manager.html b/chrome/browser/resources/cleanup_tool/manager.html
new file mode 100644
index 0000000000000000000000000000000000000000..a1c8c4d4a7bc089a4a9aa282026b46a7242d6ccd
--- /dev/null
+++ b/chrome/browser/resources/cleanup_tool/manager.html
@@ -0,0 +1,145 @@
+<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>