chrome-devtools-frontend 1.0.1603822 → 1.0.1604514

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

@@ -36,7 +36,7 @@ import * as TimelineUtils from '../../timeline/utils/utils.js';
 import {PanelUtils} from '../../utils/utils.js';
 
 import chatMessageStyles from './chatMessage.css.js';
-import {walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
+import {walkthroughCloseTitle, walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
 
 const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
@@ -49,10 +49,6 @@ const SCROLL_ROUNDING_OFFSET = 1;
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
-  /**
-   * @description Text used in the button to close an open walkthrough
-   */
-  closeAgentWalkthrough: 'Close agent walkthrough',
   /**
    * @description The title of the button that allows submitting positive
    * feedback about the response for AI assistance.
@@ -174,11 +170,6 @@ const UIStringsNotTranslate = {
    * @description Alt text for image when it is not available.
    */
   imageUnavailable: 'Image unavailable',
-  /**
-   * @description Title for the button that shows the thinking process (walkthrough).
-   */
-  showThinking: 'Show thinking',
-
   /**
    * @description Title for the button that takes the user into other DevTools panels to reveal items the AI references.
    */
@@ -310,9 +301,10 @@ export interface MessageInput {
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
     isExpanded: boolean,
-    onToggle: (isOpen: boolean) => void,
+    onToggle: (isOpen: boolean, message: ModelChatMessage) => void,
     isInlined: boolean,
-    activeMessage: ModelChatMessage|null,
+    activeSidebarMessage: ModelChatMessage|null,
+    inlineExpandedMessages: ModelChatMessage[],
   };
 }
 
@@ -516,9 +508,8 @@ function renderWalkthroughSidebarButton(
   }
 
   const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
-  const isOpen = input.message === input.walkthrough.activeMessage;
-
-  const title = isOpen ? lockedString(UIStringsNotTranslate.closeAgentWalkthrough) : walkthroughTitle({
+  const isExpanded = walkthrough.isExpanded && input.message === input.walkthrough.activeSidebarMessage;
+  const title = isExpanded ? walkthroughCloseTitle({hasWidgets: hasOneStepWithWidget}) : walkthroughTitle({
     isLoading: input.isLoading,
     hasWidgets: hasOneStepWithWidget,
     lastStep,
@@ -536,12 +527,12 @@ function renderWalkthroughSidebarButton(
       <devtools-button
         .variant=${variant}
         .size=${Buttons.Button.Size.SMALL}
-        .title=${lastStep.isLoading ? titleForStep(lastStep) : lockedString(UIStringsNotTranslate.showThinking)}
+        .title=${lastStep.isLoading ? titleForStep(lastStep) : title}
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.activeMessage === input.message && walkthrough.isExpanded) {
-            walkthrough.onToggle(false);
+          if(walkthrough.activeSidebarMessage === input.message && walkthrough.isExpanded) {
+            walkthrough.onToggle(false, message as ModelChatMessage);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
             // update the state with this message as the user could have had
@@ -577,7 +568,9 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // A message's walkthrough is considered expanded if the walkthrough is
   // open and it is specifically targeting this message. This is necessary
   // because the walkthrough state is shared across all messages in the chat.
-  const isExpanded = (input.walkthrough.isExpanded && input.walkthrough.activeMessage === input.message);
+  const isExpanded = input.walkthrough.isInlined ?
+      input.walkthrough.inlineExpandedMessages.includes(input.message as ModelChatMessage) :
+      (input.walkthrough.isExpanded && input.walkthrough.activeSidebarMessage === input.message);
 
   // When a side-effect step is present, it's shown in the main chat UI if the
   // walkthrough is closed, allowing the user to approve it without opening
@@ -1238,7 +1231,8 @@ export class ChatMessage extends UI.Widget.Widget {
     onToggle: () => {},
     isInlined: false,
     isExpanded: false,
-    activeMessage: null,
+    activeSidebarMessage: null,
+    inlineExpandedMessages: [],
   };
 
   #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());

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

@@ -88,10 +88,11 @@ export interface Props {
   generateConversationSummary: (markdown: string) => Promise<string>;
   walkthrough: {
     onOpen: (message: ModelChatMessage) => void,
-    onToggle: (isOpen: boolean) => void,
+    onToggle: (isOpen: boolean, message: ModelChatMessage) => void,
     isExpanded: boolean,
     isInlined: boolean,
-    activeMessage: ModelChatMessage|null,
+    activeSidebarMessage: ModelChatMessage|null,
+    inlineExpandedMessages: ModelChatMessage[],
   };
 }
 

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

@@ -36,6 +36,14 @@ const UIStrings = {
    * @description Title for the button that shows the walkthrough when there are widgets in the walkthrough.
    */
   showAgentWalkthrough: 'Show agent walkthrough',
+  /**
+   * @description Title for the button that hides the walkthrough when there are no widgets in the walkthrough.
+   */
+  hideThinking: 'Hide thinking',
+  /**
+   * @description Title for the button that hides the walkthrough when there are widgets in the walkthrough.
+   */
+  hideAgentWalkthrough: 'Hide agent walkthrough',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -46,7 +54,7 @@ export interface ViewInput {
   markdownRenderer: MarkdownLitRenderer;
   isInlined: boolean;
   isExpanded: boolean;
-  onToggle: (isOpen: boolean) => void;
+  onToggle: (isOpen: boolean, message: ModelChatMessage) => void;
   onOpen: (message: ModelChatMessage) => void;
   handleScroll: (ev: Event) => void;
 }
@@ -70,6 +78,19 @@ export function walkthroughTitle(input: {
   return lockedString(UIStrings.showThinking);
 }
 
+export function walkthroughCloseTitle(input: {
+  hasWidgets: boolean,
+  isInlined?: boolean,
+}): string {
+  if (input.isInlined) {
+    return i18nString(UIStrings.title);
+  }
+  if (input.hasWidgets) {
+    return lockedString(UIStrings.hideAgentWalkthrough);
+  }
+  return lockedString(UIStrings.hideThinking);
+}
+
 function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
   const lastStep = steps.at(-1);
   if (!input.isInlined || !lastStep) {
@@ -78,10 +99,13 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
 
   function onToggle(event: Event): void {
     const isOpen = (event.target as HTMLDetailsElement).open;
-    if (isOpen && input.message) {
+    if (!input.message) {
+      return;
+    }
+    if (isOpen) {
       input.onOpen(input.message);
     } else {
-      input.onToggle(isOpen);
+      input.onToggle(isOpen, input.message);
     }
   }
 
@@ -92,7 +116,7 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
       <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
         ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
-        ${walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
+        ${input.isExpanded ? walkthroughCloseTitle({hasWidgets, isInlined: true}) : walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
         <devtools-icon name="chevron-right"></devtools-icon>
       </summary>
       ${stepsOutput}
@@ -118,7 +142,11 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
             title: i18nString(UIStrings.close),
             jslogContext: 'close-walkthrough',
           } as Buttons.Button.ButtonData}
-          @click=${() => input.onToggle(false)}
+          @click=${() => {
+            if (input.message) {
+              input.onToggle(false, input.message);
+            }
+          }}
         ></devtools-button>
       </div>
       ${stepsOutput}
@@ -184,7 +212,7 @@ export class WalkthroughView extends UI.Widget.Widget {
   #message: ModelChatMessage|null = null;
   #isLoading = false;
   #markdownRenderer: MarkdownLitRenderer|null = null;
-  #onToggle: (isOpen: boolean) => void = () => {};
+  #onToggle: (isOpen: boolean, message: ModelChatMessage) => void = () => {};
   #onOpen: (message: ModelChatMessage) => void = () => {};
   #isInlined = false;
   #isExpanded = false;
@@ -318,7 +346,7 @@ export class WalkthroughView extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  set onToggle(onToggle: (isOpen: boolean) => void) {
+  set onToggle(onToggle: (isOpen: boolean, message: ModelChatMessage) => void) {
     this.#onToggle = onToggle;
     this.requestUpdate();
   }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -78,9 +78,25 @@ const {animateOn} = UI.UIUtils;
 
 const UIStrings = {
   /**
-   * @description Title for Ad adorner. This iframe is marked as advertisement frame.
+   * @description Title for Ad adorner. This element is marked as advertisement element.
    */
-  thisFrameWasIdentifiedAsAnAd: 'This frame was identified as an ad frame',
+  thisElementWasIdentifiedAsAnAd: 'This element was identified as an ad',
+  /**
+   * @description Title of a section in the Ad adorner tooltip. Lists the ad script(s) responsible for generating this element.
+   */
+  creatorAdScriptAncestry: 'Creator ad script ancestry',
+  /**
+   * @description Title of a section in the Ad adorner tooltip. The filter list rule that flagged the root script in 'Creator ad script ancestry' as an ad.
+   */
+  rootScriptFilterListRule: 'Root script filter list rule',
+  /**
+   * @description Title of a section in the Ad adorner tooltip. The filter list rule that flagged the element's current resource.
+   */
+  filterListRule: 'Filter list rule',
+  /**
+   * @description Title of a section in the Ad adorner tooltip. This element was identified as an ad, but no provenance data is available.
+   */
+  noProvenanceAvailable: 'No provenance data is available',
   /**
    * @description A context menu item in the Elements panel. Force is used as a verb, indicating intention to make the state change.
    */
@@ -399,7 +415,10 @@ export interface ViewInput {
   gridAdornerActive: boolean;
   popoverAdornerActive: boolean;
 
-  showAdAdorner: boolean;
+  adProvenance?: Protocol.Network.AdProvenance;
+  target?: SDK.Target.Target;
+  adTooltipId: string;
+
   showContainerAdorner: boolean;
   containerType?: string;
   showFlexAdorner: boolean;
@@ -851,8 +870,66 @@ function renderTag(
       attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node)}`)}&gt;</span>\u200B`;
 }
 
+function maybeRenderAdAdorner(input: ViewInput): Lit.TemplateResult|typeof nothing {
+  if (!input.adProvenance) {
+    return nothing;
+  }
+
+  // clang-format off
+  return html`
+    <devtools-adorner
+      aria-describedby=${input.adTooltipId}
+      aria-label=${i18nString(UIStrings.thisElementWasIdentifiedAsAnAd)}
+      .name=${ElementsComponents.AdornerManager.RegisteredAdorners.AD}
+      jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD)}
+      ${adornerRef()}>
+      <span>${ElementsComponents.AdornerManager.RegisteredAdorners.AD}</span>
+    </devtools-adorner>
+
+    <!--
+      Prevent the copy event from bubbling up to the Elements tree outline. Otherwise, DevTools
+      copies the underlying DOM node's HTML instead of the user's highlighted text.
+    -->
+    <devtools-tooltip id=${input.adTooltipId} variant=rich @copy=${(e: Event) => e.stopPropagation()}>
+      <div class="ad-provenance-tooltip">
+        ${input.adProvenance.filterlistRule ? html`
+          <div class="ad-provenance-tooltip-title">${i18nString(UIStrings.filterListRule)}</div>
+          <div class="ad-provenance-tooltip-content">${input.adProvenance.filterlistRule}</div>
+        ` : nothing}
+
+        ${input.adProvenance.adScriptAncestry && input.target ? html`
+          <div class="ad-provenance-tooltip-title">${i18nString(UIStrings.creatorAdScriptAncestry)}</div>
+          <div class="ad-provenance-tooltip-content">
+            ${input.adProvenance.adScriptAncestry.ancestryChain.map(script => html`
+              <div>
+                ${UI.Widget.widget(Components.Linkifier.ScriptLocationLink, {
+                  target: input.target,
+                  scriptId: script.scriptId,
+                  options: { jslogContext: 'ad-script' },
+                })}
+              </div>
+            `)}
+          </div>
+
+          ${input.adProvenance.adScriptAncestry.rootScriptFilterlistRule ? html`
+            <div class="ad-provenance-tooltip-title">${i18nString(UIStrings.rootScriptFilterListRule)}</div>
+            <div class="ad-provenance-tooltip-content">
+              ${input.adProvenance.adScriptAncestry.rootScriptFilterlistRule}
+            </div>
+          ` : nothing}
+        ` : nothing}
+
+        ${!input.adProvenance.adScriptAncestry && !input.adProvenance.filterlistRule ? html`
+            <div class="ad-provenance-tooltip-title">${i18nString(UIStrings.noProvenanceAvailable)}</div>
+          ` : nothing}
+      </div>
+    </devtools-tooltip>
+  `;
+  // clang-format on
+}
+
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const hasAdorners = input.showAdAdorner || input.showContainerAdorner || input.showFlexAdorner ||
+  const hasAdorners = !!input.adProvenance || input.showContainerAdorner || input.showFlexAdorner ||
       input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner || input.showPopoverAdorner ||
       input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner ||
       input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner;
@@ -888,13 +965,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         </div>` : nothing}
       </div>
       ${hasAdorners ? html`<div class="adorner-container ${!hasAdorners ? 'hidden' : ''}">
-        ${input.showAdAdorner ? html`<devtools-adorner
-          aria-label=${i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd)}
-          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.AD}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD)}
-          ${adornerRef()}>
-          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.AD}</span>
-        </devtools-adorner>` : nothing}
+        ${maybeRenderAdAdorner(input)}
         ${input.showViewSourceAdorner ? html`<devtools-adorner
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}
           jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE)}
@@ -1102,6 +1173,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #descendantDecorations: Decoration[] = [];
   #decorationsTooltip = '';
 
+  static #adTooltipIdCounter = 0;
+  #adTooltipId = `ad-tooltip-${++ElementsTreeElement.#adTooltipIdCounter}`;
+
   #updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null = null;
 
   // Used to add the content to TreeElement's title element.
@@ -1230,7 +1304,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onExpand: () => this.expand(),
 
           containerAdornerActive: this.#containerAdornerActive,
-          showAdAdorner: this.nodeInternal.isAdRelatedNode(),
+          adProvenance: this.nodeInternal.adProvenance(),
+          adTooltipId: this.#adTooltipId,
+          target: this.nodeInternal.domModel().target(),
           showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
           containerType: this.#layout?.containerType,
           showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
@@ -1565,7 +1641,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onHighlightSearchResults: () => {},
           onExpand: () => {},
           containerAdornerActive: false,
-          showAdAdorner: false,
+          adProvenance: undefined,
+          target: undefined,
+          adTooltipId: '',
           showContainerAdorner: false,
           containerType: this.#layout?.containerType,
           showFlexAdorner: false,

package/front_end/panels/elements/elementsTreeOutline.css

@@ -384,3 +384,21 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   background-position: bottom;
   padding-bottom: 1px;
 }
+
+/* Ad Provenance Tooltip */
+.ad-provenance-tooltip {
+  user-select: text;
+}
+
+.ad-provenance-tooltip-title {
+  color: var(--sys-color-on-surface-subtle);
+  margin-top: 4px;
+}
+
+.ad-provenance-tooltip-title:first-child {
+  margin-top: 0;
+}
+
+.ad-provenance-tooltip-content {
+  padding-left: 16px;
+}

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -132,13 +132,13 @@ class HeapSnapshotSortableDataGridBase extends DataGrid.DataGrid.DataGridImpl<He
 export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
                                                       .eventMixin<EventTypes, typeof HeapSnapshotSortableDataGridBase>(
                                                           HeapSnapshotSortableDataGridBase) {
-  snapshot: HeapSnapshotProxy|null;
-  override selectedNode: HeapSnapshotGridNode|null;
+  snapshot: HeapSnapshotProxy|null = null;
+  override selectedNode: HeapSnapshotGridNode|null = null;
   readonly heapProfilerModelInternal: SDK.HeapProfilerModel.HeapProfilerModel|null;
   readonly dataDisplayDelegateInternal: DataDisplayDelegate;
-  recursiveSortingDepth: number;
-  populatedAndSorted: boolean;
-  nameFilter: UI.Toolbar.ToolbarInput|null;
+  recursiveSortingDepth = 0;
+  populatedAndSorted = false;
+  nameFilter: UI.Toolbar.ToolbarInput|null = null;
   nodeFilterInternal: HeapSnapshotModel.HeapSnapshotModel.NodeFilter|undefined;
   lastSortColumnId?: string|null;
   lastSortAscending?: boolean;
@@ -147,8 +147,6 @@ export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
       dataGridParameters: DataGrid.DataGrid.Parameters) {
     // TODO(allada) This entire class needs to be converted to use the templates in DataGridNode.
     super(dataGridParameters);
-    this.snapshot = null;
-    this.selectedNode = null;
     this.heapProfilerModelInternal = heapProfilerModel;
     this.dataDisplayDelegateInternal = dataDisplayDelegate;
     const tooltips = [
@@ -743,9 +741,9 @@ export enum HeapSnapshotRetainmentDataGridEvents {
 }
 
 export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGrid {
-  profileIndex: number;
-  objectIdToSelect: string|null;
-  nextRequestedFilter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter|null;
+  profileIndex = -1;
+  objectIdToSelect: string|null = null;
+  nextRequestedFilter: HeapSnapshotModel.HeapSnapshotModel.NodeFilter|null = null;
   lastFilter?: HeapSnapshotModel.HeapSnapshotModel.NodeFilter|null;
   filterInProgress?: HeapSnapshotModel.HeapSnapshotModel.NodeFilter|null;
 
@@ -773,14 +771,13 @@ export class HeapSnapshotConstructorsDataGrid extends HeapSnapshotViewportDataGr
       },
     ];
     super(
-        heapProfilerModel, dataDisplayDelegate,
-        ({displayName: i18nString(UIStrings.heapSnapshotConstructors).toString(), columns} as
-         DataGrid.DataGrid.Parameters));
-    // clang-format on
-    this.profileIndex = -1;
-    this.objectIdToSelect = null;
-
-    this.nextRequestedFilter = null;
+        heapProfilerModel,
+        dataDisplayDelegate,
+        {
+          displayName: i18nString(UIStrings.heapSnapshotConstructors).toString(),
+          columns,
+        },
+    );
   }
 
   override sortFields(sortColumn: string, sortAscending: boolean):
@@ -1015,7 +1012,6 @@ export class AllocationDataGrid extends HeapSnapshotViewportDataGrid {
     super(
         heapProfilerModel, dataDisplayDelegate,
         ({displayName: i18nString(UIStrings.allocation).toString(), columns} as DataGrid.DataGrid.Parameters));
-    // clang-format on
     this.linkifierInternal = new Components.Linkifier.Linkifier();
   }
 

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1290,8 +1290,10 @@ export class HeapSnapshotDiffNode extends HeapSnapshotGridNode {
   readonly classKey: string;
 
   constructor(
-      dataGrid: HeapSnapshotDiffDataGrid, classKey: string,
-      diffForClass: HeapSnapshotModel.HeapSnapshotModel.DiffForClass) {
+      dataGrid: HeapSnapshotDiffDataGrid,
+      classKey: string,
+      diffForClass: HeapSnapshotModel.HeapSnapshotModel.Diff,
+  ) {
     super(dataGrid, true);
     this.nameInternal = diffForClass.name;
     this.addedCount = diffForClass.addedCount;

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -20,26 +20,19 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapSnapshotProxy.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<HeapSnapshotWorkerProxy.EventTypes> {
+  readonly eventHandler: (arg0: string, arg1: string) => void;
+  nextObjectId = 1;
+  nextCallId = 1;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly eventHandler: (arg0: string, arg1: any) => void;
-  nextObjectId: number;
-  nextCallId: number;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  callbacks: Map<number, (arg0: any) => void>;
-  readonly previousCallbacks: Set<number>;
+  callbacks = new Map<number, (arg0: any) => void>();
+  readonly previousCallbacks = new Set<number>();
   readonly worker: PlatformApi.HostRuntime.Worker;
   interval?: number;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  constructor(eventHandler: (arg0: string, arg1: any) => void) {
+
+  constructor(eventHandler: (arg0: string, arg1: string) => void) {
     super();
     this.eventHandler = eventHandler;
-    this.nextObjectId = 1;
-    this.nextCallId = 1;
-    this.callbacks = new Map();
-    this.previousCallbacks = new Set();
     this.worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(
         new URL('../../entrypoints/heap_snapshot_worker/heap_snapshot_worker-entrypoint.js', import.meta.url)
             .toString());
@@ -243,8 +236,11 @@ export class HeapSnapshotLoaderProxy extends HeapSnapshotProxyObject implements
   readonly profileUid: number;
   readonly snapshotReceivedCallback: (arg0: HeapSnapshotProxy) => void;
   constructor(
-      worker: HeapSnapshotWorkerProxy, objectId: number, profileUid: number,
-      snapshotReceivedCallback: (arg0: HeapSnapshotProxy) => void) {
+      worker: HeapSnapshotWorkerProxy,
+      objectId: number,
+      profileUid: number,
+      snapshotReceivedCallback: (arg0: HeapSnapshotProxy) => void,
+  ) {
     super(worker, objectId);
     this.profileUid = profileUid;
     this.snapshotReceivedCallback = snapshotReceivedCallback;

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1557,9 +1557,6 @@ export class TrackingHeapSnapshotProfileType extends
     }
     this.setProfileBeingRecorded(new HeapProfileHeader(heapProfilerModel, this, undefined));
     this.profileSamples = new Samples();
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (this.profileBeingRecorded() as any)._profileSamples = this.profileSamples;
     this.recording = true;
     this.addProfile((this.profileBeingRecorded() as ProfileHeader));
     (this.profileBeingRecorded() as HeapProfileHeader).updateStatus(i18nString(UIStrings.recording));
@@ -1733,20 +1730,16 @@ export class HeapProfileHeader extends ProfileHeader {
     this.receiver = this.workerProxy.createLoader(this.uid, this.snapshotReceived.bind(this));
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  handleWorkerEvent(eventName: string, data: any): void {
+  handleWorkerEvent(eventName: string, data: string): void {
     if (HeapSnapshotModel.HeapSnapshotModel.HeapSnapshotProgressEvent.BrokenSnapshot === eventName) {
-      const error = (data as string);
-      Common.Console.Console.instance().error(error);
+      Common.Console.Console.instance().error(data);
       return;
     }
 
     if (HeapSnapshotModel.HeapSnapshotModel.HeapSnapshotProgressEvent.Update !== eventName) {
       return;
     }
-    const serializedMessage = (data as string);
-    const messageObject = i18n.i18n.deserializeUIString(serializedMessage);
+    const messageObject = i18n.i18n.deserializeUIString(data);
     // We know all strings from the worker are declared inside a single file so we can
     // use a custom function.
     this.updateStatus(moduleI18nString(messageObject.string, messageObject.values));

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -499,7 +499,10 @@ export class ProfileTypeSidebarSection extends UI.TreeOutline.TreeElement {
       const profileTitle = profile.title;
       let group: ProfileGroup = this.profileGroups[profileTitle];
       if (!group) {
-        group = new ProfileGroup();
+        group = {
+          profileSidebarTreeElements: [],
+          sidebarTreeElement: null,
+        };
         this.profileGroups[profileTitle] = group;
       }
       group.profileSidebarTreeElements.push(profileTreeElement);
@@ -604,19 +607,14 @@ export class ProfileTypeSidebarSection extends UI.TreeOutline.TreeElement {
   }
 }
 
-export class ProfileGroup {
+export interface ProfileGroup {
   profileSidebarTreeElements: ProfileSidebarTreeElement[];
   sidebarTreeElement: ProfileGroupSidebarTreeElement|null;
-  constructor() {
-    this.profileSidebarTreeElements = [];
-    this.sidebarTreeElement = null;
-  }
 }
 
 export class ProfileGroupSidebarTreeElement extends UI.TreeOutline.TreeElement {
   readonly dataDisplayDelegate: DataDisplayDelegate;
   profileTitle: string;
-  override toggleOnClick: boolean;
 
   constructor(dataDisplayDelegate: DataDisplayDelegate, title: string) {
     super('', true);

package/front_end/panels/sensors/SensorsView.ts

@@ -203,7 +203,6 @@ export class SensorsView extends UI.Widget.VBox {
   private betaElement!: HTMLInputElement;
   private gammaElement!: HTMLInputElement;
   private orientationLayer!: HTMLDivElement;
-  private boxElement?: HTMLElement;
   private boxMatrix?: DOMMatrix;
   private mouseDownVector?: Geometry.Vector|null;
   private originalBoxMatrix?: DOMMatrix;
@@ -731,7 +730,6 @@ export class SensorsView extends UI.Widget.VBox {
             <div class="orientation-layer" ${Directives.ref((el: Element | undefined) => { if (el) { this.orientationLayer = el as HTMLDivElement; } })}>
               <section
                 class="orientation-box orientation-element"
-                ${Directives.ref((el: Element | undefined) => { if (el) { this.boxElement = el as HTMLElement; } })}
               >
                 <section class="orientation-front orientation-element"></section>
                 <section class="orientation-top orientation-element"></section>

package/front_end/panels/timeline/TimelinePanel.ts

@@ -54,7 +54,6 @@ import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -2463,8 +2462,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       return;
     }
 
-    const liveMetrics = new TimelineComponents.LiveMetricsView.LiveMetricsView();
-    this.landingPage = LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget, liveMetrics);
+    this.landingPage = new TimelineComponents.LiveMetricsView.LiveMetricsView();
     this.landingPage.element.classList.add('timeline-landing-page', 'fill');
     this.landingPage.contentElement.classList.add('fill');
     this.landingPage.show(this.statusPaneContainer);