fix disconnect

package.json

@@ -17,7 +17,7 @@
     "watch": "run-p watch:*",
     "watch:example": "vite dev --config vite.example.config.ts",
     "watch:chrome": "vite dev --config vite.chrome.config.ts",
-    "watch:lib": "vite build --config vite.inject.config.ts --watch",
+    "watch:lib": "vite build --config vite.inject.config.ts --mode development",
     "dist": "run-s build",
     "deploy": "run-s clean build",
     "release": "xs bump,test && run-s deploy && xs git-push",

src/chrome/manifest.dev.json

@@ -3,7 +3,6 @@
   "action": {
     "default_icon": {
       "16": "icon-inactive-16.png",
-      "32": "icon-inactive-32.png",
       "48": "icon-inactive-48.png",
       "128": "icon-inactive-128.png"
     }
@@ -22,15 +21,14 @@
   },
   "icons": {
     "16": "icon-active-16.png",
-    "32": "icon-active-32.png",
     "48": "icon-active-48.png",
     "128": "icon-active-128.png"
   },
   "permissions": ["activeTab"],
   "devtools_page": "src/devtools/index.html",
   "web_accessible_resources": [
     {
-      "resources": ["contentStyle.css", "icon-active-128.png", "icon-inactive-32.png"],
+      "resources": ["contentStyle.css", "icon-active-128.png", "icon-inactive-48.png"],
       "matches": ["<all_urls>"]
     }
   ]

src/chrome/manifest.json

@@ -5,7 +5,6 @@
   "action": {
     "default_icon": {
       "16": "icon-inactive-16.png",
-      "32": "icon-inactive-32.png",
       "48": "icon-inactive-48.png",
       "128": "icon-inactive-128.png"
     }
@@ -24,7 +23,6 @@
   },
   "icons": {
     "16": "icon-active-16.png",
-    "32": "icon-active-32.png",
     "48": "icon-active-48.png",
     "128": "icon-active-128.png"
   },

src/chrome/src/background/index.ts

@@ -12,7 +12,6 @@ interface IconPath {
 function setIconAndPopup(type: MessageType, tabId: number) {
   const iconPath: IconPath = {
     16: `./icon-${type}-16.png`,
-    32: `./icon-${type}-32.png`,
     48: `./icon-${type}-48.png`,
     128: `./icon-${type}-128.png`,
   };

src/chrome/src/devtools/devtools.ts

@@ -1,5 +1,5 @@
 chrome.devtools.panels.create(
   import.meta.env.DEV ? 'Dev: PixiJS DevTools' : 'PixiJS DevTools',
-  'panel-icon.png',
+  'icon-active-128.png',
   'src/devtools/panel/panel.html',
 );

src/chrome/src/inject/utils/poll.ts

@@ -2,21 +2,28 @@ import { MessageType, convertPostMessage } from '../../messageUtils';
 import { getPixiWrapper } from '../devtool';
 
 let pixiPollingInterval: number | undefined;
+let tryCount = 0;
 
 // Function to start polling for PixiJS
 export function pollPixi() {
   pixiPollingInterval = window.setInterval(() => {
+    if (tryCount > 10) {
+      clearInterval(pixiPollingInterval);
+      return;
+    }
     try {
       const pixiDetectionResult = getPixiWrapper().detectPixi();
 
       if (pixiDetectionResult === MessageType.Active) {
         clearInterval(pixiPollingInterval);
         window.postMessage(convertPostMessage(MessageType.PixiDetected, {}), '*');
       }
+
+      tryCount += 1;
     } catch (error) {
       clearInterval(pixiPollingInterval);
     }
-  }, 300);
+  }, 1000);
 
   return pixiPollingInterval;
 }

src/lib/components/Container.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const Container = styled.div`
   background-color: #292929;
   width: calc(100%);
-  height: 100vh;
+  height: 100%;
 `;
 
 export const SectionContainer = styled.div`

src/lib/components/collapsible/styles.tsx

@@ -4,6 +4,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 export const CollapsibleRoot = styled(Collapsible.Root)`
   background-color: var(--header);
   width: calc(100%);
+  height: 100%;
 `;
 
 export const CollapsibleTrigger = styled(Collapsible.Trigger)``;
@@ -44,8 +45,8 @@ export const CollapsibleHeaderIcon = styled.button`
 
 export const CollapsibleContent = styled(Collapsible.Content)<{ wrap?: 'wrap' | 'nowrap' }>`
   background-color: var(--bg);
-  padding-top: 8px;
   display: flex;
   flex-wrap: ${({ wrap = 'wrap' }) => wrap};
   flex-direction: ${({ wrap = 'wrap' }) => (wrap === 'wrap' ? 'row' : 'column')};
+  height: 100%;
 `;

src/lib/components/properties/Properties.tsx

@@ -60,15 +60,10 @@ const Property: React.FC<PropertyProps> = ({ type, propertyProps }) => {
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface PropertiesProps {}
 const PropertiesComponent: React.FC<PropertiesProps> = () => {
-  const selectedNodeId = usePixiStore((state) => state.selectedNodeId);
   const currentValues = usePixiStore((state) => state.selectedNodeValues);
   const propertyPanel = usePixiStore((state) => state.selectedNodeProps);
   const bridge = usePixiStore((state) => state.bridge);
 
-  if (selectedNodeId === null) {
-    return null;
-  }
-
   const handlePropertyChange = (property: string, newValue: any) => {
     bridge(`
       window.__PIXI_DEVTOOLS_WRAPPER__.properties.setValue('${property}', ${newValue})

src/lib/components/tree/TreeView.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import TreeView, { flattenTree } from 'react-accessible-treeview';
 import {
   FaLayerGroup as ContainerIcon,
@@ -35,6 +35,7 @@ const TreeViewComponent: React.FC<TreeViewComponentProps> = () => {
   const sceneGraph = usePixiStore((state) => state.sceneGraph);
   const flattenTreeData = flattenTree(sceneGraph as any);
   const selectedNodeId = usePixiStore((state) => state.selectedNodeId);
+  const setSelectedNodeId = usePixiStore((state) => state.setSelectedNodeId);
 
   // find the node in the flattenTreeData that matches the selectedNodeId
   const selectedNode = flattenTreeData.find((node) => node.metadata!.uid === selectedNodeId);
@@ -43,6 +44,13 @@ const TreeViewComponent: React.FC<TreeViewComponentProps> = () => {
     selectedNode ? [selectedNode.id as number, ...parents.map((node) => node.id as number)] : null,
   );
 
+  useEffect(() => {
+    return () => {
+      setSelectedNodeId(null);
+      setTreeId(null);
+    };
+  }, []);
+
   console.log('rendering tree', selectedNodeId);
   return (
     <TreeWrapper>

src/lib/pages/index.tsx

@@ -76,7 +76,7 @@ const tabs = [
     component: <SceneComponent />,
     disabled: false,
   },
-  { value: 'tab2', label: 'Assets', component: <SceneComponent />, disabled: false },
+  { value: 'tab2', label: 'Assets', component: <SceneComponent />, disabled: true },
   { value: 'tab3', label: 'Rendering', component: <SceneComponent />, disabled: true },
 ];
 

vite.inject.config.ts

@@ -2,34 +2,38 @@ import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 
 // the crx plugin doesn't seem to work with additional files, so we'll just build the injection library here
-export default defineConfig({
-  resolve: {
-    alias: {
-      '@lib': resolve(__dirname, 'src/lib'),
-      '@chrome': resolve(__dirname, 'src/chrome'),
-    },
-  },
-  root: resolve(__dirname, 'src/chrome'),
-  plugins: [
-    {
-      name: 'wrap-in-iife',
-      generateBundle(outputOptions, bundle) {
-        Object.keys(bundle).forEach((fileName) => {
-          const file = bundle[fileName];
-          if (fileName.slice(-3) === '.js' && 'code' in file) {
-            file.code = `(() => {\n${file.code}})()`;
-          }
-        });
+export default defineConfig((config) => {
+  const isDev = config.mode === 'development';
+  const outDir = isDev ? 'chrome-dev' : 'chrome';
+  return {
+    resolve: {
+      alias: {
+        '@lib': resolve(__dirname, 'src/lib'),
+        '@chrome': resolve(__dirname, 'src/chrome'),
       },
     },
-  ],
-  build: {
-    lib: {
-      entry: 'src/inject/index.ts',
-      fileName: 'index',
-      formats: ['es'],
+    root: resolve(__dirname, 'src/chrome'),
+    plugins: [
+      {
+        name: 'wrap-in-iife',
+        generateBundle(outputOptions, bundle) {
+          Object.keys(bundle).forEach((fileName) => {
+            const file = bundle[fileName];
+            if (fileName.slice(-3) === '.js' && 'code' in file) {
+              file.code = `(() => {\n${file.code}})()`;
+            }
+          });
+        },
+      },
+    ],
+    build: {
+      lib: {
+        entry: 'src/inject/index.ts',
+        fileName: 'index',
+        formats: ['es'],
+      },
+      target: 'es2020',
+      outDir: resolve(__dirname, `dist/${outDir}/src/inject`),
     },
-    target: 'es2020',
-    outDir: resolve(__dirname, 'dist/chrome/src/inject'),
-  },
+  };
 });