Cleanup Tool WebUI: Add HTML content and styling with dummy JS

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/i18n_behavior.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);
+      }
+
+      .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);
+      }
+
+      #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-content="sectionHeader"></h3>
+      <div id="card">
+        <div class="card-section">
+          <div id="status-icon-wrapper" class="icon-wrapper">
+            <iron-icon icon="[[getStatusIcon_(hasScanResults, isInfected)]]"
+                class$="icon [[getIconClassName_(hasScanResults, isInfected)]]">
+            </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="[[isRunningScanner]]"></paper-spinner>
+          </div>
+          <div id="tool-action-container">
+            <div class="scan-or-cleanup-action" i18n-content="scanAction"
+                hidden="[[!shouldShowScan_(hasScanResults, isRunningScanner)]]"
+                on-tap="onScanTap_"></div>
+            <div i18n-content="scanning" hidden="[[!isRunningScanner]]"></div>
+            <div class="scan-or-cleanup-action" i18n-content="cleanAction"
+                hidden="[[!hasScanResults]]" on-tap="onCleanupTap_"></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" i18n-content="about"
+          href="https://support.google.com/chrome/answer/6086368"></a>
+        </div>
+      </div>
+    </div>
+
+  </template>
+  <script src="chrome://cleanup-tool/manager.js"></script>
+</dom-module>