chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/issues/AffectedHeavyAdView.ts

@@ -12,19 +12,19 @@ import {AffectedResourcesView} from './AffectedResourcesView.js';
 
 const UIStrings = {
   /**
-   *@description Label for number of affected resources indication in issue view
+   * @description Label for number of affected resources indication in issue view
    */
   nResources: '{n, plural, =1 {# resource} other {# resources}}',
   /**
-   *@description Title for a column in an Heavy Ads issue view
+   * @description Title for a column in an Heavy Ads issue view
    */
   limitExceeded: 'Limit exceeded',
   /**
-   *@description Title for a column in an Heavy Ads issue view
+   * @description Title for a column in an Heavy Ads issue view
    */
   resolutionStatus: 'Resolution Status',
   /**
-   *@description Title for a column in an Heavy Ads issue view
+   * @description Title for a column in an Heavy Ads issue view
    */
   frameUrl: 'Frame URL',
   /**
@@ -38,17 +38,17 @@ const UIStrings = {
    */
   warned: 'Warned',
   /**
-   *@description Reason for a Heavy Ad being flagged in issue view. The Ad has been flagged as a
+   * @description Reason for a Heavy Ad being flagged in issue view. The Ad has been flagged as a
    *Heavy Ad because it exceeded the set limit for peak CPU usage, e.g. it blocked the main thread
    *for more than 15 seconds in any 30-second window.
    */
   cpuPeakLimit: 'CPU peak limit',
   /**
-   *@description Reason for a Heavy Ad being flagged in issue view
+   * @description Reason for a Heavy Ad being flagged in issue view
    */
   cpuTotalLimit: 'CPU total limit',
   /**
-   *@description Reason for a Heavy Ad being flagged in issue view
+   * @description Reason for a Heavy Ad being flagged in issue view
    */
   networkLimit: 'Network limit',
 } as const;

package/front_end/panels/issues/AffectedMetadataAllowedSitesView.ts

@@ -11,7 +11,7 @@ import {AffectedResourcesView} from './AffectedResourcesView.js';
 
 const UIStrings = {
   /**
-   *@description Label for the the number of affected `Allowed Sites` associated with a
+   * @description Label for the the number of affected `Allowed Sites` associated with a
    *DevTools issue. In this context, `Allowed` refers to permission to access cookies
    *via the third-party cookie deprecation global metadata, and `Site` is equivalent
    *to eTLD+1.

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -23,15 +23,15 @@ import type {IssueView} from './IssueView.js';
 
 const UIStrings = {
   /**
-   *@description Text in Object Properties Section
+   * @description Text in Object Properties Section
    */
   unknown: 'unknown',
   /**
-   *@description Tooltip for button linking to the Elements panel
+   * @description Tooltip for button linking to the Elements panel
    */
   clickToRevealTheFramesDomNodeIn: 'Click to reveal the frame\'s DOM node in the Elements panel',
   /**
-   *@description Replacement text for a link to an HTML element which is not available (anymore).
+   * @description Replacement text for a link to an HTML element which is not available (anymore).
    */
   unavailable: 'unavailable',
 } as const;
@@ -143,7 +143,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
    */
   #resolveFrameId(frameId: Protocol.Page.FrameId): SDK.ResourceTreeModel.ResourceTreeFrame|null {
     const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
-    if (!frame || !frame.url) {
+    if (!frame?.url) {
       this.#unresolvedFrameIds.add(frameId);
       if (!this.#frameListeners.length) {
         const addListener = SDK.FrameManager.FrameManager.instance().addEventListener(
@@ -181,8 +181,8 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     frameCell.classList.add('affected-resource-cell');
     if (frame) {
       const icon = new IconButton.Icon.Icon();
-      icon.data = {iconName: 'code-circle', color: 'var(--icon-link)', width: '16px', height: '16px'};
-      icon.classList.add('link', 'elements-panel');
+      icon.name = 'code-circle';
+      icon.classList.add('link', 'elements-panel', 'medium');
       icon.onclick = async () => {
         Host.userMetrics.issuesPanelResourceOpened(issueCategory, AffectedItem.ELEMENT);
         const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);

package/front_end/panels/issues/AffectedSharedArrayBufferIssueDetailsView.ts

@@ -12,43 +12,43 @@ import {AffectedResourcesView} from './AffectedResourcesView.js';
 
 const UIStrings = {
   /**
-   *@description Label for number of affected resources indication in issue view
+   * @description Label for number of affected resources indication in issue view
    */
   nViolations: '{n, plural, =1 {# violation} other {# violations}}',
   /**
-   *@description Value for the status column in SharedArrayBuffer issues
+   * @description Value for the status column in SharedArrayBuffer issues
    */
   warning: 'warning',
   /**
-   *@description The kind of resolution for a mixed content issue
+   * @description The kind of resolution for a mixed content issue
    */
   blocked: 'blocked',
   /**
-   *@description Value for the 'Trigger' column in the SAB affected resources list
+   * @description Value for the 'Trigger' column in the SAB affected resources list
    */
   instantiation: 'Instantiation',
   /**
-   *@description Tooltip for the 'Trigger' column in the SAB affected resources list
+   * @description Tooltip for the 'Trigger' column in the SAB affected resources list
    */
   aSharedarraybufferWas: 'A `SharedArrayBuffer` was instantiated in a context that is not cross-origin isolated',
   /**
-   *@description Value for the 'Trigger' column in the SAB affected resources list
+   * @description Value for the 'Trigger' column in the SAB affected resources list
    */
   transfer: 'Transfer',
   /**
-   *@description Tooltip for the 'Trigger' column in the SAB affected resources list
+   * @description Tooltip for the 'Trigger' column in the SAB affected resources list
    */
   sharedarraybufferWasTransferedTo: '`SharedArrayBuffer` was transfered to a context that is not cross-origin isolated',
   /**
-   *@description Header for the source location column
+   * @description Header for the source location column
    */
   sourceLocation: 'Source Location',
   /**
-   *@description Title for the 'Trigger' column in the SAB affected resources list
+   * @description Title for the 'Trigger' column in the SAB affected resources list
    */
   trigger: 'Trigger',
   /**
-   *@description Title for the status column in the SAB affected resources list
+   * @description Title for the status column in the SAB affected resources list
    */
   status: 'Status',
 } as const;

package/front_end/panels/issues/AffectedSourcesView.ts

@@ -13,7 +13,7 @@ import {AffectedResourcesView} from './AffectedResourcesView.js';
 
 const UIStrings = {
   /**
-   *@description Singular or Plural label for number of affected sources (consisting of (source) file name + line number) in issue view
+   * @description Singular or Plural label for number of affected sources (consisting of (source) file name + line number) in issue view
    */
   nSources: '{n, plural, =1 {# source} other {# sources}}',
 } as const;

package/front_end/panels/issues/AffectedTrackingSitesView.ts

@@ -10,7 +10,7 @@ import {AffectedResourcesView} from './AffectedResourcesView.js';
 
 const UIStrings = {
   /**
-   *@description Label for the the number of affected `Potentially-tracking Sites` associated with a
+   * @description Label for the the number of affected `Potentially-tracking Sites` associated with a
    *DevTools issue. In this context, `tracking` refers to bounce tracking and `Site` is equivalent
    *to eTLD+1.
    *See https://github.com/privacycg/nav-tracking-mitigations/blob/main/bounce-tracking-explainer.md

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -16,111 +16,111 @@ import type {IssueView} from './IssueView.js';
 
 const UIStrings = {
   /**
-   *@description Label for number of affected resources indication in issue view
+   * @description Label for number of affected resources indication in issue view
    */
   nRequests: '{n, plural, =1 {# request} other {# requests}}',
   /**
-   *@description Value for the status column in SharedArrayBuffer issues
+   * @description Value for the status column in SharedArrayBuffer issues
    */
   warning: 'warning',
   /**
-   *@description The kind of resolution for a mixed content issue
+   * @description The kind of resolution for a mixed content issue
    */
   blocked: 'blocked',
   /**
-   *@description Text for the status column in the item list in the CORS issue details view
+   * @description Text for the status column in the item list in the CORS issue details view
    */
   status: 'Status',
   /**
-   *@description Text for the column showing the associated network request in the item list in the CORS issue details view
+   * @description Text for the column showing the associated network request in the item list in the CORS issue details view
    */
   request: 'Request',
   /**
-   *@description Text for the column showing the resource's address in the item list in the CORS issue details view
+   * @description Text for the column showing the resource's address in the item list in the CORS issue details view
    */
   resourceAddressSpace: 'Resource Address',
   /**
-   *@description Text for the column showing the address of the resource load initiator in the item list in the CORS issue details view
+   * @description Text for the column showing the address of the resource load initiator in the item list in the CORS issue details view
    */
   initiatorAddressSpace: 'Initiator Address',
   /**
-   *@description Text for the status of the initiator context
+   * @description Text for the status of the initiator context
    */
   secure: 'secure',
   /**
-   *@description Text for the status of the initiator context
+   * @description Text for the status of the initiator context
    */
   insecure: 'insecure',
   /**
-   *@description Title for a column showing the status of the initiator context. The initiator context is either secure or insecure depending on whether it was loaded via HTTP or HTTPS.
+   * @description Title for a column showing the status of the initiator context. The initiator context is either secure or insecure depending on whether it was loaded via HTTP or HTTPS.
    */
   initiatorContext: 'Initiator Context',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing a link to the associated preflight request in case the preflight request caused the issue.
+   * @description Title for a column in the affected resources for a CORS issue showing a link to the associated preflight request in case the preflight request caused the issue.
    */
   preflightRequestIfProblematic: 'Preflight Request (if problematic)',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing a link to the associated preflight request.
+   * @description Title for a column in the affected resources for a CORS issue showing a link to the associated preflight request.
    */
   preflightRequest: 'Preflight Request',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing the name of the problematic HTTP response header.
+   * @description Title for a column in the affected resources for a CORS issue showing the name of the problematic HTTP response header.
    */
   header: 'Header',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing the problem associated with the resource.
+   * @description Title for a column in the affected resources for a CORS issue showing the problem associated with the resource.
    */
   problem: 'Problem',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing the value that was invalid and caused the problem if it is available.
+   * @description Title for a column in the affected resources for a CORS issue showing the value that was invalid and caused the problem if it is available.
    */
   invalidValue: 'Invalid Value (if available)',
   /**
-   *@description Content for the problem column in the affected resources table for a CORS issue that indicates that a response header was missing.
+   * @description Content for the problem column in the affected resources table for a CORS issue that indicates that a response header was missing.
    */
   problemMissingHeader: 'Missing Header',
   /**
-   *@description Content for the problem column in the affected resources table for a CORS issue that indicates that a response header contained multiple values.
+   * @description Content for the problem column in the affected resources table for a CORS issue that indicates that a response header contained multiple values.
    */
   problemMultipleValues: 'Multiple Values',
   /**
-   *@description Content for the problem column in the affected resources table for a CORS issue that indicates that a response header contained an invalid value.
+   * @description Content for the problem column in the affected resources table for a CORS issue that indicates that a response header contained an invalid value.
    */
   problemInvalidValue: 'Invalid Value',
   /**
-   *@description Content for the problem column in the affected resources table for a CORS issue that indicates that the response to the preflight request was a redirect.
+   * @description Content for the problem column in the affected resources table for a CORS issue that indicates that the response to the preflight request was a redirect.
    */
   preflightDisallowedRedirect: 'Response to preflight was a redirect',
   /**
-   *@description Content for the problem column in the affected resources table for a CORS issue that indicates that the HTTP status the preflight request was not successful.
+   * @description Content for the problem column in the affected resources table for a CORS issue that indicates that the HTTP status the preflight request was not successful.
    */
   preflightInvalidStatus: 'HTTP status of preflight request didn\'t indicate success',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing the origin that was allowed according to CORS headers.
+   * @description Title for a column in the affected resources for a CORS issue showing the origin that was allowed according to CORS headers.
    */
   allowedOrigin: 'Allowed Origin (from header)',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing the value of the Access-Control-Allow-Credentials response header.
+   * @description Title for a column in the affected resources for a CORS issue showing the value of the Access-Control-Allow-Credentials response header.
    */
   allowCredentialsValueFromHeader: '`Access-Control-Allow-Credentials` Header Value',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing the request method that was disallowed.
+   * @description Title for a column in the affected resources for a CORS issue showing the request method that was disallowed.
    */
   disallowedRequestMethod: 'Disallowed Request Method',
   /**
-   *@description Title for a column in the affected resources for a CORS issue showing the request header that was disallowed.
+   * @description Title for a column in the affected resources for a CORS issue showing the request header that was disallowed.
    */
   disallowedRequestHeader: 'Disallowed Request Header',
   /**
-   *@description Header for the source location column
+   * @description Header for the source location column
    */
   sourceLocation: 'Source Location',
   /**
-   *@description Header for the column with the URL scheme that is not supported by fetch
+   * @description Header for the column with the URL scheme that is not supported by fetch
    */
   unsupportedScheme: 'Unsupported Scheme',
   /**
-   *@description A failed network request.
+   * @description A failed network request.
    */
   failedRequest: 'Failed Request',
 } as const;

package/front_end/panels/issues/GenericIssueDetailsView.ts

@@ -12,15 +12,15 @@ import {AffectedResourcesView} from './AffectedResourcesView.js';
 
 const UIStrings = {
   /**
-   *@description Label for number of affected resources indication in issue view
+   * @description Label for number of affected resources indication in issue view
    */
   nResources: '{n, plural, =1 {# resource} other {# resources}}',
   /**
-   *@description Title for the 'Frame' column.
+   * @description Title for the 'Frame' column.
    */
   frameId: 'Frame',
   /**
-   *@description Label for the violating node link in the issue view.
+   * @description Label for the violating node link in the issue view.
    */
   violatingNode: 'Violating node',
 } as const;

package/front_end/panels/issues/HiddenIssuesRow.ts

@@ -1,12 +1,15 @@
 // Copyright 2021 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
+
+import '../../ui/components/adorners/adorners.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 Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
@@ -22,41 +25,64 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/issues/HiddenIssuesRow.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface ViewInput {
+  count: number;
+  onUnhideAllIssues: () => void;
+}
+
+type ViewOutput = unknown;
+
+type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  const stopPropagationForEnter = (event: KeyboardEvent): void => {
+    if (event.key === 'Enter') {
+      // Make sure we don't propagate 'Enter' key events to parents,
+      // so that these get turned into 'click' events properly. If we
+      // don't stop the propagation here, the 'Enter' key down event
+      // will be consumed by the tree element and it'll be expanded
+      // or collapsed instead of the "Unhide all" action being taken.
+      event.stopImmediatePropagation();
+    }
+  };
+
+  // clang-format off
+  render(html`
+  <div class="header">
+    <devtools-adorner class="aggregated-issues-count"
+                      .data=${{name: 'countWrapper'}}>
+      <span>${input.count}</span>
+    </devtools-adorner>
+    <div class="title">${i18nString(UIStrings.hiddenIssues)}</div>
+    <devtools-button class="unhide-all-issues-button"
+                     jslog=${VisualLogging.action().track({click: true}).context('issues.unhide-all-hiddes')}
+                     @click=${input.onUnhideAllIssues}
+                     @keydown=${stopPropagationForEnter}
+                     .variant=${Buttons.Button.Variant.OUTLINED}>${i18nString(UIStrings.unhideAll)}</devtools-button>
+  </div>`, target);
+  // clang-format on
+};
+
 export class HiddenIssuesRow extends UI.TreeOutline.TreeElement {
-  #numHiddenAggregatedIssues: HTMLElement;
+  #view: View;
 
-  constructor() {
+  constructor(view: View = DEFAULT_VIEW) {
     super(undefined, true);
-    this.#numHiddenAggregatedIssues = document.createElement('span');
+    this.#view = view;
     this.toggleOnClick = true;
     this.listItemElement.classList.add('issue-category', 'hidden-issues');
     this.childrenListElement.classList.add('hidden-issues-body');
-    this.#appendHeader();
-  }
-
-  #appendHeader(): void {
-    const unhideAllIssuesBtn = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.unhideAll), () => IssuesManager.IssuesManager.IssuesManager.instance().unhideAllIssues(),
-        {className: 'unhide-all-issues-button', jslogContext: 'issues.unhide-all-hiddes'});
-    const countAdorner = new Adorners.Adorner.Adorner();
-    countAdorner.data = {
-      name: 'countWrapper',
-      content: this.#numHiddenAggregatedIssues,
-    };
-    countAdorner.classList.add('aggregated-issues-count');
-    this.#numHiddenAggregatedIssues.textContent = '0';
-    const header = document.createElement('div');
-    const title = document.createElement('div');
-    header.classList.add('header');
-    title.classList.add('title');
-    title.textContent = i18nString(UIStrings.hiddenIssues);
-    header.appendChild(countAdorner);
-    header.appendChild(title);
-    header.appendChild(unhideAllIssuesBtn);
-    this.listItemElement.appendChild(header);
+    this.update(0);
   }
 
   update(count: number): void {
-    this.#numHiddenAggregatedIssues.textContent = `${count}`;
+    const issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
+    const onUnhideAllIssues = issuesManager.unhideAllIssues.bind(issuesManager);
+    const input = {
+      count,
+      onUnhideAllIssues,
+    };
+    const output = undefined;
+    this.#view(input, output, this.listItemElement);
   }
 }

package/front_end/panels/issues/IssueAggregator.ts

@@ -49,8 +49,7 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
   #quirksModeIssues = new Set<IssuesManager.QuirksModeIssue.QuirksModeIssue>();
   #attributionReportingIssues = new Set<IssuesManager.AttributionReportingIssue.AttributionReportingIssue>();
   #genericIssues = new Set<IssuesManager.GenericIssue.GenericIssue>();
-  #selectElementAccessibilityIssues =
-      new Set<IssuesManager.SelectElementAccessibilityIssue.SelectElementAccessibilityIssue>();
+  #elementAccessibilityIssues = new Set<IssuesManager.ElementAccessibilityIssue.ElementAccessibilityIssue>();
   #representative?: IssuesManager.Issue.Issue;
   #aggregatedIssuesCount = 0;
   #key: AggregationKey;
@@ -144,9 +143,8 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     return this.#genericIssues;
   }
 
-  getSelectElementAccessibilityIssues():
-      Iterable<IssuesManager.SelectElementAccessibilityIssue.SelectElementAccessibilityIssue> {
-    return this.#selectElementAccessibilityIssues;
+  getElementAccessibilityIssues(): Iterable<IssuesManager.ElementAccessibilityIssue.ElementAccessibilityIssue> {
+    return this.#elementAccessibilityIssues;
   }
 
   getDescription(): IssuesManager.MarkdownIssueDescription.MarkdownIssueDescription|null {
@@ -256,8 +254,8 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     if (issue instanceof IssuesManager.GenericIssue.GenericIssue) {
       this.#genericIssues.add(issue);
     }
-    if (issue instanceof IssuesManager.SelectElementAccessibilityIssue.SelectElementAccessibilityIssue) {
-      this.#selectElementAccessibilityIssues.add(issue);
+    if (issue instanceof IssuesManager.ElementAccessibilityIssue.ElementAccessibilityIssue) {
+      this.#elementAccessibilityIssues.add(issue);
     }
     if (issue instanceof IssuesManager.PartitioningBlobURLIssue.PartitioningBlobURLIssue) {
       this.#partitioningBlobURLIssues.add(issue);
@@ -330,10 +328,6 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return [...this.#aggregatedIssuesByKey.values(), ...this.#hiddenAggregatedIssuesByKey.values()];
   }
 
-  hiddenAggregatedIssues(): Iterable<AggregatedIssue> {
-    return this.#hiddenAggregatedIssuesByKey.values();
-  }
-
   aggregatedIssueCodes(): Set<AggregationKey> {
     return new Set([...this.#aggregatedIssuesByKey.keys(), ...this.#hiddenAggregatedIssuesByKey.keys()]);
   }

package/front_end/panels/issues/IssueKindView.ts

@@ -94,8 +94,8 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     header.classList.add('header');
 
     const issueKindIcon = new IconButton.Icon.Icon();
-    issueKindIcon.data = IssueCounter.IssueCounter.getIssueKindIconData(this.#kind);
-    issueKindIcon.classList.add('leading-issue-icon');
+    issueKindIcon.name = IssueCounter.IssueCounter.getIssueKindIconName(this.#kind);
+    issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
 
     const countAdorner = new Adorners.Adorner.Adorner();
     countAdorner.data = {

package/front_end/panels/issues/IssueView.ts

@@ -40,23 +40,23 @@ import type {AggregatedIssue} from './IssueAggregator.js';
 
 const UIStrings = {
   /**
-   *@description Noun, singular. Label for a column or field containing the name of an entity.
+   * @description Noun, singular. Label for a column or field containing the name of an entity.
    */
   name: 'Name',
   /**
-   *@description The kind of resolution for a mixed content issue
+   * @description The kind of resolution for a mixed content issue
    */
   blocked: 'blocked',
   /**
-   *@description Label for a type of issue that can appear in the Issues view. Noun for singular or plural number of network requests.
+   * @description Label for a type of issue that can appear in the Issues view. Noun for singular or plural number of network requests.
    */
   nRequests: '{n, plural, =1 {# request} other {# requests}}',
   /**
-   *@description Label for singular or plural number of affected resources in issue view
+   * @description Label for singular or plural number of affected resources in issue view
    */
   nResources: '{n, plural, =1 {# resource} other {# resources}}',
   /**
-   *@description Label for mixed content issue's restriction status
+   * @description Label for mixed content issue's restriction status
    */
   restrictionStatus: 'Restriction Status',
   /**
@@ -65,24 +65,24 @@ const UIStrings = {
    */
   warned: 'Warned',
   /**
-   *@description Header for the section listing affected resources
+   * @description Header for the section listing affected resources
    */
   affectedResources: 'Affected Resources',
   /**
-   *@description Title for a link to further information in issue view
-   *@example {SameSite Cookies Explained} PH1
+   * @description Title for a link to further information in issue view
+   * @example {SameSite Cookies Explained} PH1
    */
   learnMoreS: 'Learn more: {PH1}',
   /**
-   *@description The kind of resolution for a mixed content issue
+   * @description The kind of resolution for a mixed content issue
    */
   automaticallyUpgraded: 'automatically upgraded',
   /**
-   *@description Menu entry for hiding a particular issue, in the Hide Issues context menu.
+   * @description Menu entry for hiding a particular issue, in the Hide Issues context menu.
    */
   hideIssuesLikeThis: 'Hide issues like this',
   /**
-   *@description Menu entry for unhiding a particular issue, in the Hide Issues context menu.
+   * @description Menu entry for unhiding a particular issue, in the Hide Issues context menu.
    */
   unhideIssuesLikeThis: 'Unhide issues like this',
 } as const;
@@ -337,7 +337,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     const header = document.createElement('div');
     header.classList.add('header');
     this.#issueKindIcon = new IconButton.Icon.Icon();
-    this.#issueKindIcon.classList.add('leading-issue-icon');
+    this.#issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
     this.#aggregatedIssuesCount = document.createElement('span');
     const countAdorner = new Adorners.Adorner.Adorner();
     countAdorner.data = {
@@ -385,7 +385,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #updateFromIssue(): void {
     if (this.#issueKindIcon) {
       const kind = this.#issue.getKind();
-      this.#issueKindIcon.data = IssueCounter.IssueCounter.getIssueKindIconData(kind);
+      this.#issueKindIcon.name = IssueCounter.IssueCounter.getIssueKindIconName(kind);
       this.#issueKindIcon.title = IssuesManager.Issue.getIssueKindDescription(kind);
     }
     if (this.#aggregatedIssuesCount) {

package/front_end/panels/issues/IssuesPane.ts

@@ -192,11 +192,12 @@ export class IssuesPane extends UI.Widget.VBox {
   #issueViewUpdatePromise: Promise<void> = Promise.resolve();
 
   constructor() {
-    super(true);
+    super({
+      jslog: `${VisualLogging.panel('issues')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(issuesPaneStyles);
 
-    this.element.setAttribute('jslog', `${VisualLogging.panel('issues')}`);
-
     this.contentElement.classList.add('issues-pane');
 
     this.#categoryViews = new Map();
@@ -406,7 +407,7 @@ export class IssuesPane extends UI.Widget.VBox {
       if (preservedSet?.has(key)) {
         continue;
       }
-      view.parent && view.parent.removeChild(view);
+      view.parent?.removeChild(view);
       views.delete(key);
     }
   }

package/front_end/panels/issues/components/HideIssuesMenu.ts

@@ -13,7 +13,7 @@ import hideIssuesMenuStyles from './hideIssuesMenu.css.js';
 
 const UIStrings = {
   /**
-   *@description Title for the tooltip of the (3 dots) Hide Issues menu icon.
+   * @description Title for the tooltip of the (3 dots) Hide Issues menu icon.
    */
   tooltipTitle: 'Hide issues',
 } as const;

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

@@ -11,11 +11,11 @@ import type * as Issues from './issues.js';
 
 const UIStrings = {
   /**
-   *@description Label for the issues pane
+   * @description Label for the issues pane
    */
   issues: 'Issues',
   /**
-   *@description Command for showing the 'Issues' tool
+   * @description Command for showing the 'Issues' tool
    */
   showIssues: 'Show Issues',
 } as const;