Migrate chrome://discards to Mojom JS modules

Bug: 1004256
Change-Id: I48acd4d46ee341f3cb399427b10e467f43537ef1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2472484
Auto-Submit: Ken Rockot <rockot@google.com>
Commit-Queue: François Doray <fdoray@chromium.org>
Reviewed-by: François Doray <fdoray@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820213}

chrome/browser/browser_resources.grd

@@ -50,17 +50,15 @@
     <includes>
       <if expr="is_win or is_macosx or desktop_linux or chromeos">
         <include name="IDR_COMMANDER_HTML" file="resources\commander\commander.html" type="BINDATA" />
-        <include name="IDR_DISCARDS_MOJO_API_JS" file="resources\discards\mojo_api.js" type="BINDATA" />
         <include name="IDR_DISCARDS_DATABASE_TAB_JS" file="${root_gen_dir}\chrome\browser\resources\discards\database_tab.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_DISCARDS_DISCARDS_MAIN_JS" file="${root_gen_dir}\chrome\browser\resources\discards\discards_main.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_DISCARDS_DISCARDS_TAB_JS" file="${root_gen_dir}\chrome\browser\resources\discards\discards_tab.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_DISCARDS_GRAPH_TAB_JS" file="${root_gen_dir}\chrome\browser\resources\discards\graph_tab.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_DISCARDS_HTML" file="resources\discards\discards.html" allowexternalscript="true" type="BINDATA" />
         <include name="IDR_DISCARDS_JS" file="resources\discards\discards.js" type="BINDATA" />
-        <include name="IDR_DISCARDS_LIFECYCLE_UNIT_STATE_MOJOM_LITE_JS" file="${root_gen_dir}\chrome\browser\resource_coordinator\lifecycle_unit_state.mojom-lite.js" use_base_dir="false" type="BINDATA" />
-        <include name="IDR_DISCARDS_MOJOM_LITE_JS" file="${root_gen_dir}\chrome\browser\ui\webui\discards\discards.mojom-lite.js" use_base_dir="false" type="BINDATA" />
-        <include name="IDR_DISCARDS_MOJO_PUBLIC_BASE_PROCESS_ID_MOJOM_LITE_JS" file="${root_gen_dir}\mojo\public\mojom\base\process_id.mojom-lite.js" use_base_dir="false" type="BINDATA" />
-        <include name="IDR_DISCARDS_SITE_DATA_MOJOM_LITE_JS" file="${root_gen_dir}\chrome\browser\ui\webui\discards\site_data.mojom-lite.js" use_base_dir="false" type="BINDATA" />
+        <include name="IDR_DISCARDS_LIFECYCLE_UNIT_STATE_MOJOM_WEBUI_JS" file="${root_gen_dir}\mojom-webui\chrome\browser\resource_coordinator\lifecycle_unit_state.mojom-webui.js" use_base_dir="false" type="BINDATA" />
+        <include name="IDR_DISCARDS_MOJOM_WEBUI_JS" file="${root_gen_dir}\mojom-webui\chrome\browser\ui\webui\discards\discards.mojom-webui.js" use_base_dir="false" type="BINDATA" />
+        <include name="IDR_DISCARDS_SITE_DATA_MOJOM_WEBUI_JS" file="${root_gen_dir}\mojom-webui\chrome\browser\ui\webui\discards\site_data.mojom-webui.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_DISCARDS_SORTED_TABLE_BEHAVIOR_JS" file="resources\discards\sorted_table_behavior.js" type="BINDATA" />
       </if>
       <if expr="is_win or is_macosx or (is_linux and not chromeos)">

chrome/browser/resource_coordinator/BUILD.gn

@@ -12,6 +12,7 @@ proto_library("tab_metrics_event_proto") {
 
 mojom("mojo_bindings") {
   sources = [ "lifecycle_unit_state.mojom" ]
+  webui_module_path = "/chrome/browser/resource_coordinator"
 }
 
 proto_library("intervention_policy_database_proto") {

chrome/browser/resources/discards/BUILD.gn

@@ -14,14 +14,12 @@ js_type_check("closure_compile") {
     ":discards_tab",
     ":graph_doc",
     ":graph_tab_template",
-    ":mojo_api",
   ]
+  closure_flags = mojom_js_args
 }
 
 js_library("discards") {
-  deps = [
-    "//chrome/browser/ui/webui/discards:mojo_bindings_js_library_for_compile",
-  ]
+  deps = [ "//chrome/browser/ui/webui/discards:mojo_bindings_webui_js" ]
 }
 
 js_library("discards_main") {
@@ -34,7 +32,7 @@ js_library("database_tab") {
   deps = [
     ":discards",
     ":sorted_table_behavior",
-    "//chrome/browser/ui/webui/discards:mojo_bindings_js_library_for_compile",
+    "//chrome/browser/ui/webui/discards:mojo_bindings_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:assert.m",
   ]
@@ -44,7 +42,7 @@ js_library("discards_tab") {
   deps = [
     ":discards",
     ":sorted_table_behavior",
-    "//chrome/browser/ui/webui/discards:mojo_bindings_js_library_for_compile",
+    "//chrome/browser/ui/webui/discards:mojo_bindings_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:icon.m",
@@ -53,22 +51,17 @@ js_library("discards_tab") {
 
 js_library("graph_tab_template") {
   deps = [
-    "//chrome/browser/ui/webui/discards:mojo_bindings_js_library_for_compile",
+    "//chrome/browser/ui/webui/discards:mojo_bindings_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
 
 js_library("graph_doc") {
-  deps = [
-    "//chrome/browser/ui/webui/discards:mojo_bindings_js_library_for_compile",
-  ]
+  deps = [ "//chrome/browser/ui/webui/discards:mojo_bindings_webui_js" ]
 
   externs_list = [ "../../../../third_party/d3/src/externs.js" ]
 }
 
-js_library("mojo_api") {
-}
-
 js_library("sorted_table_behavior") {
 }
 

chrome/browser/resources/discards/database_tab.js

@@ -5,18 +5,18 @@
 import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
-import './mojo_api.js';
 
 import {assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {SiteDataDatabaseSize, SiteDataEntry, SiteDataFeature, SiteDataProviderRemote} from './chrome/browser/ui/webui/discards/site_data.mojom-webui.js';
 import {boolToString, durationToString, getOrCreateSiteDataProvider, secondsToString} from './discards.js';
 import {SortedTableBehavior} from './sorted_table_behavior.js';
 
 /**
  * Compares two db rows by their origin.
- * @param {discards.mojom.SiteDataEntry} a The first value being compared.
- * @param {discards.mojom.SiteDataEntry} b The second value being compared.
+ * @param {SiteDataEntry} a The first value being compared.
+ * @param {SiteDataEntry} b The second value being compared.
  * @return {number} A negative number if a < b, 0 if a === b, and a positive
  *     number if a > b.
  */
@@ -26,8 +26,8 @@ function compareRowsByOrigin(a, b) {
 
 /**
  * Compares two db rows by their dirty bit.
- * @param {discards.mojom.SiteDataEntry} a The first value being compared.
- * @param {discards.mojom.SiteDataEntry} b The second value being compared.
+ * @param {SiteDataEntry} a The first value being compared.
+ * @param {SiteDataEntry} b The second value being compared.
  * @return {number} A negative number if a < b, 0 if a === b, and a positive
  *     number if a > b.
  */
@@ -37,8 +37,8 @@ function compareRowsByIsDirty(a, b) {
 
 /**
  * Compares two db rows by their last load time.
- * @param {discards.mojom.SiteDataEntry} a The first value being compared.
- * @param {discards.mojom.SiteDataEntry} b The second value being compared.
+ * @param {SiteDataEntry} a The first value being compared.
+ * @param {SiteDataEntry} b The second value being compared.
  * @return {number} A negative number if a < b, 0 if a === b, and a positive
  *     number if a > b.
  */
@@ -48,8 +48,8 @@ function compareRowsByLastLoaded(a, b) {
 
 /**
  * Compares two db rows by their CPU usage.
- * @param {discards.mojom.SiteDataEntry} a The first value being compared.
- * @param {discards.mojom.SiteDataEntry} b The second value being compared.
+ * @param {SiteDataEntry} a The first value being compared.
+ * @param {SiteDataEntry} b The second value being compared.
  * @return {number} A negative number if a < b, 0 if a === b, and a positive
  *     number if a > b.
  */
@@ -63,8 +63,8 @@ function compareRowsByCpuUsage(a, b) {
 
 /**
  * Compares two db rows by their memory usage.
- * @param {discards.mojom.SiteDataEntry} a The first value being compared.
- * @param {discards.mojom.SiteDataEntry} b The second value being compared.
+ * @param {SiteDataEntry} a The first value being compared.
+ * @param {SiteDataEntry} b The second value being compared.
  * @return {number} A negative number if a < b, 0 if a === b, and a positive
  *     number if a > b.
  */
@@ -78,8 +78,8 @@ function compareRowsByMemoryUsage(a, b) {
 
 /**
  * Compares two db rows by their load duration.
- * @param {discards.mojom.SiteDataEntry} a The first value being compared.
- * @param {discards.mojom.SiteDataEntry} b The second value being compared.
+ * @param {SiteDataEntry} a The first value being compared.
+ * @param {SiteDataEntry} b The second value being compared.
  * @return {number} A negative number if a < b, 0 if a === b, and a positive
  *     number if a > b.
  */
@@ -95,8 +95,7 @@ function compareRowsByLoadDuration(a, b) {
 
 /**
  * @param {string} sortKey The sort key to get a function for.
- * @return {function(discards.mojom.SiteDataEntry,
-                     discards.mojom.SiteDataEntry): number}
+ * @return {function(SiteDataEntry, SiteDataEntry): number}
  *     A comparison function that compares two tab infos, returns
  *     negative number if a < b, 0 if a === b, and a positive
  *     number if a > b.
@@ -184,7 +183,7 @@ Polymer({
   properties: {
     /**
      * List of database rows.
-     * @private {?Array<!discards.mojom.SiteDataEntry>}
+     * @private {?Array<!SiteDataEntry>}
      */
     rows_: {
       type: Array,
@@ -192,7 +191,7 @@ Polymer({
 
     /**
      * The database size response.
-     * @private {!discards.mojom.SiteDataDatabaseSize}
+     * @private {!SiteDataDatabaseSize}
      */
     size_: {
       type: Object,
@@ -217,7 +216,7 @@ Polymer({
   /** @private {!Object} */
   requestedOrigins_: {},
 
-  /** @private {?discards.mojom.SiteDataProviderRemote} */
+  /** @private {?SiteDataProviderRemote} */
   siteDataProvider_: null,
 
   /** @override */
@@ -388,7 +387,7 @@ Polymer({
   },
 
   /**
-   * @param {?discards.mojom.SiteDataFeature} feature The feature in question.
+   * @param {?SiteDataFeature} feature The feature in question.
    * @return {string} A human-readable string representing the feature.
    * @private
    */

chrome/browser/resources/discards/discards.js

@@ -2,28 +2,31 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-  // The following variables are initialized by 'initialize'.
-  // Points to the DiscardsDetailsProviderRemote.
-  let discardsDetailsProvider;
-
-  /**
-   * @return {!discards.mojom.DetailsProviderRemote} Provides discards details.
-   */
-  export function getOrCreateDetailsProvider() {
-    if (!discardsDetailsProvider) {
-      discardsDetailsProvider = discards.mojom.DetailsProvider.getRemote();
-    }
-    return discardsDetailsProvider;
+import {DetailsProvider, DetailsProviderRemote} from './chrome/browser/ui/webui/discards/discards.mojom-webui.js';
+import {SiteDataProvider, SiteDataProviderRemote} from './chrome/browser/ui/webui/discards/site_data.mojom-webui.js';
+
+// The following variables are initialized by 'initialize'.
+// Points to the DiscardsDetailsProviderRemote.
+let discardsDetailsProvider;
+
+/**
+ * @return {!DetailsProviderRemote} Provides discards details.
+ */
+export function getOrCreateDetailsProvider() {
+  if (!discardsDetailsProvider) {
+    discardsDetailsProvider = DetailsProvider.getRemote();
   }
+  return discardsDetailsProvider;
+}
 
   let siteDataProvider;
 
   /**
-   * @return {!discards.mojom.SiteDataProviderRemote} Provides site data info.
+   * @return {!SiteDataProviderRemote} Provides site data info.
    */
   export function getOrCreateSiteDataProvider() {
     if (!siteDataProvider) {
-      siteDataProvider = discards.mojom.SiteDataProvider.getRemote();
+      siteDataProvider = SiteDataProvider.getRemote();
     }
     return siteDataProvider;
   }

chrome/browser/resources/discards/graph_doc.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {FavIconInfo, FrameInfo, GraphChangeStreamInterface, PageInfo, ProcessInfo, WorkerInfo} from './chrome/browser/ui/webui/discards/discards.mojom-webui.js';
+
 // Radius of a node circle.
 const /** number */ kNodeRadius = 6;
 
@@ -343,10 +345,10 @@ class GraphNode {
 }
 
 class PageNode extends GraphNode {
-  /** @param {!discards.mojom.PageInfo} page */
+  /** @param {!PageInfo} page */
   constructor(page) {
     super(page.id);
-    /** @type {!discards.mojom.PageInfo} */
+    /** @type {!PageInfo} */
     this.page = page;
     this.y = kPageNodesTargetY;
   }
@@ -392,10 +394,10 @@ class PageNode extends GraphNode {
 }
 
 class FrameNode extends GraphNode {
-  /** @param {!discards.mojom.FrameInfo} frame */
+  /** @param {!FrameInfo} frame */
   constructor(frame) {
     super(frame.id);
-    /** @type {!discards.mojom.FrameInfo} frame */
+    /** @type {!FrameInfo} frame */
     this.frame = frame;
     this.color = this.selectColor(frame.processId);
   }
@@ -425,10 +427,10 @@ class FrameNode extends GraphNode {
 }
 
 class ProcessNode extends GraphNode {
-  /** @param {!discards.mojom.ProcessInfo} process */
+  /** @param {!ProcessInfo} process */
   constructor(process) {
     super(process.id);
-    /** @type {!discards.mojom.ProcessInfo} */
+    /** @type {!ProcessInfo} */
     this.process = process;
 
     this.color = this.selectColor(process.id);
@@ -466,10 +468,10 @@ class ProcessNode extends GraphNode {
 }
 
 class WorkerNode extends GraphNode {
-  /** @param {!discards.mojom.WorkerInfo} worker */
+  /** @param {!WorkerInfo} worker */
   constructor(worker) {
     super(worker.id);
-    /** @type {!discards.mojom.WorkerInfo} */
+    /** @type {!WorkerInfo} */
     this.worker = worker;
 
     this.color = this.selectColor(worker.processId);
@@ -567,7 +569,7 @@ function boundingForce(graphHeight, graphWidth) {
 }
 
 /**
- * @implements {discards.mojom.GraphChangeStreamInterface}
+ * @implements {GraphChangeStreamInterface}
  */
 class Graph {
   /**
@@ -893,39 +895,39 @@ class Graph {
     switch (type) {
       case 'frameCreated':
         this.frameCreated(
-            /** @type {!discards.mojom.FrameInfo} */ (data));
+            /** @type {!FrameInfo} */ (data));
         break;
       case 'pageCreated':
         this.pageCreated(
-            /** @type {!discards.mojom.PageInfo} */ (data));
+            /** @type {!PageInfo} */ (data));
         break;
       case 'processCreated':
         this.processCreated(
-            /** @type {!discards.mojom.ProcessInfo} */ (data));
+            /** @type {!ProcessInfo} */ (data));
         break;
       case 'workerCreated':
         this.workerCreated(
-            /** @type {!discards.mojom.WorkerInfo} */ (data));
+            /** @type {!WorkerInfo} */ (data));
         break;
       case 'frameChanged':
         this.frameChanged(
-            /** @type {!discards.mojom.FrameInfo} */ (data));
+            /** @type {!FrameInfo} */ (data));
         break;
       case 'pageChanged':
         this.pageChanged(
-            /** @type {!discards.mojom.PageInfo} */ (data));
+            /** @type {!PageInfo} */ (data));
         break;
       case 'processChanged':
         this.processChanged(
-            /** @type {!discards.mojom.ProcessInfo} */ (data));
+            /** @type {!ProcessInfo} */ (data));
         break;
       case 'favIconDataAvailable':
         this.favIconDataAvailable(
-            /** @type {!discards.mojom.FavIconInfo} */ (data));
+            /** @type {!FavIconInfo} */ (data));
         break;
       case 'workerChanged':
         this.workerChanged(
-            /** @type {!discards.mojom.WorkerInfo} */ (data));
+            /** @type {!WorkerInfo} */ (data));
         break;
       case 'nodeDeleted':
         this.nodeDeleted(/** @type {number} */ (data));

chrome/browser/resources/discards/graph_tab_template.js

@@ -2,12 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './mojo_api.js';
-
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {GraphChangeStreamInterface, GraphChangeStreamReceiver, GraphDump, GraphDumpRemote} from './chrome/browser/ui/webui/discards/discards.mojom-webui.js';
+
 /**
- * @implements {discards.mojom.GraphChangeStreamInterface}
+ * @implements {GraphChangeStreamInterface}
  */
 class DiscardsGraphChangeStreamImpl {
   /** @param {Window} contentWindow */
@@ -83,14 +83,14 @@ Polymer({
   /**
    * The Mojo graph data source.
    *
-   * @private {discards.mojom.GraphDumpRemote}
+   * @private {GraphDumpRemote}
    */
   graphDump_: null,
 
   /**
    * The graph change listener.
    *
-   * @private {discards.mojom.GraphChangeStreamInterface}
+   * @private {GraphChangeStreamInterface}
    */
   changeListener_: null,
 
@@ -102,7 +102,7 @@ Polymer({
 
   /** @override */
   ready() {
-    this.graphDump_ = discards.mojom.GraphDump.getRemote();
+    this.graphDump_ = GraphDump.getRemote();
   },
 
   /** @override */
@@ -137,8 +137,7 @@ Polymer({
     this.contentWindow_ = this.$.webView.contentWindow;
     this.changeListener_ =
         new DiscardsGraphChangeStreamImpl(this.contentWindow_);
-    this.client_ =
-        new discards.mojom.GraphChangeStreamReceiver(this.changeListener_);
+    this.client_ = new GraphChangeStreamReceiver(this.changeListener_);
     // Subscribe for graph updates.
     this.graphDump_.subscribeToChanges(
         this.client_.$.bindNewPipeAndPassRemote());

chrome/browser/resources/discards/mojo_api.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 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js';
-import 'chrome://resources/mojo/url/mojom/url.mojom-lite.js';
-import './mojo/public/mojom/base/process_id.mojom-lite.js';
-import './chrome/browser/resource_coordinator/lifecycle_unit_state.mojom-lite.js';
-import './chrome/browser/ui/webui/discards/discards.mojom-lite.js';
-import './chrome/browser/ui/webui/discards/site_data.mojom-lite.js';

chrome/browser/ui/webui/discards/BUILD.gn

@@ -16,5 +16,7 @@ if (is_win || is_mac || is_linux || is_chromeos) {
       "//mojo/public/mojom/base",
       "//url/mojom:url_mojom_gurl",
     ]
+
+    webui_module_path = "/chrome/browser/ui/webui/discards"
   }
 }

chrome/browser/ui/webui/discards/discards_ui.cc

@@ -27,6 +27,7 @@
 #include "chrome/browser/ui/webui/discards/site_data.mojom-forward.h"
 #include "chrome/browser/ui/webui/discards/site_data_provider_impl.h"
 #include "chrome/browser/ui/webui/favicon_source.h"
+#include "chrome/browser/ui/webui/webui_util.h"
 #include "chrome/common/webui_url_constants.h"
 #include "chrome/grit/browser_resources.h"
 #include "components/favicon_base/favicon_url_parser.h"
@@ -42,6 +43,7 @@
 #include "mojo/public/cpp/bindings/receiver.h"
 #include "services/network/public/mojom/content_security_policy.mojom.h"
 #include "ui/resources/grit/ui_resources.h"
+#include "ui/resources/grit/ui_resources_map.h"
 #include "url/gurl.h"
 #include "url/origin.h"
 
@@ -217,35 +219,24 @@ DiscardsUI::DiscardsUI(content::WebUI* web_ui)
       "script-src chrome://resources chrome://test 'self';");
   source->DisableTrustedTypesCSP();
 
-  source->AddResourcePath("discards.js", IDR_DISCARDS_JS);
-
-  source->AddResourcePath("discards_main.js", IDR_DISCARDS_DISCARDS_MAIN_JS);
-
-  source->AddResourcePath("database_tab.js", IDR_DISCARDS_DATABASE_TAB_JS);
-  source->AddResourcePath("discards_tab.js", IDR_DISCARDS_DISCARDS_TAB_JS);
-  source->AddResourcePath("sorted_table_behavior.js",
-                          IDR_DISCARDS_SORTED_TABLE_BEHAVIOR_JS);
-  source->AddResourcePath("graph_tab.js", IDR_DISCARDS_GRAPH_TAB_JS);
-
-  source->AddResourcePath("mojo_api.js", IDR_DISCARDS_MOJO_API_JS);
-
-  // Full paths (relative to src) are important for Mojom generated files.
-  source->AddResourcePath(
-      "chrome/browser/ui/webui/discards/discards.mojom-lite.js",
-      IDR_DISCARDS_MOJOM_LITE_JS);
-  source->AddResourcePath(
-      "chrome/browser/resource_coordinator/lifecycle_unit_state.mojom-lite.js",
-      IDR_DISCARDS_LIFECYCLE_UNIT_STATE_MOJOM_LITE_JS);
-  source->AddResourcePath(
-      "chrome/browser/ui/webui/discards/site_data.mojom-lite.js",
-      IDR_DISCARDS_SITE_DATA_MOJOM_LITE_JS);
-
-  // Add the mojo base dependency for the WebUI Graph Dump.
-  source->AddResourcePath(
-      "mojo/public/mojom/base/process_id.mojom-lite.js",
-      IDR_DISCARDS_MOJO_PUBLIC_BASE_PROCESS_ID_MOJOM_LITE_JS);
-
-  source->SetDefaultResource(IDR_DISCARDS_HTML);
+  const GritResourceMap kResources[] = {
+      {"discards.js", IDR_DISCARDS_JS},
+      {"discards_main.js", IDR_DISCARDS_DISCARDS_MAIN_JS},
+      {"database_tab.js", IDR_DISCARDS_DATABASE_TAB_JS},
+      {"discards_tab.js", IDR_DISCARDS_DISCARDS_TAB_JS},
+      {"sorted_table_behavior.js", IDR_DISCARDS_SORTED_TABLE_BEHAVIOR_JS},
+      {"graph_tab.js", IDR_DISCARDS_GRAPH_TAB_JS},
+
+      // Full paths (relative to source) for mojom generated files.
+      {"chrome/browser/ui/webui/discards/discards.mojom-webui.js",
+       IDR_DISCARDS_MOJOM_WEBUI_JS},
+      {"chrome/browser/resource_coordinator/"
+       "lifecycle_unit_state.mojom-webui.js",
+       IDR_DISCARDS_LIFECYCLE_UNIT_STATE_MOJOM_WEBUI_JS},
+      {"chrome/browser/ui/webui/discards/site_data.mojom-webui.js",
+       IDR_DISCARDS_SITE_DATA_MOJOM_WEBUI_JS},
+  };
+  webui::SetupWebUIDataSource(source.get(), kResources, "", IDR_DISCARDS_HTML);
 
   Profile* profile = Profile::FromWebUI(web_ui);
   content::WebUIDataSource::Add(profile, source.release());

chrome/test/BUILD.gn

@@ -857,6 +857,7 @@ if (!is_android) {
     data_deps = [
       "//chrome:browser_tests_pak",
       "//chrome/browser/resources/media/mei_preload:component",
+      "//chrome/test/data:web_ui_test_mojom_js_module",
       "//chrome/test/data/webui:modulize",
       "//components/policy/proto",
       "//third_party/private_membership:private_membership_proto",
@@ -1723,6 +1724,7 @@ if (!is_android) {
       deps += [
         "//chrome/browser/resources:browser_tests_js",
         "//chrome/test/data/webui:browser_tests_js_mojo_lite_webui",
+        "//chrome/test/data/webui:browser_tests_js_mojo_webui",
         "//chrome/test/data/webui:browser_tests_js_webui",
       ]
       if (is_chromeos) {

chrome/test/base/js2gtest.gni

@@ -38,7 +38,8 @@ template("js2gtest") {
   assert(defined(invoker.test_type) &&
          (invoker.test_type == "webui" || invoker.test_type == "unit" ||
           invoker.test_type == "extension" ||
-          invoker.test_type == "mojo_lite_webui"))
+          invoker.test_type == "mojo_lite_webui" ||
+          invoker.test_type == "mojo_webui"))
   action_name = target_name + "_action"
   source_set_name = target_name
 

chrome/test/base/js2gtest.js

@@ -34,7 +34,8 @@ const [_,
  depsFile,
  // Path to C++ file generation is outputting to.
  outputFile,
- // Type of this test. One of 'extension', 'unit', 'webui', 'mojo_lite_webui'.
+ // Type of this test. One of 'extension', 'unit', 'webui', 'mojo_lite_webui',
+ // 'mojo_webui'.
  testType] = arguments;
 
 
@@ -49,7 +50,8 @@ if (!fullTestFilePath.startsWith(srcRootPath)) {
  */
 const testFile = fullTestFilePath.substr(srcRootPath.length);
 
-const TEST_TYPES = new Set(['extension', 'unit', 'webui', 'mojo_lite_webui']);
+const TEST_TYPES =
+    new Set(['extension', 'unit', 'webui', 'mojo_lite_webui', 'mojo_webui']);
 
 if (!TEST_TYPES.has(testType)) {
   print('Invalid test type: ' + testType);
@@ -137,8 +139,11 @@ ${argHint}
   //               ExtensionJSBrowserTest superclass.
   // 'unit' - unit_tests harness, js2unit rule, V8UnitTest superclass.
   // 'mojo_lite_webui' - browser_tests harness, js2webui rule,
-  //                     MojoWebUIBrowserTest with mojo_lite bindings.
-  // superclass. Uses Mojo to communicate test results.
+  //                     MojoWebUIBrowserTest with mojo_lite bindings. Uses Mojo
+  //                     to communicate test results.
+  // 'mojo_webui' - browser_tests harness, js2webui rule, MojoWebUIBrowserTest
+  //                with mojo bindings JS modules. Uses Mojo to communicate test
+  //                results.
   // 'webui' - browser_tests harness, js2webui rule, WebUIBrowserTest
   // superclass. Uses chrome.send to communicate test results.
   if (testType === 'extension') {
@@ -151,7 +156,7 @@ ${argHint}
     testing.Test.prototype.typedefCppFixture = 'V8UnitTest';
     testF = 'TEST_F';
     addSetPreloadInfo = false;
-  } else if (testType === 'mojo_lite_webui') {
+  } else if (testType === 'mojo_lite_webui' || testType == 'mojo_webui') {
     output('#include "chrome/test/base/mojo_web_ui_browser_test.h"');
     testing.Test.prototype.typedefCppFixture = 'MojoWebUIBrowserTest';
     testF = 'IN_PROC_BROWSER_TEST_F';
@@ -536,6 +541,9 @@ ${testF}(${testFixture}, ${testFunction}) {
   if (testType == 'mojo_lite_webui') {
     output(`
   set_use_mojo_lite_bindings();`);
+  } else if (testType == 'mojo_webui') {
+    output(`
+  set_use_mojo_modules();`);
   }
   if (webuiHost) {
     output(`

chrome/test/base/mojo_web_ui_browser_test.cc

@@ -125,6 +125,9 @@ void MojoWebUIBrowserTest::BrowsePreload(const GURL& browse_to) {
   BaseWebUIBrowserTest::BrowsePreload(browse_to);
   content::WebContents* web_contents =
       browser()->tab_strip_model()->GetActiveWebContents();
+  if (use_mojo_modules_)
+    return;
+
   if (use_mojo_lite_bindings_) {
     std::string test_mojo_lite_js =
         ui::ResourceBundle::GetSharedInstance().LoadDataResourceString(

chrome/test/base/mojo_web_ui_browser_test.h

@@ -18,6 +18,7 @@ class MojoWebUIBrowserTest : public BaseWebUIBrowserTest {
   MojoWebUIBrowserTest();
   ~MojoWebUIBrowserTest() override;
 
+  void set_use_mojo_modules() { use_mojo_modules_ = true; }
   void set_use_mojo_lite_bindings() { use_mojo_lite_bindings_ = true; }
 
   // WebUIBrowserTest:
@@ -29,6 +30,7 @@ class MojoWebUIBrowserTest : public BaseWebUIBrowserTest {
   class WebUITestContentBrowserClient;
   std::unique_ptr<WebUITestContentBrowserClient> test_content_browser_client_;
 
+  bool use_mojo_modules_ = false;
   bool use_mojo_lite_bindings_ = false;
 };
 

chrome/test/data/BUILD.gn

@@ -30,6 +30,13 @@ mojom("web_ui_test_bindings") {
     "webui/mojo/foobar.mojom",
     "webui/web_ui_test.mojom",
   ]
+  webui_module_path = "/"
+}
+
+copy("web_ui_test_mojom_js_module") {
+  sources = [ "$root_gen_dir/mojom-webui/chrome/test/data/webui/web_ui_test.mojom-webui.js" ]
+  outputs = [ "$target_gen_dir/webui/web_ui_test.mojom-webui.js" ]
+  deps = [ ":web_ui_test_bindings_webui_js" ]
 }
 
 group("closure_compile") {

chrome/test/data/webui/BUILD.gn

@@ -367,10 +367,6 @@ if (include_js_tests) {
 
     deps = [ "//chrome/browser/ui" ]
 
-    if (is_win || is_mac || is_linux || is_chromeos) {
-      sources += [ "discards/discards_browsertest.js" ]
-    }
-
     if (is_chromeos) {
       sources += [
         "chromeos/crostini_installer_browsertest.js",
@@ -391,6 +387,22 @@ if (include_js_tests) {
     defines = [ "HAS_OUT_OF_PROC_TEST_RUNNER" ]
   }
 
+  if (is_win || is_mac || is_linux || is_chromeos) {
+    # discards_browsertest.js is the only test suite here for now, and it's
+    # desktop-only. When more test suites are converted to type "mojo_webui",
+    # this target should be defined unconditionally and this outer condition
+    # used only to constrain the inclusion of discards_browsertest.js.
+    js2gtest("browser_tests_js_mojo_webui") {
+      test_type = "mojo_webui"
+      sources = [ "discards/discards_browsertest.js" ]
+      defines = [ "HAS_OUT_OF_PROC_TEST_RUNNER" ]
+      data = [ "mojo_webui_test_support.js" ]
+    }
+  } else {
+    group("browser_tests_js_mojo_webui") {
+    }
+  }
+
   js2gtest("interactive_ui_tests_js_mojo_lite_webui") {
     test_type = "mojo_lite_webui"
 

chrome/test/data/webui/discards/discards_browsertest.js

@@ -10,7 +10,7 @@ GEN('#include "content/public/test/browser_test.h"');
 var DiscardsTest = class extends testing.Test {
   /** @override */
   get browsePreload() {
-    return 'chrome://test?module=discards/discards_test.js';
+    return 'chrome://discards/test_loader.html?module=discards/discards_test.js';
   }
 
   get extraLibraries() {
@@ -19,11 +19,6 @@ var DiscardsTest = class extends testing.Test {
       '//chrome/test/data/webui/mocha_adapter.js',
     ];
   }
-
-  /** @override */
-  get webuiHost() {
-    return 'discards';
-  }
 };
 
 

chrome/test/data/webui/discards/discards_test.js

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// Need to import this manually as test_api.js assumes that Mojo JS bindings
-// already exist, for all tests of "mojo_lite_webui" type.
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+// We need to import this manually, because test_api.js assumes it will be
+// be loaded for any test of "mojo_webui" type.
+import '../mojo_webui_test_support.js';
 
 import {durationToString, maybeMakePlural} from 'chrome://discards/discards.js';
 import {compareTabDiscardsInfos} from 'chrome://discards/discards_tab.js';

chrome/test/data/webui/mojo_webui_test_support.js

+// 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.
+
+/**
+ * @fileoverview Helper module which must be loaded by tests of type
+ * "mojo_webui" to have proper support in test_api.js.
+ */
+
+import {TestRunner} from './web_ui_test.mojom-webui.js';
+
+/**
+ * Reports a test result using the TestRunner Mojo interface.
+ * @param {string=} opt_result
+ */
+window.reportMojoWebUITestResult = function(opt_result) {
+  const runner = TestRunner.getRemote();
+  runner.testComplete(opt_result);
+};

chrome/test/data/webui/test_api.js

@@ -594,7 +594,17 @@ function testDone(result) {
       result = testResult();
     }
 
-    if (hasWindow && window.webUiTest) {
+    const [success, errorMessage] = /** @type {!Array} */ (result);
+    if (hasWindow && window.reportMojoWebUITestResult) {
+      // For "mojo_webui" test types, reportMojoWebUITestResult should already
+      // be defined globally, because such tests must manually import the
+      // mojo_webui_test_support.js module which defines it.
+      if (success) {
+        window.reportMojoWebUITestResult();
+      } else {
+        window.reportMojoWebUITestResult(errorMessage);
+      }
+    } else if (hasWindow && window.webUiTest) {
       let testRunner;
       if (webUiTest.mojom.TestRunnerPtr) {
         // For mojo WebUI tests.
@@ -615,17 +625,17 @@ function testDone(result) {
         assertNotReached(
             'Mojo bindings found, but no valid test interface loaded');
       }
-      if (result[0]) {
+      if (success) {
         testRunner.testComplete();
       } else {
-        testRunner.testComplete(result[1]);
+        testRunner.testComplete(errorMessage);
       }
     } else if (chrome.send) {
       // For WebUI and v8 unit tests.
       chrome.send('testResult', result);
     } else if (window.domAutomationController.send) {
       // For extension tests.
-      const valueResult = {'result': result[0], message: result[1]};
+      const valueResult = {'result': success, message: errorMessage};
       window.domAutomationController.send(JSON.stringify(valueResult));
     } else {
       assertNotReached('No test framework available');

mojo/public/js/mojo_bindings_resources.grd

@@ -76,18 +76,26 @@
           resource_path="mojo/mojo/public/mojom/base/text_direction.mojom-lite.js"
           type="BINDATA" />
       <if expr="is_win or is_macosx or is_linux or is_android">
+        <include name="IDR_MOJO_PROCESS_ID_MOJOM_WEBUI_JS"
+            file="${root_gen_dir}/mojom-webui/mojo/public/mojom/base/process_id.mojom-webui.js"
+            use_base_dir="false"
+            resource_path="mojo/mojo/public/mojom/base/process_id.mojom-webui.js"
+            type="BINDATA" />
         <include name="IDR_MOJO_TIME_MOJOM_HTML"
             file="${root_gen_dir}/mojo/public/mojom/base/time.mojom.html"
             use_base_dir="false"
             resource_path="mojo/mojo/public/mojom/base/time.mojom.html"
-            type="BINDATA"
-            compress="gzip" />
+          type="BINDATA" />
         <include name="IDR_MOJO_TIME_MOJOM_LITE_JS"
             file="${root_gen_dir}/mojo/public/mojom/base/time.mojom-lite.js"
             resource_path="mojo/mojo/public/mojom/base/time.mojom-lite.js"
             use_base_dir="false"
-            type="BINDATA"
-            compress="gzip" />
+            type="BINDATA" />
+        <include name="IDR_MOJO_TIME_MOJOM_WEBUI_JS"
+            file="${root_gen_dir}/mojom-webui/mojo/public/mojom/base/time.mojom-webui.js"
+            use_base_dir="false"
+            resource_path="mojo/mojo/public/mojom/base/time.mojom-webui.js"
+            type="BINDATA" />
       </if>
     </includes>
   </release>

mojo/public/mojom/base/BUILD.gn

@@ -43,6 +43,8 @@ mojom_component("base") {
     enabled_features += [ "file_path_is_string" ]
   }
 
+  webui_module_path = "chrome://resources/mojo/mojo/public/mojom/base"
+
   output_prefix = "mojo_base_mojom"
   macro_prefix = "MOJO_BASE_MOJOM"
 

mojo/public/tools/bindings/generators/mojom_js_generator.py

@@ -1003,9 +1003,9 @@ class Generator(generator.Generator):
           # resource, or we're a shared resource importing another shared
           # resource. In both cases, we assume a relative import path will
           # suffice.
-          import_path = os.path.relpath(
-              import_path.lstrip(_SHARED_MODULE_PREFIX),
-              this_module_path.lstrip(_SHARED_MODULE_PREFIX))
+          import_path = urllib_request.pathname2url(
+              os.path.relpath(import_path.lstrip(_SHARED_MODULE_PREFIX),
+                              this_module_path.lstrip(_SHARED_MODULE_PREFIX)))
           if (not import_path.startswith('.')
               and not import_path.startswith('/')):
             import_path = './' + import_path