[CSS]: panels/event-listeners, panels/layer_viewer and panels/media

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

config/gni/devtools_grd_files.gni

@@ -934,6 +934,7 @@ grd_files_debug_sources = [
   "front_end/panels/emulation/utils/UserAgentMetadata.js",
   "front_end/panels/event_listeners/EventListenersUtils.js",
   "front_end/panels/event_listeners/EventListenersView.js",
+  "front_end/panels/event_listeners/eventListenersView.css.js",
   "front_end/panels/help/HelpImpl.js",
   "front_end/panels/help/ReleaseNoteText.js",
   "front_end/panels/help/ReleaseNoteView.js",
@@ -969,6 +970,9 @@ grd_files_debug_sources = [
   "front_end/panels/layer_viewer/Layers3DView.js",
   "front_end/panels/layer_viewer/PaintProfilerView.js",
   "front_end/panels/layer_viewer/TransformController.js",
+  "front_end/panels/layer_viewer/layerDetailsView.css.js",
+  "front_end/panels/layer_viewer/layers3DView.css.js",
+  "front_end/panels/layer_viewer/paintProfiler.css.js",
   "front_end/panels/layers/LayerPaintProfilerView.js",
   "front_end/panels/layers/LayerTreeModel.js",
   "front_end/panels/layers/LayersPanel.js",
@@ -994,6 +998,10 @@ grd_files_debug_sources = [
   "front_end/panels/media/PlayerPropertiesView.js",
   "front_end/panels/media/TickingFlameChart.js",
   "front_end/panels/media/TickingFlameChartHelpers.js",
+  "front_end/panels/media/eventDisplayTable.css.js",
+  "front_end/panels/media/playerListView.css.js",
+  "front_end/panels/media/playerMessagesView.css.js",
+  "front_end/panels/media/playerPropertiesView.css.js",
   "front_end/panels/mobile_throttling/MobileThrottlingSelector.js",
   "front_end/panels/mobile_throttling/NetworkPanelIndicator.js",
   "front_end/panels/mobile_throttling/NetworkThrottlingSelector.js",

front_end/panels/event_listeners/BUILD.gn

@@ -4,8 +4,13 @@
 
 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 = [ "eventListenersView.css" ]
+}
+
 devtools_module("event_listeners") {
   sources = [
     "EventListenersUtils.ts",
@@ -25,7 +30,11 @@ devtools_module("event_listeners") {
 devtools_entrypoint("bundle") {
   entrypoint = "event_listeners.ts"
 
-  deps = [ ":event_listeners" ]
+  deps = [
+    ":css_files",
+    ":event_listeners",
+    "../../ui/legacy/components/object_ui:css_files",
+  ]
 
   visibility = [
     ":*",

front_end/panels/event_listeners/EventListenersView.ts

@@ -8,8 +8,13 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
+/* eslint-disable rulesdir/es_modules_import */
+import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+
+import eventListenersViewStyles from './eventListenersView.css.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 
 import type {FrameworkEventListenersObject} from './EventListenersUtils.js';
@@ -60,8 +65,7 @@ export class EventListenersView extends UI.Widget.VBox {
     this._enableDefaultTreeFocus = enableDefaultTreeFocus;
     this._treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
     this._treeOutline.hideOverflow();
-    this._treeOutline.registerRequiredCSS('ui/legacy/components/object_ui/objectValue.css');
-    this._treeOutline.registerRequiredCSS('panels/event_listeners/eventListenersView.css');
+
     this._treeOutline.setComparator(EventListenersTreeElement.comparator);
     this._treeOutline.element.classList.add('monospace');
     this._treeOutline.setShowSelectionOnKeyboardFocus(true);
@@ -234,6 +238,10 @@ export class EventListenersView extends UI.Widget.VBox {
 
   _eventListenersArrivedForTest(): void {
   }
+  wasShown(): void {
+    super.wasShown();
+    this._treeOutline.registerCSSFiles([eventListenersViewStyles, objectValueStyles]);
+  }
 }
 
 export class EventListenersTreeElement extends UI.TreeOutline.TreeElement {

front_end/panels/layer_viewer/BUILD.gn

@@ -4,8 +4,17 @@
 
 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 = [
+    "layerDetailsView.css",
+    "layers3DView.css",
+    "paintProfiler.css",
+  ]
+}
+
 devtools_module("layer_viewer") {
   sources = [
     "LayerDetailsView.ts",
@@ -29,7 +38,10 @@ devtools_module("layer_viewer") {
 devtools_entrypoint("bundle") {
   entrypoint = "layer_viewer.ts"
 
-  deps = [ ":layer_viewer" ]
+  deps = [
+    ":css_files",
+    ":layer_viewer",
+  ]
 
   visibility = [
     ":*",

front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -34,6 +34,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+
+import layerDetailsViewStyles from './layerDetailsView.css.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 
 import type {LayerView, LayerViewHost, Selection, SnapshotSelection} from './LayerViewHost.js';
@@ -171,7 +174,7 @@ export class LayerDetailsView extends UI.Widget.Widget implements LayerView {
 
   constructor(layerViewHost: LayerViewHost) {
     super(true);
-    this.registerRequiredCSS('panels/layer_viewer/layerDetailsView.css');
+
     this._layerViewHost = layerViewHost;
     this._layerViewHost.registerView(this);
     this._emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.selectALayerToSeeItsDetails));
@@ -196,6 +199,7 @@ export class LayerDetailsView extends UI.Widget.Widget implements LayerView {
 
   wasShown(): void {
     super.wasShown();
+    this.registerCSSFiles([layerDetailsViewStyles]);
     this.update();
   }
 

front_end/panels/layer_viewer/Layers3DView.ts

@@ -33,6 +33,9 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+
+import layers3DViewStyles from './layers3DView.css.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 
 import type * as SDK from '../../core/sdk/sdk.js';
@@ -130,7 +133,6 @@ export class Layers3DView extends UI.Widget.VBox implements LayerView {
   constructor(layerViewHost: LayerViewHost) {
     super(true);
 
-    this.registerRequiredCSS('panels/layer_viewer/layers3DView.css');
     this.contentElement.classList.add('layers-3d-view');
     this._failBanner = new UI.Widget.VBox();
     this._failBanner.element.classList.add('full-widget-dimmed-banner');
@@ -200,6 +202,7 @@ export class Layers3DView extends UI.Widget.VBox implements LayerView {
 
   wasShown(): void {
     this._textureManager.resume();
+    this.registerCSSFiles([layers3DViewStyles]);
     if (!this._needsUpdate) {
       return;
     }

front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -33,6 +33,9 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+
+import paintProfilerStyles from './paintProfiler.css.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 
 import type * as SDK from '../../core/sdk/sdk.js';
@@ -97,7 +100,7 @@ export class PaintProfilerView extends UI.Widget.HBox {
 
   constructor(showImageCallback: (arg0?: string|undefined) => void) {
     super(true);
-    this.registerRequiredCSS('panels/layer_viewer/paintProfiler.css');
+
     this.contentElement.classList.add('paint-profiler-overview');
     this._canvasContainer = this.contentElement.createChild('div', 'paint-profiler-canvas-container');
     this._progressBanner = this.contentElement.createChild('div', 'full-widget-dimmed-banner hidden');
@@ -409,6 +412,10 @@ export class PaintProfilerView extends UI.Widget.HBox {
     this._selectionWindow.reset();
     this._selectionWindow.setEnabled(false);
   }
+  wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([paintProfilerStyles]);
+  }
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

front_end/panels/media/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 = [
+    "eventDisplayTable.css",
+    "playerListView.css",
+    "playerMessagesView.css",
+    "playerPropertiesView.css",
+  ]
+}
+
 devtools_module("media") {
   sources = [
     "EventDisplayTable.ts",
@@ -36,7 +46,10 @@ devtools_module("media") {
 devtools_entrypoint("bundle") {
   entrypoint = "media.ts"
 
-  deps = [ ":media" ]
+  deps = [
+    ":css_files",
+    ":media",
+  ]
 
   visibility = [
     ":*",

front_end/panels/media/EventDisplayTable.ts

@@ -9,6 +9,8 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import eventDisplayTableStyles from './eventDisplayTable.css.js';
+
 import type {PlayerEvent} from './MediaModel.js';
 
 const UIStrings = {
@@ -78,7 +80,7 @@ export class PlayerEventsView extends UI.Widget.VBox {
     super();
 
     // Set up element styles.
-    this.registerRequiredCSS('panels/media/eventDisplayTable.css');
+
     this.contentElement.classList.add('event-display-table-contents-table-container');
 
     this._dataGrid = this._createDataGrid([
@@ -163,4 +165,8 @@ export class PlayerEventsView extends UI.Widget.VBox {
       sort: DataGrid.DataGrid.Order.Ascending,
     } as DataGrid.DataGrid.ColumnDescriptor;
   }
+  wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([eventDisplayTableStyles]);
+  }
 }

front_end/panels/media/PlayerListView.ts

@@ -6,6 +6,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
+
+import playerListViewStyles from './playerListView.css.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 
 import type {MainView, TriggerDispatcher} from './MainView.js';
@@ -103,7 +106,6 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
     // The parent tree for storing sections
     this._sidebarTree = new UI.TreeOutline.TreeOutlineInShadow();
     this.contentElement.appendChild(this._sidebarTree.element);
-    this._sidebarTree.registerRequiredCSS('panels/media/playerListView.css');
 
     // Players active in this tab.
     this._playerList = this._addListSection(i18nString(UIStrings.players));
@@ -183,4 +185,8 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
       this.setMediaElementPlayerIcon(playerID, 'smallicon-videoplayer-destroyed');
     }
   }
+  wasShown(): void {
+    super.wasShown();
+    this._sidebarTree.registerCSSFiles([playerListViewStyles]);
+  }
 }

front_end/panels/media/PlayerMessagesView.ts

@@ -7,6 +7,9 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
+
+import playerMessagesViewStyles from './playerMessagesView.css.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 
 const UIStrings = {
@@ -203,7 +206,7 @@ class MessageLevelSelector extends Common.ObjectWrapper.ObjectWrapper implements
   createElementForItem(item: SelectableLevel): Element {
     const element = document.createElement('div');
     const shadowRoot = UI.Utils.createShadowRootWithCoreStyles(
-        element, {cssFile: 'panels/media/playerMessagesView.css', delegatesFocus: undefined});
+        element, {cssFile: [playerMessagesViewStyles], delegatesFocus: undefined});
     const container = shadowRoot.createChild('div', 'media-messages-level-dropdown-element');
     const checkBox = container.createChild('div', 'media-messages-level-dropdown-checkbox') as HTMLElement;
     const text = container.createChild('span', 'media-messages-level-dropdown-text');
@@ -237,7 +240,6 @@ export class PlayerMessagesView extends UI.Widget.VBox {
 
   constructor() {
     super();
-    this.registerRequiredCSS('panels/media/playerMessagesView.css');
 
     this._headerPanel = this.contentElement.createChild('div', 'media-messages-header');
     this._bodyPanel = this.contentElement.createChild('div', 'media-messages-body');
@@ -319,4 +321,8 @@ export class PlayerMessagesView extends UI.Widget.VBox {
         this._bodyPanel.createChild('div', 'media-messages-message-container media-message-' + message.level);
     UI.UIUtils.createTextChild(container, message.message);
   }
+  wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([playerMessagesViewStyles]);
+  }
 }

front_end/panels/media/PlayerPropertiesView.ts

@@ -7,6 +7,9 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as UI from '../../ui/legacy/legacy.js';
+
+import playerPropertiesViewStyles from './playerPropertiesView.css.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 
 const UIStrings = {
@@ -439,7 +442,7 @@ export class PlayerPropertiesView extends UI.Widget.VBox {
   constructor() {
     super();
     this.contentElement.classList.add('media-properties-frame');
-    this.registerRequiredCSS('panels/media/playerPropertiesView.css');
+
     this._mediaElements = [];
     this._videoDecoderElements = [];
     this._audioDecoderElements = [];
@@ -622,4 +625,8 @@ export class PlayerPropertiesView extends UI.Widget.VBox {
     const textTrackManager = new TextTrackManager(this);
     this._attributeMap.set(PlayerPropertyKeys.TextTracks, textTrackManager);
   }
+  wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([playerPropertiesViewStyles]);
+  }
 }

scripts/eslint_rules/lib/migrate_create_shadow_root_with_styles.js

@@ -22,7 +22,7 @@ function updateGRDFile(cssFilePath) {
     return;
   }
 
-  const contents = fs.readFileSync('config/gni/devtools_grd_files.gni', 'utf-8').split('\n');
+  const contents = fs.readFileSync('config/gni/devtools_grd_files.gni', 'utf-8').split('\n').map(c => c.trim());
   const newGRDFileEntry = JSON.stringify(`front_end/${cssFilePath}.js`) + ',';
   if (contents.includes(newGRDFileEntry)) {
     return;

scripts/eslint_rules/lib/migrate_register_required_css.js

@@ -69,7 +69,7 @@ function updateGRDFile(cssFilePath) {
     return;
   }
 
-  const contents = fs.readFileSync('config/gni/devtools_grd_files.gni', 'utf-8').split('\n');
+  const contents = fs.readFileSync('config/gni/devtools_grd_files.gni', 'utf-8').split('\n').map(c => c.trim());
   const newGRDFileEntry = JSON.stringify(`front_end/${cssFilePath}.js`) + ',';
   if (contents.includes(newGRDFileEntry)) {
     return;