From 72aedb1d83c9a6145ba72578f3f1af571b648927 Mon Sep 17 00:00:00 2001
From: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Tue, 22 Jul 2025 15:35:26 +0000
Subject: [PATCH] Bug 1973246 - [devtools] Expose browserLoaderRequire in
 Debugger panel global.  a=RyanVM.

Original Revision: https://phabricator.services.mozilla.com/D254813

Differential Revision: https://phabricator.services.mozilla.com/D257646
---
 devtools/client/debugger/index.js              |  3 +++
 .../mochitest/browser_dbg-custom-formatters.js |  9 +++++++--
 .../examples/doc_dbg-custom-formatters.html    | 18 ++++++++++++++++++
 .../components/reps/reps/custom-formatter.mjs  |  3 ++-
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/devtools/client/debugger/index.js b/devtools/client/debugger/index.js
index 18198bc1fce7..e618dcd1bb43 100644
--- a/devtools/client/debugger/index.js
+++ b/devtools/client/debugger/index.js
@@ -16,6 +16,9 @@ try {
   globalThis.Debugger = globalThis.browserLoader.require(
     "devtools/client/debugger/src/main"
   );
+  // Expose `require` for the CustomFormatter ESM in order to allow it to load
+  // ObjectInspector, which are still CommonJS modules, via the same BrowserLoader instance.
+  globalThis.browserLoaderRequire = globalThis.browserLoader.require;
 } catch (e) {
   dump("Exception happened while loading the debugger:\n");
   dump(e + "\n");
diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-custom-formatters.js b/devtools/client/debugger/test/mochitest/browser_dbg-custom-formatters.js
index 4951ae6cf060..a3bece496450 100644
--- a/devtools/client/debugger/test/mochitest/browser_dbg-custom-formatters.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-custom-formatters.js
@@ -76,7 +76,7 @@ add_task(async function () {
   info(
     `Check that '${VARIABLE_NAME}' is in the scopes panel and custom formatted`
   );
-  const index = 4;
+  const index = 5;
   is(
     getScopeNodeLabel(dbg, index),
     VARIABLE_NAME,
@@ -119,7 +119,12 @@ add_task(async function () {
   invokeInTab(TEST_FUNCTION_NAME);
   await waitForPaused(dbg);
 
-  await assertPreviewTextValue(dbg, 26, 16, {
+  await assertPreviewTextValue(dbg, 43, 16, {
+    expression: "abc",
+    result: "object tag: null",
+  });
+
+  await assertPreviewTextValue(dbg, 44, 16, {
     expression: VARIABLE_NAME,
     result: "CUSTOM",
     doNotClose: true,
diff --git a/devtools/client/debugger/test/mochitest/examples/doc_dbg-custom-formatters.html b/devtools/client/debugger/test/mochitest/examples/doc_dbg-custom-formatters.html
index d7ddb97d4e3b..d432c4d50e14 100644
--- a/devtools/client/debugger/test/mochitest/examples/doc_dbg-custom-formatters.html
+++ b/devtools/client/debugger/test/mochitest/examples/doc_dbg-custom-formatters.html
@@ -20,9 +20,27 @@
           },
           hasBody: obj => true,
           body: obj => ["span", {"style": "font-family: serif; font-size: 2rem;"}, obj.customFormatHeaderAndBody]
+        }, {
+          header: (obj, config) => {
+            if (obj.hasOwnProperty("customFormatObjectAndConfig")) {
+              return [
+                "span",
+                {},
+                `object tag: `,
+                [
+                  "object",
+                  {
+                    object: null,
+                  }
+                ],
+              ];
+            }
+            return null;
+          },
         }];
 
       function pauseWithCustomFormattedObject() {
+        const abc = {customFormatObjectAndConfig: true};
         const xyz = {customFormatHeaderAndBody: "customFormattedBody"};
         debugger;
       }
diff --git a/devtools/client/shared/components/reps/reps/custom-formatter.mjs b/devtools/client/shared/components/reps/reps/custom-formatter.mjs
index 9379d6404936..ab607bf667f5 100644
--- a/devtools/client/shared/components/reps/reps/custom-formatter.mjs
+++ b/devtools/client/shared/components/reps/reps/custom-formatter.mjs
@@ -202,7 +202,8 @@ function renderJsonMl(jsonMl, props, index = 0) {
             front: child && !!child.typeName ? child : null,
           });
         } else {
-          // `browserLoaderRequire` is exposed by WebConsoleUI. It is the BrowserLoader's require.
+          // `browserLoaderRequire` is the BrowserLoader's require.
+          // It is exposed by WebConsoleUI and debugger index.js.
           // This helps load ObjectInspector as well as Reps in the same global as this module,
           // which is loaded from the BrowserLoader via ChromeUtils.importESModule + global: "current".
           //