chrome-devtools-frontend 1.0.921086 → 1.0.922671

package/front_end/panels/emulation/AdvancedApp.ts

@@ -7,21 +7,11 @@ import * as Host from '../../core/host/host.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {DeviceModeWrapper} from './DeviceModeWrapper.js';
+import type {Bounds} from './InspectedPagePlaceholder.js';
 import {Events, InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
 let appInstance: AdvancedApp;
 
-interface Event {
-  data: {
-    to: UI.DockController.DockState,
-    from: UI.DockController.DockState|undefined,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-  };
-}
-
 export class AdvancedApp implements Common.App.App {
   private rootSplitWidget!: UI.SplitWidget.SplitWidget;
   private deviceModeView!: DeviceModeWrapper;
@@ -170,7 +160,7 @@ export class AdvancedApp implements Common.App.App {
     return UI.DockController.DockController.instance().dockSide() !== UI.DockController.DockState.UNDOCKED;
   }
 
-  private onSetInspectedPageBounds(event: Event): void {
+  private onSetInspectedPageBounds(event: Common.EventTarget.EventTargetEvent<Bounds>): void {
     if (this.changingDockSide) {
       return;
     }

package/front_end/panels/emulation/InspectedPagePlaceholder.ts

@@ -2,11 +2,13 @@
 // 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 UI from '../../ui/legacy/legacy.js';
 
 let inspectedPagePlaceholderInstance: InspectedPagePlaceholder;
 
-export class InspectedPagePlaceholder extends UI.Widget.Widget {
+export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) {
   private updateId?: number;
   constructor() {
     super(true);
@@ -81,3 +83,14 @@ export class InspectedPagePlaceholder extends UI.Widget.Widget {
 export const enum Events {
   Update = 'Update',
 }
+
+export interface Bounds {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+
+export type EventTypes = {
+  [Events.Update]: Bounds,
+};

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -42,6 +42,11 @@ const UIStrings = {
    * parameter.
    */
   invalidTriggerData: 'Invalid `trigger-data`',
+  /**
+   * @description Label for the column showing the invalid value used for the
+   * 'event-source-trigger-data' query parameter.
+   */
+  invalidEventSourceTriggerData: 'Invalid `event-source-trigger-data`',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AttributionReportingIssueDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -89,6 +94,10 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerData));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
+        this.appendColumnTitle(header, i18nString(UIStrings.request));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidEventSourceTriggerData));
+        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
         this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.element));
@@ -132,6 +141,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionTriggerDataTooLarge:
+      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyOrigin:
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionData:
         this.appendRequestOrEmptyCell(element, details.request);

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -28,6 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+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 * as SDK from '../../core/sdk/sdk.js';
@@ -155,7 +156,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
-export class LayerDetailsView extends UI.Widget.Widget implements LayerView {
+export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) implements LayerView {
   private readonly layerViewHost: LayerViewHost;
   private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
   private layerSnapshotMap: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
@@ -470,6 +472,10 @@ export enum Events {
   PaintProfilerRequested = 'PaintProfilerRequested',
 }
 
+export type EventTypes = {
+  [Events.PaintProfilerRequested]: Selection,
+};
+
 export const slowScrollRectNames = new Map([
   [SDK.LayerTreeBase.Layer.ScrollRectType.NonFastScrollable, i18nLazyString(UIStrings.nonFastScrollable)],
   [SDK.LayerTreeBase.Layer.ScrollRectType.TouchEventHandler, i18nLazyString(UIStrings.touchEventHandler)],

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -28,7 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -54,8 +54,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerTreeOutline.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class LayerTreeOutline extends UI.TreeOutline.TreeOutline implements Common.EventTarget.EventTarget<EventTypes>,
-                                                                            LayerView {
+export class LayerTreeOutline extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.TreeOutline.TreeOutline>(
+    UI.TreeOutline.TreeOutline) implements Common.EventTarget.EventTarget<EventTypes>, LayerView {
   private layerViewHost: LayerViewHost;
   private treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private lastHoveredNode: LayerTreeElement|null;
@@ -220,7 +220,7 @@ export class LayerTreeOutline extends UI.TreeOutline.TreeOutline implements Comm
       if (this.layerSnapshotMap.has(layer)) {
         contextMenu.defaultSection().appendItem(
             i18nString(UIStrings.showPaintProfiler),
-            () => this.dispatchEventToListeners(Events.PaintProfilerRequested, selection), false);
+            () => this.dispatchEventToListeners(Events.PaintProfilerRequested, selection as Selection), false);
       }
     }
     this.layerViewHost.showContextMenu(contextMenu, selection);

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -99,7 +99,8 @@ const uniformSamplerLocations = new Map<WebGLProgram, WebGLUniformLocation|null>
 
 const imageForTexture = new Map<WebGLTexture, HTMLImageElement>();
 
-export class Layers3DView extends UI.Widget.VBox implements LayerView {
+export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements LayerView {
   private readonly failBanner: UI.Widget.VBox;
   private readonly layerViewHost: LayerViewHost;
   private transformController: TransformController;
@@ -892,6 +893,11 @@ export enum Events {
   ScaleChanged = 'ScaleChanged',
 }
 
+export type EventTypes = {
+  [Events.PaintProfilerRequested]: Selection,
+  [Events.ScaleChanged]: void,
+};
+
 export const enum ChromeTexture {
   Left = 0,
   Middle = 1,

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -28,6 +28,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+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 * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -75,7 +76,8 @@ let categories: {[x: string]: PaintProfilerCategory}|null = null;
 
 let logItemCategoriesMap: {[x: string]: PaintProfilerCategory}|null = null;
 
-export class PaintProfilerView extends UI.Widget.HBox {
+export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.HBox>(
+    UI.Widget.HBox) {
   private canvasContainer: HTMLElement;
   private readonly progressBanner: HTMLElement;
   private pieChart: PerfUI.PieChart.PieChart;
@@ -422,6 +424,10 @@ export enum Events {
   WindowChanged = 'WindowChanged',
 }
 
+export type EventTypes = {
+  [Events.WindowChanged]: void,
+};
+
 export class PaintProfilerCommandLogView extends UI.ThrottledWidget.ThrottledWidget {
   private readonly treeOutline: UI.TreeOutline.TreeOutlineInShadow;
   private log: SDK.PaintProfiler.PaintProfilerLogItem[];

package/front_end/panels/layers/LayersPanel.ts

@@ -197,7 +197,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
     });
   }
 
-  private onTabClosed(event: Common.EventTarget.EventTargetEvent): void {
+  private onTabClosed(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     if (event.data.tabId !== DetailsViewTabs.Profiler || !this.layerBeingProfiled) {
       return;
     }

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -2,7 +2,6 @@
 // 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 i18n from '../../core/i18n/i18n.js';
 import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -12,7 +11,7 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
 let lastId = 1;
 
-export class ProtocolService extends Common.ObjectWrapper.ObjectWrapper {
+export class ProtocolService {
   private rawConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -53,6 +53,10 @@
   text-align: left;
 }
 
+.conditions-edit-row .conditions-list-text:last-child {
+  text-align: right;
+}
+
 .conditions-list-title {
   text-align: start;
   display: flex;

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -245,100 +245,49 @@ export enum Events {
   RequestActivated = 'RequestActivated',
 }
 
-export abstract class NetworkLogViewInterface {
-  async onLoadFromFile(file: File): Promise<void> {
-  }
-
-  abstract nodeForRequest(request: SDK.NetworkRequest.NetworkRequest): NetworkRequestNode|null;
-
-  abstract headerHeight(): number;
-
-  setRecording(recording: boolean): void {
-  }
-
-  setWindow(start: number, end: number): void {
-  }
-
-  resetFocus(): void {
-  }
-
-  columnExtensionResolved(): void {
-  }
-
-  hoveredNode(): NetworkNode|null {
-    throw new Error('not implemented');
-  }
-
-  scheduleRefresh(): void {
-  }
-
-  addFilmStripFrames(times: number[]): void {
-  }
-
-  selectFilmStripFrame(time: number): void {
-  }
-
-  clearFilmStripFrame(): void {
-  }
-  timeCalculator(): NetworkTimeCalculator {
-    throw new Error('not implemented');
-  }
-
-  calculator(): NetworkTimeCalculator {
-    throw new Error('not implemented');
-  }
-
-  setCalculator(x: NetworkTimeCalculator): void {
-  }
-
-  flatNodesList(): NetworkNode[] {
-    throw new Error('not implemented');
-  }
-
-  updateNodeBackground(): void {
-  }
-
-  updateNodeSelectedClass(isSelected: boolean): void {
-  }
-
-  stylesChanged(): void {
-  }
-
-  setTextFilterValue(filterString: string): void {
-  }
-
-  rowHeight(): number {
-    throw new Error('not implemented');
-  }
+export interface RequestActivatedEvent {
+  showPanel: boolean;
+  takeFocus?: boolean;
+  tab?: NetworkForward.UIRequestLocation.UIRequestTabs;
+}
 
-  switchViewMode(gridMode: boolean): void {
-  }
+export type EventTypes = {
+  [Events.RequestSelected]: SDK.NetworkRequest.NetworkRequest,
+  [Events.RequestActivated]: RequestActivatedEvent,
+};
 
+export interface NetworkLogViewInterface extends Common.EventTarget.EventTarget<EventTypes> {
+  onLoadFromFile(file: File): Promise<void>;
+  nodeForRequest(request: SDK.NetworkRequest.NetworkRequest): NetworkRequestNode|null;
+  headerHeight(): number;
+  setRecording(recording: boolean): void;
+  setWindow(start: number, end: number): void;
+  resetFocus(): void;
+  columnExtensionResolved(): void;
+  hoveredNode(): NetworkNode|null;
+  scheduleRefresh(): void;
+  addFilmStripFrames(times: number[]): void;
+  selectFilmStripFrame(time: number): void;
+  clearFilmStripFrame(): void;
+  timeCalculator(): NetworkTimeCalculator;
+  calculator(): NetworkTimeCalculator;
+  setCalculator(x: NetworkTimeCalculator): void;
+  flatNodesList(): NetworkNode[];
+  updateNodeBackground(): void;
+  updateNodeSelectedClass(isSelected: boolean): void;
+  stylesChanged(): void;
+  setTextFilterValue(filterString: string): void;
+  rowHeight(): number;
+  switchViewMode(gridMode: boolean): void;
   handleContextMenuForRequest(contextMenu: UI.ContextMenu.ContextMenu, request: SDK.NetworkRequest.NetworkRequest):
-      void {
-  }
-
-  async exportAll(): Promise<void> {
-  }
-
-  revealAndHighlightRequest(request: SDK.NetworkRequest.NetworkRequest): void {
-  }
-
-  selectRequest(request: SDK.NetworkRequest.NetworkRequest): void {
-  }
-
-  removeAllNodeHighlights(): void {
-  }
-
-  modelAdded(model: SDK.NetworkManager.NetworkManager): void {
-  }
-
-  modelRemoved(model: SDK.NetworkManager.NetworkManager): void {
-  }
-
-  linkifier(): Components.Linkifier.Linkifier {
-    throw new Error('not implemented');
-  }
+      void;
+  exportAll(): Promise<void>;
+  revealAndHighlightRequest(request: SDK.NetworkRequest.NetworkRequest): void;
+  selectRequest(request: SDK.NetworkRequest.NetworkRequest): void;
+  removeAllNodeHighlights(): void;
+  modelAdded(model: SDK.NetworkManager.NetworkManager): void;
+  modelRemoved(model: SDK.NetworkManager.NetworkManager): void;
+  linkifier(): Components.Linkifier.Linkifier;
 }
 
 export class NetworkNode extends DataGrid.SortableDataGrid.SortableDataGridNode<NetworkNode> {
@@ -1003,9 +952,7 @@ export class NetworkRequestNode extends NetworkNode {
 
   select(supressSelectedEvent?: boolean): void {
     super.select(supressSelectedEvent);
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (this.parentView() as any).dispatchEventToListeners(Events.RequestSelected, this.requestInternal);
+    this.parentView().dispatchEventToListeners(Events.RequestSelected, this.requestInternal);
   }
 
   highlightMatchedSubstring(regexp: RegExp|null): Object[] {
@@ -1056,9 +1003,7 @@ export class NetworkRequestNode extends NetworkNode {
       this.nameCell = cell;
       cell.addEventListener('dblclick', this.openInNewTab.bind(this), false);
       cell.addEventListener('click', () => {
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (this.parentView() as any).dispatchEventToListeners(Events.RequestActivated, {showPanel: true});
+        this.parentView().dispatchEventToListeners(Events.RequestActivated, {showPanel: true});
       });
       let iconElement;
       if (this.requestInternal.resourceType() === Common.ResourceType.resourceTypes.Image) {
@@ -1190,9 +1135,7 @@ export class NetworkRequestNode extends NetworkNode {
       if (displayShowHeadersLink) {
         this.setTextAndTitleAsLink(
             cell, i18nString(UIStrings.blockeds, {PH1: reason}), i18nString(UIStrings.blockedTooltip), () => {
-              // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              (this.parentView() as any).dispatchEventToListeners(Events.RequestActivated, {
+              this.parentView().dispatchEventToListeners(Events.RequestActivated, {
                 showPanel: true,
                 tab: NetworkForward.UIRequestLocation.UIRequestTabs.Headers,
               });
@@ -1398,10 +1341,9 @@ export class NetworkGroupNode extends NetworkNode {
   select(supressSelectedEvent?: boolean): void {
     super.select(supressSelectedEvent);
     const firstChildNode = (this.traverseNextNode(false, undefined, true) as NetworkNode);
-    if (firstChildNode && firstChildNode.request()) {
-      // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (this.parentView() as any).dispatchEventToListeners(Events.RequestSelected, firstChildNode.request());
+    const request = firstChildNode?.request();
+    if (request) {
+      this.parentView().dispatchEventToListeners(Events.RequestSelected, request);
     }
   }
 }

package/front_end/panels/network/NetworkItemView.ts

@@ -274,15 +274,11 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     }
   }
 
-  private tabSelected(event: {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    data: any,
-  }): void {
+  private tabSelected(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     if (!event.data.isUserGesture) {
       return;
     }
-    this.resourceViewTabSetting.set(event.data.tabId);
+    this.resourceViewTabSetting.set(event.data.tabId as NetworkForward.UIRequestLocation.UIRequestTabs);
   }
 
   request(): SDK.NetworkRequest.NetworkRequest {

package/front_end/panels/network/NetworkLogView.ts

@@ -52,7 +52,7 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import networkLogViewStyles from './networkLogView.css.js';
 
-import type {NetworkLogViewInterface, NetworkNode} from './NetworkDataGridNode.js';
+import type {NetworkLogViewInterface, NetworkNode, EventTypes} from './NetworkDataGridNode.js';
 import {Events, NetworkGroupNode, NetworkRequestNode} from './NetworkDataGridNode.js';
 import {NetworkFrameGrouper} from './NetworkFrameGrouper.js';
 import {NetworkLogViewColumns} from './NetworkLogViewColumns.js';
@@ -351,8 +351,8 @@ const enum FetchStyle {
   NodeJs = 1,
 }
 
-export class NetworkLogView extends UI.Widget.VBox implements
-    SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
+export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
   private readonly networkInvertFilterSetting: Common.Settings.Setting<boolean>;
   private readonly networkHideDataURLSetting: Common.Settings.Setting<boolean>;
   private readonly networkShowIssuesOnlySetting: Common.Settings.Setting<boolean>;
@@ -864,7 +864,7 @@ export class NetworkLogView extends UI.Widget.VBox implements
     this.textFilterUI.setSuggestionProvider(this.suggestionBuilder.completions.bind(this.suggestionBuilder));
   }
 
-  private filterChanged(_event: Common.EventTarget.EventTargetEvent): void {
+  private filterChanged(): void {
     this.removeAllNodeHighlights();
     this.parseFilterQuery(this.textFilterUI.value(), this.invertFilterUI.checked());
     this.filterRequests();

package/front_end/panels/network/NetworkPanel.ts

@@ -48,6 +48,7 @@ import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 import * as Search from '../search/search.js';
 
 import {BlockedURLsPane} from './BlockedURLsPane.js';
+import type {RequestActivatedEvent} from './NetworkDataGridNode.js';
 import {Events} from './NetworkDataGridNode.js';
 import {NetworkItemView} from './NetworkItemView.js';
 import {NetworkLogView} from './NetworkLogView.js';
@@ -369,7 +370,8 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     return this.throttlingSelect;
   }
 
-  private onWindowChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onWindowChanged(event: Common.EventTarget.EventTargetEvent<PerfUI.TimelineOverviewPane.WindowChangedEvent>):
+      void {
     const startTime = Math.max(this.calculator.minimumBoundary(), event.data.startTime / 1000);
     const endTime = Math.min(this.calculator.maximumBoundary(), event.data.endTime / 1000);
     this.networkLogView.setWindow(startTime, endTime);
@@ -649,18 +651,10 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     this.updateNetworkItemView();
   }
 
-  private onRequestActivated(event: {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    data: any,
-  }): void {
-    const eventData = (event.data as {
-      showPanel: boolean,
-      tab: NetworkForward.UIRequestLocation.UIRequestTabs,
-      takeFocus: (boolean | undefined),
-    });
-    if (eventData.showPanel) {
-      this.showRequestPanel(eventData.tab, /* takeFocus */ eventData.takeFocus);
+  private onRequestActivated(event: Common.EventTarget.EventTargetEvent<RequestActivatedEvent>): void {
+    const {showPanel, tab, takeFocus} = event.data;
+    if (showPanel) {
+      this.showRequestPanel(tab, takeFocus);
     } else {
       this.hideRequestPanel();
     }
@@ -766,18 +760,18 @@ export class NetworkPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     appendRevealItem.call(this, request);
   }
 
-  private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const timestamp = (event.data as number);
+  private onFilmFrameSelected(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const timestamp = event.data;
     this.overviewPane.setWindowTimes(0, timestamp);
   }
 
-  private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent): void {
-    const timestamp = (event.data as number);
+  private onFilmFrameEnter(event: Common.EventTarget.EventTargetEvent<number>): void {
+    const timestamp = event.data;
     this.networkOverview.selectFilmStripFrame(timestamp);
     this.networkLogView.selectFilmStripFrame(timestamp / 1000);
   }
 
-  private onFilmFrameExit(_event: Common.EventTarget.EventTargetEvent): void {
+  private onFilmFrameExit(): void {
     this.networkOverview.clearFilmStripFrame();
     this.networkLogView.clearFilmStripFrame();
   }

package/front_end/panels/network/RequestTimingView.ts

@@ -40,6 +40,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import {Events} from './NetworkTimeCalculator.js';
 
+import networkingTimingTableStyles from './networkTimingTable.css.js';
+
 const UIStrings = {
   /**
   *@description Text used to label the time taken to receive an HTTP/2 Push message.
@@ -360,7 +362,6 @@ export class RequestTimingView extends UI.Widget.VBox {
   static createTimingTable(request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator): Element {
     const tableElement = document.createElement('table');
     tableElement.classList.add('network-timing-table');
-    UI.Utils.appendStyle(tableElement, 'panels/network/networkTimingTable.css');
     const colgroup = tableElement.createChild('colgroup');
     colgroup.createChild('col', 'labels');
     colgroup.createChild('col', 'bars');
@@ -647,6 +648,7 @@ export class RequestTimingView extends UI.Widget.VBox {
     this.request.addEventListener(SDK.NetworkRequest.Events.TimingChanged, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.refresh, this);
     this.calculator.addEventListener(Events.BoundariesChanged, this.refresh, this);
+    this.registerCSSFiles([networkingTimingTableStyles]);
     this.refresh();
   }
 

package/front_end/panels/network/module.json

@@ -8,8 +8,5 @@
     "panels/search",
     "ui/legacy/components/source_frame",
     "ui/legacy"
-  ],
-    "resources": [
-      "networkTimingTable.css"
   ]
 }