chrome-devtools-frontend 1.0.1512147 → 1.0.1512349

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

@@ -0,0 +1,151 @@
+// 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.
+
+/**
+ * This module contains unit formatters that are only to be used within
+ * the AI models because they do not account for locales other than en-US.
+ */
+const defaultTimeFormatterOptions: Intl.NumberFormatOptions = {
+  style: 'unit',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+} as const;
+
+const defaultByteFormatterOptions: Intl.NumberFormatOptions = {
+  style: 'unit',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+} as const;
+
+const timeFormatters = {
+  milli: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'millisecond',
+  }),
+  second: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'second',
+  }),
+  micro: new Intl.NumberFormat('en-US', {
+    ...defaultTimeFormatterOptions,
+    unit: 'microsecond',
+  }),
+} as const;
+
+const byteFormatters = {
+  bytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    // Don't need as much precision on bytes.
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    unit: 'byte',
+  }),
+  kilobytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    unit: 'kilobyte',
+  }),
+  megabytes: new Intl.NumberFormat('en-US', {
+    ...defaultByteFormatterOptions,
+    unit: 'megabyte',
+  }),
+} as const;
+
+function numberIsTooLarge(x: number): boolean {
+  return !Number.isFinite(x) || x === Number.MAX_VALUE;
+}
+
+export function seconds(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+  if (x === 0) {
+    return formatAndEnsureSpace(timeFormatters.second, x);
+  }
+
+  const asMilli = x * 1_000;
+
+  if (asMilli < 1) {
+    return micros(x * 1_000_000);
+  }
+
+  if (asMilli < 1_000) {
+    return millis(asMilli);
+  }
+  return formatAndEnsureSpace(timeFormatters.second, x);
+}
+
+export function millis(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+  return formatAndEnsureSpace(timeFormatters.milli, x);
+}
+
+export function micros(x: number): string {
+  if (numberIsTooLarge(x)) {
+    return '-';
+  }
+
+  if (x < 100) {
+    return formatAndEnsureSpace(timeFormatters.micro, x);
+  }
+
+  const asMilli = x / 1_000;
+  return millis(asMilli);
+}
+
+export function bytes(x: number): string {
+  if (x < 1_000) {
+    return formatAndEnsureSpace(byteFormatters.bytes, x);
+  }
+  const kilobytes = x / 1_000;
+  if (kilobytes < 1_000) {
+    return formatAndEnsureSpace(byteFormatters.kilobytes, kilobytes);
+  }
+
+  const megabytes = kilobytes / 1_000;
+  return formatAndEnsureSpace(byteFormatters.megabytes, megabytes);
+}
+
+/**
+ * When using 'narrow' unitDisplay, many locales exclude the space between the literal and the unit.
+ * We don't like that, so when there is no space literal we inject the provided separator manually.
+ */
+function formatAndEnsureSpace(formatter: Intl.NumberFormat, value: number, separator = '\xA0'): string {
+  const parts = formatter.formatToParts(value);
+
+  let hasSpace = false;
+  for (const part of parts) {
+    if (part.type === 'literal') {
+      if (part.value === ' ') {
+        hasSpace = true;
+        part.value = separator;
+      } else if (part.value === separator) {
+        hasSpace = true;
+      }
+    }
+  }
+
+  if (hasSpace) {
+    return parts.map(part => part.value).join('');
+  }
+
+  const unitIndex = parts.findIndex(part => part.type === 'unit');
+
+  // Unexpected for there to be no unit, but just in case, handle that.
+  if (unitIndex === -1) {
+    return parts.map(part => part.value).join('');
+  }
+
+  // For locales where the unit comes first (sw), the space has to come after the unit.
+  if (unitIndex === 0) {
+    return parts[0].value + separator + parts.slice(1).map(part => part.value).join('');
+  }
+
+  // Otherwise, it comes before.
+  return parts.slice(0, unitIndex).map(part => part.value).join('') + separator +
+      parts.slice(unitIndex).map(part => part.value).join('');
+}

package/front_end/models/badges/Badge.ts

@@ -6,29 +6,32 @@ import * as Common from '../../core/common/common.js';
 
 export enum BadgeAction {
   CSS_RULE_MODIFIED = 'css-rule-modified',
+  DOM_ELEMENT_OR_ATTRIBUTE_EDITED = 'dom-element-or-attribute-edited',
+  MODERN_DOM_BADGE_CLICKED = 'modern-dom-badge-clicked',
   PERFORMANCE_INSIGHT_CLICKED = 'performance-insight-clicked',
 }
 
 export type BadgeActionEvents = Record<BadgeAction, void>;
 
 export interface BadgeContext {
-  dispatchBadgeTriggeredEvent: (badge: Badge) => void;
+  onTriggerBadge: (badge: Badge) => void;
   badgeActionEventTarget: Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>;
 }
 
 export abstract class Badge {
-  #dispatchBadgeTriggeredEvent: (badge: Badge) => void;
+  #onTriggerBadge: (badge: Badge) => void;
   #badgeActionEventTarget: Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>;
   #eventListeners: Common.EventTarget.EventDescriptor[] = [];
   #triggeredBefore = false;
 
   abstract readonly name: string;
   abstract readonly title: string;
+  abstract readonly imageUri: string;
   abstract readonly interestedActions: readonly BadgeAction[];
   readonly isStarterBadge: boolean = false;
 
   constructor(context: BadgeContext) {
-    this.#dispatchBadgeTriggeredEvent = context.dispatchBadgeTriggeredEvent;
+    this.#onTriggerBadge = context.onTriggerBadge;
     this.#badgeActionEventTarget = context.badgeActionEventTarget;
   }
 
@@ -40,7 +43,7 @@ export abstract class Badge {
 
     this.#triggeredBefore = true;
     this.deactivate();
-    this.#dispatchBadgeTriggeredEvent(this);
+    this.#onTriggerBadge(this);
   }
 
   activate(): void {

package/front_end/models/badges/DOMDetectiveBadge.ts

@@ -0,0 +1,20 @@
+// 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.
+
+import {Badge, BadgeAction} from './Badge.js';
+
+const DOM_DETECTIVE_BADGE_IMAGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
+export class DOMDetectiveBadge extends Badge {
+  override readonly name = 'awards/dom-detective-badge';
+  override readonly title = 'DOM Detective';
+  override readonly imageUri = DOM_DETECTIVE_BADGE_IMAGE_URI;
+
+  override readonly interestedActions = [
+    BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
+  ] as const;
+
+  handleAction(_action: BadgeAction): void {
+    this.trigger();
+  }
+}

package/front_end/models/badges/SpeedsterBadge.ts

@@ -4,10 +4,13 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const SPEEDSTER_BADGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
 export class SpeedsterBadge extends Badge {
-  override readonly name = 'awards/speedster';
+  // TODO(ergunsh): Update the name to be the actual badge for DevTools.
+  override readonly name = 'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Flegacy%2Ftest';
   override readonly title = 'Speedster';
   override readonly interestedActions = [BadgeAction.PERFORMANCE_INSIGHT_CLICKED] as const;
+  override readonly imageUri = SPEEDSTER_BADGE_URI;
 
   handleAction(_action: BadgeAction): void {
     this.trigger();

package/front_end/models/badges/StarterBadge.ts

@@ -4,14 +4,18 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
+const STARTER_BADGE_IMAGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
 export class StarterBadge extends Badge {
   override readonly isStarterBadge = true;
-  override readonly name = 'awards/chrome-devtools-user';
+  // TODO(ergunsh): Update the name to be the actual badge for DevTools.
+  override readonly name = 'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Fprofile%2Fcreated-profile';
   override readonly title = 'Chrome DevTools User';
+  override readonly imageUri = STARTER_BADGE_IMAGE_URI;
 
   // TODO(ergunsh): Add remaining non-trivial event definitions
   override readonly interestedActions = [
     BadgeAction.CSS_RULE_MODIFIED,
+    BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
   ] as const;
 
   handleAction(_action: BadgeAction): void {

package/front_end/models/badges/UserBadges.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 
 import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext} from './Badge.js';
+import {DOMDetectiveBadge} from './DOMDetectiveBadge.js';
 import {SpeedsterBadge} from './SpeedsterBadge.js';
 import {StarterBadge} from './StarterBadge.js';
 
@@ -23,12 +24,13 @@ let userBadgesInstance: UserBadges|undefined = undefined;
 export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #badgeActionEventTarget = new Common.ObjectWrapper.ObjectWrapper<BadgeActionEvents>();
 
-  #receiveBadgesSetting?: Common.Settings.Setting<Boolean>;
+  #receiveBadgesSetting: Common.Settings.Setting<Boolean>;
   #allBadges: Badge[];
 
   static readonly BADGE_REGISTRY: BadgeClass[] = [
     StarterBadge,
     SpeedsterBadge,
+    DOMDetectiveBadge,
   ];
 
   private constructor() {
@@ -37,11 +39,10 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#receiveBadgesSetting = Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges');
     this.#receiveBadgesSetting.addChangeListener(this.#reconcileBadges, this);
 
-    this.#allBadges =
-        UserBadges.BADGE_REGISTRY.map(badgeCtor => new badgeCtor({
-                                        dispatchBadgeTriggeredEvent: this.#dispatchBadgeTriggeredEvent.bind(this),
-                                        badgeActionEventTarget: this.#badgeActionEventTarget,
-                                      }));
+    this.#allBadges = UserBadges.BADGE_REGISTRY.map(badgeCtor => new badgeCtor({
+                                                      onTriggerBadge: this.#onTriggerBadge.bind(this),
+                                                      badgeActionEventTarget: this.#badgeActionEventTarget,
+                                                    }));
   }
 
   static instance({forceNew}: {forceNew: boolean} = {forceNew: false}): UserBadges {
@@ -65,7 +66,28 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.#badgeActionEventTarget.dispatchEventToListeners(action);
   }
 
-  #dispatchBadgeTriggeredEvent(badge: Badge): void {
+  async #onTriggerBadge(badge: Badge): Promise<void> {
+    let shouldAwardBadge = false;
+    // By default, we award non-starter badges directly when they are triggered.
+    if (!badge.isStarterBadge) {
+      shouldAwardBadge = true;
+    } else {
+      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) {
+        shouldAwardBadge = true;
+      }
+    }
+
+    // Awarding was needed and not successful, we don't show the notification
+    if (shouldAwardBadge) {
+      const result = await Host.GdpClient.GdpClient.instance().createAward({name: badge.name});
+      if (!result) {
+        return;
+      }
+    }
+
     this.dispatchEventToListeners(Events.BADGE_TRIGGERED, badge);
   }
 
@@ -115,4 +137,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   reconcileBadgesFinishedForTest(): void {
   }
+
+  isReceiveBadgesSettingEnabled(): boolean {
+    return Boolean(this.#receiveBadgesSetting?.get());
+  }
 }

package/front_end/models/trace/ModelImpl.ts

@@ -118,19 +118,6 @@ export class Model extends EventTarget {
         metadata,
         resolveSourceMap: config?.resolveSourceMap,
       };
-      if (!parseConfig.logger &&
-          (window.location.href.includes('devtools/bundled') || window.location.search.includes('debugFrontend'))) {
-        // Someone is debugging DevTools, enable the logger.
-        const times: Record<string, number> = {};
-        parseConfig.logger = {
-          start(id) {
-            times[id] = performance.now();
-          },
-          end(id) {
-            performance.measure(id, {start: times[id]});
-          },
-        };
-      }
       await this.#processor.parse(traceEvents, parseConfig);
       this.#storeParsedFileData(file, this.#processor.parsedTrace, this.#processor.insights);
       // We only push the file onto this.#traces here once we know it's valid

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/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);