Convert ui/ARIAUtils.js to an ES module

ES modules allow files to explicitly import and export symbols [1].
This patch migrates ARIAUtils.js to an ES module, while maintaining
backwards compatibility with existing usages of `window.UI.ARIAUtils`.

The build system is updated to copy these modules verbatim, as it no
longer require pre-processing to be loaded. The `module.json` no longer
includes this file as a script, to make sure it is not double-bundled
into `shell.js`. Instead, it is added to the new field `modules`, which
contains all modules. By doing so, it becomes clear which files are
converted to modules already and which require the legacy references
to the global scope.

This module and future modules will be imported from `root.js`, which is
added to all existing HTML application files.

Design Doc: https://docs.google.com/document/d/1h9dOy3nNPNfZ2AtZXzB-DwJqG4Oo37WWvKLCuzCcPzo/edit?usp=sharing

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

TBR=jochen@chromium.org

Change-Id: Ie79c8f2fce3aff96fa28af0b575eae39bfe8e1a5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1748949Reviewed-by: Jochen Eisinger <jochen@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@google.com>
Cr-Commit-Position: refs/heads/master@{#697238}

chrome/browser/ui/webui/devtools_ui_data_source.cc

@@ -57,6 +57,9 @@ std::string GetMimeTypeForPath(const std::string& path) {
   } else if (base::EndsWith(filename, ".js",
                             base::CompareCase::INSENSITIVE_ASCII)) {
     return "application/javascript";
+  } else if (base::EndsWith(filename, ".mjs",
+                            base::CompareCase::INSENSITIVE_ASCII)) {
+    return "application/javascript";
   } else if (base::EndsWith(filename, ".png",
                             base::CompareCase::INSENSITIVE_ASCII)) {
     return "image/png";

third_party/blink/renderer/devtools/.eslintrc.js

@@ -7,7 +7,8 @@ module.exports = {
     },
 
     "parserOptions": {
-        "ecmaVersion": 9
+        "ecmaVersion": 9,
+        "sourceType": "module"
     },
 
     /**

third_party/blink/renderer/devtools/BUILD.gn

@@ -786,7 +786,6 @@ all_devtools_files = [
   "front_end/toolbox.js",
   "front_end/toolbox.json",
   "front_end/ui/ActionRegistry.js",
-  "front_end/ui/ARIAUtils.js",
   "front_end/ui/checkboxTextLabel.css",
   "front_end/ui/closeButton.css",
   "front_end/ui/confirmDialog.css",
@@ -958,6 +957,12 @@ lighthouse_locale_files = [
 
 all_devtools_files += lighthouse_locale_files
 
+all_devtools_modules = [
+  "front_end/root.js",
+  "front_end/ui/ARIAUtils.js",
+  "front_end/ui/UI.js",
+]
+
 devtools_test_files = [
   "//third_party/axe-core/axe.js",
   "front_end/accessibility_test_runner/AccessibilityPaneTestRunner.js",
@@ -1149,6 +1154,12 @@ application_templates = [
   "front_end/worker_app.html",
 ]
 
+copied_devtools_modules = [
+  "$resources_out_dir/root.js",
+  "$resources_out_dir/ui/ARIAUtils.js",
+  "$resources_out_dir/ui/UI.js",
+]
+
 generated_applications = [
   "$resources_out_dir/audits_worker.js",
   "$resources_out_dir/devtools_app.html",
@@ -1267,7 +1278,7 @@ devtools_applications = [
 visibility = [ "//third_party/blink/*" ]
 
 group("devtools_all_files") {
-  data = all_devtools_files
+  data = all_devtools_files + all_devtools_modules
   deps = [
     ":devtools_frontend_resources_data",
   ]
@@ -1284,6 +1295,7 @@ devtools_frontend_resources_deps = [
   ":devtools_extension_api",
   ":frontend_protocol_sources",
   ":supported_css_properties",
+  ":copy_devtools_modules",
 ]
 
 if (debug_devtools) {
@@ -1348,8 +1360,8 @@ action("generate_devtools_grd") {
   ]
 
   grd_files =
-      generated_applications + generated_non_autostart_non_remote_modules +
-      devtools_embedder_scripts +
+      all_devtools_modules + generated_applications +
+      generated_non_autostart_non_remote_modules + devtools_embedder_scripts +
       [ "$resources_out_dir/devtools_extension_api.js" ]
 
   # Bundle remote modules in ChromeOS.
@@ -1468,6 +1480,24 @@ action("build_release_devtools") {
          ]
 }
 
+action("copy_devtools_modules") {
+  script = "scripts/build/copy_devtools_modules.py"
+
+  deps = [
+    ":build_release_devtools",
+  ]
+
+  inputs = all_devtools_modules
+  outputs = copied_devtools_modules
+
+  args = all_devtools_modules + [
+           "--input_path",
+           rebase_path(".", root_build_dir),
+           "--output_path",
+           rebase_path(resources_out_dir, root_build_dir),
+         ]
+}
+
 if (debug_devtools) {
   resources_out_debug_dir = "$root_out_dir/resources/inspector/debug"
 

third_party/blink/renderer/devtools/PRESUBMIT.py

@@ -78,8 +78,8 @@ def _CheckFormat(input_api, output_api):
     # Use eslint to autofix the braces.
     # Also fix semicolon to avoid confusing clang-format.
     eslint_process = popen([
-        local_node.node_path(), local_node.eslint_path(),
-        '--no-eslintrc', '--fix', '--env=es6', '--parser-options=ecmaVersion:9',
+        local_node.node_path(),
+        local_node.eslint_path(), '--no-eslintrc', '--fix', '--env=es6', '--parser-options=ecmaVersion:9,sourceType:module',
         '--rule={"curly": [2, "multi-or-nest", "consistent"], "semi": 2}'
     ] + affected_files)
     eslint_process.communicate()

third_party/blink/renderer/devtools/front_end/devtools_app.html

@@ -9,8 +9,9 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com">
     <meta name="referrer" content="no-referrer">
-    <script src="Runtime.js"></script>
-    <script src="devtools_app.js"></script>
+    <script type="module" src="root.js"></script>
+    <script defer src="Runtime.js"></script>
+    <script defer src="devtools_app.js"></script>
 </head>
 <body class="undocked" id="-blink-dev-tools"></body>
 </html>

third_party/blink/renderer/devtools/front_end/inspector.html

@@ -9,8 +9,9 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com">
     <meta name="referrer" content="no-referrer">
-    <script src="Runtime.js"></script>
-    <script src="inspector.js"></script>
+    <script type="module" src="root.js"></script>
+    <script defer src="Runtime.js"></script>
+    <script defer src="inspector.js"></script>
 </head>
 <body class="undocked" id="-blink-dev-tools"></body>
 </html>

third_party/blink/renderer/devtools/front_end/integration_test_runner.html

@@ -8,8 +8,9 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com">
-    <script src="Runtime.js"></script>
-    <script src="integration_test_runner.js"></script>
+    <script type="module" src="root.js"></script>
+    <script defer src="Runtime.js"></script>
+    <script defer src="integration_test_runner.js"></script>
 </head>
 <body id="-blink-dev-tools"></body>
 </html>

third_party/blink/renderer/devtools/front_end/js_app.html

@@ -9,8 +9,9 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com">
     <meta name="referrer" content="no-referrer">
-    <script src="Runtime.js"></script>
-    <script src="js_app.js"></script>
+    <script type="module" src="root.js"></script>
+    <script defer src="Runtime.js"></script>
+    <script defer src="js_app.js"></script>
 </head>
 <body class="undocked" id="-blink-dev-tools"></body>
 </html>

third_party/blink/renderer/devtools/front_end/ndb_app.html

@@ -9,8 +9,9 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com">
     <meta name="referrer" content="no-referrer">
-    <script src="Runtime.js"></script>
-    <script src="ndb_app.js"></script>
+    <script type="module" src="root.js"></script>
+    <script defer src="Runtime.js"></script>
+    <script defer src="ndb_app.js"></script>
 </head>
 <body class="undocked" id="-blink-dev-tools"></body>
 </html>

third_party/blink/renderer/devtools/front_end/node_app.html

@@ -9,8 +9,9 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com">
     <meta name="referrer" content="no-referrer">
-    <script src="Runtime.js"></script>
-    <script src="node_app.js"></script>
+    <script type="module" src="root.js"></script>
+    <script defer src="Runtime.js"></script>
+    <script defer src="node_app.js"></script>
 </head>
 <body class="undocked" id="-blink-dev-tools"></body>
 </html>

third_party/blink/renderer/devtools/front_end/root.js

+// 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 './ui/UI.js';
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/toolbox.html

@@ -8,8 +8,9 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' ">
-    <script src="Runtime.js"></script>
-    <script src="toolbox.js"></script>
+    <script type="module" src="root.js"></script>
+    <script defer src="Runtime.js"></script>
+    <script defer src="toolbox.js"></script>
 </head>
 <body class="undocked" id="-blink-dev-tools"></body>
 </html>

third_party/blink/renderer/devtools/front_end/ui/UI.js

+import * as ARIAUtils from './ARIAUtils.js';
+
+export {
+  ARIAUtils,
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/ui/module.json

@@ -54,13 +54,16 @@
         "SuggestBox.js",
         "TabbedPane.js",
         "UIUtils.js",
-        "ARIAUtils.js",
         "ZoomManager.js",
         "ShortcutsScreen.js",
         "Geometry.js",
         "XLink.js",
         "XWidget.js"
     ],
+    "modules": [
+        "ARIAUtils.js",
+        "UI.js"
+    ],
     "resources": [
         "checkboxTextLabel.css",
         "closeButton.css",

third_party/blink/renderer/devtools/front_end/worker_app.html

@@ -9,8 +9,9 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://chrome-devtools-frontend.appspot.com">
     <meta name="referrer" content="no-referrer">
-    <script src="Runtime.js"></script>
-    <script src="worker_app.js"></script>
+    <script type="module" src="root.js"></script>
+    <script defer src="Runtime.js"></script>
+    <script defer src="worker_app.js"></script>
 </head>
 <body class="undocked" id="-blink-dev-tools"></body>
 </html>

third_party/blink/renderer/devtools/package.json

@@ -35,6 +35,10 @@
   "bugs": {
     "url": "https://bugs.chromium.org/p/chromium/issues/list?can=2&q=component:Platform%3EDevTools%20&sort=-opened&colspec=ID%20Stars%20Owner%20Summary%20Modified%20Opened"
   },
+  "type": "module",
+  "files": [
+    "front_end/**/*.mjs"
+  ],
   "homepage": "https://devtools.chrome.com",
   "devDependencies": {
     "ajv": "^5.1.5"

third_party/blink/renderer/devtools/scripts/build/build_release_applications.py

@@ -133,13 +133,13 @@ class ReleaseBuilder(object):
         output = StringIO()
         with open(join(self.application_dir, html_name), 'r') as app_input_html:
             for line in app_input_html:
-                if '<script ' in line or '<link ' in line:
+                if ('<script ' in line and 'type="module"' not in line) or '<link ' in line:
                     continue
                 if '</head>' in line:
                     self._write_include_tags(self.descriptors, output)
                     js_file = join(self.application_dir, self.app_file('js'))
                     if path.exists(js_file):
-                        output.write('    <script>%s</script>\n' % minify_js(read_file(js_file)))
+                        output.write('    <script type="module">%s</script>\n' % minify_js(read_file(js_file)))
                 output.write(line)
 
         write_file(join(self.output_dir, html_name), output.getvalue())
@@ -154,7 +154,7 @@ class ReleaseBuilder(object):
 
     def _generate_include_tag(self, resource_path):
         if resource_path.endswith('.js'):
-            return '    <script type="text/javascript" src="%s"></script>\n' % resource_path
+            return '    <script defer src="%s"></script>\n' % resource_path
         else:
             assert resource_path
 

third_party/blink/renderer/devtools/scripts/build/copy_devtools_modules.py

+#!/usr/bin/env python
+# -*- coding: UTF-8 -*-
+#
+# 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.
+"""
+Copies the modules into the resources folder
+"""
+
+from os.path import join, relpath
+import shutil
+import sys
+
+
+def main(argv):
+    try:
+        input_path_flag_index = argv.index('--input_path')
+        input_path = argv[input_path_flag_index + 1]
+        output_path_flag_index = argv.index('--output_path')
+        output_path = argv[output_path_flag_index + 1]
+        devtools_modules = argv[1:input_path_flag_index]
+    except:
+        print 'Usage: %s module_1 module_2 ... module_N --input_path <input_path> --output_path <output_path>' % argv[0]
+        raise
+
+    for file_name in devtools_modules:
+        shutil.copy(join(input_path, file_name), join(output_path, relpath(file_name, 'front_end')))
+
+
+if __name__ == '__main__':
+    sys.exit(main(sys.argv))

third_party/blink/renderer/devtools/scripts/build/modular_build.py

@@ -76,7 +76,7 @@ class Descriptors:
         for name in self.sorted_modules():
             module = self.modules[name]
             skipped_files = set(module.get('skip_compilation', []))
-            for script in module.get('scripts', []):
+            for script in module.get('scripts', []) + module.get('modules', []):
                 if script not in skipped_files:
                     files[path.normpath(path.join(self.application_dir, name, script))] = True
         return files.keys()

third_party/blink/renderer/devtools/scripts/check_localizability.js

@@ -284,7 +284,7 @@ async function auditFileForLocalizability(filePath, errors) {
   if (path.extname(filePath) === '.grdp')
     return auditGrdpFile(filePath, fileContent, errors);
 
-  const ast = esprima.parse(fileContent, {loc: true});
+  const ast = esprima.parseModule(fileContent, {loc: true});
 
   const relativeFilePath = localizationUtils.getRelativeFilePathFromSrc(filePath);
   for (const node of ast.body)

third_party/blink/renderer/devtools/scripts/check_localizable_resources.js

@@ -32,6 +32,7 @@ async function main() {
     else
       await getErrors();
   } catch (e) {
+    console.log(e.stack);
     console.log(`Error: ${e.message}`);
     process.exit(1);
   }

third_party/blink/renderer/devtools/scripts/compile_frontend.py

@@ -77,6 +77,7 @@ DEVTOOLS_FRONTEND_PATH = path.join(DEVTOOLS_PATH, 'front_end')
 GLOBAL_EXTERNS_FILE = to_platform_path(path.join(DEVTOOLS_FRONTEND_PATH, 'externs.js'))
 DEFAULT_PROTOCOL_EXTERNS_FILE = path.join(DEVTOOLS_FRONTEND_PATH, 'protocol_externs.js')
 RUNTIME_FILE = to_platform_path(path.join(DEVTOOLS_FRONTEND_PATH, 'Runtime.js'))
+ROOT_MODULE_FILE = to_platform_path(path.join(DEVTOOLS_FRONTEND_PATH, 'root.js'))
 
 CLOSURE_COMPILER_JAR = to_platform_path(path.join(SCRIPTS_PATH, 'closure', 'compiler.jar'))
 CLOSURE_RUNNER_JAR = to_platform_path(path.join(SCRIPTS_PATH, 'closure', 'closure_runner', 'closure_runner.jar'))
@@ -279,6 +280,8 @@ def prepare_closure_frontend_compile(temp_devtools_path, descriptors, namespace_
         namespace_externs_path,
         '--js',
         RUNTIME_FILE,
+        '--js',
+        ROOT_MODULE_FILE,
     ]
 
     all_files = descriptors.all_compiled_files()

third_party/blink/renderer/devtools/scripts/localization_utils/check_localized_strings.js

@@ -93,7 +93,7 @@ async function parseLocalizableStringsFromFile(filePath) {
   if (path.basename(filePath) === 'module.json')
     return parseLocalizableStringFromModuleJson(fileContent, filePath);
 
-  const ast = esprima.parse(fileContent, {loc: true});
+  const ast = esprima.parseModule(fileContent, {loc: true});
   for (const node of ast.body)
     parseLocalizableStringFromNode(node, filePath);
 }

third_party/blink/renderer/devtools/tsconfig.json

-{
-  "compilerOptions": {
-    "typeRoots": ["../../../devtools-node-modules/third_party/node_modules/@types"]
-  }
-}