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

@@ -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");

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,

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;
       }

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".
           //