chrome-devtools-frontend 1.0.1000934 → 1.0.1002543

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -147,6 +147,14 @@ const UIStrings = {
   */
   automaticDarkMode: 'Automatic dark mode',
   /**
+  *@description Tooltip text that appears when hovering over the css changes button in the Styles Sidebar Pane of the Elements panel
+  */
+  copyAllCSSChanges: 'Copy all the CSS changes',
+  /**
+  *@description Tooltip text that appears after clicking on the copy CSS changes button
+  */
+  copiedToClipboard: 'Copied to clipboard',
+  /**
   *@description Text displayed on layer separators in the styles sidebar pane.
   */
   layer: 'Layer',
@@ -207,6 +215,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly imagePreviewPopover: ImagePreviewPopover;
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
   #urlToChangeTracker: Map<Platform.DevToolsPath.UrlString, ChangeTracker> = new Map();
+  #copyChangesButton?: UI.Toolbar.ToolbarButton;
 
   static instance(): StylesSidebarPane {
     if (!stylesSidebarPaneInstance) {
@@ -579,6 +588,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
       this.appendToolbarItem(this.createRenderingShortcuts());
+      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+        this.#copyChangesButton = this.createCopyAllChangesButton();
+        this.appendToolbarItem(this.#copyChangesButton);
+        this.#copyChangesButton.element.classList.add('hidden');
+      }
       this.dispatchEventToListeners(Events.InitialUpdateCompleted);
     }
 
@@ -1109,6 +1123,22 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return changedLines.has(formattedLineNumber + 1);
   }
 
+  updateChangeStatus(): void {
+    if (!this.#copyChangesButton) {
+      return;
+    }
+
+    let hasChangedStyles = false;
+    for (const changeTracker of this.#urlToChangeTracker.values()) {
+      if (changeTracker.changedLines.size > 0) {
+        hasChangedStyles = true;
+        break;
+      }
+    }
+
+    this.#copyChangesButton.element.classList.toggle('hidden', !hasChangedStyles);
+  }
+
   private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     const changeTracker = this.#urlToChangeTracker.get(uiSourceCode.url());
     if (!changeTracker) {
@@ -1290,6 +1320,29 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     return button;
   }
+
+  private createCopyAllChangesButton(): UI.Toolbar.ToolbarButton {
+    const copyAllChangesButton =
+        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyAllCSSChanges), 'largeicon-copy');
+    // TODO(1296947): implement a dedicated component to share between all copy buttons
+    copyAllChangesButton.element.setAttribute('data-content', i18nString(UIStrings.copiedToClipboard));
+    let timeout: number|undefined;
+    copyAllChangesButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, async () => {
+      const allChanges = await this.getFormattedChanges();
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allChanges);
+      Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllChangesViaStylesPane);
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = undefined;
+      }
+      copyAllChangesButton.element.classList.add('copied-to-clipboard');
+      timeout = window.setTimeout(() => {
+        copyAllChangesButton.element.classList.remove('copied-to-clipboard');
+        timeout = undefined;
+      }, 2000);
+    });
+    return copyAllChangesButton;
+  }
 }
 
 export const enum Events {

package/front_end/panels/elements/components/QueryContainer.ts

@@ -104,7 +104,7 @@ export class QueryContainer extends HTMLElement {
     // clang-format on
   }
 
-  #renderQueriedSizeDetails(): LitHtml.TemplateResult|{} {
+  #renderQueriedSizeDetails(): LitHtml.LitTemplate {
     if (!this.#queriedSizeDetails || this.#queriedSizeDetails.queryAxis === QueryAxis.None) {
       return LitHtml.nothing;
     }

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
@@ -44,7 +45,7 @@ export const enum AffectedItem {
   Source = 'Source',
 }
 
-export const extractShortPath = (path: string): string => {
+export const extractShortPath = (path: Platform.DevToolsPath.UrlString): string => {
   // 1st regex matches everything after last '/'
   // if path ends with '/', 2nd regex returns everything between the last two '/'
   return (/[^/]+$/.exec(path) || /[^/]+\/$/.exec(path) || [''])[0];
@@ -255,8 +256,8 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
       // TODO(crbug.com/1108503): Add some mechanism to be able to add telemetry to this element.
       const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
       const sourceAnchor = linkifier.linkifyScriptLocation(
-          target || null, sourceLocation.scriptId || null, sourceLocation.url, sourceLocation.lineNumber,
-          {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0});
+          target || null, sourceLocation.scriptId || null, sourceLocation.url as Platform.DevToolsPath.UrlString,
+          sourceLocation.lineNumber, {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0});
       sourceCodeLocation.appendChild(sourceAnchor);
     }
     element.appendChild(sourceCodeLocation);

package/front_end/panels/issues/AffectedSourcesView.ts

@@ -42,7 +42,8 @@ export class AffectedSourcesView extends AffectedResourcesView {
     // Also, this element has a context menu, so we should be able to
     // track when the user use the context menu too.
     // TODO(crbug.com/1108503): Add some mechanism to be able to add telemetry to this element.
-    const anchorElement = Components.Linkifier.Linkifier.linkifyURL(url, linkifierURLOptions);
+    const anchorElement =
+        Components.Linkifier.Linkifier.linkifyURL(url as Platform.DevToolsPath.UrlString, linkifierURLOptions);
     cellElement.appendChild(anchorElement);
     const rowElement = document.createElement('tr');
     rowElement.classList.add('affected-resource-source');

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -27,21 +27,6 @@ const UIStrings = {
    * @description Noun, label for the column showing the associated network request in the issue details table.
    */
   request: 'Request',
-  /**
-   * @description Label for the column showing the invalid value used as the 'attributionsourceeventid' attribute
-   * on an anchor HTML element ("a link").
-   */
-  invalidSourceEventId: 'Invalid `attributionsourceeventid`',
-  /**
-   * @description Label for the column showing the invalid value used as the 'attributionexpiry' attribute
-   * on an anchor HTML element ("a link").
-   */
-  invalidSourceExpiry: 'Invalid `attributionexpiry`',
-  /**
-   * @description Label for the column showing the invalid value used as the 'attributionpriority' attribute
-   * on an anchor HTML element ("a link").
-   */
-  invalidSourcePriority: 'Invalid `attributionsourcepriority`',
   /**
    * @description Label for the column showing the invalid URL used in an HTML anchor element ("a link").
    * A origin is (roughly said) the front part of a URL.
@@ -89,21 +74,6 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
         break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
-        this.appendColumnTitle(header, i18nString(UIStrings.frame));
-        this.appendColumnTitle(header, i18nString(UIStrings.element));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidSourceEventId));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceExpiry:
-        this.appendColumnTitle(header, i18nString(UIStrings.frame));
-        this.appendColumnTitle(header, i18nString(UIStrings.element));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidSourceExpiry));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourcePriority:
-        this.appendColumnTitle(header, i18nString(UIStrings.frame));
-        this.appendColumnTitle(header, i18nString(UIStrings.element));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidSourcePriority));
-        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
         this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.element));
@@ -129,11 +99,6 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
     const details = issue.issueDetails;
 
     switch (issueCode) {
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyFrameOrigin:
-        this.#appendFrameOrEmptyCell(element, issue);
-        this.#appendRequestOrEmptyCell(element, details.request);
-        this.appendIssueDetailCell(element, details.invalidParameter || '');
-        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionSourceUntrustworthyOrigin:
         await this.#appendElementOrEmptyCell(element, issue);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
@@ -142,14 +107,6 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.#appendRequestOrEmptyCell(element, details.request);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.AttributionSourceUntrustworthyFrameOrigin:
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceExpiry:
-      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourcePriority:
-        this.#appendFrameOrEmptyCell(element, issue);
-        await this.#appendElementOrEmptyCell(element, issue);
-        this.appendIssueDetailCell(element, details.invalidParameter || '');
-        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
         this.#appendFrameOrEmptyCell(element, issue);
         await this.#appendElementOrEmptyCell(element, issue);

package/front_end/panels/issues/IssueView.ts

@@ -181,7 +181,7 @@ class AffectedMixedContentView extends AffectedResourcesView {
         },
       }));
     } else {
-      const filename = extractShortPath(mixedContent.insecureURL);
+      const filename = extractShortPath(mixedContent.insecureURL as Platform.DevToolsPath.UrlString);
       const cell = this.appendIssueDetailCell(element, filename, 'affected-resource-mixed-content-info');
       cell.title = mixedContent.insecureURL;
     }

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 
@@ -508,7 +509,7 @@ export const RuntimeSettings: RuntimeSetting[] = [
         value: 'snapshot',
       },
     ],
-    learnMore: 'https://web.dev/lighthouse-user-flows/',
+    learnMore: 'https://web.dev/lighthouse-user-flows/' as Platform.DevToolsPath.UrlString,
   },
   {
     // This setting is disabled, but we keep it around to show in the UI.
@@ -517,7 +518,8 @@ export const RuntimeSettings: RuntimeSetting[] = [
     title: i18nLazyString(UIStrings.simulatedThrottling),
     // We will disable this when we have a Lantern trace viewer within DevTools.
     learnMore:
-        'https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md#devtools-lighthouse-panel-throttling',
+        'https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md#devtools-lighthouse-panel-throttling' as
+        Platform.DevToolsPath.UrlString,
     description: i18nLazyString(UIStrings.simulateASlowerPageLoadBasedOn),
     setFlags: (flags: Flags, value: string|boolean): void => {
       flags.throttlingMethod = value ? 'simulate' : 'devtools';
@@ -600,5 +602,5 @@ export interface RuntimeSetting {
     tooltip?: () => Common.UIString.LocalizedString,
   }[];
   title?: () => Common.UIString.LocalizedString;
-  learnMore?: string;
+  learnMore?: Platform.DevToolsPath.UrlString;
 }

package/front_end/panels/lighthouse/LighthouseReporterTypes.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 
 export class LighthouseReportGenerator {
@@ -80,7 +81,7 @@ export interface NodeDetailsJSON {
   snippet?: string;
 }
 export interface SourceLocationDetailsJSON {
-  sourceUrl?: string;
+  sourceUrl?: Platform.DevToolsPath.UrlString;
   sourceLine?: string;
   sourceColumn?: string;
 }

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -50,3 +50,7 @@ button.view-trace {
 .lighthouse-toolbar-container > :first-child {
   flex: 1 1 auto;
 }
+
+.lh-devtools .lh-element-screenshot__overlay {
+  position: absolute;
+}

package/front_end/panels/network/components/RequestTrustTokensView.ts

@@ -150,7 +150,7 @@ export class RequestTrustTokensReport extends HTMLElement {
     // clang-format on
   }
 
-  #renderParameterSection(): LitHtml.TemplateResult|{} {
+  #renderParameterSection(): LitHtml.LitTemplate {
     if (!this.#trustTokenData || !this.#trustTokenData.params) {
       return LitHtml.nothing;
     }
@@ -167,14 +167,14 @@ export class RequestTrustTokensReport extends HTMLElement {
     `;
   }
 
-  #renderRefreshPolicy(params: Protocol.Network.TrustTokenParams): LitHtml.TemplateResult|{} {
+  #renderRefreshPolicy(params: Protocol.Network.TrustTokenParams): LitHtml.LitTemplate {
     if (params.type !== Protocol.Network.TrustTokenOperationType.Redemption) {
       return LitHtml.nothing;
     }
     return renderRowWithCodeValue(i18nString(UIStrings.refreshPolicy), params.refreshPolicy.toString());
   }
 
-  #renderIssuers(params: Protocol.Network.TrustTokenParams): LitHtml.TemplateResult|{} {
+  #renderIssuers(params: Protocol.Network.TrustTokenParams): LitHtml.LitTemplate {
     if (!params.issuers || params.issuers.length === 0) {
       return LitHtml.nothing;
     }
@@ -193,7 +193,7 @@ export class RequestTrustTokensReport extends HTMLElement {
   // The issuer and top level origin are technically parameters but reported in the
   // result structure due to the timing when they are calculated in the backend.
   // Nonetheless, we show them as part of the parameter section.
-  #renderIssuerAndTopLevelOriginFromResult(): LitHtml.TemplateResult|{} {
+  #renderIssuerAndTopLevelOriginFromResult(): LitHtml.LitTemplate {
     if (!this.#trustTokenData || !this.#trustTokenData.result) {
       return LitHtml.nothing;
     }
@@ -203,7 +203,7 @@ export class RequestTrustTokensReport extends HTMLElement {
       ${renderSimpleRowIfValuePresent(i18nString(UIStrings.issuer), this.#trustTokenData.result.issuerOrigin)}`;
   }
 
-  #renderResultSection(): LitHtml.TemplateResult|{} {
+  #renderResultSection(): LitHtml.LitTemplate {
     if (!this.#trustTokenData || !this.#trustTokenData.result) {
       return LitHtml.nothing;
     }
@@ -227,7 +227,7 @@ export class RequestTrustTokensReport extends HTMLElement {
       `;
   }
 
-  #renderIssuedTokenCount(result: Protocol.Network.TrustTokenOperationDoneEvent): LitHtml.TemplateResult|{} {
+  #renderIssuedTokenCount(result: Protocol.Network.TrustTokenOperationDoneEvent): LitHtml.LitTemplate {
     if (result.type !== Protocol.Network.TrustTokenOperationType.Issuance) {
       return LitHtml.nothing;
     }
@@ -284,7 +284,7 @@ function getDetailedTextForStatusCode(status: Protocol.Network.TrustTokenOperati
   }
 }
 
-function renderSimpleRowIfValuePresent<T>(key: string, value: T|undefined): LitHtml.TemplateResult|{} {
+function renderSimpleRowIfValuePresent<T>(key: string, value: T|undefined): LitHtml.LitTemplate {
   if (value === undefined) {
     return LitHtml.nothing;
   }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1299,8 +1299,8 @@ export class AllocationGridNode extends HeapSnapshotGridNode {
       const linkifier = (this.dataGridInternal as AllocationDataGrid).linkifier;
       const urlElement = linkifier.linkifyScriptLocation(
           heapProfilerModel ? heapProfilerModel.target() : null,
-          String(allocationNode.scriptId) as Protocol.Runtime.ScriptId, allocationNode.scriptName,
-          allocationNode.line - 1, {
+          String(allocationNode.scriptId) as Protocol.Runtime.ScriptId,
+          allocationNode.scriptName as Platform.DevToolsPath.UrlString, allocationNode.line - 1, {
             columnNumber: allocationNode.column - 1,
             inlineFrameIndex: 0,
             className: 'profile-node-file',

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1904,7 +1904,8 @@ export class HeapAllocationStackView extends UI.Widget.Widget {
       const target = this.heapProfilerModel ? this.heapProfilerModel.target() : null;
       const options = {columnNumber: frame.column - 1, inlineFrameIndex: 0};
       const urlElement = this.linkifier.linkifyScriptLocation(
-          target, String(frame.scriptId) as Protocol.Runtime.ScriptId, frame.scriptName, frame.line - 1, options);
+          target, String(frame.scriptId) as Protocol.Runtime.ScriptId,
+          frame.scriptName as Platform.DevToolsPath.UrlString, frame.line - 1, options);
       frameDiv.appendChild(urlElement);
       stackFrameToURLElement.set(frameDiv, urlElement);
       frameDiv.addEventListener('contextmenu', this.onContextMenu.bind(this, urlElement));

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -65,7 +65,7 @@ export class ProfileDataGridNode extends DataGrid.DataGrid.DataGridNode<unknown>
   total: number;
   functionName: string;
   readonly deoptReason: string;
-  url: string;
+  url: Platform.DevToolsPath.UrlString;
   linkElement: Element|null;
   populated: boolean;
   savedSelf?: number;

package/front_end/panels/security/SecurityPanel.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
@@ -513,7 +514,7 @@ export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     return certificateButton;
   }
 
-  static createHighlightedUrl(url: string, securityState: string): Element {
+  static createHighlightedUrl(url: Platform.DevToolsPath.UrlString, securityState: string): Element {
     const schemeSeparator = '://';
     const index = url.indexOf(schemeSeparator);
 
@@ -548,7 +549,7 @@ export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     // The sidebar element will trigger displaying the main view. Rather than making a redundant call to display the main view, we rely on this.
     this.sidebarMainViewElement.select(true);
   }
-  showOrigin(origin: string): void {
+  showOrigin(origin: Platform.DevToolsPath.UrlString): void {
     const originState = this.origins.get(origin);
     if (!originState) {
       return;
@@ -820,7 +821,7 @@ export class SecurityPanelSidebarTree extends UI.TreeOutline.TreeOutlineInShadow
     }
   }
 
-  addOrigin(origin: string, securityState: Protocol.Security.SecurityState): void {
+  addOrigin(origin: Platform.DevToolsPath.UrlString, securityState: Protocol.Security.SecurityState): void {
     const originElement = new SecurityPanelSidebarTreeElement(
         SecurityPanel.createHighlightedUrl(origin, securityState), this.showOriginInPanel.bind(this, origin),
         'security-sidebar-tree-item', 'security-property');
@@ -1394,7 +1395,7 @@ export class SecurityMainView extends UI.Widget.VBox {
 export class SecurityOriginView extends UI.Widget.VBox {
   private readonly panel: SecurityPanel;
   private readonly originLockIcon: HTMLElement;
-  constructor(panel: SecurityPanel, origin: string, originState: OriginState) {
+  constructor(panel: SecurityPanel, origin: Platform.DevToolsPath.UrlString, originState: OriginState) {
     super();
     this.panel = panel;
     this.setMinimumSize(200, 100);
@@ -1657,4 +1658,4 @@ export interface OriginState {
   originView?: SecurityOriginView|null;
 }
 
-export type Origin = string;
+export type Origin = Platform.DevToolsPath.UrlString;

package/front_end/panels/settings/SettingsScreen.ts

@@ -511,9 +511,8 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         return true;
       // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
       case 'settings.documentation':
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-            UI.UIUtils.addReferrerToURL('https://developer.chrome.com/docs/devtools/') as
-            Platform.DevToolsPath.UrlString);
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(UI.UIUtils.addReferrerToURL(
+            'https://developer.chrome.com/docs/devtools/' as Platform.DevToolsPath.UrlString));
         return true;
       case 'settings.shortcuts':
         void SettingsScreen.showSettingsScreen({name: 'keybinds', focusTabHeader: true});

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -441,7 +441,7 @@ export class DebuggerPlugin extends Plugin {
     } else {
       const removeTitle = i18nString(UIStrings.removeBreakpoint, {n: breakpoints.length});
       contextMenu.debugSection().appendItem(
-          removeTitle, () => breakpoints.forEach(breakpoint => breakpoint.remove(false)));
+          removeTitle, () => breakpoints.forEach(breakpoint => void breakpoint.remove(false)));
       if (breakpoints.length === 1 && supportsConditionalBreakpoints) {
         // Editing breakpoints only make sense for conditional breakpoints
         // and logpoints and both are currently only available for JavaScript
@@ -520,7 +520,7 @@ export class DebuggerPlugin extends Plugin {
     if (value !== this.muted) {
       this.muted = value;
       if (!value) {
-        this.restoreBreakpointsAfterEditing();
+        void this.restoreBreakpointsAfterEditing();
       } else if (this.editor) {
         this.editor.dispatch({effects: muteBreakpoints.of(null)});
       }
@@ -1221,18 +1221,19 @@ export class DebuggerPlugin extends Plugin {
   // breakpoints the breakpoint manager might have (which point into
   // the old file) with the breakpoints we have, which had their
   // positions tracked through the changes.
-  private restoreBreakpointsAfterEditing(): void {
+  private async restoreBreakpointsAfterEditing(): Promise<void> {
     const {breakpoints} = this;
     const editor = this.editor as TextEditor.TextEditor.TextEditor;
     this.breakpoints = [];
-    for (const {breakpoint, position} of breakpoints) {
+    await Promise.all(breakpoints.map(async description => {
+      const {breakpoint, position} = description;
       const condition = breakpoint.condition(), enabled = breakpoint.enabled();
-      breakpoint.remove(false);
+      await breakpoint.remove(false);
       const editorLocation = editor.toLineColumn(position);
       const uiLocation =
           this.transformer.editorLocationToUILocation(editorLocation.lineNumber, editorLocation.columnNumber);
-      void this.setBreakpoint(uiLocation.lineNumber, uiLocation.columnNumber, condition, enabled);
-    }
+      await this.setBreakpoint(uiLocation.lineNumber, uiLocation.columnNumber, condition, enabled);
+    }));
   }
 
   private async refreshBreakpoints(): Promise<void> {
@@ -1269,7 +1270,7 @@ export class DebuggerPlugin extends Plugin {
       if (event.shiftKey) {
         breakpoint.setEnabled(!breakpoint.enabled());
       } else {
-        breakpoint.remove(false);
+        void breakpoint.remove(false);
       }
     } else if (this.editor) {
       const editorLocation = this.editor.editor.posAtDOM(event.target as unknown as HTMLElement);
@@ -1444,7 +1445,7 @@ export class DebuggerPlugin extends Plugin {
       if (onlyDisable) {
         breakpoint.setEnabled(hasDisabled);
       } else {
-        breakpoint.remove(false);
+        void breakpoint.remove(false);
       }
     }
   }

package/front_end/panels/sources/JavaScriptBreakpointsSidebarPane.ts

@@ -426,7 +426,7 @@ export class JavaScriptBreakpointsSidebarPane extends UI.ThrottledWidget.Throttl
     const removeEntryTitle = breakpoints.length > 1 ? i18nString(UIStrings.removeAllBreakpointsInLine) :
                                                       i18nString(UIStrings.removeBreakpoint);
     contextMenu.defaultSection().appendItem(
-        removeEntryTitle, () => breakpoints.map(breakpoint => breakpoint.remove(false /* keepInStorage */)));
+        removeEntryTitle, () => breakpoints.map(breakpoint => void breakpoint.remove(false /* keepInStorage */)));
     if (event.target instanceof Element) {
       contextMenu.defaultSection().appendItem(
           i18nString(UIStrings.revealLocation), this.revealLocation.bind(this, event.target));
@@ -487,14 +487,14 @@ export class JavaScriptBreakpointsSidebarPane extends UI.ThrottledWidget.Throttl
 
   private removeAllBreakpoints(): void {
     for (const breakpointLocation of this.breakpointManager.allBreakpointLocations()) {
-      breakpointLocation.breakpoint.remove(false /* keepInStorage */);
+      void breakpointLocation.breakpoint.remove(false /* keepInStorage */);
     }
   }
 
   private removeOtherBreakpoints(selectedBreakpoints: Set<Bindings.BreakpointManager.Breakpoint>): void {
     for (const breakpointLocation of this.breakpointManager.allBreakpointLocations()) {
       if (!selectedBreakpoints.has(breakpointLocation.breakpoint)) {
-        breakpointLocation.breakpoint.remove(false /* keepInStorage */);
+        void breakpointLocation.breakpoint.remove(false /* keepInStorage */);
       }
     }
   }

package/front_end/panels/timeline/PerformanceModel.ts

@@ -75,18 +75,14 @@ export class PerformanceModel extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.tracingModelInternal = model;
     this.timelineModelInternal.setEvents(model);
 
-    let inputEvents: SDK.TracingModel.AsyncEvent[]|null = null;
     let animationEvents: SDK.TracingModel.AsyncEvent[]|null = null;
     for (const track of this.timelineModelInternal.tracks()) {
-      if (track.type === TimelineModel.TimelineModel.TrackType.Input) {
-        inputEvents = track.asyncEvents;
-      }
       if (track.type === TimelineModel.TimelineModel.TrackType.Animation) {
         animationEvents = track.asyncEvents;
       }
     }
-    if (inputEvents || animationEvents) {
-      this.irModel.populate(inputEvents || [], animationEvents || []);
+    if (animationEvents) {
+      this.irModel.populate([], animationEvents || []);
     }
 
     const mainTracks = this.timelineModelInternal.tracks().filter(

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -54,10 +54,6 @@ const UIStrings = {
   */
   onIgnoreList: 'On ignore list',
   /**
-  *@description Text in Timeline Flame Chart Data Provider of the Performance panel
-  */
-  input: 'Input',
-  /**
   *@description Text that refers to the animation of the web page
   */
   animation: 'Animation',
@@ -428,10 +424,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const eventEntryType = EntryType.Event;
 
-    const weight = (track: TimelineModel.TimelineModel.Track): 0|1|2|3|4|5|6|7|8|9|10|- 1 => {
+    const weight = (track: TimelineModel.TimelineModel.Track): 1|2|3|4|5|6|7|8|9|10|- 1 => {
       switch (track.type) {
-        case TimelineModel.TimelineModel.TrackType.Input:
-          return 0;
         case TimelineModel.TimelineModel.TrackType.Animation:
           return 1;
         case TimelineModel.TimelineModel.TrackType.Timings:
@@ -464,13 +458,6 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     let rasterCount = 0;
     for (const track of tracks) {
       switch (track.type) {
-        case TimelineModel.TimelineModel.TrackType.Input: {
-          this.appendAsyncEventsGroup(
-              track, i18nString(UIStrings.input), track.asyncEvents, this.interactionsHeaderLevel2, eventEntryType,
-              false /* selectable */);
-          break;
-        }
-
         case TimelineModel.TimelineModel.TrackType.Animation: {
           this.appendAsyncEventsGroup(
               track, i18nString(UIStrings.animation), track.asyncEvents, this.interactionsHeaderLevel2, eventEntryType,