Port chrome://components to use JS modules.

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

chrome/browser/resources/components/BUILD.gn

@@ -5,6 +5,7 @@
 import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
+  uses_js_modules = true
   deps = [
     ":components",
   ]
@@ -13,8 +14,8 @@ js_type_check("closure_compile") {
 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",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js:util.m",
   ]
 }

chrome/browser/resources/components/components.html

@@ -66,12 +66,8 @@
     </div>
   </div>
 </div>
-<script src="chrome://resources/js/util.js"></script>
-<script src="chrome://resources/js/promise_resolver.js"></script>
-<script src="chrome://resources/js/cr.js"></script>
-<script src="chrome://components/components.js"></script>
-<script src="chrome://resources/js/load_time_data.js"></script>
+
+<script type="module" src="components.js"></script>
 <script src="chrome://resources/js/jstemplate_compiled.js"></script>
-<script src="chrome://components/strings.js"></script>
 </body>
 </html>

chrome/browser/resources/components/components.js

@@ -2,7 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
+import './strings.m.js';
+
+import {addWebUIListener, isChromeOS, sendWithPromise} from 'chrome://resources/js/cr.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {$} from 'chrome://resources/js/util.m.js';
 
 /**
  * An array of the latest component data including ID, name, status and
@@ -33,7 +37,7 @@ function renderTemplate(componentsData) {
  * components.
  */
 function requestComponentsData() {
-  cr.sendWithPromise('requestComponentsData').then(returnComponentsData);
+  sendWithPromise('requestComponentsData').then(returnComponentsData);
 }
 
 /**
@@ -81,7 +85,7 @@ function returnComponentsData(componentsData) {
   }
 
   // Disable some controls for Guest mode in ChromeOS.
-  if (cr.isChromeOS && loadTimeData.getBoolean('isGuest')) {
+  if (isChromeOS && loadTimeData.getBoolean('isGuest')) {
     document.querySelectorAll('[guest-disabled]').forEach(function(element) {
       element.disabled = true;
     });
@@ -134,6 +138,6 @@ function handleCheckUpdate(node) {
 
 // Get data and have it displayed upon loading.
 document.addEventListener('DOMContentLoaded', function() {
-  cr.addWebUIListener('component-event', onComponentEvent);
+  addWebUIListener('component-event', onComponentEvent);
   requestComponentsData();
 });