chrome-devtools-frontend 1.0.944427 → 1.0.945677

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -47,10 +47,6 @@ const UIStrings = {
   */
   document: 'Document',
   /**
-  *@description Text for web URLs
-  */
-  url: 'URL',
-  /**
   *@description Title for a link to the Sources panel
   */
   clickToRevealInSourcesPanel: 'Click to reveal in Sources panel',
@@ -67,10 +63,6 @@ const UIStrings = {
   */
   clickToRevealInNetworkPanelMight: 'Click to reveal in Network panel (might require page reload)',
   /**
-  *@description Text for the origin of something
-  */
-  origin: 'Origin',
-  /**
   *@description Related node label in Timeline UIUtils of the Performance panel
   */
   ownerElement: 'Owner Element',
@@ -117,11 +109,11 @@ const UIStrings = {
   /**
   *@description Row title for in the Frame Details view
   */
-  crossoriginIsolated: 'Cross-Origin Isolated',
+  crossoriginIsolated: '`Cross-Origin` Isolated',
   /**
   *@description Explanatory text in the Frame Details view
   */
-  localhostIsAlwaysASecureContext: 'Localhost is always a secure context',
+  localhostIsAlwaysASecureContext: '`Localhost` is always a secure context',
   /**
   *@description Explanatory text in the Frame Details view
   */
@@ -131,14 +123,6 @@ const UIStrings = {
   */
   theFramesSchemeIsInsecure: 'The frame\'s scheme is insecure',
   /**
-  *@description Row title in the Frame Details view
-  */
-  crossoriginEmbedderPolicy: 'Cross-Origin Embedder Policy',
-  /**
-  *@description Row title in the Frame Details view
-  */
-  crossoriginOpenerPolicy: 'Cross-Origin Opener Policy',
-  /**
   *@description This label specifies the server endpoints to which the server is reporting errors
   *and warnings through the Report-to API. Following this label will be the URL of the server.
   */
@@ -150,7 +134,8 @@ const UIStrings = {
   /**
   *@description Explanatory text in the Frame Details view for the API availability section
   */
-  availabilityOfCertainApisDepends: 'Availability of certain APIs depends on the document being cross-origin isolated.',
+  availabilityOfCertainApisDepends:
+      'Availability of certain APIs depends on the document being `cross-origin` isolated.',
   /**
   *@description Description of the SharedArrayBuffer status
   */
@@ -167,20 +152,20 @@ const UIStrings = {
   *@description Tooltip for the SharedArrayBuffer availability status
   */
   sharedarraybufferConstructorIs:
-      'SharedArrayBuffer constructor is available and SABs can be transferred via postMessage',
+      '`SharedArrayBuffer` constructor is available and `SABs` can be transferred via `postMessage`',
   /**
   *@description Tooltip for the SharedArrayBuffer availability status
   */
   sharedarraybufferConstructorIsAvailable:
-      'SharedArrayBuffer constructor is available but SABs cannot be transferred via postMessage',
+      '`SharedArrayBuffer` constructor is available but `SABs` cannot be transferred via `postMessage`',
   /**
   *@description Explanation for the SharedArrayBuffer availability status
   */
-  willRequireCrossoriginIsolated: '⚠️ will require cross-origin isolated context in the future',
+  willRequireCrossoriginIsolated: '⚠️ will require `cross-origin` isolated context in the future',
   /**
   *@description Explanation for the SharedArrayBuffer availability status
   */
-  requiresCrossoriginIsolated: 'requires cross-origin isolated context',
+  requiresCrossoriginIsolated: 'requires `cross-origin` isolated context',
   /**
    *@description Explanation for the SharedArrayBuffer availability status in case the transfer of a SAB requires the
    * permission policy `cross-origin-isolated` to be enabled (e.g. because the message refers to the situation in an iframe).
@@ -194,11 +179,12 @@ const UIStrings = {
   /**
   *@description Tooltip for the Measure Memory availability status
   */
-  thePerformanceAPI: 'The performance.measureUserAgentSpecificMemory() API is available',
+  thePerformanceAPI: 'The `performance.measureUserAgentSpecificMemory()` API is available',
   /**
   *@description Tooltip for the Measure Memory availability status
   */
-  thePerformancemeasureuseragentspecificmemory: 'The performance.measureUserAgentSpecificMemory() API is not available',
+  thePerformancemeasureuseragentspecificmemory:
+      'The `performance.measureUserAgentSpecificMemory()` API is not available',
   /**
   *@description Entry in the API availability section of the frame details view
   */
@@ -211,12 +197,13 @@ const UIStrings = {
   *@description Label for a stack trace. If a frame is created programmatically (i.e. via JavaScript), there is a
   * stack trace for the line of code which caused the creation of the iframe. This is the stack trace we are showing here.
   */
-  creationStackTrace: 'Frame Creation Stack Trace',
+  creationStackTrace: 'Frame Creation `Stack Trace`',
   /**
   *@description Tooltip for 'Frame Creation Stack Trace' explaining that the stack
   *trace shows where in the code the frame has been created programmatically
   */
-  creationStackTraceExplanation: 'This frame was created programmatically. The stack trace shows where this happened.',
+  creationStackTraceExplanation:
+      'This frame was created programmatically. The `stack trace` shows where this happened.',
   /**
   *@description Text descripting why a frame has been indentified as an advertisement.
   */
@@ -230,11 +217,11 @@ const UIStrings = {
   *@description Text descripting why a frame has been indentified as an advertisement.
   */
   createdByAdScriptExplanation:
-      'There was an ad script in the (async) stack when this frame was created. Examining the creation stack trace of this frame might provide more insight.',
+      'There was an ad script in the `(async) stack` when this frame was created. Examining the creation `stack trace` of this frame might provide more insight.',
   /**
    *@description Label for a list of origin trials that associated with at least one token.
    */
-  originTrials: 'Origin Trials',
+  // originTrials: 'Origin Trials',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -330,7 +317,7 @@ export class FrameDetailsReportView extends HTMLElement {
 
     return LitHtml.html`
     <${ReportView.ReportView.ReportSectionHeader.litTagName}>
-      ${i18nString(UIStrings.originTrials)}
+      ${i18n.i18n.lockedString('Origin Trials')}
       <${IconButton.IconButton.IconButton.litTagName} class="inline-button" .data="${{
       clickHandler: refreshOriginTrials,
       groups: [
@@ -356,7 +343,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.document)}</${
         ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('URL')}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
         <div class="inline-items">
@@ -462,7 +449,7 @@ export class FrameDetailsReportView extends HTMLElement {
   private maybeRenderOrigin(): LitHtml.TemplateResult|{} {
     if (this.frame && this.frame.securityOrigin && this.frame.securityOrigin !== '://') {
       return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
+        <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('Origin')}</${
           ReportView.ReportView.ReportKey.litTagName}>
         <${ReportView.ReportView.ReportValue.litTagName}>
           <div class="text-ellipsis" title=${this.frame.securityOrigin}>${this.frame.securityOrigin}</div>
@@ -622,11 +609,11 @@ export class FrameDetailsReportView extends HTMLElement {
         return LitHtml.html`
           ${
             this.maybeRenderCrossOriginStatus(
-                info.coep, i18nString(UIStrings.crossoriginEmbedderPolicy),
+                info.coep, i18n.i18n.lockedString('Cross-Origin Embedder Policy (COEP)'),
                 Protocol.Network.CrossOriginEmbedderPolicyValue.None)}
           ${
             this.maybeRenderCrossOriginStatus(
-                info.coop, i18nString(UIStrings.crossoriginOpenerPolicy),
+                info.coop, i18n.i18n.lockedString('Cross-Origin Opener Policy (COOP)'),
                 Protocol.Network.CrossOriginOpenerPolicyValue.UnsafeNone)}
         `;
       }

package/front_end/panels/changes/ChangesView.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as Diff from '../../third_party/diff/diff.js';
 import * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -166,7 +167,7 @@ export class ChangesView extends UI.Widget.VBox {
     this.registerCSSFiles([changesViewStyles]);
   }
 
-  private refreshDiff(): void {
+  private async refreshDiff(): Promise<void> {
     if (!this.isShowing()) {
       return;
     }
@@ -180,12 +181,12 @@ export class ChangesView extends UI.Widget.VBox {
       this.hideDiff(i18nString(UIStrings.binaryData));
       return;
     }
-    this.workspaceDiff.requestDiff(uiSourceCode).then((diff: Diff.Diff.DiffArray|null): void => {
-      if (this.selectedUISourceCode !== uiSourceCode) {
-        return;
-      }
-      this.renderDiffRows(diff);
-    });
+    const diff = await this.workspaceDiff.requestDiff(
+        uiSourceCode, {shouldFormatDiff: Root.Runtime.experiments.isEnabled('preciseChanges')});
+    if (this.selectedUISourceCode !== uiSourceCode) {
+      return;
+    }
+    this.renderDiffRows(diff);
   }
 
   private hideDiff(message: string): void {

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -30,7 +30,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   private section?: StylePropertiesSection;
   private editorContainer: HTMLElement;
 
-  #propertyIndex = -1;
+  #triggerKey: string|undefined;
 
   constructor() {
     super(true);
@@ -73,12 +73,12 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     this.editor?.addEventListener('propertydeselected', this.onPropertyDeselected);
   }
 
-  setPropertyIndex(value: number): void {
-    this.#propertyIndex = value;
+  setTriggerKey(value: string): void {
+    this.#triggerKey = value;
   }
 
-  getPropertyIndex(): number {
-    return this.#propertyIndex;
+  getTriggerKey(): string|undefined {
+    return this.#triggerKey;
   }
 
   unbindContext(): void {
@@ -116,7 +116,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
 
   static createTriggerButton(
       pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
-      propertyIndex: number): HTMLElement {
+      triggerKey: string): HTMLElement {
     const triggerButton = createButton(buttonTitle);
 
     triggerButton.onclick = async(event): Promise<void> => {
@@ -125,7 +125,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
       const widget = StyleEditorWidget.instance();
       widget.setEditor(editorClass);
       widget.bindContext(pane, section);
-      widget.setPropertyIndex(propertyIndex);
+      widget.setTriggerKey(triggerKey);
       await widget.render();
       const scrollerElement = triggerButton.enclosingNodeOrSelfWithClass('style-panes-wrapper');
       const onScroll = (): void => {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -668,24 +668,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const section = this.section();
     if (this.valueElement && section && section.editable && this.property.name === 'display') {
       const propertyValue = this.property.trimmedValueWithoutImportant();
-      if (propertyValue === 'flex' || propertyValue === 'inline-flex') {
+      const isFlex = propertyValue === 'flex' || propertyValue === 'inline-flex';
+      const isGrid = propertyValue === 'grid' || propertyValue === 'inline-grid';
+      if (isFlex || isGrid) {
+        const key = `${section.getSectionIdx()}_${section.nextEditorTriggerButtonIdx}`;
         const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, FlexboxEditor, i18nString(UIStrings.flexboxEditorButton),
-            this.property.index);
+            this.parentPaneInternal, section, isFlex ? FlexboxEditor : GridEditor,
+            isFlex ? i18nString(UIStrings.flexboxEditorButton) : i18nString(UIStrings.gridEditorButton), key);
+        section.nextEditorTriggerButtonIdx++;
         this.listItemElement.appendChild(button);
         const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance()) &&
-            this.property.index === StyleEditorWidget.instance().getPropertyIndex()) {
-          helper.setAnchorElement(button);
-        }
-      }
-      if (propertyValue === 'grid' || propertyValue === 'inline-grid') {
-        const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, GridEditor, i18nString(UIStrings.gridEditorButton), this.property.index);
-        this.listItemElement.appendChild(button);
-        const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance()) &&
-            this.property.index === StyleEditorWidget.instance().getPropertyIndex()) {
+        if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
           helper.setAnchorElement(button);
         }
       }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -832,6 +832,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.idleCallbackManager = new IdleCallbackManager();
 
     const blocks = [new SectionBlock(null)];
+    let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
     for (const style of matchedStyles.nodeStyles()) {
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
@@ -844,7 +845,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const lastBlock = blocks[blocks.length - 1];
       if (lastBlock) {
         this.idleCallbackManager.schedule(() => {
-          const section = new StylePropertiesSection(this, matchedStyles, style);
+          const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          sectionIdx++;
           lastBlock.sections.push(section);
         });
       }
@@ -860,7 +862,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createPseudoTypeBlock(pseudoType);
       for (const style of matchedStyles.pseudoStyles(pseudoType)) {
         this.idleCallbackManager.schedule(() => {
-          const section = new StylePropertiesSection(this, matchedStyles, style);
+          const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          sectionIdx++;
           block.sections.push(section);
         });
       }
@@ -871,7 +874,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createKeyframesBlock(keyframesRule.name().text);
       for (const keyframe of keyframesRule.keyframes()) {
         this.idleCallbackManager.schedule(() => {
-          block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style));
+          block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style, sectionIdx));
+          sectionIdx++;
         });
       }
       blocks.push(block);
@@ -917,7 +921,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const node = this.node();
     const blankSection = new BlankStylePropertiesSection(
         this, insertAfterSection.matchedStyles, node ? node.simpleSelector() : '', styleSheetId, ruleLocation,
-        insertAfterSection.style());
+        insertAfterSection.style(), 0);
 
     this.sectionsContainer.insertBefore(blankSection.element, insertAfterSection.element.nextSibling);
 
@@ -929,6 +933,13 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       block.sections.splice(index + 1, 0, blankSection);
       blankSection.startEditingSelector();
     }
+    let sectionIdx = 0;
+    for (const block of this.sectionBlocks) {
+      for (const section of block.sections) {
+        section.setSectionIdx(sectionIdx);
+        sectionIdx++;
+      }
+    }
   }
 
   removeSection(section: StylePropertiesSection): void {
@@ -1208,10 +1219,15 @@ export class StylePropertiesSection {
 
   private queryListElement: HTMLElement;
 
+  // Used to identify buttons that trigger a flexbox or grid editor.
+  nextEditorTriggerButtonIdx = 1;
+  private sectionIdx = 0;
+
   constructor(
       parentPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     this.parentPane = parentPane;
+    this.sectionIdx = sectionIdx;
     this.styleInternal = style;
     this.matchedStyles = matchedStyles;
     this.editable = Boolean(style.styleSheetId && style.range);
@@ -1344,6 +1360,15 @@ export class StylePropertiesSection {
     this.onpopulate();
   }
 
+  setSectionIdx(sectionIdx: number): void {
+    this.sectionIdx = sectionIdx;
+    this.onpopulate();
+  }
+
+  getSectionIdx(): number {
+    return this.sectionIdx;
+  }
+
   registerFontProperty(treeElement: StylePropertyTreeElement): void {
     if (this.fontEditorSectionManager) {
       this.fontEditorSectionManager.registerFontProperty(treeElement);
@@ -1935,6 +1960,7 @@ export class StylePropertiesSection {
 
   onpopulate(): void {
     this.parentPane.setActiveProperty(null);
+    this.nextEditorTriggerButtonIdx = 1;
     this.propertiesTreeOutline.removeChildren();
     const style = this.styleInternal;
     let count = 0;
@@ -2457,10 +2483,10 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, defaultSelectorText: string,
       styleSheetId: Protocol.CSS.StyleSheetId, ruleLocation: TextUtils.TextRange.TextRange,
-      insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
+      insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     const cssModel = (stylesPane.cssModel() as SDK.CSSModel.CSSModel);
     const rule = SDK.CSSRule.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
-    super(stylesPane, matchedStyles, rule.style);
+    super(stylesPane, matchedStyles, rule.style, sectionIdx);
     this.normal = false;
     this.ruleLocation = ruleLocation;
     this.styleSheetId = styleSheetId;
@@ -2564,8 +2590,8 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
 export class KeyframePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
-    super(stylesPane, matchedStyles, style);
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
+    super(stylesPane, matchedStyles, style, sectionIdx);
     this.selectorElement.className = 'keyframe-key';
   }
 

package/front_end/panels/emulation/DeviceModeView.ts

@@ -547,6 +547,9 @@ export class DeviceModeView extends UI.Widget.VBox {
     const link = document.createElement('a');
     link.download = fileName + '.png';
     canvas.toBlob(blob => {
+      if (blob === null) {
+        return;
+      }
       link.href = URL.createObjectURL(blob);
       link.click();
     });

package/front_end/panels/help/ReleaseNoteText.ts

@@ -21,7 +21,9 @@ function getReleaseNoteLang(): string {
   // @ts-ignore TODO(crbug.com/1163928) Wait for Intl support.
   const currentDevToolsLocale = new Intl.Locale(currentDevToolsUILanguage);
 
-  return releaseNoteLangs.has(currentDevToolsLocale.language) ? currentDevToolsLocale.language : '';
+  return currentDevToolsLocale.language && releaseNoteLangs.has(currentDevToolsLocale.language) ?
+      currentDevToolsLocale.language :
+      '';
 }
 
 function getLocalizedReleaseNoteURL(url: string): string {

package/front_end/panels/network/NetworkItemView.ts

@@ -270,7 +270,13 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
 
   private selectTabInternal(tabId: string): void {
     if (!this.selectTab(tabId)) {
-      this.selectTab('headers');
+      // maybeAppendPayloadPanel might cause payload tab to appear asynchronously, so
+      // it makes sense to retry on the next tick
+      setTimeout(() => {
+        if (!this.selectTab(tabId)) {
+          this.selectTab('headers');
+        }
+      }, 0);
     }
   }
 

package/front_end/panels/profiler/heapProfiler.css

@@ -132,11 +132,8 @@
   }
 }
 
-.heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag {
-  color: var(--color-text-secondary);
-}
-
-.heap-snapshot-view td.object-column span.grayed {
+.heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag,
+.heap-snapshot-view tr:not(.selected) td.object-column span.grayed {
   color: var(--color-text-secondary);
 }
 

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -41,7 +41,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
   private readonly snippetsSetting: Common.Settings.Setting<Snippet[]>;
   constructor() {
     // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-    super('snippet://' as Platform.DevToolsPath.UrlString, 'snippets');
+    super('snippet://', 'snippets');
     this.lastSnippetIdentifierSetting =
         Common.Settings.Settings.instance().createSetting('scriptSnippets_lastIdentifier', 0);
     this.snippetsSetting = Common.Settings.Settings.instance().createSetting('scriptSnippets', []);

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -702,8 +702,8 @@ export class DebuggerPlugin extends Plugin {
       if (this.popoverHelper.isPopoverVisible()) {
         this.popoverHelper.hidePopover();
         event.consume();
+        return true;
       }
-      return true;
     }
     if (ctrlDown && this.executionLocation) {
       this.setControlDown(true);

package/front_end/panels/sources/NavigatorView.ts

@@ -851,7 +851,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
       const folderPath = Common.ParsedURL.ParsedURL.capFilePrefix(
           Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path) as
-              Platform.DevToolsPath.RawPathString,
+              Platform.DevToolsPath.UrlString,
           Host.Platform.isWin());
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openFolder),

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -380,7 +380,6 @@ export class UISourceCodeFrame extends
     const location = this.editorLocationToUILocation(lineNumber, columnNumber);
     contextMenu.appendApplicableItems(
         new Workspace.UISourceCode.UILocation(this.uiSourceCodeInternal, location.lineNumber, location.columnNumber));
-    contextMenu.appendApplicableItems(this);
     for (const plugin of this.plugins) {
       plugin.populateTextAreaContextMenu(contextMenu, lineNumber, columnNumber);
     }

package/front_end/panels/timeline/TimelineController.ts

@@ -93,6 +93,9 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     ];
     categoriesArray.push(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo);
 
+    if (Root.Runtime.experiments.isEnabled('timelineV8RuntimeCallStats') && options.enableJSSampling) {
+      categoriesArray.push(disabledByDefault('v8.runtime_stats_sampling'));
+    }
     if (!Root.Runtime.Runtime.queryParam('timelineTracingJSProfileDisabled') && options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.cpu_profiler'));
     }

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -46,7 +46,7 @@ import type {PerformanceModel} from './PerformanceModel.js';
 import {FlameChartStyle, Selection, TimelineFlameChartMarker} from './TimelineFlameChartView.js';
 import {TimelineSelection} from './TimelinePanel.js';
 import type {TimelineCategory} from './TimelineUIUtils.js';
-import {TimelineUIUtils} from './TimelineUIUtils.js';
+import {TimelineUIUtils, assignLayoutShiftsToClusters} from './TimelineUIUtils.js';
 
 const UIStrings = {
   /**
@@ -768,7 +768,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const metricEvents: SDK.TracingModel.Event[] = [];
     const lcpEvents = [];
-    const layoutShifts = [];
+    const layoutShifts: SDK.TracingModel.Event[] = [];
     const timelineModel = this.performanceModel.timelineModel();
     for (const track of this.model.tracks()) {
       for (const event of track.events) {
@@ -807,38 +807,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     }
 
     if (layoutShifts.length) {
-      const gapTimeInMs = 1000;
-      const limitTimeInMs = 5000;
-      let firstTimestamp = Number.NEGATIVE_INFINITY;
-      let previousTimestamp = Number.NEGATIVE_INFINITY;
-      let maxScore = 0;
-      let currentClusterId = 1;
-      let currentClusterScore = 0;
-      let currentCluster = new Set<SDK.TracingModel.Event>();
-
-      for (const e of layoutShifts) {
-        if (e.args['data']['had_recent_input'] || e.args['data']['weighted_score_delta'] === undefined) {
-          continue;
-        }
-
-        if (e.startTime - firstTimestamp > limitTimeInMs || e.startTime - previousTimestamp > gapTimeInMs) {
-          firstTimestamp = e.startTime;
-
-          for (const layoutShift of currentCluster) {
-            layoutShift.args['data']['_current_cluster_score'] = currentClusterScore;
-            layoutShift.args['data']['_current_cluster_id'] = currentClusterId;
-          }
-
-          currentClusterId += 1;
-          currentClusterScore = 0;
-          currentCluster = new Set();
-        }
-
-        previousTimestamp = e.startTime;
-        currentClusterScore += e.args['data']['weighted_score_delta'];
-        currentCluster.add(e);
-        maxScore = Math.max(maxScore, currentClusterScore);
-      }
+      assignLayoutShiftsToClusters(layoutShifts);
     }
 
     metricEvents.sort(SDK.TracingModel.Event.compareStartTime);

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -2421,9 +2421,13 @@ export class TimelineUIUtils {
         contentHelper.appendTextRow(i18nString(UIStrings.score), eventData['score'].toPrecision(4));
         contentHelper.appendTextRow(
             i18nString(UIStrings.cumulativeScore), eventData['cumulative_score'].toPrecision(4));
-        contentHelper.appendTextRow(i18nString(UIStrings.currentClusterId), eventData['_current_cluster_id']);
-        contentHelper.appendTextRow(
-            i18nString(UIStrings.currentClusterScore), eventData['_current_cluster_score'].toPrecision(4));
+        if ('_current_cluster_id' in eventData) {
+          contentHelper.appendTextRow(i18nString(UIStrings.currentClusterId), eventData['_current_cluster_id']);
+        }
+        if ('_current_cluster_score' in eventData) {
+          contentHelper.appendTextRow(
+              i18nString(UIStrings.currentClusterScore), eventData['_current_cluster_score'].toPrecision(4));
+        }
         contentHelper.appendTextRow(
             i18nString(UIStrings.hadRecentInput),
             eventData['had_recent_input'] ? i18nString(UIStrings.yes) : i18nString(UIStrings.no));
@@ -3783,3 +3787,47 @@ export interface TimelineMarkerStyle {
   tall: boolean;
   lowPriority: boolean;
 }
+
+export function assignLayoutShiftsToClusters(layoutShifts: readonly SDK.TracingModel.Event[]): void {
+  const gapTimeInMs = 1000;
+  const limitTimeInMs = 5000;
+  let firstTimestamp = Number.NEGATIVE_INFINITY;
+  let previousTimestamp = Number.NEGATIVE_INFINITY;
+  let currentClusterId = 0;
+  let currentClusterScore = 0;
+  let currentCluster = new Set<SDK.TracingModel.Event>();
+
+  for (const event of layoutShifts) {
+    if (event.args['data']['had_recent_input'] || event.args['data']['weighted_score_delta'] === undefined) {
+      continue;
+    }
+
+    if (event.startTime - firstTimestamp > limitTimeInMs || event.startTime - previousTimestamp > gapTimeInMs) {
+      // This means the event does not fit into the current session/cluster, so we need to start a new cluster.
+      firstTimestamp = event.startTime;
+
+      // Update all the layout shifts we found in this cluster to associate them with the cluster.
+      for (const layoutShift of currentCluster) {
+        layoutShift.args['data']['_current_cluster_score'] = currentClusterScore;
+        layoutShift.args['data']['_current_cluster_id'] = currentClusterId;
+      }
+
+      // Increment the cluster ID and reset the data.
+      currentClusterId += 1;
+      currentClusterScore = 0;
+      currentCluster = new Set();
+    }
+
+    // Store the timestamp of the previous layout shift.
+    previousTimestamp = event.startTime;
+    // Update the score of the current cluster and store this event in that cluster
+    currentClusterScore += event.args['data']['weighted_score_delta'];
+    currentCluster.add(event);
+  }
+
+  // The last cluster we find may not get closed out - so if not, update all the shifts that we associate with it.
+  for (const layoutShift of currentCluster) {
+    layoutShift.args['data']['_current_cluster_score'] = currentClusterScore;
+    layoutShift.args['data']['_current_cluster_id'] = currentClusterId;
+  }
+}