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..bc0b39c00d5f23e4e5bec0356a938cac85ffe416
--- /dev/null
+++ b/chrome/browser/resources/cleanup_tool/manager.html
@@ -0,0 +1,141 @@
+<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)]]">

[tommycli, 2017/03/30 20:18:00]

Can we just give this icon an id instead of a class called 'icon'?

[proberge, 2017/03/30 21:04:33]

I previously gave this icon a class "icon" and an id (clean-icon or
infected-icon). The method to get the id was named getIconId_, which was unclear
when seen in the Javascript file (not obvious that it means CSS id).
getIconClassName_, on the other hand, is quite descriptive.

Is $= frowned upon?

(or do you mean that I should replicate the height:32px, width:32px rules in
.clean-icon and .infected-icon?)

[tommycli, 2017/04/05 20:47:25]

I think the getIconClassName_ is just fine. I'm just suggesting giving this an
id, because you have a css rule for .icon, which only applies to that single
element...

[proberge, 2017/04/05 21:34:06]

Done.

+            </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>

[tommycli, 2017/03/30 20:18:00]

If it's hidden, can this paper-spinner always be active? (No need to hide parent
and also change if this one is active)

[proberge, 2017/03/30 21:04:33]

Done.

+          </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/manager.js"></script>
+</dom-module>