优化多个frame的inspect target的逻辑

cc-inspector/src/scripts/background/portContent.ts

@@ -16,24 +16,10 @@ export class PortContent extends PortMan {
     };
   }
   init(): void {
-    // 使用新连上来的content
-    const { frameId } = this.port.sender;
-    if (frameId !== undefined) {
-      portMgr.useFrame(frameId);
-    }
     // 新的content连上来，需要更新devtools
-    portMgr.updateFrames();
     this.onDisconnect = (disPort: chrome.runtime.Port) => {
-      /**
-       *  const index = this.content.findIndex((el) =>
-            disPort.sender?.frameId !== undefined &&
-            el.sender?.frameId !== undefined &&
-            el.sender?.frameId === disPort.sender?.frameId
-          );
-       */
       // content失去链接需要更新Devtools
       portMgr.removePort(this);
-      portMgr.updateFrames();
     };
     this.onMessage = (data: PluginEvent) => {
       // content的数据一般都是要同步到devtools

cc-inspector/src/scripts/background/portDevtools.ts

@@ -1,38 +1,27 @@
-import { Msg, Page, PluginEvent, RequestTreeInfoData, RequestUseFrameData, ResponseSupportData } from "../../core/types";
+import { Msg, Page, PluginEvent, RequestUseFrameData, ResponseSupportData } from "../../core/types";
 import { PortMan } from "./portMan";
 import { portMgr } from "./portMgr";
 
 export class PortDevtools extends PortMan {
   init(): void {
-    // 当devtools链接后，主动同步frames数据
-    portMgr.updateFrames();
     this.onDisconnect = () => {
       portMgr.removePort(this);
     };
     this.onMessage = (data: PluginEvent) => {
       if (data.msg === Msg.RequestUseFrame) {
+        // 因为devtool是定时器驱动，这里改变了content，后续就会将数据派发到对应的content中去
         portMgr.useFrame((data.data as RequestUseFrameData).id);
       } else {
-        // 从devtools过来的消息统一派发到Content中
+        // 从devtools过来的消息统一派发到目标content中
         if (data.check(Page.Devtools, Page.Background)) {
-          if (data.msg === Msg.RequstTreeInfo) {
-            const d = data.data as RequestTreeInfoData;
-            if (!portMgr.isCurrentFrme(d.frameID)) {
-              console.log(`frameID[${data.data}]不一致`);
-              debugger;
-            }
-          }
           data.reset(Page.Background, Page.Content);
           const port = portMgr.getCurrentUsePort();
-          if (!port) {
+          if (port) {
-            console.warn(`not find any port`);
-            const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, { support: false, msg: "disconnect with game, please refresh page" } as ResponseSupportData);
-            this.send(e);
-            return;
-          }
             port.send(data);
           } else {
-          debugger;
+            const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, { support: false, msg: "disconnect with game, please refresh page" } as ResponseSupportData);
+            this.send(e);
+          }
         }
       }
     };

cc-inspector/src/scripts/background/portMgr.ts

@@ -56,6 +56,7 @@ export class PortMgr {
     }
     if (portMan) {
       this.portArray.push(portMan);
+      this.updateFrames();
       this.logState();
       return portMan;
     }
@@ -85,6 +86,7 @@ export class PortMgr {
     let index = this.portArray.findIndex((el) => el === item);
     if (index > -1) {
       this.portArray.splice(index, 1);
+      this.updateFrames();
       this.logState();
     }
   }
@@ -110,15 +112,6 @@ export class PortMgr {
   }
   useFrame(id: number) {
     this.currentUseContentFrameID = id;
-    // 更新这个frame的tree
-    const sendData = new PluginEvent(Page.Background, Page.Content, Msg.RequestSupport, {} as RequestSupportData);
-    this.getCurrentUsePort()?.send(sendData);
-  }
-  isCurrentFrme(id: number) {
-    if (typeof id !== "number") {
-      throw new Error("id must be number");
-    }
-    return this.currentUseContentFrameID === id;
   }
 }
 export const portMgr = new PortMgr();

cc-inspector/src/scripts/inject/inspector.ts

@@ -201,6 +201,9 @@ export class Inspector extends InjectEvent {
       "quat",
       "node",
       "components",
+      "enabledInHierarchy",
+      "hideFlags",
+      "isValid",
       "parent",
       // 生命周期函数
       "onFocusInEditor",
@@ -214,6 +217,14 @@ export class Inspector extends InjectEvent {
       "onDisable",
       "onDestroy",
       "onLoad",
+      "internalLateUpdate",
+      "internalOnDestroy",
+      "internalOnEnable",
+      "internalOnDisable",
+      "internalUpdate",
+      "internalPreload",
+      "internalOnLoad",
+      "internalStart",
     ];
     const keyHidden = this.getAllPropertyDescriptors(node);
     const keyVisible1 = Object.keys(node); // Object不走原型链

cc-inspector/src/views/devtools/bus.ts

@@ -8,6 +8,7 @@ export enum BusMsg {
    * 开关定时器，方便测试
    */
   EnableSchedule = "EnableSchedule",
+  ChangeContent = "ChangeContent",
   SelectNode = "SelectNode",
 }
 

cc-inspector/src/views/devtools/comp/index.ts

@@ -25,10 +25,16 @@ export enum CompType {
   Button = "cc.Button",
   BlockInputEvents = "cc.BlockInputEvents",
   Scene = "cc.Scene",
+  Animation = "cc.Animation",
 }
 
 export function getSimpleProperties(typeName: string): string[] {
   const config = {};
+  config[CompType.Animation] = [
+    "defaultClip", //
+    "clips",
+    "playOnLoad",
+  ];
   config[CompType.Scene] = [
     "autoReleaseAssets",
     "position",

cc-inspector/src/views/devtools/hierarchy.vue

@@ -16,7 +16,7 @@ import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
 import Mousetrap, { MousetrapInstance } from "mousetrap";
 import { storeToRefs } from "pinia";
 import { defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
-import { Msg, PluginEvent, RequestTreeInfoData, ResponseSetPropertyData } from "../../core/types";
+import { Msg, PluginEvent, RequestTreeInfoData, RequestUseFrameData, ResponseSetPropertyData } from "../../core/types";
 import { bridge } from "./bridge";
 import { Bus, BusMsg } from "./bus";
 import { EngineData, TreeData } from "./data";
@@ -48,12 +48,17 @@ export default defineComponent({
         bridge.send(Msg.RequestVisible, selectedUUID);
       }
     }
+    function changeContent(data: RequestUseFrameData) {
+      treeData.value = [];
+      selectedUUID = null;
+    }
     onMounted(() => {
       if (elTree.value) {
         const el = toRaw(elTree.value);
         ins = new Mousetrap(el.treeElement);
         ins.bind(["space"], onQuickVisible, "keydown");
       }
+      Bus.on(BusMsg.ChangeContent, changeContent);
       Bus.on(BusMsg.ShowPlace, funcShowPlace);
       Bus.on(BusMsg.EnableSchedule, funcEnableSchedule);
       timer.create();
@@ -62,6 +67,7 @@ export default defineComponent({
       if (ins) {
         ins.unbind(["space"], "keydown");
       }
+      Bus.off(BusMsg.ChangeContent, changeContent);
       Bus.off(BusMsg.ShowPlace, funcShowPlace);
       Bus.off(BusMsg.EnableSchedule, funcEnableSchedule);
       timer.clean();

cc-inspector/src/views/devtools/index.vue

@@ -74,7 +74,9 @@ export default defineComponent({
       const tabID = chrome.devtools.inspectedWindow.tabId;
       chrome.scripting.executeScript({ files: ["js/execute.js"], target: { tabId: tabID } }, (results: chrome.scripting.InjectionResult[]) => {});
     }
-
+    ccui.footbar.showTipsArray({
+      tips: ["press space in the hierarchy to quickly control the display and hiding of nodes"],
+    });
     function _inspectedCode() {
       let injectCode = "";
       chrome.devtools.inspectedWindow.eval(injectCode, (result, isException) => {
@@ -120,12 +122,6 @@ export default defineComponent({
           value: item.frameID,
         };
       });
-
-      // 第一次获取到frame配置后，自动获取frame数据
-      if (frameID === null && iframes.value.length > 0 && !iframes.value.find((el) => el.value === frameID.value)) {
-        frameID.value = iframes[0].value;
-        onChangeFrame();
-      }
     });
 
     const memory = ref<{
@@ -148,6 +144,7 @@ export default defineComponent({
     function onChangeFrame() {
       const id = Number(toRaw(frameID.value));
       bridge.send(Msg.RequestUseFrame, { id } as RequestUseFrameData);
+      Bus.emit(BusMsg.ChangeContent, { id } as RequestUseFrameData);
     }
     const elLeft = ref<HTMLDivElement>();
     const version = ref(PluginConfig.manifest.version);

cc-inspector/src/views/devtools/inspector.vue

@@ -26,7 +26,6 @@ export default defineComponent({
         console.log(`update node info: ${selectedUUID}`);
         bridge.send(Msg.RequestNodeInfo, { uuid: selectedUUID } as RequestNodeInfoData);
       } else {
-        // TODO: 需要检查当前的这个节点是否有效
         treeItemData.value = null;
       }
     }
@@ -44,12 +43,19 @@ export default defineComponent({
       selectedUUID = uuid;
       updateNodeInfo();
     };
+    function changeContent() {
+      selectedUUID = null;
+      treeItemData.value = null;
+    }
+
     onMounted(() => {
+      Bus.on(BusMsg.ChangeContent, changeContent);
       Bus.on(BusMsg.SelectNode, funSelectNode);
       Bus.on(BusMsg.EnableSchedule, funcEnableSchedule);
       timer.create();
     });
     onUnmounted(() => {
+      Bus.off(BusMsg.ChangeContent, changeContent);
       Bus.off(BusMsg.SelectNode, funSelectNode);
       Bus.off(BusMsg.EnableSchedule, funcEnableSchedule);
       timer.clean();

cc-inspector/src/views/devtools/ui/property-engine.vue

@@ -9,6 +9,7 @@
 <script lang="ts">
 import { defineComponent, PropType, toRaw } from "vue";
 import { Bus, BusMsg } from "../bus";
+import { CompType } from "../comp";
 import { EngineData } from "../data";
 export default defineComponent({
   name: "property-engine",
@@ -25,18 +26,11 @@ export default defineComponent({
         Bus.emit(BusMsg.ShowPlace, toRaw(props.data));
       },
       getEngineTypeIcon() {
-        switch (props.data.engineType) {
+        const map = {};
-          case "cc_Sprite": {
+        map[CompType.Spirte] = "icon_picture";
-            return "icon_picture";
+        map[CompType.Label] = "icon_text";
-          }
+        map[CompType.Node] = "icon_node";
-          case "cc_Label": {
+        return map[props.data.engineType] || "icon_unknown";
-            return "icon_text";
-          }
-          case "cc_Node": {
-            return "icon_node";
-          }
-        }
-        return "icon_unknown";
       },
     };
   },

cc-inspector/src/views/devtools/ui/property-image.vue

@@ -75,8 +75,9 @@ export default defineComponent({
   }
 
   .url {
+    padding: 0 5px;
     flex: 1;
-    color: white;
+    color: gray;
     font-weight: normal;
     font-size: 12px;
     overflow: hidden;