chrome-devtools-frontend 1.0.1605219 → 1.0.1606789

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -178,8 +178,8 @@ export class TimelineTreeView extends
   private lastHoveredProfileNode!: Trace.Extras.TraceTree.Node|null;
   private textFilterInternal!: TimelineRegExp;
   private taskFilter!: Trace.Extras.TraceFilter.ExclusiveNameFilter;
-  protected startTime!: Trace.Types.Timing.Milli;
-  protected endTime!: Trace.Types.Timing.Milli;
+  protected startTimeInternal!: Trace.Types.Timing.Milli;
+  protected endTimeInternal!: Trace.Types.Timing.Milli;
   splitWidget!: UI.SplitWidget.SplitWidget;
   detailsView!: UI.Widget.Widget;
   private searchableView!: UI.SearchableView.SearchableView;
@@ -197,6 +197,10 @@ export class TimelineTreeView extends
   #entityMapper: Trace.EntityMapper.EntityMapper|null = null;
   #lastHighlightedEvent: HTMLElement|null = null;
   eventToTreeNode = new WeakMap<Trace.Types.Events.Event, Trace.Extras.TraceTree.Node>();
+  // Compact mode is used to render the tree view in a more compact UI,
+  // suitable for AI assistance widgets. It removes sidebars and toolbars.
+  #compactMode = false;
+  #maxLinkLength: number|undefined = undefined;
 
   /**
    * Determines if the first child in the data grid will be selected
@@ -213,12 +217,85 @@ export class TimelineTreeView extends
     this.searchResults = [];
   }
 
+  get selectedEvents(): Trace.Types.Events.Event[] {
+    return this.#selectedEvents || [];
+  }
+
+  set selectedEvents(selectedEvents: Trace.Types.Events.Event[]|null) {
+    this.#selectedEvents = selectedEvents;
+    this.refreshTree();
+  }
+
+  set parsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace|null) {
+    this.#parsedTrace = parsedTrace;
+    this.refreshTree();
+  }
+
+  get parsedTrace(): Trace.TraceModel.ParsedTrace|null {
+    return this.#parsedTrace;
+  }
+
+  set startTime(startTime: Trace.Types.Timing.Milli) {
+    if (this.startTimeInternal === startTime) {
+      return;
+    }
+    this.startTimeInternal = startTime;
+    this.refreshTree();
+  }
+
+  get startTime(): Trace.Types.Timing.Milli {
+    return this.startTimeInternal;
+  }
+
+  set endTime(endTime: Trace.Types.Timing.Milli) {
+    if (this.endTimeInternal === endTime) {
+      return;
+    }
+    this.endTimeInternal = endTime;
+    this.refreshTree();
+  }
+
+  get endTime(): Trace.Types.Timing.Milli {
+    return this.endTimeInternal;
+  }
+
+  get compactMode(): boolean {
+    return this.#compactMode;
+  }
+
+  set compactMode(v: boolean) {
+    if (this.#compactMode === v) {
+      return;
+    }
+    this.#compactMode = v;
+    if (this.dataGrid) {
+      this.#applyCompactMode();
+    }
+  }
+
+  get maxLinkLength(): number|undefined {
+    return this.#maxLinkLength;
+  }
+
+  set maxLinkLength(maxLinkLength: number|undefined) {
+    this.#maxLinkLength = maxLinkLength;
+  }
+
+  #applyCompactMode(): void {
+    if (this.#compactMode && this.dataGrid) {
+      this.splitWidget?.detach();
+      this.dataGrid.asWidget().detach();
+      this.dataGrid.asWidget().show(this.element);
+      this.dataGrid.renderInline();
+    }
+  }
+
   #eventNameForSorting(event: Trace.Types.Events.Event): string {
     const name = TimelineUIUtils.eventTitle(event) || event.name;
-    if (!this.#parsedTrace) {
+    if (!this.parsedTrace) {
       return name;
     }
-    return name + ':@' + Trace.Handlers.Helpers.getNonResolvedURL(event, this.#parsedTrace.data);
+    return name + ':@' + Trace.Handlers.Helpers.getNonResolvedURL(event, this.parsedTrace.data);
   }
 
   setSearchableView(searchableView: UI.SearchableView.SearchableView): void {
@@ -239,9 +316,6 @@ export class TimelineTreeView extends
   entityMapper(): Trace.EntityMapper.EntityMapper|null {
     return this.#entityMapper;
   }
-  parsedTrace(): Trace.TraceModel.ParsedTrace|null {
-    return this.#parsedTrace;
-  }
 
   isThirdPartyTreeView(): boolean {
     return false;
@@ -269,13 +343,6 @@ export class TimelineTreeView extends
     const columns: DataGrid.DataGrid.ColumnDescriptor[] = [];
     this.populateColumns(columns);
 
-    this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'timeline-tree-view-details-split-widget');
-    const mainView = new UI.Widget.VBox();
-    const toolbar = mainView.element.createChild('devtools-toolbar');
-    toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-    toolbar.wrappable = true;
-    this.populateToolbar(toolbar);
-
     this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid({
       displayName: i18nString(UIStrings.performance),
       columns,
@@ -287,9 +354,22 @@ export class TimelineTreeView extends
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.OPENED_NODE, this.onGridNodeOpened, this);
     this.dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.LAST);
     this.dataGrid.setRowContextMenuCallback(this.onContextMenu.bind(this));
-    this.dataGrid.asWidget().show(mainView.element);
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.updateDetailsForSelection, this);
 
+    if (this.#compactMode) {
+      this.#applyCompactMode();
+      return;
+    }
+
+    this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'timeline-tree-view-details-split-widget');
+    const mainView = new UI.Widget.VBox();
+    const toolbar = mainView.element.createChild('devtools-toolbar');
+    toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
+    toolbar.wrappable = true;
+    this.populateToolbar(toolbar);
+
+    this.dataGrid.asWidget().show(mainView.element);
+
     this.detailsView = new UI.Widget.VBox();
     this.detailsView.element.classList.add('timeline-details-view', 'timeline-details-view-body');
     this.splitWidget.setMainWidget(mainView);
@@ -299,6 +379,13 @@ export class TimelineTreeView extends
     this.splitWidget.addEventListener(UI.SplitWidget.Events.SHOW_MODE_CHANGED, this.onShowModeChanged, this);
   }
 
+  override wasShown(): void {
+    super.wasShown();
+    this.refreshTree();
+    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.#onDataGridSelectionChange, this);
+    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.DESELECTED_NODE, this.#onDataGridDeselection, this);
+  }
+
   lastSelectedNode(): Trace.Extras.TraceTree.Node|null|undefined {
     return this.lastSelectedNodeInternal;
   }
@@ -375,11 +462,6 @@ export class TimelineTreeView extends
     toolbar.appendToolbarItem(textFilterUI);
   }
 
-  selectedEvents(): Trace.Types.Events.Event[] {
-    // TODO: can we make this type readonly?
-    return this.#selectedEvents || [];
-  }
-
   appendContextMenuItems(_contextMenu: UI.ContextMenu.ContextMenu, _node: Trace.Extras.TraceTree.Node): void {
   }
 
@@ -459,7 +541,7 @@ export class TimelineTreeView extends
 
   buildTopDownTree(doNotAggregate: boolean, eventGroupIdCallback: ((arg0: Trace.Types.Events.Event) => string)|null):
       Trace.Extras.TraceTree.Node {
-    return new Trace.Extras.TraceTree.TopDownRootNode(this.selectedEvents(), {
+    return new Trace.Extras.TraceTree.TopDownRootNode(this.selectedEvents, {
       filters: this.filters(),
       startTime: this.startTime,
       endTime: this.endTime,
@@ -469,10 +551,24 @@ export class TimelineTreeView extends
   }
 
   populateColumns(columns: DataGrid.DataGrid.ColumnDescriptor[]): void {
-    columns.push({id: 'self', title: i18nString(UIStrings.selfTime), width: '120px', fixedWidth: true, sortable: true});
+    if (this.compactMode) {
+      columns.push(
+          ({id: 'self', title: i18nString(UIStrings.selfTime), width: '15%', sortable: true} as
+           DataGrid.DataGrid.ColumnDescriptor));
+      columns.push(
+          ({id: 'total', title: i18nString(UIStrings.totalTime), width: '15%', sortable: true} as
+           DataGrid.DataGrid.ColumnDescriptor));
+    } else {
+      columns.push(
+          ({id: 'self', title: i18nString(UIStrings.selfTime), width: '120px', fixedWidth: true, sortable: true} as
+           DataGrid.DataGrid.ColumnDescriptor));
+      columns.push(
+          ({id: 'total', title: i18nString(UIStrings.totalTime), width: '120px', fixedWidth: true, sortable: true} as
+           DataGrid.DataGrid.ColumnDescriptor));
+    }
     columns.push(
-        {id: 'total', title: i18nString(UIStrings.totalTime), width: '120px', fixedWidth: true, sortable: true});
-    columns.push({id: 'activity', title: i18nString(UIStrings.activity), disclosure: true, sortable: true});
+        ({id: 'activity', title: i18nString(UIStrings.activity), disclosure: true, sortable: true} as
+         DataGrid.DataGrid.ColumnDescriptor));
   }
 
   sortingChanged(): void {
@@ -564,6 +660,9 @@ export class TimelineTreeView extends
   }
 
   private onShowModeChanged(): void {
+    if (this.#compactMode || !this.splitWidget) {
+      return;
+    }
     if (this.splitWidget.showMode() === UI.SplitWidget.ShowMode.ONLY_MAIN) {
       return;
     }
@@ -572,6 +671,9 @@ export class TimelineTreeView extends
   }
 
   protected updateDetailsForSelection(): void {
+    if (this.#compactMode || !this.splitWidget || !this.detailsView) {
+      return;
+    }
     const selectedNode = this.dataGrid.selectedNode ? (this.dataGrid.selectedNode as TreeGridNode).profileNode : null;
     if (selectedNode === this.lastSelectedNodeInternal) {
       return;
@@ -612,12 +714,6 @@ export class TimelineTreeView extends
     this.dispatchEventToListeners(TimelineTreeView.Events.TREE_ROW_CLICKED, {node});
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.#onDataGridSelectionChange, this);
-    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.DESELECTED_NODE, this.#onDataGridDeselection, this);
-  }
-
   override childWasDetached(_widget: UI.Widget.Widget): void {
     this.dataGrid.removeEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.#onDataGridSelectionChange);
     this.dataGrid.removeEventListener(DataGrid.DataGrid.Events.DESELECTED_NODE, this.#onDataGridDeselection);
@@ -808,12 +904,13 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
       }
     } else if (event) {
       name.textContent = TimelineUIUtils.eventTitle(event);
-      const parsedTrace = this.treeView.parsedTrace();
+      const parsedTrace = this.treeView.parsedTrace;
       const target = parsedTrace ? targetForEvent(parsedTrace, event) : null;
       const linkifier = this.treeView.linkifier;
       const isFreshOrEnhanced =
           Boolean(parsedTrace && Tracing.FreshRecording.Tracker.instance().recordingIsFreshOrEnhanced(parsedTrace));
-      this.linkElement = TimelineUIUtils.linkifyTopCallFrame(event, target, linkifier, isFreshOrEnhanced);
+      const maxLength = this.treeView.maxLinkLength;
+      this.linkElement = TimelineUIUtils.linkifyTopCallFrame(event, target, linkifier, isFreshOrEnhanced, maxLength);
       if (this.linkElement) {
         container.createChild('div', 'activity-link').appendChild(this.linkElement);
       }
@@ -841,7 +938,7 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
     switch (columnId) {
       case 'start-time': {
         event = this.profileNode.event;
-        const parsedTrace = this.treeView.parsedTrace();
+        const parsedTrace = this.treeView.parsedTrace;
         if (!parsedTrace) {
           throw new Error('Unable to load trace data for tree view');
         }
@@ -957,8 +1054,8 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
   protected readonly groupBySetting: Common.Settings.Setting<AggregatedTimelineTreeView.GroupBy>;
   readonly stackView: TimelineStackView;
 
-  constructor() {
-    super();
+  constructor(element?: HTMLElement) {
+    super(element);
     this.groupBySetting = Common.Settings.Settings.instance().createSetting(
         'timeline-tree-group-by', AggregatedTimelineTreeView.GroupBy.None);
     this.groupBySetting.addChangeListener(() => this.refreshTree());
@@ -1038,7 +1135,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
         break;
 
       case AggregatedTimelineTreeView.GroupBy.Frame: {
-        const frame = id ? this.parsedTrace()?.data.PageFrames.frames.get(id) : undefined;
+        const frame = id ? this.parsedTrace?.data.PageFrames.frames.get(id) : undefined;
         const frameName = frame ? TimelineUIUtils.displayNameForFrame(frame) : i18nString(UIStrings.page);
         return {name: frameName, color};
       }
@@ -1067,10 +1164,12 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     ];
     toolbar.appendToolbarItem(
         new UI.Toolbar.ToolbarSettingComboBox(options, this.groupBySetting, i18nString(UIStrings.groupBy)));
-    toolbar.appendSpacer();
-    toolbar.appendToolbarItem(this.splitWidget.createShowHideSidebarButton(
-        i18nString(UIStrings.showHeaviestStack), i18nString(UIStrings.hideHeaviestStack),
-        i18nString(UIStrings.heaviestStackShown), i18nString(UIStrings.heaviestStackHidden)));
+    if (!this.compactMode && this.splitWidget) {
+      toolbar.appendSpacer();
+      toolbar.appendToolbarItem(this.splitWidget.createShowHideSidebarButton(
+          i18nString(UIStrings.showHeaviestStack), i18nString(UIStrings.hideHeaviestStack),
+          i18nString(UIStrings.heaviestStackShown), i18nString(UIStrings.heaviestStackHidden)));
+    }
   }
 
   private buildHeaviestStack(treeNode: Trace.Extras.TraceTree.Node): Trace.Extras.TraceTree.Node[] {
@@ -1123,13 +1222,13 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
         return this.domainByEvent.bind(this, groupBy);
       case GroupBy.URL:
         return (event: Trace.Types.Events.Event) => {
-          const parsedTrace = this.parsedTrace();
+          const parsedTrace = this.parsedTrace;
           return parsedTrace ? Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace.data) ?? '' : '';
         };
       case GroupBy.Frame:
         return (event: Trace.Types.Events.Event) => {
           const frameId = Trace.Helpers.Trace.frameIDForEvent(event);
-          return frameId || this.parsedTrace()?.data.Meta.mainFrameId || '';
+          return frameId || this.parsedTrace?.data.Meta.mainFrameId || '';
         };
       default:
         console.assert(false, `Unexpected aggregation setting: ${groupBy}`);
@@ -1141,7 +1240,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
   // The eventid == the identity of a node that we expect in a bottomUp tree (either without grouping or with the groupBy grouping)
   // A "top node" (in `ungroupedTopNodes`) is aggregated by this. (But so are all the other nodes, except the `GroupNode`s)
   private domainByEvent(groupBy: AggregatedTimelineTreeView.GroupBy, event: Trace.Types.Events.Event): string {
-    const parsedTrace = this.parsedTrace();
+    const parsedTrace = this.parsedTrace;
     if (!parsedTrace) {
       return '';
     }
@@ -1254,8 +1353,8 @@ export namespace AggregatedTimelineTreeView {
 }
 
 export class CallTreeTimelineTreeView extends AggregatedTimelineTreeView {
-  constructor() {
-    super();
+  constructor(element?: HTMLElement) {
+    super(element);
     this.element.setAttribute('jslog', `${VisualLogging.pane('call-tree').track({resize: true})}`);
     this.dataGrid.markColumnAsSortedBy('total', DataGrid.DataGrid.Order.Descending);
   }
@@ -1267,14 +1366,14 @@ export class CallTreeTimelineTreeView extends AggregatedTimelineTreeView {
 }
 
 export class BottomUpTimelineTreeView extends AggregatedTimelineTreeView {
-  constructor() {
-    super();
+  constructor(element?: HTMLElement) {
+    super(element);
     this.element.setAttribute('jslog', `${VisualLogging.pane('bottom-up').track({resize: true})}`);
     this.dataGrid.markColumnAsSortedBy('self', DataGrid.DataGrid.Order.Descending);
   }
 
   override buildTree(): Trace.Extras.TraceTree.Node {
-    return new Trace.Extras.TraceTree.BottomUpRootNode(this.selectedEvents(), {
+    return new Trace.Extras.TraceTree.BottomUpRootNode(this.selectedEvents, {
       textFilter: this.textFilter(),
       filters: this.filtersWithoutTextFilter(),
       startTime: this.startTime,

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -785,7 +785,7 @@ export class TimelineUIUtils {
 
   static linkifyTopCallFrame(
       event: Trace.Types.Events.Event, target: SDK.Target.Target|null, linkifier: LegacyComponents.Linkifier.Linkifier,
-      isFreshOrEnhanced = false): Element|null {
+      isFreshOrEnhanced = false, maxLength?: number): Element|null {
     let frame = Trace.Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event)?.[0];
     if (Trace.Types.Events.isProfileCall(event)) {
       frame = event.callFrame;
@@ -800,6 +800,7 @@ export class TimelineUIUtils {
       showColumnNumber: true,
       columnNumber: frame.columnNumber,
       lineNumber: frame.lineNumber,
+      maxLength,
     };
     if (isFreshOrEnhanced) {
       return linkifier.maybeLinkifyConsoleCallFrame(target, frame, {showColumnNumber: true, inlineFrameIndex: 0});

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

@@ -121,6 +121,7 @@ interface MetricsViewInput {
   didDismissFieldMismatchNotice: boolean;
   onDismisFieldMismatchNotice: () => void;
   onClickMetric: (traceEvent: Trace.Types.Events.Event) => void;
+  skipBottomBorder: boolean;
 }
 
 type MetricsView = (input: MetricsViewInput, output: undefined, target: HTMLElement) => void;
@@ -210,7 +211,7 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
       <span>${clsEl}</span>
       <span class="row-label">Local</span>
     </div>
-    <span class="row-border"></span>
+    ${!field && input.skipBottomBorder ? Lit.nothing : html`<span class="row-border"></span>`}
   `;
 
   let fieldMetricsTemplateResult;
@@ -234,7 +235,7 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
         <span>${clsEl}</span>
         <span class="row-label">${i18nString(UIStrings.fieldScoreLabel, {PH1: scope})}</span>
       </div>
-      <span class="row-border"></span>
+      ${input.skipBottomBorder ? Lit.nothing : html`<span class="row-border"></span>`}
     `;
     // clang-format on
   }
@@ -293,6 +294,8 @@ export class CWVMetrics extends UI.Widget.Widget {
 
   #didDismissFieldMismatchNotice = false;
 
+  #skipBottomBorder = false;
+
   constructor(element?: HTMLElement, view: MetricsView = CWV_METRICS_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
@@ -303,6 +306,18 @@ export class CWVMetrics extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  get skipBottomBorder(): boolean {
+    return this.#skipBottomBorder;
+  }
+
+  set skipBottomBorder(x: boolean) {
+    if (x === this.#skipBottomBorder) {
+      return;
+    }
+    this.#skipBottomBorder = x;
+    this.requestUpdate();
+  }
+
   #onClickMetric(traceEvent: Trace.Types.Events.Event): void {
     this.element.dispatchEvent(new Insights.EventRef.EventReferenceClick(traceEvent));
   }
@@ -333,6 +348,7 @@ export class CWVMetrics extends UI.Widget.Widget {
       didDismissFieldMismatchNotice: this.#didDismissFieldMismatchNotice,
       onDismisFieldMismatchNotice: this.#onDismisFieldMismatchNotice.bind(this),
       onClickMetric: this.#onClickMetric.bind(this),
+      skipBottomBorder: this.#skipBottomBorder,
     };
     this.#view(input, undefined, this.contentElement);
   }

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

@@ -401,3 +401,14 @@ Common.Revealer.registerRevealer({
     return new Timeline.TimelinePanel.TimeRangeRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return maybeRetrieveContextTypes(Timeline => [Timeline.Utils.Helpers.RevealableBottomUpProfile]);
+  },
+  destination: Common.Revealer.RevealerDestination.TIMELINE_PANEL,
+  async loadRevealer() {
+    const Timeline = await loadTimelineModule();
+    return new Timeline.TimelinePanel.BottomUpProfileRevealer();
+  },
+});

package/front_end/panels/timeline/utils/Helpers.ts

@@ -136,3 +136,8 @@ export class RevealableTimeRange {
   constructor(public bounds: Trace.Types.Timing.TraceWindowMicro) {
   }
 }
+
+export class RevealableBottomUpProfile {
+  constructor(public bounds: Trace.Types.Timing.TraceWindowMicro) {
+  }
+}

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: c9e49d7cdbbc11a6a70bb2573f5a18cb23c1789b
+Revision: ed66cb5e93e6205f5231c1dcfac9b91b2aa4ffd6
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/markdown_view/CodeBlock.ts

@@ -34,6 +34,11 @@ const UIStrings = {
    * @description Disclaimer shown in the code blocks.
    */
   disclaimer: 'Use code snippets with caution',
+  /**
+   * @description The title of the button to show all lines of a code block.
+   * @example {5} PH1
+   */
+  showAllLines: 'Show all lines ({PH1} more)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/components/markdown_view/CodeBlock.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -130,6 +135,7 @@ export class CodeBlock extends HTMLElement {
   #copied = false;
   #editorState?: CodeMirror.EditorState;
   #languageConf = new CodeMirror.Compartment();
+  #truncationConf = new CodeMirror.Compartment();
   /**
    * Whether to display a notice "​​Use code snippets with caution" in code
    * blocks.
@@ -138,6 +144,7 @@ export class CodeBlock extends HTMLElement {
   #header?: string;
   #showCopyButton = true;
   #citations: Citation[] = [];
+  #displayLimit = Number.MAX_VALUE;
 
   connectedCallback(): void {
     void this.#render();
@@ -152,6 +159,7 @@ export class CodeBlock extends HTMLElement {
         CodeMirror.EditorState.readOnly.of(true),
         CodeMirror.EditorView.lineWrapping,
         this.#languageConf.of(CodeMirror.javascript.javascript()),
+        this.#truncationConf.of([]),
       ],
     });
     void this.#render();
@@ -190,6 +198,15 @@ export class CodeBlock extends HTMLElement {
     this.#citations = citations;
   }
 
+  set displayLimit(value: number) {
+    this.#displayLimit = value;
+    void this.#render();
+  }
+
+  get displayLimit(): number {
+    return this.#displayLimit;
+  }
+
   #onCopy(): void {
     UI.UIUtils.copyTextToClipboard(this.#code, i18nString(UIStrings.copied));
     this.#copied = true;
@@ -256,6 +273,9 @@ export class CodeBlock extends HTMLElement {
       throw new Error('Unexpected: trying to render the text editor without editorState');
     }
 
+    const linesCount = this.#editorState.doc.lines;
+    const isTruncated = linesCount > this.#displayLimit;
+
     // clang-format off
     Lit.render(
       html`<div class='codeblock' jslog=${VisualLogging.section('code')}>
@@ -271,6 +291,19 @@ export class CodeBlock extends HTMLElement {
         <div class="code">
           <devtools-text-editor .state=${this.#editorState}></devtools-text-editor>
         </div>
+        ${isTruncated ? html`
+          <div class="show-all-container">
+            <devtools-button
+              .variant=${Buttons.Button.Variant.OUTLINED}
+              .size=${Buttons.Button.Size.SMALL}
+              .jslogContext=${'show-all'}
+              .title=${i18nString(UIStrings.showAllLines, { PH1: linesCount - this.#displayLimit })}
+              @click=${() => {
+              this.displayLimit = Number.MAX_VALUE;
+            }}
+            >${i18nString(UIStrings.showAllLines, { PH1: linesCount - this.#displayLimit })}</devtools-button>
+          </div>
+        ` : Lit.nothing}
       </div>
       ${this.#displayNotice ? this.#renderNotice() : Lit.nothing}
     </div>`,
@@ -288,8 +321,21 @@ export class CodeBlock extends HTMLElement {
     }
 
     const language = await languageFromToken(this.#codeLang);
+    let truncationExtension: CodeMirror.Extension = [];
+    if (isTruncated) {
+      truncationExtension = CodeMirror.EditorView.decorations.of(CodeMirror.Decoration.set(
+          CodeMirror.Decoration.replace({}).range(
+              this.#editorState.doc.line(this.#displayLimit).to,
+              this.#editorState.doc.length,
+              ),
+          ));
+    }
+
     editor.dispatch({
-      effects: this.#languageConf.reconfigure(language),
+      effects: [
+        this.#languageConf.reconfigure(language),
+        this.#truncationConf.reconfigure(truncationExtension),
+      ],
     });
   }
 }

package/front_end/ui/components/markdown_view/codeBlock.css

@@ -108,3 +108,11 @@
     text-decoration-line: underline;
   }
 }
+
+.show-all-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--sys-size-4) 0;
+  background-color: var(--code-block-background-color); /* stylelint-disable-line plugin/use_theme_colors */
+}

package/front_end/ui/legacy/FilterBar.ts

@@ -21,6 +21,8 @@ import {Tooltip} from './Tooltip.js';
 import {bindCheckbox, CheckboxLabel, createTextChild} from './UIUtils.js';
 import {HBox} from './Widget.js';
 
+export {filterStyles};
+
 const UIStrings = {
   /**
    * @description Text to filter result items