chrome-devtools-frontend 1.0.1510848 → 1.0.1512349

package/front_end/panels/common/BadgeNotification.ts

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -17,10 +19,50 @@ const UIStrings = {
    * @description Title for close button
    */
   dismiss: 'Dismiss',
+  /**
+   * @description Activity based badge award notification text
+   * @example {Badge Title} PH1
+   */
+  activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It has been added to your Developer Profile.',
+  /**
+   * @description Action title for navigating to the badge settings in Google Developer Profile section
+   */
+  badgeSettings: 'Badge settings',
+  /**
+   * @description Action title for opening the Google Developer Program profile page of the user in a new tab
+   */
+  viewProfile: 'View profile',
+  /**
+   * @description Starter badge award notification text when the user has a Google Developer Program profile but did not enable receiving badges in DevTools yet
+   * @example {Badge Title} PH1
+   * @example {Google Developer Program link} PH2
+   */
+  starterBadgeAwardMessageSettingDisabled: 'You earned the {PH1} badge for the {PH2}! Turn on badges to claim it.',
+  /**
+   * @description Starter badge award notification text when the user does not have a Google Developer Program profile.
+   * @example {Badge Title} PH1
+   * @example {Google Developer Program link} PH2
+   */
+  starterBadgeAwardMessageNoGdpProfile:
+      'You earned the {PH1} badge for the {PH2}! Create a profile to claim your badge.',
+  /**
+   * @description Action title for snoozing the starter badge.
+   */
+  remindMeLater: 'Remind me later',
+  /**
+   * @description Action title for enabling the "Receive badges" setting
+   */
+  receiveBadges: 'Receive badges',
+  /**
+   * @description Action title for creating a Google Developer Program profle
+   */
+  createProfile: 'Create profile',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/BadgeNotification.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
+const lockedString = i18n.i18n.lockedString;
 
 export interface BadgeNotificationAction {
   label: string;
@@ -30,7 +72,7 @@ export interface BadgeNotificationAction {
 }
 
 export interface BadgeNotificationProperties {
-  message: Lit.LitTemplate;
+  message: HTMLElement|string;
   imageUri: string;
   actions: BadgeNotificationAction[];
 }
@@ -80,7 +122,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 type View = typeof DEFAULT_VIEW;
 
 export class BadgeNotification extends UI.Widget.Widget {
-  message: Lit.LitTemplate = html``;
+  message: HTMLElement|string = '';
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
 
@@ -91,13 +133,81 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#view = view;
   }
 
-  static show(properties: BadgeNotificationProperties): BadgeNotification {
-    const widget = new BadgeNotification();
-    widget.message = properties.message;
-    widget.imageUri = properties.imageUri;
-    widget.actions = properties.actions;
-    widget.show(UI.InspectorView.InspectorView.instance().element);
-    return widget;
+  async present(badge: Badges.Badge): Promise<void> {
+    if (badge.isStarterBadge) {
+      await this.#presentStarterBadge(badge);
+    } else {
+      this.#presentActivityBasedBadge(badge);
+    }
+  }
+
+  #show(properties: BadgeNotificationProperties): void {
+    this.message = properties.message;
+    this.imageUri = properties.imageUri;
+    this.actions = properties.actions;
+    this.requestUpdate();
+    this.show(UI.InspectorView.InspectorView.instance().element);
+  }
+
+  async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
+    const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+    const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
+    const googleDeveloperProgramLink = UI.XLink.XLink.create(
+        'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
+        'gdp.program-link');
+
+    // If the user already has a GDP profile and the receive badges setting enabled,
+    // starter badge behaves as if it's an activity based badge.
+    if (gdpProfile && receiveBadgesSettingEnabled) {
+      this.#presentActivityBasedBadge(badge);
+      return;
+    }
+
+    // If the user already has a GDP profile and the receive badges setting disabled,
+    // starter badge behaves as a nudge for opting into receiving badges.
+    if (gdpProfile && !receiveBadgesSettingEnabled) {
+      this.#show({
+        message: i18nFormatString(
+            UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+        actions: [
+          {
+            label: i18nString(UIStrings.remindMeLater),
+            onClick: () => {/* To implement */},
+          },
+          {label: i18nString(UIStrings.receiveBadges), onClick: () => { /* To implement */ }}
+        ],
+        imageUri: badge.imageUri,
+      });
+      return;
+    }
+
+    // The user does not have a GDP profile, starter badge acts as a nudge for creating a GDP profile.
+    this.#show({
+      message: i18nFormatString(
+          UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      actions: [
+        {
+          label: i18nString(UIStrings.remindMeLater),
+          onClick: () => {/* TODO(ergunsh): Implement */},
+        },
+        {label: i18nString(UIStrings.createProfile), onClick: () => { /* TODO(ergunsh): Implement */ }}
+      ],
+      imageUri: badge.imageUri,
+    });
+  }
+
+  #presentActivityBasedBadge(badge: Badges.Badge): void {
+    this.#show({
+      message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
+      actions: [
+        {
+          label: i18nString(UIStrings.badgeSettings),
+          onClick: () => {/* TODO(ergunsh): Implement */},
+        },
+        {label: i18nString(UIStrings.viewProfile), onClick: () => { /* TODO(ergunsh): Implement */ }}
+      ],
+      imageUri: badge.imageUri,
+    });
   }
 
   #close = (): void => {

package/front_end/panels/common/badgeNotification.css

@@ -49,6 +49,10 @@
     background: var(--sys-color-surface);
   }
 
+  .badge-link {
+    color: var(--sys-color-inverse-primary);
+  }
+
   .message {
     width: 100%;
     color: var(--sys-color-inverse-on-surface);

package/front_end/panels/console/ConsolePrompt.ts

@@ -71,6 +71,8 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #javaScriptCompletionCompartment: CodeMirror.Compartment = new CodeMirror.Compartment();
 
   private aidaClient?: Host.AidaClient.AidaClient;
+  private aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
+  private boundOnAidaAvailabilityChange?: () => Promise<void>;
   private aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
   private teaser?: PanelCommon.AiCodeCompletionTeaser;
   private placeholderCompartment: CodeMirror.Compartment = new CodeMirror.Compartment();
@@ -199,6 +201,10 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (this.isAiCodeCompletionEnabled()) {
       this.aiCodeCompletionSetting.addChangeListener(this.onAiCodeCompletionSettingChanged.bind(this));
       this.onAiCodeCompletionSettingChanged();
+      this.boundOnAidaAvailabilityChange = this.onAidaAvailabilityChange.bind(this);
+      Host.AidaClient.HostConfigTracker.instance().addEventListener(
+          Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.boundOnAidaAvailabilityChange);
+      void this.onAidaAvailabilityChange();
     }
   }
 
@@ -294,6 +300,10 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.highlightingNode = false;
       SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
     }
+    if (this.boundOnAidaAvailabilityChange) {
+      Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+          Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.boundOnAidaAvailabilityChange);
+    }
   }
 
   history(): TextEditor.AutocompleteHistory.AutocompleteHistory {
@@ -505,6 +515,9 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   // TODO(b/435654172): Refactor and move aiCodeCompletion model one level up to avoid
   // defining additional listeners and events.
   private setAiCodeCompletion(): void {
+    if (this.aiCodeCompletion) {
+      return;
+    }
     if (!this.aidaClient) {
       this.aidaClient = new Host.AidaClient.AidaClient();
     }
@@ -532,6 +545,19 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
   }
 
+  private async onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.aidaAvailability) {
+      this.aidaAvailability = currentAidaAvailability;
+      if (this.aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+        this.onAiCodeCompletionSettingChanged();
+      } else if (this.aiCodeCompletion) {
+        this.aiCodeCompletion.remove();
+        this.aiCodeCompletion = undefined;
+      }
+    }
+  }
+
   async onAiCodeCompletionTeaserActionKeyDown(event: Event): Promise<void> {
     if (this.teaser?.isShowing()) {
       await this.teaser?.onAction(event);

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -40,6 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 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 Badges from '../../models/badges/badges.js';
 import type * as Elements from '../../models/elements/elements.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -1603,6 +1604,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
     if (attributeName !== null && (attributeName.trim() || newText.trim()) && oldText !== newText) {
       this.nodeInternal.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
       return;
     }
 
@@ -1661,6 +1663,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (!treeOutline) {
         return;
       }
+
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
       const newTreeItem = treeOutline.selectNodeAfterEdit(wasExpanded, error, newNode);
       // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
       // @ts-expect-error
@@ -2581,6 +2585,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const adorner = this.adorn(config);
     const onClick = async(): Promise<void> => {
       const {nodeIds} = await node.domModel().agent.invoke_forceShowPopover({nodeId, enable: adorner.isActive()});
+      if (adorner.isActive()) {
+        Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
+      }
       for (const closedPopoverNodeId of nodeIds) {
         const node = this.node().domModel().nodeForId(closedPopoverNodeId);
         const treeElement = node && this.treeOutline?.treeElementByNode.get(node);
@@ -2617,6 +2624,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const onClick = ((() => {
                        if (adorner.isActive()) {
                          node.domModel().overlayModel().highlightGridInPersistentOverlay(nodeId);
+                         if (isSubgrid) {
+                           Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
+                         }
                        } else {
                          node.domModel().overlayModel().hideGridInPersistentOverlay(nodeId);
                        }
@@ -2658,6 +2668,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const onClick = ((() => {
                        if (adorner.isActive()) {
                          node.domModel().overlayModel().highlightGridInPersistentOverlay(nodeId);
+                         Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
                        } else {
                          node.domModel().overlayModel().hideGridInPersistentOverlay(nodeId);
                        }
@@ -2786,6 +2797,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
                        const model = node.domModel().overlayModel();
                        if (adorner.isActive()) {
                          model.highlightContainerQueryInPersistentOverlay(nodeId);
+                         Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
                        } else {
                          model.hideContainerQueryInPersistentOverlay(nodeId);
                        }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -38,6 +38,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Elements from '../../models/elements/elements.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -1332,6 +1333,8 @@ export class ElementsTreeOutline extends
         return;
       }
 
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
+
       // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
       this.runPendingUpdates();
 

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -41,6 +41,7 @@ import * as Platform from '../../core/platform/platform.js';
 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 Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -1546,6 +1547,8 @@ export class StylePropertiesSection {
       if (!success) {
         return Promise.resolve();
       }
+
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.CSS_RULE_MODIFIED);
       return this.matchedStyles.recomputeMatchingSelectors(rule).then(updateSourceRanges.bind(this, rule));
     }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -10,6 +10,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -3292,6 +3293,10 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     const overwriteProperty = !this.newProperty || hasBeenEditedIncrementally;
     let success: boolean = await this.property.setText(styleText, majorChange, overwriteProperty);
+    if (success && majorChange) {
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.CSS_RULE_MODIFIED);
+    }
+
     // Revert to the original text if applying the new text failed
     if (hasBeenEditedIncrementally && majorChange && !success) {
       majorChange = false;

package/front_end/panels/settings/SettingsScreen.ts

@@ -336,19 +336,13 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
       this.#updateSyncSectionTimerId = -1;
     }
 
-    void Promise
-        .all([
-          new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
-              resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve)),
-          Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled ? Host.GdpClient.GdpClient.instance().getProfile() :
-                                                                 Promise.resolve(undefined),
-        ])
-        .then(([syncInfo, gdpProfile]) => {
+    void new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
+        resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve))
+        .then(syncInfo => {
           this.syncSection.data = {
             syncInfo,
             syncSetting: Common.Settings.moduleSetting('sync-preferences') as Common.Settings.Setting<boolean>,
             receiveBadgesSetting: Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges'),
-            gdpProfile: gdpProfile ?? undefined,
           };
           if (!syncInfo.isSyncActive || !syncInfo.arePreferencesSynced) {
             this.#updateSyncSectionTimerId = window.setTimeout(this.updateSyncSection.bind(this), 500);

package/front_end/panels/settings/components/SyncSection.ts

@@ -117,7 +117,6 @@ export interface SyncSectionData {
   syncInfo: Host.InspectorFrontendHostAPI.SyncInformation;
   syncSetting: Common.Settings.Setting<boolean>;
   receiveBadgesSetting: Common.Settings.Setting<boolean>;
-  gdpProfile?: Host.GdpClient.Profile;
 }
 
 export class SyncSection extends HTMLElement {
@@ -132,7 +131,7 @@ export class SyncSection extends HTMLElement {
     this.#syncInfo = data.syncInfo;
     this.#syncSetting = data.syncSetting;
     this.#receiveBadgesSetting = data.receiveBadgesSetting;
-    this.#gdpProfile = data.gdpProfile;
+    void this.#updateGdpProfile();
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
@@ -157,6 +156,11 @@ export class SyncSection extends HTMLElement {
     `, this.#shadow, {host: this});
     // clang-format on
   }
+
+  async #updateGdpProfile(): Promise<void> {
+    this.#gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile() ?? undefined;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  }
 }
 
 function renderSettingCheckboxIfNeeded(

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -22,6 +22,8 @@ const CITATIONS_TOOLTIP_ID = 'sources-ai-code-completion-citations-tooltip';
 
 export class AiCodeCompletionPlugin extends Plugin {
   #aidaClient?: Host.AidaClient.AidaClient;
+  #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
+  #boundOnAidaAvailabilityChange: () => Promise<void>;
   #aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
   #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
   #aiCodeCompletionTeaserDismissedSetting =
@@ -48,6 +50,10 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
     this.#boundEditorKeyDown = this.#editorKeyDown.bind(this);
     this.#boundOnAiCodeCompletionSettingChanged = this.#onAiCodeCompletionSettingChanged.bind(this);
+    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    void this.#onAidaAvailabilityChange();
     const showTeaser = !this.#aiCodeCompletionSetting.get() && !this.#aiCodeCompletionTeaserDismissedSetting.get();
     if (showTeaser) {
       this.#teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.#detachAiCodeCompletionTeaser.bind(this)});
@@ -61,6 +67,8 @@ export class AiCodeCompletionPlugin extends Plugin {
   override dispose(): void {
     this.#teaser = undefined;
     this.#aiCodeCompletionSetting.removeChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
     this.#editor?.removeEventListener('keydown', this.#boundEditorKeyDown);
     this.#cleanupAiCodeCompletion();
     super.dispose();
@@ -203,23 +211,31 @@ export class AiCodeCompletionPlugin extends Plugin {
       this.#detachAiCodeCompletionTeaser();
       this.#teaser = undefined;
     }
-    this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.#aidaClient}, this.#editor, AiCodeCompletion.AiCodeCompletion.Panel.SOURCES);
-    this.#aiCodeCompletion.addEventListener(
-        AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
-    this.#aiCodeCompletion.addEventListener(
-        AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, this.#onAiResponseReceived, this);
+    if (!this.#aiCodeCompletion) {
+      this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+          {aidaClient: this.#aidaClient}, this.#editor, AiCodeCompletion.AiCodeCompletion.Panel.SOURCES);
+      this.#aiCodeCompletion.addEventListener(
+          AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
+      this.#aiCodeCompletion.addEventListener(
+          AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, this.#onAiResponseReceived, this);
+    }
     this.#createAiCodeCompletionDisclaimer();
     this.#createAiCodeCompletionCitationsToolbar();
   }
 
   #createAiCodeCompletionDisclaimer(): void {
+    if (this.#aiCodeCompletionDisclaimer) {
+      return;
+    }
     this.#aiCodeCompletionDisclaimer = new PanelCommon.AiCodeCompletionDisclaimer();
     this.#aiCodeCompletionDisclaimer.disclaimerTooltipId = DISCLAIMER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.show(this.#aiCodeCompletionDisclaimerContainer, undefined, true);
   }
 
   #createAiCodeCompletionCitationsToolbar(): void {
+    if (this.#aiCodeCompletionCitationsToolbar) {
+      return;
+    }
     this.#aiCodeCompletionCitationsToolbar =
         new PanelCommon.AiCodeCompletionSummaryToolbar({citationsTooltipId: CITATIONS_TOOLTIP_ID, hasTopBorder: true});
     this.#aiCodeCompletionCitationsToolbar.show(this.#aiCodeCompletionCitationsToolbarContainer, undefined, true);
@@ -253,12 +269,25 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
   }
 
+  async #onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      if (this.#aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+        this.#onAiCodeCompletionSettingChanged();
+      } else if (this.#aiCodeCompletion) {
+        this.#cleanupAiCodeCompletion();
+      }
+    }
+  }
+
   #cleanupAiCodeCompletion(): void {
     this.#aiCodeCompletion?.removeEventListener(
         AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
     this.#aiCodeCompletion?.removeEventListener(
         AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, this.#onAiResponseReceived, this);
     this.#aiCodeCompletion?.remove();
+    this.#aiCodeCompletion = undefined;
     this.#aiCodeCompletionCitations = [];
     this.#aiCodeCompletionDisclaimerContainer.removeChildren();
     this.#aiCodeCompletionDisclaimer = undefined;

package/front_end/panels/timeline/TimelinePanel.ts

@@ -1534,7 +1534,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     // extensions sourcemaps provide little to no-value for the exported trace
     // debugging, so they are filtered out.
     return metadata.sourceMaps.filter(value => {
-      return value.url && Trace.Helpers.Trace.isExtensionUrl(value.url);
+      return !Trace.Helpers.Trace.isExtensionUrl(value.url);
     });
   }
 
@@ -2733,14 +2733,27 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   async #executeNewTrace(
       collectedEvents: Trace.Types.Events.Event[], isFreshRecording: boolean,
       metadata: Trace.Types.File.MetaData|null): Promise<void> {
-    await this.#traceEngineModel.parse(
-        collectedEvents,
-        {
-          metadata: metadata ?? undefined,
-          isFreshRecording,
-          resolveSourceMap: this.#createSourceMapResolver(isFreshRecording, metadata),
+    const config: Trace.Types.Configuration.ParseOptions = {
+      metadata: metadata ?? undefined,
+      isFreshRecording,
+      resolveSourceMap: this.#createSourceMapResolver(isFreshRecording, metadata),
+    };
+
+    if (window.location.href.includes('devtools/bundled') || window.location.search.includes('debugFrontend')) {
+      // Someone is debugging DevTools, enable the logger to give timings
+      // when tracing the performance panel itself.
+      const times: Record<string, number> = {};
+      config.logger = {
+        start(id) {
+          times[id] = performance.now();
         },
-    );
+        end(id) {
+          performance.measure(id, {start: times[id]});
+        },
+      };
+    }
+
+    await this.#traceEngineModel.parse(collectedEvents, config);
 
     // Store all source maps on the trace metadata.
     // If not fresh, we can't validate the maps are still accurate.
@@ -3039,8 +3052,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       for (const modelName in insightsForNav.model) {
         const model = modelName as keyof Trace.Insights.Types.InsightModelsType;
         const insight = insightsForNav.model[model];
-        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(
-            AiAssistanceModel.PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight);
+        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(parsedTrace, insight);
         if (!formatter.insightIsSupported()) {
           // Not all Insights are integrated with "Ask AI" yet, let's avoid
           // filling up the response with those ones because there will be no

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -476,6 +476,9 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineUIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+// Look for scheme:// plus text and exclude any punctuation at the end.
+export const URL_REGEX = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/)[^\s"]{2,}[^\s"'\)\}\],:;.!?]/u;
+
 let eventDispatchDesciptors: EventDispatchTypeDescriptor[];
 
 let colorGenerator: Common.Color.Generator;
@@ -897,9 +900,7 @@ export class TimelineUIUtils {
    * of the link is the URL, so the visible string to the user is unchanged.
    */
   static parseStringForLinks(rawString: string): DocumentFragment {
-    // Look for scheme:// plus text and exclude any punctuation at the end.
-    const urlRegex = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/)[^\s"]{2,}[^\s"'\)\}\],:;.!?]/u;
-    const results = TextUtils.TextUtils.Utils.splitStringByRegexes(rawString, [urlRegex]);
+    const results = TextUtils.TextUtils.Utils.splitStringByRegexes(rawString, [URL_REGEX]);
     const nodes = results.map(result => {
       if (result.regexIndex === -1) {
         return result.value;

package/front_end/panels/timeline/utils/InsightAIContext.ts

@@ -126,22 +126,3 @@ export class AIQueries {
         .filter(tree => !!tree);
   }
 }
-
-/**
- * Calculates the trace bounds for the given insight that are relevant.
- *
- * Uses the insight's overlays to determine the relevant trace bounds. If there are
- * no overlays, falls back to the insight set's navigation bounds.
- */
-export function insightBounds(
-    insight: Trace.Insights.Types.InsightModel,
-    insightSetBounds: Trace.Types.Timing.TraceWindowMicro): Trace.Types.Timing.TraceWindowMicro {
-  const overlays = insight.createOverlays?.() ?? [];
-  const windows = overlays.map(Trace.Helpers.Timing.traceWindowFromOverlay).filter(bounds => !!bounds);
-  const overlaysBounds = Trace.Helpers.Timing.combineTraceWindowsMicro(windows);
-  if (overlaysBounds) {
-    return overlaysBounds;
-  }
-
-  return insightSetBounds;
-}

package/front_end/ui/legacy/filter.css

@@ -171,7 +171,7 @@
   color: var(--sys-color-on-surface-subtle);
 
   .toolbar-dropdown-arrow {
-    top: var(--sys-size-2);
+    top: var(--sys-size-1);
   }
 
   &:hover {

package/front_end/ui/legacy/inspectorCommon.css

@@ -780,7 +780,7 @@ devtools-toolbar {
   .toolbar-dropdown-arrow {
     pointer-events: none;
     flex: none;
-    top: 2px;
+    top: var(--sys-size-1);
   }
 
   .toolbar-button.dark-text .toolbar-dropdown-arrow {

package/front_end/ui/legacy/softDropDownButton.css

@@ -22,7 +22,7 @@ button.soft-dropdown {
   }
 
   devtools-icon {
-    top: var(--sys-size-2);
+    top: var(--sys-size-1);
   }
 }
 

package/package.json

@@ -102,5 +102,5 @@
       "@eslint/core": "0.15.1"
     }
   },
-  "version": "1.0.1510848"
+  "version": "1.0.1512349"
 }

package/front_end/models/ai_assistance/data_formatters/Types.ts

@@ -1,9 +0,0 @@
-// Copyright 2025 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-export interface UnitFormatters {
-  millis: (x: number) => string;
-  micros: (x: number) => string;
-  bytes: (x: number) => string;
-}