chrome-devtools-frontend 1.0.1724140 → 1.0.1726686

package/front_end/models/trace/handlers/FlowsHandler.ts

@@ -14,7 +14,7 @@ import * as Types from '../types/types.js';
 // included, while the amount of `step` phase events can be >= 0.
 
 // A flow phase event is assigned to a trace event when their cat, tid,
-// pid and ts are equal (see @flowPhaseBindingTokenForEvent ).
+// pid and ts are equal (see findBinding()).
 
 // It's possible for a single event to belong to multiple flows. In that
 // case, it will have multiple corresponding flow phase events (one
@@ -26,24 +26,27 @@ import * as Types from '../types/types.js';
 // there are any corresponding flow phase events at all).
 let flowDataByGroupToken = new Map<string, number>();
 
-interface EventFlowData {
+/**
+ * The flows bound to one flow binding tuple (timestamp, process id,
+ * thread id and category).
+ */
+interface FlowBinding {
+  ts: Types.Timing.Micro;
+  pid: Types.Events.ProcessID;
+  tid: Types.Events.ThreadID;
+  cat: string;
   flows: Set<number>;
   bindingParsed: boolean;
 }
-type FlowBindingTuple =
-    Map<Types.Timing.Micro, Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Map<string, EventFlowData>>>>;
-
-// Given a trace event's flow binding tuple (timestamp, process id,
-// thread id and category) we determine if there is any flow data bound
-// to it by using this map's content. It's built when processing flow
-// events in a trace.
-// An alternative to having a map of four levels is having single map
-// from a string token built from concatenating the binding data to the
-// corresponding flow data. However, this token would be calculated for
-// every event in a trace, resulting in a lot of memory overhead and
-// major GC triggering. So we are trading off readability for
-// performance.
-let boundFlowData: FlowBindingTuple = new Map();
+
+// Trace timestamps are microseconds and too large to be small integers
+// in V8, so a Map keyed by the timestamp hashes a heap number on every
+// lookup. Every non-flow event in a trace is looked up here, so this
+// map is keyed by the low 30 bits of the timestamp instead, which are
+// always a small integer. Bindings that share a key are told apart by
+// comparing the full flow binding tuple.
+const TS_KEY_MASK = 0x3fffffff;
+let boundFlowData = new Map<number, FlowBinding[]>();
 
 let flowsById = new Map<number, Map<Types.Timing.Micro, Types.Events.Event>>();
 let flowEvents: Types.Events.FlowEvent[] = [];
@@ -67,8 +70,17 @@ export function handleEvent(event: Types.Events.Event): void {
   nonFlowEvents.push(event);
 }
 
+function findBinding(bindings: FlowBinding[], event: Types.Events.Event): FlowBinding|undefined {
+  return bindings.find(binding => binding.ts === event.ts && binding.pid === event.pid && binding.tid === event.tid &&
+                           binding.cat === event.cat);
+}
+
 function processNonFlowEvent(event: Types.Events.Event): void {
-  const flowDataForEvent = boundFlowData.get(event.ts)?.get(event.pid)?.get(event.tid)?.get(event.cat);
+  const bindings = boundFlowData.get(event.ts & TS_KEY_MASK);
+  if (!bindings) {
+    return;
+  }
+  const flowDataForEvent = findBinding(bindings, event);
   if (!flowDataForEvent) {
     return;
   }
@@ -95,9 +107,8 @@ function processFlowEvent(flowPhaseEvent: Types.Events.FlowEvent): void {
   const flowGroup = flowGroupTokenForFlowPhaseEvent(flowPhaseEvent);
   switch (flowPhaseEvent.ph) {
     case (Types.Events.Phase.FLOW_START): {
-      const flowMetadata = {flowId: flowPhaseEvent.id, times: new Map([[flowPhaseEvent.ts, undefined]])};
       flowDataByGroupToken.set(flowGroup, flowPhaseEvent.id);
-      addFlowIdToEventBinding(flowPhaseEvent, flowMetadata.flowId);
+      addFlowIdToEventBinding(flowPhaseEvent, flowPhaseEvent.id);
       return;
     }
     case (Types.Events.Phase.FLOW_STEP): {
@@ -125,22 +136,19 @@ function processFlowEvent(flowPhaseEvent: Types.Events.FlowEvent): void {
   }
 }
 
-type MapValueType<T extends Map<unknown, unknown>> = NonNullable<ReturnType<T['get']>>;
 /**
  * A single trace event can belong to multiple flows. This method
  * tracks which flows (flowId) an event belongs to given its flow
  * binding tuple (made of its ts, pid, tid and cat).
  */
 function addFlowIdToEventBinding(event: Types.Events.Event, flowId: number): void {
-  const flowsByPid = Platform.MapUtilities.getWithDefault<Types.Timing.Micro, MapValueType<typeof boundFlowData>>(
-      boundFlowData, event.ts, () => new Map());
-  const flowsByTid = Platform.MapUtilities.getWithDefault<Types.Events.ProcessID, MapValueType<typeof flowsByPid>>(
-      flowsByPid, event.pid, () => new Map());
-  const flowsByCat = Platform.MapUtilities.getWithDefault<Types.Events.ThreadID, MapValueType<typeof flowsByTid>>(
-      flowsByTid, event.tid, () => new Map());
-  const flowData =
-      Platform.MapUtilities.getWithDefault(flowsByCat, event.cat, () => ({flows: new Set(), bindingParsed: false}));
-  flowData.flows.add(flowId);
+  const bindings = Platform.MapUtilities.getWithDefault(boundFlowData, event.ts & TS_KEY_MASK, () => []);
+  let binding = findBinding(bindings, event);
+  if (!binding) {
+    binding = {ts: event.ts, pid: event.pid, tid: event.tid, cat: event.cat, flows: new Set(), bindingParsed: false};
+    bindings.push(binding);
+  }
+  binding.flows.add(flowId);
 }
 
 /**

package/front_end/models/trace/helpers/SyntheticEvents.ts

@@ -8,12 +8,14 @@ let activeManager: SyntheticEventsManager|null = null;
 
 export class SyntheticEventsManager {
   /**
-   * All synthetic entries created in a trace from
-   * corresponding trace events.
-   * (ProfileCalls and layout shift clusters are excluded
-   * because they are not based on a real trace event.)
+   * All synthetic entries created in a trace, keyed by the raw trace event
+   * they are based on. (ProfileCalls and layout shift clusters are excluded
+   * because they are not based on a real trace event.) Keying by the raw
+   * event rather than by its index in the raw events array means
+   * registration does not need to look up the index, which would require a
+   * map of every raw event in the trace.
    */
-  #syntheticTraces: Types.Events.SyntheticBased[] = [];
+  #syntheticEventByRawEvent = new WeakMap<Types.Events.Event, Types.Events.SyntheticBased>();
   /**
    * All raw entries from a trace.
    */
@@ -56,55 +58,26 @@ export class SyntheticEventsManager {
     this.#rawTraceEvents = rawEvents;
   }
 
-  #rawEventIndexes: Map<Types.Events.Event, number>|null = null;
-
-  #getRawEventIndex(event: Types.Events.Event): number {
-    if (!this.#rawEventIndexes) {
-      this.#rawEventIndexes = new Map();
-      for (let i = 0; i < this.#rawTraceEvents.length; i++) {
-        this.#rawEventIndexes.set(this.#rawTraceEvents[i], i);
-      }
-    }
-    return this.#rawEventIndexes.get(event) ?? -1;
-  }
-
-  /**
-   * Clears the transient raw event index map.
-   * During trace parsing, this map provides O(1) lookups for registering synthetic events.
-   * Once parsing is complete, queries look up synthetic events exclusively by index in
-   * `#syntheticTraces`, so this map is discarded to reclaim memory.
-   */
-  clearRegistrationIndex(): void {
-    this.#rawEventIndexes = null;
-  }
-
   /**
    * Registers and returns a branded synthetic event. Synthetic events need to
    * be created with this method to ensure they are registered and made
    * available to load events using serialized keys.
    */
   #registerSyntheticEvent<T extends Types.Events.SyntheticBased>(syntheticEvent: Omit<T, '_tag'>): T {
-    const rawIndex = this.#getRawEventIndex(syntheticEvent.rawSourceEvent);
-    if (rawIndex < 0) {
-      throw new Error('Attempted to register a synthetic event paired to an unknown raw event.');
-    }
     const eventAsSynthetic = syntheticEvent as T;
-    this.#syntheticTraces[rawIndex] = eventAsSynthetic;
+    this.#syntheticEventByRawEvent.set(syntheticEvent.rawSourceEvent, eventAsSynthetic);
     return eventAsSynthetic;
   }
 
   syntheticEventForRawEventIndex(rawEventIndex: number): Types.Events.SyntheticBased {
-    const syntheticEvent = this.#syntheticTraces.at(rawEventIndex);
+    const rawEvent = this.#rawTraceEvents.at(rawEventIndex);
+    const syntheticEvent = rawEvent && this.#syntheticEventByRawEvent.get(rawEvent);
     if (!syntheticEvent) {
       throw new Error(`Attempted to get a synthetic event from an unknown raw event index: ${rawEventIndex}`);
     }
     return syntheticEvent;
   }
 
-  getSyntheticTraces(): Types.Events.SyntheticBased[] {
-    return this.#syntheticTraces;
-  }
-
   getRawTraceEvents(): readonly Types.Events.Event[] {
     return this.#rawTraceEvents;
   }

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -82,18 +82,20 @@ function getNodesAndTimingByRequestId(nodeTimings: Lantern.Simulation.Result['no
 
     let duration = nodeTiming.duration;
     let startTime = nodeTiming.startTime;
+    let queuedTime = nodeTiming.queuedTime;
     for (const redirect of node.request.redirects ?? []) {
       const redirectTiming = timingByNodeId.get(redirect.requestId);
       if (redirectTiming) {
         duration += redirectTiming.duration;
         startTime = Math.min(startTime, redirectTiming.startTime);
+        queuedTime = Math.min(queuedTime, redirectTiming.queuedTime);
       }
     }
 
     const backendRequestId = node.request.rawRequest?.args.data.requestId ?? node.request.requestId;
     requestIdToNode.set(backendRequestId, {
       node,
-      nodeTiming: {startTime, endTime: nodeTiming.endTime, duration},
+      nodeTiming: {startTime, endTime: nodeTiming.endTime, queuedTime, duration},
     });
   }
 

package/front_end/models/trace/lantern/simulation/Simulator.ts

@@ -262,6 +262,9 @@ class Simulator<T = Lantern.AnyNetworkObject> {
       if (!connection) {
         return;
       }
+      if (this.nodeTimings.getQueued(node).queuedTime === totalElapsedTime) {
+        connection.setH2OverflowBytesDownloaded(0);
+      }
     }
 
     this.markNodeAsInProgress(node, totalElapsedTime);
@@ -430,6 +433,7 @@ class Simulator<T = Lantern.AnyNetworkObject> {
             {
               startTime: timing.startTime,
               endTime: timing.endTime,
+              queuedTime: timing.queuedTime,
               duration: timing.endTime - timing.startTime,
             },
           ];

package/front_end/models/trace/lantern/types/Lantern.ts

@@ -233,6 +233,7 @@ export namespace Simulation {
   export interface NodeTiming {
     startTime: number;
     endTime: number;
+    queuedTime: number;
     duration: number;
   }
 }

package/front_end/panels/accessibility/SourceOrderView.ts

@@ -72,7 +72,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       }
       <devtools-checkbox class="source-order-checkbox"
                           jslog=${VisualLogging.toggle().track({click: true})}
-                          ?checked=${input.showSourceOrder}
+                          .checked=${Boolean(input.showSourceOrder)}
                           @change=${onShowSourceOrderChanged}>
         ${i18nString(UIStrings.showSourceOrder)}
       </devtools-checkbox>

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -81,6 +81,7 @@ import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js'
 import {ServiceWorkersView} from './ServiceWorkersView.js';
 import {StorageBucketsTreeParentElement} from './StorageBucketsTreeElement.js';
 import {StorageView} from './StorageView.js';
+import {type SubAppEntry, SubAppsView} from './SubAppsView.js';
 import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
 import {WebMCPTreeElement} from './WebMCPTreeElement.js';
 
@@ -97,6 +98,14 @@ const UIStrings = {
    * @description Context menu item to explain cookies with AI in the Application panel sidebar.
    */
   explainCookies: 'Explain cookies',
+  /**
+   * @description Tree item label for Sub Apps in the sidebar of the Application panel.
+   */
+  subApps: 'Sub apps',
+  /**
+   * @description Tree item label for Sibling Sub Apps in the sidebar of the Application panel.
+   */
+  siblingSubApps: 'Sibling sub apps',
   /**
    * @description Section header for the application section in the sidebar of the Application panel.
    */
@@ -335,6 +344,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   pushMessagingTreeElement: BackgroundServiceTreeElement;
   reportingApiTreeElement: ReportingApiTreeElement;
   webMcpTreeElement?: WebMCPTreeElement;
+  subAppsTreeElement: SubAppsTreeElement;
   adsTreeElement?: ApplicationPanelTreeElement;
   storageTreeElement?: StorageTreeElement;
   deviceBoundSessionsRootTreeElement: DeviceBoundSessionsRootTreeElement|undefined;
@@ -374,6 +384,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     const manifestTreeElement = new AppManifestTreeElement(panel);
     this.applicationTreeElement.appendChild(manifestTreeElement);
     manifestTreeElement.generateChildren();
+    this.subAppsTreeElement = new SubAppsTreeElement(panel);
+    this.applicationTreeElement.appendChild(this.subAppsTreeElement);
     this.serviceWorkersTreeElement = new ServiceWorkersTreeElement(panel);
     this.applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
     this.storageTreeElement = new StorageTreeElement(panel);
@@ -623,6 +635,11 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     if (preloadingModel) {
       this.preloadingSummaryTreeElement?.initialize(preloadingModel);
     }
+
+    const resourceTreeModel = this.target?.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    if (resourceTreeModel) {
+      void this.subAppsTreeElement.update(resourceTreeModel);
+    }
   }
 
   private domStorageModelAdded(model: SDK.DOMStorageModel.DOMStorageModel): void {
@@ -721,6 +738,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     if (frame.isOutermostFrame()) {
       this.reset();
+      void this.subAppsTreeElement.update(frame.resourceTreeModel());
       const selectedElement = this.sidebarTree.selectedTreeElement;
       if (selectedElement instanceof ExpandableApplicationPanelTreeElement) {
         // Only update AI Assistance storage context for expandable category headers,
@@ -1146,6 +1164,78 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
   }
 }
 
+export class SubAppsTreeElement extends ApplicationPanelTreeElement {
+  #view?: SubAppsView;
+  #subApps: SubAppEntry[] = [];
+  #isSubApp = false;
+  #latestUpdate?: Promise<void>;
+
+  constructor(storagePanel: ResourcesPanel) {
+    super(storagePanel, i18nString(UIStrings.subApps), false, 'sub-apps');
+    const icon = createIcon('table');
+    this.setLeadingIcons([icon]);
+    this.hidden = true;
+  }
+
+  override get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'sub-apps://' as Platform.DevToolsPath.UrlString;
+  }
+
+  override onselect(selectedByUser?: boolean): boolean {
+    super.onselect(selectedByUser);
+    if (!this.#view) {
+      this.#view = new SubAppsView();
+    }
+    this.#view.subApps = this.#subApps;
+    this.#view.isSiblingSubApps = this.#isSubApp;
+    this.showView(this.#view);
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('sub-apps');
+    return false;
+  }
+
+  /**
+   * Fetches the Sub Apps of the inspected app, or its Sibling Sub Apps when
+   * the inspected app is itself a Sub App. Only the most recent update is
+   * applied; results of superseded updates are dropped.
+   */
+  update(resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel): Promise<void> {
+    const subAppsFetch = Promise.all([resourceTreeModel.getSubApps(), resourceTreeModel.getSiblingSubApps()]);
+    const update: Promise<void> = subAppsFetch.then(([subApps, siblingSubApps]) => {
+      if (update !== this.#latestUpdate) {
+        return;
+      }
+      if (siblingSubApps.length > 0) {
+        this.#setSubApps(siblingSubApps, /* isSubApp= */ true);
+      } else {
+        this.#setSubApps(subApps, /* isSubApp= */ false);
+      }
+    });
+    this.#latestUpdate = update;
+    return update;
+  }
+
+  get latestUpdateForTest(): Promise<void>|undefined {
+    return this.#latestUpdate;
+  }
+
+  #setSubApps(subApps: SubAppEntry[], isSubApp: boolean): void {
+    this.#subApps = subApps;
+    this.#isSubApp = isSubApp;
+    this.hidden = subApps.length === 0;
+    const title = isSubApp ? i18nString(UIStrings.siblingSubApps) : i18nString(UIStrings.subApps);
+    this.title = title;
+    UI.ARIAUtils.setLabel(this.listItemElement, title);
+    if (this.#view) {
+      this.#view.subApps = this.#subApps;
+      this.#view.isSiblingSubApps = this.#isSubApp;
+    }
+  }
+
+  getSubApps(): SubAppEntry[] {
+    return this.#subApps;
+  }
+}
+
 export class StorageTreeElement extends ApplicationPanelTreeElement {
   private view?: StorageView;
   constructor(storagePanel: ResourcesPanel) {