From 9747ce6a295e6fe8fbda66d2e66f1ce983810d8d Mon Sep 17 00:00:00 2001
From: CrabSAMA <71915282@qq.com>
Date: Tue, 19 Aug 2025 16:06:16 +0800
Subject: [PATCH 1/5] refactor: refactor the plugin details table into a div
 base flex

---
 .../components/data/PluginDetailsTable.vue    | 155 +++++++++---------
 1 file changed, 79 insertions(+), 76 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index d961859dd..0e4d9b2f5 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -71,66 +71,71 @@ function toggleDurationSortType() {
 </script>
 
 <template>
-  <table w-full border-separate border-spacing-0>
-    <thead border="b base">
-      <tr px2 class="[&_th]:(sticky top-0 z10 border-b border-base)">
-        <th v-if="selectedFields.includes('hookName')" bg-base w32 ws-nowrap p1 text-center font-600>
-          Hook name
-        </th>
-        <th v-if="selectedFields.includes('module')" bg-base min-w100 ws-nowrap p1 text-left font-600>
-          <button flex="~ row gap1 items-center" w-full>
-            Module
-            <VMenu>
-              <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-                <i text-xs class="i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
-              </span>
-              <template #popper>
-                <div class="p2" flex="~ col gap2">
-                  <label
-                    v-for="rule of searchFilterTypes"
-                    :key="rule.name"
-                    border="~ base rounded-md" px2 py1
-                    flex="~ items-center gap-1"
-                    select-none
-                    :title="rule.description"
-                    class="cursor-pointer module-type-filter"
-                  >
-                    <input
-                      type="checkbox"
-                      mr1
-                      :checked="filterModuleTypes?.includes(rule.name)"
-                      @change="toggleModuleType(rule)"
-                    >
-                    <div :class="rule.icon" icon-catppuccin />
-                    <div text-sm>{{ rule.description || rule.name }}</div>
-                  </label>
-                </div>
-              </template>
-            </VMenu>
-          </button>
-        </th>
-        <th v-if="selectedFields.includes('startTime')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
-          Start Time
-        </th>
-        <th v-if="selectedFields.includes('endTime')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
-          End Time
-        </th>
-        <th v-if="selectedFields.includes('duration')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
-          <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
-            Duration
+  <div w-full>
+    <div class="sticky top-0 z10 border-b border-base" flex="~ row">
+      <div v-if="selectedFields.includes('hookName')" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
+        Hook name
+      </div>
+      <div v-if="selectedFields.includes('module')" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
+        <button flex="~ row gap1 items-center" w-full>
+          Module
+          <VMenu>
             <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-              <i text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op50']" />
+              <i text-xs class="i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
             </span>
-          </button>
-        </th>
-      </tr>
-    </thead>
-    <tbody v-if="filtered.length">
-      <tr v-for="(item, index) in filtered" :key="item.id" class="[&_td]:(border-base border-b-1 border-dashed)" :class="[index === filtered.length - 1 ? '[&_td]:(border-b-0)' : '']">
-        <td v-if="selectedFields.includes('hookName')" w32 ws-nowrap text-center text-sm op80>
+            <template #popper>
+              <div class="p2" flex="~ col gap2">
+                <label
+                  v-for="rule of searchFilterTypes"
+                  :key="rule.name"
+                  border="~ base rounded-md" px2 py1
+                  flex="~ items-center gap-1"
+                  select-none
+                  :title="rule.description"
+                  class="cursor-pointer module-type-filter"
+                >
+                  <input
+                    type="checkbox"
+                    mr1
+                    :checked="filterModuleTypes?.includes(rule.name)"
+                    @change="toggleModuleType(rule)"
+                  >
+                  <div :class="rule.icon" icon-catppuccin />
+                  <div text-sm>{{ rule.description || rule.name }}</div>
+                </label>
+              </div>
+            </template>
+          </VMenu>
+        </button>
+      </div>
+      <div v-if="selectedFields.includes('startTime')" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+        Start Time
+      </div>
+      <div v-if="selectedFields.includes('endTime')" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+        End Time
+      </div>
+      <div v-if="selectedFields.includes('duration')" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
+        <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
+          Duration
+          <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
+            <i text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op50']" />
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div v-if="filtered.length">
+      <div
+        v-for="(item, index) in filtered"
+        :key="item.id"
+        flex="~ row"
+        class="border-base border-b-1 border-dashed"
+        :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
+      >
+        <div v-if="selectedFields.includes('hookName')" flex="~ items-center justify-center" flex-none w32 ws-nowrap text-sm op80>
           {{ HOOK_NAME_MAP[item.type] }}
-        </td>
-        <td v-if="selectedFields.includes('module')" min-w100 text-left text-ellipsis line-clamp-2>
+        </div>
+        <div v-if="selectedFields.includes('module')" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
           <DisplayModuleId
             :id="item.module"
             w-full border-none
@@ -139,26 +144,24 @@ function toggleDurationSortType() {
             hover="bg-active"
             border="~ base rounded" block px2 py1
           />
-        </td>
-        <td v-if="selectedFields.includes('startTime')" text-center font-mono text-sm min-w52 op80>
+        </div>
+        <div v-if="selectedFields.includes('startTime')" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
           <time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
-        </td>
-        <td v-if="selectedFields.includes('endTime')" text-center font-mono text-sm min-w52 op80>
+        </div>
+        <div v-if="selectedFields.includes('endTime')" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
           <time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
-        </td>
-        <td v-if="selectedFields.includes('duration')" text-center text-sm>
+        </div>
+        <div v-if="selectedFields.includes('duration')" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
           <DisplayDuration :duration="item.duration" />
-        </td>
-      </tr>
-    </tbody>
-    <tbody v-else>
-      <tr>
-        <td :colspan="selectedFields.length" p4>
-          <div w-full h-48 flex="~ items-center justify-center" op50 italic>
-            No data
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div p4>
+        <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+          No data
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

From b07a7f264ec454d7bbfa3214a838b1d58fe7de8d Mon Sep 17 00:00:00 2001
From: CrabSAMA <71915282@qq.com>
Date: Tue, 19 Aug 2025 16:14:58 +0800
Subject: [PATCH 2/5] feat: add virtual scroll for PluginDetailsTable

---
 .../components/data/PluginDetailsTable.vue    | 66 ++++++++++---------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index 0e4d9b2f5..2f56c726c 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -124,38 +124,42 @@ function toggleDurationSortType() {
       </div>
     </div>
 
-    <div v-if="filtered.length">
-      <div
-        v-for="(item, index) in filtered"
-        :key="item.id"
-        flex="~ row"
-        class="border-base border-b-1 border-dashed"
-        :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
-      >
-        <div v-if="selectedFields.includes('hookName')" flex="~ items-center justify-center" flex-none w32 ws-nowrap text-sm op80>
-          {{ HOOK_NAME_MAP[item.type] }}
+    <DataVirtualList
+      v-if="filtered.length"
+      :items="filtered"
+      key-prop="id"
+    >
+      <template #default="{ item, index }">
+        <div
+          flex="~ row"
+          class="border-base border-b-1 border-dashed"
+          :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
+        >
+          <div v-if="selectedFields.includes('hookName')" flex="~ items-center justify-center" flex-none w32 ws-nowrap text-sm op80>
+            {{ HOOK_NAME_MAP[item.type] }}
+          </div>
+          <div v-if="selectedFields.includes('module')" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
+            <DisplayModuleId
+              :id="item.module"
+              w-full border-none
+              :session="session"
+              :link="`/session/${session.id}/graph?module=${item.module}`"
+              hover="bg-active"
+              border="~ base rounded" block px2 py1
+            />
+          </div>
+          <div v-if="selectedFields.includes('startTime')" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+            <time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
+          </div>
+          <div v-if="selectedFields.includes('endTime')" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+            <time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
+          </div>
+          <div v-if="selectedFields.includes('duration')" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
+            <DisplayDuration :duration="item.duration" />
+          </div>
         </div>
-        <div v-if="selectedFields.includes('module')" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
-          <DisplayModuleId
-            :id="item.module"
-            w-full border-none
-            :session="session"
-            :link="`/session/${session.id}/graph?module=${item.module}`"
-            hover="bg-active"
-            border="~ base rounded" block px2 py1
-          />
-        </div>
-        <div v-if="selectedFields.includes('startTime')" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
-          <time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
-        </div>
-        <div v-if="selectedFields.includes('endTime')" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
-          <time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
-        </div>
-        <div v-if="selectedFields.includes('duration')" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
-          <DisplayDuration :duration="item.duration" />
-        </div>
-      </div>
-    </div>
+      </template>
+    </DataVirtualList>
     <div v-else>
       <div p4>
         <div w-full h-48 flex="~ items-center justify-center" op50 italic>

From c83b434d55486869cc07bec840fe6c959bff01c0 Mon Sep 17 00:00:00 2001
From: CrabSAMA <71915282@qq.com>
Date: Tue, 19 Aug 2025 16:30:28 +0800
Subject: [PATCH 3/5] chore: PluginDetailsTable add aria role to simulate table
 with flex div layout

---
 .../components/data/PluginDetailsTable.vue    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index 2f56c726c..bf626c2ca 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -71,12 +71,12 @@ function toggleDurationSortType() {
 </script>
 
 <template>
-  <div w-full>
-    <div class="sticky top-0 z10 border-b border-base" flex="~ row">
-      <div v-if="selectedFields.includes('hookName')" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
+  <div role="table" w-full>
+    <div role="row" class="sticky top-0 z10 border-b border-base" flex="~ row">
+      <div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
         Hook name
       </div>
-      <div v-if="selectedFields.includes('module')" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
+      <div v-if="selectedFields.includes('module')" role="columnheader" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
         <button flex="~ row gap1 items-center" w-full>
           Module
           <VMenu>
@@ -108,13 +108,13 @@ function toggleDurationSortType() {
           </VMenu>
         </button>
       </div>
-      <div v-if="selectedFields.includes('startTime')" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+      <div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
         Start Time
       </div>
-      <div v-if="selectedFields.includes('endTime')" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+      <div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
         End Time
       </div>
-      <div v-if="selectedFields.includes('duration')" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
+      <div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
         <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
           Duration
           <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
@@ -126,19 +126,21 @@ function toggleDurationSortType() {
 
     <DataVirtualList
       v-if="filtered.length"
+      role="rowgroup"
       :items="filtered"
       key-prop="id"
     >
       <template #default="{ item, index }">
         <div
+          role="row"
           flex="~ row"
           class="border-base border-b-1 border-dashed"
           :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
         >
-          <div v-if="selectedFields.includes('hookName')" flex="~ items-center justify-center" flex-none w32 ws-nowrap text-sm op80>
+          <div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap text-sm op80>
             {{ HOOK_NAME_MAP[item.type] }}
           </div>
-          <div v-if="selectedFields.includes('module')" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
+          <div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
             <DisplayModuleId
               :id="item.module"
               w-full border-none
@@ -148,13 +150,13 @@ function toggleDurationSortType() {
               border="~ base rounded" block px2 py1
             />
           </div>
-          <div v-if="selectedFields.includes('startTime')" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+          <div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
             <time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
           </div>
-          <div v-if="selectedFields.includes('endTime')" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+          <div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
             <time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
           </div>
-          <div v-if="selectedFields.includes('duration')" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
+          <div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
             <DisplayDuration :duration="item.duration" />
           </div>
         </div>

From 4480ab3708c918f9f69b2013c9b4a8c8bea699d2 Mon Sep 17 00:00:00 2001
From: CrabSAMA <71915282@qq.com>
Date: Tue, 19 Aug 2025 16:31:32 +0800
Subject: [PATCH 4/5] chore: add known issue FIXME

---
 .../src/app/components/data/PluginDetailsTable.vue           | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index bf626c2ca..6ffa36ec6 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -71,6 +71,11 @@ function toggleDurationSortType() {
 </script>
 
 <template>
+  <!--
+    FIXME:
+    when none selected column, the table virtual list will render many empty rows.
+    next time select some columns, the virtual list will have some render issues
+  -->
   <div role="table" w-full>
     <div role="row" class="sticky top-0 z10 border-b border-base" flex="~ row">
       <div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>

From fd347c991969173aed633aa4898433d535bdc3fa Mon Sep 17 00:00:00 2001
From: CrabSAMA <71915282@qq.com>
Date: Tue, 19 Aug 2025 16:51:16 +0800
Subject: [PATCH 5/5] feat: add selectedFields empty tips case handler,
 optimize render effect and avoid unnecessary empty row rendered

---
 .../src/app/components/data/PluginDetailsTable.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index 6ffa36ec6..0fb0f9e92 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -71,11 +71,6 @@ function toggleDurationSortType() {
 </script>
 
 <template>
-  <!--
-    FIXME:
-    when none selected column, the table virtual list will render many empty rows.
-    next time select some columns, the virtual list will have some render issues
-  -->
   <div role="table" w-full>
     <div role="row" class="sticky top-0 z10 border-b border-base" flex="~ row">
       <div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
@@ -130,7 +125,7 @@ function toggleDurationSortType() {
     </div>
 
     <DataVirtualList
-      v-if="filtered.length"
+      v-if="filtered.length && selectedFields.length"
       role="rowgroup"
       :items="filtered"
       key-prop="id"
@@ -170,7 +165,12 @@ function toggleDurationSortType() {
     <div v-else>
       <div p4>
         <div w-full h-48 flex="~ items-center justify-center" op50 italic>
-          No data
+          <p v-if="!selectedFields.length">
+            No columns selected
+          </p>
+          <p v-else>
+            No data
+          </p>
         </div>
       </div>
     </div>