chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/issues/AffectedPermissionElementsView.ts

@@ -0,0 +1,46 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
+import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import {AffectedElementsView} from './AffectedElementsView.js';
+
+const UIStrings = {
+  /**
+   * @description Noun for singular or plural number of affected element resource indication in issue view.
+   */
+  nElements: '{n, plural, =1 {# element} other {# elements}}',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedPermissionElementsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class AffectedPermissionElementsView extends AffectedElementsView {
+  override update(): void {
+    this.clear();
+    void this.#appendAffectedElements(this.issue.getPermissionElementIssues());
+  }
+
+  protected override getResourceNameWithCount(count: number): Platform.UIString.LocalizedString {
+    return i18nString(UIStrings.nElements, {n: count});
+  }
+
+  async #appendAffectedElements(issues: Iterable<IssuesManager.PermissionElementIssue.PermissionElementIssue>):
+      Promise<void> {
+    let count = 0;
+    for (const issue of issues) {
+      for (const element of issue.elements()) {
+        const rowElement = UI.Fragment.html`
+    <tr>
+      ${await this.createElementCell(element, this.issue.getCategory())}
+    </tr>`;
+        this.affectedResources.appendChild(rowElement);
+        count++;
+      }
+    }
+    this.updateAffectedResourceCount(count);
+  }
+}

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -12,8 +12,8 @@ import type * as Protocol from '../../generated/protocol.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
 import type * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_link_icon.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -180,7 +180,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     const frameCell = document.createElement('td');
     frameCell.classList.add('affected-resource-cell');
     if (frame) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'code-circle';
       icon.classList.add('link', 'elements-panel', 'medium');
       icon.onclick = async () => {

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -109,7 +109,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
     const element = document.createElement('tr');
     element.classList.add('affected-resource-directive');
 
-    const details = issue.issueDetails;
+    const details = issue.details();
 
     switch (issueCode) {
       case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_SOURCE_HEADER:
@@ -154,7 +154,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
 
   async #appendElementOrEmptyCell(
       parent: HTMLElement, issue: IssuesManager.AttributionReportingIssue.AttributionReportingIssue): Promise<void> {
-    const details = issue.issueDetails;
+    const details = issue.details();
     if (details.violatingNodeId !== undefined) {
       const target = issue.model()?.target() || null;
       parent.appendChild(await this.createElementCell(

package/front_end/panels/issues/IssueKindView.ts

@@ -7,8 +7,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Components from './components/components.js';
@@ -93,7 +93,7 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     const header = document.createElement('div');
     header.classList.add('header');
 
-    const issueKindIcon = new IconButton.Icon.Icon();
+    const issueKindIcon = new Icon();
     issueKindIcon.name = IssueCounter.IssueCounter.getIssueKindIconName(this.#kind);
     issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
 

package/front_end/panels/issues/IssueView.ts

@@ -12,9 +12,9 @@ import type {AggregatedIssue} from '../../models/issues_manager/IssueAggregator.
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -28,6 +28,7 @@ import {AffectedElementsWithLowContrastView} from './AffectedElementsWithLowCont
 import {AffectedHeavyAdView} from './AffectedHeavyAdView.js';
 import {AffectedMetadataAllowedSitesView} from './AffectedMetadataAllowedSitesView.js';
 import {AffectedPartitioningBlobURLView} from './AffectedPartitioningBlobURLView.js';
+import {AffectedPermissionElementsView} from './AffectedPermissionElementsView.js';
 import {AffectedItem, AffectedResourcesView, extractShortPath} from './AffectedResourcesView.js';
 import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBufferIssueDetailsView.js';
 import {AffectedSourcesView} from './AffectedSourcesView.js';
@@ -159,7 +160,7 @@ class AffectedMixedContentView extends AffectedResourcesView {
 
     let count = 0;
     for (const issue of mixedContentIssues) {
-      const details = issue.getDetails();
+      const details = issue.details();
       this.appendAffectedMixedContent(details);
       count++;
     }
@@ -221,7 +222,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   affectedResources: UI.TreeOutline.TreeElement;
   readonly #affectedResourceViews: AffectedResourcesView[];
   #aggregatedIssuesCount: HTMLElement|null;
-  #issueKindIcon: IconButton.Icon.Icon|null = null;
+  #issueKindIcon: Icon|null = null;
   #hasBeenExpandedBefore: boolean;
   #throttle: Common.Throttler.Throttler;
   #needsUpdateOnExpand = true;
@@ -260,6 +261,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new AffectedMetadataAllowedSitesView(this, this.#issue, 'metadata-allowed-sites-details'),
       new AffectedDescendantsWithinSelectElementView(this, this.#issue, 'disallowed-select-descendants-details'),
       new AffectedPartitioningBlobURLView(this, this.#issue, 'partitioning-blob-url-details'),
+      new AffectedPermissionElementsView(this, this.#issue, 'permission-element-elements'),
     ];
     this.#hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
     this.#aggregatedIssuesCount = null;
@@ -336,7 +338,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #appendHeader(): void {
     const header = document.createElement('div');
     header.classList.add('header');
-    this.#issueKindIcon = new IconButton.Icon.Icon();
+    this.#issueKindIcon = new Icon();
     this.#issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
     this.#aggregatedIssuesCount = document.createElement('span');
     const countAdorner = new Adorners.Adorner.Adorner();

package/front_end/panels/issues/IssuesPane.ts

@@ -106,6 +106,10 @@ const UIStrings = {
    * @description Category title for the different 'Generic' issues.
    */
   generic: 'Generic',
+  /**
+   * @description Category title for a group of permission element issues
+   */
+  permissionElement: 'PEPC Element',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/issues/IssuesPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -147,6 +151,8 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
         return i18nString(UIStrings.quirksMode);
       case IssuesManager.Issue.IssueCategory.GENERIC:
         return i18nString(UIStrings.generic);
+      case IssuesManager.Issue.IssueCategory.PERMISSION_ELEMENT:
+        return i18nString(UIStrings.permissionElement);
       case IssuesManager.Issue.IssueCategory.OTHER:
         return i18nString(UIStrings.other);
     }

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

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import type * as Timeline from '../timeline/timeline.js';
 
@@ -61,9 +62,10 @@ UI.ViewManager.registerViewExtension({
   order: 66,
   hasToolbar: false,
   isPreviewFeature: true,
-  async loadView() {
+  async loadView(universe) {
     const Timeline = await loadTimelineModule();
-    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null});
+    const resourceLoader = universe.context.get(SDK.PageResourceLoader.PageResourceLoader);
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, resourceLoader});
   },
 });
 

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -2,13 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import layerDetailsViewStyles from './layerDetailsView.css.js';
@@ -21,6 +19,8 @@ import {
   Type,
 } from './LayerViewHost.js';
 
+const {html, nothing} = Lit;
+
 const UIStrings = {
   /**
    * @description Text in Layer Details View of the Layers panel
@@ -140,37 +140,159 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/LayerDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  layer: SDK.LayerTreeBase.Layer|null;
+  snapshotSelection: SnapshotSelection|null;
+  compositingReasons: string[];
+  onScrollRectClick: (index: number, event: Event) => void;
+  onPaintProfilerRequested: () => void;
+}
+
+export type ViewOutput = undefined;
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  const {layer, snapshotSelection, compositingReasons, onScrollRectClick, onPaintProfilerRequested} = input;
+
+  if (!layer) {
+    // clang-format off
+    Lit.render(html`<div class="layer-details-container">
+      <devtools-widget class="learn-more" .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+        header: i18nString(UIStrings.noLayerSelected),
+        text: i18nString(UIStrings.selectALayerToSeeItsDetails)})}>
+      </devtools-widget>
+    </div>`, target);
+    // clang-format on
+    return;
+  }
+
+  const slowScrollRects = layer.scrollRects();
+  const stickyPositionConstraint = layer.stickyPositionConstraint();
+
+  const formatStickyAncestorLayer = (title: string, layer: SDK.LayerTreeBase.Layer|null): string => {
+    if (!layer) {
+      return '';
+    }
+    const node = layer.nodeForSelfOrAncestor();
+    const name = node ? node.simpleSelector() : i18nString(UIStrings.unnamed);
+    return i18nString(UIStrings.stickyAncestorLayersS, {PH1: title, PH2: name, PH3: layer.id()});
+  };
+
+  const renderStickyPositionConstraint = (constraint: SDK.LayerTreeBase.StickyPositionConstraint|null): Lit.LitTemplate|
+                                         typeof nothing => {
+    if (!constraint) {
+      return nothing;
+    }
+    const stickyBoxRect = constraint.stickyBoxRect();
+    const containingBlockRect = constraint.containingBlockRect();
+    const nearestLayerShiftingStickyBox = constraint.nearestLayerShiftingStickyBox();
+    const nearestLayerShiftingContainingBlock = constraint.nearestLayerShiftingContainingBlock();
+
+    // clang-format off
+    return html`
+      <span>${i18nString(
+        UIStrings.stickyBoxRectangleDimensions,
+        {PH1: stickyBoxRect.width, PH2: stickyBoxRect.height, PH3: stickyBoxRect.x, PH4: stickyBoxRect.y})}</span>
+      <span>, </span>
+      <span>${i18nString(UIStrings.containingBlocRectangleDimensions, {
+        PH1: containingBlockRect.width,
+        PH2: containingBlockRect.height,
+        PH3: containingBlockRect.x,
+        PH4: containingBlockRect.y,
+      })}</span>
+      ${nearestLayerShiftingStickyBox ? html`, <span>${
+                                            formatStickyAncestorLayer(
+                                                i18nString(UIStrings.nearestLayerShiftingStickyBox),
+                                                nearestLayerShiftingStickyBox)}</span>` :
+                                        nothing}
+      ${nearestLayerShiftingContainingBlock ? html`, <span>${
+                                                  formatStickyAncestorLayer(
+                                                      i18nString(UIStrings.nearestLayerShiftingContaining),
+                                                      nearestLayerShiftingContainingBlock)}</span>` :
+                                              nothing}
+    `;
+    // clang-format on
+  };
+
+  // clang-format off
+  Lit.render(
+      html`
+    <div class="layer-details-container">
+      <table>
+        <tbody>
+          <tr>
+            <td>${i18nString(UIStrings.size)}</td>
+            <td>${i18nString(
+              UIStrings.updateRectangleDimensions,
+              {PH1: layer.width(), PH2: layer.height(), PH3: layer.offsetX(), PH4: layer.offsetY()})}</td>
+          </tr>
+          <tr>
+            <td>${i18nString(UIStrings.compositingReasons)}</td>
+            <td>
+              ${!compositingReasons.length ? 'n/a' :
+                                       html`<ul>${compositingReasons.map(reason => html`<li>${reason}</li>`)}</ul>`}
+            </td>
+          </tr>
+          <tr>
+            <td>${i18nString(UIStrings.memoryEstimate)}</td>
+            <td>${i18n.ByteUtilities.bytesToString(layer.gpuMemoryUsage())}</td>
+          </tr>
+          <tr>
+            <td>${i18nString(UIStrings.paintCount)}</td>
+            <td>${layer.paintCount()}</td>
+          </tr>
+          <tr>
+            <td>${i18nString(UIStrings.slowScrollRegions)}</td>
+            <td>
+              ${slowScrollRects.map((scrollRect, index) => html`
+                ${index > 0 ? ', ' : ''}
+                <span class="scroll-rect" @click=${(e: Event) => onScrollRectClick(index, e)}
+                      jslog=${VisualLogging.action('layers.select-object').track({click: true})}>
+                  ${i18nString(UIStrings.scrollRectangleDimensions, {
+                    PH1: String(slowScrollRectNames.get(scrollRect.type as unknown as SDK.LayerTreeBase.Layer.ScrollRectType)?.()),
+                    PH2: scrollRect.rect.width,
+                    PH3: scrollRect.rect.height,
+                    PH4: scrollRect.rect.x,
+                    PH5: scrollRect.rect.y,
+                  })}
+                </span>`)}
+            </td>
+          </tr>
+          <tr>
+            <td>${i18nString(UIStrings.stickyPositionConstraint)}</td>
+            <td>${renderStickyPositionConstraint(stickyPositionConstraint)}</td>
+          </tr>
+        </tbody>
+      </table>
+      ${snapshotSelection ? html`
+      <button class="devtools-link link-margin text-button link-style"
+              @click=${onPaintProfilerRequested}
+              jslog=${VisualLogging.action('layers.paint-profiler').track({click: true, keydown: 'Enter'})}>
+        ${i18nString(UIStrings.paintProfiler)}
+      </button>` : nothing}
+    </div>`,
+      target);
+  // clang-format on
+};
+
 export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
     UI.Widget.Widget) implements LayerView {
   private readonly layerViewHost: LayerViewHost;
-  private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
   private layerSnapshotMap: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
-  private tableElement!: HTMLElement;
-  private tbodyElement!: HTMLElement;
-  private sizeCell!: HTMLElement;
-  private compositingReasonsCell!: HTMLElement;
-  private memoryEstimateCell!: HTMLElement;
-  private paintCountCell!: HTMLElement;
-  private scrollRectsCell!: HTMLElement;
-  private stickyPositionConstraintCell!: HTMLElement;
-  private paintProfilerLink!: HTMLElement;
   private selection: Selection|null;
+  private compositingReasons: string[] = [];
+  private readonly view: typeof DEFAULT_VIEW;
 
-  constructor(layerViewHost: LayerViewHost) {
+  constructor(layerViewHost: LayerViewHost, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
     super({
       jslog: `${VisualLogging.pane('layers-details')}`,
       useShadowDom: true,
     });
+    this.view = view;
     this.registerRequiredCSS(layerDetailsViewStyles);
-    this.contentElement.classList.add('layer-details-container');
-
     this.layerViewHost = layerViewHost;
     this.layerViewHost.registerView(this);
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noLayerSelected), i18nString(UIStrings.selectALayerToSeeItsDetails));
     this.layerSnapshotMap = this.layerViewHost.getLayerSnapshotMap();
-
-    this.buildContent();
     this.selection = null;
   }
 
@@ -213,143 +335,37 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
     }
   }
 
-  private createScrollRectElement(scrollRect: Protocol.LayerTree.ScrollRect, index: number): void {
-    if (index) {
-      UI.UIUtils.createTextChild(this.scrollRectsCell, ', ');
-    }
-    const element = this.scrollRectsCell.createChild('span', 'scroll-rect');
-    if (this.selection && (this.selection as ScrollRectSelection).scrollRectIndex === index) {
-      element.classList.add('active');
-    }
-    element.textContent = i18nString(UIStrings.scrollRectangleDimensions, {
-      PH1: String(slowScrollRectNames.get(scrollRect.type as unknown as SDK.LayerTreeBase.Layer.ScrollRectType)?.()),
-      PH2: scrollRect.rect.width,
-      PH3: scrollRect.rect.height,
-      PH4: scrollRect.rect.x,
-      PH5: scrollRect.rect.y,
-    });
-    element.addEventListener('click', this.onScrollRectClicked.bind(this, index), false);
-    element.setAttribute('jslog', `${VisualLogging.action('layers.select-object').track({click: true})}`);
-  }
-
-  private formatStickyAncestorLayer(title: string, layer: SDK.LayerTreeBase.Layer|null): string {
-    if (!layer) {
-      return '';
-    }
-
-    const node = layer.nodeForSelfOrAncestor();
-    const name = node ? node.simpleSelector() : i18nString(UIStrings.unnamed);
-    return i18nString(UIStrings.stickyAncestorLayersS, {PH1: title, PH2: name, PH3: layer.id()});
-  }
-
-  private createStickyAncestorChild(title: string, layer: SDK.LayerTreeBase.Layer|null): void {
-    if (!layer) {
-      return;
-    }
-
-    UI.UIUtils.createTextChild(this.stickyPositionConstraintCell, ', ');
-    const child = this.stickyPositionConstraintCell.createChild('span');
-    child.textContent = this.formatStickyAncestorLayer(title, layer);
-  }
-
-  private populateStickyPositionConstraintCell(constraint: SDK.LayerTreeBase.StickyPositionConstraint|null): void {
-    this.stickyPositionConstraintCell.removeChildren();
-    if (!constraint) {
-      return;
-    }
-
-    const stickyBoxRect = constraint.stickyBoxRect();
-    const stickyBoxRectElement = this.stickyPositionConstraintCell.createChild('span');
-    stickyBoxRectElement.textContent = i18nString(
-        UIStrings.stickyBoxRectangleDimensions,
-        {PH1: stickyBoxRect.width, PH2: stickyBoxRect.height, PH3: stickyBoxRect.x, PH4: stickyBoxRect.y});
-
-    UI.UIUtils.createTextChild(this.stickyPositionConstraintCell, ', ');
-
-    const containingBlockRect = constraint.containingBlockRect();
-    const containingBlockRectElement = this.stickyPositionConstraintCell.createChild('span');
-    containingBlockRectElement.textContent = i18nString(UIStrings.containingBlocRectangleDimensions, {
-      PH1: containingBlockRect.width,
-      PH2: containingBlockRect.height,
-      PH3: containingBlockRect.x,
-      PH4: containingBlockRect.y,
-    });
-
-    this.createStickyAncestorChild(
-        i18nString(UIStrings.nearestLayerShiftingStickyBox), constraint.nearestLayerShiftingStickyBox());
-    this.createStickyAncestorChild(
-        i18nString(UIStrings.nearestLayerShiftingContaining), constraint.nearestLayerShiftingContainingBlock());
-  }
-
   update(): void {
     const layer = this.selection?.layer();
-    if (!layer) {
-      this.tableElement.remove();
-      this.paintProfilerLink.remove();
-      this.emptyWidget.show(this.contentElement);
-      return;
+    if (layer) {
+      void layer.requestCompositingReasons().then(this.updateCompositingReasons.bind(this));
+    } else {
+      this.compositingReasons = [];
     }
-    this.emptyWidget.detach();
-    this.contentElement.appendChild(this.tableElement);
-    this.contentElement.appendChild(this.paintProfilerLink);
-    this.sizeCell.textContent = i18nString(
-        UIStrings.updateRectangleDimensions,
-        {PH1: layer.width(), PH2: layer.height(), PH3: layer.offsetX(), PH4: layer.offsetY()});
-    if (this.paintCountCell.parentElement) {
-      this.paintCountCell.parentElement.classList.toggle('hidden', !layer.paintCount());
-    }
-    this.paintCountCell.textContent = String(layer.paintCount());
-    this.memoryEstimateCell.textContent = i18n.ByteUtilities.bytesToString(layer.gpuMemoryUsage());
-    void layer.requestCompositingReasons().then(this.updateCompositingReasons.bind(this));
-    this.scrollRectsCell.removeChildren();
-    layer.scrollRects().forEach(this.createScrollRectElement.bind(this));
-    this.populateStickyPositionConstraintCell(layer.stickyPositionConstraint());
-    const snapshot = this.selection && this.selection.type() === Type.SNAPSHOT ?
-        (this.selection as SnapshotSelection).snapshot() :
-        null;
-
-    this.paintProfilerLink.classList.toggle('hidden', !(this.layerSnapshotMap.has(layer) || snapshot));
+    this.requestUpdate();
   }
 
-  private buildContent(): void {
-    this.tableElement = this.contentElement.createChild('table');
-    this.tbodyElement = this.tableElement.createChild('tbody');
-    this.sizeCell = this.createRow(i18nString(UIStrings.size));
-    this.compositingReasonsCell = this.createRow(i18nString(UIStrings.compositingReasons));
-    this.memoryEstimateCell = this.createRow(i18nString(UIStrings.memoryEstimate));
-    this.paintCountCell = this.createRow(i18nString(UIStrings.paintCount));
-    this.scrollRectsCell = this.createRow(i18nString(UIStrings.slowScrollRegions));
-    this.stickyPositionConstraintCell = this.createRow(i18nString(UIStrings.stickyPositionConstraint));
-    this.paintProfilerLink =
-        this.contentElement.createChild('button', 'hidden devtools-link link-margin text-button link-style');
-    UI.ARIAUtils.markAsLink(this.paintProfilerLink);
-    this.paintProfilerLink.textContent = i18nString(UIStrings.paintProfiler);
-    this.paintProfilerLink.tabIndex = 0;
-    this.paintProfilerLink.addEventListener('click', e => {
-      e.consume(true);
-      this.invokeProfilerLink();
-    });
-    this.paintProfilerLink.setAttribute(
-        'jslog', `${VisualLogging.action('layers.paint-profiler').track({click: true, keydown: 'Enter'})}`);
+  private updateCompositingReasons(compositingReasons: string[]): void {
+    this.compositingReasons = compositingReasons;
+    this.requestUpdate();
   }
 
-  private createRow(title: string): HTMLElement {
-    const tr = this.tbodyElement.createChild('tr');
-    const titleCell = tr.createChild('td');
-    titleCell.textContent = title;
-    return tr.createChild('td');
-  }
+  override performUpdate(): void {
+    const layer = this.selection?.layer() || null;
+    const snapshotSelection = (this.selection && this.selection.type() === Type.SNAPSHOT ?
+                                   (this.selection as SnapshotSelection) :
+                                   (layer ? this.layerSnapshotMap.get(layer) : null)) ||
+        null;
 
-  private updateCompositingReasons(compositingReasons: string[]): void {
-    if (!compositingReasons?.length) {
-      this.compositingReasonsCell.textContent = 'n/a';
-      return;
-    }
-    this.compositingReasonsCell.removeChildren();
-    const list = this.compositingReasonsCell.createChild('ul');
-    for (const compositingReason of compositingReasons) {
-      list.createChild('li').textContent = compositingReason;
-    }
+    this.view(
+        {
+          layer,
+          snapshotSelection,
+          compositingReasons: this.compositingReasons,
+          onScrollRectClick: this.onScrollRectClicked.bind(this),
+          onPaintProfilerRequested: this.invokeProfilerLink.bind(this),
+        },
+        undefined, this.contentElement);
   }
 }