From 5ede09cb8a408cefb3f5246caf318bcb184d89bc Mon Sep 17 00:00:00 2001 From: Kriti Sapra Date: Wed, 18 Aug 2021 14:41:53 +0000 Subject: [PATCH] [CSS] panels/issues Bug: 1106746 Change-Id: I59bf90cca950e3d8824266dcaa802eb7fe031b7a Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3103786 Commit-Queue: Kriti Sapra Reviewed-by: Jack Franklin --- config/gni/devtools_grd_files.gni | 4 ++++ front_end/panels/issues/BUILD.gn | 15 ++++++++++++++- front_end/panels/issues/CSPViolationsListView.ts | 7 ++++++- front_end/panels/issues/CSPViolationsView.ts | 9 ++++++++- front_end/panels/issues/IssuesPane.ts | 12 ++++++++++-- 5 files changed, 42 insertions(+), 5 deletions(-) diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index d97d84ffbc..26d2011daf 100644 --- a/config/gni/devtools_grd_files.gni +++ b/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", diff --git a/front_end/panels/issues/BUILD.gn b/front_end/panels/issues/BUILD.gn index 010d44b4a1..fa48550d80 100644 --- a/front_end/panels/issues/BUILD.gn +++ b/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 = [ ":*", diff --git a/front_end/panels/issues/CSPViolationsListView.ts b/front_end/panels/issues/CSPViolationsListView.ts index 0d51f11dd8..734271a625 100644 --- a/front_end/panels/issues/CSPViolationsListView.ts +++ b/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(); @@ -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]); + } } diff --git a/front_end/panels/issues/CSPViolationsView.ts b/front_end/panels/issues/CSPViolationsView.ts index 512e6001ab..65b33370aa 100644 --- a/front_end/panels/issues/CSPViolationsView.ts +++ b/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]); + } } diff --git a/front_end/panels/issues/IssuesPane.ts b/front_end/panels/issues/IssuesPane.ts index cd7e787f88..9c5ac6b117 100644 --- a/front_end/panels/issues/IssuesPane.ts +++ b/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]); + } }