chrome-devtools-frontend 1.0.1522145 → 1.0.1524741

package/front_end/panels/settings/emulation/utils/StructuredHeaders.ts

@@ -65,8 +65,10 @@ export interface Boolean {
   value: boolean;
 }
 
-//  bare-item = sf-integer / sf-decimal / sf-string / sf-token
-//              / sf-binary / sf-boolean
+/**
+ * bare-item = sf-integer / sf-decimal / sf-string / sf-token
+ * / sf-binary / sf-boolean
+ **/
 export type BareItem = Integer|Decimal|String|Token|Binary|Boolean;
 
 export interface ParamName {
@@ -74,39 +76,43 @@ export interface ParamName {
   value: string;
 }
 
-// parameter     = param-name [ "=" param-value ]
-// param-value   = bare-item
+/**
+ * parameter     = param-name [ "=" param-value ]
+ * param-value   = bare-item
+ **/
 export interface Parameter {
   kind: ResultKind.PARAMETER;
   name: ParamName;
   value: BareItem;
 }
 
-// parameters  = *( ";" *SP parameter )
+/** parameters  = *( ";" *SP parameter ) **/
 export interface Parameters {
   kind: ResultKind.PARAMETERS;
   items: Parameter[];
 }
 
-// sf-item   = bare-item parameters
+/** sf-item   = bare-item parameters **/
 export interface Item {
   kind: ResultKind.ITEM;
   value: BareItem;
   parameters: Parameters;
 }
 
-// inner-list    = "(" *SP [ sf-item *( 1*SP sf-item ) *SP ] ")"
-//                   parameters
+/**
+ * inner-list    = "(" *SP [ sf-item *( 1*SP sf-item ) *SP ] ")"
+ * parameters
+ **/
 export interface InnerList {
   kind: ResultKind.INNER_LIST;
   items: Item[];
   parameters: Parameters;
 }
 
-// list-member = sf-item / inner-list
+/** list-member = sf-item / inner-list **/
 export type ListMember = Item|InnerList;
 
-// sf-list = list-member *( OWS "," OWS list-member )
+/** sf-list = list-member *( OWS "," OWS list-member ) **/
 export interface List {
   kind: ResultKind.LIST;
   items: ListMember[];
@@ -149,9 +155,11 @@ const CHAR_TILDE: number = '~'.charCodeAt(0);
 const CHAR_MIN_ASCII_PRINTABLE = 0x20;
 const CHAR_MAX_ASCII_PRINTABLE = 0x7e;
 
-// Note: structured headers operates over ASCII, not unicode, so these are
-// all indeed supposed to return false on things outside 32-127 range regardless
-// of them being other kinds of digits or letters.
+/**
+ * Note: structured headers operates over ASCII, not unicode, so these are
+ * all indeed supposed to return false on things outside 32-127 range regardless
+ * of them being other kinds of digits or letters.
+ **/
 function isDigit(charCode: number|undefined): boolean {
   // DIGIT = %x30-39 ; 0-9 (from RFC 5234)
   if (charCode === undefined) {
@@ -262,7 +270,7 @@ function makeError(): Error {
   return {kind: ResultKind.ERROR};
 }
 
-// 4.2.1. Parsing a list
+/** 4.2.1. Parsing a list **/
 function parseListInternal(input: Input): List|Error {
   const result: List = {kind: ResultKind.LIST, items: []};
 
@@ -291,7 +299,7 @@ function parseListInternal(input: Input): List|Error {
   return result;  // this case corresponds to an empty list.
 }
 
-// 4.2.1.1.  Parsing an Item or Inner List
+/** 4.2.1.1.  Parsing an Item or Inner List **/
 function parseItemOrInnerList(input: Input): ListMember|Error {
   if (input.peek() === '(') {
     return parseInnerList(input);
@@ -299,7 +307,7 @@ function parseItemOrInnerList(input: Input): ListMember|Error {
   return parseItemInternal(input);
 }
 
-// 4.2.1.2.  Parsing an Inner List
+/** 4.2.1.2.  Parsing an Inner List **/
 function parseInnerList(input: Input): InnerList|Error {
   if (input.peek() !== '(') {
     return makeError();
@@ -335,7 +343,7 @@ function parseInnerList(input: Input): InnerList|Error {
   return makeError();
 }
 
-// 4.2.3.  Parsing an Item
+/** 4.2.3.  Parsing an Item **/
 function parseItemInternal(input: Input): Item|Error {
   const bareItem: BareItem|Error = parseBareItem(input);
   if (bareItem.kind === ResultKind.ERROR) {
@@ -348,7 +356,7 @@ function parseItemInternal(input: Input): Item|Error {
   return {kind: ResultKind.ITEM, value: bareItem, parameters: params};
 }
 
-// 4.2.3.1.  Parsing a Bare Item
+/** 4.2.3.1.  Parsing a Bare Item **/
 function parseBareItem(input: Input): BareItem|Error {
   const upcoming = input.peekCharCode();
   if (upcoming === CHAR_MINUS || isDigit(upcoming)) {
@@ -369,7 +377,7 @@ function parseBareItem(input: Input): BareItem|Error {
   return makeError();
 }
 
-// 4.2.3.2.  Parsing Parameters
+/** 4.2.3.2.  Parsing Parameters **/
 function parseParameters(input: Input): Parameters|Error {
   // The main noteworthy thing here is handling of duplicates and ordering:
   //
@@ -413,7 +421,7 @@ function parseParameters(input: Input): Parameters|Error {
   return {kind: ResultKind.PARAMETERS, items: [...items.values()]};
 }
 
-// 4.2.3.3.  Parsing a Key
+/** 4.2.3.3.  Parsing a Key **/
 function parseKey(input: Input): ParamName|Error {
   let outputString = '';
   const first = input.peekCharCode();
@@ -434,7 +442,7 @@ function parseKey(input: Input): ParamName|Error {
   return {kind: ResultKind.PARAM_NAME, value: outputString};
 }
 
-// 4.2.4.  Parsing an Integer or Decimal
+/** 4.2.4.  Parsing an Integer or Decimal **/
 function parseIntegerOrDecimal(input: Input): Integer|Decimal|Error {
   let resultKind = ResultKind.INTEGER;
   let sign = 1;
@@ -486,7 +494,7 @@ function parseIntegerOrDecimal(input: Input): Integer|Decimal|Error {
   return {kind: ResultKind.DECIMAL, value: sign * Number.parseFloat(inputNumber)};
 }
 
-// 4.2.5.  Parsing a String
+/** 4.2.5.  Parsing a String **/
 function parseString(input: Input): String|Error {
   let outputString = '';
   if (input.peek() !== '"') {
@@ -524,7 +532,7 @@ function parseString(input: Input): String|Error {
   return makeError();
 }
 
-// 4.2.6.  Parsing a Token
+/** 4.2.6.  Parsing a Token **/
 function parseToken(input: Input): Token|Error {
   const first = input.peekCharCode();
   if (first !== CHAR_STAR && !isAlpha(first)) {
@@ -542,7 +550,7 @@ function parseToken(input: Input): Token|Error {
   return {kind: ResultKind.TOKEN, value: outputString};
 }
 
-// 4.2.7.  Parsing a Byte Sequence
+/** 4.2.7.  Parsing a Byte Sequence **/
 function parseByteSequence(input: Input): Binary|Error {
   let outputString = '';
   if (input.peek() !== ':') {
@@ -571,7 +579,7 @@ function parseByteSequence(input: Input): Binary|Error {
   return makeError();
 }
 
-// 4.2.8.  Parsing a Boolean
+/** 4.2.8.  Parsing a Boolean **/
 function parseBoolean(input: Input): Boolean|Error {
   if (input.peek() !== '?') {
     return makeError();
@@ -602,7 +610,7 @@ export function parseList(input: string): List|Error {
   return parseListInternal(new Input(input));
 }
 
-// 4.1.3.  Serializing an Item
+/** 4.1.3.  Serializing an Item **/
 export function serializeItem(input: Item): SerializationResult|Error {
   const bareItemVal = serializeBareItem(input.value);
   if (bareItemVal.kind === ResultKind.ERROR) {
@@ -615,7 +623,7 @@ export function serializeItem(input: Item): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: bareItemVal.value + paramVal.value};
 }
 
-// 4.1.1.  Serializing a List
+/** 4.1.1.  Serializing a List **/
 export function serializeList(input: List): SerializationResult|Error {
   const outputPieces: string[] = [];
   for (let i = 0; i < input.items.length; ++i) {
@@ -638,7 +646,7 @@ export function serializeList(input: List): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: output};
 }
 
-// 4.1.1.1.  Serializing an Inner List
+/** 4.1.1.1.  Serializing an Inner List **/
 function serializeInnerList(input: InnerList): SerializationResult|Error {
   const outputPieces: string[] = [];
   for (let i = 0; i < input.items.length; ++i) {
@@ -657,7 +665,7 @@ function serializeInnerList(input: InnerList): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: output};
 }
 
-// 4.1.1.2.  Serializing Parameters
+/** 4.1.1.2.  Serializing Parameters **/
 function serializeParameters(input: Parameters): SerializationResult|Error {
   let output = '';
   for (const item of input.items) {
@@ -680,7 +688,7 @@ function serializeParameters(input: Parameters): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: output};
 }
 
-// 4.1.1.3.  Serializing a Key
+/** 4.1.1.3.  Serializing a Key **/
 function serializeKey(input: ParamName): SerializationResult|Error {
   if (input.value.length === 0) {
     return makeError();
@@ -701,7 +709,7 @@ function serializeKey(input: ParamName): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: input.value};
 }
 
-// 4.1.3.1.  Serializing a Bare Item
+/** 4.1.3.1.  Serializing a Bare Item **/
 function serializeBareItem(input: BareItem): SerializationResult|Error {
   if (input.kind === ResultKind.INTEGER) {
     return serializeInteger(input);
@@ -724,7 +732,7 @@ function serializeBareItem(input: BareItem): SerializationResult|Error {
   return makeError();
 }
 
-// 4.1.4.  Serializing an Integer
+/** 4.1.4.  Serializing an Integer **/
 function serializeInteger(input: Integer): SerializationResult|Error {
   if (input.value < -999999999999999 || input.value > 999999999999999 || !Number.isInteger(input.value)) {
     return makeError();
@@ -732,12 +740,12 @@ function serializeInteger(input: Integer): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: input.value.toString(10)};
 }
 
-// 4.1.5.  Serializing a Decimal
+/** 4.1.5.  Serializing a Decimal **/
 function serializeDecimal(_input: Decimal): SerializationResult|Error {
   throw new Error('Unimplemented');
 }
 
-// 4.1.6.  Serializing a String
+/** 4.1.6.  Serializing a String **/
 function serializeString(input: String): SerializationResult|Error {
   // Only printable ASCII strings are supported by the spec.
   for (let i = 0; i < input.value.length; ++i) {
@@ -759,7 +767,7 @@ function serializeString(input: String): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: output};
 }
 
-// 4.1.7.  Serializing a Token
+/** 4.1.7.  Serializing a Token **/
 function serializeToken(input: Token): SerializationResult|Error {
   if (input.value.length === 0) {
     return makeError();
@@ -779,12 +787,12 @@ function serializeToken(input: Token): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: input.value};
 }
 
-// 4.1.8.  Serializing a Byte Sequence
+/** 4.1.8.  Serializing a Byte Sequence **/
 function serializeByteSequence(_input: Binary): SerializationResult|Error {
   throw new Error('Unimplemented');
 }
 
-// 4.1.9.  Serializing a Boolean
+/** 4.1.9.  Serializing a Boolean **/
 function serializeBoolean(input: Boolean): SerializationResult|Error {
   return {kind: ResultKind.SERIALIZATION_RESULT, value: input.value ? '?1' : '?0'};
 }

package/front_end/panels/sources/BreakpointsViewUtils.ts

@@ -234,15 +234,17 @@ function findDifferentiatingPath(url: string[], allUrls: string[][], startIndex:
   return differentiatingPath;
 }
 
-// This function tries to find a subpath (if available) that we can use to differentiate
-// urls that have the same file name.
-// It does so by 1. removing common suffixes, 2. taking segments of the path (from right to left) until the path is
-// unique.
-//
-// Example:
-//
-//     Paths:  'http://www.google.com/src/a/index.js', 'http://www.google.com/src2/a/index.js'
-//     Output: 'src/…/', 'src2/…/'
+/**
+ * This function tries to find a subpath (if available) that we can use to differentiate
+ * urls that have the same file name.
+ * It does so by 1. removing common suffixes, 2. taking segments of the path (from right to left) until the path is
+ * unique.
+ *
+ * Example:
+ *
+ * Paths:  'http://www.google.com/src/a/index.js', 'http://www.google.com/src2/a/index.js'
+ * Output: 'src/…/', 'src2/…/'
+ **/
 function populateDifferentiatingPathMap(
     urls: Platform.DevToolsPath.UrlString[], urlToDifferentiator: Map<Platform.DevToolsPath.UrlString, string>): void {
   const splitReversedUrls = urls.map(url => {

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -1765,8 +1765,10 @@ export class BreakpointLocationRevealer implements
   }
 }
 
-// Enumerate non-breakable lines (lines without a known corresponding
-// position in the UISource).
+/**
+ * Enumerate non-breakable lines (lines without a known corresponding
+ * position in the UISource).
+ **/
 async function computeNonBreakableLines(
     state: CodeMirror.EditorState, transformer: SourceFrame.SourceFrame.Transformer,
     sourceCode: Workspace.UISourceCode.UISourceCode): Promise<readonly number[]> {
@@ -2043,8 +2045,10 @@ export function getVariableNamesByLine(
   toPos = editorState.doc.lineAt(toPos).from;
   const tree = CodeMirror.syntaxTree(editorState);
 
-  // Sibling scope is a scope that does not contain the current position.
-  // We will exclude variables that are defined (and used in those scopes (since we are currently outside of their lifetime).
+  /**
+   * Sibling scope is a scope that does not contain the current position.
+   * We will exclude variables that are defined (and used in those scopes (since we are currently outside of their lifetime).
+   **/
   function isSiblingScopeNode(node: {name: string, from: number, to: number}): boolean {
     return isScopeNode(node.name) && (node.to < currentPos || currentPos < node.from);
   }

package/front_end/panels/sources/SourcesPanel.ts

@@ -632,7 +632,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
   private addExperimentMenuItem(
       menuSection: UI.ContextMenu.Section, experiment: string, menuItem: Common.UIString.LocalizedString): void {
-    // menu handler
+    /** menu handler **/
     function toggleExperiment(): void {
       const checked = Root.Runtime.experiments.isEnabled(experiment);
       Root.Runtime.experiments.setEnabled(experiment, !checked);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -663,7 +663,7 @@ const setRowMessages = CodeMirror.StateEffect.define<RowMessages>();
 
 const underlineMark = CodeMirror.Decoration.mark({class: 'cm-waveUnderline'});
 
-// The widget shown at the end of a message annotation.
+/** The widget shown at the end of a message annotation. **/
 class MessageWidget extends CodeMirror.WidgetType {
   constructor(readonly messages: RowMessage[]) {
     super();

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -150,8 +150,10 @@ export const TrackNames = [
   'Extension',
   'ServerTimings',
 ] as const;
-// Network track will use TrackAppender interface, but it won't be shown in Main flamechart.
-// So manually add it to TrackAppenderName.
+/**
+ * Network track will use TrackAppender interface, but it won't be shown in Main flamechart.
+ * So manually add it to TrackAppenderName.
+ **/
 export type TrackAppenderName = typeof TrackNames[number]|'Network';
 
 export type DrawOverride = PerfUI.FlameChart.DrawOverride;

package/front_end/panels/timeline/CountersGraph.ts

@@ -71,9 +71,14 @@ export class CountersGraph extends UI.Widget.VBox {
 
   #noEventsFoundMessage = document.createElement('div');
   #showNoEventsMessage = false;
+  #defaultNumberFormatter: Intl.NumberFormat;
 
   constructor(delegate: TimelineModeViewDelegate) {
     super();
+    this.#defaultNumberFormatter = new Intl.NumberFormat(
+        i18n.DevToolsLocale.DevToolsLocale.instance().locale,
+    );
+
     this.element.id = 'memory-graphs-container';
 
     this.delegate = delegate;
@@ -180,6 +185,7 @@ export class CountersGraph extends UI.Widget.VBox {
       }
     }
     this.#showNoEventsMessage = counterEventsFound === 0;
+    this.requestUpdate();
   }
 
   private createCurrentValuesBar(): void {
@@ -192,7 +198,8 @@ export class CountersGraph extends UI.Widget.VBox {
       formatter?: ((arg0: number) => string)): Counter {
     const counter = new Counter();
     this.counters.push(counter);
-    this.counterUI.push(new CounterUI(this, uiName, settingsKey, color, counter, formatter));
+    this.counterUI.push(
+        new CounterUI(this, uiName, settingsKey, color, counter, formatter ?? this.#defaultNumberFormatter.format));
     return counter;
   }
 
@@ -388,7 +395,7 @@ export class Counter {
 export class CounterUI {
   private readonly countersPane: CountersGraph;
   counter: Counter;
-  private readonly formatter: (arg0: number) => string;
+  readonly formatter: (arg0: number) => string;
   private readonly setting: Common.Settings.Setting<boolean>;
   private readonly filter: UI.Toolbar.ToolbarSettingCheckbox;
   private readonly value: HTMLElement;
@@ -401,10 +408,10 @@ export class CounterUI {
 
   constructor(
       countersPane: CountersGraph, title: Common.UIString.LocalizedString, settingsKey: string, graphColor: string,
-      counter: Counter, formatter?: (arg0: number) => string) {
+      counter: Counter, formatter: (arg0: number) => string) {
     this.countersPane = countersPane;
     this.counter = counter;
-    this.formatter = formatter || Platform.NumberUtilities.withThousandsSeparator;
+    this.formatter = formatter;
 
     this.setting = Common.Settings.Settings.instance().createSetting('timeline-counters-graph-' + settingsKey, true);
     this.setting.setTitle(title);
@@ -474,7 +481,7 @@ export class CounterUI {
       return;
     }
     const index = this.recordIndexAt(x);
-    const value = Platform.NumberUtilities.withThousandsSeparator(this.counter.values[index]);
+    const value = this.formatter(this.counter.values[index]);
     this.value.textContent = `${this.counterName}: ${value}`;
     const y = this.graphYValues[index] / window.devicePixelRatio;
     this.marker.style.left = x + 'px';

package/front_end/panels/timeline/EasterEgg.d.ts

@@ -1,4 +1,6 @@
-// Copyright 2024 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
+/**
+ * Copyright 2024 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ **/
 export const SHOULD_SHOW_EASTER_EGG: boolean;

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -40,12 +40,14 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/LayoutShiftsTrackAppender.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// Bit of a hack: LayoutShifts are instant events, so have no duration. But
-// OPP doesn't do well at making tiny events easy to spot and click. So we
-// set it to a small duration so that the user is able to see and click
-// them more easily. Long term we will explore a better UI solution to
-// allow us to do this properly and not hack around it.
-// TODO: Delete this once the new Layout Shift UI ships out of the TIMELINE_LAYOUT_SHIFT_DETAILS experiment
+/**
+ * Bit of a hack: LayoutShifts are instant events, so have no duration. But
+ * OPP doesn't do well at making tiny events easy to spot and click. So we
+ * set it to a small duration so that the user is able to see and click
+ * them more easily. Long term we will explore a better UI solution to
+ * allow us to do this properly and not hack around it.
+ * TODO: Delete this once the new Layout Shift UI ships out of the TIMELINE_LAYOUT_SHIFT_DETAILS experiment
+ **/
 export const LAYOUT_SHIFT_SYNTHETIC_DURATION = Trace.Types.Timing.Micro(5_000);
 
 export class LayoutShiftsTrackAppender implements TrackAppender {

package/front_end/panels/timeline/ModificationsManager.ts

@@ -16,9 +16,11 @@ let activeManager: ModificationsManager|null;
 export type UpdateAction =
     'Remove'|'Add'|'UpdateLabel'|'UpdateTimeRange'|'UpdateLinkToEntry'|'EnterLabelEditState'|'LabelBringForward';
 
-// Event dispatched after an annotation was added, removed or updated.
-// The event argument is the Overlay that needs to be created,removed
-// or updated by `Overlays.ts` and the action that needs to be applied to it.
+/**
+ * Event dispatched after an annotation was added, removed or updated.
+ * The event argument is the Overlay that needs to be created,removed
+ * or updated by `Overlays.ts` and the action that needs to be applied to it.
+ **/
 export class AnnotationModifiedEvent extends Event {
   static readonly eventName = 'annotationmodifiedevent';
 

package/front_end/panels/timeline/ThreadAppender.ts

@@ -135,11 +135,13 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ThreadAppender.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// This appender is only triggered when the Renderer handler is run. At
-// the moment this only happens in the basic component server example.
-// In the future, once this appender fully supports the behaviour of the
-// old engine's thread/sync tracks we can always run it by enabling the
-// Renderer and Samples handler by default.
+/**
+ * This appender is only triggered when the Renderer handler is run. At
+ * the moment this only happens in the basic component server example.
+ * In the future, once this appender fully supports the behaviour of the
+ * old engine's thread/sync tracks we can always run it by enabling the
+ * Renderer and Samples handler by default.
+ **/
 export class ThreadAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'Thread';
 

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -1111,7 +1111,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     context.fillRect(barX, barY - 0.5, desiredBoxStartX - barX, barHeight);
     context.fillRect(desiredBoxEndX, barY - 0.5, entireBarEndXPixel - desiredBoxEndX, barHeight);
 
-    // Draws left and right whiskers
+    /** Draws left and right whiskers **/
     function drawTick(begin: number, end: number, y: number): void {
       const tickHeightPx = 6;
       context.moveTo(begin, y - tickHeightPx / 2);
@@ -1398,13 +1398,15 @@ export interface EventTypes {
   };
 }
 
-// an entry is a trace event, they are classified into "entry types"
-// because some events are rendered differently. For example, screenshot
-// events are rendered as images. Checks for entry types allow to have
-// different styles, names, etc. for events that look differently.
-// In the future we won't have this checks: instead we will forward
-// the event to the corresponding "track appender" and it will determine
-// how the event shall be rendered.
+/**
+ * an entry is a trace event, they are classified into "entry types"
+ * because some events are rendered differently. For example, screenshot
+ * events are rendered as images. Checks for entry types allow to have
+ * different styles, names, etc. for events that look differently.
+ * In the future we won't have this checks: instead we will forward
+ * the event to the corresponding "track appender" and it will determine
+ * how the event shall be rendered.
+ **/
 export const enum EntryType {
   FRAME = 'Frame',
   TRACK_APPENDER = 'TrackAppender',

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -307,7 +307,7 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
     context.fillRect(barX, barY - 0.5, sendStart - barX, barHeight);
     context.fillRect(finish, barY - 0.5, barX + barWidth - finish, barHeight);
 
-    // Draws left and right whiskers
+    /** Draws left and right whiskers **/
     function drawTick(begin: number, end: number, y: number): void {
       const /** @constant */ tickHeightPx = 6;
       context.moveTo(begin, y - tickHeightPx / 2);

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1430,6 +1430,23 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
+  zoomEvent(event: Trace.Types.Events.Event): void {
+    const traceBounds = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.entireTraceBounds;
+    if (!traceBounds) {
+      return;
+    }
+
+    this.#expandEntryTrack(event);
+    this.revealEventVertically(event);
+    const entryWindow = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+        event.ts,
+        Trace.Types.Timing.Micro(event.ts + (event.dur ?? 0)),
+    );
+    const expandedBounds = Trace.Helpers.Timing.expandWindowByPercentOrToOneMillisecond(entryWindow, traceBounds, 100);
+    TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
+        expandedBounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+  }
+
   revealEvent(event: Trace.Types.Events.Event): void {
     const mainIndex = this.mainDataProvider.indexForEvent(event);
     const networkIndex = this.networkDataProvider.indexForEvent(event);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -660,6 +660,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     );
   }
 
+  zoomEvent(event: Trace.Types.Events.Event): void {
+    this.flameChart.zoomEvent(event);
+  }
+
   /**
    * Activates an insight and ensures the sidebar is open too.
    * Pass `highlightInsight: true` to flash the insight with the background highlight colour.
@@ -1806,11 +1810,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         return;
       }
 
-      // To clear out the page and any state from prior test runs, we
-      // navigate to about:blank before initiating the trace recording.
-      // Once we have navigated to about:blank, we start recording and
-      // then navigate to the original page URL, to ensure we profile the
-      // page load.
+      /**
+       * To clear out the page and any state from prior test runs, we
+       * navigate to about:blank before initiating the trace recording.
+       * Once we have navigated to about:blank, we start recording and
+       * then navigate to the original page URL, to ensure we profile the
+       * page load.
+       **/
       function waitForAboutBlank(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>):
           void {
         if (event.data.url === 'about:blank') {
@@ -2020,14 +2026,14 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.toggleRecordAction.setToggled(this.state === State.RECORDING);
     this.toggleRecordAction.setEnabled(this.state === State.RECORDING || this.state === State.IDLE);
     this.askAiButton?.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
+    this.panelToolbar.setEnabled(this.state !== State.LOADING);
+    this.panelRightToolbar.setEnabled(this.state !== State.LOADING);
 
     if (!this.canRecord()) {
       return;
     }
 
     this.recordReloadAction.setEnabled(isNode ? false : this.state === State.IDLE);
-    this.panelToolbar.setEnabled(this.state !== State.LOADING);
-    this.panelRightToolbar.setEnabled(this.state !== State.LOADING);
     this.homeButton?.setEnabled(this.state === State.IDLE && this.#hasActiveTrace());
   }
 
@@ -3150,12 +3156,13 @@ export const enum State {
   RECORDING_FAILED = 'RecordingFailed',
 }
 
-// Define row and header height, should be in sync with styles for timeline graphs.
+/** Define row and header height, should be in sync with styles for timeline graphs. **/
 export const rowHeight = 18;
 
 export const headerHeight = 20;
 export interface TimelineModeViewDelegate {
   select(selection: TimelineSelection|null): void;
+  zoomEvent(event: Trace.Types.Events.Event): void;
   element: Element;
   set3PCheckboxDisabled(disabled: boolean): void;
   selectEntryAtTime(events: Trace.Types.Events.Event[]|null, time: number): void;