chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/timeline/TimelinePanel.ts

@@ -99,28 +99,6 @@ const UIStrings = {
    * @description Text that appears when user drag and drop something (for example, a file) in Timeline Panel of the Performance panel
    */
   dropTimelineFileOrUrlHere: 'Drop trace file or URL here',
-  /**
-   * @description Title of disable capture jsprofile setting in timeline panel of the performance panel
-   */
-  disableJavascriptSamples: 'Disable JavaScript samples',
-  /**
-   *@description Title of capture layers and pictures setting in timeline panel of the performance panel
-   */
-  enableAdvancedPaint: 'Enable advanced paint instrumentation (slow)',
-  /**
-   * @description Title of CSS selector stats setting in timeline panel of the performance panel
-   */
-  enableSelectorStats: 'Enable CSS selector stats (slow)',
-  /**
-   * @description Title of show screenshots setting in timeline panel of the performance panel
-   */
-  screenshots: 'Screenshots',
-  /**
-   * @description Label for the screenshot capture preset dropdown in the performance panel settings pane. The dropdown
-   * picks the per-frame resolution and maximum frame count used when capturing screenshots. Every preset is sized to
-   * stay within the same per-session memory budget.
-   */
-  screenshotCapture: 'Screenshot capture',
   /**
    * @description Dropdown option in the performance panel for the default screenshot capture preset (500 x 500 pixels,
    * up to 450 frames).
@@ -141,10 +119,6 @@ const UIStrings = {
    * so many of them fit in the per-session memory budget (100 x 100 pixels, up to 11250 frames).
    */
   screenshotPresetTiny: '100 x 100 px, up to 11250 frames',
-  /**
-   * @description Text for the memory of the page
-   */
-  memory: 'Memory',
   /**
    * @description Text to clear content
    */
@@ -274,11 +248,6 @@ const UIStrings = {
    * @description Tooltip description for a checkbox that toggles the visibility of data added by extensions of this panel (Performance).
    */
   showDataAddedByExtensions: 'Show data added by extensions of the Performance panel',
-  /**
-   * Label for a checkbox that toggles the visibility of data added by extensions of this panel (Performance).
-   */
-  showCustomtracks: 'Show custom tracks',
-
   /**
    * @description Tooltip for the the sidebar toggle in the Performance panel. Command to open/show the sidebar.
    */
@@ -324,10 +293,6 @@ const UIStrings = {
    * @description Description of the Timeline scrolling & panning instructions that appear in the shortcuts dialog.
    */
   timelineScrollPan: 'Scroll & Pan',
-  /**
-   * @description Title for the Dim 3rd Parties checkbox.
-   */
-  dimThirdParties: 'Dim 3rd parties',
   /**
    * @description Description for the Dim 3rd Parties checkbox tooltip describing how 3rd parties are classified.
    */
@@ -378,7 +343,6 @@ const SCREENSHOT_CAPTURE_PRESETS: ReadonlyArray<{
         label: () => i18nString(UIStrings.screenshotPresetTiny),
       },
     ];
-const DEFAULT_SCREENSHOT_CAPTURE_PRESET_KEY = SCREENSHOT_CAPTURE_PRESETS[0].key;
 
 let timelinePanelInstance: TimelinePanel|undefined;
 
@@ -559,38 +523,26 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     this.traceLoadStart = null;
 
-    this.disableCaptureJSProfileSetting = Common.Settings.Settings.instance().createSetting(
-        'timeline-disable-js-sampling', false, Common.Settings.SettingStorageType.SESSION);
-    this.disableCaptureJSProfileSetting.setTitle(i18nString(UIStrings.disableJavascriptSamples));
-    this.captureLayersAndPicturesSetting = Common.Settings.Settings.instance().createSetting(
-        'timeline-capture-layers-and-pictures', false, Common.Settings.SettingStorageType.SESSION);
-    this.captureLayersAndPicturesSetting.setTitle(i18nString(UIStrings.enableAdvancedPaint));
-    this.captureSelectorStatsSetting = Common.Settings.Settings.instance().createSetting(
-        'timeline-capture-selector-stats', false, Common.Settings.SettingStorageType.SESSION);
-    this.captureSelectorStatsSetting.setTitle(i18nString(UIStrings.enableSelectorStats));
-    this.screenshotCaptureModeSetting = Common.Settings.Settings.instance().createSetting(
-        'timeline-screenshot-capture-mode', DEFAULT_SCREENSHOT_CAPTURE_PRESET_KEY,
-        Common.Settings.SettingStorageType.SESSION);
-    this.screenshotCaptureModeSetting.setTitle(i18nString(UIStrings.screenshotCapture));
-
-    this.showScreenshotsSetting =
-        Common.Settings.Settings.instance().createSetting('timeline-show-screenshots', !this.#isNode);
-    this.showScreenshotsSetting.setTitle(i18nString(UIStrings.screenshots));
+    this.disableCaptureJSProfileSetting =
+        Common.Settings.Settings.instance().moduleSetting('timeline-disable-js-sampling');
+    this.captureLayersAndPicturesSetting =
+        Common.Settings.Settings.instance().moduleSetting('timeline-capture-layers-and-pictures');
+    this.captureSelectorStatsSetting =
+        Common.Settings.Settings.instance().moduleSetting('timeline-capture-selector-stats');
+    this.screenshotCaptureModeSetting =
+        Common.Settings.Settings.instance().moduleSetting('timeline-screenshot-capture-mode');
+
+    this.showScreenshotsSetting = Common.Settings.Settings.instance().moduleSetting('timeline-show-screenshots');
     this.showScreenshotsSetting.addChangeListener(this.updateMiniMap, this);
 
-    this.showMemorySetting = Common.Settings.Settings.instance().createSetting(
-        'timeline-show-memory', false, Common.Settings.SettingStorageType.SESSION);
-    this.showMemorySetting.setTitle(i18nString(UIStrings.memory));
+    this.showMemorySetting = Common.Settings.Settings.instance().moduleSetting('timeline-show-memory');
     this.showMemorySetting.addChangeListener(this.onMemoryModeChanged, this);
 
-    this.#dimThirdPartiesSetting = Common.Settings.Settings.instance().createSetting(
-        'timeline-dim-third-parties', false, Common.Settings.SettingStorageType.SESSION);
-    this.#dimThirdPartiesSetting.setTitle(i18nString(UIStrings.dimThirdParties));
+    this.#dimThirdPartiesSetting = Common.Settings.Settings.instance().moduleSetting('timeline-dim-third-parties');
     this.#dimThirdPartiesSetting.addChangeListener(this.onDimThirdPartiesChanged, this);
 
     this.#thirdPartyTracksSetting = TimelinePanel.extensionDataVisibilitySetting();
     this.#thirdPartyTracksSetting.addChangeListener(this.#extensionDataVisibilityChanged, this);
-    this.#thirdPartyTracksSetting.setTitle(i18nString(UIStrings.showCustomtracks));
 
     const timelineToolbarContainer = this.element.createChild('div', 'timeline-toolbar-container');
     timelineToolbarContainer.setAttribute('jslog', `${VisualLogging.toolbar()}`);
@@ -830,7 +782,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   static extensionDataVisibilitySetting(): Common.Settings.Setting<boolean> {
     // Calling this multiple times doesn't recreate the setting.
     // Instead, after the second call, the cached setting is returned.
-    return Common.Settings.Settings.instance().createSetting('timeline-show-extension-data', true);
+    return Common.Settings.Settings.instance().moduleSetting('timeline-show-extension-data');
   }
   override searchableView(): UI.SearchableView.SearchableView|null {
     return this.#searchableView;
@@ -1285,9 +1237,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         {
           title: i18nString(UIStrings.timelineZoom),
           rows: [
-            [{key: 'Scroll ↕'}], [{key: 'W'}, {key: 'S'}, {joinText: 'or'}, {key: '+'}, {key: '-'}],
-            {footnote: 'hold shift for fast zoom'}
-          ]
+            [{key: 'Scroll ↕'}],
+            [{key: 'W'}, {key: 'S'}, {joinText: 'or'}, {key: '+'}, {key: '-'}],
+            {footnote: 'hold shift for fast zoom'},
+          ],
         },
         {
           title: i18nString(UIStrings.timelineScrollPan),
@@ -1295,11 +1248,17 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
             [{key: 'Shift'}, {joinText: '+'}, {key: 'Scroll ↕'}],
             [{key: 'Scroll ↔'}, {joinText: 'or'}, {key: 'A'}, {key: 'D'}],
             [
-              {key: 'Drag'}, {joinText: 'or'}, {key: 'Shift'}, {joinText: '+'}, {key: '↑'}, {key: '↓'}, {key: '←'},
-              {key: '→'}
+              {key: 'Drag'},
+              {joinText: 'or'},
+              {key: 'Shift'},
+              {joinText: '+'},
+              {key: '↑'},
+              {key: '↓'},
+              {key: '←'},
+              {key: '→'},
             ],
-          ]
-        }
+          ],
+        },
       ];
     }
 
@@ -1309,23 +1268,36 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         title: i18nString(UIStrings.timelineZoom),
         rows: [
           [{key: metaKey}, {joinText: '+'}, {key: 'Scroll ↕'}],
-          [{key: 'W'}, {key: 'S'}, {joinText: 'or'}, {key: '+'}, {key: '-'}], {footnote: ''}
-        ]
+          [{key: 'W'}, {key: 'S'}, {joinText: 'or'}, {key: '+'}, {key: '-'}],
+          {footnote: ''},
+        ],
       },
       {
         title: i18nString(UIStrings.timelineScrollPan),
         rows: [
           [{key: 'Scroll ↕'}],
           [
-            {key: 'Shift'}, {joinText: '+'}, {key: 'Scroll ↕'}, {joinText: 'or'}, {key: 'Scroll ↔'}, {joinText: 'or'},
-            {key: 'A'}, {key: 'D'}
+            {key: 'Shift'},
+            {joinText: '+'},
+            {key: 'Scroll ↕'},
+            {joinText: 'or'},
+            {key: 'Scroll ↔'},
+            {joinText: 'or'},
+            {key: 'A'},
+            {key: 'D'},
           ],
           [
-            {key: 'Drag'}, {joinText: 'or'}, {key: 'Shift'}, {joinText: '+'}, {key: '↑'}, {key: '↓'}, {key: '←'},
-            {key: '→'}
+            {key: 'Drag'},
+            {joinText: 'or'},
+            {key: 'Shift'},
+            {joinText: '+'},
+            {key: '↑'},
+            {key: '↓'},
+            {key: '←'},
+            {key: '→'},
           ],
-        ]
-      }
+        ],
+      },
     ];
   }
 
@@ -2237,7 +2209,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const exclusiveFilter = this.#exclusiveFilterPerTrace.get(traceIndex) ?? null;
     this.#applyActiveFilters(parsedTrace.data.Meta.traceIsGeneric, exclusiveFilter);
     (this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions).updateContentVisibility({
-      annotationsExist: currentManager ? currentManager.getAnnotations()?.length > 0 : false
+      annotationsExist: currentManager ? currentManager.getAnnotations()?.length > 0 : false,
     });
 
     // Add ModificationsManager listeners for annotations change to update the
@@ -2375,7 +2347,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const annotationEntryToColorMap = this.buildColorsAnnotationsMap(annotations);
     this.#sideBar.setAnnotations(annotations, annotationEntryToColorMap);
     (this.saveButton.element as TimelineComponents.ExportTraceOptions.ExportTraceOptions).updateContentVisibility({
-      annotationsExist: currentManager ? currentManager.getAnnotations()?.length > 0 : false
+      annotationsExist: currentManager ? currentManager.getAnnotations()?.length > 0 : false,
     });
   }
 
@@ -2448,7 +2420,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       },
       onShowTrackConfigurationMode: () => {
         this.flameChart.enterMainChartTrackConfigurationMode();
-      }
+      },
     });
     if (maybeOverlay) {
       this.flameChart.addOverlay(maybeOverlay);
@@ -2732,7 +2704,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         const initiator = {
           target: null,
           frameId: script.frame as Protocol.Page.FrameId,
-          initiatorUrl: script.url as Platform.DevToolsPath.UrlString
+          initiatorUrl: script.url as Platform.DevToolsPath.UrlString,
         };
         rawSourceMap = await SDK.SourceMapManager.tryLoadSourceMap(
             this.#resourceLoader, script.sourceMapUrl as Platform.DevToolsPath.UrlString, initiator);
@@ -2844,7 +2816,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const initiator = {
         target: debuggerModelForFrameId.get(frame)?.target() ?? null,
         frameId: frame,
-        initiatorUrl: sourceUrl
+        initiatorUrl: sourceUrl,
       };
       const payload = await SDK.SourceMapManager.tryLoadSourceMap(
           TimelinePanel.instance().#resourceLoader, sourceMapUrl, initiator);

package/front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -227,8 +227,12 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
     menu.defaultSection().appendItem(i18nString(UIStrings.copyTable), () => {
       const tableData = [];
       const columnName = [
-        i18nString(UIStrings.elapsed), i18nString(UIStrings.matchAttempts), i18nString(UIStrings.matchCount),
-        i18nString(UIStrings.slowPathNonMatches), i18nString(UIStrings.selector), i18nString(UIStrings.styleSheetId)
+        i18nString(UIStrings.elapsed),
+        i18nString(UIStrings.matchAttempts),
+        i18nString(UIStrings.matchCount),
+        i18nString(UIStrings.slowPathNonMatches),
+        i18nString(UIStrings.selector),
+        i18nString(UIStrings.styleSheetId),
       ];
       tableData.push(columnName.join('\t'));
       for (const timing of this.#timings) {
@@ -321,7 +325,10 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
       // aggregate invalidated nodes per (Selector + Recalc timestamp + Frame)
       for (const selector of invalidatedNode.selectorList) {
         const key = [
-          selector.selector, selector.styleSheetId, invalidatedNode.frame, invalidatedNode.lastRecalcStyleEventTs
+          selector.selector,
+          selector.styleSheetId,
+          invalidatedNode.frame,
+          invalidatedNode.lastRecalcStyleEventTs,
         ].join('-');
         if (invalidatedNodeMap.has(key)) {
           const nodes = invalidatedNodeMap.get(key);

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -77,7 +77,7 @@ const UIStrings = {
    * @description Text that only contain a placeholder
    * @example {100ms (at 200ms)} PH1
    */
-  emptyPlaceholder: '{PH1}',  // eslint-disable-line @devtools/l10n-no-locked-or-placeholder-only-phrase
+  emptyPlaceholder: '{PH1}',  // eslint-disable-line @devtools/l10n-uistrings-text-style
   /**
    * @description Text for timestamps of items
    */
@@ -193,7 +193,7 @@ const UIStrings = {
   /**
    * @description Text to refer to the URL associated with a given event.
    */
-  url: 'Url',
+  url: 'URL',
   /**
    * @description Text to indicate to the user the size of the cache (as a filesize - e.g. 5mb).
    */
@@ -477,6 +477,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 /** Look for scheme:// plus text and exclude any punctuation at the end. **/
 export const URL_REGEX = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/)[^\s"]{2,}[^\s"'\)\}\],:;.!?]/u;
+const ALWAYS_LINKIFIED_SCHEMES = new Set(['http', 'https']);
 
 let eventDispatchDesciptors: EventDispatchTypeDescriptor[];
 
@@ -859,7 +860,7 @@ export class TimelineUIUtils {
 
   static maybeCreateLinkElement(url: string): Element|null {
     const parsedURL = new Common.ParsedURL.ParsedURL(url);
-    if (!parsedURL.scheme) {
+    if (!TimelineUIUtils.isLinkifiableScheme(parsedURL.scheme)) {
       return null;
     }
 
@@ -879,6 +880,19 @@ export class TimelineUIUtils {
     return LegacyComponents.Linkifier.Linkifier.linkifyURL(rawURL as Platform.DevToolsPath.UrlString, options);
   }
 
+  /**
+   * Don't linkify URLs to privileged schemes. See https://crbug.com/530450502.
+   */
+  static isLinkifiableScheme(scheme: string): boolean {
+    if (ALWAYS_LINKIFIED_SCHEMES.has(scheme)) {
+      return true;
+    }
+    if (LegacyComponents.Linkifier.Linkifier.isRegisteredLinkHandlerScheme(scheme + ':')) {
+      return true;
+    }
+    return false;
+  }
+
   /**
    * Takes an input string and parses it to look for links. It does this by
    * looking for URLs in the input string. The returned fragment will contain
@@ -1043,7 +1057,7 @@ export class TimelineUIUtils {
         const hasExclusiveLink = typeof userDetail === 'object' && typeof userDetail.url === 'string' &&
             typeof userDetail.description === 'string';
         if (hasExclusiveLink && Boolean(Root.Runtime.hostConfig.devToolsDeepLinksViaExtensibilityApi?.enabled)) {
-          const linkElement = this.maybeCreateLinkElement(String(userDetail.url));
+          const linkElement = TimelineUIUtils.maybeCreateLinkElement(String(userDetail.url));
           if (linkElement) {
             contentHelper.appendElementRow(String(userDetail.description), linkElement);
             // Now remove so we don't render them in renderObjectJson.

package/front_end/panels/timeline/TrackConfigBanner.ts

@@ -84,7 +84,7 @@ export function createHiddenTracksOverlay(parsedTrace: Trace.TraceModel.ParsedTr
           delegate: callbacks.onShowTrackConfigurationMode,
           dismiss: true,
           buttonVariant: Buttons.Button.Variant.PRIMARY,
-        }
+        },
       ],
   );
   infobarForTrace.setCloseCallback(() => {

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

@@ -163,7 +163,7 @@ export class ExportTraceOptions extends HTMLElement {
       ...this.#state,
       displayAnnotationsCheckbox: options.annotationsExist,
       displayResourceContentCheckbox: true,
-      displaySourceMapsCheckbox: true
+      displaySourceMapsCheckbox: true,
     };
   }
 

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

@@ -144,15 +144,14 @@ export class LayoutShiftDetails extends UI.Widget.Widget {
   }
 
   override performUpdate(): Promise<void>|void {
-    this.#view(
-        {
-          event: this.#event,
-          parsedTrace: this.#parsedTrace,
-          isFreshRecording: this.#isFreshRecording,
-          togglePopover: e => this.#togglePopover(e),
-          onEventClick: e => this.#handleTraceEventClick(e)
-        },
-        {}, this.contentElement);
+    this.#view({
+      event: this.#event,
+      parsedTrace: this.#parsedTrace,
+      isFreshRecording: this.#isFreshRecording,
+      togglePopover: e => this.#togglePopover(e),
+      onEventClick: e => this.#handleTraceEventClick(e),
+    },
+               {}, this.contentElement);
   }
 }
 

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

@@ -179,7 +179,7 @@ export class NetworkRequestTooltip extends UI.Widget.Widget {
             sdkNetworkRequest.networkRequest);
     const throttledTitle = wasThrottled ? i18nString(UIStrings.wasThrottled, {
       PH1: typeof wasThrottled.conditions.title === 'string' ? wasThrottled.conditions.title :
-                                                               wasThrottled.conditions.title()
+                                                               wasThrottled.conditions.title(),
     }) :
                                           undefined;
 

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

@@ -70,7 +70,7 @@ export const TIMELINE_RANGE_SUMMARY_VIEW_DEFAULT_VIEW: View = (input, _output, t
             categories,
             total,
             isInAIWidget: input.isInAIWidget,
-          }
+          },
         })}
       ></devtools-widget>
       ${input.thirdPartyTreeTemplate ?? Lit.nothing}

package/front_end/panels/timeline/components/insights/DuplicatedJavaScript.ts

@@ -90,7 +90,7 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
                 ],
                 overlays,
               };
-            })
+            }),
           };
         });
 
@@ -99,7 +99,7 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
       treemapButton = html`<devtools-button
         .variant=${Buttons.Button.Variant.OUTLINED}
         jslog=${VisualLogging.action(`timeline.treemap.${this.internalName}-insight`).track({
-        click: true
+        click: true,
       })}
         @click=${this.#openTreemap.bind(this)}
       >View Treemap</devtools-button>`;

package/front_end/panels/timeline/components/insights/LCPBreakdown.ts

@@ -121,7 +121,7 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
             headers: [i18nString(UIStrings.subpart), i18nString(UIStrings.duration)],
             rows,
           }})}
-      </div>`
+      </div>`,
     ];
     // clang-format on
 

package/front_end/panels/timeline/components/insights/LegacyJavaScript.ts

@@ -82,7 +82,7 @@ export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsig
                     () => this.#revealLocation(
                         script, match)} title=${`${script.url}:${match.line}:${match.column}`}>${match.name}</span>`],
               };
-            })
+            }),
           };
         });
 

package/front_end/panels/timeline/components/insights/SlowCSSSelector.ts

@@ -131,7 +131,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
               insight: this,
               headers: [`${i18nString(UIStrings.topSelectorElapsedTime)}: ${time(Trace.Types.Timing.Micro(selector['elapsed (us)']))}`],
               rows: [{
-                values: [html`${selector.selector} ${Lit.Directives.until(this.getSelectorLinks(cssModel, selector))}`]}]
+                values: [html`${selector.selector} ${Lit.Directives.until(this.getSelectorLinks(cssModel, selector))}`]}],
             }})}
         </div>
       `);
@@ -149,7 +149,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
               headers: [`${i18nString(UIStrings.topSelectorMatchAttempt)}: ${selector['match_attempts']}`],
               rows: [{
                   values: [html`${selector.selector} ${Lit.Directives.until(this.getSelectorLinks(cssModel, selector))}` as unknown as string],
-              }]
+              }],
             }})}
         </div>
       `);

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -914,6 +914,10 @@ export class Overlays extends EventTarget {
       return;
     }
 
+    const isPositionedByEvent =
+        overlay.entry && (overlay.renderLocation === 'BELOW_EVENT' || overlay.renderLocation === 'ABOVE_EVENT');
+    element.classList.toggle('positioned-by-event', Boolean(isPositionedByEvent));
+
     const component = element.querySelector('.devtools-timespan-breakdown-overlay');
 
     if (!component) {
@@ -981,6 +985,7 @@ export class Overlays extends EventTarget {
 
         const top = bottom - height;
         widget.top = top;
+        widget.maxHeight = height;
       }
     }
   }

package/front_end/panels/timeline/overlays/components/TimespanBreakdownOverlay.ts

@@ -30,13 +30,18 @@ const renderSection =
       const style = Directives.styleMap(
           {left: position ? `${position.left}px` : undefined, width: position ? `${position.width}px` : undefined});
 
+      const durationText =
+          section.showDuration ? i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(section.bounds.range) : '';
+      const labelText = section.label instanceof HTMLElement ? (section.label.textContent || '') : section.label;
+      const tooltip = durationText ? `${durationText} ${labelText}` : labelText;
+
       // clang-format off
     return html`
-      <div class="timespan-breakdown-overlay-section" style=${style}>
+      <div class="timespan-breakdown-overlay-section" style=${style} title=${tooltip}>
         <div class="timespan-breakdown-overlay-label">
           ${
             section.showDuration ?
-                html`<span class="duration-text">${i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(section.bounds.range)}</span> ` :
+                html`<span class="duration-text">${durationText}</span> ` :
                 nothing
           }
           <span class="section-label-text">${section.label}</span>
@@ -47,11 +52,11 @@ const renderSection =
 
 export const DEFAULT_VIEW = (input: Input, _output: undefined, target: HTMLElement): void => {
   const style = Directives.styleMap({
-    left: input.left ? `${input.left}px` : undefined,
-    width: input.width ? `${input.width}px` : undefined,
-    top: input.top ? `${input.top}px` : undefined,
-    maxHeight: input.maxHeight ? `${input.maxHeight}px` : undefined,
-    position: 'relative'
+    left: input.left !== null ? `${input.left}px` : undefined,
+    width: input.width !== null ? `${input.width}px` : undefined,
+    top: input.top !== null ? `${input.top}px` : undefined,
+    maxHeight: input.maxHeight !== null ? `${input.maxHeight}px` : undefined,
+    position: 'relative',
   });
   // clang-format off
   render(
@@ -252,7 +257,7 @@ export class TimespanBreakdownOverlay extends UI.Widget.Widget {
       width: this.#width,
       top: this.#top,
       maxHeight: this.#maxHeight,
-      className
+      className,
     }, undefined, this.contentElement);
 
     this.checkSectionLabelPositioning();

package/front_end/panels/timeline/overlays/components/timespanBreakdownOverlay.css

@@ -6,6 +6,7 @@
 
 @scope to (devtools-widget > *) {
   .timespan-breakdown-overlay-section {
+    pointer-events: auto;
     border: solid;
     border-color: var(--sys-color-on-surface);
     border-width: 4px 1px 0;