[Inspector] Get firefox to work

1 files changed, 44 insertions, 3 deletions

diff --git a/packages/bun-inspector-frontend/build.ts b/packages/bun-inspector-frontend/build.ts
index 4b1eb50e1..b45a3549f 100644
--- a/packages/bun-inspector-frontend/build.ts
+++ b/packages/bun-inspector-frontend/build.ts
@@ -17,7 +17,12 @@ try {
     .on("script", {
       element(element) {
         const src = element.getAttribute("src");
-        if (src && !src?.includes("External") && !src?.includes("WebKitAdditions")) {
+        if (
+          src &&
+          !src?.includes("External") &&
+          !src?.includes("WebKitAdditions") &&
+          !src.includes("DOMUtilities.js")
+        ) {
           if (scriptsToBundle.length === 0) {
             element.replace("<script>var WI = {};\n</script>", { html: true });
           } else {
@@ -35,7 +40,40 @@ try {
     })
     .on("head", {
       element(element) {
-        element.prepend(` <base href="/" /> `, { html: true });
+        element.prepend(
+          `
+          <script type="text/javascript">
+        if (!Element.prototype.scrollIntoViewIfNeeded) {
+          Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
+            centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
+        
+            var parent = this.parentNode,
+                parentComputedStyle = window.getComputedStyle(parent, null),
+                parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
+                parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
+                overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
+                overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
+                overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
+                overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
+                alignWithTop = overTop && !overBottom;
+        
+            if ((overTop || overBottom) && centerIfNeeded) {
+              parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
+            }
+        
+            if ((overLeft || overRight) && centerIfNeeded) {
+              parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
+            }
+        
+            if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
+              this.scrollIntoView(alignWithTop);
+            }
+          };
+        }
+        </script>
+        <base href="/" /> `,
+          { html: true },
+        );
 
         element.append(
           `
@@ -46,7 +84,7 @@ try {
         </style>
         <script src="${jsReplacementId}"></script>
 
-        <script>
+        <script type="text/javascript">
             WI.sharedApp = new WI.AppController;
             WI.sharedApp.initialize();
         </script>`,
@@ -71,6 +109,9 @@ try {
   const javascript = scriptsToBundle.map(a => `import '${join(basePath, a)}';`).join("\n") + "\n";
   // const css = stylesToBundle.map(a => `@import "${join(basePath, a)}";`).join("\n") + "\n";
   await Bun.write(join(import.meta.dir, "out/manifest.js"), javascript);
+  mkdirSync("out/WebKitAdditions/WebInspectorUI/", { recursive: true });
+  await Bun.write(join(import.meta.dir, "out/WebKitAdditions/WebInspectorUI/WebInspectorUIAdditions.js"), "");
+  await Bun.write(join(import.meta.dir, "out/WebKitAdditions/WebInspectorUI/WebInspectorUIAdditions.css"), "");
   // await Bun.write(join(import.meta.dir, "manifest.css"), css);
   const jsBundle = await Bun.build({
     entrypoints: [join(import.meta.dir, "out/manifest.js")],