chrome-devtools-frontend 1.0.1593959 → 1.0.1595090

package/front_end/panels/issues/AffectedSelectivePermissionsInterventionView.ts

@@ -0,0 +1,120 @@
+// Copyright 2026 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 SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as Bindings from '../../models/bindings/bindings.js';
+import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as Components from '../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+
+import {AffectedResourcesView} from './AffectedResourcesView.js';
+
+const UIStrings = {
+  /**
+   * @description Label for number of affected resources indication in issue view
+   */
+  nViolations: '{n, plural, =1 {# violation} other {# violations}}',
+  /**
+   * @description Title for the API column in the Selective Permissions Intervention affected resources list
+   */
+  api: 'API',
+  /**
+   * @description Title for the Script column in the Selective Permissions Intervention affected resources list
+   */
+  script: 'Script',
+  /**
+   * @description Title for the Ad Ancestry column in the Selective Permissions Intervention affected resources list
+   */
+  adAncestry: 'Ad Ancestry',
+  /**
+   * @description Text for unknown value
+   */
+  unknown: 'unknown',
+  /**
+   * @description Text for loading state
+   */
+  loading: 'loading…',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedSelectivePermissionsInterventionView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class AffectedSelectivePermissionsInterventionView extends AffectedResourcesView {
+  readonly #linkifier = new Components.Linkifier.Linkifier();
+
+  protected getResourceNameWithCount(count: number): string {
+    return i18nString(UIStrings.nViolations, {n: count});
+  }
+
+  #render(): void {
+    const issues = Array.from(this.issue.getSelectivePermissionsInterventionIssues());
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(
+        html`
+      <tr>
+        <td class="affected-resource-header">${i18nString(UIStrings.api)}</td>
+        <td class="affected-resource-header">${i18nString(UIStrings.script)}</td>
+        <td class="affected-resource-header">${i18nString(UIStrings.adAncestry)}</td>
+      </tr>
+      ${issues.map(issue => this.#renderDetail(issue))}
+    `,
+        this.affectedResources, {host: this});
+    this.updateAffectedResourceCount(issues.length);
+  }
+
+  #renderDetail(issue: IssuesManager.SelectivePermissionsInterventionIssue.SelectivePermissionsInterventionIssue):
+      LitTemplate {
+    const details = issue.details();
+    const issuesModel = issue.model();
+
+    const stackTracePromise = (details.stackTrace && issuesModel) ?
+        this.#resolveStackTrace(details.stackTrace, issuesModel) :
+        Promise.resolve(html`<span>${i18nString(UIStrings.unknown)}</span>`);
+
+    const target = issuesModel ? issuesModel.target() : null;
+
+    return html`
+      <tr class="affected-resource-directive">
+        <td>${details.apiName}</td>
+        <td>${Directives.until(stackTracePromise, html`<span>${i18nString(UIStrings.loading)}</span>`)}</td>
+        <td class="affected-resource-cell">
+          <div class="ad-ancestry-list">
+            ${(details.adAncestry?.adAncestryChain || []).map(script => {
+      const link = this.#linkifier.linkifyScriptLocation(
+          target, script.scriptId, script.name as Platform.DevToolsPath.UrlString, 0);
+      return html`<div>${link}</div>`;
+    })}
+            ${
+        details.adAncestry?.rootScriptFilterlistRule ?
+            html`<div>Rule: ${details.adAncestry.rootScriptFilterlistRule}</div>` :
+            nothing}
+          </div>
+        </td>
+      </tr>
+    `;
+  }
+
+  async #resolveStackTrace(stackTrace: Protocol.Runtime.StackTrace, issuesModel: SDK.IssuesModel.IssuesModel):
+      Promise<LitTemplate> {
+    const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+    const stackTraceTranslated =
+        await debuggerWorkspaceBinding.createStackTraceFromProtocolRuntime(stackTrace, issuesModel.target());
+    return html`
+      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {
+      stackTrace: stackTraceTranslated,
+      options: {expandable: true},
+    })}>
+      </devtools-widget>
+    `;
+  }
+
+  update(): void {
+    this.requestResolver.clear();
+    this.#linkifier.reset();
+    this.#render();
+  }
+}

package/front_end/panels/issues/IssueView.ts

@@ -29,6 +29,7 @@ import {AffectedMetadataAllowedSitesView} from './AffectedMetadataAllowedSitesVi
 import {AffectedPartitioningBlobURLView} from './AffectedPartitioningBlobURLView.js';
 import {AffectedPermissionElementsView} from './AffectedPermissionElementsView.js';
 import {AffectedItem, AffectedResourcesView, extractShortPath} from './AffectedResourcesView.js';
+import {AffectedSelectivePermissionsInterventionView} from './AffectedSelectivePermissionsInterventionView.js';
 import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBufferIssueDetailsView.js';
 import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrackingSitesView} from './AffectedTrackingSitesView.js';
@@ -260,6 +261,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       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'),
+      new AffectedSelectivePermissionsInterventionView(this, this.#issue, 'selective-permissions-intervention-details'),
     ];
     this.#hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
     this.#aggregatedIssuesCount = null;

package/front_end/panels/issues/IssuesPane.ts

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

package/front_end/panels/issues/issues.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as AffectedSelectivePermissionsInterventionView from './AffectedSelectivePermissionsInterventionView.js';
 import * as IssueRevealer from './IssueRevealer.js';
 import * as IssuesPane from './IssuesPane.js';
 import * as IssueView from './IssueView.js';
 
 export {
+  AffectedSelectivePermissionsInterventionView,
   IssueRevealer,
   IssuesPane,
   IssueView,

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -11,6 +11,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import {type LighthouseController, type Preset, Presets, RuntimeSettings} from './LighthouseController.js';
 import type {LighthousePanel} from './LighthousePanel.js';
@@ -55,6 +56,78 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const renderStartView = (
+    _input: Record<string, never>,
+    output: {
+      helpText?: HTMLElement,
+      warningText?: HTMLElement,
+      modeFormElements?: HTMLElement,
+      deviceTypeFormElements?: HTMLElement,
+      categoriesFormElements?: HTMLElement,
+    },
+    target: HTMLElement,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <form class="lighthouse-start-view">
+        <header class="hbox">
+          <div class="lighthouse-logo"></div>
+          <div class="lighthouse-title">
+            ${i18nString(UIStrings.generateLighthouseReport)}
+          </div>
+          <div class="lighthouse-start-button-container"></div>
+        </header>
+        <div
+          ${Directives.ref(e => {
+            output.helpText = e as HTMLElement;
+          })}
+          class="lighthouse-help-text hidden"
+        ></div>
+        <div class="lighthouse-options hbox">
+          <div class="lighthouse-form-section">
+            <div
+              class="lighthouse-form-elements"
+              ${Directives.ref(e => {
+                output.modeFormElements = e as HTMLElement;
+              })}
+            ></div>
+          </div>
+          <div class="lighthouse-form-section">
+            <div
+              class="lighthouse-form-elements"
+              ${Directives.ref(e => {
+                output.deviceTypeFormElements = e as HTMLElement;
+              })}
+            ></div>
+          </div>
+          <div class="lighthouse-form-categories">
+            <fieldset class="lighthouse-form-section lighthouse-form-categories-fieldset">
+              <legend class="lighthouse-form-section-label">
+                ${i18nString(UIStrings.categories)}
+              </legend>
+              <div
+                class="lighthouse-form-elements"
+                ${Directives.ref(e => {
+                  output.categoriesFormElements = e as HTMLElement;
+                })}
+              ></div>
+            </fieldset>
+          </div>
+        </div>
+        <div
+          ${Directives.ref(e => {
+            output.warningText = e as HTMLElement;
+          })}
+          class="lighthouse-warning-text hidden"
+        ></div>
+      </form>
+    `,
+    target,
+  );
+  // clang-format on
+};
+
 export class StartView extends UI.Widget.Widget {
   private controller: LighthouseController;
   private panel: LighthousePanel;
@@ -145,13 +218,11 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  private populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
+  private populateFormControls(deviceTypeFormElements: Element, categoryFormElements: Element, mode?: string): void {
     // Populate the device type
-    const deviceTypeFormElements = fragment.$('device-type-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.device-type', i18nString(UIStrings.device), deviceTypeFormElements);
 
     // Populate the categories
-    const categoryFormElements = fragment.$('categories-form-elements') as HTMLElement;
 
     this.checkboxes = [];
     for (const preset of Presets) {
@@ -174,44 +245,34 @@ export class StartView extends UI.Widget.Widget {
     this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.#settingsToolbar);
 
     const {mode} = this.controller.getFlags();
-    this.populateStartButton(mode);
 
-    const fragment = UI.Fragment.Fragment.build`
-<form class="lighthouse-start-view">
-  <header class="hbox">
-    <div class="lighthouse-logo"></div>
-    <h1 class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</h1>
-    <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
-  </header>
-  <div $="help-text" class="lighthouse-help-text hidden"></div>
-  <div class="lighthouse-options hbox">
-    <div class="lighthouse-form-section">
-      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
-    </div>
-    <div class="lighthouse-form-section">
-      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
-    </div>
-    <div class="lighthouse-form-categories">
-      <fieldset class="lighthouse-form-section lighthouse-form-categories-fieldset">
-        <legend class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</legend>
-        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
-      </fieldset>
-    </div>
-  </div>
-  <div $="warning-text" class="lighthouse-warning-text hidden"></div>
-</form>
-    `;
-
-    this.helpText = fragment.$('help-text');
-    this.warningText = fragment.$('warning-text');
-
-    const modeFormElements = fragment.$('mode-form-elements');
-    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+    const output = {
+      helpText: undefined as HTMLElement | undefined,
+      warningText: undefined as HTMLElement | undefined,
+      modeFormElements: undefined as HTMLElement | undefined,
+      deviceTypeFormElements: undefined as HTMLElement | undefined,
+      categoriesFormElements: undefined as HTMLElement | undefined,
+    };
+
+    renderStartView(
+        {},
+        output,
+        this.contentElement,
+    );
 
-    this.populateFormControls(fragment, mode);
+    this.helpText = output.helpText;
+    this.warningText = output.warningText;
 
-    this.contentElement.textContent = '';
-    this.contentElement.append(fragment.element());
+    const modeFormElements = output.modeFormElements;
+    const deviceTypeFormElements = output.deviceTypeFormElements;
+    const categoriesFormElements = output.categoriesFormElements;
+
+    if (!modeFormElements || !deviceTypeFormElements || !categoriesFormElements) {
+      throw new Error('Required elements not found in template');
+    }
+
+    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+    this.populateFormControls(deviceTypeFormElements, categoriesFormElements, mode);
 
     this.refresh();
   }

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
 import type {LighthousePanel} from './LighthousePanel.js';
@@ -37,6 +38,43 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseTimespanView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const renderTimespanView = (
+    input: {
+      cancelButton: Element,
+      endButton: Element,
+    },
+    output: {
+      statusHeader?: HTMLElement,
+      contentContainer?: HTMLElement,
+    },
+    target: ShadowRoot,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <div class="lighthouse-view vbox">
+        <span
+          ${Directives.ref(e => {
+            output.statusHeader = e as HTMLElement;
+          })}
+          class="header"
+        ></span>
+        <span
+          ${Directives.ref(e => {
+            output.contentContainer = e as HTMLElement;
+          })}
+          class="lighthouse-dialog-text"
+        ></span>
+        <div class="lighthouse-action-buttons hbox">
+          ${input.cancelButton} ${input.endButton}
+        </div>
+      </div>
+    `,
+    target,
+  );
+  // clang-format on
+};
+
 export class TimespanView extends UI.Dialog.Dialog {
   private panel: LighthousePanel;
   private statusHeader: Element|null;
@@ -90,20 +128,21 @@ export class TimespanView extends UI.Dialog.Dialog {
       className: 'cancel',
       jslogContext: 'lighthouse.cancel',
     });
-    const fragment = UI.Fragment.Fragment.build`
-  <div class="lighthouse-view vbox">
-  <span $="status-header" class="header"></span>
-  <span $="call-to-action" class="lighthouse-dialog-text"></span>
-  <div class="lighthouse-action-buttons hbox">
-  ${cancelButton}
-  ${this.endButton}
-  </div>
-  </div>
-  `;
-
-    this.statusHeader = fragment.$('status-header');
-    this.contentContainer = fragment.$('call-to-action');
-    dialogRoot.appendChild(fragment.element());
+
+    const output = {
+      statusHeader: undefined as HTMLElement | undefined,
+      contentContainer: undefined as HTMLElement | undefined,
+    };
+
+    renderTimespanView(
+        {
+          cancelButton,
+          endButton: this.endButton,
+        },
+        output, dialogRoot);
+
+    this.statusHeader = output.statusHeader ?? null;
+    this.contentContainer = output.contentContainer ?? null;
 
     this.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     this.setMaxContentSize(new Geometry.Size(500, 400));

package/front_end/panels/lighthouse/RadioSetting.ts

@@ -2,10 +2,13 @@
 // 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 */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import type * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 
+const {ifDefined} = Directives;
 interface RadioOption {
   value: string;
   label: () => Common.UIString.LocalizedString;
@@ -28,25 +31,36 @@ export class RadioSetting {
     UI.ARIAUtils.markAsRadioGroup(this.element);
 
     this.radioElements = [];
-    for (const option of this.options) {
-      const fragment = UI.Fragment.Fragment.build`
-  <label $="label" class="lighthouse-radio">
-  <input $="input" type="radio" value=${option.value} name=${setting.name}>
-  <span $="span" class="lighthouse-radio-text">${option.label()}</span>
-  </label>
-  `;
-
-      this.element.appendChild(fragment.element());
-
-      const tooltip = option.tooltip?.() || description;
-      if (description) {
-        UI.Tooltip.Tooltip.install(fragment.$('input') as HTMLElement, tooltip);
-        UI.Tooltip.Tooltip.install(fragment.$('span') as HTMLElement, tooltip);
-      }
-      const radioElement = fragment.$('input') as HTMLInputElement;
-      radioElement.addEventListener('change', this.valueChanged.bind(this));
-      this.radioElements.push(radioElement);
-    }
+    // clang-format off
+    render(
+      html`
+        ${this.options.map(option => {
+          const tooltip = option.tooltip?.() || description;
+          return html`
+            <label class="lighthouse-radio">
+              <input
+                type="radio"
+                value=${option.value}
+                name=${setting.name}
+                @change=${this.valueChanged.bind(this)}
+                title=${ifDefined(description ? tooltip : undefined)}
+                ${Directives.ref(el => {
+                    this.radioElements.push(el as HTMLInputElement);
+                  }
+                )}
+              />
+              <span
+                class="lighthouse-radio-text"
+               title=${ifDefined(description ? tooltip : undefined)}
+                >${option.label()}</span
+              >
+            </label>
+          `;
+        })}
+      `,
+      this.element,
+    );
+    // clang-format on
 
     this.ignoreChangeEvents = false;
     this.selectedIndex = -1;

package/front_end/panels/lighthouse/lighthouse.ts

@@ -11,6 +11,7 @@ import * as LighthouseReportRenderer from './LighthouseReportRenderer.js';
 import * as LighthouseReportSelector from './LighthouseReportSelector.js';
 import * as LighthouseStartView from './LighthouseStartView.js';
 import * as LighthouseStatusView from './LighthouseStatusView.js';
+import * as LighthouseTimespanView from './LighthouseTimespanView.js';
 import * as RadioSetting from './RadioSetting.js';
 
 export {
@@ -21,5 +22,6 @@ export {
   LighthouseReportSelector,
   LighthouseStartView,
   LighthouseStatusView,
+  LighthouseTimespanView,
   RadioSetting,
 };

package/front_end/panels/media/PlayerMessagesView.ts

@@ -2,6 +2,7 @@
 // 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 */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/legacy.js';
 
@@ -9,6 +10,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import playerMessagesViewStyles from './playerMessagesView.css.js';
@@ -339,59 +341,70 @@ export class PlayerMessagesView extends UI.Widget.VBox {
     UI.UIUtils.createTextChild(container, message.message);
   }
 
-  private errorToDiv(error: Protocol.Media.PlayerError): Element {
-    const entry = UI.Fragment.Fragment.build`
-    <div class="status-error-box">
-    <div class="status-error-field-labeled">
-      <span class="status-error-field-label" $="status-error-group"></span>
-      <span>${error.errorType}</span>
-    </div>
-    <div class="status-error-field-labeled">
-      <span class="status-error-field-label" $="status-error-code"></span>
-      <span>${error.code}</span>
-    </div>
-    <div class="status-error-field-labeled" $="status-error-data">
-    </div>
-    <div class="status-error-field-labeled" $="status-error-stack">
-    </div>
-    <div class="status-error-field-labeled" $="status-error-cause">
-    </div>
+  private renderError(error: Protocol.Media.PlayerError): LitTemplate {
+    // clang-format off
+    return html`
+      <div class="status-error-box">
+        <div class="status-error-field-labeled">
+          <span class="status-error-field-label"
+            >${i18nString(UIStrings.errorGroupLabel)}</span
+          >
+          <span>${error.errorType}</span>
+        </div>
+        <div class="status-error-field-labeled">
+          <span class="status-error-field-label"
+            >${i18nString(UIStrings.errorCodeLabel)}</span
+          >
+          <span>${error.code}</span>
+        </div>
+        <div class="status-error-field-labeled">
+        ${
+          Object.keys(error.data).length !== 0
+            ? html`<span class="status-error-field-label"
+                  >${i18nString(UIStrings.errorDataLabel)}</span
+                >
+                <div>
+                  ${Object.entries(error.data).map(
+                    ([key, value]) => html`<div>${key}: ${value}</div>`,
+                  )}
+                </div>`
+            : nothing
+        }
+        </div>
+        <div class="status-error-field-labeled">
+          ${
+            error.stack.length !== 0
+              ? html`<span class="status-error-field-label"
+                    >${i18nString(UIStrings.errorStackLabel)}</span
+                  >
+                  <div>
+                    ${error.stack.map(
+                      stackEntry =>
+                        html`<div>${stackEntry.file}:${stackEntry.line}</div>`,
+                    )}
+                  </div>`
+              : nothing
+          }
+        </div>
+        <div class="status-error-field-labeled">
+          ${
+            error.cause.length !== 0
+              ? html`
+                  <span class="status-error-field-label"
+                    >${i18nString(UIStrings.errorCauseLabel)}</span
+                  >
+                  ${this.renderError(error.cause[0])}
+                `
+              : nothing
+          }
+        </div>
+      </div>
     `;
-
-    entry.$('status-error-group').textContent = i18nString(UIStrings.errorGroupLabel);
-    entry.$('status-error-code').textContent = i18nString(UIStrings.errorCodeLabel);
-
-    if (Object.keys(error.data).length !== 0) {
-      const label = entry.$('status-error-data').createChild('span', 'status-error-field-label');
-      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorDataLabel));
-      const dataContent = entry.$('status-error-data').createChild('div');
-      for (const [key, value] of Object.entries(error.data)) {
-        const datumContent = dataContent.createChild('div');
-        UI.UIUtils.createTextChild(datumContent, `${key}: ${value}`);
-      }
-    }
-
-    if (error.stack.length !== 0) {
-      const label = entry.$('status-error-stack').createChild('span', 'status-error-field-label');
-      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorStackLabel));
-      const stackContent = entry.$('status-error-stack').createChild('div');
-      for (const stackEntry of error.stack) {
-        const frameBox = stackContent.createChild('div');
-        UI.UIUtils.createTextChild(frameBox, `${stackEntry.file}:${stackEntry.line}`);
-      }
-    }
-
-    if (error.cause.length !== 0) {
-      const label = entry.$('status-error-cause').createChild('span', 'status-error-field-label');
-      UI.UIUtils.createTextChild(label, i18nString(UIStrings.errorCauseLabel));
-      entry.$('status-error-cause').appendChild(this.errorToDiv(error.cause[0]));
-    }
-
-    return entry.element();
+    // clang-format on
   }
 
   addError(error: Protocol.Media.PlayerError): void {
     const container = this.bodyPanel.createChild('div', 'media-messages-message-container media-message-error');
-    container.appendChild(this.errorToDiv(error));
+    render(this.renderError(error), container);
   }
 }