chrome-devtools-frontend 1.0.1518653 → 1.0.1519267

package/front_end/models/badges/StarterBadge.ts

@@ -10,6 +10,7 @@ export class StarterBadge extends Badge {
   override readonly name =
       'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fchrome-devtools-user';
   override readonly title = 'Chrome DevTools User';
+  override readonly jslogContext = 'chrome-devtools-user';
   override readonly imageUri = STARTER_BADGE_IMAGE_URI;
 
   // TODO(ergunsh): Add remaining non-trivial event definitions

package/front_end/models/badges/badges.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * from './AiExplorerBadge.js';
 export * from './SpeedsterBadge.js';
 export * from './StarterBadge.js';
 export * from './Badge.js';

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7978,7 +7978,7 @@ export const NativeFunctions = [
   },
   {
     name: "constant",
-    signatures: [["tensor"],["desc","buffer"]]
+    signatures: [["tensor"],["desc","buffer"],["type","value"]]
   },
   {
     name: "argMin",

package/front_end/models/trace/EventsSerializer.ts

@@ -39,7 +39,7 @@ export class EventsSerializer {
     if (EventsSerializer.isLegacyTimelineFrameKey(eventValues)) {
       const event = parsedTrace.data.Frames.frames.at(eventValues.rawIndex);
       if (!event) {
-        throw new Error(`Could not find frame with index ${eventValues.rawIndex}`);
+        throw new Error(`Unknown trace event. Could not find frame with index ${eventValues.rawIndex}`);
       }
       return event;
     }
@@ -48,7 +48,8 @@ export class EventsSerializer {
       const syntheticEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getSyntheticTraces();
       const syntheticEvent = syntheticEvents.at(eventValues.rawIndex);
       if (!syntheticEvent) {
-        throw new Error(`Attempted to get a synthetic event from an unknown raw event index: ${eventValues.rawIndex}`);
+        throw new Error(`Unknown trace event. Attempted to get a synthetic event from an unknown raw event index: ${
+            eventValues.rawIndex}`);
       }
       return syntheticEvent;
     }
@@ -57,7 +58,7 @@ export class EventsSerializer {
       const rawEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents();
       return rawEvents[eventValues.rawIndex];
     }
-    throw new Error(`Unknown trace event serializable key values: ${(eventValues as unknown[]).join('-')}`);
+    throw new Error(`Unknown trace event. Serializable key values: ${(eventValues as unknown[]).join('-')}`);
   }
 
   static isProfileCallKey(key: Types.File.SerializableKeyValues): key is Types.File.ProfileCallKeyValues {

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
@@ -56,15 +57,15 @@ let longestInteractionEvent: Types.Events.SyntheticInteractionPair|null = null;
 
 let interactionEvents: Types.Events.SyntheticInteractionPair[] = [];
 let interactionEventsWithNoNesting: Types.Events.SyntheticInteractionPair[] = [];
-let eventTimingEndEventsById = new Map<string, Types.Events.EventTimingEnd>();
 let eventTimingStartEventsForInteractions: Types.Events.EventTimingBegin[] = [];
+let eventTimingEndEventsForInteractions: Types.Events.EventTimingEnd[] = [];
 
 export function reset(): void {
   beginCommitCompositorFrameEvents = [];
   parseMetaViewportEvents = [];
   interactionEvents = [];
   eventTimingStartEventsForInteractions = [];
-  eventTimingEndEventsById = new Map();
+  eventTimingEndEventsForInteractions = [];
   interactionEventsWithNoNesting = [];
   longestInteractionEvent = null;
 }
@@ -86,7 +87,7 @@ export function handleEvent(event: Types.Events.Event): void {
 
   if (Types.Events.isEventTimingEnd(event)) {
     // Store the end event; for each start event that is an interaction, we need the matching end event to calculate the duration correctly.
-    eventTimingEndEventsById.set(event.id, event);
+    eventTimingEndEventsForInteractions.push(event);
   }
 
   // From this point on we want to find events that represent interactions.
@@ -167,9 +168,18 @@ export function categoryOfInteraction(interaction: Types.Events.SyntheticInterac
  *   =======B=[keyup]=====
  *    ====C=[pointerdown]=
  *         =D=[pointerup]=
+ *
+ * Additionally, this method will also maximise the processing duration of the
+ * events that we keep as non-nested. We want to make sure we give an accurate
+ * representation of main thread activity, so if we keep an event + hide its
+ * nested children, we set the top level event's processing start &
+ * processing end to be the earliest processing start & the latest processing
+ * end of its children. This ensures we report a more accurate main thread
+ * activity time which is important as we want developers to focus on fixing
+ * this.
  **/
-export function removeNestedInteractions(interactions: readonly Types.Events.SyntheticInteractionPair[]):
-    readonly Types.Events.SyntheticInteractionPair[] {
+export function removeNestedInteractionsAndSetProcessingTime(
+    interactions: readonly Types.Events.SyntheticInteractionPair[]): readonly Types.Events.SyntheticInteractionPair[] {
   /**
    * Because we nest events only that are in the same category, we store the
    * longest event for a given end time by category.
@@ -257,77 +267,95 @@ function writeSyntheticTimespans(event: Types.Events.SyntheticInteractionPair):
 export async function finalize(): Promise<void> {
   const {navigationsByFrameId} = metaHandlerData();
 
-  // For each interaction start event, find the async end event by the ID, and then create the Synthetic Interaction event.
-  for (const interactionStartEvent of eventTimingStartEventsForInteractions) {
-    const endEvent = eventTimingEndEventsById.get(interactionStartEvent.id);
-    if (!endEvent) {
-      // If we cannot find an end event, bail and drop this event.
-      continue;
-    }
-    const {type, interactionId, timeStamp, processingStart, processingEnd} = interactionStartEvent.args.data;
-    if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
-      // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
-      // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
-      continue;
-    }
-
-    // In the future we will add microsecond timestamps to the trace events…
-    // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
-    // …but until then we can use the millisecond precision values that are in
-    // the trace event. To adjust them to be relative to the event.ts and the
-    // trace timestamps, for both processingStart and processingEnd we subtract
-    // the event timestamp (NOT event.ts, but the timeStamp millisecond value
-    // emitted in args.data), and then add that value to the event.ts. This
-    // will give us a processingStart and processingEnd time in microseconds
-    // that is relative to event.ts, and can be used when drawing boxes.
-    // There is some inaccuracy here as we are converting milliseconds to microseconds, but it is good enough until the backend emits more accurate numbers.
-    const processingStartRelativeToTraceTime = Types.Timing.Micro(
-        Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) +
-            interactionStartEvent.ts,
-    );
-
-    const processingEndRelativeToTraceTime = Types.Timing.Micro(
-        (Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) +
-        interactionStartEvent.ts);
-
-    // Ultimate frameId fallback only needed for TSC, see comments in the type.
-    const frameId = interactionStartEvent.args.frame ?? interactionStartEvent.args.data.frame ?? '';
-    const navigation = Helpers.Trace.getNavigationForTraceEvent(interactionStartEvent, frameId, navigationsByFrameId);
-    const navigationId = navigation?.args.data?.navigationId;
-    const interactionEvent =
-        Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticInteractionPair>({
-          // Use the start event to define the common fields.
-          rawSourceEvent: interactionStartEvent,
-          cat: interactionStartEvent.cat,
-          name: interactionStartEvent.name,
-          pid: interactionStartEvent.pid,
-          tid: interactionStartEvent.tid,
-          ph: interactionStartEvent.ph,
-          processingStart: processingStartRelativeToTraceTime,
-          processingEnd: processingEndRelativeToTraceTime,
-          // These will be set in writeSyntheticTimespans()
-          inputDelay: Types.Timing.Micro(-1),
-          mainThreadHandling: Types.Timing.Micro(-1),
-          presentationDelay: Types.Timing.Micro(-1),
-          args: {
-            data: {
-              beginEvent: interactionStartEvent,
-              endEvent,
-              frame: frameId,
-              navigationId,
+  const beginAndEndEvents = Platform.ArrayUtilities.mergeOrdered(
+                                eventTimingStartEventsForInteractions, eventTimingEndEventsForInteractions,
+                                Helpers.Trace.eventTimeComparator) as Types.Events.EventTimingBeginOrEnd[];
+
+  // Pair up the begin & end events and create synthetic user timing events.
+  const beginEventById = new Map<string, Types.Events.EventTimingBegin[]>();
+  for (const event of beginAndEndEvents) {
+    if (Types.Events.isEventTimingStart(event)) {
+      const forId = beginEventById.get(event.id) ?? [];
+      forId.push(event);
+      beginEventById.set(event.id, forId);
+    } else if (Types.Events.isEventTimingEnd(event)) {
+      const beginEvents = beginEventById.get(event.id) ?? [];
+      const beginEvent = beginEvents.pop();
+      if (!beginEvent) {
+        continue;
+      }
+      const {type, interactionId, timeStamp, processingStart, processingEnd} = beginEvent.args.data;
+      if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
+        // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
+        // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
+        continue;
+      }
+      // In the future we will add microsecond timestamps to the trace events…
+      // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
+      // …but until then we can use the millisecond precision values that are in
+      // the trace event. To adjust them to be relative to the event.ts and the
+      // trace timestamps, for both processingStart and processingEnd we subtract
+      // the event timestamp (NOT event.ts, but the timeStamp millisecond value
+      // emitted in args.data), and then add that value to the event.ts. This
+      // will give us a processingStart and processingEnd time in microseconds
+      // that is relative to event.ts, and can be used when drawing boxes.
+      // There is some inaccuracy here as we are converting milliseconds to
+      // microseconds, but it is good enough until the backend emits more
+      // accurate numbers.
+      const processingStartRelativeToTraceTime = Types.Timing.Micro(
+          Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) + beginEvent.ts,
+      );
+
+      const processingEndRelativeToTraceTime = Types.Timing.Micro(
+          (Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) + beginEvent.ts);
+
+      // Ultimate frameId fallback only needed for TSC, see comments in the type.
+      const frameId = beginEvent.args.frame ?? beginEvent.args.data.frame ?? '';
+      const navigation = Helpers.Trace.getNavigationForTraceEvent(beginEvent, frameId, navigationsByFrameId);
+      const navigationId = navigation?.args.data?.navigationId;
+      const interactionEvent =
+          Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticInteractionPair>({
+            // Use the start event to define the common fields.
+            rawSourceEvent: beginEvent,
+            cat: beginEvent.cat,
+            name: beginEvent.name,
+            pid: beginEvent.pid,
+            tid: beginEvent.tid,
+            ph: beginEvent.ph,
+            processingStart: processingStartRelativeToTraceTime,
+            processingEnd: processingEndRelativeToTraceTime,
+            // These will be set in writeSyntheticTimespans()
+            inputDelay: Types.Timing.Micro(-1),
+            mainThreadHandling: Types.Timing.Micro(-1),
+            presentationDelay: Types.Timing.Micro(-1),
+            args: {
+              data: {
+                beginEvent,
+                endEvent: event,
+                frame: frameId,
+                navigationId,
+              },
             },
-          },
-          ts: interactionStartEvent.ts,
-          dur: Types.Timing.Micro(endEvent.ts - interactionStartEvent.ts),
-          type: interactionStartEvent.args.data.type,
-          interactionId: interactionStartEvent.args.data.interactionId,
-        });
-    writeSyntheticTimespans(interactionEvent);
-
-    interactionEvents.push(interactionEvent);
+            ts: beginEvent.ts,
+            dur: Types.Timing.Micro(event.ts - beginEvent.ts),
+            type: beginEvent.args.data.type,
+            interactionId: beginEvent.args.data.interactionId,
+          });
+      writeSyntheticTimespans(interactionEvent);
+      interactionEvents.push(interactionEvent);
+    }
   }
 
-  interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));
+  // Once we gather up all the interactions, we want to remove nested
+  // interactions. Interactions can be nested because one user action (e.g. a
+  // click) will cause a pointerdown, pointerup and click. But we don't want to
+  // fill the interactions track with lots of noise. To fix this, we go through
+  // all the events and remove any nested ones so on the timeline we focus the
+  // user on the most important events, which we define as the longest one. But
+  // this algorithm assumes the events are in ASC order, so we first sort the
+  // set of interactions.
+  Helpers.Trace.sortTraceEventsInPlace(interactionEvents);
+  interactionEventsWithNoNesting.push(...removeNestedInteractionsAndSetProcessingTime(interactionEvents));
 
   // Pick the longest interactions from the set that were not nested, as we
   // know those are the set of the largest interactions.

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

@@ -221,7 +221,7 @@ export function boundsIncludeTimeRange(data: BoundsIncludeTimeRange): boolean {
 /** Checks to see if the event is within or overlaps the bounds */
 export function eventIsInBounds(event: Types.Events.Event, bounds: Types.Timing.TraceWindowMicro): boolean {
   const startTime = event.ts;
-  return startTime <= bounds.max && bounds.min <= (startTime + (event.dur ?? 0));
+  return startTime <= bounds.max && bounds.min < (startTime + (event.dur ?? 0));
 }
 
 export function timestampIsInBounds(bounds: Types.Timing.TraceWindowMicro, timestamp: Types.Timing.Micro): boolean {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -12,6 +12,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -1409,7 +1410,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       // invariants do not hold anymore.
       throw new Error('cross-origin context data should not be included');
     }
-
+    if (this.#conversation?.isEmpty) {
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.STARTED_AI_CONVERSATION);
+    }
     const image = isAiAssistanceMultimodalInputEnabled() ? imageInput : undefined;
     const imageId = image ? crypto.randomUUID() : undefined;
     const multimodalInput = image && imageId && multimodalInputType ? {

package/front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts

@@ -20,21 +20,23 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.TemplateResult|null {
     if (token.type === 'link' && token.href.startsWith('#')) {
       const event = this.lookupEvent(token.href.slice(1) as Trace.Types.File.SerializableKey);
-      if (event) {
-        let label = token.text;
-        let title = '';
-        if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
-          title = event.args.data.url;
-        } else {
-          label += ` (${event.name})`;
-        }
-
-        // eslint-disable-next-line rulesdir/no-a-tags-in-lit
-        return html`<a href="#" draggable=false .title=${title} @click=${(e: Event) => {
-          e.stopPropagation();
-          void Common.Revealer.reveal(new SDK.TraceObject.RevealableEvent(event));
-        }}>${label}</a>`;
+      if (!event) {
+        return html`${token.text}`;
       }
+
+      let label = token.text;
+      let title = '';
+      if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+        title = event.args.data.url;
+      } else {
+        label += ` (${event.name})`;
+      }
+
+      // eslint-disable-next-line rulesdir/no-a-tags-in-lit
+      return html`<a href="#" draggable=false .title=${title} @click=${(e: Event) => {
+        e.stopPropagation();
+        void Common.Revealer.reveal(new SDK.TraceObject.RevealableEvent(event));
+      }}>${label}</a>`;
     }
 
     return super.templateForToken(token);

package/front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -146,9 +146,9 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     // clang-format on
   }
 
-  #renderDeletedSitesOrNoSitesMessage(): Lit.TemplateResult {
+  #renderDeletedSitesOrNoSitesMessage(): Lit.LitTemplate {
     if (!this.#seenButtonClick) {
-      return html``;
+      return Lit.nothing;
     }
 
     if (this.#trackingSites.length === 0) {

package/front_end/panels/common/BadgeNotification.ts

@@ -211,7 +211,7 @@ export class BadgeNotification extends UI.Widget.Widget {
       this.#show({
         message: i18nFormatString(
             UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
-        jslogContext: badge.name,
+        jslogContext: badge.jslogContext,
         actions: [
           {
             label: i18nString(UIStrings.remindMeLater),
@@ -240,7 +240,7 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#show({
       message: i18nFormatString(
           UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
-      jslogContext: badge.name,
+      jslogContext: badge.jslogContext,
       actions: [
         {
           label: i18nString(UIStrings.remindMeLater),
@@ -270,7 +270,7 @@ export class BadgeNotification extends UI.Widget.Widget {
   #presentActivityBasedBadge(badge: Badges.Badge): void {
     this.#show({
       message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
-      jslogContext: badge.name,
+      jslogContext: badge.jslogContext,
       actions: [
         {
           label: i18nString(UIStrings.manageSettings),

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -14,7 +14,6 @@ import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import type * as Switch from '../../ui/components/switch/switch.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import styles from './gdpSignUpDialog.css.js';
 
@@ -114,7 +113,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
   render(
     html`
       <style>${styles}</style>
-      <div class="gdp-sign-up-dialog-header" role="img" tabindex="0" aria-label="Google Developer Program"></div>
+      <div class="gdp-sign-up-dialog-header" role="img" aria-label="Google Developer Program"></div>
       <div class="main-content">
         <div class="section">
           <div class="icon-container">
@@ -136,9 +135,9 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
           <div class="switch-container">
             <devtools-switch
             .checked=${input.keepMeUpdated}
+            .jslogContext=${'keep-me-updated'}
+            .label=${i18nString(UIStrings.keepUpdated)}
             @switchchange=${(e: Switch.Switch.SwitchChangeEvent) => input.onKeepMeUpdatedChange(e.checked)}
-            jslog=${VisualLogging.toggle('keep-me-updated').track({ click: true })}
-            aria-label=${i18nString(UIStrings.keepUpdated)}
           >
             </devtools-switch>
           </div>

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -15,7 +15,7 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
@@ -519,10 +519,10 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
   // clang-format on
 }
 
-function renderColor(section: string, color: string): TemplateResult {
+function renderColor(section: string, color: string): LitTemplate {
   const borderColor = Common.Color.parse(color)?.asLegacyColor();
   if (!borderColor) {
-    return html``;
+    return nothing;
   }
   // clang-format off
   return html`<li>
@@ -1006,9 +1006,9 @@ export class ElementDetailsView extends UI.Widget.Widget {
   }
 }
 
-function renderNode(data: PopulateNodesEventNodeTypes, link?: HTMLElement, showNode?: () => void): TemplateResult {
+function renderNode(data: PopulateNodesEventNodeTypes, link?: HTMLElement, showNode?: () => void): LitTemplate {
   if (!link) {
-    return html``;
+    return nothing;
   }
   return html`
     <td>

package/front_end/panels/recorder/components/RecordingView.ts

@@ -220,9 +220,9 @@ function renderSettings({
   replayState,
   onReplaySettingsKeydown,
   onToggleReplaySettings
-}: ViewInput): Lit.TemplateResult {
+}: ViewInput): Lit.LitTemplate {
   if (!settings) {
-    return html``;
+    return Lit.nothing;
   }
   const environmentFragments = [];
   if (settings.viewportSettings) {