Add JS type-checking for chrome://components.

Also fixing CSS related PRESUBMIT errors:
1) removing usage of -webkit-box, which seems to have no effect
2) converting padding/margin CSS properties to use logical start/end
   instead of left/right

This is in preparation of migrating this page to JS modules.

Bug: 1028829
Change-Id: I33019772455cc870e49ebadf11b4c98650eeeb8a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1941270
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#720627}

chrome/browser/browser_resources.grd

@@ -197,8 +197,8 @@
       <include name="IDR_LOCAL_STATE_JS" file="resources\local_state\local_state.js" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
       <include name="IDR_DESKTOP_HATS_HTML" file="resources\hats\hats.html" type="BINDATA" />
       <include name="IDR_ORIGIN_MOJO_JS" file="${root_gen_dir}\url\mojom\origin.mojom-lite.js" use_base_dir="false" type="BINDATA" compress="gzip"/>
-      <include name="IDR_COMPONENTS_HTML" file="resources\components.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
-      <include name="IDR_COMPONENTS_JS" file="resources\components.js" type="BINDATA" compress="gzip" />
+      <include name="IDR_COMPONENTS_COMPONENTS_HTML" file="resources\components\components.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
+      <include name="IDR_COMPONENTS_COMPONENTS_JS" file="resources\components\components.js" type="BINDATA" compress="gzip" />
       <include name="IDR_MEMORY_INTERNALS_HTML" file="resources\memory_internals\memory_internals.html" flattenhtml="true" type="BINDATA" compress="gzip" />
       <include name="IDR_MEMORY_INTERNALS_JS" file="resources\memory_internals\memory_internals.js" type="BINDATA" compress="gzip" />
       <if expr="enable_plugins">

chrome/browser/resources/BUILD.gn

@@ -12,6 +12,7 @@ assert(!is_ios, "Chromium/iOS shouldn't use anything in //chrome")
 if (closure_compile) {
   group("closure_compile") {
     deps = [
+      "components:closure_compile",
       "engagement:closure_compile",
       "interventions_internals:closure_compile",
       "reset_password:closure_compile",

chrome/browser/resources/components/BUILD.gn

+# Copyright 2019 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [
+    ":components",
+  ]
+}
+
+js_library("components") {
+  deps = [
+    "//third_party/jstemplate:jstemplate",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:load_time_data",
+    "//ui/webui/resources/js:util",
+  ]
+}

chrome/browser/resources/components.css → chrome/browser/resources/components/components.css

@@ -13,7 +13,7 @@ a {
 }
 
 #header {
-  background: url(../../../ui/webui/resources/images/extension.svg)
+  background: url(../../../../ui/webui/resources/images/extension.svg)
       left center / 48px no-repeat;
   box-sizing: border-box;
   margin-bottom: 1.05em;
@@ -79,17 +79,6 @@ h1 {
   font-weight: bold;
 }
 
-.vbox-container {
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-}
-
-.wbox {
-  -webkit-box-align: stretch;
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-}
-
 #top {
   padding-inline-end: 5px;
 }
@@ -118,19 +107,14 @@ body.show-tmi-mode .show-in-tmi-mode {
   transition: all 100ms ease-in;
 }
 
-.wbox-tmi-mode {
-  -webkit-box-align: stretch;
-  -webkit-box-flex: 1;
-}
-
 .tmi-mode-image {
   margin-top: 2px;
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-inline-end: 5px;
+  padding-inline-start: 5px;
 }
 
 .tmi-mode-link {
-  margin-right: 3px;
+  margin-inline-end: 3px;
   white-space: nowrap;
 }
 

chrome/browser/resources/components.html → chrome/browser/resources/components/components.html

@@ -13,8 +13,8 @@
   <div id="component-placeholder"></div>
   <div id="component-template" hidden>
 
-    <div id="container" class="vbox-container">
-    <div id="top" class="wbox">
+    <div id="container">
+    <div id="top">
 
       <div class="section-header">
         <span class="section-header-title">$i18n{componentsTitle}</span>

chrome/browser/resources/components.js → chrome/browser/resources/components/components.js

@@ -41,9 +41,11 @@ function requestComponentsData() {
  * Called by the WebUI to re-populate the page with data representing the
  * current state of installed components. The componentsData will also be
  * stored in currentComponentsData to be available to JS for testing purposes.
- * @param {Object} componentsData Detailed info about installed components. The
- *     template expects each component's format to match the following
- *     structure to correctly populate the page:
+ * @param {{
+ *   components: !Array<!{name: string, version: string}>
+ * }} componentsData Detailed info about installed components. The template
+ * expects each component's format to match the following structure to correctly
+ *     populate the page:
  *   {
  *     components: [
  *       {

chrome/browser/ui/webui/components_ui.cc

@@ -68,8 +68,8 @@ content::WebUIDataSource* CreateComponentsUIHTMLSource(Profile* profile) {
 #endif
   );
   source->UseStringsJs();
-  source->AddResourcePath("components.js", IDR_COMPONENTS_JS);
-  source->SetDefaultResource(IDR_COMPONENTS_HTML);
+  source->AddResourcePath("components.js", IDR_COMPONENTS_COMPONENTS_JS);
+  source->SetDefaultResource(IDR_COMPONENTS_COMPONENTS_HTML);
   return source;
 }