chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -4,15 +4,19 @@
 
 export const buildPropertyDefinitionText = (property: string, value?: string): string => {
   if (value === undefined) {
-    return buildPropertyText(property);
+    return buildPropertyName(property);
   }
   return '<code class="unbreakable-text"><span class="property">' + property + '</span>: ' + value + '</code>';
 };
 
-export const buildPropertyText = (property: string): string => {
+export const buildPropertyName = (property: string): string => {
   return '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
 };
 
+export const buildPropertyValue = (property: string): string => {
+  return '<code class="unbreakable-text">' + property + '</code>';
+};
+
 export const isFlexContainer = (computedStyles?: Map<string, string>): boolean => {
   if (!computedStyles) {
     return false;
@@ -21,6 +25,32 @@ export const isFlexContainer = (computedStyles?: Map<string, string>): boolean =
   return display === 'flex' || display === 'inline-flex';
 };
 
+export const isInlineElement = (computedStyles?: Map<string, string>): boolean => {
+  if (!computedStyles) {
+    return false;
+  }
+  return computedStyles.get('display') === 'inline';
+};
+
+// See https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements
+const possiblyReplacedElements = new Set([
+  'audio',
+  'canvas',
+  'embed',
+  'iframe',
+  'img',
+  'input',
+  'object',
+  'video',
+]);
+
+export const isPossiblyReplacedElement = (nodeName?: string): boolean => {
+  if (!nodeName) {
+    return false;
+  }
+  return possiblyReplacedElements.has(nodeName);
+};
+
 export const isGridContainer = (computedStyles?: Map<string, string>): boolean => {
   if (!computedStyles) {
     return false;

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -75,7 +75,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
   }
 
   private onKeyDown(event: KeyboardEvent): void {
-    if (!(event.key === 'Enter') && !isEscKey(event)) {
+    if (!(event.key === 'Enter') && !Platform.KeyboardUtilities.isEscKey(event)) {
       return;
     }
 
@@ -88,7 +88,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
 
     const eventTarget = (event.target as HTMLElement);
     let text: ''|string = (eventTarget.textContent as string);
-    if (isEscKey(event)) {
+    if (Platform.KeyboardUtilities.isEscKey(event)) {
       if (!Platform.StringUtilities.isWhitespace(text)) {
         event.consume(true);
       }

package/front_end/panels/elements/ElementsPanel.ts

@@ -811,6 +811,18 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
+  selectAndShowSidebarTab(tabId: SidebarPaneTabId): void {
+    if (!this.sidebarPaneView) {
+      return;
+    }
+
+    this.sidebarPaneView.tabbedPane().selectTab(tabId);
+
+    if (!this.isShowing()) {
+      void UI.ViewManager.ViewManager.instance().showView('elements');
+    }
+  }
+
   private updateBreadcrumbIfNeeded(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>): void {
     const nodes = event.data;
     /* If we don't have a selected node then we can tell the breadcrumbs that & bail. */
@@ -936,7 +948,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       stylePaneWrapperElement.style.setProperty('left', `${- 1 * largeLength}px`);
       stylePaneWrapperElement.style.setProperty('padding-left', `${largeLength}px`);
       stylePaneWrapperElement.style.setProperty('width', `calc(100% + ${largeLength}px)`);
-      stylePaneWrapperElement.style.setProperty('position', 'absolute');
+      stylePaneWrapperElement.style.setProperty('position', 'fixed');
 
       stylePaneWrapperElement.window().addEventListener('blur', uninstallHackBound);
       stylePaneWrapperElement.window().addEventListener('contextmenu', uninstallHackBound, true);
@@ -1425,6 +1437,12 @@ export class ElementsActionDelegate implements UI.ActionRegistration.ActionDeleg
         void SDK.DOMModel.DOMModelUndoStack.instance().redo();
         ElementsPanel.instance().stylesWidget.forceUpdate();
         return true;
+      case 'elements.show-styles':
+        ElementsPanel.instance().selectAndShowSidebarTab(SidebarPaneTabId.Styles);
+        return true;
+      case 'elements.show-computed':
+        ElementsPanel.instance().selectAndShowSidebarTab(SidebarPaneTabId.Computed);
+        return true;
     }
     return false;
   }

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -34,8 +34,10 @@
 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 * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -230,7 +232,7 @@ export class StylePropertiesSection {
         this.onFontEditorButtonClicked();
       }, this);
       this.fontEditorButton.element.addEventListener('keydown', event => {
-        if (isEnterOrSpaceKey(event)) {
+        if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
           event.consume(true);
           this.onFontEditorButtonClicked();
         }

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -442,6 +442,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     valueElement.textContent = lengthText;
     cssLength.data = {
       lengthText,
+      overloaded: this.overloadedInternal,
     };
     cssLength.append(valueElement);
 
@@ -761,6 +762,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateAuthoringHint(): void {
+    this.listItemElement.classList.remove('inactive-property');
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS)) {
       return;
     }
@@ -776,14 +778,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
+    const localName = this.node()?.localName();
     for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
-      const hint =
-          validator.getHint(propertyName, this.computedStyles || undefined, this.parentsComputedStyles || undefined);
+      const hint = validator.getHint(
+          propertyName, this.computedStyles || undefined, this.parentsComputedStyles || undefined,
+          localName?.toLowerCase());
       if (hint) {
         Host.userMetrics.cssHintShown(validator.getMetricType());
         const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
         activeHints.set(hintIcon, hint);
         this.listItemElement.append(hintIcon);
+        this.listItemElement.classList.add('inactive-property');
         break;
       }
     }
@@ -1174,7 +1179,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const keyboardEvent = (event as KeyboardEvent);
     const target = (keyboardEvent.target as HTMLElement);
     let result;
-    if (keyboardEvent.key === 'Enter' && !keyboardEvent.shiftKey) {
+    if ((keyboardEvent.key === 'Enter' && !keyboardEvent.shiftKey) ||
+        (context.isEditingName && keyboardEvent.key === ' ')) {
       result = 'forward';
     } else if (
         keyboardEvent.keyCode === UI.KeyboardShortcut.Keys.Esc.code ||

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -76,6 +76,10 @@ const UIStrings = {
   */
   noMatchingSelectorOrStyle: 'No matching selector or style',
   /**
+  *@description Label text to show the number of rules hidden by the filter in the Styles Sidebar Pane of the Elements panel
+  */
+  hiddenStyleCount: '{n, plural, =1 {1 hidden rule} other {# hidden rules}}',
+  /**
   *@description Text in Styles Sidebar Pane of the Elements panel
   */
   invalidPropertyValue: 'Invalid property value',
@@ -195,6 +199,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private pendingWidgetToggle: UI.Toolbar.ToolbarToggle|null;
   private toolbar: UI.Toolbar.Toolbar|null;
   private toolbarPaneElement: HTMLElement;
+  private filterInput: Element|null;
+  private hiddenRulesElement: HTMLElement|null;
   private noMatchesElement: HTMLElement;
   private sectionsContainer: HTMLElement;
   sectionByElement: WeakMap<Node, StylePropertiesSection>;
@@ -239,11 +245,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.pendingWidget = null;
     this.pendingWidgetToggle = null;
     this.toolbar = null;
+    this.hiddenRulesElement = null;
     this.toolbarPaneElement = this.createStylesSidebarToolbar();
     this.computedStyleModelInternal = new ComputedStyleModel();
+    this.filterInput = null;
 
-    this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
+    this.noMatchesElement = this.contentElement.createChild('label', 'gray-info-message hidden');
     this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingSelectorOrStyle);
+    this.noMatchesElement.setAttribute('for', 'filter-input-field');
 
     this.sectionsContainer = this.contentElement.createChild('div');
     UI.ARIAUtils.markAsList(this.sectionsContainer);
@@ -392,6 +401,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     input.type = 'search';
     input.classList.add('custom-search-input');
     input.placeholder = placeholder;
+    input.id = 'filter-input-field';
 
     function searchHandler(): void {
       const regex = input.value ? new RegExp(Platform.StringUtilities.escapeForRegExp(input.value), 'i') : null;
@@ -933,11 +943,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     let lastLayers: SDK.CSSLayer.CSSLayer[]|null = null;
     let sawLayers: boolean = false;
 
-    const layersExperimentEnabled = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_LAYERS);
     const addLayerSeparator = (style: SDK.CSSStyleDeclaration.CSSStyleDeclaration): void => {
-      if (!layersExperimentEnabled) {
-        return;
-      }
       const parentRule = style.parentRule;
       if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
         const layers = parentRule.layers;
@@ -1065,16 +1071,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       blocks.push(block);
     }
 
-    if (layersExperimentEnabled) {
-      // If we have seen a layer in matched styles we enable
-      // the layer widget button.
-      if (sawLayers) {
-        LayersWidget.ButtonProvider.instance().item().setVisible(true);
-      } else if (LayersWidget.LayersWidget.instance().isShowing()) {
-        // Since the button for toggling the layers view is now hidden
-        // we ensure that the layers view is not currently toggled.
-        ElementsPanel.instance().showToolbarPane(null, LayersWidget.ButtonProvider.instance().item());
-      }
+    // If we have seen a layer in matched styles we enable
+    // the layer widget button.
+    if (sawLayers) {
+      LayersWidget.ButtonProvider.instance().item().setVisible(true);
+    } else if (LayersWidget.LayersWidget.instance().isShowing()) {
+      // Since the button for toggling the layers view is now hidden
+      // we ensure that the layers view is not currently toggled.
+      ElementsPanel.instance().showToolbarPane(null, LayersWidget.ButtonProvider.instance().item());
     }
 
     await this.idleCallbackManager.awaitDone();
@@ -1154,11 +1158,23 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   private updateFilter(): void {
+    let hiddenBlockCount = 0;
     let hasAnyVisibleBlock = false;
     for (const block of this.sectionBlocks) {
-      hasAnyVisibleBlock = block.updateFilter() || hasAnyVisibleBlock;
+      const visible = block.updateFilter();
+      hasAnyVisibleBlock = visible || hasAnyVisibleBlock;
+      if (!visible) {
+        hiddenBlockCount++;
+      }
     }
+
+    // If aria-label is present, other labels won't be read by screen readers
+    this.filterInput?.removeAttribute('aria-label');
     this.noMatchesElement.classList.toggle('hidden', Boolean(hasAnyVisibleBlock));
+
+    if (this.hiddenRulesElement !== null) {
+      this.hiddenRulesElement.textContent = i18nString(UIStrings.hiddenStyleCount, {n: hiddenBlockCount});
+    }
   }
 
   willHide(): void {
@@ -1293,10 +1309,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const container = this.contentElement.createChild('div', 'styles-sidebar-pane-toolbar-container');
     const hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar');
     const filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
-    const filterInput = StylesSidebarPane.createPropertyFilterElement(
+    this.filterInput = StylesSidebarPane.createPropertyFilterElement(
         i18nString(UIStrings.filter), hbox, this.onFilterChanged.bind(this));
-    UI.ARIAUtils.setAccessibleName(filterInput, i18nString(UIStrings.filterStyles));
-    filterContainerElement.appendChild(filterInput);
+    UI.ARIAUtils.setAccessibleName(this.filterInput, i18nString(UIStrings.filterStyles));
+    filterContainerElement.appendChild(this.filterInput);
     const toolbar = new UI.Toolbar.Toolbar('styles-pane-toolbar', hbox);
     toolbar.makeToggledGray();
     void toolbar.appendItemsAtLocation('styles-sidebarpane-toolbar');
@@ -1304,6 +1320,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const toolbarPaneContainer = container.createChild('div', 'styles-sidebar-toolbar-pane-container');
     const toolbarPaneContent = (toolbarPaneContainer.createChild('div', 'styles-sidebar-toolbar-pane') as HTMLElement);
 
+    this.hiddenRulesElement = filterContainerElement.createChild('label', 'filter-results-matches');
+    this.hiddenRulesElement.setAttribute('for', 'filter-input-field');
+
     return toolbarPaneContent;
   }
 
@@ -1698,6 +1717,14 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         this.tabKeyPressed();
         keyboardEvent.preventDefault();
         return;
+      case ' ':
+        if (this.isEditingName) {
+          // Since property names cannot contain a space
+          // we accept available autocompletions for property name when the user presses space.
+          this.tabKeyPressed();
+          keyboardEvent.preventDefault();
+          return;
+        }
     }
 
     super.onKeyDown(keyboardEvent);

package/front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -20,7 +20,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html, Directives} = LitHtml;
 
 interface Hint {
-  getPrefix(): string;
   getMessage(): string;
   getPossibleFixMessage(): string|null;
   getLearnMoreLink(): string|undefined;
@@ -44,7 +43,7 @@ export class CSSHintDetailsView extends HTMLElement {
       render(html`
         <div class="hint-popup-wrapper">
           <div class="hint-popup-reason">
-              <strong>${this.#authoringHint.getPrefix()}:</strong> ${Directives.unsafeHTML(this.#authoringHint.getMessage())}
+            ${Directives.unsafeHTML(this.#authoringHint.getMessage())}
           </div>
           ${this.#authoringHint.getPossibleFixMessage() ? html`
               <div class="hint-popup-possible-fix">

package/front_end/panels/elements/components/CSSPropertyIconResolver.ts

@@ -298,9 +298,8 @@ const flexContainerIcons = new Map([
   ['align-content: space-evenly', flexAlignContentIcon('align-content-space-evenly-icon')],
   ['align-content: flex-end', flexAlignContentIcon('align-content-end-icon')],
   ['align-content: flex-start', flexAlignContentIcon('align-content-start-icon')],
-  // TODO(crbug.com/1139945): Start & end should be enabled once Chromium supports them for flexbox.
-  // ['align-content: start', flexAlignContentIcon('align-content-start-icon')],
-  // ['align-content: end', flexAlignContentIcon('align-content-end-icon')],
+  ['align-content: start', flexAlignContentIcon('align-content-start-icon')],
+  ['align-content: end', flexAlignContentIcon('align-content-end-icon')],
   ['align-content: normal', flexAlignContentIcon('align-content-stretch-icon')],
   ['align-content: revert', flexAlignContentIcon('align-content-stretch-icon')],
   ['align-content: unset', flexAlignContentIcon('align-content-stretch-icon')],

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -20,6 +20,14 @@ const UIStrings = {
   * @description Accessible name for DOM tree breadcrumb navigation.
   */
   breadcrumbs: 'DOM tree breadcrumbs',
+  /**
+  * @description A label/tooltip for a button that scrolls the breadcrumbs bar to the left to show more entries.
+  */
+  scrollLeft: 'Scroll left',
+  /**
+  * @description A label/tooltip for a button that scrolls the breadcrumbs bar to the right to show more entries.
+  */
+  scrollRight: 'Scroll right',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/ElementsBreadcrumbs.ts', UIStrings);
@@ -252,12 +260,15 @@ export class ElementsBreadcrumbs extends HTMLElement {
       hidden: this.#overflowing === false,
     });
 
+    const tooltipString = direction === 'left' ? i18nString(UIStrings.scrollLeft) : i18nString(UIStrings.scrollRight);
+
     return LitHtml.html`
       <button
         class=${buttonStyles}
         @click=${this.#onOverflowClick(direction)}
         ?disabled=${disabled}
-        aria-label="Scroll ${direction}"
+        aria-label=${tooltipString}
+        title=${tooltipString}
       >&hellip;</button>
       `;
   }
@@ -331,7 +342,13 @@ export class ElementsBreadcrumbs extends HTMLElement {
     if (activeCrumb) {
       await coordinator.scroll(() => {
         activeCrumb.scrollIntoView({
-          behavior: 'smooth',
+          // We only want to scroll smoothly when the user is clicking the
+          // buttons manually. If we are automatically scrolling, we could be
+          // scrolling a long distance, so just jump there right away. This
+          // most commonly occurs when the user first opens DevTools on a
+          // deeply nested element, and the slow scrolling of the breadcrumbs
+          // is just a distraction and not useful.
+          behavior: 'auto',
         });
       });
     }

package/front_end/panels/elements/components/computedStyleProperty.css

@@ -93,16 +93,16 @@
     opacity: 100%;
   }
 
-  :host-context(.monospace.computed-properties) .computed-style-property:hover {
+  .computed-style-property:hover {
     forced-color-adjust: none;
     background-color: Highlight;
   }
 
-  :host-context(.monospace.computed-properties) .computed-style-property:hover * {
+  .computed-style-property:hover * {
     color: HighlightText;
   }
 
-  :host-context(.monospace.computed-properties) .goto {
+  .goto {
     background-color: HighlightText;
   }
 }

package/front_end/panels/elements/components/computedStyleTrace.css

@@ -73,16 +73,20 @@
 }
 /* high-contrast styles */
 @media (forced-colors: active) {
-  :host-context(.monospace.computed-properties) .computed-style-trace:hover {
+  .computed-style-trace:hover {
     forced-color-adjust: none;
     background-color: Highlight;
   }
 
-  :host-context(.monospace.computed-properties) .goto {
-    background-color: HighlightText;
+  .goto {
+    background-color: Highlight;
   }
 
-  :host-context(.monospace.computed-properties) .computed-style-trace:hover * {
+  .computed-style-trace:hover * {
     color: HighlightText;
   }
+
+  .computed-style-trace:hover .trace-selector {
+    --override-trace-selector-color: HighlightText;
+  }
 }

package/front_end/panels/elements/components/cssHintDetailsView.css

@@ -15,14 +15,8 @@
 }
 
 code {
-  background-color: var(--color-background-elevation-1);
-  padding: 0 2px;
-  font-size: var(--source-code-font-size);
-  font-family: var(--source-code-font-family);
-}
-
-.property {
-  color: var(--color-syntax-1);
+  font-weight: bold;
+  font-family: inherit;
 }
 
 .hint-popup-possible-fix {

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

@@ -132,6 +132,14 @@ const UIStrings = {
    * the shadow DOM nodes of HTML elements that are built into the browser (e.g. the <input> element).
    */
   showUserAgentShadowDOM: 'Show user agent shadow `DOM`',
+  /**
+  * @description Command for showing the 'Computed' tool. Displays computed CSS styles in Elements sidebar.
+  */
+  showComputedStyles: 'Show Computed Styles',
+  /**
+  * @description Command for showing the 'Styles' tool. Displays CSS styles in Elements sidebar.
+  */
+  showStyles: 'Show Styles',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/elements-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -164,6 +172,26 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'elements.show-styles',
+  category: UI.ActionRegistration.ActionCategory.ELEMENTS,
+  title: i18nLazyString(UIStrings.showStyles),
+  async loadActionDelegate() {
+    const Elements = await loadElementsModule();
+    return Elements.ElementsPanel.ElementsActionDelegate.instance();
+  },
+});
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'elements.show-computed',
+  category: UI.ActionRegistration.ActionCategory.ELEMENTS,
+  title: i18nLazyString(UIStrings.showComputedStyles),
+  async loadActionDelegate() {
+    const Elements = await loadElementsModule();
+    return Elements.ElementsPanel.ElementsActionDelegate.instance();
+  },
+});
+
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.ELEMENTS_SIDEBAR,
   id: 'elements.eventListeners',

package/front_end/panels/elements/stylesSectionTree.css

@@ -122,7 +122,8 @@ ol.expanded {
 }
 
 .implicit,
-.inherited {
+.inherited,
+.inactive-property {
   opacity: 50%;
 }
 

package/front_end/panels/elements/stylesSidebarPane.css

@@ -152,6 +152,13 @@
   z-index: 2;
 }
 
+.styles-sidebar-pane-toolbar .filter-results-matches {
+  margin: auto;
+  padding: 4px;
+  flex: auto;
+  display: flex;
+}
+
 .styles-sidebar-pane-toolbar {
   border-bottom: 1px solid var(--color-details-hairline);
   flex-shrink: 0;

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -74,6 +74,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
+      case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyNotDelegated:
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         break;
@@ -119,6 +120,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyDisabled:
+      case IssuesManager.AttributionReportingIssue.IssueCode.PermissionPolicyNotDelegated:
         await this.#appendElementOrEmptyCell(element, issue);
         this.#appendRequestOrEmptyCell(element, details.request);
         break;

package/front_end/panels/issues/IssueView.ts

@@ -14,7 +14,6 @@ import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.j
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as Root from '../../core/root/root.js';
 import * as Components from './components/components.js';
 
 import {AffectedDirectivesView} from './AffectedDirectivesView.js';
@@ -254,9 +253,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new AttributionReportingIssueDetailsView(this, this.#issue),
       new AffectedRawCookieLinesView(this, this.#issue),
     ];
-    if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {
-      this.#hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
-    }
+    this.#hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
     this.#aggregatedIssuesCount = null;
     this.#hasBeenExpandedBefore = false;
   }
@@ -449,6 +446,10 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     void this.#throttle.schedule(async () => this.#doUpdate());
   }
 
+  clear(): void {
+    this.#affectedResourceViews.forEach(view => view.clear());
+  }
+
   getIssueKind(): IssuesManager.Issue.IssueKind {
     return this.#issue.getKind();
   }