Audio player: Convert dependencies in //ui/file_manager/image_loader/

In //ui/file_manager/image_loader:
- load_image_request.js
- image_loader_client.js
- image_loader_client_unittest.js

Bug: 1133186
Change-Id: If1fa276446e2ae5a8763ca1a9bb728cb0c7ce2b4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2529649
Commit-Queue: Jeremie Boulic <jboulic@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826095}

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -67,7 +67,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ExifParser) {
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ExternalMetadataProvider) {
   RunTestURL(
-      "foreground/js/metadata/external_metadata_provider_unittest_gen.html");
+      "foreground/js/metadata/external_metadata_provider_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileListModel) {
@@ -120,7 +120,8 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesToolTip) {
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileSystemMetadataProvider) {
   RunTestURL(
-      "foreground/js/metadata/file_system_metadata_provider_unittest_gen.html");
+      "foreground/js/metadata/"
+      "file_system_metadata_provider_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileTableList) {
@@ -188,7 +189,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, MediaScannerTest) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, MetadataCacheItem) {
-  RunTestURL("foreground/js/metadata/metadata_cache_item_unittest_gen.html");
+  RunTestURL("foreground/js/metadata/metadata_cache_item_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, MetadataCacheSet) {

chrome/browser/chromeos/file_manager/image_loader_jstest.cc

@@ -12,7 +12,7 @@ class ImageLoaderJsTest : public FileManagerJsTestBase {
 };
 
 IN_PROC_BROWSER_TEST_F(ImageLoaderJsTest, ImageLoaderClientTest) {
-  RunTestURL("image_loader_client_unittest_gen.html");
+  RunTestURL("image_loader_client_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(ImageLoaderJsTest, CacheTest) {

ui/file_manager/BUILD.gn

@@ -69,6 +69,7 @@ group("unit_test_data") {
     "gallery/js:js_test_gen_html",
     "gallery/js/image_editor:js_test_gen_html",
     "image_loader:js_test_gen_html",
+    "image_loader:js_test_gen_html_modules",
     "video_player/js:js_test_gen_html",
   ]
 }

ui/file_manager/externs/BUILD.gn

@@ -39,6 +39,13 @@ js_library("files_app_entry_interfaces.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("metadata_worker_window.m") {
+  sources =
+      [ "$root_gen_dir/ui/file_manager/externs/metadata_worker_window.m.js" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("volume_manager") {
   sources = []
 
@@ -90,6 +97,7 @@ js_modulizer("modulize") {
   input_files = [
     "entry_location.js",
     "files_app_entry_interfaces.js",
+    "metadata_worker_window.js",
     "volume_info.js",
     "volume_info_list.js",
     "volume_manager.js",

ui/file_manager/externs/metadata_worker_window.js

@@ -5,7 +5,7 @@
 /**
  * @interface
  */
-class MetadataParserLogger {
+/* #export */ class MetadataParserLogger {
   constructor() {
     /**
      * Verbose logging for the dispatcher.
@@ -43,5 +43,5 @@ class MetadataParserLogger {
  * @param {function(!Entry)} successCallback
  * @param {function(!FileError)=} opt_errorCallback
  */
-var webkitResolveLocalFileSystemURL = function(
+/* #export */ const webkitResolveLocalFileSystemURL = function(
     url, successCallback, opt_errorCallback) {};

ui/file_manager/file_manager/foreground/js/metadata/BUILD.gn

@@ -13,8 +13,8 @@ visibility = [ "//ui/file_manager/*" ]
 group("closure_compile") {
   testonly = true
   deps = [
-    ":closure_compile_module",
     ":closure_compile_jsmodules",
+    ":closure_compile_module",
     ":js_test_gen_html_modules_type_check_auto",
     ":js_test_gen_html_type_check_auto",
   ]
@@ -23,10 +23,20 @@ group("closure_compile") {
 js_type_check("closure_compile_jsmodules") {
   uses_js_modules = true
   deps = [
+    ":byte_reader.m",
+    ":exif_constants.m",
+    ":external_metadata_provider.m",
+    ":file_system_metadata_provider.m",
+    ":function_parallel.m",
+    ":function_sequence.m",
     ":image_orientation.m",
+    ":image_parsers.m",
+    ":metadata_cache_item.m",
     ":metadata_item.m",
+    ":metadata_parser.m",
     ":metadata_provider.m",
     ":metadata_request.m",
+    ":mpeg_parser.m",
   ]
 }
 
@@ -60,6 +70,12 @@ js_type_check("closure_compile_module") {
 js_library("byte_reader") {
 }
 
+js_library("byte_reader.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/byte_reader.m.js" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("content_metadata_provider") {
   deps = [
     ":metadata_provider",
@@ -79,6 +95,12 @@ js_unittest("content_metadata_provider_unittest") {
 js_library("exif_constants") {
 }
 
+js_library("exif_constants.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/exif_constants.m.js" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("exif_parser") {
   deps = [
     ":exif_constants",
@@ -102,11 +124,26 @@ js_library("external_metadata_provider") {
   ]
 }
 
-js_unittest("external_metadata_provider_unittest") {
+js_library("external_metadata_provider.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/external_metadata_provider.m.js" ]
   deps = [
-    ":external_metadata_provider",
-    "//ui/file_manager/base/js:mock_chrome",
-    "//ui/file_manager/base/js:test_error_reporting",
+    ":metadata_item.m",
+    ":metadata_provider.m",
+    ":metadata_request.m",
+    "//ui/file_manager/externs:file_manager_private",
+    "//ui/webui/resources/js:assert.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("external_metadata_provider_unittest.m") {
+  deps = [
+    ":external_metadata_provider.m",
+    ":metadata_request.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/base/js:mock_chrome.m",
+    "//ui/file_manager/base/js:test_error_reporting.m",
   ]
 }
 
@@ -114,10 +151,22 @@ js_library("file_system_metadata_provider") {
   deps = [ ":metadata_provider" ]
 }
 
-js_unittest("file_system_metadata_provider_unittest") {
+js_library("file_system_metadata_provider.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/file_system_metadata_provider.m.js" ]
   deps = [
-    ":file_system_metadata_provider",
-    "//ui/file_manager/base/js:test_error_reporting",
+    ":metadata_item.m",
+    ":metadata_provider.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("file_system_metadata_provider_unittest.m") {
+  deps = [
+    ":file_system_metadata_provider.m",
+    ":metadata_request.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/base/js:test_error_reporting.m",
   ]
 }
 
@@ -125,10 +174,24 @@ js_library("function_parallel") {
   deps = [ ":metadata_parser" ]
 }
 
+js_library("function_parallel.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/function_parallel.m.js" ]
+  deps = [ ":metadata_parser.m" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("function_sequence") {
   deps = [ ":metadata_parser" ]
 }
 
+js_library("function_sequence.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/function_sequence.m.js" ]
+  deps = [ ":metadata_parser.m" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("id3_parser") {
   deps = [
     ":byte_reader",
@@ -159,6 +222,17 @@ js_library("image_parsers") {
   externs_list = [ "//ui/file_manager/externs/metadata_worker_window.js" ]
 }
 
+js_library("image_parsers.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/image_parsers.m.js" ]
+  deps = [
+    ":byte_reader.m",
+    ":metadata_parser.m",
+    "//ui/file_manager/externs:metadata_worker_window.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("metadata_cache_item") {
   deps = [
     ":metadata_item",
@@ -166,10 +240,21 @@ js_library("metadata_cache_item") {
   ]
 }
 
-js_unittest("metadata_cache_item_unittest") {
+js_library("metadata_cache_item.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/metadata_cache_item.m.js" ]
   deps = [
-    ":metadata_cache_item",
-    "//ui/webui/resources/js:webui_resource_test",
+    ":metadata_item.m",
+    "//ui/webui/resources/js:assert.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("metadata_cache_item_unittest.m") {
+  deps = [
+    ":metadata_cache_item.m",
+    ":metadata_item.m",
+    "//chrome/test/data/webui:chai_assert",
   ]
 }
 
@@ -237,6 +322,16 @@ js_library("metadata_parser") {
   deps = [ ":byte_reader" ]
 }
 
+js_library("metadata_parser.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/metadata_parser.m.js" ]
+  deps = [
+    ":byte_reader.m",
+    "//ui/file_manager/externs:metadata_worker_window.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("metadata_provider") {
   deps = [
     ":metadata_item",
@@ -273,6 +368,17 @@ js_library("mpeg_parser") {
   deps = [ ":metadata_parser" ]
 }
 
+js_library("mpeg_parser.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata/mpeg_parser.m.js" ]
+  deps = [
+    ":byte_reader.m",
+    ":metadata_parser.m",
+    "//ui/file_manager/externs:metadata_worker_window.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("multi_metadata_provider") {
   deps = [
     ":content_metadata_provider",
@@ -303,7 +409,12 @@ js_unittest("thumbnail_model_unittest") {
 }
 
 js_test_gen_html("js_test_gen_html_modules") {
-  deps = [ ":image_orientation_unittest.m" ]
+  deps = [
+    ":external_metadata_provider_unittest.m",
+    ":file_system_metadata_provider_unittest.m",
+    ":image_orientation_unittest.m",
+    ":metadata_cache_item_unittest.m",
+  ]
   js_module = true
 
   closure_flags = strict_error_checking_closure_args + [
@@ -317,9 +428,6 @@ js_test_gen_html("js_test_gen_html") {
   deps = [
     ":content_metadata_provider_unittest",
     ":exif_parser_unittest",
-    ":external_metadata_provider_unittest",
-    ":file_system_metadata_provider_unittest",
-    ":metadata_cache_item_unittest",
     ":metadata_cache_set_unittest",
     ":metadata_model_unittest",
     ":multi_metadata_provider_unittest",
@@ -330,9 +438,19 @@ js_test_gen_html("js_test_gen_html") {
 
 js_modulizer("modulize") {
   input_files = [
+    "byte_reader.js",
+    "exif_constants.js",
+    "external_metadata_provider.js",
+    "file_system_metadata_provider.js",
+    "function_parallel.js",
+    "function_sequence.js",
+    "image_parsers.js",
+    "metadata_cache_item.js",
     "metadata_item.js",
+    "metadata_parser.js",
     "metadata_request.js",
     "image_orientation.js",
     "metadata_provider.js",
+    "mpeg_parser.js",
   ]
 }

ui/file_manager/file_manager/foreground/js/metadata/byte_reader.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 /** @final */
-class ByteReader {
+/* #export */ class ByteReader {
   /**
    * @param {ArrayBuffer} arrayBuffer An array of buffers to be read from.
    * @param {number=} opt_offset Offset to read bytes at.

ui/file_manager/file_manager/foreground/js/metadata/exif_constants.js

@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * @fileoverview
+ * @suppress {uselessCode} Temporary suppress because of the line exporting.
+ */
+
 const Exif = {};
 
 /**
@@ -58,3 +63,6 @@ Exif.Tag = {
   Y_DIMENSION: 0xA003,
   SOFTWARE: 0x0131,
 };
+
+// eslint-disable-next-line semi,no-extra-semi
+/* #export */ {Exif};

ui/file_manager/file_manager/foreground/js/metadata/external_metadata_provider.js

@@ -2,12 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {MetadataItem} from './metadata_item.m.js';
+// #import {MetadataProvider} from './metadata_provider.m.js';
+// #import {MetadataRequest} from './metadata_request.m.js';
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+
 /**
  * Metadata provider for FileEntry#getMetadata.
  * TODO(hirono): Rename thumbnailUrl with externalThumbnailUrl.
  * @final
  */
-class ExternalMetadataProvider extends MetadataProvider {
+/* #export */ class ExternalMetadataProvider extends MetadataProvider {
   constructor() {
     super(ExternalMetadataProvider.PROPERTY_NAMES);
   }

ui/file_manager/file_manager/foreground/js/metadata/external_metadata_provider_unittest.js → ui/file_manager/file_manager/foreground/js/metadata/external_metadata_provider_unittest.m.js

@@ -2,6 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {assertEquals} from 'chrome://test/chai_assert.js';
+import {installMockChrome} from '../../../../base/js/mock_chrome.m.js';
+import {reportPromise} from '../../../../base/js/test_error_reporting.m.js';
+import {ExternalMetadataProvider} from './external_metadata_provider.m.js';
+import {MetadataRequest} from './metadata_request.m.js';
+
 /** @const {!Entry} */
 const entryA = /** @type {!Entry} */ ({
   toURL: function() {
@@ -24,7 +30,7 @@ const entryB = /** @type {!Entry} */ ({
  */
 let mockChrome;
 
-function testExternalMetadataProviderBasic(callback) {
+export function testExternalMetadataProviderBasic(callback) {
   // Setup mock chrome APIs.
   mockChrome = {
     fileManagerPrivate: {

ui/file_manager/file_manager/foreground/js/metadata/file_system_metadata_provider.js

@@ -2,11 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {MetadataItem} from './metadata_item.m.js';
+// #import {MetadataProvider} from './metadata_provider.m.js';
+
 /**
  * Metadata provider for FileEntry#getMetadata.
  * @final
  */
-class FileSystemMetadataProvider extends MetadataProvider {
+/* #export */ class FileSystemMetadataProvider extends MetadataProvider {
   constructor() {
     super(FileSystemMetadataProvider.PROPERTY_NAMES);
   }

ui/file_manager/file_manager/foreground/js/metadata/file_system_metadata_provider_unittest.js → ui/file_manager/file_manager/foreground/js/metadata/file_system_metadata_provider_unittest.m.js

@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {assertEquals, assertTrue} from 'chrome://test/chai_assert.js';
+import {reportPromise} from '../../../../base/js/test_error_reporting.m.js';
+import {FileSystemMetadataProvider} from './file_system_metadata_provider.m.js';
+import {MetadataRequest} from './metadata_request.m.js';
+
 /** @const {!Entry} */
 const entryA = /** @type {!Entry} */ ({
   toURL: function() {
@@ -24,7 +29,7 @@ const entryB = /** @type {!Entry} */ ({
   }
 });
 
-function testFileSystemMetadataProviderBasic(callback) {
+export function testFileSystemMetadataProviderBasic(callback) {
   const provider = new FileSystemMetadataProvider();
   const names = [
     'modificationTime', 'size', 'contentMimeType', 'present', 'availableOffline'
@@ -53,7 +58,7 @@ function testFileSystemMetadataProviderBasic(callback) {
       callback);
 }
 
-function testFileSystemMetadataProviderPartialRequest(callback) {
+export function testFileSystemMetadataProviderPartialRequest(callback) {
   const provider = new FileSystemMetadataProvider();
   reportPromise(
       provider.get([new MetadataRequest(entryA, ['modificationTime', 'size'])])

ui/file_manager/file_manager/foreground/js/metadata/function_parallel.js

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {MetadataParser} from './metadata_parser.m.js';
+
 /**
  * @class FunctionParallel to invoke steps in parallel.
  */
-class FunctionParallel {
+/* #export */ class FunctionParallel {
   /**
    * @param {string} name Name of the function.
    * @param {Array<Function>} steps Array of functions to invoke in parallel.

ui/file_manager/file_manager/foreground/js/metadata/function_sequence.js

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {MetadataParser} from './metadata_parser.m.js';
+
 /**
  * @class FunctionSequence to invoke steps in sequence.
  */
-class FunctionSequence {
+/* #export */ class FunctionSequence {
   /**
    * @param {string} name Name of the function.
    * @param {Array} steps Array of functions to invoke in sequence.

ui/file_manager/file_manager/foreground/js/metadata/image_orientation.js

@@ -7,7 +7,7 @@
  *
  * @typedef {{scaleX: number, scaleY: number, rotate90: number}}
  */
-let ImageTransformParam;
+/* #export */ let ImageTransformParam;
 
 /**
  * Class representing image orientation.

ui/file_manager/file_manager/foreground/js/metadata/image_parsers.js

@@ -2,12 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {ByteReader} from './byte_reader.m.js';
+// #import {ImageParser, MetadataParser} from './metadata_parser.m.js';
+// #import {MetadataParserLogger} from '../../../../externs/metadata_worker_window.m.js';
+// clang-format on
+
 /**
  * Base class for image metadata parsers that only need to look at a short
  * fragment at the start of the file.
  * @abstract
  */
-class SimpleImageParser extends ImageParser {
+/* #export */ class SimpleImageParser extends ImageParser {
   /**
    * @param {!MetadataParserLogger} parent Parent object.
    * @param {string} type Image type.
@@ -51,7 +57,7 @@ class SimpleImageParser extends ImageParser {
  * Parser for the header of png files.
  * @final
  */
-class PngParser extends SimpleImageParser {
+/* #export */ class PngParser extends SimpleImageParser {
   /**
    * @param {!MetadataParserLogger} parent Parent object.
    */
@@ -85,7 +91,7 @@ class PngParser extends SimpleImageParser {
  * Parser for the header of bmp files.
  * @final
  */
-class BmpParser extends SimpleImageParser {
+/* #export */ class BmpParser extends SimpleImageParser {
   /**
    * @param {!MetadataParserLogger} parent Parent object.
    */
@@ -114,7 +120,7 @@ class BmpParser extends SimpleImageParser {
  * Parser for the header of gif files.
  * @final
  */
-class GifParser extends SimpleImageParser {
+/* #export */ class GifParser extends SimpleImageParser {
   /**
    * @param {!MetadataParserLogger} parent Parent object.
    */
@@ -142,7 +148,7 @@ class GifParser extends SimpleImageParser {
  * Parser for the header of webp files.
  * @final
  */
-class WebpParser extends SimpleImageParser {
+/* #export */ class WebpParser extends SimpleImageParser {
   /**
    * @param {!MetadataParserLogger} parent Parent object.
    */
@@ -217,7 +223,7 @@ class WebpParser extends SimpleImageParser {
  * Parser for the header of .ico icon files.
  * @final
  */
-class IcoParser extends SimpleImageParser {
+/* #export */ class IcoParser extends SimpleImageParser {
   /**
    * @param {!MetadataParserLogger} parent Parent metadata dispatcher object.
    */

ui/file_manager/file_manager/foreground/js/metadata/metadata_cache_item.js

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {MetadataItem} from './metadata_item.m.js';
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+
 /**
  * Cache of metadata for a FileEntry.
  */
-class MetadataCacheItem {
+/* #export */ class MetadataCacheItem {
   constructor() {
     /**
      * Map of property name and MetadataCacheItemProperty.
@@ -167,7 +170,7 @@ const MetadataCacheItemPropertyState = {
 /**
  * Cache of metadata for a property.
  */
-class MetadataCacheItemProperty {
+/* #export */ class MetadataCacheItemProperty {
   constructor() {
     /**
      * Cached value of property.

ui/file_manager/file_manager/foreground/js/metadata/metadata_cache_item_unittest.js → ui/file_manager/file_manager/foreground/js/metadata/metadata_cache_item_unittest.m.js

@@ -2,6 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {assertEquals, assertFalse, assertThrows, assertTrue} from 'chrome://test/chai_assert.js';
+import {MetadataCacheItem} from './metadata_cache_item.m.js';
+import {MetadataItem} from './metadata_item.m.js';
+
 /**
  * @type {!MetadataItem}
  */
@@ -9,7 +13,7 @@ const metadataA = new MetadataItem();
 metadataA.contentMimeType = 'value';
 
 
-function testMetadataCacheItemBasic() {
+export function testMetadataCacheItemBasic() {
   const item = new MetadataCacheItem();
   const loadRequested = item.createRequests(['contentMimeType']);
   assertEquals(1, loadRequested.length);
@@ -22,7 +26,7 @@ function testMetadataCacheItemBasic() {
   assertEquals('value', result.contentMimeType);
 }
 
-function testMetadataCacheItemAvoidDoubleLoad() {
+export function testMetadataCacheItemAvoidDoubleLoad() {
   const item = new MetadataCacheItem();
   item.startRequests(1, ['contentMimeType']);
   const loadRequested = item.createRequests(['contentMimeType']);
@@ -35,7 +39,7 @@ function testMetadataCacheItemAvoidDoubleLoad() {
   assertEquals('value', result.contentMimeType);
 }
 
-function testMetadataCacheItemInvalidate() {
+export function testMetadataCacheItemInvalidate() {
   const item = new MetadataCacheItem();
   item.startRequests(1, item.createRequests(['contentMimeType']));
   item.invalidate(2);
@@ -45,7 +49,7 @@ function testMetadataCacheItemInvalidate() {
   assertEquals(1, loadRequested.length);
 }
 
-function testMetadataCacheItemStoreInReverseOrder() {
+export function testMetadataCacheItemStoreInReverseOrder() {
   const item = new MetadataCacheItem();
   item.startRequests(1, item.createRequests(['contentMimeType']));
   item.startRequests(2, item.createRequests(['contentMimeType']));
@@ -60,7 +64,7 @@ function testMetadataCacheItemStoreInReverseOrder() {
   assertEquals('value2', result.contentMimeType);
 }
 
-function testMetadataCacheItemClone() {
+export function testMetadataCacheItemClone() {
   const itemA = new MetadataCacheItem();
   itemA.startRequests(1, itemA.createRequests(['contentMimeType']));
   const itemB = itemA.clone();
@@ -74,7 +78,7 @@ function testMetadataCacheItemClone() {
   assertTrue(itemB.hasFreshCache(['contentMimeType']));
 }
 
-function testMetadataCacheItemHasFreshCache() {
+export function testMetadataCacheItemHasFreshCache() {
   const item = new MetadataCacheItem();
   assertFalse(item.hasFreshCache(['contentMimeType', 'externalFileUrl']));
 
@@ -97,7 +101,7 @@ function testMetadataCacheItemHasFreshCache() {
   assertTrue(item.hasFreshCache(['contentMimeType']));
 }
 
-function testMetadataCacheItemShouldNotUpdateBeforeInvalidation() {
+export function testMetadataCacheItemShouldNotUpdateBeforeInvalidation() {
   const item = new MetadataCacheItem();
   item.startRequests(1, item.createRequests(['contentMimeType']));
   item.storeProperties(1, metadataA);
@@ -109,7 +113,7 @@ function testMetadataCacheItemShouldNotUpdateBeforeInvalidation() {
   assertEquals('value', item.get(['contentMimeType']).contentMimeType);
 }
 
-function testMetadataCacheItemError() {
+export function testMetadataCacheItemError() {
   const item = new MetadataCacheItem();
   item.startRequests(1, item.createRequests(['contentThumbnailUrl']));
 
@@ -122,7 +126,7 @@ function testMetadataCacheItemError() {
   assertEquals('Error', property.contentThumbnailUrlError.message);
 }
 
-function testMetadataCacheItemErrorShouldNotFetchedDirectly() {
+export function testMetadataCacheItemErrorShouldNotFetchedDirectly() {
   const item = new MetadataCacheItem();
   item.startRequests(1, item.createRequests(['contentThumbnailUrl']));
 

ui/file_manager/file_manager/foreground/js/metadata/metadata_parser.js

@@ -2,10 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {ByteReader} from './byte_reader.m.js';
+// #import {MetadataParserLogger} from '../../../../externs/metadata_worker_window.m.js';
+// clang-format on
+
 /**
  * @implements {MetadataParserLogger}
  */
-class MetadataParser {
+/* #export */ class MetadataParser {
   /**
    * @param {!MetadataParserLogger} parent Parent object.
    * @param {string} type Parser type.
@@ -83,7 +88,7 @@ class MetadataParser {
 /**
  * Base class for image metadata parsers.
  */
-class ImageParser extends MetadataParser {
+/* #export */ class ImageParser extends MetadataParser {
   /**
    * @param {!MetadataParserLogger} parent Parent object.
    * @param {string} type Image type.

ui/file_manager/file_manager/foreground/js/metadata/metadata_provider.js

@@ -9,7 +9,7 @@
 /**
  * @abstract
  */
-class MetadataProvider {
+/* #export */ class MetadataProvider {
   /**
    * @param {!Array<string>} validPropertyNames
    */

ui/file_manager/file_manager/foreground/js/metadata/mpeg_parser.js

@@ -2,8 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {ByteReader} from './byte_reader.m.js';
+// #import {MetadataParser} from './metadata_parser.m.js';
+// #import {MetadataParserLogger} from '../../../../externs/metadata_worker_window.m.js';
+// clang-format on
+
 /** @final */
-class MpegParser extends MetadataParser {
+/* #export */ class MpegParser extends MetadataParser {
   /**
    * @param {!MetadataParserLogger} parent Parent object.
    */

ui/file_manager/image_loader/BUILD.gn

@@ -5,6 +5,15 @@
 import("//third_party/closure_compiler/compile_js.gni")
 import("//third_party/closure_compiler/js_unit_tests.gni")
 import("//ui/file_manager/base/gn/js_test_gen_html.gni")
+import("//ui/webui/resources/tools/js_modulizer.gni")
+
+js_type_check("closure_compile_jsmodules") {
+  uses_js_modules = true
+  deps = [
+    ":image_loader_client.m",
+    ":load_image_request.m",
+  ]
+}
 
 js_type_check("closure_compile_module") {
   closure_flags = default_closure_args + [ "jscomp_error=strictCheckTypes" ]
@@ -67,6 +76,17 @@ js_library("load_image_request") {
   ]
 }
 
+js_library("load_image_request.m") {
+  sources =
+      [ "$root_gen_dir/ui/file_manager/image_loader/load_image_request.m.js" ]
+  deps = [
+    "//ui/file_manager/file_manager/foreground/js/metadata:image_orientation.m",
+    "//ui/webui/resources/js:assert.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("image_loader_client") {
   deps = [
     ":load_image_request",
@@ -79,10 +99,28 @@ js_library("image_loader_client") {
   ]
 }
 
-js_unittest("image_loader_client_unittest") {
+js_library("image_loader_client.m") {
+  sources =
+      [ "$root_gen_dir/ui/file_manager/image_loader/image_loader_client.m.js" ]
   deps = [
-    ":image_loader_client",
-    "//ui/file_manager/base/js:test_error_reporting",
+    ":load_image_request.m",
+    "//ui/file_manager/file_manager/common/js:lru_cache.m",
+  ]
+  externs_list = [
+    "$externs_path/chrome.js",
+    "$externs_path/chrome_extensions.js",
+    "$externs_path/metrics_private.js",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("image_loader_client_unittest.m") {
+  deps = [
+    ":image_loader_client.m",
+    ":load_image_request.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/base/js:test_error_reporting.m",
   ]
 }
 
@@ -115,11 +153,22 @@ js_unittest("scheduler_unittest") {
   ]
 }
 
+js_test_gen_html("js_test_gen_html_modules") {
+  deps = [ ":image_loader_client_unittest.m" ]
+  js_module = true
+
+  closure_flags =
+      strict_error_checking_closure_args + [
+        "js_module_root=./gen/ui",
+        "js_module_root=../../ui",
+        "browser_resolver_prefix_replacements=\"chrome://test/=./\"",
+      ]
+}
+
 js_test_gen_html("js_test_gen_html") {
   closure_flags = default_closure_args + [ "jscomp_error=strictCheckTypes" ]
   deps = [
     ":cache_unittest",
-    ":image_loader_client_unittest",
     ":image_loader_unittest",
     ":scheduler_unittest",
   ]
@@ -128,7 +177,16 @@ js_test_gen_html("js_test_gen_html") {
 group("closure_compile") {
   testonly = true
   deps = [
+    ":closure_compile_jsmodules",
     ":closure_compile_module",
+    ":js_test_gen_html_modules_type_check_auto",
     ":js_test_gen_html_type_check_auto",
   ]
 }
+
+js_modulizer("modulize") {
+  input_files = [
+    "image_loader_client.js",
+    "load_image_request.js",
+  ]
+}

ui/file_manager/image_loader/image_loader_client.js

@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {LRUCache} from '../file_manager/common/js/lru_cache.m.js';
+// #import {LoadImageRequest, LoadImageResponse, LoadImageResponseStatus} from './load_image_request.m.js';
+// clang-format on
+
 /**
  * Client used to connect to the remote ImageLoader extension. Client class runs
  * in the extension, where the client.js is included (eg. Files app).
@@ -12,7 +17,7 @@
  *
  * @constructor
  */
-function ImageLoaderClient() {
+/* #export */ function ImageLoaderClient() {
   /**
    * @type {number}
    * @private

ui/file_manager/image_loader/image_loader_client_unittest.js → ui/file_manager/image_loader/image_loader_client_unittest.m.js

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
+import {assertFalse, assertTrue} from 'chrome://test/chai_assert.js';
+import {reportPromise} from '../base/js/test_error_reporting.m.js';
+import {ImageLoaderClient} from './image_loader_client.m.js';
+import {LoadImageRequest, LoadImageResponse, LoadImageResponseStatus} from './load_image_request.m.js';
 
 /** @suppress {const|checkTypes} */
-function setUp() {
+export function setUp() {
   chrome.metricsPrivate = {
     MetricTypeType:
         {HISTOGRAM_LOG: 'histogram-log', HISTOGRAM_LINEAR: 'histogram-linear'},
@@ -50,7 +53,7 @@ function loadAndCheckCacheUsed(client, url, cache) {
   });
 }
 
-function testCache(callback) {
+export function testCache(callback) {
   const client = new ImageLoaderClient();
   reportPromise(
       loadAndCheckCacheUsed(client, 'http://example.com/image.jpg', true)
@@ -65,7 +68,7 @@ function testCache(callback) {
       callback);
 }
 
-function testNoCache(callback) {
+export function testNoCache(callback) {
   const client = new ImageLoaderClient();
   reportPromise(
       loadAndCheckCacheUsed(client, 'http://example.com/image.jpg', false)
@@ -80,7 +83,7 @@ function testNoCache(callback) {
       callback);
 }
 
-function testDataURLCache(callback) {
+export function testDataURLCache(callback) {
   const client = new ImageLoaderClient();
   reportPromise(
       loadAndCheckCacheUsed(client, 'data:URI', true)

ui/file_manager/image_loader/load_image_request.js

@@ -2,14 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
+// clang-format off
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+// #import {ImageOrientation, ImageTransformParam} from '../file_manager/foreground/js/metadata/image_orientation.m.js';
+// clang-format on
+
+/* #ignore */ 'use strict';
 
 /**
  * Response status.
  *
  * @enum {string}
  */
-const LoadImageResponseStatus = {
+/* #export */ const LoadImageResponseStatus = {
   SUCCESS: 'success',
   ERROR: 'error'
 };
@@ -20,7 +25,7 @@ const LoadImageResponseStatus = {
  *
  * @struct
  */
-class LoadImageResponse {
+/* #export */ class LoadImageResponse {
   /**
    * @param {!LoadImageResponseStatus} status
    * @param {?number} taskId or null if fulfilled by the client-side cache.
@@ -96,7 +101,7 @@ class LoadImageResponse {
  *
  * @struct
  */
-class LoadImageRequest {
+/* #export */ class LoadImageRequest {
   constructor() {
     // Parts that uniquely identify the request.