[ct] Add Chromium Builds page, fix some style nits in element.

Change-Id: Ic2efc69e955b81fdf03d1d94166257a022b7a729
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/304037
Reviewed-by: Ravi Mistry <rmistry@google.com>
diff --git a/ct/go/ctfe/chromium_builds/chromium_builds.go b/ct/go/ctfe/chromium_builds/chromium_builds.go
index d243e81..d2ca82e 100644
--- a/ct/go/ctfe/chromium_builds/chromium_builds.go
+++ b/ct/go/ctfe/chromium_builds/chromium_builds.go
@@ -57,9 +57,7 @@
 
 func ReloadTemplates(resourcesDir string) {
 	addTaskTemplate = template.Must(template.ParseFiles(
-		filepath.Join(resourcesDir, "templates/chromium_builds.html"),
-		filepath.Join(resourcesDir, "templates/header.html"),
-		filepath.Join(resourcesDir, "templates/titlebar.html"),
+		filepath.Join(resourcesDir, "dist", "chromium_builds.html"),
 	))
 	runsHistoryTemplate = template.Must(template.ParseFiles(
 		filepath.Join(resourcesDir, "templates/chromium_build_runs_history.html"),
diff --git a/ct/modules/chromium-builds-sk/chromium-builds-sk.js b/ct/modules/chromium-builds-sk/chromium-builds-sk.js
index 986be7a..ecc8482 100644
--- a/ct/modules/chromium-builds-sk/chromium-builds-sk.js
+++ b/ct/modules/chromium-builds-sk/chromium-builds-sk.js
@@ -70,8 +70,8 @@
     </td>
   </tr>
   <tr>
-    <td colspan="2" class="center">
-      <div class="triggering-spinner">
+    <td colspan=3 class=center
+      <div class=triggering-spinner>
         <spinner-sk .active=${el._triggeringTask} alt="Trigger task"></spinner-sk>
       </div>
       <button id=submit ?disabled=${el._triggeringTask} @click=${el._validateTask}>Queue Task
@@ -79,7 +79,7 @@
     </td>
   </tr>
   <tr>
-    <td colspan=2 class=center>
+    <td colspan=3 class=center>
       <button id=view_history @click=${el._gotoRunsHistory}>View runs history</button>
     </td>
   </tr>
diff --git a/ct/modules/chromium-builds-sk/chromium-builds-sk.scss b/ct/modules/chromium-builds-sk/chromium-builds-sk.scss
index 1a103eb..d59de9c 100644
--- a/ct/modules/chromium-builds-sk/chromium-builds-sk.scss
+++ b/ct/modules/chromium-builds-sk/chromium-builds-sk.scss
@@ -3,6 +3,7 @@
 chromium-builds-sk {
   background-color: var(--surface);
   color: var(--on-surface);
+
   table.options {
     padding-left: 2em;
     margin: 1em;
@@ -11,8 +12,9 @@
 
   select-sk {
     * {
-    padding: 0;
+      padding: 0;
     }
+
     [selected] {
       background-color: var(--primary-variant);
     }
@@ -37,11 +39,30 @@
   }
 
   td.center {
-    text-align:center;
-    padding-top:2em;
+    text-align: center;
+    padding-top: 2em;
+  }
+
+  .rev-detail-container {
+    position: relative;
+    text-align: center;
+    width: 350px;
+    height: 100px;
+  }
+
+  .loading-rev-spinner {
+    margin: auto;
+    vertical-align: middle
+  }
+
+  .rev-detail {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    text-align: start;
   }
 }
 
 .darkmode chromium-builds-sk table.options {
   background-color: var(--surface-2dp);
-}
+}
\ No newline at end of file
diff --git a/ct/pages/chromium_builds.html b/ct/pages/chromium_builds.html
new file mode 100644
index 0000000..da8108a
--- /dev/null
+++ b/ct/pages/chromium_builds.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Chromium Builds</title>
+  <link rel="shortcut icon" href="/res/img/favicon.ico">
+</head>
+<body>
+  <ct-scaffold-sk app_title="Cluster Telemetry 3.0">
+    <h2>Add a New Chromium Build</h2>
+    <chromium-builds-sk></chromium-builds-sk>
+  </ct-scaffold-sk>
+</body>
+</html>
\ No newline at end of file
diff --git a/ct/pages/chromium_builds.js b/ct/pages/chromium_builds.js
new file mode 100644
index 0000000..e31f9b6
--- /dev/null
+++ b/ct/pages/chromium_builds.js
@@ -0,0 +1,2 @@
+import '../modules/chromium-builds-sk';
+import '../modules/ct-scaffold-sk';