fix: ensure devtool is reset correctly when closed

packages/backend/src/pixi.ts

@@ -39,6 +39,7 @@ class PixiWrapper {
     | 'setBridge'
     | 'chromeProxy'
     | 'setChromeProxy'
+    | 'reset'
     | keyof TextureState
     | keyof RenderingState
   > = {
@@ -110,6 +111,7 @@ class PixiWrapper {
   private _updateThrottle = new Throttle();
 
   private _initialized = false;
+  private _originalRenderFn: Renderer['render'] | undefined;
 
   /**
    * Searches for a property in the window and its frames.
@@ -276,6 +278,8 @@ class PixiWrapper {
     const that = this;
     if (this.renderer && !this.renderer.__devtoolInjected) {
       this.renderer.__devtoolInjected = true;
+      // store the original render method
+      this._originalRenderFn = this.renderer.render;
       this.renderer.render = new Proxy(this.renderer.render, {
         apply(target, thisArg, ...args) {
           that.update();
@@ -288,6 +292,10 @@ class PixiWrapper {
   }
 
   public reset() {
+    this.renderer && this._originalRenderFn && (this.renderer.render = this._originalRenderFn);
+    this.renderer && (this.renderer.__devtoolInjected = false);
+    this.rendering.reset();
+    this._resetState();
     this._devtools = undefined;
     this._app = undefined;
     this._stage = undefined;

packages/backend/src/rendering/instructions.ts

@@ -35,7 +35,7 @@ export function getBatchInstruction(instruction: Batch, textureCache: TextureCac
     if (tex) {
       textures.push(tex);
     } else {
-      console.log('Texture not found', texture);
+      // console.log('Texture not found', texture);
     }
   });
 

packages/backend/src/rendering/rendering.ts

@@ -27,6 +27,7 @@ import type {
   TextureSource,
   TilingSprite,
   WebGLRenderer,
+  BatcherPipe,
   WebGPURenderer,
 } from 'pixi.js';
 import type { PixiDevtools } from '../pixi';
@@ -55,6 +56,10 @@ export class Rendering {
   private _textureCache: Map<TextureSource, RenderingTextureDataState> = new Map();
 
   private _glDrawFn!: GlGeometrySystem['draw'];
+  private _batcherBuildStartFn!: BatcherPipe['buildStart'];
+  private _originalBeginRenderPass!: WebGPURenderer['encoder']['beginRenderPass'];
+  private _originalRestoreRenderPass!: WebGPURenderer['encoder']['restoreRenderPass'];
+
   private _drawOrder: { pipe: string; drawCalls: number }[] = [];
   private _pipeExecuteFn: Map<string, InstructionPipe<any>['execute']> = new Map();
 
@@ -71,6 +76,25 @@ export class Rendering {
     this._devtool = devtool;
   }
 
+  public reset() {
+    // restore all overriden functions
+    const renderer = this._devtool.renderer;
+
+    if (!this._batcherBuildStartFn) return;
+
+    renderer.renderPipes.batch.buildStart = this._batcherBuildStartFn;
+
+    if (renderer.type === 0b10) {
+      const gpuRenderer = renderer as WebGPURenderer;
+      const encoder = gpuRenderer.encoder;
+      encoder.beginRenderPass = this._originalBeginRenderPass;
+      encoder.restoreRenderPass = this._originalRestoreRenderPass;
+    } else {
+      const glRenderer = renderer as WebGLRenderer;
+      glRenderer.geometry.draw = this._glDrawFn;
+    }
+  }
+
   public init() {
     this._textureCache.clear();
     this.stats.reset();
@@ -83,9 +107,9 @@ export class Rendering {
     const renderer = this._devtool.renderer;
 
     // override the batcher buildStart function to keep track of rebuild frequency
-    const batcherBuildStartFn = renderer.renderPipes.batch.buildStart;
+    this._batcherBuildStartFn = renderer.renderPipes.batch.buildStart;
     renderer.renderPipes.batch.buildStart = (...args) => {
-      const res = batcherBuildStartFn.apply(renderer.renderPipes.batch, args);
+      const res = this._batcherBuildStartFn.apply(renderer.renderPipes.batch, args);
       this._rebuilt = true;
 
       return res;
@@ -116,18 +140,18 @@ export class Rendering {
         };
       };
       const encoder = gpuRenderer.encoder;
-      const originalBeginRenderPass = encoder.beginRenderPass;
+      this._originalBeginRenderPass = encoder.beginRenderPass;
       encoder.beginRenderPass = (...args) => {
-        const res = originalBeginRenderPass.apply(encoder, args);
+        const res = this._originalBeginRenderPass.apply(encoder, args);
 
         drawOverride('draw');
         drawOverride('drawIndexed');
 
         return res;
       };
-      const originalRestoreRenderPass = encoder.restoreRenderPass;
+      this._originalRestoreRenderPass = encoder.restoreRenderPass;
       encoder.restoreRenderPass = (...args) => {
-        const res = originalRestoreRenderPass.apply(encoder, args);
+        const res = this._originalRestoreRenderPass.apply(encoder, args);
 
         drawOverride('draw');
         drawOverride('drawIndexed');

packages/backend/src/scene/overlay/overlay.ts

@@ -46,13 +46,13 @@ export class Overlay {
 
     const newCanvas = this._devtool.canvas!;
 
+    this._highlightEnabled = this._devtool.state.overlayHighlightEnabled;
+    this._pickerEnabled = this._devtool.state.overlayPickerEnabled;
+
     if (newCanvas === this._canvas) {
       return;
     }
 
-    this._highlightEnabled = this._devtool.state.overlayHighlightEnabled;
-    this._pickerEnabled = this._devtool.state.overlayPickerEnabled;
-
     this._canvas = newCanvas;
     this._buildOverlay();
     this._selectedStylesExt = getExtensionProp(Overlay.extensions, 'getSelectedStyle');

packages/backend/src/scene/tree/tree.ts

@@ -39,6 +39,10 @@ export class Tree {
     this._onSwapExtensions = getExtensionsProp(Tree.extensions, 'onSwap');
     this._onSelectedExtensions = getExtensionsProp(Tree.extensions, 'onSelected');
     this._treePanelButtons = getExtensionsProp(Tree.extensions, 'panelButtons');
+
+    this.selectedNode = null;
+    this._idMap.clear();
+    this._sceneGraph.clear();
   }
 
   public nodeButtonPress(nodeId: string, buttonAction: string, value?: boolean) {

packages/devtool-chrome/src/background/index.ts

@@ -4,6 +4,7 @@ import { convertPostMessage, convertPostMessageData } from '../messageUtils';
 interface Message {
   method: DevtoolMessage;
   data: string;
+  tabId?: number;
 }
 
 interface IconPath {
@@ -48,6 +49,8 @@ chrome.runtime.onConnect.addListener(function (port) {
     const tabs = Object.keys(devtoolConnections);
     for (let i = 0, len = tabs.length; i < len; i++) {
       if (devtoolConnections[tabs[i]] === port) {
+        const tabId = parseInt(tabs[i], 10);
+        chrome.tabs.sendMessage(tabId, { id: 'pixi-devtools', method: 'panelClosed' }, function () {});
         delete devtoolConnections[tabs[i]];
         break;
       }
@@ -64,23 +67,21 @@ chrome.runtime.onMessage.addListener((request: Message, sender: chrome.runtime.M
   }
 
   // Messages from content scripts should have sender.tab set
-  if (sender.tab) {
-    const tabId = sender.tab.id!;
+  if (sender.tab || request.tabId) {
+    const tabId = sender.tab?.id ?? request.tabId!;
     if (tabId in devtoolConnections) {
       const message = convertPostMessage(converted.method, converted.data);
       devtoolConnections[tabId].postMessage({
         id: 'pixi-devtools',
-        tabId: sender.tab?.id,
+        tabId: sender.tab?.id ?? request.tabId,
         ...message,
       });
       // Send a response back to the sender
       sendResponse({ status: 'success' });
     } else {
-      console.log('Tab not found in connection list.');
       sendResponse({ status: 'error', message: 'Tab not found in connection list.' });
     }
   } else {
-    console.log('sender.tab not defined.');
     sendResponse({ status: 'error', message: 'sender.tab not defined.' });
   }
   return true;
@@ -100,8 +101,15 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     }
   }
   if (tab.active && changeInfo.status === 'complete') {
-    // TODO: we can send a message to the devtools to reload the page
-    console.log(`Tab ${tabId} has reloaded.`);
+    // send a message to the devtools to reload the page
+    if (tabId in devtoolConnections) {
+      const message = convertPostMessage(DevtoolMessage.pageReload, {});
+      devtoolConnections[tabId].postMessage({
+        id: 'pixi-devtools',
+        tabId,
+        ...message,
+      });
+    }
     // You can perform additional actions here
   }
 });

packages/devtool-chrome/src/content/index.ts

@@ -41,3 +41,9 @@ window.addEventListener(
   },
   false,
 );
+
+chrome.runtime.onMessage.addListener(function (message) {
+  if (message.method === 'panelClosed') {
+    injectScript(chrome.runtime.getURL('inject/index2.js'), 'body');
+  }
+});

packages/devtool-chrome/src/devtools/devtools.ts

@@ -1,5 +1,21 @@
+import { DevtoolMessage } from '@devtool/frontend/types';
+import { convertPostMessage } from '../messageUtils';
+
 chrome.devtools.panels.create(
   import.meta.env.DEV ? 'Dev: PixiJS DevTools' : 'PixiJS DevTools',
   'icon-active-128.png',
   'devtools/panel/panel.html',
+  (panel) => {
+    const tabId = chrome.devtools.inspectedWindow.tabId;
+
+    panel.onShown.addListener(() => {
+      const message = convertPostMessage(DevtoolMessage.panelShown, {});
+      chrome.runtime.sendMessage({ ...message, tabId });
+    });
+
+    panel.onHidden.addListener(() => {
+      const message = convertPostMessage(DevtoolMessage.panelHidden, {});
+      chrome.runtime.sendMessage({ ...message, tabId });
+    });
+  },
 );

packages/devtool-chrome/src/inject/close.ts

@@ -0,0 +1,3 @@
+window.__PIXI_DEVTOOLS_WRAPPER__?.overlay.enableHighlight(false);
+window.__PIXI_DEVTOOLS_WRAPPER__?.overlay.enablePicker(false);
+window.__PIXI_DEVTOOLS_WRAPPER__?.reset();

packages/devtool-chrome/vite.inject.config.ts

@@ -28,7 +28,7 @@ export default defineConfig((config) => {
     ],
     build: {
       lib: {
-        entry: 'inject/index.ts',
+        entry: ['inject/index.ts', 'inject/close.ts'],
         fileName: 'index',
         formats: ['es'],
       },