chrome-devtools-frontend 1.0.1605219 → 1.0.1606789

package/front_end/panels/application/webMCPView.css

@@ -23,6 +23,14 @@
         flex: auto;
     }
 
+    devtools-data-grid {
+        flex: auto;
+    }
+
+    devtools-data-grid td {
+        vertical-align: middle;
+    }
+
     .section-title {
         background-color: var(--sys-color-surface1);
         padding: 0 5px;
@@ -33,9 +41,17 @@
         color: var(--sys-color-on-surface);
     }
 
+    .status-cell {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
     devtools-list {
       flex: 1 1 auto;
-      margin: var(--sys-size-4);
+      margin: 0;
+      padding: var(--sys-size-4);
+      box-sizing: border-box;
     }
 
     .tool-item {
@@ -44,22 +60,57 @@
         padding: 8px 0;
         gap: 4px;
         width: 100%;
+        min-width: 0;
         border-bottom: 1px solid var(--sys-color-divider);
     }
 
     .tool-name-container {
         display: flex;
         justify-content: space-between;
-        align-items: center;
+        align-items: flex-start;
+        gap: 8px;
     }
 
     .tool-name.source-code {
         color: var(--sys-color-token-string);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+        flex: 1;
+    }
+
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    .tool-name-container icon-button {
+        flex-shrink: 0;
+        height: 0;
+        overflow: visible;
+        display: flex;
+        align-items: center;
     }
 
     .tool-description {
         color: var(--sys-color-on-surface);
     }
 
+    tr.status-error {
+      color: var(--sys-color-error);
+    }
+
+    devtools-toolbar-input {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+
+    tr.status-cancelled {
+      color: var(--sys-color-on-surface-light);
+    }
 
+    .toolbar-text.status-error-text {
+      color: var(--sys-color-error);
+    }
+
+    .toolbar-text.status-cancelled-text {
+      color: var(--sys-color-on-surface-light);
+    }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -878,7 +878,7 @@ function maybeRenderAdAdorner(input: ViewInput): Lit.TemplateResult|typeof nothi
   // clang-format off
   return html`
     <devtools-adorner
-      aria-describedby=${input.adTooltipId}
+      aria-details=${input.adTooltipId}
       aria-label=${i18nString(UIStrings.thisElementWasIdentifiedAsAnAd)}
       .name=${ElementsComponents.AdornerManager.RegisteredAdorners.AD}
       jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD)}

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -72,6 +72,11 @@ const UIStrings = {
    * @example {3} PH1
    */
   showAllNodesDMore: 'Show all nodes ({PH1} more)',
+  /**
+   * @description Text for a button to show all truncated lines in the tree.
+   * @example {5} PH1
+   */
+  showAllLines: 'Show all ({PH1} lines)',
   /**
    * @description Text for popover that directs to Issues panel
    */
@@ -98,6 +103,7 @@ interface ViewInput {
   expandRoot?: boolean;
   visibleWidth?: number;
   visible?: boolean;
+  maxRowsShown?: number;
   wrap: boolean;
   showSelectionOnKeyboardFocus: boolean;
   preventTabOrder: boolean;
@@ -134,6 +140,12 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ElementsTreeOutline.Events.ElementsTreeUpdated, input.onElementsTreeUpdated, this);
     output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, input.onElementExpanded, this);
     output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, input.onElementCollapsed, this);
+    output.elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.ShowAllRows, () => {
+      if (output.elementsTreeOutline?.maxRowsShown) {
+        // Set max to undefined to show all rows
+        output.elementsTreeOutline.maxRowsShown = undefined;
+      }
+    }, this);
     target.appendChild(output.elementsTreeOutline.element);
   }
 
@@ -150,6 +162,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   if (input.visible !== undefined) {
     output.elementsTreeOutline.setVisible(input.visible);
   }
+  output.elementsTreeOutline.maxRowsShown = input.maxRowsShown;
   output.elementsTreeOutline.setWordWrap(input.wrap);
   output.elementsTreeOutline.setShowSelectionOnKeyboardFocus(input.showSelectionOnKeyboardFocus, input.preventTabOrder);
   if (input.deindentSingleNode) {
@@ -234,6 +247,17 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   #visible = false;
   #visibleWidth?: number;
   #wrap = false;
+  #maxRows?: number;
+
+  // If maxRows is undefined, all rows are shown. If it is set to a number, only that many rows are shown.
+  set maxRows(maxRows: number|undefined) {
+    this.#maxRows = maxRows;
+    this.requestUpdate();
+  }
+
+  get maxRows(): number|undefined {
+    return this.#maxRows;
+  }
 
   set visibleWidth(width: number) {
     this.#visibleWidth = width;
@@ -402,6 +426,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
+    const firstRender = !this.#viewOutput.elementsTreeOutline;
     this.#view(
         {
           omitRootDOMNode: this.omitRootDOMNode,
@@ -416,6 +441,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           visibleWidth: this.#visibleWidth,
           visible: this.#visible,
           wrap: this.#wrap,
+          maxRowsShown: this.#maxRows,
           showSelectionOnKeyboardFocus: this.showSelectionOnKeyboardFocus,
           preventTabOrder: this.preventTabOrder,
           deindentSingleNode: this.deindentSingleNode,
@@ -437,6 +463,11 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           },
         },
         this.#viewOutput, this.contentElement);
+    if (firstRender && this.#viewOutput.elementsTreeOutline) {
+      this.#viewOutput.elementsTreeOutline.addEventListener(ElementsTreeOutline.Events.ShowAllRows, () => {
+        this.maxRows = undefined;
+      });
+    }
   }
 
   modelAdded(domModel: SDK.DOMModel.DOMModel): void {
@@ -597,6 +628,8 @@ export class ElementsTreeOutline extends
   showAIButton: boolean;
   disableEdits: boolean;
   expandRoot: boolean;
+  #maxRowsShown?: number;
+  #showAllButton?: HTMLElement;
 
   constructor(
       omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean, maxTreeDepth?: number,
@@ -1030,6 +1063,58 @@ export class ElementsTreeOutline extends
     }
   }
 
+  set maxRowsShown(maxRows: number|undefined) {
+    this.#maxRowsShown = maxRows;
+    this.#updateShowAllButton();
+  }
+
+  #updateShowAllButton(): void {
+    const container = this.shadowRoot.querySelector('.elements-disclosure') as HTMLElement;
+    if (!container) {
+      return;
+    }
+    if (!this.#maxRowsShown) {
+      this.#showAllButton?.classList.add('hidden');
+      container.style.removeProperty('--max-rows');
+      container.classList.remove('elements-tree-truncated');
+      return;
+    }
+
+    container.style.setProperty('--max-rows', String(this.#maxRowsShown));
+    container.classList.add('elements-tree-truncated');
+
+    // We use a microtask to wait for rendering so all node lines are rendered.
+    window.requestAnimationFrame(() => {
+      // The container has a max-height (based on --max-rows). If the total content height
+      // (scrollHeight) is greater than the visible height (clientHeight), it means
+      // some rows are hidden due to truncation, and we should show the "Show all" button.
+      const isOverflowing = container.scrollHeight > container.clientHeight;
+      if (!isOverflowing) {
+        return;
+      }
+      if (!this.#showAllButton) {
+        this.#showAllButton = UI.UIUtils.createTextButton('', () => {
+          this.dispatchEventToListeners(ElementsTreeOutline.Events.ShowAllRows);
+          this.dispatchEventToListeners(UI.TreeOutline.Events.ElementExpanded, this.rootElement());
+        }, {
+          jslogContext: 'show-all-nodes',
+        });
+        this.#showAllButton.classList.add('elements-tree-show-all');
+        this.shadowRoot.appendChild(this.#showAllButton);
+      }
+      this.#showAllButton.classList.remove('hidden');
+      const computedStyle = window.getComputedStyle(container);
+      const lineHeight = parseFloat(computedStyle.lineHeight) || 16;
+      const truncatedLines = Math.round((container.scrollHeight - container.clientHeight) / lineHeight);
+
+      if (truncatedLines > 0) {
+        this.#showAllButton.textContent = i18nString(UIStrings.showAllLines, {PH1: truncatedLines});
+      } else {
+        this.#showAllButton?.classList.add('hidden');
+      }
+    });
+  }
+
   highlightAdoptedStyleSheet(adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet): void {
     const parentDOMNode =
         !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
@@ -2219,12 +2304,14 @@ export namespace ElementsTreeOutline {
     /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
     SelectedNodeChanged = 'SelectedNodeChanged',
     ElementsTreeUpdated = 'ElementsTreeUpdated',
+    ShowAllRows = 'ShowAllRows',
     /* eslint-enable @typescript-eslint/naming-convention */
   }
 
   export interface EventTypes {
     [Events.SelectedNodeChanged]: {node: SDK.DOMModel.DOMNode|null, focus: boolean};
     [Events.ElementsTreeUpdated]: SDK.DOMModel.DOMNode[];
+    [Events.ShowAllRows]: void;
   }
 }
 

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -1075,10 +1075,6 @@ export class StylePropertiesSection {
 
   protected createContainerQueryElement(containerQuery: SDK.CSSContainerQuery.CSSContainerQuery):
       ElementsComponents.CSSQuery.CSSQuery|undefined {
-    if (!containerQuery.text) {
-      return;
-    }
-
     let onQueryTextClick;
     if (containerQuery.styleSheetId) {
       onQueryTextClick = this.handleQueryRuleClick.bind(this, containerQuery);

package/front_end/panels/elements/elements.ts

@@ -10,6 +10,7 @@ import './ElementsTreeElement.js';
 import './AdoptedStyleSheetTreeElement.js';
 import './TopLayerContainer.js';
 import './ElementsTreeOutline.js';
+import './ImagePreviewPopover.js';
 import './EventListenersWidget.js';
 import './MarkerDecorator.js';
 import './MetricsSidebarPane.js';
@@ -45,6 +46,7 @@ import * as ElementsTreeElement from './ElementsTreeElement.js';
 import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 import * as ElementsTreeOutlineRenderer from './ElementsTreeOutlineRenderer.js';
 import * as EventListenersWidget from './EventListenersWidget.js';
+import * as ImagePreviewPopover from './ImagePreviewPopover.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
 import * as LayersWidget from './LayersWidget.js';
 import * as LayoutPane from './LayoutPane.js';
@@ -82,6 +84,7 @@ export {
   ElementsTreeOutline,
   ElementsTreeOutlineRenderer,
   EventListenersWidget,
+  ImagePreviewPopover,
   InspectElementModeController,
   LayersWidget,
   LayoutPane,

package/front_end/panels/elements/elementsTreeOutline.css

@@ -402,3 +402,24 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 .ad-provenance-tooltip-content {
   padding-left: 16px;
 }
+
+.elements-disclosure.elements-tree-truncated {
+  /* 1.36 is the line-height, 15px is the min-height */
+  max-height: calc(var(--max-rows) * 1.36em + 5px);
+  overflow: hidden;
+}
+
+.elements-tree-show-all {
+  border: none;
+  color: var(--sys-color-primary);
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  padding: 4px 12px;
+  text-align: center;
+  width: 100%;
+}
+
+.elements-tree-show-all.hidden {
+  display: none;
+}

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -21,6 +21,7 @@
   padding-left: 22px;
   white-space: normal;
   text-overflow: ellipsis;
+  overflow-wrap: break-word;
   cursor: auto;
   display: block;
 
@@ -74,6 +75,12 @@
     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
     white-space: normal !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 0;
+
+    /* Constrain the TextPrompt proxy span (display: inline-block) so that
+       long values wrap instead of overflowing the section. */
+    > span:has(> .text-prompt-root) {
+      max-width: 100%;
+    }
   }
 
   .info {

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -19,7 +19,7 @@ import {
   type PageWarningsChangedEvent
 } from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
-import {ProtocolService} from './LighthouseProtocolService.js';
+import {CancelledError, ProtocolService} from './LighthouseProtocolService.js';
 import {LighthouseReportRenderer} from './LighthouseReportRenderer.js';
 import {Item, ReportSelector} from './LighthouseReportSelector.js';
 import {StartView} from './LighthouseStartView.js';
@@ -176,6 +176,12 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   private handleError(err: unknown): void {
+    if (err instanceof CancelledError) {
+      // If the error was an explicit choice to cancel, we don't want to render
+      // the bug report view.
+      return;
+    }
+
     if (err instanceof Error) {
       this.statusView.renderBugReport(err);
     }

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -58,6 +58,12 @@ export interface LighthouseRun {
   isAIControlled?: boolean;
 }
 
+export class CancelledError extends Error {
+  constructor() {
+    super('Lighthouse run cancelled');
+  }
+}
+
 /**
  * ProtocolService manages a connection between the frontend (Lighthouse panel) and the Lighthouse worker.
  */
@@ -71,6 +77,14 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   private configForTesting?: object;
   private connection?: ProtocolClient.CDPConnection.CDPConnection;
 
+  /**
+   * Tracks pending requests to the Lighthouse worker.
+   * Key: The message ID sent to the worker.
+   * Value: The rejection function for the corresponding promise.
+   * This is used to gracefully cancel hanging promises if the ProtocolService is detached before the worker replies.
+   */
+  readonly #pendingRequests = new Map<number, (reason: Error) => void>();
+
   async attach(): Promise<void> {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
@@ -174,6 +188,10 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   }
 
   async detach(): Promise<void> {
+    for (const reject of this.#pendingRequests.values()) {
+      reject(new CancelledError());
+    }
+    this.#pendingRequests.clear();
     const oldLighthouseWorker = this.lighthouseWorkerPromise;
     const oldRootTarget = this.rootTarget;
 
@@ -245,7 +263,7 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     return this.lighthouseWorkerPromise;
   }
 
-  private async ensureWorkerExists(): Promise<Worker> {
+  async ensureWorkerExists(): Promise<Worker> {
     let worker: Worker;
     if (!this.lighthouseWorkerPromise) {
       worker = await this.initWorker();
@@ -293,16 +311,21 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
       Promise<LighthouseModel.ReporterTypes.RunnerResult> {
     const worker = await this.ensureWorkerExists();
     const messageId = lastId++;
-    const messageResult = new Promise<LighthouseModel.ReporterTypes.RunnerResult>(resolve => {
+    const messageResult = new Promise<LighthouseModel.ReporterTypes.RunnerResult>((resolve, reject) => {
       const workerListener = (event: MessageEvent): void => {
         const lighthouseMessage = event.data;
 
         if (lighthouseMessage.id === messageId) {
           worker.removeEventListener('message', workerListener);
+          this.#pendingRequests.delete(messageId);
           resolve(lighthouseMessage.result);
         }
       };
       worker.addEventListener('message', workerListener);
+      this.#pendingRequests.set(messageId, (err: Error) => {
+        worker.removeEventListener('message', workerListener);
+        reject(err);
+      });
     });
     worker.postMessage({id: messageId, action, args: {...args, id: messageId}});
 

package/front_end/panels/profiler/HeapDetachedElementsView.ts

@@ -182,10 +182,6 @@ export class DetachedElementsProfileHeader extends WritableProfileHeader {
     this.#heapProfilerModel = heapProfilerModel;
   }
 
-  override createView(dataDisplayDelegate: DataDisplayDelegate): DetachedElementsProfileView {
-    return new DetachedElementsProfileView(dataDisplayDelegate, this);
-  }
-
   heapProfilerModel(): SDK.HeapProfilerModel.HeapProfilerModel|null {
     return this.#heapProfilerModel;
   }

package/front_end/panels/profiler/HeapProfileView.ts

@@ -487,10 +487,6 @@ export class SamplingHeapProfileHeader extends WritableProfileHeader {
     };
   }
 
-  override createView(): HeapProfileView {
-    return new HeapProfileView(this);
-  }
-
   protocolProfile(): Protocol.HeapProfiler.SamplingHeapProfile {
     return this.protocolProfileInternal;
   }

package/front_end/panels/profiler/HeapProfilerPanel.ts

@@ -8,9 +8,7 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type {HeapSnapshotView} from './HeapSnapshotView.js';
-import type {ProfileType} from './ProfileHeader.js';
 import {ProfilesPanel} from './ProfilesPanel.js';
-import {instance} from './ProfileTypeRegistry.js';
 
 const UIStrings = {
   /**
@@ -20,18 +18,12 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/HeapProfilerPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 let heapProfilerPanelInstance: HeapProfilerPanel;
 export class HeapProfilerPanel extends ProfilesPanel implements UI.ContextMenu.Provider<SDK.RemoteObject.RemoteObject>,
                                                                 UI.ActionRegistration.ActionDelegate {
   constructor() {
-    const registry = instance;
-    const profileTypes = [
-      registry.heapSnapshotProfileType,
-      registry.trackingHeapSnapshotProfileType,
-      registry.samplingHeapProfileType,
-      registry.detachedElementProfileType,
-    ];
-    super('heap-profiler', profileTypes as ProfileType[], 'profiler.heap-toggle-recording');
+    super('heap-profiler', 'profiler.heap-toggle-recording');
   }
 
   static instance(): HeapProfilerPanel {
@@ -52,7 +44,7 @@ export class HeapProfilerPanel extends ProfilesPanel implements UI.ContextMenu.P
     }
     const objectId = object.objectId;
 
-    const heapProfiles = instance.heapSnapshotProfileType.getProfiles();
+    const heapProfiles = ProfilesPanel.registry.heapSnapshotProfileType.getProfiles();
     if (!heapProfiles.length) {
       return;
     }
@@ -97,8 +89,7 @@ export class HeapProfilerPanel extends ProfilesPanel implements UI.ContextMenu.P
   }
 
   override showObject(snapshotObjectId: string, perspectiveName: string): void {
-    const registry = instance;
-    const heapProfiles = registry.heapSnapshotProfileType.getProfiles();
+    const heapProfiles = ProfilesPanel.registry.heapSnapshotProfileType.getProfiles();
     for (let i = 0; i < heapProfiles.length; i++) {
       const profile = heapProfiles[i];
       // FIXME: allow to choose snapshot if there are several options.

package/front_end/panels/profiler/HeapSnapshotProxy.ts

@@ -23,9 +23,7 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
   readonly eventHandler: (arg0: string, arg1: string) => void;
   nextObjectId = 1;
   nextCallId = 1;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  callbacks = new Map<number, (arg0: any) => void>();
+  callbacks = new Map<number, (...args: any[]) => void>();
   readonly previousCallbacks = new Set<number>();
   readonly worker: PlatformApi.HostRuntime.Worker;
   interval?: number;
@@ -53,9 +51,7 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
 
   dispose(): void {
     this.worker.terminate();
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
+    clearInterval(this.interval);
   }
 
   disposeObject(objectId: number): void {