[CSS] panels/issues

Bug: 1106746
Change-Id: I59bf90cca950e3d8824266dcaa802eb7fe031b7a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3103786
Commit-Queue: Kriti Sapra <kritisapra@google.com>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

config/gni/devtools_grd_files.gni

@@ -986,6 +986,10 @@ grd_files_debug_sources = [
   "front_end/panels/issues/WasmCrossOriginModuleSharingAffectedResourcesView.js",
   "front_end/panels/issues/components/HideIssuesMenu.js",
   "front_end/panels/issues/components/hideIssuesMenu.css.js",
+  "front_end/panels/issues/cspViolationsListView.css.js",
+  "front_end/panels/issues/cspViolationsView.css.js",
+  "front_end/panels/issues/issuesPane.css.js",
+  "front_end/panels/issues/issuesTree.css.js",
   "front_end/panels/layer_viewer/LayerDetailsView.js",
   "front_end/panels/layer_viewer/LayerTreeOutline.js",
   "front_end/panels/layer_viewer/LayerViewHost.js",

front_end/panels/issues/BUILD.gn

@@ -4,8 +4,18 @@
 
 import("../../../scripts/build/ninja/devtools_entrypoint.gni")
 import("../../../scripts/build/ninja/devtools_module.gni")
+import("../../../scripts/build/ninja/generate_css.gni")
 import("../visibility.gni")
 
+generate_css("css_files") {
+  sources = [
+    "cspViolationsListView.css",
+    "cspViolationsView.css",
+    "issuesPane.css",
+    "issuesTree.css",
+  ]
+}
+
 devtools_module("issues") {
   sources = [
     "AffectedBlockedByResponseView.ts",
@@ -58,7 +68,10 @@ devtools_module("issues") {
 devtools_entrypoint("bundle") {
   entrypoint = "issues.ts"
 
-  deps = [ ":issues" ]
+  deps = [
+    ":css_files",
+    ":issues",
+  ]
 
   visibility = [
     ":*",

front_end/panels/issues/CSPViolationsListView.ts

@@ -8,6 +8,8 @@ import * as Linkifier from '../../ui/components/linkifier/linkifier.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
+import cspViolationsListViewStyles from './cspViolationsListView.css.js';
+
 export class CSPViolationsListView extends UI.Widget.VBox {
   private table = new DataGrid.DataGridController.DataGridController();
   private categoryFilter = new Set<string>();
@@ -16,7 +18,6 @@ export class CSPViolationsListView extends UI.Widget.VBox {
 
   constructor() {
     super(true);
-    this.registerRequiredCSS('panels/issues/cspViolationsListView.css');
 
     this.table.data = {
       columns: [
@@ -117,4 +118,8 @@ export class CSPViolationsListView extends UI.Widget.VBox {
     }
     return 'unknown';
   }
+  wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([cspViolationsListViewStyles]);
+  }
 }

front_end/panels/issues/CSPViolationsView.ts

@@ -3,6 +3,9 @@
 // found in the LICENSE file.
 
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+
+import cspViolationsViewStyles from './cspViolationsView.css.js';
+
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -28,7 +31,7 @@ export class CSPViolationsView extends UI.Widget.VBox {
    */
   constructor() {
     super(true);
-    this.registerRequiredCSS('panels/issues/cspViolationsView.css');
+
     this.contentElement.classList.add('csp-violations-pane');
 
     const topToolbar = new UI.Toolbar.Toolbar('csp-violations-toolbar', this.contentElement);
@@ -92,4 +95,8 @@ export class CSPViolationsView extends UI.Widget.VBox {
       }
     }
   }
+  wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([cspViolationsViewStyles]);
+  }
 }

front_end/panels/issues/IssuesPane.ts

@@ -9,6 +9,9 @@ import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.j
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {HiddenIssuesRow} from './HiddenIssuesRow.js';
+import issuesPaneStyles from './issuesPane.css.js';
+import issuesTreeStyles from './issuesTree.css.js';
+
 import type {AggregatedIssue} from './IssueAggregator.js';
 import {Events as IssueAggregatorEvents, IssueAggregator} from './IssueAggregator.js';
 import {IssueView} from './IssueView.js';
@@ -169,7 +172,7 @@ export class IssuesPane extends UI.Widget.VBox {
 
   private constructor() {
     super(true);
-    this.registerRequiredCSS('panels/issues/issuesPane.css');
+
     this.contentElement.classList.add('issues-pane');
 
     this.categoryViews = new Map();
@@ -179,7 +182,7 @@ export class IssuesPane extends UI.Widget.VBox {
     this.createToolbars();
 
     this.issuesTree = new UI.TreeOutline.TreeOutlineInShadow();
-    this.issuesTree.registerRequiredCSS('panels/issues/issuesTree.css');
+
     this.issuesTree.setShowSelectionOnKeyboardFocus(true);
     this.issuesTree.contentElement.classList.add('issues');
     this.contentElement.appendChild(this.issuesTree.element);
@@ -396,4 +399,9 @@ export class IssuesPane extends UI.Widget.VBox {
       issueView.select(false, true);
     }
   }
+  wasShown(): void {
+    super.wasShown();
+    this.issuesTree.registerCSSFiles([issuesTreeStyles]);
+    this.registerCSSFiles([issuesPaneStyles]);
+  }
 }