ui: fixup

frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx

@@ -46,6 +46,7 @@ function ConsoleRow(props: Props) {
   const titleLine = lines[0];
   const restLines = lines.slice(1);
   const logSource = props.showSingleTab ? -1 : props.getTabNum(log.tabId);
+  const logTabId = log.tabId
   return (
     <div
       style={style}
@@ -60,7 +61,7 @@ function ConsoleRow(props: Props) {
       )}
       onClick={clickable ? () => (!!log.errorId ? props.onClick?.() : toggleExpand()) : undefined}
     >
-      {logSource !== -1 && <TabTag tabNum={logSource} />}
+      {logSource !== -1 && <TabTag logSource={logSource} logTabId={logTabId} />}
       <Icon size="14" {...iconProps} className='mt-0.5' />
       <div key={log.key} data-scroll-item={log.isRed}>
         <div className="flex items-start text-sm">

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -173,6 +173,7 @@ function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
     domBuildingTime,
     tabStates,
     currentTab,
+    tabNames,
   } = store.get();
   const tabsArr = Object.keys(tabStates);
   const tabValues = Object.values(tabStates);
@@ -212,7 +213,7 @@ function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
     }
   }, [currentTab, tabStates, dataSource, tabValues]);
   const getTabNum = (tab: string) => tabsArr.findIndex((t) => t === tab) + 1;
-
+  const getTabName = (tabId: string) => tabNames[tabId]
   return (
     <NetworkPanelComp
       loadTime={loadTime}
@@ -228,6 +229,7 @@ function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
       websocketList={websocketList as WSMessage[]}
       websocketListNow={websocketListNow as WSMessage[]}
       getTabNum={getTabNum}
+      getTabName={getTabName}
       showSingleTab={showSingleTab}
     />
   );
@@ -311,6 +313,7 @@ interface Props {
   activeOutsideIndex?: number;
   isSpot?: boolean;
   getTabNum?: (tab: string) => number;
+  getTabName?: (tabId: string) => string;
   showSingleTab?: boolean;
 }
 
@@ -336,6 +339,7 @@ export const NetworkPanelComp = observer(
     isSpot,
     getTabNum,
     showSingleTab,
+    getTabName,
   }: Props) => {
     const [selectedWsChannel, setSelectedWsChannel] = React.useState<
       WsChannel[] | null
@@ -566,9 +570,8 @@ export const NetworkPanelComp = observer(
           label: 'Source',
           width: 64,
           render: (r: Record<string, any>) => (
-            <Tooltip title="@Nikita show tab title here..." placement="left">
+            <Tooltip title={`${getTabName?.(r.tabId) ?? `Tab ${getTabNum?.(r.tabId) ?? 0}`}`} placement="left">
               <div className="bg-gray-light rounded-full min-w-5 min-h-5 w-5 h-5 flex items-center justify-center text-xs cursor-default">
-                {' '}
                 {getTabNum?.(r.tabId) ?? 0}
               </div>
             </Tooltip>

frontend/app/components/shared/DevTools/TabTag.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
 import { Tooltip } from 'antd';
+import { observer } from 'mobx-react-lite';
+import { PlayerContext } from 'Components/Session/playerContext';
+
+function TabTag({ logSource }: { logSource: number; logTabId: string }) {
+  const { store } = React.useContext(PlayerContext);
+  const { tabNames } = store.get();
 
-function TabTag({ tabNum }: { tabNum?: React.ReactNode }) {
   return (
-
-    <Tooltip title="@Nikita show tab title here..." placement='left'>
-    <div className={'bg-gray-light rounded-full min-w-5 min-h-5 w-5 h-5 flex items-center justify-center text-xs cursor-default'}>
-      {tabNum}
-    </div>
+    <Tooltip title={`${tabNames[logSource] ?? `Tab ${logSource}`}`} placement="left">
+      <div
+        className={
+          'bg-gray-light rounded-full min-w-5 min-h-5 w-5 h-5 flex items-center justify-center text-xs cursor-default'
+        }
+      >
+        {logSource}
+      </div>
     </Tooltip>
-  )
+  );
 }
 
-export default TabTag
+export default observer(TabTag);

frontend/app/player/web/TabManager.ts

@@ -194,6 +194,7 @@ export default class TabSessionManager {
     );
   }
 
+  firstTitleSet = false
   distributeMessage(msg: Message): void {
     this.lastMessageTs = msg.time;
     switch (msg.tp) {
@@ -234,6 +235,10 @@ export default class TabSessionManager {
       case MType.SetPageLocationDeprecated:
       case MType.SetPageLocation:
         this.locationManager.append(msg);
+        if ('documentTitle' in msg && !this.firstTitleSet) {
+          this.state.update({ tabNames: { ...this.state.get().tabNames, [this.id]: msg.documentTitle } });
+          this.firstTitleSet = true
+        }
         if (msg.navigationStart > 0) {
           this.loadedLocationManager.append(msg);
         }