Reland "Convert ui/ARIAUtils.js to an ES module"

This is a reland of b3373919

Original change's description:
> 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/+/1748949
> Reviewed-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}

Change-Id: I7544cbf4364d0b1a3c2f137a4d17a1afdb1d4aed
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1810534Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Tim Van der Lippe <tvanderlippe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697626}

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/audits_worker/AuditsService.js

@@ -5,6 +5,7 @@
 /**
  * @interface
  */
+// eslint-disable-next-line
 const LighthousePort = class {
   /**
    * @param {!string} eventName, 'message', 'close'

third_party/blink/renderer/devtools/front_end/color_picker/Spectrum.js

@@ -147,7 +147,7 @@ ColorPicker.Spectrum = class extends UI.VBox {
     UI.ARIAUtils.markAsButton(paletteSwitcher);
     UI.ARIAUtils.setAccessibleName(paletteSwitcher, ls`Preview palettes`);
     paletteSwitcher.tabIndex = 0;
-    onInvokeElement(paletteSwitcher, event => {
+    self.onInvokeElement(paletteSwitcher, event => {
       this._togglePalettePanel(true);
       event.consume(true);
     });
@@ -533,7 +533,7 @@ ColorPicker.Spectrum = class extends UI.VBox {
       previewElement.appendChild(this._createPaletteColor(palette.colors[i], palette.colorNames[i]));
     for (; i < colorsPerPreviewRow; i++)
       previewElement.createChild('div', 'spectrum-palette-color empty-color');
-    onInvokeElement(previewElement, event => {
+    self.onInvokeElement(previewElement, event => {
       this._paletteSelected(palette);
       event.consume(true);
     });

third_party/blink/renderer/devtools/front_end/console/ConsolePinPane.js

@@ -101,7 +101,7 @@ Console.ConsolePin = class extends Common.Object {
   constructor(expression, pinPane) {
     super();
     const deletePinIcon = UI.Icon.create('smallicon-cross', 'console-delete-pin');
-    onInvokeElement(deletePinIcon, () => pinPane._removePin(this));
+    self.onInvokeElement(deletePinIcon, () => pinPane._removePin(this));
     deletePinIcon.tabIndex = 0;
     UI.ARIAUtils.setAccessibleName(deletePinIcon, ls`Remove expression`);
     UI.ARIAUtils.markAsButton(deletePinIcon);

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/resources/ServiceWorkersView.js

@@ -37,7 +37,7 @@ Resources.ServiceWorkersView = class extends UI.VBox {
     this._otherSWFilter.setAttribute('aria-checked', false);
     const filterLabel = this._otherSWFilter.createChild('label', 'service-worker-filter-label');
     filterLabel.textContent = Common.UIString('Service workers from other origins');
-    onInvokeElement(this._otherSWFilter, event => {
+    self.onInvokeElement(this._otherSWFilter, event => {
       if (event.target === this._otherSWFilter || event.target === filterLabel)
         this._toggleFilter();
     });
@@ -437,7 +437,7 @@ Resources.ServiceWorkersView.Section = class {
       errorsLabel.classList.add('link');
       errorsLabel.tabIndex = 0;
       UI.ARIAUtils.setAccessibleName(errorsLabel, ls`${this._registration.errors.length} registration errors`);
-      onInvokeElement(errorsLabel, () => Common.console.show());
+      self.onInvokeElement(errorsLabel, () => Common.console.show());
       name.appendChild(errorsLabel);
     }
     this._sourceField.createChild('div', 'report-field-value-subtitle').textContent =

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"]
-  }
-}