chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/models/trace/insights/LCPPhases.ts

@@ -1,222 +0,0 @@
-// Copyright 2024 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Handlers from '../handlers/handlers.js';
-import * as Helpers from '../helpers/helpers.js';
-import * as Types from '../types/types.js';
-
-import {
-  InsightCategory,
-  InsightKeys,
-  type InsightModel,
-  type InsightSetContext,
-  InsightWarning,
-  type PartialInsightModel,
-} from './types.js';
-
-export const UIStrings = {
-  /**
-   *@description Title of an insight that provides details about the LCP metric, broken down by phases / parts.
-   */
-  title: 'LCP by phase',
-  /**
-   * @description Description of a DevTools insight that presents a breakdown for the LCP metric by phases.
-   * This is displayed after a user expands the section to see more. No character length limits.
-   */
-  description:
-      'Each [phase has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
-  /**
-   *@description Time to first byte title for the Largest Contentful Paint's phases timespan breakdown.
-   */
-  timeToFirstByte: 'Time to first byte',
-  /**
-   *@description Resource load delay title for the Largest Contentful Paint phases timespan breakdown.
-   */
-  resourceLoadDelay: 'Resource load delay',
-  /**
-   *@description Resource load duration title for the Largest Contentful Paint phases timespan breakdown.
-   */
-  resourceLoadDuration: 'Resource load duration',
-  /**
-   *@description Element render delay title for the Largest Contentful Paint phases timespan breakdown.
-   */
-  elementRenderDelay: 'Element render delay',
-  /**
-   *@description Label used for the phase/component/stage/section of a larger duration.
-   */
-  phase: 'Phase',
-  /**
-   * @description Label used for the duration a single phase/component/stage/section takes up of a larger duration.
-   */
-  duration: 'Duration',
-  /**
-   * @description Label used for the duration a single phase/component/stage/section takes up of a larger duration. The value will be the 75th percentile of aggregate data. "Field" means that the data was collected from real users in the field as opposed to the developers local environment. "Field" is synonymous with "Real user data".
-   */
-  fieldDuration: 'Field p75',
-  /**
-   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
-   */
-  noLcp: 'No LCP detected',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPPhases.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-interface LCPPhases {
-  /**
-   * The time between when the user initiates loading the page until when
-   * the browser receives the first byte of the html response.
-   */
-  ttfb: Types.Timing.Milli;
-  /**
-   * The time between ttfb and the LCP request request being started.
-   * For a text LCP, this is undefined given no request is loaded.
-   */
-  loadDelay?: Types.Timing.Milli;
-  /**
-   * The time it takes to load the LCP request.
-   */
-  loadTime?: Types.Timing.Milli;
-  /**
-   * The time between when the LCP request finishes loading and when
-   * the LCP element is rendered.
-   */
-  renderDelay: Types.Timing.Milli;
-}
-
-export function isLCPPhases(model: InsightModel): model is LCPPhasesInsightModel {
-  return model.insightKey === 'LCPPhases';
-}
-export type LCPPhasesInsightModel = InsightModel<typeof UIStrings, {
-  lcpMs?: Types.Timing.Milli,
-  lcpTs?: Types.Timing.Milli,
-  lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
-  /** The network request for the LCP image, if there was one. */
-  lcpRequest?: Types.Events.SyntheticNetworkRequest,
-  phases?: LCPPhases,
-}>;
-
-function anyValuesNaN(...values: number[]): boolean {
-  return values.some(v => Number.isNaN(v));
-}
-/**
- * Calculates the 4 phases of an LCP and the timings of each.
- * Will return `null` if any required values were missing. We don't ever expect
- * them to be missing on newer traces, but old trace files may lack some of the
- * data we rely on, so we want to handle that case.
- */
-function breakdownPhases(
-    nav: Types.Events.NavigationStart, docRequest: Types.Events.SyntheticNetworkRequest, lcpMs: Types.Timing.Milli,
-    lcpRequest: Types.Events.SyntheticNetworkRequest|undefined): LCPPhases|null {
-  const docReqTiming = docRequest.args.data.timing;
-  if (!docReqTiming) {
-    throw new Error('no timing for document request');
-  }
-  const firstDocByteTs = Helpers.Timing.secondsToMicro(docReqTiming.requestTime) +
-      Helpers.Timing.milliToMicro(docReqTiming.receiveHeadersStart);
-
-  const firstDocByteTiming = Types.Timing.Micro(firstDocByteTs - nav.ts);
-  const ttfb = Helpers.Timing.microToMilli(firstDocByteTiming);
-  let renderDelay = Types.Timing.Milli(lcpMs - ttfb);
-
-  if (!lcpRequest) {
-    if (anyValuesNaN(ttfb, renderDelay)) {
-      return null;
-    }
-    return {ttfb, renderDelay};
-  }
-
-  const lcpStartTs = Types.Timing.Micro(lcpRequest.ts - nav.ts);
-  const requestStart = Helpers.Timing.microToMilli(lcpStartTs);
-
-  const lcpReqEndTs = Types.Timing.Micro(lcpRequest.args.data.syntheticData.finishTime - nav.ts);
-  const requestEnd = Helpers.Timing.microToMilli(lcpReqEndTs);
-
-  const loadDelay = Types.Timing.Milli(requestStart - ttfb);
-  const loadTime = Types.Timing.Milli(requestEnd - requestStart);
-  renderDelay = Types.Timing.Milli(lcpMs - requestEnd);
-  if (anyValuesNaN(ttfb, loadDelay, loadTime, renderDelay)) {
-    return null;
-  }
-
-  return {
-    ttfb,
-    loadDelay,
-    loadTime,
-    renderDelay,
-  };
-}
-
-function finalize(partialModel: PartialInsightModel<LCPPhasesInsightModel>): LCPPhasesInsightModel {
-  const relatedEvents = [];
-  if (partialModel.lcpEvent) {
-    relatedEvents.push(partialModel.lcpEvent);
-  }
-  if (partialModel.lcpRequest) {
-    relatedEvents.push(partialModel.lcpRequest);
-  }
-  return {
-    insightKey: InsightKeys.LCP_PHASES,
-    strings: UIStrings,
-    title: i18nString(UIStrings.title),
-    description: i18nString(UIStrings.description),
-    category: InsightCategory.LCP,
-    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',
-    ...partialModel,
-    relatedEvents,
-  };
-}
-
-export function generateInsight(
-    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): LCPPhasesInsightModel {
-  if (!context.navigation) {
-    return finalize({});
-  }
-
-  const networkRequests = parsedTrace.NetworkRequests;
-
-  const frameMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(context.frameId);
-  if (!frameMetrics) {
-    throw new Error('no frame metrics');
-  }
-
-  const navMetrics = frameMetrics.get(context.navigationId);
-  if (!navMetrics) {
-    throw new Error('no navigation metrics');
-  }
-  const metricScore = navMetrics.get(Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP);
-  const lcpEvent = metricScore?.event;
-  if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
-    return finalize({warnings: [InsightWarning.NO_LCP]});
-  }
-
-  // This helps calculate the phases.
-  const lcpMs = Helpers.Timing.microToMilli(metricScore.timing);
-  // This helps position things on the timeline's UI accurately for a trace.
-  const lcpTs = metricScore.event?.ts ? Helpers.Timing.microToMilli(metricScore.event?.ts) : undefined;
-  const lcpRequest = parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(context.navigationId);
-
-  const docRequest = networkRequests.byTime.find(req => req.args.data.requestId === context.navigationId);
-  if (!docRequest) {
-    return finalize({lcpMs, lcpTs, lcpEvent, lcpRequest, warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
-  }
-
-  if (!lcpRequest) {
-    return finalize({
-      lcpMs,
-      lcpTs,
-      lcpEvent,
-      lcpRequest,
-      phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
-    });
-  }
-
-  return finalize({
-    lcpMs,
-    lcpTs,
-    lcpEvent,
-    lcpRequest,
-    phases: breakdownPhases(context.navigation, docRequest, lcpMs, lcpRequest) ?? undefined,
-  });
-}

package/front_end/panels/animation/AnimationScreenshotPopover.ts

@@ -1,65 +0,0 @@
-// Copyright (c) 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
-
-import * as UI from '../../ui/legacy/legacy.js';
-
-import animationScreenshotPopoverStyles from './animationScreenshotPopover.css.js';
-
-export class AnimationScreenshotPopover extends UI.Widget.VBox {
-  #frames: HTMLImageElement[];
-  #rafId: number;
-  #currentFrame: number;
-  #progressBar: HTMLElement;
-  #showFrame?: boolean;
-  #endDelay?: number;
-  constructor(images: HTMLImageElement[]) {
-    super(true);
-    this.registerRequiredCSS(animationScreenshotPopoverStyles);
-    console.assert(images.length > 0);
-
-    this.contentElement.classList.add('animation-screenshot-popover');
-    this.#frames = images;
-    for (const image of images) {
-      this.contentElement.appendChild(image);
-      image.style.display = 'none';
-    }
-    this.#rafId = 0;
-    this.#currentFrame = 0;
-    this.#frames[0].style.display = 'block';
-    this.#progressBar = this.contentElement.createChild('div', 'animation-progress');
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    this.#rafId = this.contentElement.window().requestAnimationFrame(this.changeFrame.bind(this));
-  }
-
-  override willHide(): void {
-    this.contentElement.window().cancelAnimationFrame(this.#rafId);
-    this.#endDelay = undefined;
-  }
-
-  private changeFrame(): void {
-    this.#rafId = this.contentElement.window().requestAnimationFrame(this.changeFrame.bind(this));
-
-    if (this.#endDelay) {
-      this.#endDelay--;
-      return;
-    }
-    this.#showFrame = !this.#showFrame;
-    if (!this.#showFrame) {
-      return;
-    }
-
-    const numFrames = this.#frames.length;
-    this.#frames[this.#currentFrame % numFrames].style.display = 'none';
-    this.#currentFrame++;
-    this.#frames[(this.#currentFrame) % numFrames].style.display = 'block';
-    if (this.#currentFrame % numFrames === numFrames - 1) {
-      this.#endDelay = 50;
-    }
-    this.#progressBar.style.width = (this.#currentFrame % numFrames + 1) / numFrames * 100 + '%';
-  }
-}

package/front_end/panels/animation/animationScreenshotPopover.css

@@ -1,18 +0,0 @@
-/*
- * Copyright (c) 2015 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-img {
-  max-height: 300px;
-  border-radius: 2px;
-}
-
-.animation-progress {
-  position: absolute;
-  height: 2px;
-  bottom: 0;
-  left: 0;
-  background: var(--legacy-selection-bg-color);
-}

package/front_end/panels/application/ReportingApiReportsView.test.ts

@@ -1,117 +0,0 @@
-// Copyright 2021 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as SDK from '../../core/sdk/sdk.js';
-import * as Protocol from '../../generated/protocol.js';
-import {raf} from '../../testing/DOMHelpers.js';
-import {createTarget} from '../../testing/EnvironmentHelpers.js';
-import {describeWithMockConnection} from '../../testing/MockConnection.js';
-
-import * as Resources from './application.js';
-
-import View = Resources.ReportingApiReportsView;
-
-const reports = [
-  {
-    id: 'some_id' as Protocol.Network.ReportId,
-    initiatorUrl: 'https://example.com/script.js',
-    destination: 'main-endpoint',
-    type: 'deprecation',
-    timestamp: 1632747042.12696,
-    depth: 1,
-    completedAttempts: 0,
-    body: {
-      columnNumber: 8,
-      id: 'PrefixedStorageInfo',
-      lineNumber: 15,
-      message:
-          '\'window.webkitStorageInfo\' is deprecated. Please use \'navigator.webkitTemporaryStorage\' or \'navigator.webkitPersistentStorage\' instead.',
-      sourceFile: 'https://example.com/script.js',
-    },
-    status: Protocol.Network.ReportStatus.Queued,
-  },
-  {
-    id: 'another_id' as Protocol.Network.ReportId,
-    initiatorUrl: 'https://www.google.com/script.js',
-    destination: 'default',
-    type: 'csp-violation',
-    timestamp: 1632747045.39856,
-    depth: 1,
-    completedAttempts: 0,
-    body: {
-      blockedURL: 'https://www.google.com/script.js',
-      disposition: 'enforce',
-      documentURL: 'https://www.google.com/document',
-      effectiveDirective: 'script-src-elem',
-      originalPolicy: 'script-src \'self\'; object-src \'none\'; report-to main-endpoint;',
-      statusCode: 200,
-    },
-    status: Protocol.Network.ReportStatus.Queued,
-  },
-];
-
-describeWithMockConnection('ReportingApiReportsView', () => {
-  let networkManager: SDK.NetworkManager.NetworkManager|null;
-
-  beforeEach(() => {
-    const target = createTarget();
-    networkManager = target.model(SDK.NetworkManager.NetworkManager);
-  });
-
-  it('listens to and stores added reports', () => {
-    if (!networkManager) {
-      throw new Error('No networkManager');
-    }
-    const view = new View.ReportingApiReportsView(networkManager);
-
-    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[0]);
-    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[1]);
-    assert.deepEqual(view.getReports(), reports);
-  });
-
-  it('can handle report updates', () => {
-    if (!networkManager) {
-      throw new Error('No networkManager');
-    }
-    const view = new View.ReportingApiReportsView(networkManager);
-
-    const successReport = {
-      id: 'some_id' as Protocol.Network.ReportId,
-      initiatorUrl: 'https://example.com/script.js',
-      destination: 'main-endpoint',
-      type: 'deprecation',
-      timestamp: 1632747042.12696,
-      depth: 1,
-      completedAttempts: 1,
-      body: {
-        columnNumber: 8,
-        id: 'PrefixedStorageInfo',
-        lineNumber: 15,
-        message:
-            '\'window.webkitStorageInfo\' is deprecated. Please use \'navigator.webkitTemporaryStorage\' or \'navigator.webkitPersistentStorage\' instead.',
-        sourceFile: 'https://example.com/script.js',
-      },
-      status: Protocol.Network.ReportStatus.Success,
-    };
-    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[0]);
-    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportUpdated, successReport);
-    assert.deepEqual(view.getReports(), [successReport]);
-  });
-
-  it('updates sidebarWidget upon receiving cellFocusedEvent', async () => {
-    if (!networkManager) {
-      throw new Error('No networkManager');
-    }
-    const view = new View.ReportingApiReportsView(networkManager);
-
-    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[0]);
-    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.ReportingApiReportAdded, reports[1]);
-    const grid = view.getReportsGrid();
-    const stub = sinon.stub(view, 'setSidebarWidget');
-    sinon.assert.notCalled(stub);
-    grid.dispatchEvent(new CustomEvent('select', {detail: 'some_id'}));
-    await raf();
-    sinon.assert.calledOnce(stub);
-  });
-});

package/front_end/panels/application/ReportingApiReportsView.ts

@@ -1,88 +0,0 @@
-// Copyright 2021 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
-
-import * as i18n from '../../core/i18n/i18n.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-
-import * as ApplicationComponents from './components/components.js';
-
-const UIStrings = {
-  /**
-   *@description Placeholder text that shows if no report was selected for viewing
-   *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
-   */
-  noReportSelected: 'No report selected',
-  /**
-   *@description Placeholder text instructing the user how to display a Reporting API
-   *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
-   */
-  clickToDisplayBody: 'Click on any report to display its body',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiReportsView.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class ReportingApiReportsView extends UI.SplitWidget.SplitWidget {
-  private readonly reportsGrid = new ApplicationComponents.ReportsGrid.ReportsGrid();
-  private reports: Protocol.Network.ReportingApiReport[] = [];
-
-  constructor(networkManager: SDK.NetworkManager.NetworkManager) {
-    super(/* isVertical: */ false, /* secondIsSidebar: */ true);
-    const topPanel = new UI.Widget.VBox();
-    const bottomPanel = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noReportSelected), i18nString(UIStrings.clickToDisplayBody));
-    topPanel.setMinimumSize(0, 80);
-    this.setMainWidget(topPanel);
-    bottomPanel.setMinimumSize(0, 40);
-    bottomPanel.element.setAttribute('jslog', `${VisualLogging.pane('preview').track({resize: true})}`);
-    this.setSidebarWidget(bottomPanel);
-    this.hideSidebar();
-
-    topPanel.contentElement.appendChild(this.reportsGrid);
-    this.reportsGrid.addEventListener('select', this.onFocus.bind(this));
-
-    networkManager.addEventListener(
-        SDK.NetworkManager.Events.ReportingApiReportAdded, event => this.onReportAdded(event.data), this);
-    networkManager.addEventListener(
-        SDK.NetworkManager.Events.ReportingApiReportUpdated, event => this.onReportUpdated(event.data), this);
-  }
-
-  private onReportAdded(report: Protocol.Network.ReportingApiReport): void {
-    if (this.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
-      this.showBoth();
-    }
-    this.reports.push(report);
-    this.reportsGrid.data = {reports: this.reports};
-  }
-
-  private onReportUpdated(report: Protocol.Network.ReportingApiReport): void {
-    const index = this.reports.findIndex(oldReport => oldReport.id === report.id);
-    this.reports[index] = report;
-    this.reportsGrid.data = {reports: this.reports};
-  }
-
-  private async onFocus(event: Event): Promise<void> {
-    const selectEvent = event as CustomEvent<string>;
-    const report = this.reports.find(report => report.id === selectEvent.detail);
-    if (report) {
-      const jsonView = await SourceFrame.JSONView.JSONView.createView(JSON.stringify(report.body));
-      jsonView?.setMinimumSize(0, 40);
-      if (jsonView) {
-        this.setSidebarWidget(jsonView);
-      }
-    }
-  }
-
-  getReports(): Protocol.Network.ReportingApiReport[] {
-    return this.reports;
-  }
-
-  getReportsGrid(): ApplicationComponents.ReportsGrid.ReportsGrid {
-    return this.reportsGrid;
-  }
-}

package/front_end/panels/elements/ElementsTreeElementHighlighter.test.ts

@@ -1,51 +0,0 @@
-// Copyright 2023 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Common from '../../core/common/common.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
-import {describeWithMockConnection} from '../../testing/MockConnection.js';
-
-import * as Elements from './elements.js';
-
-describeWithMockConnection('ElementsTreeElementHighlighter', () => {
-  let target: SDK.Target.Target;
-  let treeOutline: Elements.ElementsTreeOutline.ElementsTreeOutline;
-  let throttler: Common.Throttler.Throttler;
-  let throttlerSchedule: sinon.SinonStub;
-
-  beforeEach(() => {
-    stubNoopSettings();
-    target = createTarget();
-    treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline();
-    treeOutline.wireToDOMModel(target.model(SDK.DOMModel.DOMModel) as SDK.DOMModel.DOMModel);
-    throttler = new Common.Throttler.Throttler(0);
-    throttlerSchedule = sinon.stub(throttler, 'schedule');
-    throttlerSchedule.resolves();
-  });
-
-  const highlightsNodeOnRequestEvent = (inScope: boolean) => () => {
-    SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
-    new Elements.ElementsTreeElementHighlighter.ElementsTreeElementHighlighter(treeOutline, throttler);
-
-    const model = target.model(SDK.OverlayModel.OverlayModel);
-    assert.exists(model);
-    const node = new SDK.DOMModel.DOMNode(target.model(SDK.DOMModel.DOMModel) as SDK.DOMModel.DOMModel);
-    const treeElement = new Elements.ElementsTreeElement.ElementsTreeElement(node, /* isClosingTag=*/ true);
-    sinon.stub(treeOutline, 'createTreeElementFor').withArgs(node).returns(treeElement);
-    const treeOutlineSetHoverEffect = sinon.spy(treeOutline, 'setHoverEffect');
-    const treeElementReveal = sinon.spy(treeElement, 'reveal');
-
-    model.dispatchEventToListeners(SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED, node);
-    assert.strictEqual(throttlerSchedule.calledOnce, inScope);
-    if (inScope) {
-      throttlerSchedule.firstCall.firstArg();
-      sinon.assert.calledOnce(treeOutlineSetHoverEffect);
-      sinon.assert.called(treeElementReveal);
-    }
-  };
-
-  it('highlights node on in scope request event', highlightsNodeOnRequestEvent(true));
-  it('highlights node on out of scope request event', highlightsNodeOnRequestEvent(false));
-});

package/front_end/panels/elements/ElementsTreeElementHighlighter.ts

@@ -1,107 +0,0 @@
-// Copyright (c) 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Common from '../../core/common/common.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import {ElementsTreeElement} from './ElementsTreeElement.js';
-import {ElementsTreeOutline} from './ElementsTreeOutline.js';
-
-export class ElementsTreeElementHighlighter {
-  private readonly throttler: Common.Throttler.Throttler;
-  private treeOutline: ElementsTreeOutline;
-  private currentHighlightedElement: ElementsTreeElement|null;
-  private alreadyExpandedParentElement: UI.TreeOutline.TreeElement|ElementsTreeElement|null|undefined;
-  private pendingHighlightNode: SDK.DOMModel.DOMNode|null;
-  private isModifyingTreeOutline: boolean;
-  constructor(treeOutline: ElementsTreeOutline, throttler: Common.Throttler.Throttler) {
-    this.throttler = throttler;
-    this.treeOutline = treeOutline;
-    this.treeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, this.clearState, this);
-    this.treeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, this.clearState, this);
-    this.treeOutline.addEventListener(ElementsTreeOutline.Events.SelectedNodeChanged, this.clearState, this);
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED, this.highlightNode, this,
-        {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED, this.clearState, this,
-        {scoped: true});
-
-    this.currentHighlightedElement = null;
-    this.alreadyExpandedParentElement = null;
-    this.pendingHighlightNode = null;
-    this.isModifyingTreeOutline = false;
-  }
-
-  private highlightNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
-    if (!Common.Settings.Settings.instance().moduleSetting('highlight-node-on-hover-in-overlay').get()) {
-      return;
-    }
-
-    const domNode = event.data;
-
-    void this.throttler.schedule(async () => {
-      this.highlightNodeInternal(this.pendingHighlightNode);
-      this.pendingHighlightNode = null;
-    });
-    this.pendingHighlightNode =
-        this.treeOutline === ElementsTreeOutline.forDOMModel(domNode.domModel()) ? domNode : null;
-  }
-
-  private highlightNodeInternal(node: SDK.DOMModel.DOMNode|null): void {
-    this.isModifyingTreeOutline = true;
-    let treeElement: (ElementsTreeElement|null)|null = null;
-
-    if (this.currentHighlightedElement) {
-      let currentTreeElement: ((UI.TreeOutline.TreeElement & ElementsTreeElement)|null)|ElementsTreeElement =
-          this.currentHighlightedElement;
-      while (currentTreeElement && currentTreeElement !== this.alreadyExpandedParentElement) {
-        if (currentTreeElement.expanded) {
-          currentTreeElement.collapse();
-        }
-
-        const parent: UI.TreeOutline.TreeElement|null = currentTreeElement.parent;
-        currentTreeElement = parent instanceof ElementsTreeElement ? parent : null;
-      }
-    }
-
-    this.currentHighlightedElement = null;
-    this.alreadyExpandedParentElement = null;
-    if (node) {
-      let deepestExpandedParent: (SDK.DOMModel.DOMNode|null) = (node as SDK.DOMModel.DOMNode | null);
-      const treeElementByNode = this.treeOutline.treeElementByNode;
-
-      const treeIsNotExpanded = (deepestExpandedParent: SDK.DOMModel.DOMNode): boolean => {
-        const element = treeElementByNode.get(deepestExpandedParent);
-        return element ? !element.expanded : true;
-      };
-      while (deepestExpandedParent && treeIsNotExpanded(deepestExpandedParent)) {
-        deepestExpandedParent = deepestExpandedParent.parentNode;
-      }
-
-      this.alreadyExpandedParentElement =
-          deepestExpandedParent ? treeElementByNode.get(deepestExpandedParent) : this.treeOutline.rootElement();
-      treeElement = this.treeOutline.createTreeElementFor(node);
-    }
-
-    this.currentHighlightedElement = treeElement;
-    this.treeOutline.setHoverEffect(treeElement);
-    if (treeElement) {
-      treeElement.reveal(true);
-    }
-
-    this.isModifyingTreeOutline = false;
-  }
-
-  private clearState(): void {
-    if (this.isModifyingTreeOutline) {
-      return;
-    }
-
-    this.currentHighlightedElement = null;
-    this.alreadyExpandedParentElement = null;
-    this.pendingHighlightNode = null;
-  }
-}