From 90c8fd67d08ccb4450cca4bed445a080a50682ed Mon Sep 17 00:00:00 2001
From: Kevin Smith <zenparsing@gmail.com>
Date: Wed, 15 Oct 2025 07:40:51 -0400
Subject: [PATCH] [NTP] Import modern searchbox mojo module (#31758)

---
 .storybook/webpack.config.ts                   | 18 ++++++++++++++++++
 .../state/search_box_proxy.ts                  |  2 +-
 .../state/search_state.ts                      |  2 +-
 components/brave_new_tab_ui/BUILD.gn           |  1 -
 components/brave_new_tab_ui/brave_new_tab.html |  2 +-
 .../components/search/SearchContext.tsx        |  2 +-
 .../components/search/SearchResult.tsx         |  2 +-
 .../components/search/SearchResults.tsx        |  2 +-
 components/webpack/path-map.js                 |  3 +++
 9 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts
index 75f5734b588..85287fd01ac 100644
--- a/.storybook/webpack.config.ts
+++ b/.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.
diff --git a/browser/resources/brave_new_tab_page_refresh/state/search_box_proxy.ts b/browser/resources/brave_new_tab_page_refresh/state/search_box_proxy.ts
index 54f43c8e0c3..cd436aaf232 100644
--- a/browser/resources/brave_new_tab_page_refresh/state/search_box_proxy.ts
+++ b/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'
 
diff --git a/browser/resources/brave_new_tab_page_refresh/state/search_state.ts b/browser/resources/brave_new_tab_page_refresh/state/search_state.ts
index f6790a8ff4a..af37daf6153 100644
--- a/browser/resources/brave_new_tab_page_refresh/state/search_state.ts
+++ b/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'
 
diff --git a/components/brave_new_tab_ui/BUILD.gn b/components/brave_new_tab_ui/BUILD.gn
index c09ee68a433..f3e5a59cf29 100644
--- a/components/brave_new_tab_ui/BUILD.gn
+++ b/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"),
diff --git a/components/brave_new_tab_ui/brave_new_tab.html b/components/brave_new_tab_ui/brave_new_tab.html
index 67c4df98b1b..10db31f9a48 100644
--- a/components/brave_new_tab_ui/brave_new_tab.html
+++ b/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};
diff --git a/components/brave_new_tab_ui/components/search/SearchContext.tsx b/components/brave_new_tab_ui/components/search/SearchContext.tsx
index 94467d309a4..ee335e6adc4 100644
--- a/components/brave_new_tab_ui/components/search/SearchContext.tsx
+++ b/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';
diff --git a/components/brave_new_tab_ui/components/search/SearchResult.tsx b/components/brave_new_tab_ui/components/search/SearchResult.tsx
index 24864b1a00f..2db97b94cc8 100644
--- a/components/brave_new_tab_ui/components/search/SearchResult.tsx
+++ b/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';
diff --git a/components/brave_new_tab_ui/components/search/SearchResults.tsx b/components/brave_new_tab_ui/components/search/SearchResults.tsx
index 5f3cb18e314..85fbd16d4a5 100644
--- a/components/brave_new_tab_ui/components/search/SearchResults.tsx
+++ b/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'
diff --git a/components/webpack/path-map.js b/components/webpack/path-map.js
index 4c9f234ba51..8aaffae165f 100644
--- a/components/webpack/path-map.js
+++ b/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