feat(client): better formatting of network request files

harlan-zw · Jan 17, 2022 · 4e892da · 4e892da
1 parent cf67644
commit 4e892da
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/packages/client/components/Cell/CellNetworkRequests.vue b/packages/client/components/Cell/CellNetworkRequests.vue
@@ -44,9 +44,10 @@ const requestsMapped = computed(() => {
           <span>{{ group.count }} {{ resourceType }}s</span>
           <span class="opacity-70 ml-2">{{ group.size }}</span>
           <template #tooltip>
-            <div v-for="(item, key) in group.items" :key="key" class="mb-2">
-              <span class="break-all">{{ item.url.replace(website, '') }}</span>
-              <span class="opacity-70 ml-2">{{ formatBytes(item.transferSize) }}</span>
+            <div v-for="(item, key) in group.items" :key="key" class="mb-2 flex text-xs ">
+              <span class="break-all opacity-90 flex-grow"><a :href="item.url" class="hover:no-underline underline">{{ item.url.replace(website, '') }}</a></span>
+              <span class="opacity-70 whitespace-nowrap	 ml-2 flex-shrink break-none">{{ formatBytes(item.transferSize) }}</span>
+              <span class="opacity-70 whitespace-nowrap	 ml-2 flex-shrink">{{ Math.round(item.endTime - item.startTime) }}ms</span>
             </div>
           </template>
         </tooltip>