fix(ui): fix tab change styling and borders, add url

frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js

@@ -108,7 +108,7 @@ class EventGroupWrapper extends React.Component {
               isLastInGroup={isLastInGroup}
               whiteBg={true}
             />
-          ) : isTabChange ? (<TabChange from={event.fromTab} to={event.toTab} />) : (
+          ) : isTabChange ? (<TabChange from={event.fromTab} to={event.toTab} activeUrl={event.activeUrl} />) : (
             <Event
               key={event.key}
               event={event}
@@ -130,20 +130,24 @@ class EventGroupWrapper extends React.Component {
   }
 }
 
-function TabChange({ from, to }) {
+function TabChange({ from, to, activeUrl }) {
     if (!from) {
         return null;
     }
     return (
-        <div className={'text-center p-2 bg-gray-lightest w-full my-2 flex items-center gap-2 justify-center'}>
-          <span>Tab change:</span>
-          <span style={{ fontWeight: 500 }}>
-            {from}
-          </span>
-          <Icon name={"arrow-right-short"} size={18} color={"gray-dark"}/>
-          <span style={{ fontWeight: 500 }}>
-            {to}
-          </span>
+        <div className={'p-2 bg-gray-lightest w-full my-2 border-gray-light border-t border-b !border-l-0 !border-r-0'}>
+            <div className={'flex items-center gap-2 px-4'}>
+              <span style={{ fontWeight: 500 }}>
+                {from}
+              </span>
+              <Icon name={"arrow-right-short"} size={18} color={"gray-dark"}/>
+              <span style={{ fontWeight: 500 }}>
+                {to}
+              </span>
+            </div>
+            <div className={'break-words mt-1 px-4 text-sm font-normal color-gray-medium'}>
+                {activeUrl}
+            </div>
         </div>
     )
 }

frontend/app/components/Session_/EventsBlock/EventsBlock.tsx

@@ -55,6 +55,19 @@ function EventsBlock(props: IProps) {
 
   const currentTimeEventIndex = eventListNow.length > 0 ? eventListNow.length - 1 : 0;
   const usedEvents = React.useMemo(() => {
+    tabChangeEvents.forEach(ev => {
+      const urlsList = tabStates[ev.tabId].urlsList;
+      let found = false;
+      let i = urlsList.length - 1;
+      while (!found && i >= 0) {
+        const item = urlsList[i]
+        if (item.url && item.time <= ev.mTime) {
+          found = true;
+          ev.activeUrl = item.url.replace(/.*\/\/[^\/]*/, '');
+        }
+        i--;
+      }
+    })
     return mergeEventLists(filteredEvents || notesWithEvents, tabChangeEvents);
   }, [filteredLength, notesWithEvtsLength])
 

frontend/app/player/web/MessageManager.ts

@@ -258,6 +258,7 @@ export default class MessageManager {
         if (!prevChange || prevChange.tabId !== msg.tabId) {
           this.tabChangeEvents.push({
             tabId: msg.tabId,
+            mTime: msg.time,
             timestamp: this.sessionStart + msg.time,
             toTab: mapTabs(this.tabs)[msg.tabId],
             fromTab: prevChange?.tabId ? mapTabs(this.tabs)[prevChange.tabId] : '',

frontend/app/player/web/TabManager.ts

@@ -41,8 +41,8 @@ export default class TabSessionManager {
     location: '',
   }
 
+  public locationManager: ListWalker<SetPageLocation> = new ListWalker();
   private locationEventManager: ListWalker<any>/*<LocationEvent>*/ = new ListWalker();
-  private locationManager: ListWalker<SetPageLocation> = new ListWalker();
   private loadedLocationManager: ListWalker<SetPageLocation> = new ListWalker();
   private connectionInfoManger: ListWalker<ConnectionInformation> = new ListWalker();
   private performanceTrackManager: PerformanceTrackManager = new PerformanceTrackManager();
@@ -311,6 +311,7 @@ export default class TabSessionManager {
     const stateToUpdate : Partial<Record<string,any>> = {
       performanceChartData: this.performanceTrackManager.chartData,
       performanceAvailability: this.performanceTrackManager.availability,
+      urlsList: this.locationManager.list,
       ...this.lists.getFullListsState(),
     }