chrome-devtools-frontend 1.0.1525561 → 1.0.1526630

package/front_end/panels/coverage/CoverageView.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.
 /* eslint-disable rulesdir/no-imperative-dom-api */
+/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/legacy.js';
 
@@ -14,6 +15,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CoverageDecorationManager} from './CoverageDecorationManager.js';
@@ -124,33 +126,35 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/coverage/CoverageView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {ref} = Directives;
+const {bindToAction} = UI.UIUtils;
+const {bindToSetting} = UI.SettingsUI;
 
 let coverageViewInstance: CoverageView|undefined;
 
 export class CoverageView extends UI.Widget.VBox {
   private model: CoverageModel|null;
   private decorationManager: CoverageDecorationManager|null;
-  private readonly coverageTypeComboBox: UI.Toolbar.ToolbarComboBox;
+  private coverageTypeComboBox!: HTMLSelectElement;
   private readonly coverageTypeComboBoxSetting: Common.Settings.Setting<number>;
   private toggleRecordAction: UI.ActionRegistration.Action;
-  private readonly toggleRecordButton: UI.Toolbar.ToolbarButton;
+  private toggleRecordButton!: Buttons.Button.Button;
   private inlineReloadButton: Element|null;
-  private readonly startWithReloadButton: UI.Toolbar.ToolbarButton|undefined;
+  private startWithReloadButton!: Buttons.Button.Button|undefined;
   private readonly clearAction: UI.ActionRegistration.Action;
   private readonly exportAction: UI.ActionRegistration.Action;
   private textFilterRegExp: RegExp|null;
-  private readonly filterInput: UI.Toolbar.ToolbarInput;
+  private filterInput!: UI.Toolbar.ToolbarInputElement;
   private typeFilterValue: number|null;
-  private readonly filterByTypeComboBox: UI.Toolbar.ToolbarComboBox;
+  private filterByTypeComboBox!: HTMLSelectElement;
   private showContentScriptsSetting: Common.Settings.Setting<boolean>;
-  private readonly contentScriptsCheckbox: UI.Toolbar.ToolbarSettingCheckbox;
-  private readonly coverageResultsElement: HTMLElement;
+  private contentScriptsCheckbox!: UI.UIUtils.CheckboxLabel;
+  private coverageResultsElement!: HTMLElement;
   private readonly landingPage: UI.Widget.VBox;
   private readonly bfcacheReloadPromptPage: UI.Widget.VBox;
   private readonly activationReloadPromptPage: UI.Widget.VBox;
   private listView: CoverageListView;
-  private readonly statusToolbarElement: HTMLElement;
-  private statusMessageElement: HTMLElement;
+  private statusMessageElement!: HTMLElement;
 
   constructor() {
     super({
@@ -162,109 +166,103 @@ export class CoverageView extends UI.Widget.VBox {
     this.model = null;
     this.decorationManager = null;
 
-    const toolbarContainer = this.contentElement.createChild('div', 'coverage-toolbar-container');
-    toolbarContainer.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-    toolbarContainer.role = 'toolbar';
-    const toolbar = toolbarContainer.createChild('devtools-toolbar', 'coverage-toolbar');
-    toolbar.role = 'presentation';
-    toolbar.wrappable = true;
-
-    this.coverageTypeComboBox = new UI.Toolbar.ToolbarComboBox(
-        this.onCoverageTypeComboBoxSelectionChanged.bind(this), i18nString(UIStrings.chooseCoverageGranularityPer),
-        undefined, 'coverage-type');
-    const coverageTypes = [
-      {
-        label: i18nString(UIStrings.perFunction),
-        value: CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION,
-      },
-      {
-        label: i18nString(UIStrings.perBlock),
-        value: CoverageType.JAVA_SCRIPT,
-      },
-    ];
-    for (const type of coverageTypes) {
-      this.coverageTypeComboBox.addOption(this.coverageTypeComboBox.createOption(type.label, `${type.value}`));
-    }
     this.coverageTypeComboBoxSetting =
         Common.Settings.Settings.instance().createSetting('coverage-view-coverage-type', 0);
-    this.coverageTypeComboBox.setSelectedIndex(this.coverageTypeComboBoxSetting.get());
-    this.coverageTypeComboBox.setEnabled(true);
-    toolbar.appendToolbarItem(this.coverageTypeComboBox);
+
     this.toggleRecordAction = UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.toggle-recording');
-    this.toggleRecordButton = UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction);
-    toolbar.appendToolbarItem(this.toggleRecordButton);
 
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    const mainTargetSupportsRecordOnReload = mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    const mainTargetSupportsRecordOnReload = Boolean(mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel));
     this.inlineReloadButton = null;
-    if (mainTargetSupportsRecordOnReload) {
-      this.startWithReloadButton = UI.Toolbar.Toolbar.createActionButton('coverage.start-with-reload');
-      toolbar.appendToolbarItem(this.startWithReloadButton);
-      this.toggleRecordButton.setEnabled(false);
-      this.toggleRecordButton.setVisible(false);
-    }
     this.clearAction = UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.clear');
     this.clearAction.setEnabled(false);
-    toolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton(this.clearAction));
-
-    toolbar.appendSeparator();
     this.exportAction = UI.ActionRegistry.ActionRegistry.instance().getAction('coverage.export');
     this.exportAction.setEnabled(false);
-    toolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton(this.exportAction));
 
     this.textFilterRegExp = null;
-    toolbar.appendSeparator();
-    this.filterInput = new UI.Toolbar.ToolbarFilter(i18nString(UIStrings.filterByUrl), 1, 1);
-    this.filterInput.setEnabled(false);
-    this.filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
-    toolbar.appendToolbarItem(this.filterInput);
-
-    toolbar.appendSeparator();
 
     this.typeFilterValue = null;
-    this.filterByTypeComboBox = new UI.Toolbar.ToolbarComboBox(
-        this.onFilterByTypeChanged.bind(this), i18nString(UIStrings.filterCoverageByType), undefined,
-        'coverage-by-type');
-    const options = [
-      {
-        label: i18nString(UIStrings.all),
-        value: '',
-      },
-      {
-        label: i18nString(UIStrings.css),
-        value: CoverageType.CSS,
-      },
-      {
-        label: i18nString(UIStrings.javascript),
-        value: CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION,
-      },
-    ];
-    for (const option of options) {
-      this.filterByTypeComboBox.addOption(this.filterByTypeComboBox.createOption(option.label, `${option.value}`));
-    }
-
-    this.filterByTypeComboBox.setSelectedIndex(0);
-    this.filterByTypeComboBox.setEnabled(false);
-    toolbar.appendToolbarItem(this.filterByTypeComboBox);
-
-    toolbar.appendSeparator();
+
     this.showContentScriptsSetting = Common.Settings.Settings.instance().createSetting('show-content-scripts', false);
     this.showContentScriptsSetting.addChangeListener(this.onFilterChanged, this);
-    this.contentScriptsCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
-        this.showContentScriptsSetting, i18nString(UIStrings.includeExtensionContentScripts),
-        i18nString(UIStrings.contentScripts));
-    this.contentScriptsCheckbox.setEnabled(false);
-    toolbar.appendToolbarItem(this.contentScriptsCheckbox);
 
-    this.coverageResultsElement = this.contentElement.createChild('div', 'coverage-results');
+    // clang-format off
+    render(html`
+      <style>${coverageViewStyles}</style>
+      <div class="coverage-toolbar-container" jslog=${VisualLogging.toolbar()} role="toolbar">
+        <devtools-toolbar class="coverage-toolbar" role="presentation" wrappable>
+          <select title=${i18nString(UIStrings.chooseCoverageGranularityPer)}
+              aria-label=${i18nString(UIStrings.chooseCoverageGranularityPer)}
+              jslog=${VisualLogging.dropDown('coverage-type').track({change: true})}
+              @change=${this.onCoverageTypeComboBoxSelectionChanged.bind(this)}
+              ${ref(e => { if (e instanceof HTMLSelectElement) { this.coverageTypeComboBox = e; } })}>
+            <option value=${CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION}
+                    jslog=${VisualLogging.item(`${CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION}`).track({click: true})}>
+                 ${i18nString(UIStrings.perFunction)}
+            </option>
+            <option value=${CoverageType.JAVA_SCRIPT}
+                    jslog=${VisualLogging.item(`${CoverageType.JAVA_SCRIPT}`).track({click: true})}>
+              ${i18nString(UIStrings.perBlock)}
+            </option>
+          </select>
+          ${mainTargetSupportsRecordOnReload ? html`
+            <devtools-button ${bindToAction('coverage.start-with-reload')}
+                            ${ref(e => { if (e instanceof Buttons.Button.Button) { this.startWithReloadButton = e; } })}>
+            </devtools-button>` : nothing}
+          <devtools-button ${bindToAction('coverage.toggle-recording')}
+                           .disabled=${mainTargetSupportsRecordOnReload}
+                           .hidden=${mainTargetSupportsRecordOnReload}
+                           ${ref(e => { if (e instanceof Buttons.Button.Button) { this.toggleRecordButton = e; } })}>
+          </devtools-button>
+          <devtools-button ${bindToAction('coverage.clear')}></devtools-button>
+          <div class="toolbar-divider"></div>
+          <devtools-button ${bindToAction('coverage.export')}></devtools-button>
+          <div class="toolbar-divider"></div>
+          <devtools-toolbar-input type="filter" placeholder=${i18nString(UIStrings.filterByUrl)}
+              disabled @change=${this.onFilterChanged.bind(this)} style="flex-grow:1; flex-shrink:1"
+              ${ref(e => { if (e instanceof UI.Toolbar.ToolbarInputElement) { this.filterInput = e; } })}>
+          </devtools-toolbar-input>
+          <div class="toolbar-divider"></div>
+          <select title=${i18nString(UIStrings.filterCoverageByType)}
+              aria-label=${i18nString(UIStrings.filterCoverageByType)}
+              jslog=${VisualLogging.dropDown('coverage-by-type').track({change: true})} disabled
+              @change=${this.onFilterByTypeChanged.bind(this)}
+              ${ref(e => { if (e instanceof HTMLSelectElement) { this.filterByTypeComboBox = e; } })}>
+            <option value="" jslog=${VisualLogging.item('').track({click: true})}>${i18nString(UIStrings.all)}</option>
+            <option value=${CoverageType.CSS}
+                    jslog=${VisualLogging.item(`${CoverageType.CSS}`).track({click: true})}>
+              ${i18nString(UIStrings.css)}
+            </option>
+            <option value=${CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION}
+                   jslog=${VisualLogging.item(`${CoverageType.JAVA_SCRIPT | CoverageType.JAVA_SCRIPT_PER_FUNCTION}`).track({click: true})}>
+              ${i18nString(UIStrings.javascript)}
+            </option>
+          </select>
+          <div class="toolbar-divider"></div>
+          <devtools-checkbox title=${i18nString(UIStrings.includeExtensionContentScripts)} disabled
+              ${bindToSetting(this.showContentScriptsSetting)}
+              ${ref(e => { if (e instanceof UI.UIUtils.CheckboxLabel) { this.contentScriptsCheckbox = e; } })}>
+            ${i18nString(UIStrings.contentScripts)}
+          </devtools-checkbox>
+        </devtools-toolbar>
+      </div>
+      <div class="coverage-results"
+           ${ref(e => { if (e instanceof HTMLElement) { this.coverageResultsElement = e; } })}>
+      </div>
+      <div class="coverage-toolbar-summary">
+        <div class="coverage-message"
+              ${ref(e => { if (e instanceof HTMLElement) { this.statusMessageElement = e; } })}>
+        </div>
+    </div>`, this.contentElement);
+    // clang-format on
+
+    this.coverageTypeComboBox.selectedIndex = this.coverageTypeComboBoxSetting.get();
     this.landingPage = this.buildLandingPage();
     this.bfcacheReloadPromptPage = this.buildReloadPromptPage(i18nString(UIStrings.bfcacheNoCapture), 'bfcache-page');
     this.activationReloadPromptPage =
         this.buildReloadPromptPage(i18nString(UIStrings.activationNoCapture), 'prerender-page');
     this.listView = new CoverageListView();
 
-    this.statusToolbarElement = this.contentElement.createChild('div', 'coverage-toolbar-summary');
-    this.statusMessageElement = this.statusToolbarElement.createChild('div', 'coverage-message');
     this.landingPage.show(this.coverageResultsElement);
   }
 
@@ -333,9 +331,9 @@ export class CoverageView extends UI.Widget.VBox {
     this.listView.detach();
     this.landingPage.show(this.coverageResultsElement);
     this.statusMessageElement.textContent = '';
-    this.filterInput.setEnabled(false);
-    this.filterByTypeComboBox.setEnabled(false);
-    this.contentScriptsCheckbox.setEnabled(false);
+    this.filterInput.disabled = true;
+    this.filterByTypeComboBox.disabled = true;
+    this.contentScriptsCheckbox.disabled = true;
     this.exportAction.setEnabled(false);
   }
 
@@ -350,7 +348,7 @@ export class CoverageView extends UI.Widget.VBox {
   }
 
   isBlockCoverageSelected(): boolean {
-    const option = this.coverageTypeComboBox.selectedOption();
+    const option = this.coverageTypeComboBox.selectedOptions[0];
     const coverageType = Number(option ? option.value : Number.NaN);
     // Check that Coverage.CoverageType.JavaScriptPerFunction is not present.
     return coverageType === CoverageType.JAVA_SCRIPT;
@@ -358,17 +356,17 @@ export class CoverageView extends UI.Widget.VBox {
 
   private selectCoverageType(jsCoveragePerBlock: boolean): void {
     const selectedIndex = jsCoveragePerBlock ? 1 : 0;
-    this.coverageTypeComboBox.setSelectedIndex(selectedIndex);
+    this.coverageTypeComboBox.selectedIndex = selectedIndex;
   }
 
   private onCoverageTypeComboBoxSelectionChanged(): void {
-    this.coverageTypeComboBoxSetting.set(this.coverageTypeComboBox.selectedIndex());
+    this.coverageTypeComboBoxSetting.set(this.coverageTypeComboBox.selectedIndex);
   }
 
   async startRecording(options: {reload: (boolean|undefined), jsCoveragePerBlock: (boolean|undefined)}|null):
       Promise<void> {
     let hadFocus, reloadButtonFocused;
-    if ((this.startWithReloadButton?.element.hasFocus()) || (this.inlineReloadButton?.hasFocus())) {
+    if ((this.startWithReloadButton?.hasFocus()) || (this.inlineReloadButton?.hasFocus())) {
       reloadButtonFocused = true;
     } else if (this.hasFocus()) {
       hadFocus = true;
@@ -410,18 +408,18 @@ export class CoverageView extends UI.Widget.VBox {
     this.toggleRecordAction.setToggled(true);
     this.clearAction.setEnabled(false);
     if (this.startWithReloadButton) {
-      this.startWithReloadButton.setEnabled(false);
-      this.startWithReloadButton.setVisible(false);
-      this.toggleRecordButton.setEnabled(true);
-      this.toggleRecordButton.setVisible(true);
+      this.startWithReloadButton.disabled = true;
+      this.startWithReloadButton.hidden = true;
+      this.toggleRecordButton.disabled = false;
+      this.toggleRecordButton.hidden = false;
       if (reloadButtonFocused) {
         this.toggleRecordButton.focus();
       }
     }
-    this.coverageTypeComboBox.setEnabled(false);
-    this.filterInput.setEnabled(true);
-    this.filterByTypeComboBox.setEnabled(true);
-    this.contentScriptsCheckbox.setEnabled(true);
+    this.coverageTypeComboBox.disabled = true;
+    this.filterInput.disabled = false;
+    this.filterByTypeComboBox.disabled = false;
+    this.contentScriptsCheckbox.disabled = false;
     if (this.landingPage.isShowing()) {
       this.landingPage.detach();
     }
@@ -480,12 +478,12 @@ export class CoverageView extends UI.Widget.VBox {
       this.model.removeEventListener(Events.CoverageUpdated, this.onCoverageDataReceived, this);
     }
     this.toggleRecordAction.setToggled(false);
-    this.coverageTypeComboBox.setEnabled(true);
+    this.coverageTypeComboBox.disabled = false;
     if (this.startWithReloadButton) {
-      this.startWithReloadButton.setEnabled(true);
-      this.startWithReloadButton.setVisible(true);
-      this.toggleRecordButton.setEnabled(false);
-      this.toggleRecordButton.setVisible(false);
+      this.startWithReloadButton.disabled = false;
+      this.startWithReloadButton.hidden = false;
+      this.toggleRecordButton.disabled = true;
+      this.toggleRecordButton.hidden = true;
     }
     this.clearAction.setEnabled(true);
   }
@@ -593,7 +591,7 @@ export class CoverageView extends UI.Widget.VBox {
     if (!this.listView) {
       return;
     }
-    const text = this.filterInput.value();
+    const text = this.filterInput.value;
     this.textFilterRegExp = text ? Platform.StringUtilities.createPlainTextSearchRegex(text, 'i') : null;
     this.updateListView();
     this.updateStats();
@@ -606,7 +604,7 @@ export class CoverageView extends UI.Widget.VBox {
 
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.CoverageReportFiltered);
 
-    const option = this.filterByTypeComboBox.selectedOption();
+    const option = this.filterByTypeComboBox.selectedOptions[0];
     const type = option?.value;
     this.typeFilterValue = parseInt(type || '', 10) || null;
     this.updateListView();

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -145,24 +145,16 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
     this.firstTimeOpen = true;
 
     this.#inspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
-    this.#inspector.contentElement.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) =>
-            this.#memoryRequested(event));
-    this.#inspector.contentElement.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) =>
-            this.updateAddress(event.data));
-    this.#inspector.contentElement.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.SettingsChangedEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.SettingsChangedEvent) => {
-          // Stop event from bubbling up, since no element further up needs the event.
-          event.stopPropagation();
-          this.saveSettings(event.data);
-        });
-    this.#inspector.contentElement.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryHighlightChipList.DeleteMemoryHighlightEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryHighlightChipList.DeleteMemoryHighlightEvent) => {
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.Events.MEMORY_REQUEST, this.#memoryRequested, this);
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.Events.ADDRESS_CHANGED,
+        event => this.updateAddress(event.data));
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.Events.SETTINGS_CHANGED,
+        event => this.saveSettings(event.data));
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.Events.DELETE_MEMORY_HIGHLIGHT, event => {
           LinearMemoryInspectorController.instance().removeHighlight(this.#tabId, event.data);
           this.refreshData();
         });
@@ -214,7 +206,7 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
         });
   }
 
-  #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
+  #memoryRequested(event: Common.EventTarget.EventTargetEvent<{start: number, end: number, address: number}>): void {
     const {start, end, address} = event.data;
     if (address < start || address >= end) {
       throw new Error('Requested address is out of bounds.');

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -68,34 +68,18 @@ export interface Settings {
   endianness: Endianness;
 }
 
-export class MemoryRequestEvent extends Event {
-  static readonly eventName = 'memoryrequest';
-  data: {start: number, end: number, address: number};
-
-  constructor(start: number, end: number, address: number) {
-    super(MemoryRequestEvent.eventName);
-    this.data = {start, end, address};
-  }
+export const enum Events {
+  MEMORY_REQUEST = 'MemoryRequest',
+  ADDRESS_CHANGED = 'AddressChanged',
+  SETTINGS_CHANGED = 'SettingsChanged',
+  DELETE_MEMORY_HIGHLIGHT = 'DeleteMemoryHighlight',
 }
 
-export class AddressChangedEvent extends Event {
-  static readonly eventName = 'addresschanged';
-  data: number;
-
-  constructor(address: number) {
-    super(AddressChangedEvent.eventName);
-    this.data = address;
-  }
-}
-
-export class SettingsChangedEvent extends Event {
-  static readonly eventName = 'settingschanged';
-  data: Settings;
-
-  constructor(settings: Settings) {
-    super(SettingsChangedEvent.eventName);
-    this.data = settings;
-  }
+export interface EventTypes {
+  [Events.MEMORY_REQUEST]: {start: number, end: number, address: number};
+  [Events.ADDRESS_CHANGED]: number;
+  [Events.SETTINGS_CHANGED]: Settings;
+  [Events.DELETE_MEMORY_HIGHLIGHT]: HighlightInfo;
 }
 
 class AddressHistoryEntry implements Common.SimpleHistoryManager.HistoryEntry {
@@ -138,6 +122,7 @@ export interface ViewInput {
   onNavigatePage: (e: PageNavigationEvent) => void;
   onNavigateHistory: (e: HistoryNavigationEvent) => boolean;
   onJumpToAddress: (e: JumpToPointerAddressEvent|JumpToHighlightedMemoryEvent) => void;
+  onDeleteMemoryHighlight: (e: DeleteMemoryHighlightEvent) => void;
   onByteSelected: (e: ByteSelectedEvent) => void;
   onResize: (e: ResizeEvent) => void;
   onValueTypeToggled: (e: ValueTypeToggledEvent) => void;
@@ -180,7 +165,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
         @historynavigation=${input.onNavigateHistory}></devtools-linear-memory-inspector-navigator>
         <devtools-linear-memory-highlight-chip-list
         .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight}}
-        @jumptohighlightedmemory=${input.onJumpToAddress}>
+        @jumptohighlightedmemory=${input.onJumpToAddress}
+        @deletememoryhighlight=${input.onDeleteMemoryHighlight}>
         </devtools-linear-memory-highlight-chip-list>
       <devtools-linear-memory-inspector-viewer
         .data=${
@@ -263,7 +249,8 @@ function getSmallestEnclosingMemoryHighlight(highlightedMemoryAreas: HighlightIn
 
 export type View = typeof DEFAULT_VIEW;
 
-export class LinearMemoryInspector extends UI.Widget.Widget {
+export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) {
   readonly #history = new Common.SimpleHistoryManager.SimpleHistoryManager(10);
 
   #memory = new Uint8Array();
@@ -338,7 +325,7 @@ export class LinearMemoryInspector extends UI.Widget.Widget {
     const {start, end} = getPageRangeForAddress(this.#address, this.#numBytesPerPage, this.#outerMemoryLength);
 
     if (start < this.#memoryOffset || end > this.#memoryOffset + this.#memory.length) {
-      this.contentElement.dispatchEvent(new MemoryRequestEvent(start, end, this.#address));
+      this.dispatchEventToListeners(Events.MEMORY_REQUEST, {start, end, address: this.#address});
       return;
     }
 
@@ -377,6 +364,7 @@ export class LinearMemoryInspector extends UI.Widget.Widget {
       onNavigatePage: this.#navigatePage.bind(this),
       onNavigateHistory: this.#navigateHistory.bind(this),
       onJumpToAddress: this.#onJumpToAddress.bind(this),
+      onDeleteMemoryHighlight: this.#onDeleteMemoryHighlight.bind(this),
       onByteSelected: this.#onByteSelected.bind(this),
       onResize: this.#resize.bind(this),
       onValueTypeToggled: this.#onValueTypeToggled.bind(this),
@@ -396,9 +384,14 @@ export class LinearMemoryInspector extends UI.Widget.Widget {
     this.#jumpToAddress(addressInRange);
   }
 
+  #onDeleteMemoryHighlight(e: DeleteMemoryHighlightEvent): void {
+    e.stopPropagation();
+    this.dispatchEventToListeners(Events.DELETE_MEMORY_HIGHLIGHT, e.data);
+  }
+
   #onRefreshRequest(): void {
     const {start, end} = getPageRangeForAddress(this.#address, this.#numBytesPerPage, this.#outerMemoryLength);
-    this.contentElement.dispatchEvent(new MemoryRequestEvent(start, end, this.#address));
+    this.dispatchEventToListeners(Events.MEMORY_REQUEST, {start, end, address: this.#address});
   }
 
   #onByteSelected(e: ByteSelectedEvent): void {
@@ -413,7 +406,7 @@ export class LinearMemoryInspector extends UI.Widget.Widget {
 
   #onEndiannessChanged(e: EndiannessChangedEvent): void {
     this.#endianness = e.data;
-    this.contentElement.dispatchEvent(new SettingsChangedEvent(this.#createSettings()));
+    this.dispatchEventToListeners(Events.SETTINGS_CHANGED, this.#createSettings());
     void this.requestUpdate();
   }
 
@@ -445,7 +438,7 @@ export class LinearMemoryInspector extends UI.Widget.Widget {
     } else {
       this.#valueTypes.delete(type);
     }
-    this.contentElement.dispatchEvent(new SettingsChangedEvent(this.#createSettings()));
+    this.dispatchEventToListeners(Events.SETTINGS_CHANGED, this.#createSettings());
     void this.requestUpdate();
   }
 
@@ -453,7 +446,7 @@ export class LinearMemoryInspector extends UI.Widget.Widget {
     e.stopImmediatePropagation();
     const {type, mode} = e.data;
     this.#valueTypeModes.set(type, mode);
-    this.contentElement.dispatchEvent(new SettingsChangedEvent(this.#createSettings()));
+    this.dispatchEventToListeners(Events.SETTINGS_CHANGED, this.#createSettings());
     void this.requestUpdate();
   }
 
@@ -490,16 +483,7 @@ export class LinearMemoryInspector extends UI.Widget.Widget {
     const historyEntry = new AddressHistoryEntry(address, () => this.#jumpToAddress(address));
     this.#history.push(historyEntry);
     this.#address = address;
-    this.contentElement.dispatchEvent(new AddressChangedEvent(this.#address));
+    this.dispatchEventToListeners(Events.ADDRESS_CHANGED, this.#address);
     void this.requestUpdate();
   }
 }
-
-declare global {
-  interface HTMLElementEventMap {
-    memoryrequest: MemoryRequestEvent;
-    addresschanged: AddressChangedEvent;
-    settingschanged: SettingsChangedEvent;
-    deletememoryhighlight: DeleteMemoryHighlightEvent;
-  }
-}

package/front_end/panels/network/RequestResponseView.ts

@@ -56,7 +56,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target:
                       i18nString(UIStrings.failedToLoadResponseData), (input.contentData as {error: string}).error,
                       element))}></devtools-widget>`;
     // clang-format on
-  } else if (input.request.statusCode === 204) {
+  } else if (input.request.statusCode === 204 || input.request.failed) {
     // clang-format off
     widget = html`<devtools-widget
                      .widgetConfig=${widgetConfig(element => new UI.EmptyWidget.EmptyWidget(

package/front_end/panels/timeline/TimelinePanel.ts

@@ -310,7 +310,7 @@ let isNode: boolean;
 
 /**
  * Represents the states that the timeline panel can be in.
- * If you need to change the panel's view, use the {@see #changeView} method.
+ * If you need to change the panel's view, use the {@link TimelinePanel.#changeView} method.
  * Note that we do not represent the "Loading/Processing" view here. The
  * StatusPane is managed in the code that handles file import/recording, and
  * when it is visible it is rendered on top of the UI so obscures what is behind
@@ -787,8 +787,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   /**
-   * Determine if two view modes are equivalent. Useful because if {@see
-   * #changeView} gets called and the new mode is identical to the current,
+   * Determine if two view modes are equivalent. Useful because if
+   * {@link TimelinePanel.#changeView} gets called and the new mode is identical to the current,
    * we can bail without doing any UI updates.
    */
   #viewModesEquivalent(m1: ViewMode, m2: ViewMode): boolean {
@@ -2087,14 +2087,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   /**
    * Called when we update the active trace that is being shown to the user.
-   * This is called from {@see changeView} when we change the UI to show a
+   * This is called from {@link TimelinePanel.#changeView} when we change the UI to show a
    * trace - either one the user has just recorded/imported, or one they have
    * navigated to via the dropdown.
    *
    * If you need code to execute whenever the active trace changes, this is the method to use.
-   * If you need code to execute ONLY ON NEW TRACES, then use {@see loadingComplete}
+   * If you need code to execute ONLY ON NEW TRACES, then use {@link TimelinePanel.loadingComplete}
    * You should not call this method directly if you want the UI to update; use
-   * {@see changeView} to control what is shown to the user.
+   * {@link TimelinePanel.#changeView} to control what is shown to the user.
    */
   #setModelForActiveTrace(): void {
     if (this.#viewMode.mode !== 'VIEWING_TRACE') {
@@ -2249,8 +2249,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
     }
 
-    UI.Context.Context.instance().setFlavor(
-        AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace));
+    if (parsedTrace.metadata.dataOrigin !== Trace.Types.File.DataOrigin.CPU_PROFILE) {
+      UI.Context.Context.instance().setFlavor(
+          AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace));
+    }
   }
 
   #onAnnotationModifiedEvent(e: Event): void {

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -235,7 +235,7 @@ export class ExportTraceOptions extends HTMLElement {
           ${checkboxesWithInfoDialog.has(checkboxId) ? html`
             <devtools-button
               aria-details=${`export-trace-tooltip-${checkboxId}`}
-              aria-label=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
+              .accessibleLabel=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
               class="pen-icon"
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: 21c0e9d79181fd991f782bb74b0eb1c8bce10209
+Revision: 4ceac4e2889e841baa72d3beb6c8eac6c0d2341e
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE