chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -5,6 +5,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -15,9 +16,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {type NetworkNode, NetworkRequestNode} from './NetworkDataGridNode.js';
 import type {NetworkLogView} from './NetworkLogView.js';
 import {NetworkManageCustomHeadersView} from './NetworkManageCustomHeadersView.js';
-import type {
-  NetworkTimeCalculator, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from
-  './NetworkTimeCalculator.js';
 import {NetworkWaterfallColumn} from './NetworkWaterfallColumn.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 
@@ -169,7 +167,7 @@ export class NetworkLogViewColumns {
   private waterfallRequestsAreStale: boolean;
   private waterfallScrollerWidthIsStale: boolean;
   private readonly popupLinkifier: Components.Linkifier.Linkifier;
-  private calculatorsMap: Map<string, NetworkTimeCalculator>;
+  private calculatorsMap: Map<string, NetworkTimeCalculator.NetworkTimeCalculator>;
   private lastWheelTime: number;
   private dataGridInternal!: DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>;
   private splitWidget!: UI.SplitWidget.SplitWidget;
@@ -185,8 +183,8 @@ export class NetworkLogViewColumns {
   private hasScrollerTouchStarted?: boolean;
   private scrollerTouchStartPos?: number;
   constructor(
-      networkLogView: NetworkLogView, timeCalculator: NetworkTransferTimeCalculator,
-      durationCalculator: NetworkTransferDurationCalculator,
+      networkLogView: NetworkLogView, timeCalculator: NetworkTimeCalculator.NetworkTransferTimeCalculator,
+      durationCalculator: NetworkTimeCalculator.NetworkTransferDurationCalculator,
       networkLogLargeRowsSetting: Common.Settings.Setting<boolean>) {
     this.networkLogView = networkLogView;
 
@@ -428,7 +426,7 @@ export class NetworkLogViewColumns {
     }
   }
 
-  setCalculator(x: NetworkTimeCalculator): void {
+  setCalculator(x: NetworkTimeCalculator.NetworkTimeCalculator): void {
     this.waterfallColumn.setCalculator(x);
   }
 
@@ -731,7 +729,7 @@ export class NetworkLogViewColumns {
       if (sortId === waterfallSortIds.Duration || sortId === waterfallSortIds.Latency) {
         calculator = this.calculatorsMap.get(CalculatorTypes.DURATION);
       }
-      this.networkLogView.setCalculator((calculator as NetworkTimeCalculator));
+      this.networkLogView.setCalculator((calculator as NetworkTimeCalculator.NetworkTimeCalculator));
 
       this.activeWaterfallSortId = sortId;
       this.dataGridInternal.markColumnAsSortedBy('waterfall', DataGrid.DataGrid.Order.Ascending);

package/front_end/panels/network/NetworkOverview.ts

@@ -5,13 +5,13 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {NetworkLogView} from './NetworkLogView.js';
-import {NetworkTimeBoundary} from './NetworkTimeCalculator.js';
 import {RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
 
 export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOverviewBase {
@@ -25,7 +25,7 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
   private requestsList!: SDK.NetworkRequest.NetworkRequest[];
   private requestsSet!: Set<SDK.NetworkRequest.NetworkRequest>;
   private span!: number;
-  private lastBoundary?: NetworkTimeBoundary|null;
+  private lastBoundary?: NetworkTimeCalculator.NetworkTimeBoundary|null;
 
   constructor() {
     super();
@@ -140,7 +140,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
   override update(): void {
     const calculator = this.calculator();
 
-    const newBoundary = new NetworkTimeBoundary(calculator.minimumBoundary(), calculator.maximumBoundary());
+    const newBoundary =
+        new NetworkTimeCalculator.NetworkTimeBoundary(calculator.minimumBoundary(), calculator.maximumBoundary());
     if (!this.lastBoundary || !newBoundary.equals(this.lastBoundary)) {
       const span = calculator.boundarySpan();
       while (this.span < span) {
@@ -150,7 +151,8 @@ export class NetworkOverview extends PerfUI.TimelineOverviewPane.TimelineOvervie
       calculator.setBounds(
           calculator.minimumBoundary(), Trace.Types.Timing.Milli(calculator.minimumBoundary() + this.span));
 
-      this.lastBoundary = new NetworkTimeBoundary(calculator.minimumBoundary(), calculator.maximumBoundary());
+      this.lastBoundary =
+          new NetworkTimeCalculator.NetworkTimeBoundary(calculator.minimumBoundary(), calculator.maximumBoundary());
     }
 
     const context = this.context();

package/front_end/panels/network/NetworkPanel.ts

@@ -42,6 +42,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Extensions from '../../models/extensions/extensions.js';
 import * as Logs from '../../models/logs/logs.js';
+import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
@@ -58,7 +59,6 @@ import {NetworkLogView} from './NetworkLogView.js';
 import {NetworkOverview} from './NetworkOverview.js';
 import networkPanelStyles from './networkPanel.css.js';
 import {NetworkSearchScope} from './NetworkSearchScope.js';
-import {type NetworkTimeCalculator, NetworkTransferTimeCalculator} from './NetworkTimeCalculator.js';
 
 const UIStrings = {
   /**
@@ -212,7 +212,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   private readonly overviewPane: PerfUI.TimelineOverviewPane.TimelineOverviewPane;
   private readonly networkOverview: NetworkOverview;
   private readonly overviewPlaceholderElement: HTMLElement;
-  private readonly calculator: NetworkTransferTimeCalculator;
+  private readonly calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
   private splitWidget: UI.SplitWidget.SplitWidget;
   private readonly sidebarLocation: UI.View.TabbedViewLocation;
   private readonly progressBarContainer: HTMLDivElement;
@@ -291,7 +291,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
     this.overviewPane.setOverviewControls([this.networkOverview]);
     this.overviewPlaceholderElement = panel.contentElement.createChild('div');
 
-    this.calculator = new NetworkTransferTimeCalculator();
+    this.calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
 
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, false, 'network-panel-split-view-state');
     this.splitWidget.hideMain();
@@ -888,7 +888,7 @@ export class NetworkLogWithFilterRevealer implements
 export class FilmStripRecorder implements Tracing.TracingManager.TracingManagerClient {
   #tracingManager: Tracing.TracingManager.TracingManager|null = null;
   #resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel|null = null;
-  readonly #timeCalculator: NetworkTimeCalculator;
+  readonly #timeCalculator: NetworkTimeCalculator.NetworkTimeCalculator;
   readonly #filmStripView: PerfUI.FilmStripView.FilmStripView;
   #callback: ((filmStrip: Trace.Extras.FilmStrip.Data) => void)|null = null;
   // Used to fetch screenshots of the page load and show them in the panel.
@@ -898,7 +898,7 @@ export class FilmStripRecorder implements Tracing.TracingManager.TracingManagerC
   #collectedTraceEvents: Trace.Types.Events.Event[] = [];
 
   constructor(
-      timeCalculator: NetworkTimeCalculator,
+      timeCalculator: NetworkTimeCalculator.NetworkTimeCalculator,
       filmStripView: PerfUI.FilmStripView.FilmStripView,
   ) {
     this.#timeCalculator = timeCalculator;

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -5,6 +5,7 @@
 
 import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -12,7 +13,6 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import type {NetworkNode} from './NetworkDataGridNode.js';
 import {RequestTimeRangeNameToColor} from './NetworkOverview.js';
-import type {Label, NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import networkingTimingTableStyles from './networkTimingTable.css.js';
 import networkWaterfallColumnStyles from './networkWaterfallColumn.css.js';
 import {type RequestTimeRange, RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
@@ -27,7 +27,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
   private rightPadding: number;
   private scrollTop: number;
   private headerHeight: number;
-  private calculator: NetworkTimeCalculator;
+  private calculator: NetworkTimeCalculator.NetworkTimeCalculator;
   private rowHeight: number;
   private offsetWidth: number;
   private offsetHeight: number;
@@ -45,7 +45,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
   private readonly pathForStyle: Map<LayerStyle, Path2D>;
   private textLayers: TextLayer[];
 
-  constructor(calculator: NetworkTimeCalculator) {
+  constructor(calculator: NetworkTimeCalculator.NetworkTimeCalculator) {
     // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
     super();
     this.registerRequiredCSS(networkWaterfallColumnStyles);
@@ -319,7 +319,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     this.calculateCanvasSize();
   }
 
-  setCalculator(calculator: NetworkTimeCalculator): void {
+  setCalculator(calculator: NetworkTimeCalculator.NetworkTimeCalculator): void {
     this.calculator = calculator;
   }
 
@@ -534,7 +534,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     const downloadingPath = (this.pathForStyle.get(downloadingStyle) as Path2D);
     downloadingPath.rect(ranges.mid, y, barWidth, height - borderWidth);
 
-    let labels: Label|null = null;
+    let labels: NetworkTimeCalculator.Label|null = null;
     if (node.hovered()) {
       labels = this.calculator.computeBarGraphLabels(request);
       const barDotLineLength = 10;

package/front_end/panels/network/RequestTimingView.ts

@@ -36,11 +36,11 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Logs from '../../models/logs/logs.js';
+import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {Events, type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import networkingTimingTableStyles from './networkTimingTable.css.js';
 
 const UIStrings = {
@@ -242,10 +242,10 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/RequestTimingView.ts',
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class RequestTimingView extends UI.Widget.VBox {
   private request: SDK.NetworkRequest.NetworkRequest;
-  private calculator: NetworkTimeCalculator;
+  private calculator: NetworkTimeCalculator.NetworkTimeCalculator;
   private lastMinimumBoundary: number;
   private tableElement?: Element;
-  constructor(request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator) {
+  constructor(request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTimeCalculator) {
     super();
     this.registerRequiredCSS(networkingTimingTableStyles);
     this.element.classList.add('resource-timing-view');
@@ -421,7 +421,8 @@ export class RequestTimingView extends UI.Widget.VBox {
     return result;
   }
 
-  static createTimingTable(request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator): Element {
+  static createTimingTable(
+      request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTimeCalculator): Element {
     const tableElement = document.createElement('table');
     tableElement.classList.add('network-timing-table');
     tableElement.setAttribute('jslog', `${VisualLogging.pane('timing').track({resize: true})}`);
@@ -786,14 +787,14 @@ export class RequestTimingView extends UI.Widget.VBox {
   override wasShown(): void {
     this.request.addEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
-    this.calculator.addEventListener(Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);
+    this.calculator.addEventListener(NetworkTimeCalculator.Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);
     this.refresh();
   }
 
   override willHide(): void {
     this.request.removeEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.removeEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
-    this.calculator.removeEventListener(Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);
+    this.calculator.removeEventListener(NetworkTimeCalculator.Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);
   }
 
   private refresh(): void {

package/front_end/panels/network/network.ts

@@ -8,7 +8,7 @@ import './EventSourceMessagesView.js';
 import './NetworkConfigView.js';
 import './NetworkDataGridNode.js';
 import './NetworkItemView.js';
-import './NetworkTimeCalculator.js';
+import '../../models/network_time_calculator/network_time_calculator.js';
 import './NetworkLogView.js';
 import './NetworkLogViewColumns.js';
 import './NetworkFrameGrouper.js';
@@ -40,7 +40,6 @@ import * as NetworkManageCustomHeadersView from './NetworkManageCustomHeadersVie
 import * as NetworkOverview from './NetworkOverview.js';
 import * as NetworkPanel from './NetworkPanel.js';
 import * as NetworkSearchScope from './NetworkSearchScope.js';
-import * as NetworkTimeCalculator from './NetworkTimeCalculator.js';
 import * as NetworkWaterfallColumn from './NetworkWaterfallColumn.js';
 import * as RequestCookiesView from './RequestCookiesView.js';
 import * as RequestHTMLView from './RequestHTMLView.js';
@@ -67,7 +66,6 @@ export {
   NetworkOverview,
   NetworkPanel,
   NetworkSearchScope,
-  NetworkTimeCalculator,
   NetworkWaterfallColumn,
   RequestCookiesView,
   RequestHTMLView,

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -6,6 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
@@ -311,7 +312,7 @@ export class Samples {
   }
 }
 
-export class OverviewCalculator implements PerfUI.TimelineGrid.Calculator {
+export class OverviewCalculator implements NetworkTimeCalculator.Calculator {
   maximumBoundaries: number;
   minimumBoundaries: number;
   xScaleFactor: number;

package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -33,6 +33,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
+import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -267,7 +268,7 @@ export class ProfileFlameChart extends
   }
 }
 
-export class OverviewCalculator implements PerfUI.TimelineGrid.Calculator {
+export class OverviewCalculator implements NetworkTimeCalculator.Calculator {
   readonly formatter: (arg0: number, arg1?: number|undefined) => string;
   minimumBoundaries!: number;
   maximumBoundaries!: number;

package/front_end/panels/sensors/SensorsView.ts

@@ -7,6 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -208,7 +209,7 @@ export class SensorsView extends UI.Widget.VBox {
   private orientationLayer!: HTMLDivElement;
   private boxElement?: HTMLElement;
   private boxMatrix?: DOMMatrix;
-  private mouseDownVector?: UI.Geometry.Vector|null;
+  private mouseDownVector?: Geometry.Vector|null;
   private originalBoxMatrix?: DOMMatrix;
 
   constructor() {
@@ -720,7 +721,7 @@ export class SensorsView extends UI.Widget.VBox {
     //
     // |this.boxMatrix| is set in the Device Orientation coordinate space
     // because it represents the phone model we show users and also because the
-    // calculations in UI.Geometry.EulerAngles assume this coordinate space (so
+    // calculations in Geometry.EulerAngles assume this coordinate space (so
     // we apply the rotations in the Z-X'-Y'' order).
     // The CSS transforms, on the other hand, are done in the CSS coordinate
     // space, so we need to convert 2) to 1) while keeping 3) in mind. We can
@@ -743,11 +744,11 @@ export class SensorsView extends UI.Widget.VBox {
     event.consume(true);
     let axis, angle;
     if (event.shiftKey) {
-      axis = new UI.Geometry.Vector(0, 0, 1);
+      axis = new Geometry.Vector(0, 0, 1);
       angle = (mouseMoveVector.x - this.mouseDownVector.x) * ShiftDragOrientationSpeed;
     } else {
-      axis = UI.Geometry.crossProduct(this.mouseDownVector, mouseMoveVector);
-      angle = UI.Geometry.calculateAngle(this.mouseDownVector, mouseMoveVector);
+      axis = Geometry.crossProduct(this.mouseDownVector, mouseMoveVector);
+      angle = Geometry.calculateAngle(this.mouseDownVector, mouseMoveVector);
     }
 
     // See the comment in setBoxOrientation() for a longer explanation about
@@ -758,7 +759,7 @@ export class SensorsView extends UI.Widget.VBox {
     const currentMatrix =
         new DOMMatrixReadOnly().rotateAxisAngle(-axis.x, axis.z, axis.y, angle).multiply(this.originalBoxMatrix);
 
-    const eulerAngles = UI.Geometry.EulerAngles.fromDeviceOrientationRotationMatrix(currentMatrix);
+    const eulerAngles = Geometry.EulerAngles.fromDeviceOrientationRotationMatrix(currentMatrix);
     const newOrientation =
         new SDK.EmulationModel.DeviceOrientation(eulerAngles.alpha, eulerAngles.beta, eulerAngles.gamma);
     this.setDeviceOrientation(newOrientation, DeviceOrientationModificationSource.USER_DRAG);
@@ -782,17 +783,17 @@ export class SensorsView extends UI.Widget.VBox {
     return true;
   }
 
-  private calculateRadiusVector(x: number, y: number): UI.Geometry.Vector|null {
+  private calculateRadiusVector(x: number, y: number): Geometry.Vector|null {
     const rect = this.stageElement.getBoundingClientRect();
     const radius = Math.max(rect.width, rect.height) / 2;
     const sphereX = (x - rect.left - rect.width / 2) / radius;
     const sphereY = (y - rect.top - rect.height / 2) / radius;
     const sqrSum = sphereX * sphereX + sphereY * sphereY;
     if (sqrSum > 0.5) {
-      return new UI.Geometry.Vector(sphereX, sphereY, 0.5 / Math.sqrt(sqrSum));
+      return new Geometry.Vector(sphereX, sphereY, 0.5 / Math.sqrt(sqrSum));
     }
 
-    return new UI.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum));
+    return new Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum));
   }
 
   private appendTouchControl(): void {

package/front_end/panels/settings/AISettingsTab.ts

@@ -177,12 +177,12 @@ const UIStrings = {
    * @description Explainer for which data is being sent for the 'Code suggestions' feature
    */
   codeSuggestionsSendData:
-      'To generate annotation suggestions, your performance trace is sent to Google. This data may be seen by human reviewers to improve this feature.',
+      'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data may be seen by human reviewers to improve this feature.',
   /**
    * @description Explainer for which data is being sent for the 'Code suggestions' feature when logging is not enabled
    */
   codeSuggestionsSendDataNoLogging:
-      'To generate annotation suggestions, your performance trace is sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
+      'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
    * @description Label for a link to the terms of service
    */

package/front_end/panels/settings/SettingsScreen.ts

@@ -335,15 +335,25 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
       window.clearTimeout(this.#updateSyncSectionTimerId);
       this.#updateSyncSectionTimerId = -1;
     }
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(syncInfo => {
-      this.syncSection.data = {
-        syncInfo,
-        syncSetting: Common.Settings.moduleSetting('sync-preferences') as Common.Settings.Setting<boolean>,
-      };
-      if (!syncInfo.isSyncActive || !syncInfo.arePreferencesSynced) {
-        this.#updateSyncSectionTimerId = window.setTimeout(this.updateSyncSection.bind(this), 500);
-      }
-    });
+
+    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]) => {
+          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);
+          }
+        });
   }
 
   private createExtensionSection(settings: Common.Settings.SettingRegistration[]): void {

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

@@ -8,17 +8,16 @@ import '../../../ui/components/settings/settings.js';
 import '../../../ui/components/tooltips/tooltips.js';
 
 import type * as Common from '../../../core/common/common.js';
-import type * as Host from '../../../core/host/host.js';
+import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
+import * as Root from '../../../core/root/root.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import syncSectionStyles from './syncSection.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    * @description Text shown to the user in the Settings UI. 'This setting' refers
@@ -40,13 +39,84 @@ const UIStrings = {
    * case the user is not logged in to Chrome.
    */
   notSignedIn: 'You\'re not signed into Chrome.',
+  /**
+   * @description Label for the Google Developer Program profile status that corresponds to
+   * standard plan (No subscription).
+   */
+  gdpStandardPlan: 'Standard plan',
+  /**
+   * @description Label for the Google Developer Program subscription status that corresponds to
+   * `PREMIUM_ANNUAL` plan.
+   */
+  gdpPremiumAnnualSubscription: 'Premium (Annual)',
+  /**
+   * @description Label for the Google Developer Program subscription status that corresponds to
+   * `PREMIUM_MONTHLY` plan.
+   */
+  gdpPremiumMonthlySubscription: 'Premium (Monthly)',
+  /**
+   * @description Label for the Google Developer Program subscription status that corresponds to
+   * `PRO_ANNUAL` plan.
+   */
+  gdpProAnnualSubscription: 'Pro (Annual)',
+  /**
+   * @description Label for the Google Developer Program subscription status that corresponds to
+   * `PRO_MONTHLY` plan.
+   */
+  gdpProMonthlySubscription: 'Pro (Monthly)',
+  /**
+   * @description Label for the Google Developer Program subscription status that corresponds
+   * to a plan not known by the client.
+   */
+  gdpUnknownSubscription: 'Unknown plan',
+  /**
+   * @description Label for Sign-Up button for the Google Developer Program profiles.
+   */
+  signUp: 'Sign up',
+  /**
+   * @description Text for the data notice right after the settings checkbox.
+   */
+  relevantDataDisclaimer: '(Relevant data is sent to Google)',
+  /**
+   * @description Link text for opening the Google Developer Program profile page.
+   */
+  viewProfile: 'View profile',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/components/SyncSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const lockedString = i18n.i18n.lockedString;
+
+const {html} = Lit;
+
+function getGdpSubscriptionText(profile: Host.GdpClient.Profile): Platform.UIString.LocalizedString {
+  if (!profile.activeSubscription ||
+      profile.activeSubscription.subscriptionStatus !== Host.GdpClient.SubscriptionStatus.ENABLED) {
+    return i18nString(UIStrings.gdpStandardPlan);
+  }
+
+  switch (profile.activeSubscription.subscriptionTier) {
+    case Host.GdpClient.SubscriptionTier.PREMIUM_ANNUAL:
+      return i18nString(UIStrings.gdpPremiumAnnualSubscription);
+    case Host.GdpClient.SubscriptionTier.PREMIUM_MONTHLY:
+      return i18nString(UIStrings.gdpPremiumMonthlySubscription);
+    case Host.GdpClient.SubscriptionTier.PRO_ANNUAL:
+      return i18nString(UIStrings.gdpProAnnualSubscription);
+    case Host.GdpClient.SubscriptionTier.PRO_MONTHLY:
+      return i18nString(UIStrings.gdpProMonthlySubscription);
+    default:
+      return i18nString(UIStrings.gdpUnknownSubscription);
+  }
+}
+
+const GDP_LOGO_IMAGE_URL = new URL('../../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
+// TODO(crbug.com/441679275): Update once the API is enabled for prod.
+const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.devsite.corp.google.com/profile/u/';
 
 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 {
@@ -54,10 +124,14 @@ export class SyncSection extends HTMLElement {
 
   #syncInfo: Host.InspectorFrontendHostAPI.SyncInformation = {isSyncActive: false};
   #syncSetting?: Common.Settings.Setting<boolean>;
+  #receiveBadgesSetting?: Common.Settings.Setting<boolean>;
+  #gdpProfile?: Host.GdpClient.Profile;
 
   set data(data: SyncSectionData) {
     this.#syncInfo = data.syncInfo;
     this.#syncSetting = data.syncSetting;
+    this.#receiveBadgesSetting = data.receiveBadgesSetting;
+    this.#gdpProfile = data.gdpProfile;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
@@ -77,6 +151,7 @@ export class SyncSection extends HTMLElement {
       <fieldset>
         ${renderAccountInfo(this.#syncInfo)}
         ${renderSettingCheckboxIfNeeded(this.#syncInfo, this.#syncSetting)}
+        ${renderGdpSectionIfNeeded({ receiveBadgesSetting: this.#receiveBadgesSetting, gdpProfile: this.#gdpProfile })}
       </fieldset>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -152,6 +227,64 @@ function renderAccountInfo(syncInfo: Host.InspectorFrontendHostAPI.SyncInformati
   // clang-format on
 }
 
+function renderGdpSectionIfNeeded({
+  receiveBadgesSetting,
+  gdpProfile,
+}: {
+  receiveBadgesSetting?: Common.Settings.Setting<boolean>,
+  gdpProfile?: Host.GdpClient.Profile,
+}): Lit.LitTemplate {
+  // clang-format off
+  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+    return Lit.nothing;
+  }
+
+  function renderBrand(): Lit.LitTemplate {
+    return html`
+      <div class="gdp-profile-header">
+        <img src=${GDP_LOGO_IMAGE_URL} class="gdp-logo" alt="Google Developer Program">
+        ${lockedString('Google Developer Program')}
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="gdp-profile-container">
+      <div class="divider"></div>
+      ${gdpProfile ? html`
+        <div class="gdp-profile-details-content">
+          ${renderBrand()}
+          <div class="plan-details">
+            ${getGdpSubscriptionText(gdpProfile)}
+            &nbsp;·&nbsp;
+            <x-link class="link" href=${GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
+              ${i18nString(UIStrings.viewProfile)}
+            </x-link></div>
+            ${receiveBadgesSetting ? html`
+              <div class="setting-container">
+                <setting-checkbox class="setting-checkbox" .data=${{setting: receiveBadgesSetting}}></setting-checkbox>
+                <span>${i18nString(UIStrings.relevantDataDisclaimer)}</span>
+              </div>` : Lit.nothing}
+        </div>
+      ` : html`
+        <div class="gdp-profile-sign-up-content">
+          ${renderBrand()}
+          <devtools-button
+            @click=${() => {
+              // TODO(crbug.com/441467083): Render sign-up flow.
+              // no-op for now.
+            }}
+            .jslogContext=${'gdp.sign-up'}
+            .variant=${Buttons.Button.Variant.OUTLINED}>
+              ${i18nString(UIStrings.signUp)}
+          </devtools-button>
+        </div>
+      `}
+    </div>
+  `;
+}
+// clang-format on
+
 customElements.define('devtools-sync-section', SyncSection);
 
 declare global {