chrome-devtools-frontend 1.0.937775 → 1.0.939144

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -11,12 +11,9 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-
-import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
-
-import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
+import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
 import type {OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from './CSSOverviewController.js';
 import {Events as CSSOverViewControllerEvents} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
@@ -227,15 +224,14 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
   readonly #resultsContainer: UI.Widget.VBox;
   readonly #elementContainer: DetailsView;
   readonly #sideBar: CSSOverviewSidebarPanel;
-  #cssModel: SDK.CSSModel.CSSModel;
-  #domModel: SDK.DOMModel.DOMModel;
-  readonly #domAgent: ProtocolProxyApi.DOMApi;
+  #cssModel?: SDK.CSSModel.CSSModel;
+  #domModel?: SDK.DOMModel.DOMModel;
   #linkifier: Components.Linkifier.Linkifier;
   #viewMap: Map<string, ElementDetailsView>;
   #data: OverviewData|null;
   #fragment?: UI.Fragment.Fragment;
 
-  constructor(controller: OverviewController, target: SDK.Target.Target) {
+  constructor(controller: OverviewController) {
     super('css_overview_completed_view');
 
     this.#controller = controller;
@@ -264,14 +260,6 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.splitWidget().setSidebarWidget(this.#sideBar);
     this.splitWidget().setMainWidget(this.#mainContainer);
 
-    const cssModel = target.model(SDK.CSSModel.CSSModel);
-    const domModel = target.model(SDK.DOMModel.DOMModel);
-    if (!cssModel || !domModel) {
-      throw new Error('Target must provide CSS and DOM models');
-    }
-    this.#cssModel = cssModel;
-    this.#domModel = domModel;
-    this.#domAgent = target.domAgent();
     this.#linkifier = new Components.Linkifier.Linkifier(/* maxLinkLength */ 20, /* useLinkDecorator */ true);
 
     this.#viewMap = new Map();
@@ -300,6 +288,16 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     // TODO(paullewis): update the links in the panels in case source has been .
   }
 
+  initializeModels(target: SDK.Target.Target): void {
+    const cssModel = target.model(SDK.CSSModel.CSSModel);
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    if (!cssModel || !domModel) {
+      throw new Error('Target must provide CSS and DOM models');
+    }
+    this.#cssModel = cssModel;
+    this.#domModel = domModel;
+  }
+
   private sideBarItemSelected(event: Common.EventTarget.EventTargetEvent<string>): void {
     const {data} = event;
     const section = (this.#fragment as UI.Fragment.Fragment).$(data);
@@ -650,6 +648,9 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
 
     let view = this.#viewMap.get(id);
     if (!view) {
+      if (!this.#domModel || !this.#cssModel) {
+        throw new Error('Unable to initialize CSS Overview, missing models');
+      }
       view = new ElementDetailsView(this.#controller, this.#domModel, this.#cssModel, this.#linkifier);
       view.populateNodes(payload.nodes);
       this.#viewMap.set(id, view);
@@ -970,7 +971,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
     this.#elementGrid.setStriped(true);
     this.#elementGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this.sortMediaQueryDataGrid.bind(this));
 
-    this.element.appendChild(this.#elementGrid.element);
+    this.#elementGrid.asWidget().show(this.element);
   }
 
   private sortMediaQueryDataGrid(): void {

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -21,12 +21,13 @@ import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 let CSSOverviewPanelInstance: CSSOverviewPanel;
 
-export class CSSOverviewPanel extends UI.Panel.Panel {
-  readonly #model: CSSOverviewModel;
+export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManager.Observer {
   readonly #controller: OverviewController;
   readonly #startView: CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView;
   readonly #processingView: CSSOverviewProcessingView;
   readonly #completedView: CSSOverviewCompletedView;
+  #model?: CSSOverviewModel;
+  #target?: SDK.Target.Target;
   #backgroundColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   #textColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   #fillColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
@@ -44,15 +45,14 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
 
     this.element.classList.add('css-overview-panel');
 
-    const [model] = SDK.TargetManager.TargetManager.instance().models(CSSOverviewModel);
-    this.#model = (model as CSSOverviewModel);
-
     this.#controller = new OverviewController();
     this.#startView = new CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView();
     this.#startView.addEventListener(
         'overviewstartrequested', () => this.#controller.dispatchEventToListeners(Events.RequestOverviewStart));
     this.#processingView = new CSSOverviewProcessingView(this.#controller);
-    this.#completedView = new CSSOverviewCompletedView(this.#controller, model.target());
+    this.#completedView = new CSSOverviewCompletedView(this.#controller);
+
+    SDK.TargetManager.TargetManager.instance().observeTargets(this);
 
     this.#controller.addEventListener(Events.RequestOverviewStart, _event => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureCssOverviewClicked);
@@ -73,6 +73,26 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
     return CSSOverviewPanelInstance;
   }
 
+  targetAdded(target: SDK.Target.Target): void {
+    if (this.#target) {
+      return;
+    }
+    this.#target = target;
+    this.#completedView.initializeModels(target);
+    const [model] = SDK.TargetManager.TargetManager.instance().models(CSSOverviewModel);
+    this.#model = (model as CSSOverviewModel);
+  }
+
+  targetRemoved(): void {
+  }
+
+  private getModel(): CSSOverviewModel {
+    if (!this.#model) {
+      throw new Error('Did not retrieve model information yet.');
+    }
+    return this.#model;
+  }
+
   private reset(): void {
     this.#backgroundColors = new Map();
     this.#textColors = new Map();
@@ -104,7 +124,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   }
 
   private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent<number>): void {
-    this.#model.highlightNode((evt.data as Protocol.DOM.BackendNodeId));
+    this.getModel().highlightNode((evt.data as Protocol.DOM.BackendNodeId));
   }
 
   private renderInitialView(): void {
@@ -144,10 +164,11 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   private async startOverview(): Promise<void> {
     this.renderOverviewStartedView();
 
+    const model = this.getModel();
     const [globalStyleStats, { elementCount, backgroundColors, textColors, textColorContrastIssues, fillColors, borderColors, fontInfo, unusedDeclarations }, mediaQueries] = await Promise.all([
-      this.#model.getGlobalStylesheetStats(),
-      this.#model.getNodeStyleStats(),
-      this.#model.getMediaQueries(),
+      model.getGlobalStylesheetStats(),
+      model.getNodeStyleStats(),
+      model.getMediaQueries(),
     ]);
 
     if (elementCount) {

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -84,7 +84,7 @@ h1 {
   font-size: 13px;
   line-height: 20px;
   letter-spacing: 0.01em;
-  margin: 9px 0 14px 0;
+  margin: 9px 0 14px;
 }
 
 .preview-icon {

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -28,7 +28,7 @@
 
 .overview-completed-view .colors ul li {
   display: inline-block;
-  margin: 0 0 16px 0;
+  margin: 0 0 16px;
   padding: 0 8px 0 0;
 }
 
@@ -111,7 +111,7 @@
   font-size: 15px;
   font-weight: normal;
   padding: 0;
-  margin: 0 0 20px 0;
+  margin: 0 0 20px;
   padding-left: calc(var(--overview-default-padding) + var(--overview-icon-padding));
   position: relative;
   height: 26px;
@@ -119,7 +119,7 @@
 }
 
 .results-section h1::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   left: var(--overview-default-padding);
@@ -264,14 +264,14 @@
 .overview-completed-view .font-info h2 {
   font-size: 14px;
   font-weight: bold;
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .overview-completed-view .font-info h3 {
   font-size: 13px;
   font-weight: normal;
   font-style: italic;
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .overview-completed-view .font-info {
@@ -300,7 +300,7 @@
   width: 30px;
 }
 
-.contrast-warning [is=ui-icon] {
+.contrast-warning [is="ui-icon"] {
   margin-left: 5px;
 }
 
@@ -318,11 +318,11 @@
   min-width: initial;
 }
 
-[is=ui-icon].smallicon-checkmark-square {
+[is="ui-icon"].smallicon-checkmark-square {
   background-color: var(--color-green);
 }
 
-[is=ui-icon].smallicon-no {
+[is="ui-icon"].smallicon-no {
   background-color: var(--color-red);
 }
 

package/front_end/panels/elements/classesPaneWidget.css

@@ -16,7 +16,7 @@
   justify-content: flex-start;
 }
 
-.styles-element-classes-pane [is=dt-checkbox] {
+.styles-element-classes-pane [is="dt-checkbox"] {
   margin-right: 15px;
 }
 

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

@@ -44,7 +44,7 @@
 
 .close::before,
 .close::after {
-  content: '';
+  content: "";
   display: inline-block;
   position: absolute;
   left: 0;

package/front_end/panels/elements/computedStyleWidgetTree.css

@@ -32,7 +32,7 @@
 }
 
 .group-title > h1 {
-  margin: 1px 0 0 0;
+  margin: 1px 0 0;
   padding: 1em 0;
   width: 100%;
   cursor: pointer;

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

@@ -140,8 +140,6 @@ let loadedElementsModule: (typeof Elements|undefined);
 
 async function loadElementsModule(): Promise<typeof Elements> {
   if (!loadedElementsModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/elements');
     loadedElementsModule = await import('./elements.js');
   }
   return loadedElementsModule;

package/front_end/panels/elements/elementsPanel.css

@@ -30,7 +30,7 @@
 #elements-content {
   flex: 1 1;
   overflow: auto;
-  padding: 2px 0 0 0;
+  padding: 2px 0 0;
 }
 
 .style-panes-wrapper {

package/front_end/panels/elements/elementsTreeOutline.css

@@ -67,7 +67,7 @@
   user-select: none;
   -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
-  content: '\A0\A0';
+  content: "\A0\A0";
   color: transparent;
   text-shadow: none;
   margin-right: -3px;

package/front_end/panels/elements/layoutPane.css

@@ -160,7 +160,7 @@
 }
 /* We set dimensions for the invisible input to support quick highlight a11y feature
 that uses the dimensions to draw an outline around the element. */
-.color-picker-label input[type=color] {
+.color-picker-label input[type="color"] {
   width: 100%;
   height: 100%;
   position: absolute;

package/front_end/panels/elements/platformFontsWidget.css

@@ -44,5 +44,5 @@
 }
 
 .font-stats-item .font-delimeter {
-  margin: 0 1ex 0 1ex;
+  margin: 0 1ex;
 }

package/front_end/panels/elements/stylesSectionTree.css

@@ -137,7 +137,7 @@ ol.expanded {
 
 .tree-outline li.editing-sub-part {
   padding: 3px 6px 8px 18px;
-  margin: -1px -6px -8px -6px;
+  margin: -1px -6px -8px;
   text-overflow: clip;
 }
 

package/front_end/panels/elements/stylesSidebarPane.css

@@ -260,6 +260,10 @@
     text-decoration-color: linktext;
   }
 
+  .styles-section .styles-section-subtitle .devtools-link:focus-visible {
+    color: HighlightText;
+  }
+
   .styles-section:focus-visible *,
   .styles-section.read-only:focus-visible *,
   .styles-section:focus-visible .styles-section-subtitle .devtools-link {
@@ -276,6 +280,10 @@
   .styles-section:focus-visible .sidebar-pane-section-toolbar {
     background-color: ButtonFace;
   }
+
+  .styles-section:focus-visible {
+    --webkit-css-property-color: HighlightText;
+  }
 }
 
 .spinner::before {

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -301,10 +301,6 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
 
   private setTitle(object: SDK.RemoteObject.RemoteObject, linkifier: Components.Linkifier.Linkifier): void {
     const title = this.listItemElement.createChild('span', 'event-listener-details');
-    const subtitle = this.listItemElement.createChild('span', 'event-listener-tree-subtitle');
-    const linkElement =
-        linkifier.linkifyRawLocation(this.eventListenerInternal.location(), this.eventListenerInternal.sourceURL());
-    subtitle.appendChild(linkElement);
 
     const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
         object, /* wasThrown */ false, /* showPreview */ false);
@@ -333,6 +329,11 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       title.appendChild(passiveButton);
     }
 
+    const subtitle = title.createChild('span', 'event-listener-tree-subtitle');
+    const linkElement =
+        linkifier.linkifyRawLocation(this.eventListenerInternal.location(), this.eventListenerInternal.sourceURL());
+    subtitle.appendChild(linkElement);
+
     this.listItemElement.addEventListener('contextmenu', event => {
       const menu = new UI.ContextMenu.ContextMenu(event);
       if (event.target !== linkElement) {

package/front_end/panels/event_listeners/eventListenersView.css

@@ -33,7 +33,8 @@
   color: var(--color-syntax-2);
 }
 
-.tree-outline-disclosure .object-value-node {
+.tree-outline-disclosure .object-value-node,
+.tree-outline-disclosure .object-value-object {
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -53,7 +54,7 @@
   background-color: var(--color-background-elevation-1);
   border-radius: 3px;
   border: 1px solid var(--color-details-hairline);
-  margin-left: 10px;
+  margin-left: 5px;
   display: block;
   cursor: pointer;
   opacity: 80%;

package/front_end/panels/help/ReleaseNoteText.ts

@@ -35,6 +35,34 @@ function getLocalizedReleaseNoteURL(url: string): string {
 }
 
 export const releaseNoteText: ReleaseNote[] = [
+  {
+    version: 39,
+    header: 'Highlights from the Chrome 97 update',
+    highlights: [
+      {
+        title: 'New preview feature: Recorder panel',
+        subtitle: 'Record, replay and measure user flows with options to export to Puppeteer script and more.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97/#recorder'),
+      },
+      {
+        title: 'Enhanced "Edit as HTML" with code completion',
+        subtitle: 'Edit as HTML in the Elements panel now supports code completion, syntax highlights and more.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97/#code-completion'),
+      },
+      {
+        title: 'Refresh device list in Device Mode',
+        subtitle: 'New devices are added in the device list.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97/#device'),
+      },
+      {
+        title: 'Improved code debugging experience',
+        subtitle:
+            'Include column number in the Console stack trace, improved breakpoints display in the Sources panel and more.',
+        link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97/#debugging'),
+      },
+    ],
+    link: getLocalizedReleaseNoteURL('https://developer.chrome.com/blog/new-in-devtools-97'),
+  },
   {
     version: 38,
     header: 'Highlights from the Chrome 96 update',

package/front_end/panels/issues/IssueKindView.ts

@@ -110,12 +110,6 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     header.appendChild(countAdorner);
     header.appendChild(title);
     header.appendChild(hideAvailableIssuesBtn);
-    header.addEventListener('mouseenter', () => {
-      hideAvailableIssuesBtn.setVisible(true);
-    });
-    header.addEventListener('mouseleave', () => {
-      hideAvailableIssuesBtn.setVisible(false);
-    });
 
     this.listItemElement.appendChild(header);
   }

package/front_end/panels/issues/IssueView.ts

@@ -222,7 +222,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   private hasBeenExpandedBefore: boolean;
   private throttle: Common.Throttler.Throttler;
   private needsUpdateOnExpand = true;
-  private hiddenIssuesMenu: Components.HideIssuesMenu.HideIssuesMenu;
+  private hiddenIssuesMenu?: Components.HideIssuesMenu.HideIssuesMenu;
   private contentCreated: boolean = false;
 
   constructor(issue: AggregatedIssue, description: IssuesManager.MarkdownIssueDescription.IssueDescription) {
@@ -256,8 +256,9 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new WasmCrossOriginModuleSharingAffectedResourcesView(this, this.issue),
       new AffectedRawCookieLinesView(this, this.issue),
     ];
-
-    this.hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
+    if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {
+      this.hiddenIssuesMenu = new Components.HideIssuesMenu.HideIssuesMenu();
+    }
     this.aggregatedIssuesCount = null;
     this.hasBeenExpandedBefore = false;
   }
@@ -318,10 +319,6 @@ export class IssueView extends UI.TreeOutline.TreeElement {
 
   private appendHeader(): void {
     const header = document.createElement('div');
-    if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {
-      header.addEventListener('mouseenter', this.showHiddenIssuesMenu.bind(this));
-      header.addEventListener('mouseleave', this.hideHiddenIssuesMenu.bind(this));
-    }
     header.classList.add('header');
     this.issueKindIcon = new IconButton.Icon.Icon();
     this.issueKindIcon.classList.add('leading-issue-icon');
@@ -339,19 +336,12 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     title.classList.add('title');
     title.textContent = this.description.title;
     header.appendChild(title);
-    if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {
+    if (this.hiddenIssuesMenu) {
       header.appendChild(this.hiddenIssuesMenu);
     }
     this.updateFromIssue();
     this.listItemElement.appendChild(header);
   }
-  private showHiddenIssuesMenu(): void {
-    this.hiddenIssuesMenu?.setVisible(true);
-  }
-
-  private hideHiddenIssuesMenu(): void {
-    this.hiddenIssuesMenu?.setVisible(false);
-  }
 
   onexpand(): void {
     Host.userMetrics.issuesPanelIssueExpanded(this.issue.getCategory());
@@ -378,18 +368,20 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       this.aggregatedIssuesCount.textContent = `${this.issue.getAggregatedIssuesCount()}`;
     }
     this.listItemElement.classList.toggle('hidden-issue', this.issue.isHidden());
-    const data: HiddenIssuesMenuData = {
-      menuItemLabel: this.issue.isHidden() ? i18nString(UIStrings.unhideIssuesLikeThis) :
-                                             i18nString(UIStrings.hideIssuesLikeThis),
-      menuItemAction: () => {
-        const setting = IssuesManager.IssuesManager.getHideIssueByCodeSetting();
-        const values = setting.get();
-        values[this.issue.code()] = this.issue.isHidden() ? IssuesManager.IssuesManager.IssueStatus.Unhidden :
-                                                            IssuesManager.IssuesManager.IssueStatus.Hidden;
-        setting.set(values);
-      },
-    };
-    this.hiddenIssuesMenu.data = data;
+    if (this.hiddenIssuesMenu) {
+      const data: HiddenIssuesMenuData = {
+        menuItemLabel: this.issue.isHidden() ? i18nString(UIStrings.unhideIssuesLikeThis) :
+                                               i18nString(UIStrings.hideIssuesLikeThis),
+        menuItemAction: () => {
+          const setting = IssuesManager.IssuesManager.getHideIssueByCodeSetting();
+          const values = setting.get();
+          values[this.issue.code()] = this.issue.isHidden() ? IssuesManager.IssuesManager.IssueStatus.Unhidden :
+                                                              IssuesManager.IssuesManager.IssueStatus.Hidden;
+          setting.set(values);
+        },
+      };
+      this.hiddenIssuesMenu.data = data;
+    }
   }
 
   updateAffectedResourceVisibility(): void {

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

@@ -30,7 +30,6 @@ export interface HiddenIssuesMenuData {
 export class HideIssuesMenu extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-hide-issues-menu`;
   private readonly shadow: ShadowRoot = this.attachShadow({mode: 'open'});
-  private visible: boolean = false;
   private menuItemLabel: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
   private menuItemAction: () => void = () => {};
 
@@ -44,23 +43,20 @@ export class HideIssuesMenu extends HTMLElement {
     this.shadow.adoptedStyleSheets = [hideIssuesMenuStyles];
   }
 
-  setVisible(x: boolean): void {
-    if (this.visible === x) {
-      return;
-    }
-    this.visible = x;
-    this.render();
-  }
-
   onMenuOpen(event: Event): void {
     event.stopPropagation();
-    const contextMenu = new UI.ContextMenu.ContextMenu(event, {useSoftMenu: true});
+    const contextMenu = new UI.ContextMenu.ContextMenu(event, {
+      useSoftMenu: true,
+      onSoftMenuClosed: (): void => {
+        this.classList.toggle('has-context-menu-opened', false);
+      },
+    });
     contextMenu.headerSection().appendItem(this.menuItemLabel, () => this.menuItemAction());
     contextMenu.show();
+    this.classList.toggle('has-context-menu-opened', true);
   }
 
   private render(): void {
-    this.classList.toggle('hidden', !this.visible);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
       LitHtml.render(LitHtml.html`

package/front_end/panels/issues/components/hideIssuesMenu.css

@@ -16,4 +16,12 @@
   border-radius: 0;
   cursor: pointer;
   border: none;
+
+  --icon-color: var(--color-text-primary);
+
+  opacity: 50%;
+}
+
+.hide-issues-menu-btn:hover {
+  opacity: 100%;
 }

package/front_end/panels/issues/issuesTree.css

@@ -51,7 +51,7 @@
 
 .issue-category.hidden-issues.parent.expanded,
 .issue-kind.parent.expanded {
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   background-color: var(--color-background-elevation-1);
 }
 
@@ -95,6 +95,18 @@ p {
   width: 100%;
 }
 
+.header devtools-hide-issues-menu {
+  display: none;
+}
+
+.header:hover devtools-hide-issues-menu {
+  display: block;
+}
+
+.header devtools-hide-issues-menu.has-context-menu-opened {
+  display: block;
+}
+
 .issue-category .header,
 .issue-kind .header {
   line-height: 24px;
@@ -131,7 +143,7 @@ p {
 
 /* Show a colored border on the left side of opened issues. */
 .body::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   left: calc(var(--issue-indent) + 23px);
@@ -181,7 +193,7 @@ devtools-icon.leading-issue-icon {
 }
 
 .separator::before {
-  content: '·';
+  content: "·";
   padding-left: 1ex;
   padding-right: 1ex;
 }
@@ -250,7 +262,7 @@ ul > li.plain-enum::before {
 }
 
 .affected-resources-label + .affected-resources {
-  padding: 3px 0 0 0;
+  padding: 3px 0 0;
   position: relative;
   user-select: text;
 }
@@ -382,7 +394,7 @@ ul > li.plain-enum::before {
 
 .affected-resources > .parent {
   margin-top: 0;
-  padding: 2px 5px 0 5px;
+  padding: 2px 5px 0;
 }
 
 .affected-resources > .parent.expanded {
@@ -431,3 +443,14 @@ devtools-icon.network-panel {
   vertical-align: baseline;
   height: 14px;
 }
+
+@media (forced-colors: active) {
+  .title {
+    color: ButtonText;
+  }
+
+  .tree-outline:not(.hide-selection-when-blurred) .selected .header .title,
+  .tree-outline.hide-selection-when-blurred .selected:focus-visible .header .title {
+    color: HighlightText;
+  }
+}