syncfs-intenals: Add JS type checking.

This is in preparation of migrating to JS modules.

Bug: 1154192
Change-Id: I9e1494d2c6880b1ea525db4548035501ca2c9e1c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2566032
Commit-Queue: John Lee <johntlee@chromium.org>
Auto-Submit: dpapad <dpapad@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833033}

chrome/browser/resources/BUILD.gn

@@ -53,6 +53,7 @@ if (enable_js_type_check) {
         "settings:closure_compile",
         "settings:closure_compile_module",
         "signin:closure_compile",
+        "sync_file_system_internals:closure_compile",
         "tab_search:closure_compile",
         "usb_internals:closure_compile",
         "user_manager:closure_compile",

chrome/browser/resources/sync_file_system_internals/BUILD.gn

+# Copyright 2020 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 = [
+    ":dump_database",
+    ":extension_statuses",
+    ":file_metadata",
+    ":sync_service",
+    ":task_log",
+    ":utils",
+  ]
+}
+
+js_library("dump_database") {
+  deps = [
+    ":utils",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:util",
+  ]
+}
+
+js_library("extension_statuses") {
+  deps = [
+    ":utils",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:util",
+  ]
+}
+
+js_library("file_metadata") {
+  deps = [
+    ":utils",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:icon",
+    "//ui/webui/resources/js:util",
+  ]
+}
+
+js_library("sync_service") {
+  deps = [
+    ":utils",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:util",
+    "//ui/webui/resources/js/cr:ui",
+    "//ui/webui/resources/js/cr/ui:tabs",
+  ]
+}
+
+js_library("task_log") {
+  deps = [
+    ":utils",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:util",
+  ]
+}
+
+js_library("utils") {
+}

chrome/browser/resources/sync_file_system_internals/dump_database.js

@@ -17,24 +17,13 @@ const DumpDatabase = (function() {
     cr.sendWithPromise('getDatabaseDump').then(DumpDatabase.onGetDatabaseDump);
   }
 
-  /**
-   * Creates an element named |elementName| containing the content |text|.
-   * @param {string} elementName Name of the new element to be created.
-   * @param {string} text Text to be contained in the new element.
-   * @return {HTMLElement} The newly created HTML element.
-   */
-  function createElementFromText(elementName, text) {
-    const element = document.createElement(elementName);
-    element.appendChild(document.createTextNode(text));
-    return element;
-  }
-
   /**
    * Creates a table by filling |header| and |body|.
-   * @param {HTMLElement} div The outer container of the table to be renderered.
-   * @param {HTMLElement} header The table header element to be fillied by
+   * @param {!HTMLElement} div The outer container of the table to be
+   *     renderered.
+   * @param {!HTMLElement} header The table header element to be fillied by
    *     this function.
-   * @param {HTMLElement} body The table body element to be filled by this
+   * @param {!HTMLElement} body The table body element to be filled by this
    *     function.
    * @param {Array} databaseDump List of dictionaries for the database dump.
    *     The first element must have metadata of the entry.
@@ -70,10 +59,12 @@ const DumpDatabase = (function() {
     const placeholder = $('dump-database-placeholder');
     placeholder.innerHTML = trustedTypes.emptyHTML;
     for (let i = 0; i < databaseDump.length; ++i) {
-      const div = document.createElement('div');
+      const div = /** @type {!HTMLElement} */ (document.createElement('div'));
       const table = document.createElement('table');
-      const header = document.createElement('thead');
-      const body = document.createElement('tbody');
+      const header =
+          /** @type {!HTMLElement} */ (document.createElement('thead'));
+      const body =
+          /** @type {!HTMLElement} */ (document.createElement('tbody'));
       createDatabaseDumpTable(div, header, body, databaseDump[i]);
       table.appendChild(header);
       table.appendChild(body);

chrome/browser/resources/sync_file_system_internals/extension_statuses.js

@@ -19,23 +19,13 @@ const ExtensionStatuses = (function() {
         .then(ExtensionStatuses.onGetExtensionStatuses);
   }
 
-  // TODO(calvinlo): Move to helper file so it doesn't need to be duplicated.
-  /**
-   * Creates an element named |elementName| containing the content |text|.
-   * @param {string} elementName Name of the new element to be created.
-   * @param {string} text Text to be contained in the new element.
-   * @return {HTMLElement} The newly created HTML element.
-   */
-  function createElementFromText(elementName, text) {
-    const element = document.createElement(elementName);
-    element.appendChild(document.createTextNode(text));
-    return element;
-  }
-
   /**
    * Handles callback from onGetExtensionStatuses.
-   * @param {Array} list of dictionaries containing 'extensionName',
-   *     'extensionID, 'status'.
+   * @param {!Array<!{
+   *   extensionName: string,
+   *   extensionID: string,
+   *   status: string,
+   * }>} extensionStatuses
    */
   ExtensionStatuses.onGetExtensionStatuses = function(extensionStatuses) {
     const itemContainer = $('extension-entries');

chrome/browser/resources/sync_file_system_internals/file_metadata.js

@@ -19,7 +19,11 @@ const FileMetadata = (function() {
 
   /**
    * Renders result of getFileMetadata as a table.
-   * @param {Array} list of dictionaries containing 'extensionName',
+   * @param {!Array<!{
+   *   extensionName: string,
+   *   extensionID: string,
+   *   status: string,
+   * }>} extensionStatuses of dictionaries containing 'extensionName',
    *     'extensionID', 'status'.
    */
   FileMetadata.onGetExtensions = function(extensionStatuses) {
@@ -48,7 +52,7 @@ const FileMetadata = (function() {
   };
 
   /**
-   * @return {string} extension ID that's currently selected in drop down box.
+   * @return {?string} extension ID that's currently selected in drop down box.
    */
   function getSelectedExtensionId() {
     const dropDown = $('extensions-select').options;
@@ -106,8 +110,8 @@ const FileMetadata = (function() {
   };
 
   /**
-   * @param {string} file type string.
-   * @return {HTMLElement} TD with file or folder icon depending on type.
+   * @param {string} type file type string.
+   * @return {!HTMLElement} TD with file or folder icon depending on type.
    */
   function createFileIconCell(type) {
     const img = document.createElement('div');
@@ -123,7 +127,7 @@ const FileMetadata = (function() {
     const imgWrapper = document.createElement('div');
     imgWrapper.appendChild(img);
 
-    const td = document.createElement('td');
+    const td = /** @type {!HTMLElement} */ (document.createElement('td'));
     td.className = 'file-icon-cell';
     td.appendChild(imgWrapper);
     td.appendChild(document.createTextNode(type));

chrome/browser/resources/sync_file_system_internals/sync_service.js

@@ -19,7 +19,7 @@ const SyncService = (function() {
 
   /**
    * Called when service status is initially retrieved or updated via events.
-   * @param {string} Service status enum as a string.
+   * @param {string} statusString Service status enum as a string.
    */
   SyncService.onGetServiceStatus = function(statusString) {
     $('service-status').textContent = statusString;
@@ -35,7 +35,7 @@ const SyncService = (function() {
 
   /**
    * Handles callback from getNotificationSource.
-   * @param {string} Notification source as a string.
+   * @param {string} sourceString Notification source as a string.
    */
   SyncService.onGetNotificationSource = function(sourceString) {
     $('notification-source').textContent = sourceString;
@@ -61,7 +61,11 @@ const SyncService = (function() {
 
   /**
    * Handles callback from getUpdateLog.
-   * @param {Array} list List of dictionaries containing 'id', 'time', 'logEvent'.
+   * @param {!Array<!{
+   *   id: number,
+   *   logEvent: string,
+   *   time: string,
+   * }>} logEntries List of dictionaries containing 'id', 'time', 'logEvent'.
    */
   SyncService.onGetLog = function(logEntries) {
     const itemContainer = $('log-entries');

chrome/browser/resources/sync_file_system_internals/task_log.js

@@ -14,8 +14,12 @@ const TaskLog = (function() {
 
   /**
    * Handles per-task log event.
-   * @param {Object} taskLog a dictionary containing 'duration',
-   * 'task_description', 'result_description' and 'details'.
+   * @param {!{
+   *   duration: number,
+   *   task_description: string,
+   *   result_description: string,
+   *   details: !Array,
+   * }} taskLog
    */
   TaskLog.onTaskLogRecorded = function(taskLog) {
     const details = document.createElement('td');
@@ -37,7 +41,7 @@ const TaskLog = (function() {
 
     const tr = document.createElement('tr');
     tr.appendChild(createElementFromText(
-        'td', taskLog.duration, {'class': 'task-log-duration'}));
+        'td', taskLog.duration.toString(), {'class': 'task-log-duration'}));
     tr.appendChild(createElementFromText(
         'td', taskLog.task_description, {'class': 'task-log-description'}));
     tr.appendChild(createElementFromText(

chrome/browser/resources/sync_file_system_internals/utils.js

@@ -6,11 +6,13 @@
  * Creates an element named |elementName| containing the content |text|.
  * @param {string} elementName Name of the new element to be created.
  * @param {string} text Text to be contained in the new element.
- * @param {Object} opt_attributes Optional attribute dictionary for the element.
- * @return {HTMLElement} The newly created HTML element.
+ * @param {Object=} opt_attributes Optional attribute dictionary for the
+ *     element.
+ * @return {!HTMLElement} The newly created HTML element.
  */
 function createElementFromText(elementName, text, opt_attributes) {
-  const element = document.createElement(elementName);
+  const element =
+      /** @type {!HTMLElement} */ (document.createElement(elementName));
   element.appendChild(document.createTextNode(text));
   if (opt_attributes) {
     for (const key in opt_attributes) {
@@ -25,10 +27,11 @@ function createElementFromText(elementName, text, opt_attributes) {
  * @param {string} elementName Name of the new element to be created.
  * @param {Object<string>} dict Dictionary to be contained in the new
  * element.
- * @return {HTMLElement} The newly created HTML element.
+ * @return {!HTMLElement} The newly created HTML element.
  */
 function createElementFromDictionary(elementName, dict) {
-  const element = document.createElement(elementName);
+  const element =
+      /** @type {!HTMLElement} */ (document.createElement(elementName));
   for (const key in dict) {
     element.appendChild(document.createTextNode(key + ': ' + dict[key]));
     element.appendChild(document.createElement('br'));