Leverage web components in chrome://site-engagement.

Using web components aligns this WebUI with the status quo way of
implementing WebUIs, and opens the way for other improvements like
 - Separating js2gtest with Mocha test code.
 - Migrating test code to TypeScript.
 - Migrating test code off of js2gtest and into WebUIMochaBrowserTest.

which will be done in follow-up CLs.

Bug: 1457360
Change-Id: I86f9f35b36f73ee8aa855454c0452d3ff587a86a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4779738
Code-Coverage: findit-for-me@appspot.gserviceaccount.com <findit-for-me@appspot.gserviceaccount.com>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Dominick Ng <dominickn@chromium.org>
Commit-Queue: Dominick Ng <dominickn@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1184483}

chrome/browser/resources/engagement/BUILD.gn

@@ -7,7 +7,8 @@ import("//ui/webui/resources/tools/build_webui.gni")
 build_webui("build") {
   grd_prefix = "engagement"
   static_files = [ "site_engagement.html" ]
-  non_web_component_files = [ "site_engagement.ts" ]
+  web_component_files = [ "app.ts" ]
+  html_to_wrapper_template = "native"
 
   mojo_files_deps =
       [ "//components/site_engagement/core/mojom:mojo_bindings_ts__generator" ]

chrome/browser/resources/engagement/app.html

@@ -0,0 +1,107 @@
+<style>
+  :host {
+    --color-row-hover: rgb(255, 255, 187);
+    --color-engagement-bar: black;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --color-row-hover: rgb(3, 220, 176);
+      --color-engagement-bar: white;
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  table td,
+  table th {
+    border: 1px solid #777;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  table th {
+    background: rgb(224, 236, 255);
+    color: black;
+    cursor: pointer;
+    padding-bottom: 4px;
+    padding-right: 16px;
+    padding-top: 4px;
+    white-space: nowrap;
+  }
+
+  .engagement-bar {
+    background-color: var(--color-engagement-bar);
+    height: 2px;
+  }
+
+  .engagement-bar-cell {
+    border: none;
+  }
+
+  .origin-cell {
+    background-color: rgba(230, 230, 230, 0.5);
+    min-width: 500px;
+  }
+
+  .base-score-cell,
+  .bonus-score-cell,
+  .total-score-cell {
+    background-color: rgba(230, 230, 230, 0.5);
+    text-align: right;
+  }
+
+  .base-score-input {
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    text-align: right;
+    width: 70px;
+  }
+
+  .base-score-input:focus {
+    border: 1px solid rgb(143, 185, 252);
+    box-shadow: 0 0 2px rgb(113, 158, 206);
+    outline: none;
+  }
+
+  .add-origin-button {
+    width: 10em;
+  }
+
+  table tr:hover {
+    background: var(--color-row-hover);
+  }
+
+  th.sort-column::after {
+    content: '▲';
+    position: absolute;
+  }
+
+  th[sort-reverse].sort-column::after {
+    content: '▼';
+    position: absolute;
+  }
+</style>
+<h1>Site Engagement</h1>
+<table>
+  <thead>
+    <tr id="engagement-table-header">
+      <th sort-key="origin">
+        Origin
+      </th>
+      <th sort-key="baseScore" sort-reverse>
+        Base
+      </th>
+      <th sort-key="bonusScore" sort-reverse>
+        Bonus
+      </th>
+      <th sort-key="totalScore" class="sort-column" sort-reverse>
+        Total
+      </th>
+    </tr>
+  </thead>
+  <tbody id="engagement-table-body">
+  </tbody>
+</table>