chrome-devtools-frontend 1.0.1593518 → 1.0.1595090

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -10,6 +10,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -19,8 +20,14 @@ const UIStrings = {
   /**
    * @description Title of the device dimensions selection item in the Device Mode Toolbar.
    * webpage in pixels.
+   * @example {Responsive} PH1
    */
-  dimensions: 'Dimensions',
+  dimensions: 'Dimensions: {PH1}',
+  /**
+   * @description Title of the device pixel ratio selection item in the Device Mode Toolbar.
+   * @example {2.0} PH1
+   */
+  dpr: 'DPR: {PH1}',
   /**
    * @description Title of the width input textbox in the Device Mode Toolbar, for the width of the
    * webpage in pixels.
@@ -53,12 +60,12 @@ const UIStrings = {
    */
   moreOptions: 'More options',
   /**
-   * @description A context menu item in the Device Mode Toolbar. This is a command to resize the
-   * webpage preview to fit the current window. The placeholder is the percentage of full-size that
-   * will be displayed after fitting.
+   * @description A menu item in the drop-down box that allows the user to select the zoom level.
+   * Labels the value which corresponds to the 'fit to window' zoom level, represented by the
+   * placeholder, which is a number. In the Device Mode Toolbar.
    * @example {30.0} PH1
    */
-  fitToWindowF: 'Fit to window ({PH1}%)',
+  fitToWindowPercentage: '{PH1}% (fit to window)',
   /**
    * @description A checkbox setting that appears in the context menu for the zoom level, in the
    * Device Mode Toolbar.
@@ -70,7 +77,7 @@ const UIStrings = {
    * placeholder, which is a number. In the Device Mode Toolbar.
    * @example {4.3} PH1
    */
-  defaultF: 'Default: {PH1}',
+  defaultF: '{PH1} (default)',
   /**
    * @description Command to hide the frame (like a picture frame) around the mobile device screen.
    */
@@ -163,6 +170,11 @@ const UIStrings = {
    * @description Tooltip of the rotate/screen orientation button.
    */
   screenOrientationOptions: 'Screen orientation options',
+  /**
+   * @description Tooltip shown on the rotate button when screen orientation is locked by the page
+   * via screen.orientation.lock().
+   */
+  screenOrientationLocked: 'Screen orientation is locked by the page',
   /**
    * @description Tooltip for a button which turns on/off dual-screen mode, which emulates devices
    * like tablets which have two screens.
@@ -284,6 +296,9 @@ export class DeviceModeToolbar {
         new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this), undefined, undefined, 'device');
     this.deviceSelectItem.turnShrinkable();
     this.deviceSelectItem.setDarkText();
+    const dimensionsSpan =
+        uiI18n.getFormatLocalizedString(str_, UIStrings.dimensions, {PH1: this.deviceSelectItem.element});
+    mainToolbar.append(...dimensionsSpan.childNodes);
     mainToolbar.appendToolbarItem(this.deviceSelectItem);
 
     this.widthInput.addEventListener('sizechanged', ({size: width}) => {
@@ -315,6 +330,11 @@ export class DeviceModeToolbar {
     this.scaleItem.turnShrinkable();
     this.scaleItem.setDarkText();
     mainToolbar.appendToolbarItem(this.scaleItem);
+
+    const autoAdjustScaleButton = new UI.Toolbar.ToolbarSettingToggle(
+        this.autoAdjustScaleSetting, 'center-focus-weak', i18nString(UIStrings.autoadjustZoom));
+    mainToolbar.appendToolbarItem(autoAdjustScaleButton);
+
     mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
 
     this.deviceScaleItem = new UI.Toolbar.ToolbarMenuButton(
@@ -323,6 +343,8 @@ export class DeviceModeToolbar {
     this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get());
     setTitleForButton(this.deviceScaleItem, i18nString(UIStrings.devicePixelRatio));
     this.deviceScaleItem.setDarkText();
+    const deviceScaleSpan = uiI18n.getFormatLocalizedString(str_, UIStrings.dpr, {PH1: this.deviceScaleItem.element});
+    mainToolbar.append(...deviceScaleSpan.childNodes);
     mainToolbar.appendToolbarItem(this.deviceScaleItem);
     mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     this.uaItem =
@@ -374,11 +396,16 @@ export class DeviceModeToolbar {
     return optionsToolbar;
   }
 
+  private getDevicePostureOptions(): Array<{title: string, value: string, selected: boolean}> {
+    const currentPosture = this.currentDevicePosture();
+    return ['Continuous', 'Folded'].map(title => ({title, value: title, selected: currentPosture === title}));
+  }
+
   private appendDevicePostureItems(contextMenu: UI.ContextMenu.ContextMenu): void {
-    for (const title of ['Continuous', 'Folded']) {
+    for (const option of this.getDevicePostureOptions()) {
       contextMenu.defaultSection().appendCheckboxItem(
-          title, this.spanClicked.bind(this),
-          {checked: title === this.currentDevicePosture(), jslogContext: title.toLowerCase()});
+          option.title, this.spanClicked.bind(this),
+          {checked: option.selected, jslogContext: option.title.toLowerCase()});
     }
   }
 
@@ -392,27 +419,43 @@ export class DeviceModeToolbar {
     return 'Continuous';
   }
 
-  private appendScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+  private getScaleOptions(): Array<{title: string, value: number, selected: boolean, jslogContext: string}> {
+    const values = [0.5, 0.75, 1, 1.25, 1.5, 2];
+    let fitValue: number|null = null;
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
-      contextMenu.footerSection().appendItem(
-          i18nString(UIStrings.fitToWindowF, {PH1: this.getPrettyFitZoomPercentage()}),
-          this.onScaleMenuChanged.bind(this, this.model.fitScale()), {jslogContext: 'fit-to-window'});
-    }
-    contextMenu.footerSection().appendCheckboxItem(
-        i18nString(UIStrings.autoadjustZoom), this.onAutoAdjustScaleChanged.bind(this),
-        {checked: this.autoAdjustScaleSetting.get(), jslogContext: 'auto-adjust-zoom'});
-    const boundAppendScaleItem = appendScaleItem.bind(this);
-    boundAppendScaleItem('50%', 0.5);
-    boundAppendScaleItem('75%', 0.75);
-    boundAppendScaleItem('100%', 1);
-    boundAppendScaleItem('125%', 1.25);
-    boundAppendScaleItem('150%', 1.5);
-    boundAppendScaleItem('200%', 2);
-
-    function appendScaleItem(this: DeviceModeToolbar, title: string, value: number): void {
+      fitValue = this.model.fitScale();
+      const fitValuePct = (fitValue * 100).toFixed(0);
+      let found = false;
+      for (let i = 0; i < values.length; ++i) {
+        if ((values[i] * 100).toFixed(0) === fitValuePct) {
+          found = true;
+          values[i] = fitValue;
+          break;
+        }
+      }
+      if (!found) {
+        values.push(fitValue);
+        values.sort((a, b) => a - b);
+      }
+    }
+
+    const currentScale = this.model.scaleSetting().get();
+    return values.map(value => {
+      let title = (value * 100).toFixed(0) + '%';
+      let jslogContext = title;
+      if (value === fitValue) {
+        title = i18nString(UIStrings.fitToWindowPercentage, {PH1: (value * 100).toFixed(0)});
+        jslogContext = 'fit-to-window';
+      }
+      return {title, value, selected: currentScale === value, jslogContext};
+    });
+  }
+
+  private appendScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    for (const option of this.getScaleOptions()) {
       contextMenu.defaultSection().appendCheckboxItem(
-          title, this.onScaleMenuChanged.bind(this, value),
-          {checked: this.model.scaleSetting().get() === value, jslogContext: title});
+          option.title, this.onScaleMenuChanged.bind(this, option.value),
+          {checked: option.selected, jslogContext: option.jslogContext});
     }
   }
 
@@ -420,41 +463,68 @@ export class DeviceModeToolbar {
     this.model.scaleSetting().set(value);
   }
 
-  private onAutoAdjustScaleChanged(): void {
-    this.autoAdjustScaleSetting.set(!this.autoAdjustScaleSetting.get());
-  }
-
-  private appendDeviceScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+  private getDeviceScaleFactorOptions():
+      Array<{title: string, value: number, selected: boolean, jslogContext: string}> {
     const deviceScaleFactorSetting = this.model.deviceScaleFactorSetting();
     const defaultValue = this.model.uaSetting().get() === EmulationModel.DeviceModeModel.UA.MOBILE ||
             this.model.uaSetting().get() === EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH ?
         EmulationModel.DeviceModeModel.defaultMobileScaleFactor :
         window.devicePixelRatio;
-    appendDeviceScaleFactorItem(
-        contextMenu.headerSection(), i18nString(UIStrings.defaultF, {PH1: defaultValue}), 0, 'dpr-default');
-    appendDeviceScaleFactorItem(contextMenu.defaultSection(), '1', 1, 'dpr-1');
-    appendDeviceScaleFactorItem(contextMenu.defaultSection(), '2', 2, 'dpr-2');
-    appendDeviceScaleFactorItem(contextMenu.defaultSection(), '3', 3, 'dpr-3');
+    const values = [1, 2, 3];
+    if (!values.includes(defaultValue)) {
+      values.push(defaultValue);
+      values.sort((a, b) => a - b);
+    }
+
+    const currentDPR = deviceScaleFactorSetting.get();
+    return values.map(value => {
+      let title = String(value);
+      let jslogContext = `dpr-${value}`;
+      if (value === defaultValue) {
+        title = i18nString(UIStrings.defaultF, {PH1: value});
+        jslogContext = 'dpr-default';
+      }
+      return {
+        title,
+        value: value === defaultValue ? 0 : value,
+        selected: currentDPR === value || (value === defaultValue && currentDPR === 0),
+        jslogContext
+      };
+    });
+  }
 
-    function appendDeviceScaleFactorItem(
-        section: UI.ContextMenu.Section, title: string, value: number, jslogContext: string): void {
-      section.appendCheckboxItem(
-          title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, value),
-          {checked: deviceScaleFactorSetting.get() === value, jslogContext});
+  private appendDeviceScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const deviceScaleFactorSetting = this.model.deviceScaleFactorSetting();
+    for (const option of this.getDeviceScaleFactorOptions()) {
+      contextMenu.defaultSection().appendCheckboxItem(
+          option.title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, option.value),
+          {checked: option.selected, jslogContext: option.jslogContext});
     }
   }
 
-  private appendUserAgentMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+  private getUserAgentOptions():
+      Array<{title: string, value: EmulationModel.DeviceModeModel.UA, selected: boolean, jslogContext: string}> {
     const uaSetting = this.model.uaSetting();
-    appendUAItem(EmulationModel.DeviceModeModel.UA.MOBILE, EmulationModel.DeviceModeModel.UA.MOBILE);
-    appendUAItem(EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH, EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH);
-    appendUAItem(EmulationModel.DeviceModeModel.UA.DESKTOP, EmulationModel.DeviceModeModel.UA.DESKTOP);
-    appendUAItem(EmulationModel.DeviceModeModel.UA.DESKTOP_TOUCH, EmulationModel.DeviceModeModel.UA.DESKTOP_TOUCH);
+    const currentUserAgent = uaSetting.get();
+    return [
+      EmulationModel.DeviceModeModel.UA.MOBILE,
+      EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH,
+      EmulationModel.DeviceModeModel.UA.DESKTOP,
+      EmulationModel.DeviceModeModel.UA.DESKTOP_TOUCH,
+    ].map(value => ({
+            title: value,
+            value,
+            selected: currentUserAgent === value,
+            jslogContext: Platform.StringUtilities.toKebabCase(value)
+          }));
+  }
 
-    function appendUAItem(title: string, value: EmulationModel.DeviceModeModel.UA): void {
+  private appendUserAgentMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const uaSetting = this.model.uaSetting();
+    for (const option of this.getUserAgentOptions()) {
       contextMenu.defaultSection().appendCheckboxItem(
-          title, uaSetting.set.bind(uaSetting, value),
-          {checked: uaSetting.get() === value, jslogContext: Platform.StringUtilities.toKebabCase(value)});
+          option.title, uaSetting.set.bind(uaSetting, option.value),
+          {checked: option.selected, jslogContext: option.jslogContext});
     }
   }
 
@@ -539,25 +609,75 @@ export class DeviceModeToolbar {
     return this.standardDevices().concat(this.customDevices());
   }
 
+  private getDeviceModeOptions(): {
+    responsive: {title: string, selected: boolean, jslogContext: string},
+    standard: Array<{
+      device: EmulationModel.EmulatedDevices.EmulatedDevice,
+      title: string,
+      selected: boolean,
+      jslogContext: string,
+    }>,
+    custom: Array<{
+      device: EmulationModel.EmulatedDevices.EmulatedDevice,
+      title: string,
+      selected: boolean,
+      jslogContext: string,
+    }>,
+    edit: {title: string, jslogContext: string},
+  } {
+    return {
+      responsive: {
+        title: i18nString(UIStrings.responsive),
+        selected: this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive,
+        jslogContext: 'responsive'
+      },
+      standard: this.standardDevices().map(device => ({
+                                             device,
+                                             title: device.title,
+                                             selected: this.model.device() === device,
+                                             jslogContext: Platform.StringUtilities.toKebabCase(device.title)
+                                           })),
+      custom: this.customDevices().map(device => ({
+                                         device,
+                                         title: device.title,
+                                         selected: this.model.device() === device,
+                                         jslogContext: Platform.StringUtilities.toKebabCase(device.title)
+                                       })),
+      edit: {
+        title: i18nString(UIStrings.edit),
+        jslogContext: 'edit',
+      }
+    };
+  }
+
   private appendDeviceMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const options = this.getDeviceModeOptions();
+
     contextMenu.headerSection().appendCheckboxItem(
-        i18nString(UIStrings.responsive), this.switchToResponsive.bind(this),
-        {checked: this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive, jslogContext: 'responsive'});
-    appendGroup.call(this, this.standardDevices());
-    appendGroup.call(this, this.customDevices());
-    contextMenu.footerSection().appendItem(
-        i18nString(UIStrings.edit), this.emulatedDevicesList.revealCustomSetting.bind(this.emulatedDevicesList),
-        {jslogContext: 'edit'});
+        options.responsive.title, this.switchToResponsive.bind(this),
+        {checked: options.responsive.selected, jslogContext: options.responsive.jslogContext});
+
+    appendGroup.call(this, options.standard);
+    appendGroup.call(this, options.custom);
 
-    function appendGroup(this: DeviceModeToolbar, devices: EmulationModel.EmulatedDevices.EmulatedDevice[]): void {
-      if (!devices.length) {
+    contextMenu.footerSection().appendItem(
+        options.edit.title, this.emulatedDevicesList.revealCustomSetting.bind(this.emulatedDevicesList),
+        {jslogContext: options.edit.jslogContext});
+
+    function appendGroup(this: DeviceModeToolbar, group: Array<{
+                           device: EmulationModel.EmulatedDevices.EmulatedDevice,
+                           title: string,
+                           selected: boolean,
+                           jslogContext: string,
+                         }>): void {
+      if (!group.length) {
         return;
       }
       const section = contextMenu.section();
-      for (const device of devices) {
-        section.appendCheckboxItem(device.title, this.emulateDevice.bind(this, device), {
-          checked: this.model.device() === device,
-          jslogContext: Platform.StringUtilities.toKebabCase(device.title),
+      for (const item of group) {
+        section.appendCheckboxItem(item.title, this.emulateDevice.bind(this, item.device), {
+          checked: item.selected,
+          jslogContext: item.jslogContext,
         });
       }
     }
@@ -617,6 +737,9 @@ export class DeviceModeToolbar {
   private modeMenuClicked(event: {
     data: Event,
   }): void {
+    if (this.model.isScreenOrientationLocked()) {
+      return;
+    }
     const device = this.model.device();
     const model = this.model;
     const autoAdjustScaleSetting = this.autoAdjustScaleSetting;
@@ -737,7 +860,7 @@ export class DeviceModeToolbar {
 
     const deviceScale = this.model.appliedDeviceScaleFactor();
     if (deviceScale !== this.cachedDeviceScale) {
-      this.deviceScaleItem.setText(`DPR: ${deviceScale.toFixed(1)}`);
+      this.deviceScaleItem.setText(`${deviceScale.toFixed(1)}`);
       this.cachedDeviceScale = deviceScale;
     }
 
@@ -755,7 +878,7 @@ export class DeviceModeToolbar {
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device && device) {
       deviceItemTitle = device.title;
     }
-    this.deviceSelectItem.setText(`${i18nString(UIStrings.dimensions)}: ${deviceItemTitle}`);
+    this.deviceSelectItem.setText(deviceItemTitle);
 
     if (this.model.device() !== this.cachedModelDevice) {
       const device = this.model.device();
@@ -804,6 +927,23 @@ export class DeviceModeToolbar {
       }
       this.persistenceSetting.set(value);
     }
+
+    // When screen orientation is locked by the page (via screen.orientation.lock()),
+    // disable the rotate button to prevent user-initiated rotation.
+    // When unlocked, restore the button to its normal state.
+    if (this.model.isScreenOrientationLocked()) {
+      this.modeButton.setEnabled(false);
+      setTitleForButton(this.modeButton, i18nString(UIStrings.screenOrientationLocked));
+    } else if (this.cachedModelDevice) {
+      const modeCount = this.cachedModelDevice.modes.length;
+      this.modeButton.setEnabled(modeCount >= 2);
+      setTitleForButton(
+          this.modeButton,
+          modeCount === 2 ? i18nString(UIStrings.rotate) : i18nString(UIStrings.screenOrientationOptions));
+    } else if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+      this.modeButton.setEnabled(true);
+      setTitleForButton(this.modeButton, i18nString(UIStrings.rotate));
+    }
   }
 
   restore(): void {

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/HiddenIssuesRow.ts

@@ -66,7 +66,7 @@ export class HiddenIssuesRow extends UI.TreeOutline.TreeElement {
   #view: View;
 
   constructor(view: View = DEFAULT_VIEW) {
-    super(undefined, true);
+    super(undefined, true, 'hidden-issues');
     this.#view = view;
     this.toggleOnClick = true;
     this.listItemElement.classList.add('issue-category', 'hidden-issues');

package/front_end/panels/issues/IssueKindView.ts

@@ -5,6 +5,7 @@
 
 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 IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
@@ -64,7 +65,7 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
   #issueCount: HTMLElement;
 
   constructor(kind: IssuesManager.Issue.IssueKind) {
-    super(undefined, true);
+    super(undefined, true, Platform.StringUtilities.toKebabCase(kind));
     this.#kind = kind;
     this.#issueCount = document.createElement('span');
 

package/front_end/panels/issues/IssueView.ts

@@ -6,7 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import type {AggregatedIssue} from '../../models/issues_manager/IssueAggregator.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -24,12 +24,12 @@ import {AffectedDescendantsWithinSelectElementView} from './AffectedDescendantsW
 import {AffectedDirectivesView} from './AffectedDirectivesView.js';
 import {AffectedDocumentsInQuirksModeView} from './AffectedDocumentsInQuirksModeView.js';
 import {AffectedElementsView} from './AffectedElementsView.js';
-import {AffectedElementsWithLowContrastView} from './AffectedElementsWithLowContrastView.js';
 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 {AffectedSelectivePermissionsInterventionView} from './AffectedSelectivePermissionsInterventionView.js';
 import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBufferIssueDetailsView.js';
 import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrackingSitesView} from './AffectedTrackingSitesView.js';
@@ -230,7 +230,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #contentCreated = false;
 
   constructor(issue: AggregatedIssue, description: IssuesManager.MarkdownIssueDescription.IssueDescription) {
-    super();
+    super(undefined, undefined, Platform.StringUtilities.toKebabCase(issue.getCategory()));
     this.#issue = issue;
     this.#description = description;
     this.#throttle = new Common.Throttler.Throttler(250);
@@ -251,7 +251,6 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new AffectedDirectivesView(this, this.#issue, 'directives-details'),
       new AffectedBlockedByResponseView(this, this.#issue, 'blocked-by-response-details'),
       new AffectedSharedArrayBufferIssueDetailsView(this, this.#issue, 'sab-details'),
-      new AffectedElementsWithLowContrastView(this, this.#issue, 'low-contrast-details'),
       new CorsIssueDetailsView(this, this.#issue, 'cors-details'),
       new GenericIssueDetailsView(this, this.#issue, 'generic-details'),
       new AffectedDocumentsInQuirksModeView(this, this.#issue, 'affected-documents'),
@@ -262,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

@@ -7,7 +7,7 @@ import '../../ui/legacy/legacy.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -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_);
@@ -121,7 +125,7 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
   #category: IssuesManager.Issue.IssueCategory;
 
   constructor(category: IssuesManager.Issue.IssueCategory) {
-    super();
+    super(undefined, undefined, Platform.StringUtilities.toKebabCase(category));
     this.#category = category;
 
     this.toggleOnClick = true;
@@ -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,