chrome-devtools-frontend 1.0.923319 → 1.0.925171

package/front_end/panels/application/BackgroundServiceModel.ts

@@ -6,7 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-export class BackgroundServiceModel extends SDK.SDKModel.SDKModel implements
+export class BackgroundServiceModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     ProtocolProxyApi.BackgroundServiceDispatcher {
   private readonly backgroundServiceAgent: ProtocolProxyApi.BackgroundServiceApi;
   private readonly events:
@@ -59,3 +59,8 @@ export enum Events {
   RecordingStateChanged = 'RecordingStateChanged',
   BackgroundServiceEventReceived = 'BackgroundServiceEventReceived',
 }
+
+export type EventTypes = {
+  [Events.RecordingStateChanged]: {isRecording: boolean, serviceName: Protocol.BackgroundService.ServiceName},
+  [Events.BackgroundServiceEventReceived]: Protocol.BackgroundService.BackgroundServiceEvent,
+};

package/front_end/panels/application/BackgroundServiceView.ts

@@ -267,8 +267,7 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     this.clearView();
   }
 
-  private onRecordingStateChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const state = (event.data as RecordingState);
+  private onRecordingStateChanged({data: state}: Common.EventTarget.EventTargetEvent<RecordingState>): void {
     if (state.serviceName !== this.serviceName) {
       return;
     }
@@ -288,8 +287,9 @@ export class BackgroundServiceView extends UI.Widget.VBox {
     this.recordButton.setTitle(buttonTooltip, 'background-service.toggle-recording');
   }
 
-  private onEventReceived(event: Common.EventTarget.EventTargetEvent): void {
-    const serviceEvent = (event.data as Protocol.BackgroundService.BackgroundServiceEvent);
+  private onEventReceived({
+    data: serviceEvent,
+  }: Common.EventTarget.EventTargetEvent<Protocol.BackgroundService.BackgroundServiceEvent>): void {
     if (!this.acceptEvent(serviceEvent)) {
       return;
     }

package/front_end/panels/application/DatabaseModel.ts

@@ -125,7 +125,7 @@ export class Database {
   }
 }
 
-export class DatabaseModel extends SDK.SDKModel.SDKModel {
+export class DatabaseModel extends SDK.SDKModel.SDKModel<EventTypes> {
   private databasesInternal: Database[];
   readonly agent: ProtocolProxyApi.DatabaseApi;
   private enabled?: boolean;
@@ -178,6 +178,11 @@ export enum Events {
   DatabasesRemoved = 'DatabasesRemoved',
 }
 
+export type EventTypes = {
+  [Events.DatabaseAdded]: Database,
+  [Events.DatabasesRemoved]: void,
+};
+
 export class DatabaseDispatcher implements ProtocolProxyApi.DatabaseDispatcher {
   private readonly model: DatabaseModel;
   constructor(model: DatabaseModel) {

package/front_end/panels/application/DatabaseTableView.ts

@@ -186,7 +186,7 @@ export class DatabaseTableView extends UI.View.SimpleView {
     this.element.appendChild(errorMsgElement);
   }
 
-  private refreshButtonClicked(_event: Common.EventTarget.EventTargetEvent): void {
+  private refreshButtonClicked(): void {
     this.update();
   }
 }

package/front_end/panels/application/IndexedDBModel.ts

@@ -33,7 +33,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 
-export class IndexedDBModel extends SDK.SDKModel.SDKModel implements ProtocolProxyApi.StorageDispatcher {
+export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements ProtocolProxyApi.StorageDispatcher {
   private readonly securityOriginManager: SDK.SecurityOriginManager.SecurityOriginManager|null;
   private readonly indexedDBAgent: ProtocolProxyApi.IndexedDBApi;
   private readonly storageAgent: ProtocolProxyApi.StorageApi;
@@ -424,6 +424,14 @@ export enum Events {
   IndexedDBContentUpdated = 'IndexedDBContentUpdated',
 }
 
+export type EventTypes = {
+  [Events.DatabaseAdded]: {model: IndexedDBModel, databaseId: DatabaseId},
+  [Events.DatabaseRemoved]: {model: IndexedDBModel, databaseId: DatabaseId},
+  [Events.DatabaseLoaded]: {model: IndexedDBModel, database: Database, entriesUpdated: boolean},
+  [Events.DatabaseNamesRefreshed]: void,
+  [Events.IndexedDBContentUpdated]: {model: IndexedDBModel, databaseId: DatabaseId, objectStoreName: string},
+};
+
 export class Entry {
   key: SDK.RemoteObject.RemoteObject;
   primaryKey: SDK.RemoteObject.RemoteObject;

package/front_end/panels/application/IndexedDBViews.ts

@@ -29,7 +29,6 @@
  */
 
 import indexedDBViewsStyles from './indexedDBViews.css.js';
-import type * 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 DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
@@ -273,8 +272,8 @@ export class IDBDataView extends UI.View.SimpleView {
     });
 
     this.clearButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearObjectStore), 'largeicon-clear');
-    this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, event => {
-      this.clearButtonClicked(event);
+    this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
+      this.clearButtonClicked();
     }, this);
 
     this.needsRefresh = new UI.Toolbar.ToolbarItem(
@@ -409,12 +408,12 @@ export class IDBDataView extends UI.View.SimpleView {
     editorToolbar.appendToolbarItem(this.needsRefresh);
   }
 
-  private pageBackButtonClicked(_event: Common.EventTarget.EventTargetEvent): void {
+  private pageBackButtonClicked(): void {
     this.skipCount = Math.max(0, this.skipCount - this.pageSize);
     this.updateData(false);
   }
 
-  private pageForwardButtonClicked(_event: Common.EventTarget.EventTargetEvent): void {
+  private pageForwardButtonClicked(): void {
     this.skipCount = this.skipCount + this.pageSize;
     this.updateData(false);
   }
@@ -555,11 +554,11 @@ export class IDBDataView extends UI.View.SimpleView {
     // Sniffed in tests.
   }
 
-  private refreshButtonClicked(_event: Common.EventTarget.EventTargetEvent|null): void {
+  private refreshButtonClicked(): void {
     this.updateData(true);
   }
 
-  private async clearButtonClicked(_event: Common.EventTarget.EventTargetEvent): Promise<void> {
+  private async clearButtonClicked(): Promise<void> {
     this.clearButton.setEnabled(false);
     this.clearingObjectStore = true;
     await this.model.clearObjectStore(this.databaseId, this.objectStore.name);

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -353,7 +353,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     return;
   }
 
-  private refreshButtonClicked(_event: Common.EventTarget.EventTargetEvent): void {
+  private refreshButtonClicked(): void {
     this.updateData(true);
   }
 

package/front_end/panels/application/ServiceWorkersView.ts

@@ -720,7 +720,7 @@ export class Section {
     return button;
   }
 
-  private unregisterButtonClicked(_event: Common.EventTarget.EventTargetEvent): void {
+  private unregisterButtonClicked(): void {
     this.manager.deleteRegistration(this.registration.id);
   }
 
@@ -729,11 +729,11 @@ export class Section {
     this.updateCycleField.appendChild(this.updateCycleView.tableElement);
   }
 
-  private updateButtonClicked(_event: Common.EventTarget.EventTargetEvent): void {
+  private updateButtonClicked(): void {
     this.manager.updateRegistration(this.registration.id);
   }
 
-  private networkRequestsClicked(_event: Common.EventTarget.EventTargetEvent): void {
+  private networkRequestsClicked(): void {
     const applicationTabLocation = UI.ViewManager.ViewManager.instance().locationNameForViewId('resources');
     const networkTabLocation = applicationTabLocation === 'drawer-view' ? 'panel' : 'drawer-view';
     UI.ViewManager.ViewManager.instance().showViewInLocation('network', networkTabLocation);

package/front_end/panels/application/StorageItemsView.ts

@@ -78,15 +78,14 @@ export class StorageItemsView extends UI.Widget.VBox {
     this.mainToolbar.appendToolbarItem(item);
   }
 
-  private addButton(label: string, glyph: string, callback: (arg0: Common.EventTarget.EventTargetEvent) => void):
+  private addButton(label: string, glyph: string, callback: (arg0: Common.EventTarget.EventTargetEvent<Event>) => void):
       UI.Toolbar.ToolbarButton {
     const button = new UI.Toolbar.ToolbarButton(label, glyph);
     button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, callback, this);
     return button;
   }
 
-  private filterChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const text = (event.data as string | null);
+  private filterChanged({data: text}: Common.EventTarget.EventTargetEvent<string|null>): void {
     this.filterRegex = text ? new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i') : null;
     this.refreshItems();
   }

package/front_end/panels/application/StorageView.ts

@@ -10,7 +10,6 @@ import * as Protocol from '../../generated/protocol.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {ApplicationCacheModel} from './ApplicationCacheModel.js';
 import {DatabaseModel} from './DatabaseModel.js';
 import {DOMStorageModel} from './DOMStorageModel.js';
 import {IndexedDBModel} from './IndexedDBModel.js';
@@ -86,10 +85,6 @@ const UIStrings = {
    * @description Checkbox label in the Clear Storage section of the Storage View of the Application panel
    */
   cacheStorage: 'Cache storage',
-  /**
-   * @description Checkbox label in the Clear Storage section of the Storage View of the Application panel
-   */
-  applicationCache: 'Application cache',
   /**
    * @description Checkbox label in the Clear Storage section of the Storage View of the Application panel
    */
@@ -261,7 +256,6 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
 
     const caches = this.reportView.appendSection(i18nString(UIStrings.cache));
     this.appendItem(caches, i18nString(UIStrings.cacheStorage), Protocol.Storage.StorageType.Cache_storage);
-    this.appendItem(caches, i18nString(UIStrings.applicationCache), Protocol.Storage.StorageType.Appcache);
     caches.markFieldListAsGroup();
 
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
@@ -443,13 +437,6 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
         model.clearForOrigin(securityOrigin);
       }
     }
-
-    if (set.has(Protocol.Storage.StorageType.Appcache) || hasAll) {
-      const appcacheModel = target.model(ApplicationCacheModel);
-      if (appcacheModel) {
-        appcacheModel.reset();
-      }
-    }
   }
 
   async doUpdate(): Promise<void> {

package/front_end/panels/application/appManifestView.css

@@ -21,3 +21,11 @@
   margin-left: 4px;
   vertical-align: middle;
 }
+
+.multiline-value {
+  white-space: normal;
+}
+
+.learn-more {
+  padding-left: 4px;
+}

package/front_end/panels/application/application-legacy.ts

@@ -9,9 +9,6 @@ import * as ResourcesModule from './application.js';
 self.Resources = self.Resources || {};
 Resources = Resources || {};
 
-/** @constructor */
-Resources.ApplicationCacheModel = ResourcesModule.ApplicationCacheModel.ApplicationCacheModel;
-
 /** @constructor */
 Resources.ApplicationPanelSidebar = ResourcesModule.ApplicationPanelSidebar.ApplicationPanelSidebar;
 

package/front_end/panels/application/application.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ApplicationCacheItemsView from './ApplicationCacheItemsView.js';
-import * as ApplicationCacheModel from './ApplicationCacheModel.js';
 import * as ApplicationPanelSidebar from './ApplicationPanelSidebar.js';
 import * as AppManifestView from './AppManifestView.js';
 import * as BackgroundServiceModel from './BackgroundServiceModel.js';
@@ -25,8 +23,6 @@ import * as StorageItemsView from './StorageItemsView.js';
 import * as StorageView from './StorageView.js';
 
 export {
-  ApplicationCacheItemsView,
-  ApplicationCacheModel,
   ApplicationPanelSidebar,
   AppManifestView,
   BackgroundServiceModel,

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -102,7 +102,7 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
         });
   }
 
-  private refreshClick(event: Common.EventTarget.EventTargetEvent): void {
+  private refreshClick(event: Common.EventTarget.EventTargetEvent<Event>): void {
     event.data.consume();
     this.update();
   }

package/front_end/panels/console/ConsolePinPane.ts

@@ -168,7 +168,7 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
 
 let consolePinNumber = 0;
 
-export class ConsolePin extends Common.ObjectWrapper.ObjectWrapper {
+export class ConsolePin {
   private readonly pinElement: Element;
   private readonly pinPreview: HTMLElement;
   private lastResult: SDK.RuntimeModel.EvaluationResult|null;
@@ -181,7 +181,6 @@ export class ConsolePin extends Common.ObjectWrapper.ObjectWrapper {
   private consolePinNumber: number;
 
   constructor(expression: string, pinPane: ConsolePinPane) {
-    super();
     this.consolePinNumber = ++consolePinNumber;
     const deletePinIcon = (document.createElement('div', {is: 'dt-close-button'}) as UI.UIUtils.DevToolsCloseButton);
     deletePinIcon.gray = true;

package/front_end/panels/console/ConsoleSidebar.ts

@@ -131,8 +131,8 @@ export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
     return true;
   }
 
-  private selectionChanged(event: Common.EventTarget.EventTargetEvent): void {
-    this.selectedTreeElement = (event.data as UI.TreeOutline.TreeElement);
+  private selectionChanged(event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void {
+    this.selectedTreeElement = event.data;
     this.dispatchEventToListeners(Events.FilterSelected);
   }
 

package/front_end/panels/console/ConsoleView.ts

@@ -267,7 +267,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   private messagesCountElement: HTMLElement;
   private viewportThrottler: Common.Throttler.Throttler;
   private pendingBatchResize: boolean;
-  private readonly onMessageResizedBound: (e: Common.EventTarget.EventTargetEvent) => void;
+  private readonly onMessageResizedBound: (e: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void;
   private topGroup: ConsoleGroup;
   private currentGroup: ConsoleGroup;
   private readonly promptElement: HTMLElement;
@@ -475,7 +475,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
 
     this.viewportThrottler = new Common.Throttler.Throttler(50);
     this.pendingBatchResize = false;
-    this.onMessageResizedBound = (e: Common.EventTarget.EventTargetEvent): void => {
+    this.onMessageResizedBound = (e: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void => {
       this.onMessageResized(e);
     };
 
@@ -928,8 +928,9 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     }
   }
 
-  private async onMessageResized(event: Common.EventTarget.EventTargetEvent): Promise<void> {
-    const treeElement = (event.data as UI.TreeOutline.TreeElement);
+  private async onMessageResized(event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>):
+      Promise<void> {
+    const treeElement = event.data;
     if (this.pendingBatchResize || !treeElement.treeOutline) {
       return;
     }
@@ -1595,8 +1596,8 @@ export class ConsoleViewFilter {
     this.levelMenuButton.setTitle(i18nString(UIStrings.logLevelS, {PH1: text}));
   }
 
-  private showLevelContextMenu(event: Common.EventTarget.EventTargetEvent): void {
-    const mouseEvent = (event.data as Event);
+  private showLevelContextMenu(event: Common.EventTarget.EventTargetEvent<Event>): void {
+    const mouseEvent = event.data;
     const setting = this.messageLevelFiltersSetting;
     const levels = setting.get();
 

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1825,7 +1825,8 @@ export class ConsoleGroupViewMessage extends ConsoleViewMessage {
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
-      nestingLevel: number, onToggle: () => void, onResize: (arg0: Common.EventTarget.EventTargetEvent) => void) {
+      nestingLevel: number, onToggle: () => void,
+      onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
     console.assert(consoleMessage.isGroupStartMessage());
     super(consoleMessage, linkifier, requestResolver, issueResolver, nestingLevel, onResize);
     this.collapsedInternal = consoleMessage.type === Protocol.Runtime.ConsoleAPICalledEventType.StartGroupCollapsed;
@@ -1889,7 +1890,7 @@ export class ConsoleCommand extends ConsoleViewMessage {
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
-      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent) => void) {
+      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
     super(consoleMessage, linkifier, requestResolver, issueResolver, nestingLevel, onResize);
     this.formattedCommand = null;
   }
@@ -1947,7 +1948,7 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
   constructor(
       consoleMessage: SDK.ConsoleModel.ConsoleMessage, linkifier: Components.Linkifier.Linkifier,
       requestResolver: Logs.RequestResolver.RequestResolver, issueResolver: IssuesManager.IssueResolver.IssueResolver,
-      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent) => void) {
+      nestingLevel: number, onResize: (arg0: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>) => void) {
     super(consoleMessage, linkifier, requestResolver, issueResolver, nestingLevel, onResize);
     console.assert(consoleMessage.type === Protocol.Runtime.ConsoleAPICalledEventType.Table);
     this.dataGrid = null;

package/front_end/panels/coverage/CoverageModel.ts

@@ -494,7 +494,7 @@ function locationCompare(a: string, b: string): number {
       Number.parseInt(aPos, 10) - Number.parseInt(bPos, 10);
 }
 
-export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper {
+export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper<URLCoverageInfo.EventTypes> {
   private readonly urlInternal: string;
   private coverageInfoByLocation: Map<string, CoverageInfo>;
   private sizeInternal: number;
@@ -673,8 +673,14 @@ export class URLCoverageInfo extends Common.ObjectWrapper.ObjectWrapper {
 }
 
 export namespace URLCoverageInfo {
-  export const Events = {
-    SizesChanged: Symbol('SizesChanged'),
+  // TODO(crbug.com/1167717): Make this a const enum again
+  // eslint-disable-next-line rulesdir/const_enum
+  export enum Events {
+    SizesChanged = 'SizesChanged',
+  }
+
+  export type EventTypes = {
+    [Events.SizesChanged]: void,
   };
 }
 

package/front_end/panels/coverage/CoverageView.ts

@@ -574,8 +574,9 @@ export class LineDecorator implements SourceFrame.SourceFrame.LineDecorator {
     return lineDecoratorInstance;
   }
 
-  private readonly listeners:
-      WeakMap<SourceFrame.SourcesTextEditor.SourcesTextEditor, (arg0: Common.EventTarget.EventTargetEvent) => void>;
+  private readonly listeners: WeakMap<
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      SourceFrame.SourcesTextEditor.SourcesTextEditor, (arg0: Common.EventTarget.EventTargetEvent<any>) => void>;
   constructor() {
     this.listeners = new WeakMap();
   }

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -41,7 +41,7 @@ export interface GlobalStyleStats {
   };
 }
 
-export class CSSOverviewModel extends SDK.SDKModel.SDKModel {
+export class CSSOverviewModel extends SDK.SDKModel.SDKModel<void> {
   private readonly runtimeAgent: ProtocolProxyApi.RuntimeApi;
   private readonly cssAgent: ProtocolProxyApi.CSSApi;
   private readonly domAgent: ProtocolProxyApi.DOMApi;

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -206,7 +206,7 @@ export class ColorSwatchPopoverIcon {
     }
   }
 
-  private spectrumResized(_event: Common.EventTarget.EventTargetEvent<void>): void {
+  private spectrumResized(): void {
     this.swatchPopoverHelper.reposition();
   }
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -446,8 +446,8 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     this.filterGroupLists();
   }
 
-  private onTreeElementToggled(event: Common.EventTarget.EventTargetEvent): void {
-    const treeElement = (event.data as UI.TreeOutline.TreeElement);
+  private onTreeElementToggled(event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void {
+    const treeElement = event.data;
     const property = this.propertyByTreeElement.get(treeElement);
     if (property) {
       treeElement.expanded ? this.expandedProperties.add(property.name) : this.expandedProperties.delete(property.name);

package/front_end/panels/elements/ElementsPanel.ts

@@ -659,10 +659,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     });
   }
 
-  private domWordWrapSettingChanged(event: Common.EventTarget.EventTargetEvent): void {
-    this.contentElementInternal.classList.toggle('elements-wrap', (event.data as boolean));
+  private domWordWrapSettingChanged(event: Common.EventTarget.EventTargetEvent<boolean>): void {
+    this.contentElementInternal.classList.toggle('elements-wrap', event.data);
     for (const treeOutline of this.treeOutlines) {
-      treeOutline.setWordWrap((event.data as boolean));
+      treeOutline.setWordWrap(event.data);
     }
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -660,12 +660,22 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.valueElement && section && section.editable && this.property.name === 'display') {
       const propertyValue = this.property.trimmedValueWithoutImportant();
       if (propertyValue === 'flex' || propertyValue === 'inline-flex') {
-        this.listItemElement.appendChild(StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, FlexboxEditor, i18nString(UIStrings.flexboxEditorButton)));
+        const button = StyleEditorWidget.createTriggerButton(
+            this.parentPaneInternal, section, FlexboxEditor, i18nString(UIStrings.flexboxEditorButton));
+        this.listItemElement.appendChild(button);
+        const helper = this.parentPaneInternal.swatchPopoverHelper();
+        if (helper.isShowing(StyleEditorWidget.instance())) {
+          helper.setAnchorElement(button);
+        }
       }
       if (propertyValue === 'grid' || propertyValue === 'inline-grid') {
-        this.listItemElement.appendChild(StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, GridEditor, i18nString(UIStrings.gridEditorButton)));
+        const button = StyleEditorWidget.createTriggerButton(
+            this.parentPaneInternal, section, GridEditor, i18nString(UIStrings.gridEditorButton));
+        this.listItemElement.appendChild(button);
+        const helper = this.parentPaneInternal.swatchPopoverHelper();
+        if (helper.isShowing(StyleEditorWidget.instance())) {
+          helper.setAnchorElement(button);
+        }
       }
     }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -572,6 +572,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (this.filterRegexInternal) {
       this.updateFilter();
     }
+    this.swatchPopoverHelper().reposition();
     this.nodeStylesUpdatedForTest(node, false);
   }
 
@@ -1711,7 +1712,7 @@ export class StylePropertiesSection {
     return;
   }
 
-  private onNewRuleClick(event: Common.EventTarget.EventTargetEvent): void {
+  private onNewRuleClick(event: Common.EventTarget.EventTargetEvent<Event>): void {
     event.data.consume();
     const rule = this.styleInternal.parentRule;
     if (!rule || !rule.style.range || rule.styleSheetId === undefined) {
@@ -1946,6 +1947,7 @@ export class StylePropertiesSection {
     } else {
       this.showAllButton.classList.add('hidden');
     }
+    this.parentPane.swatchPopoverHelper().reposition();
   }
 
   isPropertyOverloaded(property: SDK.CSSProperty.CSSProperty): boolean {
@@ -3125,7 +3127,7 @@ export class ButtonProvider implements UI.Toolbar.Provider {
     return buttonProviderInstance;
   }
 
-  private clicked(_event: Common.EventTarget.EventTargetEvent): void {
+  private clicked(): void {
     StylesSidebarPane.instance().createNewRuleInViaInspectorStyleSheet();
   }
 

package/front_end/panels/input/InputModel.ts

@@ -6,7 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
-export class InputModel extends SDK.SDKModel.SDKModel {
+export class InputModel extends SDK.SDKModel.SDKModel<void> {
   private readonly inputAgent: ProtocolProxyApi.InputApi;
   private eventDispatchTimer: number;
   private dispatchEventDataList: EventData[];

package/front_end/panels/issues/ComboBoxOfCheckBoxes.ts

@@ -41,13 +41,11 @@ export class ComboBoxOfCheckBoxes extends UI.Toolbar.ToolbarButton {
     return this.options;
   }
 
-  private showLevelContextMenu(event: Common.EventTarget.EventTargetEvent): void {
-    const mouseEvent = /** @type {!Event} */ (event.data);
+  private showLevelContextMenu({data: mouseEvent}: Common.EventTarget.EventTargetEvent<Event>): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(mouseEvent, {
       useSoftMenu: true,
       x: this.element.totalOffsetLeft(),
-      y: this.element.totalOffsetTop() +
-          /** @type {!HTMLElement} */ (this.element).offsetHeight,
+      y: this.element.totalOffsetTop() + this.element.offsetHeight,
     });
 
     for (const {title, callback} of this.headers) {

package/front_end/panels/issues/HiddenIssuesRow.ts

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
@@ -14,9 +13,9 @@ const UIStrings = {
   */
   hiddenIssues: 'Hidden issues',
   /**
-  * @description Title for the Unhide all issues button
+  * @description Label for the button to unhide all hidden issues
   */
-  unhideIssues: 'Unhide all issues',
+  unhideAll: 'Unhide all',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/issues/HiddenIssuesRow.ts', UIStrings);
@@ -35,15 +34,11 @@ export class HiddenIssuesRow extends UI.TreeOutline.TreeElement {
   }
 
   private appendHeader(): void {
-    const unhideAllIssuesBtn = new IconButton.IconButton.IconButton();
-    unhideAllIssuesBtn.classList.add('unhide-all-issues-button');
-    unhideAllIssuesBtn.title = i18nString(UIStrings.unhideIssues);
-    unhideAllIssuesBtn.data = {
-      groups: [{iconName: 'refresh_12x12_icon', iconHeight: '12px', iconWidth: '12px', text: ''}],
-      clickHandler: (): void => IssuesManager.IssuesManager.IssuesManager.instance().unhideAllIssues(),
-      accessibleName: i18nString(UIStrings.unhideIssues),
-      compact: true,
-    };
+    const unhideAllIssuesBtn = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.unhideAll),
+        (): void => IssuesManager.IssuesManager.IssuesManager.instance().unhideAllIssues(),
+        'unhide-all-issues-button',
+    );
     const countAdorner = new Adorners.Adorner.Adorner();
     countAdorner.data = {
       name: 'countWrapper',

package/front_end/panels/layers/LayerTreeModel.ts

@@ -34,7 +34,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-export class LayerTreeModel extends SDK.SDKModel.SDKModel {
+export class LayerTreeModel extends SDK.SDKModel.SDKModel<EventTypes> {
   readonly layerTreeAgent: ProtocolProxyApi.LayerTreeApi;
   readonly paintProfilerModel: SDK.PaintProfiler.PaintProfilerModel;
   private layerTreeInternal: SDK.LayerTreeBase.LayerTreeBase|null;
@@ -149,6 +149,11 @@ export enum Events {
   LayerPainted = 'LayerPainted',
 }
 
+export type EventTypes = {
+  [Events.LayerTreeChanged]: void,
+  [Events.LayerPainted]: AgentLayer,
+};
+
 export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
   private layerTreeModel: LayerTreeModel;