chrome-devtools-frontend 1.0.1526203 → 1.0.1528866

package/front_end/panels/coverage/coverageView.css

@@ -53,3 +53,20 @@
   white-space: pre-line;
   text-align: center;
 }
+
+.inline-button {
+  display: inline-flex;
+  border: 1px solid var(--sys-color-neutral-outline);
+  border-radius: 4px;
+  position: relative;
+  vertical-align: sub;
+  margin: 2px;
+  background-color: var(--sys-color-cdt-base-container);
+  justify-content: center;
+  width: 28px;
+}
+
+.inline-button:hover {
+  border-color: transparent;
+  background-color: var(--sys-color-state-hover-on-subtle);
+}

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -330,6 +330,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   override willHide(): void {
+    super.willHide();
     UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
   }
 

package/front_end/panels/elements/LayoutPane.ts

@@ -501,6 +501,7 @@ export class LayoutPane extends UI.Widget.Widget {
   }
 
   override willHide(): void {
+    super.willHide();
     for (const setting of this.#settings) {
       Common.Settings.Settings.instance().moduleSetting(setting.name).removeChangeListener(this.requestUpdate, this);
     }

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -58,6 +58,7 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   override willHide(): void {
+    super.willHide();
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1136,7 +1136,11 @@ export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.B
     const bezierText = document.createElement('span');
     bezierText.append(...nodes);
     new BezierPopoverIcon({treeElement: this.#treeElement, swatchPopoverHelper, swatch: icon, bezierText});
-    return [icon, bezierText];
+    const iconAndTextContainer = document.createElement('span');
+    iconAndTextContainer.classList.add('bezier-icon-and-text');
+    iconAndTextContainer.append(icon);
+    iconAndTextContainer.append(bezierText);
+    return [iconAndTextContainer];
   }
 }
 

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -303,3 +303,20 @@ devtools-icon.open-in-animations-panel {
 .tracing-anchor {
   text-decoration: underline dotted var(--sys-color-token-meta);
 }
+
+devtools-icon.bezier-swatch-icon {
+  position: relative;
+  transform: scale(0.7);
+  margin: -5px -2px -3px -4px;
+  user-select: none;
+  color: var(--icon-css);
+  cursor: default;
+
+  &:hover {
+    color: var(--icon-css-hover);
+  }
+}
+
+span.bezier-icon-and-text {
+  white-space: nowrap;
+}

package/front_end/panels/emulation/DeviceModeView.ts

@@ -442,11 +442,13 @@ export class DeviceModeView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.measureHandles();
     this.toolbar.restore();
   }
 
   override willHide(): void {
+    super.willHide();
     this.model.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
   }
 

package/front_end/panels/explain/ActionDelegate.ts

@@ -7,7 +7,6 @@ import type * as UI from '../../ui/legacy/legacy.js';
 import * as Console from '../console/console.js';
 
 import {ConsoleInsight} from './components/ConsoleInsight.js';
-import {PromptBuilder} from './PromptBuilder.js';
 
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
@@ -24,7 +23,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           } else if (actionId === 'explain.console-message.hover') {
             Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRequestedViaHoverButton);
           }
-          const promptBuilder = new PromptBuilder(consoleViewMessage);
+          const promptBuilder = new Console.PromptBuilder.PromptBuilder(consoleViewMessage);
           const aidaClient = new Host.AidaClient.AidaClient();
           void ConsoleInsight.create(promptBuilder, aidaClient).then(insight => {
             consoleViewMessage.setInsight(insight);

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -17,7 +17,7 @@ import * as MarkdownView from '../../../ui/components/markdown_view/markdown_vie
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import {type PromptBuilder, type Source, SourceType} from '../PromptBuilder.js';
+import * as Console from '../../console/console.js';
 
 import styles from './consoleInsight.css.js';
 import listStyles from './consoleInsightSourcesList.css.js';
@@ -163,18 +163,18 @@ export class CloseEvent extends Event {
   }
 }
 
-type PublicPromptBuilder = Pick<PromptBuilder, 'buildPrompt'|'getSearchQuery'>;
+type PublicPromptBuilder = Pick<Console.PromptBuilder.PromptBuilder, 'buildPrompt'|'getSearchQuery'>;
 type PublicAidaClient = Pick<Host.AidaClient.AidaClient, 'doConversation'|'registerClientEvent'>;
 
-function localizeType(sourceType: SourceType): string {
+function localizeType(sourceType: Console.PromptBuilder.SourceType): string {
   switch (sourceType) {
-    case SourceType.MESSAGE:
+    case Console.PromptBuilder.SourceType.MESSAGE:
       return i18nString(UIStrings.consoleMessage);
-    case SourceType.STACKTRACE:
+    case Console.PromptBuilder.SourceType.STACKTRACE:
       return i18nString(UIStrings.stackTrace);
-    case SourceType.NETWORK_REQUEST:
+    case Console.PromptBuilder.SourceType.NETWORK_REQUEST:
       return i18nString(UIStrings.networkRequest);
-    case SourceType.RELATED_CODE:
+    case Console.PromptBuilder.SourceType.RELATED_CODE:
       return i18nString(UIStrings.relatedCode);
   }
 }
@@ -205,7 +205,7 @@ type StateData = {
   type: State.INSIGHT,
   tokens: MarkdownView.MarkdownView.MarkdownViewData['tokens'],
   validMarkdown: boolean,
-  sources: Source[],
+  sources: Console.PromptBuilder.Source[],
   isPageReloadRecommended: boolean,
   completed: boolean,
   directCitationUrls: string[],
@@ -215,7 +215,7 @@ type StateData = {
   error: string,
 }|{
   type: State.CONSENT_REMINDER,
-  sources: Source[],
+  sources: Console.PromptBuilder.Source[],
   isPageReloadRecommended: boolean,
 }|{
   type: State.SETTING_IS_NOT_TRUE,
@@ -631,7 +631,9 @@ export class ConsoleInsight extends HTMLElement {
 
   async *
       #getInsight(): AsyncGenerator<
-          {sources: Source[], isPageReloadRecommended: boolean}&Host.AidaClient.DoConversationResponse, void, void> {
+          {sources: Console.PromptBuilder.Source[], isPageReloadRecommended: boolean}&
+          Host.AidaClient.DoConversationResponse,
+          void, void> {
     const {prompt, sources, isPageReloadRecommended} = await this.#promptBuilder.buildPrompt();
     try {
       for await (const response of this.#aidaClient.doConversation(
@@ -1142,7 +1144,7 @@ export class ConsoleInsight extends HTMLElement {
 
 class ConsoleInsightSourcesList extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #sources: Source[] = [];
+  #sources: Console.PromptBuilder.Source[] = [];
   #isPageReloadRecommended = false;
 
   #render(): void {
@@ -1167,7 +1169,7 @@ class ConsoleInsightSourcesList extends HTMLElement {
     // clang-format on
   }
 
-  set sources(values: Source[]) {
+  set sources(values: Console.PromptBuilder.Source[]) {
     this.#sources = values;
     this.#render();
   }

package/front_end/panels/explain/explain.ts

@@ -4,4 +4,3 @@
 
 export * from './components/ConsoleInsight.js';
 export * from './ActionDelegate.js';
-export * from './PromptBuilder.js';

package/front_end/panels/js_timeline/js_timeline-meta.ts

@@ -63,7 +63,7 @@ UI.ViewManager.registerViewExtension({
   isPreviewFeature: true,
   async loadView() {
     const Timeline = await loadTimelineModule();
-    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null, isNode: true});
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null});
   },
 });
 

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -193,10 +193,12 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   }
 
   override willHide(): void {
+    super.willHide();
     this.textureManager.suspend();
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.textureManager.resume();
     if (!this.needsUpdate) {
       return;

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -1,6 +1,7 @@
 // Copyright 2018 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';

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();
         });
@@ -191,6 +183,7 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.refreshData();
   }
 
@@ -214,7 +207,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/media/MainView.ts

@@ -215,6 +215,7 @@ export class MainView extends UI.Panel.PanelWithSidebar implements SDK.TargetMan
   }
 
   override willHide(): void {
+    super.willHide();
     for (const model of SDK.TargetManager.TargetManager.instance().models(MediaModel, {scoped: true})) {
       this.removeEventListeners(model);
     }

package/front_end/panels/media/TickingFlameChart.ts

@@ -281,6 +281,7 @@ export class TickingFlameChart extends UI.Widget.VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.isShown = false;
     if (this.ticking) {
       this.stop();
@@ -288,6 +289,7 @@ export class TickingFlameChart extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.isShown = true;
     if (this.#canTick && !this.ticking) {
       this.start();