chrome-devtools-frontend 1.0.1515988 → 1.0.1518653

package/front_end/models/badges/UserBadges.ts

@@ -4,9 +4,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as Root from '../../core/root/root.js';
 
 import {AiExplorerBadge} from './AiExplorerBadge.js';
-import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext} from './Badge.js';
+import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext, TriggerOptions} from './Badge.js';
 import {CodeWhispererBadge} from './CodeWhispererBadge.js';
 import {DOMDetectiveBadge} from './DOMDetectiveBadge.js';
 import {SpeedsterBadge} from './SpeedsterBadge.js';
@@ -22,6 +23,10 @@ export interface EventTypes {
   [Events.BADGE_TRIGGERED]: Badge;
 }
 
+const SNOOZE_TIME_MS = 24 * 60 * 60 * 1000;  // 24 hours
+const MAX_SNOOZE_COUNT = 3;
+const DELAY_BEFORE_TRIGGER = 1500;
+
 let userBadgesInstance: UserBadges|undefined = undefined;
 export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #badgeActionEventTarget = new Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>();
@@ -29,6 +34,10 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #receiveBadgesSetting: Common.Settings.Setting<Boolean>;
   #allBadges: Badge[];
 
+  #starterBadgeSnoozeCount: Common.Settings.Setting<number>;
+  #starterBadgeLastSnoozedTimestamp: Common.Settings.Setting<number>;
+  #starterBadgeDismissed: Common.Settings.Setting<boolean>;
+
   static readonly BADGE_REGISTRY: BadgeClass[] = [
     StarterBadge,
     SpeedsterBadge,
@@ -41,8 +50,19 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     super();
 
     this.#receiveBadgesSetting = Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges');
+    if (Host.GdpClient.getGdpProfilesEnterprisePolicy() ===
+        Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED_WITHOUT_BADGES) {
+      this.#receiveBadgesSetting.set(false);
+    }
     this.#receiveBadgesSetting.addChangeListener(this.#reconcileBadges, this);
 
+    this.#starterBadgeSnoozeCount = Common.Settings.Settings.instance().createSetting(
+        'starter-badge-snooze-count', 0, Common.Settings.SettingStorageType.SYNCED);
+    this.#starterBadgeLastSnoozedTimestamp = Common.Settings.Settings.instance().createSetting(
+        'starter-badge-last-snoozed-timestamp', 0, Common.Settings.SettingStorageType.SYNCED);
+    this.#starterBadgeDismissed = Common.Settings.Settings.instance().createSetting(
+        'starter-badge-dismissed', false, Common.Settings.SettingStorageType.SYNCED);
+
     this.#allBadges = UserBadges.BADGE_REGISTRY.map(badgeCtor => new badgeCtor({
                                                       onTriggerBadge: this.#onTriggerBadge.bind(this),
                                                       badgeActionEventTarget: this.#badgeActionEventTarget,
@@ -60,6 +80,15 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     return await this.#reconcileBadges();
   }
 
+  snoozeStarterBadge(): void {
+    this.#starterBadgeSnoozeCount.set(this.#starterBadgeSnoozeCount.get() + 1);
+    this.#starterBadgeLastSnoozedTimestamp.set(Date.now());
+  }
+
+  dismissStarterBadge(): void {
+    this.#starterBadgeDismissed.set(true);
+  }
+
   recordAction(action: BadgeAction): void {
     // `Common.ObjectWrapper.ObjectWrapper` does not allow passing unions to
     // the `dispatchEventToListeners` and `action` in this case is a union.
@@ -70,7 +99,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#badgeActionEventTarget.dispatchEventToListeners(action);
   }
 
-  async #onTriggerBadge(badge: Badge): Promise<void> {
+  async #onTriggerBadge(badge: Badge, opts?: TriggerOptions): Promise<void> {
+    const triggerTime = Date.now();
     let shouldAwardBadge = false;
     // By default, we award non-starter badges directly when they are triggered.
     if (!badge.isStarterBadge) {
@@ -79,7 +109,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
       const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting.get());
       // If there is a GDP profile and the user has enabled receiving badges, we award the starter badge as well.
-      if (gdpProfile && receiveBadgesSettingEnabled) {
+      if (gdpProfile && receiveBadgesSettingEnabled && !this.#isStarterBadgeDismissed() &&
+          !this.#isStarterBadgeSnoozed()) {
         shouldAwardBadge = true;
       }
     }
@@ -92,7 +123,12 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       }
     }
 
-    this.dispatchEventToListeners(Events.BADGE_TRIGGERED, badge);
+    const timeElapsedAfterTriggerCall = Date.now() - triggerTime;
+    // We want to add exactly 1.5 second delay between the trigger action & the notification.
+    const delay = opts?.immediate ? 0 : Math.max(DELAY_BEFORE_TRIGGER - timeElapsedAfterTriggerCall, 0);
+    setTimeout(() => {
+      this.dispatchEventToListeners(Events.BADGE_TRIGGERED, badge);
+    }, delay);
   }
 
   #deactivateAllBadges(): void {
@@ -101,7 +137,17 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     });
   }
 
-  // TODO(ergunsh): Implement starter badge dismissal, snooze count & timestamp checks.
+  #isStarterBadgeDismissed(): boolean {
+    return this.#starterBadgeDismissed.get();
+  }
+
+  #isStarterBadgeSnoozed(): boolean {
+    const snoozeCount = this.#starterBadgeSnoozeCount.get();
+    const lastSnoozed = this.#starterBadgeLastSnoozedTimestamp.get();
+    const snoozedRecently = (Date.now() - lastSnoozed) < SNOOZE_TIME_MS;
+    return snoozeCount >= MAX_SNOOZE_COUNT || snoozedRecently;
+  }
+
   async #reconcileBadges(): Promise<void> {
     const syncInfo = await new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
         resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve));
@@ -111,6 +157,12 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       return;
     }
 
+    if (!Host.GdpClient.isGdpProfilesAvailable() ||
+        Host.GdpClient.getGdpProfilesEnterprisePolicy() !== Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED) {
+      this.#deactivateAllBadges();
+      return;
+    }
+
     const [gdpProfile, isEligibleToCreateProfile] = await Promise.all([
       Host.GdpClient.GdpClient.instance().getProfile(),
       Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile(),
@@ -148,7 +200,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
         continue;
       }
 
-      const shouldActivateStarterBadge = badge.isStarterBadge && isEligibleToCreateProfile;
+      const shouldActivateStarterBadge = badge.isStarterBadge && isEligibleToCreateProfile &&
+          !this.#isStarterBadgeDismissed() && !this.#isStarterBadgeSnoozed();
       const shouldActivateActivityBasedBadge =
           !badge.isStarterBadge && Boolean(gdpProfile) && receiveBadgesSettingEnabled;
       if (shouldActivateStarterBadge || shouldActivateActivityBasedBadge) {

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -7,8 +7,6 @@ import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterA
 
 export {DefinitionKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
 
-const MAX_WORKERS = Math.max(2, navigator.hardwareConcurrency - 1);
-
 let formatterWorkerPoolInstance: FormatterWorkerPool;
 
 export class FormatterWorkerPool {
@@ -37,12 +35,14 @@ export class FormatterWorkerPool {
   }
 
   private processNextTask(): void {
+    const maxWorkers = Math.max(2, navigator.hardwareConcurrency - 1);
+
     if (!this.taskQueue.length) {
       return;
     }
 
     let freeWorker = [...this.workerTasks.keys()].find(worker => !this.workerTasks.get(worker));
-    if (!freeWorker && this.workerTasks.size < MAX_WORKERS) {
+    if (!freeWorker && this.workerTasks.size < maxWorkers) {
       freeWorker = this.createWorker();
     }
     if (!freeWorker) {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -8470,7 +8470,7 @@ export const NativeFunctions = [
   },
   {
     name: "submitPrintJob",
-    signatures: [["job_name","document","attributes"]]
+    signatures: [["job_name","document_data","attributes"]]
   },
   {
     name: "PushEvent",

package/front_end/models/trace/README.md

@@ -31,7 +31,7 @@ This folder contains the new trace engine that was first implemented for the Per
                          │
                          │
       ┌──────────────────▼─────────────────┐
-      │const data = model.parsedTrace()│
+      │const data = model.parsedTrace()    │
       └────────────────────────────────────┘
 ```
 
@@ -98,3 +98,30 @@ The object returned from `parsedTrace()` is an object of key-value pairs where e
   // and so on for each enabled Handler
 }
 ```
+
+## Pairing begin & end events
+
+Note: this detail is not useful if you are using the Trace Engine, but it is if you are working on it.
+
+Trace events are often emitted as `begin` & `end` events to represent the lifetime of the event. These have the `b` and `e` phase.
+
+When we find these events, we often try to pair them into what we call a "Synthetic" event. This is a trace event that doesn't exist in the raw trace, but one that we create to make it easier to deal with. This means we can represent a `b` & `e` pair as a single event rather than pass two events around.
+
+When we pair these events, we look for an ID. Some events have a top level `id` field, others have a nested `id2.local` field (this is for various historical reasons). `getSyntheticId` in `Trace.Helpers` takes care of this, and tries to account for potential collisions by appending a few other pieces of metadata onto the ID.
+
+This approach worked well until July 2025 when an upstream change in Perfetto [https://chromium.googlesource.com/external/github.com/google/perfetto.git/+/aef636b27ffbf379fd722e7798030da2c5c4d699] meant that Perfetto will try to minimise the amount of unique IDs it uses. A consequence of this change is that IDs can be reused by consecutive, non-overlapping events.
+
+For example, take the following set of events:
+
+```
+=== E1 === === E2 ===
+```
+
+These could have the same ID, because they do not overlap.
+
+Whereas these events will have different IDs because otherwise you cannot reliably pair them up:
+
+```
+=== E1 ===
+  === E2 ===
+```

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

@@ -223,9 +223,9 @@ export async function finalize(): Promise<void> {
 
 export function data(): UserTimingsData {
   return {
+    consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console') as Types.Events.SyntheticConsoleTimingPair[],
     performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing') as
         Types.Events.SyntheticUserTimingPair[],
-    consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console') as Types.Events.SyntheticConsoleTimingPair[],
     performanceMarks: performanceMarkEvents,
     timestampEvents,
     measureTraceByTraceId,

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

@@ -12,6 +12,7 @@ import {SyntheticEventsManager} from './SyntheticEvents.js';
 import {eventTimingsMicroSeconds} from './Timing.js';
 
 interface MatchingPairableAsyncEvents {
+  syntheticId: string;
   begin: Types.Events.PairableAsyncBegin|null;
   end: Types.Events.PairableAsyncEnd|null;
   instant?: Types.Events.PairableAsyncInstant[];
@@ -290,62 +291,113 @@ export function makeProfileCall(
 }
 
 /**
- * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant (ASYNC_NESTABLE_INSTANT)
- * if provided, though currently only coming from Animations. Traces may contain multiple instant events so we need to
- * account for that.
+ * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant
+ * if provided. Traces may contain multiple instant events so we need to
+ * account for that. Additionally we have seen cases where we might only have a
+ * begin event & instant event(s), with no end event. So we account for that
+ * situation also.
  *
- * @returns Map of the animation's ID to it's matching events.
+ * You might also like to read the models/trace/README.md which has some
+ * documentation on trace IDs. This is important as Perfetto will reuse trace
+ * IDs when emitting events (if they do not overlap). This means it's not as
+ * simple as grouping events by IDs. Instead, we group begin & instant events
+ * by ID as we find them. When we find end events, we then pop any matching
+ * begin/instant events off the stack and group those. That way, if we meet the
+ * same ID later on it doesn't cause us collisions.
+ *
+ * @returns An array of all the matched event groups, along with their ID. Note
+ * that two event groups can have the same ID if they were non-overlapping
+ * events. You cannot rely on ID being unique across a trace. The returned set
+ * of groups are NOT SORTED in any order.
  */
-export function matchEvents(unpairedEvents: Types.Events.PairableAsync[]): Map<string, MatchingPairableAsyncEvents> {
+function matchEvents(unpairedEvents: Types.Events.PairableAsync[]): MatchingPairableAsyncEvents[] {
+  sortTraceEventsInPlace(unpairedEvents);
   // map to store begin and end of the event
-  const matchedPairs = new Map<string, MatchingPairableAsyncEvents>();
+  const matches: MatchingPairableAsyncEvents[] = [];
 
-  // looking for start and end
+  const beginEventsById = new Map<string, Types.Events.PairableAsyncBegin[]>();
+  const instantEventsById = new Map<string, Types.Events.PairableAsyncInstant[]>();
   for (const event of unpairedEvents) {
-    const syntheticId = getSyntheticId(event);
-    if (syntheticId === undefined) {
+    const id = getSyntheticId(event);
+    if (id === undefined) {
       continue;
     }
-    // Create a synthetic id to prevent collisions across categories.
-    // Console timings can be dispatched with the same id, so use the
-    // event name as well to generate unique ids.
-    const otherEventsWithID = Platform.MapUtilities.getWithDefault(matchedPairs, syntheticId, () => {
-      return {begin: null, end: null, instant: []};
-    });
-
-    const isStartEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_START;
-    const isEndEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_END;
-    const isInstantEvent = event.ph === Types.Events.Phase.ASYNC_NESTABLE_INSTANT;
-
-    if (isStartEvent) {
-      otherEventsWithID.begin = event as Types.Events.PairableAsyncBegin;
-    } else if (isEndEvent) {
-      otherEventsWithID.end = event as Types.Events.PairableAsyncEnd;
-    } else if (isInstantEvent) {
-      if (!otherEventsWithID.instant) {
-        otherEventsWithID.instant = [];
+    if (Types.Events.isPairableAsyncBegin(event)) {
+      const existingEvents = beginEventsById.get(id) ?? [];
+      existingEvents.push(event);
+      beginEventsById.set(id, existingEvents);
+    } else if (Types.Events.isPairableAsyncInstant(event)) {
+      const existingEvents = instantEventsById.get(id) ?? [];
+      existingEvents.push(event);
+      instantEventsById.set(id, existingEvents);
+    } else if (Types.Events.isPairableAsyncEnd(event)) {
+      // Find matching begin event by ID
+      const beginEventsWithMatchingId = beginEventsById.get(id) ?? [];
+      const beginEvent = beginEventsWithMatchingId.pop();
+      if (!beginEvent) {
+        continue;
       }
-      otherEventsWithID.instant.push(event as Types.Events.PairableAsyncInstant);
+      const instantEventsWithMatchingId = instantEventsById.get(id) ?? [];
+      // Find all instant events after the begin event ts.
+      const instantEventsForThisGroup: Types.Events.PairableAsyncInstant[] = [];
+      while (instantEventsWithMatchingId.length > 0) {
+        if (instantEventsWithMatchingId[0].ts >= beginEvent.ts) {
+          const event = instantEventsWithMatchingId.pop();
+          if (event) {
+            instantEventsForThisGroup.push(event);
+          }
+        } else {
+          break;
+        }
+      }
+      const matchingGroup: MatchingPairableAsyncEvents = {
+        begin: beginEvent,
+        end: event,
+        instant: instantEventsForThisGroup,
+        syntheticId: id,
+      };
+      matches.push(matchingGroup);
     }
   }
-  return matchedPairs;
+
+  // At this point we know we have paired up all the Begin & End & Instant
+  // events. But it is possible to see only begin & instant events with the
+  // same ID, and no end event. So now we do a second pass through our begin
+  // events to find any that did not have an end event. If we find some
+  // instant events for the begin event, we create a new group.
+  // Also, because there were no end events, we know that the IDs will be
+  // unique now; e.g. each key in the map should have no more than one item in
+  // it.
+  for (const [id, beginEvents] of beginEventsById) {
+    const beginEvent = beginEvents.pop();
+    if (!beginEvent) {
+      continue;
+    }
+    const matchingInstantEvents = instantEventsById.get(id);
+    if (matchingInstantEvents?.length) {
+      matches.push({
+        syntheticId: id,
+        begin: beginEvent,
+        end: null,
+        instant: matchingInstantEvents,
+      });
+    }
+  }
+
+  return matches;
 }
 
-function getSyntheticId(event: Types.Events.PairableAsync): string|undefined {
+export function getSyntheticId(event: Types.Events.PairableAsync): string|undefined {
   const id = extractId(event);
   return id && `${event.cat}:${id}:${event.name}`;
 }
 
-export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
-    matchedPairs: Map<string, {
-      begin: Types.Events.PairableAsyncBegin | null,
-      end: Types.Events.PairableAsyncEnd | null,
-      instant?: Types.Events.PairableAsyncInstant[],
-    }>,
-    syntheticEventCallback?: (syntheticEvent: Types.Events.SyntheticEventPair<T>) => void,
+function createSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
+    matchedPairs: MatchingPairableAsyncEvents[],
     ): Array<Types.Events.SyntheticEventPair<T>> {
   const syntheticEvents: Array<Types.Events.SyntheticEventPair<T>> = [];
-  for (const [id, eventsTriplet] of matchedPairs.entries()) {
+  for (const eventsTriplet of matchedPairs) {
+    const id = eventsTriplet.syntheticId;
     const beginEvent = eventsTriplet.begin;
     const endEvent = eventsTriplet.end;
     const instantEvents = eventsTriplet.instant;
@@ -399,17 +451,21 @@ export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync
       // crbug.com/1472375
       continue;
     }
-    syntheticEventCallback?.(event);
     syntheticEvents.push(event);
   }
-  return syntheticEvents.sort((a, b) => a.ts - b.ts);
+  sortTraceEventsInPlace(syntheticEvents);
+  return syntheticEvents;
 }
 
-export function createMatchedSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
-    unpairedAsyncEvents: T[], syntheticEventCallback?: (syntheticEvent: Types.Events.SyntheticEventPair<T>) => void):
+/**
+ * Groups up sets of async events into synthetic events.
+ * @param unpairedAsyncEvents the raw array of begin, end and async instant
+ * events. These MUST be sorted in timestamp ASC order.
+ */
+export function createMatchedSortedSyntheticEvents<T extends Types.Events.PairableAsync>(unpairedAsyncEvents: T[]):
     Array<Types.Events.SyntheticEventPair<T>> {
   const matchedPairs = matchEvents(unpairedAsyncEvents);
-  const syntheticEvents = createSortedSyntheticEvents<T>(matchedPairs, syntheticEventCallback);
+  const syntheticEvents = createSortedSyntheticEvents<T>(matchedPairs);
   return syntheticEvents;
 }
 

package/front_end/models/trace/types/TraceEvents.ts

@@ -1358,6 +1358,15 @@ export interface PairableAsyncInstant extends PairableAsync {
 export interface PairableAsyncEnd extends PairableAsync {
   ph: Phase.ASYNC_NESTABLE_END;
 }
+export function isPairableAsyncBegin(e: Event): e is PairableAsyncBegin {
+  return e.ph === Phase.ASYNC_NESTABLE_START;
+}
+export function isPairableAsyncEnd(e: Event): e is PairableAsyncEnd {
+  return e.ph === Phase.ASYNC_NESTABLE_END;
+}
+export function isPairableAsyncInstant(e: Event): e is PairableAsyncInstant {
+  return e.ph === Phase.ASYNC_NESTABLE_INSTANT;
+}
 
 export interface AnimationFrame extends PairableAsync {
   name: Name.ANIMATION_FRAME;