[NTP] Import modern searchbox mojo module (#31758)

.storybook/webpack.config.ts

@@ -65,6 +65,17 @@ const prefixReplacer = (prefix, replacements) => {
   })
 }
 
+/**
+ * Adds the 'chrome:' scheme to protocol-relative resource URLs.
+ */
+const protocolRelativeReplacer = () => {
+  return new webpack.NormalModuleReplacementPlugin(
+    /^\/\/resources\//,
+    (resource) => {
+      resource.request = `chrome:${resource.request}`
+    })
+}
+
 /**
  * Attempts to use mock implementations of a provided module name
  * the mocked implementation should live in a `__mocks__` folder adjacent to the
@@ -155,11 +166,18 @@ export default async ({ config, mode }) => {
   config.plugins.push(
     provideNodeGlobals,
     useMockedModules(['bridge', 'brave_rewards_api_proxy']),
+    protocolRelativeReplacer(),
     ...Object.keys(pathMap)
       .filter((prefix) => prefix.startsWith('chrome://'))
       .map((prefix) => prefixReplacer(prefix, pathMap[prefix]))
   )
 
+  // By default, Webpack will use the "web" externals preset, which will include
+  // an externals plugin that treats module specifiers beginning with `//` as an
+  // external module. Disable the preset so that these modules can be bundled
+  // for storybook.
+  config.externalsPresets = { web: false }
+
   // When we aren't running on CI we separate the build and Typecheck phases.
   // This results in significantly faster builds (up to 7x faster). On CI we
   // join the two stages together so errors break the build.

browser/resources/brave_new_tab_page_refresh/state/search_box_proxy.ts

@@ -3,7 +3,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import * as mojom from 'gen/components/omnibox/browser/searchbox.mojom.m'
+import * as mojom from 'chrome://resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js'
 
 import { addCallbackListeners } from '../lib/callback_listeners'
 

browser/resources/brave_new_tab_page_refresh/state/search_state.ts

@@ -3,7 +3,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import * as mojom from 'gen/components/omnibox/browser/searchbox.mojom.m'
+import * as mojom from 'chrome://resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js'
 
 export const braveSearchHost = 'search.brave.com'
 

components/brave_new_tab_ui/BUILD.gn

@@ -8,7 +8,6 @@ import("//brave/components/common/typescript.gni")
 import("//mojo/public/tools/bindings/mojom.gni")
 
 transpile_web_ui("brave_new_tab_ui") {
-  output_module = false
   entry_points = [ [
         "brave_new_tab",
         rebase_path("brave_new_tab.tsx"),

components/brave_new_tab_ui/brave_new_tab.html

@@ -12,7 +12,7 @@
 <link rel="stylesheet" href="chrome://resources/brave/css/nala.css">
 <script src="chrome://resources/js/load_time_data_deprecated.js"></script>
 <script src="/strings.js"></script>
-<script src="/brave_new_tab.bundle.js"></script>
+<script src="/brave_new_tab.bundle.js" type="module"></script>
 <style>
   body {
     background: $i18n{backgroundColor};

components/brave_new_tab_ui/components/search/SearchContext.tsx

@@ -4,7 +4,7 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import usePromise from '$web-common/usePromise';
-import { AutocompleteResult, OmniboxPopupSelection, PageHandler, PageHandlerRemote, PageInterface, PageReceiver } from 'gen/components/omnibox/browser/searchbox.mojom.m';
+import { AutocompleteResult, OmniboxPopupSelection, PageHandler, PageHandlerRemote, PageInterface, PageReceiver } from 'chrome://resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js';
 import { stringToMojoString16 } from 'chrome://resources/js/mojo_type_util.js';
 import * as React from 'react';
 import getNTPBrowserAPI, { SearchEngineInfo } from '../../api/background';

components/brave_new_tab_ui/components/search/SearchResult.tsx

@@ -7,7 +7,7 @@ import { getLocale } from '$web-common/locale';
 import Icon from '@brave/leo/react/icon';
 import { color, font, gradient, icon, radius, spacing } from '@brave/leo/tokens/css/variables';
 import { mojoString16ToString } from 'chrome://resources/js/mojo_type_util.js';
-import { AutocompleteMatch } from 'gen/components/omnibox/browser/searchbox.mojom.m';
+import { AutocompleteMatch } from 'chrome://resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js';
 import * as React from 'react';
 import styled from 'styled-components';
 import { MaybeImage } from './SearchEngineIcon';

components/brave_new_tab_ui/components/search/SearchResults.tsx

@@ -3,7 +3,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 import { color, radius, spacing } from '@brave/leo/tokens/css/variables'
-import { AutocompleteMatch, AutocompleteResult, OmniboxPopupSelection } from 'gen/components/omnibox/browser/searchbox.mojom.m';
+import { AutocompleteMatch, AutocompleteResult, OmniboxPopupSelection } from 'chrome://resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js'
 import * as React from 'react'
 import styled from 'styled-components'
 import SearchResult from './SearchResult'

components/webpack/path-map.js

@@ -24,6 +24,9 @@ module.exports = function (genPath) {
     'chrome://resources/brave': path.join(
       genPath,
       'brave/ui/webui/resources/tsc'),
+    'chrome://resources/mojo/mojo/public': path.resolve(
+      genPath,
+      'mojo/public'),
     'chrome://resources': path.join(
       genPath, 'ui/webui/resources/tsc'),
     // We import brave-ui direct from source and not from package repo, so we need