chrome-devtools-frontend 1.0.1578729 → 1.0.1581449

package/front_end/panels/network/NetworkLogView.ts

@@ -1451,17 +1451,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   private removeNodeAndMaybeAncestors(node: NetworkRequestNode): void {
-    let parent: NetworkNode|
-        (DataGrid.DataGrid.DataGridNode<DataGrid.ViewportDataGrid.ViewportDataGridNode<
-             DataGrid.SortableDataGrid.SortableDataGridNode<NetworkNode>>>|
-         null) = node.parent;
+    let parent = node.parent;
     if (!parent) {
       return;
     }
     parent.removeChild(node);
     while (parent && !parent.hasChildren() && parent.dataGrid && parent.dataGrid.rootNode() !== parent) {
       const grandparent = (parent.parent as NetworkNode);
-      grandparent.removeChild(parent);
+      grandparent.removeChild(parent as NetworkNode);
       parent = grandparent;
     }
   }

package/front_end/panels/security/SecurityPanel.ts

@@ -15,8 +15,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {CookieControlsView} from './CookieControlsView.js';
-import {CookieReportView} from './CookieReportView.js';
 import lockIconStyles from './lockIcon.css.js';
 import mainViewStyles from './mainView.css.js';
 import {ShowOriginEvent} from './OriginTreeElement.js';
@@ -555,8 +553,6 @@ const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLEl
       <devtools-widget
         slot="sidebar"
         .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
-        @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
-        @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
         ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
       </devtools-widget>
   </devtools-split-view>`,

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -6,13 +6,10 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as Protocol from '../../generated/protocol.js';
 import type {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {CookieControlsTreeElement} from './CookieControlsTreeElement.js';
-import {CookieReportTreeElement} from './CookieReportTreeElement.js';
 import lockIconStyles from './lockIcon.css.js';
 import {OriginTreeElement} from './OriginTreeElement.js';
 import {
@@ -29,18 +26,6 @@ const UIStrings = {
    * @description Section title for the the Security Panel's sidebar
    */
   security: 'Security',
-  /**
-   * @description Section title for the the Security Panel's sidebar
-   */
-  privacy: 'Privacy',
-  /**
-   * @description Sidebar element text in the Security panel
-   */
-  cookieReport: 'Third-party cookies',
-  /**
-   * @description Sidebar element text in the Security panel
-   */
-  flagControls: 'Controls',
   /**
    * @description Text in Security Panel of the Security panel
    */
@@ -76,8 +61,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
   readonly #originGroupTitles: Map<OriginGroup, {title: string, icon?: Icon}>;
   #originGroups: Map<OriginGroup, UI.TreeOutline.TreeElement>;
   securityOverviewElement: OriginTreeElement;
-  readonly #cookieControlsTreeElement: CookieControlsTreeElement|undefined;
-  readonly cookieReportTreeElement: CookieReportTreeElement|undefined;
   readonly #elementsByOrigin: Map<string, OriginTreeElement>;
   readonly #mainViewReloadMessage: UI.TreeOutline.TreeElement;
   #mainOrigin: string|null;
@@ -94,20 +77,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     this.sidebarTree.element.classList.add('security-sidebar');
     this.contentElement.appendChild(this.sidebarTree.element);
 
-    if (Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled) {
-      const privacyTreeSection = this.#addSidebarSection(i18nString(UIStrings.privacy), 'privacy');
-      this.#cookieControlsTreeElement =
-          new CookieControlsTreeElement(i18nString(UIStrings.flagControls), 'cookie-flag-controls');
-      privacyTreeSection.appendChild(this.#cookieControlsTreeElement);
-      this.cookieReportTreeElement = new CookieReportTreeElement(i18nString(UIStrings.cookieReport), 'cookie-report');
-      privacyTreeSection.appendChild(this.cookieReportTreeElement);
-
-      // If this if the first time this setting is set, go to the controls tool
-      if (this.#securitySidebarLastItemSetting.get() === '') {
-        this.#securitySidebarLastItemSetting.set(this.#cookieControlsTreeElement.elemId);
-      }
-    }
-
     const securitySectionTitle = i18nString(UIStrings.security);
     const securityTreeSection = this.#addSidebarSection(securitySectionTitle, 'security');
 
@@ -177,17 +146,8 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
   }
 
   showLastSelectedElement(): void {
-    if (this.#cookieControlsTreeElement &&
-        this.#securitySidebarLastItemSetting.get() === this.#cookieControlsTreeElement.elemId) {
-      this.#cookieControlsTreeElement.select();
-      this.#cookieControlsTreeElement.showElement();
-    } else if (this.#securitySidebarLastItemSetting.get() === this.cookieReportTreeElement?.elemId) {
-      this.cookieReportTreeElement.select();
-      this.cookieReportTreeElement.showElement();
-    } else {
-      this.securityOverviewElement.select();
-      this.securityOverviewElement.showElement();
-    }
+    this.securityOverviewElement.select();
+    this.securityOverviewElement.showElement();
   }
 
   #addSidebarSection(title: string, jslogContext: string): UI.TreeOutline.TreeElement {

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Security from './security.js';
@@ -13,18 +12,10 @@ const UIStrings = {
    * @description Default Title of the security panel
    */
   security: 'Security',
-  /**
-   * @description Title of privacy and security panel. This is used when the kDevToolsPrivacyUI feature flag is enabled.
-   */
-  PrivacyAndSecurity: 'Privacy and security',
   /**
    * @description Default command to open the security panel
    */
   showSecurity: 'Show Security',
-  /**
-   * @description Command to open the privacy and security panel. This is used when the kDevToolPrivacyUI feature flag is enabled
-   */
-  showPrivacyAndSecurity: 'Show Privacy and security',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/security/security-meta.ts', UIStrings);
@@ -42,11 +33,8 @@ async function loadSecurityModule(): Promise<typeof Security> {
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.PANEL,
   id: 'security',
-  title: () => Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled ? i18nLazyString(UIStrings.PrivacyAndSecurity)() :
-                                                                    i18nLazyString(UIStrings.security)(),
-  commandPrompt: () => Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled ?
-      i18nLazyString(UIStrings.showPrivacyAndSecurity)() :
-      i18nLazyString(UIStrings.showSecurity)(),
+  title: () => i18nLazyString(UIStrings.security)(),
+  commandPrompt: () => i18nLazyString(UIStrings.showSecurity)(),
   order: 80,
   persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
   async loadView() {

package/front_end/panels/security/security.ts

@@ -2,14 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as CookieControlsView from './CookieControlsView.js';
-import * as CookieReportView from './CookieReportView.js';
 import * as SecurityModel from './SecurityModel.js';
 import * as SecurityPanel from './SecurityPanel.js';
 
 export {
-  CookieControlsView,
-  CookieReportView,
   SecurityModel,
   SecurityPanel,
 };

package/front_end/panels/settings/EditFileSystemView.ts

@@ -61,9 +61,8 @@ export interface EditFileSystemViewInput {
   fileSystemPath: Platform.DevToolsPath.UrlString;
   excludedFolderPaths: PathWithStatus[];
   onCreate: (event: CustomEvent<{url?: string}>) => void;
-  onEdit:
-      (event: CustomEvent<{node: HTMLElement, columnId: string, valueBeforeEditing: string, newText: string}>) => void;
-  onDelete: (event: CustomEvent<HTMLElement>) => void;
+  onEdit: (event: CustomEvent<{columnId: string, valueBeforeEditing: string, newText: string}>) => void;
+  onDelete: (event: CustomEvent) => void;
 }
 
 export type View = (input: EditFileSystemViewInput, output: object, target: HTMLElement) => void;
@@ -77,8 +76,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         <span class="excluded-folder-url">${input.fileSystemPath}</span>
         <devtools-data-grid
           @create=${input.onCreate}
-          @edit=${input.onEdit}
-          @delete=${input.onDelete}
           class="exclude-subfolders-table"
           parts="excluded-folder-row-with-error"
           inline striped>
@@ -90,7 +87,9 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             </thead>
             <tbody>
             ${input.excludedFolderPaths.map((path, index) => html`
-              <tr data-url=${path.path} data-index=${index}>
+              <tr data-url=${path.path} data-index=${index}
+                  @edit=${input.onEdit}
+                  @delete=${input.onDelete}>
                 <td style=${styleMap({backgroundColor: path.status !== ExcludedFolderStatus.VALID ? 'var(--sys-color-error-container)' : undefined})}>${path.path}</td>
               </tr>
             `)}
@@ -139,8 +138,9 @@ export class EditFileSystemView extends UI.Widget.VBox {
       fileSystemPath: this.#fileSystem?.path() ?? Platform.DevToolsPath.urlString``,
       excludedFolderPaths: this.#excludedFolderPaths,
       onCreate: e => this.#onCreate(e.detail.url),
-      onEdit: e => this.#onEdit(e.detail.node.dataset.index ?? '-1', e.detail.valueBeforeEditing, e.detail.newText),
-      onDelete: e => this.#onDelete(e.detail.dataset.index ?? '-1'),
+      onEdit: e => this.#onEdit(
+          (e.currentTarget as HTMLElement).dataset.index ?? '-1', e.detail.valueBeforeEditing, e.detail.newText),
+      onDelete: e => this.#onDelete((e.currentTarget as HTMLElement).dataset.index ?? '-1'),
     };
     this.#view(input, {}, this.contentElement);
   }

package/front_end/panels/settings/SettingsScreen.ts

@@ -59,7 +59,7 @@ const UIStrings = {
   /**
    * @description Message to display if a setting change requires a reload of DevTools
    */
-  oneOrMoreSettingsHaveChanged: 'One or more settings have changed which requires a reload to take effect',
+  settingsChangedReloadDevTools: 'Settings changed. To apply, reload DevTools.',
   /**
    * @description Warning text shown when the user has entered text to filter the
    * list of experiments, but no experiments match the filter.
@@ -465,7 +465,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
       experiment.setEnabled(checkbox.checked);
       Host.userMetrics.experimentChanged(experiment.name, experiment.isEnabled());
       UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
-          i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+          i18nString(UIStrings.settingsChangedReloadDevTools));
     }
     checkbox.addEventListener('click', listener, false);
 
@@ -675,7 +675,7 @@ function renderWidgetOptions(settings: GreenDev.GreenDevSettings): TemplateResul
       }
 
       UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
-          i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+          i18nString(UIStrings.settingsChangedReloadDevTools));
     };
   }
   // clang-format off
@@ -701,7 +701,7 @@ function renderPrototypeCheckboxes(
 
   function showChangeWarning(): void {
     UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
-        i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+        i18nString(UIStrings.settingsChangedReloadDevTools));
   }
   // clang-format off
   const checkboxes = Object.keys(settings).map(name => {

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -86,7 +86,8 @@ export class SourcesSearchScope implements Search.SearchScope.SearchScope {
       if (!searchInAnonymousAndContentScripts && project.type() === Workspace.Workspace.projectTypes.ContentScripts) {
         return false;
       }
-      if (!localOverridesEnabled && project.type() === Workspace.Workspace.projectTypes.FileSystem) {
+      if (!localOverridesEnabled && project.type() === Workspace.Workspace.projectTypes.FileSystem &&
+          Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.fileSystemType(project) === 'overrides') {
         return false;
       }
       return true;

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

@@ -9,9 +9,11 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as AIAssistance from '../../../models/ai_assistance/ai_assistance.js';
 import * as Trace from '../../../models/trace/trace.js';
 import type * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as Components from './components/components.js';
+import type {SectionPosition} from './components/TimespanBreakdownOverlay.js';
 
 const UIStrings = {
   /**
@@ -909,8 +911,13 @@ export class Overlays extends EventTarget {
       return;
     }
 
-    const component = element.querySelector('devtools-timespan-breakdown-overlay');
-    const elementSections = component?.renderedSections() ?? [];
+    const component = element.querySelector('.devtools-timespan-breakdown-overlay');
+
+    if (!component) {
+      return;
+    }
+
+    const widget = UI.Widget.Widget.get(component) as Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay;
 
     // Handle horizontal positioning.
     const leftEdgePixel = this.#xPixelForMicroSeconds('main', overlay.sections[0].bounds.min);
@@ -921,14 +928,11 @@ export class Overlays extends EventTarget {
     }
 
     const rangeWidth = rightEdgePixel - leftEdgePixel;
-    element.style.left = `${leftEdgePixel}px`;
-    element.style.width = `${rangeWidth}px`;
 
-    if (elementSections.length === 0) {
-      return;
-    }
+    widget.left = leftEdgePixel;
+    widget.width = rangeWidth;
 
-    let count = 0;
+    const widths: SectionPosition[] = [];
     for (const section of overlay.sections) {
       const leftPixel = this.#xPixelForMicroSeconds('main', section.bounds.min);
       const rightPixel = this.#xPixelForMicroSeconds('main', section.bounds.max);
@@ -936,18 +940,17 @@ export class Overlays extends EventTarget {
         return;
       }
       const rangeWidth = rightPixel - leftPixel;
-      const sectionElement = elementSections[count];
 
-      sectionElement.style.left = `${leftPixel}px`;
-      sectionElement.style.width = `${rangeWidth}px`;
-      count++;
+      widths.push({left: leftPixel, width: rangeWidth});
     }
 
+    widget.widths = widths;
+
     // Handle vertical positioning based on the entry's vertical position.
     if (overlay.entry && (overlay.renderLocation === 'BELOW_EVENT' || overlay.renderLocation === 'ABOVE_EVENT')) {
       // Max height for the overlay box when attached to an entry.
       const MAX_BOX_HEIGHT = 50;
-      element.style.maxHeight = `${MAX_BOX_HEIGHT}px`;
+      widget.maxHeight = MAX_BOX_HEIGHT;
 
       const y = this.yPixelForEventOnChart(overlay.entry);
       if (y === null) {
@@ -960,7 +963,7 @@ export class Overlays extends EventTarget {
 
       if (overlay.renderLocation === 'BELOW_EVENT') {
         const top = y + eventHeight;
-        element.style.top = `${top}px`;
+        widget.top = top;
       } else {
         // Some padding so the box hovers just on top.
         const PADDING = 7;
@@ -974,7 +977,7 @@ export class Overlays extends EventTarget {
         const height = Math.min(MAX_BOX_HEIGHT, minSpace);
 
         const top = bottom - height;
-        element.style.top = `${top}px`;
+        widget.top = top;
       }
     }
   }
@@ -1558,11 +1561,17 @@ export class Overlays extends EventTarget {
         return overlayElement;
       }
       case 'TIMESPAN_BREAKDOWN': {
-        const component = new Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay();
-        component.sections = overlay.sections;
-        component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
-        component.isBelowEntry = overlay.renderLocation === 'BELOW_EVENT';
-        overlayElement.appendChild(component);
+        const widget = document.createElement('devtools-widget') as
+            UI.Widget.WidgetElement<Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay>;
+
+        widget.widgetConfig = UI.Widget.widgetConfig(Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay, {
+          isBelowEntry: overlay.renderLocation === 'BELOW_EVENT',
+          canvasRect: this.#charts.mainChart.canvasBoundingClientRect(),
+          sections: overlay.sections,
+        });
+
+        overlayElement.appendChild(widget);
+
         return overlayElement;
       }
       case 'TIMINGS_MARKER': {
@@ -1685,10 +1694,16 @@ export class Overlays extends EventTarget {
         break;
       }
       case 'TIMESPAN_BREAKDOWN': {
-        const component = element.querySelector('devtools-timespan-breakdown-overlay');
-        if (component) {
-          component.sections = overlay.sections;
-          component.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
+        const component = element.querySelector('.devtools-timespan-breakdown-overlay');
+        if (!component) {
+          return;
+        }
+
+        const widget = UI.Widget.Widget.get(component) as Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay;
+
+        if (widget) {
+          widget.sections = overlay.sections;
+          widget.canvasRect = this.#charts.mainChart.canvasBoundingClientRect();
         }
         break;
       }
@@ -1737,8 +1752,14 @@ export class Overlays extends EventTarget {
       case 'ENTRIES_LINK':
         break;
       case 'TIMESPAN_BREAKDOWN': {
-        const component = element.querySelector('devtools-timespan-breakdown-overlay');
-        component?.checkSectionLabelPositioning();
+        const component = element.querySelector('.devtools-timespan-breakdown-overlay');
+
+        if (!component) {
+          return;
+        }
+
+        const widget = UI.Widget.Widget.get(component) as Components.TimespanBreakdownOverlay.TimespanBreakdownOverlay;
+        widget?.checkSectionLabelPositioning();
         break;
       }
       case 'TIMESTAMP_MARKER':

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

@@ -1,23 +1,110 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';
-import * as Lit from '../../../../ui/lit/lit.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../../../ui/lit/lit.js';
 
 import timespanBreakdownOverlayStyles from './timespanBreakdownOverlay.css.js';
 
-const {html} = Lit;
+export interface Input {
+  sections: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown[]|null;
+  positions: SectionPosition[];
+  left: number|null;
+  width: number|null;
+  maxHeight: number|null;
+  top: number|null;
+  className: string;
+}
+export interface SectionPosition {
+  left: number|null;
+  width: number|null;
+}
+
+type View = (input: Input, _output: undefined, target: HTMLElement) => void;
+
+const renderSection =
+    (section: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown, position: SectionPosition): TemplateResult => {
+      const style = Directives.styleMap(
+          {left: position ? `${position.left}px` : undefined, width: position ? `${position.width}px` : undefined});
+
+      // clang-format off
+    return html`
+      <div class="timespan-breakdown-overlay-section" style=${style}>
+        <div class="timespan-breakdown-overlay-label">
+          ${
+            section.showDuration ?
+                html`<span class="duration-text">${i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(section.bounds.range)}</span> ` :
+                nothing
+          }
+          <span class="section-label-text">${section.label}</span>
+        </div>
+      </div>`;
+      // clang-format on
+    };
+
+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'
+  });
+  // clang-format off
+  render(
+      html`
+        <style>${timespanBreakdownOverlayStyles}</style>
+        <div style=${style} class=${input.className}>
+          ${input.sections?.map((curr, index) => {
+            return renderSection(curr, input.positions[index]);
+          })}
+        </div>`,
+      target);
+  // clang-format off
+};
 
-export class TimespanBreakdownOverlay extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class TimespanBreakdownOverlay extends UI.Widget.Widget {
   #canvasRect: DOMRect|null = null;
   #sections: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown[]|null = null;
+  #sectionsPositions: SectionPosition[] = [];
+  #left: number|null = null;
+  #width: number|null = null;
+  #maxHeight: number|null = null;
+  #top: number|null = null;
+
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {classes: ['devtools-timespan-breakdown-overlay']});
+    this.#view = view;
+    this.requestUpdate();
+  }
+
+  set top(top: number) {
+    this.#top = top;
+    this.requestUpdate();
+  }
+
+  set maxHeight(maxHeight: number) {
+    this.#maxHeight = maxHeight;
+    this.requestUpdate();
+  }
+
+  set width(width: number) {
+    this.#width = width;
+    this.requestUpdate();
+  }
+
+  set left(left: number) {
+    this.#left = left;
+    this.requestUpdate();
+  }
 
   set isBelowEntry(isBelow: boolean) {
-    this.classList.toggle('is-below', isBelow);
+    this.element.classList.toggle('is-below', isBelow);
   }
 
   set canvasRect(rect: DOMRect|null) {
@@ -25,7 +112,16 @@ export class TimespanBreakdownOverlay extends HTMLElement {
       return;
     }
     this.#canvasRect = rect;
-    this.#render();
+    this.requestUpdate();
+  }
+
+  set widths(widths: SectionPosition[]) {
+    if (widths === this.#sectionsPositions) {
+      return;
+    }
+
+    this.#sectionsPositions = widths;
+    this.requestUpdate();
   }
 
   set sections(sections: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown[]|null) {
@@ -33,7 +129,7 @@ export class TimespanBreakdownOverlay extends HTMLElement {
       return;
     }
     this.#sections = sections;
-    this.#render();
+    this.requestUpdate();
   }
 
   /**
@@ -43,7 +139,7 @@ export class TimespanBreakdownOverlay extends HTMLElement {
    * align the text so the label is visible as long as possible.
    */
   checkSectionLabelPositioning(): void {
-    const sections = this.#shadow.querySelectorAll<HTMLElement>('.timespan-breakdown-overlay-section');
+    const sections = this.element.querySelectorAll<HTMLElement>('.timespan-breakdown-overlay-section');
     if (!sections) {
       return;
     }
@@ -139,40 +235,26 @@ export class TimespanBreakdownOverlay extends HTMLElement {
     }
   }
 
-  renderedSections(): HTMLElement[] {
-    return Array.from(this.#shadow.querySelectorAll('.timespan-breakdown-overlay-section'));
-  }
-
-  #renderSection(section: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <div class="timespan-breakdown-overlay-section">
-        <div class="timespan-breakdown-overlay-label">
-        ${section.showDuration ?
-          html`<span class="duration-text">${i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(section.bounds.range)}</span> ` : Lit.nothing}
-          <span class="section-label-text">${section.label}</span>
-        </div>
-      </div>`;
-    // clang-format on
-  }
+  override performUpdate(): void {
+    let className = 'timeline-segment-container';
 
-  #render(): void {
     if (this.#sections) {
-      this.classList.toggle('odd-number-of-sections', this.#sections.length % 2 === 1);
-      this.classList.toggle('even-number-of-sections', this.#sections.length % 2 === 0);
+      if(this.#sections.length % 2 === 0) {
+        className += ' even-number-of-sections';
+      } else {
+        className += ' odd-number-of-sections';
+      }
     }
-    Lit.render(
-        html`<style>${timespanBreakdownOverlayStyles}</style>
-             ${this.#sections?.map(this.#renderSection)}`,
-        this.#shadow, {host: this});
-    this.checkSectionLabelPositioning();
-  }
-}
 
-customElements.define('devtools-timespan-breakdown-overlay', TimespanBreakdownOverlay);
+    this.#view({sections: this.#sections,
+      positions: this.#sectionsPositions,
+      left: this.#left,
+      width: this.#width,
+      top: this.#top,
+      maxHeight: this.#maxHeight,
+      className
+    }, undefined, this.contentElement);
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-timespan-breakdown-overlay': TimespanBreakdownOverlay;
+    this.checkSectionLabelPositioning();
   }
 }