fix(timeline): hide switcher in internal timeline panel and exclude internal timeline events to prevent triggering

Author: webfansplz

packages/applet/src/components/timeline/index.vue

@@ -19,8 +19,10 @@ const props = withDefaults(defineProps<{
   docLink: string
   githubRepoLink?: string
   headerVisible?: boolean
+  switcherVisible?: boolean
 }>(), {
   headerVisible: true,
+  switcherVisible: true,
 })
 
 const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
@@ -143,7 +145,7 @@ function toggleRecordingState() {
       No events
     </Empty>
 
-    <div class="absolute right-3 top-12 flex items-center justify-end b-1 border-base rounded-1 b-solid px2 py1">
+    <div v-if="switcherVisible" class="absolute right-3 top-12 flex items-center justify-end b-1 border-base rounded-1 b-solid px2 py1">
       <div class="flex items-center gap-2 px-1">
         <div v-tooltip.bottom-end="{ content: recordingTooltip }" class="flex items-center gap1" @click="toggleRecordingState">
           <span v-if="recordingState" class="recording recording-btn bg-[#ef4444]" />

packages/client/src/pages/timeline.vue

@@ -85,7 +85,7 @@ function toggleTimelineLayer() {
       </Pane>
       <Pane relative h-full size="65">
         <div class="h-full flex flex-col p2">
-          <Timeline ref="timelineRef" :layer-ids="[activeTimelineLayer]" :header-visible="false" doc-link="" />
+          <Timeline ref="timelineRef" :layer-ids="[activeTimelineLayer]" :header-visible="false" doc-link="" plugin-id="" :switcher-visible="false" />
         </div>
       </Pane>
     </Splitpanes>

packages/devtools-kit/src/ctx/hook.ts

@@ -335,7 +335,8 @@ export function createDevToolsCtxHooks() {
 
   // add timeline event
   hooks.hook(DevToolsContextHookKeys.TIMELINE_EVENT_ADDED, ({ options, plugin }) => {
-    if (devtoolsState.highPerfModeEnabled || !devtoolsState.timelineLayersState?.[plugin.descriptor.id])
+    const internalLayerIds = ['performance', 'component-event', 'keyboard', 'mouse']
+    if (devtoolsState.highPerfModeEnabled || (!devtoolsState.timelineLayersState?.[plugin.descriptor.id] && !internalLayerIds.includes(options.layerId)))
       return
     // @ts-expect-error hookable
     hooks.callHookWith(async (callbacks) => {