Migrate omnibox WebUI to mojom JS modules

Bug: 1004256
Change-Id: I69c86f126dfe7c24e326f23848b26de71de7bf4d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2459570Reviewed-by: manuk hovanesian <manukh@chromium.org>
Reviewed-by: calamity <calamity@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Auto-Submit: Ken Rockot <rockot@google.com>
Cr-Commit-Position: refs/heads/master@{#818345}

chrome/browser/resources/omnibox/BUILD.gn

@@ -2,11 +2,13 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+import("//third_party/closure_compiler/closure_args.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/grit_rule.gni")
 
 js_type_check("closure_compile") {
   uses_js_modules = true
+  closure_flags = mojom_js_args
   deps = [
     ":omnibox",
     ":omnibox_element",
@@ -20,7 +22,7 @@ js_library("omnibox") {
   deps = [
     ":omnibox_input",
     ":omnibox_output",
-    "//chrome/browser/ui/webui/omnibox:mojo_bindings_js_library_for_compile",
+    "//chrome/browser/ui/webui/omnibox:mojo_bindings_webui_js",
     "//ui/webui/resources/js:cr.m",
     "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js:util.m",
@@ -39,14 +41,14 @@ js_library("omnibox_output") {
   deps = [
     ":omnibox_element",
     ":omnibox_input",
-    "//chrome/browser/ui/webui/omnibox:mojo_bindings_js_library_for_compile",
+    "//chrome/browser/ui/webui/omnibox:mojo_bindings_webui_js",
   ]
   externs_list = [ "$externs_path/pending.js" ]
 }
 
 js_library("omnibox_popup") {
   deps = [
-    "//chrome/browser/ui/webui/omnibox:mojo_bindings_js_library_for_compile",
+    "//chrome/browser/ui/webui/omnibox:mojo_bindings_webui_js",
     "//ui/webui/resources/cr_components/omnibox:cr_autocomplete_match_list",
   ]
 }
@@ -63,5 +65,5 @@ grit("resources") {
     "-E",
     "root_gen_dir=" + rebase_path(root_gen_dir, root_build_dir),
   ]
-  deps = [ "//chrome/browser/ui/webui/omnibox:mojo_bindings_js" ]
+  deps = [ "//chrome/browser/ui/webui/omnibox:mojo_bindings_webui_js" ]
 }

chrome/browser/resources/omnibox/omnibox.js

@@ -2,10 +2,9 @@
 // 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/browser/ui/webui/omnibox/omnibox.mojom-lite.js';
 import './strings.m.js';
 
+import {OmniboxPageCallbackRouter, OmniboxPageHandler, OmniboxPageHandlerRemote, OmniboxResponse} from '/chrome/browser/ui/webui/omnibox/omnibox.mojom-webui.js';
 import {sendWithPromise} from 'chrome://resources/js/cr.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {$} from 'chrome://resources/js/util.m.js';
@@ -31,7 +30,7 @@ import {OmniboxOutput} from './omnibox_output.js';
 /**
  * @typedef {{
  *   inputText: string,
- *   callback: function(!mojom.OmniboxResponse):Promise,
+ *   callback: function(!OmniboxResponse):Promise,
  *   display: boolean,
  * }}
  */
@@ -49,7 +48,7 @@ let BatchSpecifier;
  * @typedef {{
  *   queryInputs: QueryInputs,
  *   displayInputs: DisplayInputs,
- *   responsesHistory: !Array<!Array<!mojom.OmniboxResponse>>,
+ *   responsesHistory: !Array<!Array<!OmniboxResponse>>,
  * }}
  */
 let OmniboxExport;
@@ -66,8 +65,8 @@ let exportDelegate;
 class BrowserProxy {
   /** @param {!OmniboxOutput} omniboxOutput */
   constructor(omniboxOutput) {
-    /** @private {!mojom.OmniboxPageCallbackRouter} */
-    this.callbackRouter_ = new mojom.OmniboxPageCallbackRouter;
+    /** @private {!OmniboxPageCallbackRouter} */
+    this.callbackRouter_ = new OmniboxPageCallbackRouter;
 
     this.callbackRouter_.handleNewAutocompleteResponse.addListener(
         this.handleNewAutocompleteResponse.bind(this));
@@ -76,8 +75,8 @@ class BrowserProxy {
     this.callbackRouter_.handleAnswerImageData.addListener(
         omniboxOutput.updateAnswerImage.bind(omniboxOutput));
 
-    /** @private {!mojom.OmniboxPageHandlerRemote} */
-    this.handler_ = mojom.OmniboxPageHandler.getRemote();
+    /** @private {!OmniboxPageHandlerRemote} */
+    this.handler_ = OmniboxPageHandler.getRemote();
     this.handler_.setClientPage(
         this.callbackRouter_.$.bindNewPipeAndPassRemote());
 
@@ -86,7 +85,7 @@ class BrowserProxy {
   }
 
   /**
-   * @param {!mojom.OmniboxResponse} response
+   * @param {!OmniboxResponse} response
    * @param {boolean} isPageController
    */
   handleNewAutocompleteResponse(response, isPageController) {

chrome/browser/resources/omnibox/omnibox_output.js

@@ -2,11 +2,10 @@
 // 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/browser/ui/webui/omnibox/omnibox.mojom-lite.js';
+import {ACMatchClassification, AutocompleteMatch, OmniboxResponse} from '/chrome/browser/ui/webui/omnibox/omnibox.mojom-webui.js';
 
 import {OmniboxElement} from './omnibox_element.js';
-import {OmniboxInput, DisplayInputs} from './omnibox_input.js';
+import {DisplayInputs, OmniboxInput} from './omnibox_input.js';
 
 /**
  * @typedef  {{
@@ -33,7 +32,7 @@ export class OmniboxOutput extends OmniboxElement {
 
     /** @private {number} */
     this.selectedResponseIndex_ = 0;
-    /** @type {!Array<!Array<!mojom.OmniboxResponse>>} */
+    /** @type {!Array<!Array<!OmniboxResponse>>} */
     this.responsesHistory = [];
     /** @private {!Array<!OutputResultsGroup>} */
     this.resultsGroups_ = [];
@@ -55,7 +54,7 @@ export class OmniboxOutput extends OmniboxElement {
     this.updateFilterHighlights_();
   }
 
-  /** @param {!Array<!Array<!mojom.OmniboxResponse>>} responsesHistory */
+  /** @param {!Array<!Array<!OmniboxResponse>>} responsesHistory */
   setResponsesHistory(responsesHistory) {
     this.responsesHistory = responsesHistory;
     this.dispatchEvent(new CustomEvent(
@@ -79,7 +78,7 @@ export class OmniboxOutput extends OmniboxElement {
         'responses-count-changed', {detail: this.responsesHistory.length}));
   }
 
-  /** @param {!mojom.OmniboxResponse} response */
+  /** @param {!OmniboxResponse} response */
   addAutocompleteResponse(response) {
     const lastIndex = this.responsesHistory.length - 1;
     this.responsesHistory[lastIndex].push(response);
@@ -99,7 +98,7 @@ export class OmniboxOutput extends OmniboxElement {
 
   /**
    * Creates and adds a result group to the UI.
-   * @private @param {!mojom.OmniboxResponse} response
+   * @private @param {!OmniboxResponse} response
    */
   createResultsGroup_(response) {
     const resultsGroup = OutputResultsGroup.create(response);
@@ -187,7 +186,7 @@ export class OmniboxOutput extends OmniboxElement {
  */
 class OutputResultsGroup extends OmniboxElement {
   /**
-   * @param {!mojom.OmniboxResponse} resultsGroup
+   * @param {!OmniboxResponse} resultsGroup
    * @return {!OutputResultsGroup}
    */
   static create(resultsGroup) {
@@ -200,7 +199,7 @@ class OutputResultsGroup extends OmniboxElement {
     super('output-results-group-template');
   }
 
-  /** @param {!mojom.OmniboxResponse} resultsGroup */
+  /** @param {!OmniboxResponse} resultsGroup */
   setResultsGroup(resultsGroup) {
     /** @private {ResultsDetails} */
     this.details_ = {
@@ -357,7 +356,7 @@ class OutputResultsDetails extends OmniboxElement {
  */
 class OutputResultsTable extends HTMLTableSectionElement {
   /**
-   * @param {!Array<!mojom.AutocompleteMatch>} results
+   * @param {!Array<!AutocompleteMatch>} results
    * @return {!OutputResultsTable}
    */
   static create(results) {
@@ -373,7 +372,7 @@ class OutputResultsTable extends HTMLTableSectionElement {
     this.autocompleteMatches = [];
   }
 
-  /** @param {!Array<!mojom.AutocompleteMatch>} results */
+  /** @param {!Array<!AutocompleteMatch>} results */
   set results(results) {
     this.autocompleteMatches.forEach(match => match.remove());
     this.autocompleteMatches = results.map(OutputMatch.create);
@@ -404,7 +403,7 @@ class OutputMatch extends HTMLTableRowElement {
   }
 
   /**
-   * @param {!mojom.AutocompleteMatch} match
+   * @param {!AutocompleteMatch} match
    * @return {!OutputMatch}
    */
   static create(match) {
@@ -414,7 +413,7 @@ class OutputMatch extends HTMLTableRowElement {
     return outputMatch;
   }
 
-  /** @param {!mojom.AutocompleteMatch} match */
+  /** @param {!AutocompleteMatch} match */
   set match(match) {
     /** @type {!Object<string, !OutputProperty>} */
     this.properties = {};
@@ -703,11 +702,11 @@ class OutputAnswerProperty extends FlexWrappingOutputProperty {
         this.values_;
     OutputAnswerProperty.renderClassifiedText_(
         this.contents_, /** @type {string} */ (contents),
-        /** @type {!Array<!mojom.ACMatchClassification>} */
+        /** @type {!Array<!ACMatchClassification>} */
         (contentsClassification));
     OutputAnswerProperty.renderClassifiedText_(
         this.description_, /** @type {string} */ (description),
-        /** @type {!Array<!mojom.ACMatchClassification>} */
+        /** @type {!Array<!ACMatchClassification>} */
         (descriptionClassification));
     this.answer_.textContent = answer;
     this.imageUrl_.textContent = image;
@@ -723,7 +722,7 @@ class OutputAnswerProperty extends FlexWrappingOutputProperty {
    * @private
    * @param {!Element} container
    * @param {string} string
-   * @param {!Array<!mojom.ACMatchClassification>} classes
+   * @param {!Array<!ACMatchClassification>} classes
    */
   static renderClassifiedText_(container, string, classes) {
     clearChildren(container);
@@ -736,7 +735,7 @@ class OutputAnswerProperty extends FlexWrappingOutputProperty {
 
   /**
    * @param {string} string
-   * @param {!Array<!mojom.ACMatchClassification>} classes
+   * @param {!Array<!ACMatchClassification>} classes
    * @return {!Array<{string: string, style: number}>}
    */
   static classify(string, classes) {

chrome/browser/resources/omnibox/omnibox_popup.js

@@ -2,9 +2,7 @@
 // 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/browser/ui/webui/omnibox/omnibox.mojom-lite.js';
-
+import {OmniboxPageCallbackRouter, OmniboxPageHandler, OmniboxPageHandlerRemote} from '/chrome/browser/ui/webui/omnibox/omnibox.mojom-webui.js';
 import {AutocompleteMatchListElement} from 'chrome://resources/cr_components/omnibox/cr_autocomplete_match_list.js';
 
 /**
@@ -14,8 +12,8 @@ import {AutocompleteMatchListElement} from 'chrome://resources/cr_components/omn
  */
 
 document.addEventListener('DOMContentLoaded', () => {
-  /** @private {!mojom.OmniboxPageCallbackRouter} */
-  const callbackRouter = new mojom.OmniboxPageCallbackRouter;
+  /** @private {!OmniboxPageCallbackRouter} */
+  const callbackRouter = new OmniboxPageCallbackRouter;
 
   // Basically a Hello World proof of concept that writes the Autocomplete
   // responses to the whole document.
@@ -31,7 +29,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
       });
 
-  /** @private {!mojom.OmniboxPageHandlerRemote} */
-  const handler = mojom.OmniboxPageHandler.getRemote();
+  /** @private {!OmniboxPageHandlerRemote} */
+  const handler = OmniboxPageHandler.getRemote();
   handler.setClientPage(callbackRouter.$.bindNewPipeAndPassRemote());
 });

chrome/browser/resources/omnibox/resources.grd

@@ -46,7 +46,7 @@
                file="omnibox.js"
                type="BINDATA" />
       <include name="IDR_OMNIBOX_MOJO_JS"
-               file="${root_gen_dir}\chrome\browser\ui\webui\omnibox\omnibox.mojom-lite.js"
+               file="${root_gen_dir}\mojom-webui\chrome\browser\ui\webui\omnibox\omnibox.mojom-webui.js"
                use_base_dir="false"
                type="BINDATA" />
     </includes>

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

@@ -6,4 +6,5 @@ import("//mojo/public/tools/bindings/mojom.gni")
 
 mojom("mojo_bindings") {
   sources = [ "omnibox.mojom" ]
+  webui_module_path = "/chrome/browser/ui/webui/omnibox"
 }

chrome/browser/ui/webui/omnibox/omnibox_ui.cc

@@ -49,7 +49,7 @@ OmniboxUI::OmniboxUI(content::WebUI* web_ui)
       {"omnibox_input.js", IDR_OMNIBOX_INPUT_JS},
       {"omnibox_output.js", IDR_OMNIBOX_OUTPUT_JS},
       {"omnibox.js", IDR_OMNIBOX_JS},
-      {"chrome/browser/ui/webui/omnibox/omnibox.mojom-lite.js",
+      {"chrome/browser/ui/webui/omnibox/omnibox.mojom-webui.js",
        IDR_OMNIBOX_MOJO_JS},
   };
   webui::AddResourcePathsBulk(source, kResources);