diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 3a1390753c..df9772efd0 100644 --- a/config/gni/devtools_grd_files.gni +++ b/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", diff --git a/front_end/panels/event_listeners/BUILD.gn b/front_end/panels/event_listeners/BUILD.gn index ff027c9940..cf7fc2a345 100644 --- a/front_end/panels/event_listeners/BUILD.gn +++ b/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 = [ ":*", diff --git a/front_end/panels/event_listeners/EventListenersView.ts b/front_end/panels/event_listeners/EventListenersView.ts index a93d09f687..1671ba7841 100644 --- a/front_end/panels/event_listeners/EventListenersView.ts +++ b/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 { diff --git a/front_end/panels/layer_viewer/BUILD.gn b/front_end/panels/layer_viewer/BUILD.gn index 597fd3b5e4..3610bc4a05 100644 --- a/front_end/panels/layer_viewer/BUILD.gn +++ b/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 = [ ":*", diff --git a/front_end/panels/layer_viewer/LayerDetailsView.ts b/front_end/panels/layer_viewer/LayerDetailsView.ts index d1879559b8..1189f2f392 100644 --- a/front_end/panels/layer_viewer/LayerDetailsView.ts +++ b/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(); } diff --git a/front_end/panels/layer_viewer/Layers3DView.ts b/front_end/panels/layer_viewer/Layers3DView.ts index 4027126fab..5d11e1ef3b 100644 --- a/front_end/panels/layer_viewer/Layers3DView.ts +++ b/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; } diff --git a/front_end/panels/layer_viewer/PaintProfilerView.ts b/front_end/panels/layer_viewer/PaintProfilerView.ts index 1a279028b4..69257b8a45 100644 --- a/front_end/panels/layer_viewer/PaintProfilerView.ts +++ b/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 diff --git a/front_end/panels/media/BUILD.gn b/front_end/panels/media/BUILD.gn index 891f88f2e7..e855122272 100644 --- a/front_end/panels/media/BUILD.gn +++ b/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 = [ ":*", diff --git a/front_end/panels/media/EventDisplayTable.ts b/front_end/panels/media/EventDisplayTable.ts index 355bbd509e..e76ef0f98f 100644 --- a/front_end/panels/media/EventDisplayTable.ts +++ b/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]); + } } diff --git a/front_end/panels/media/PlayerListView.ts b/front_end/panels/media/PlayerListView.ts index d74c3a1df3..5bf961233a 100644 --- a/front_end/panels/media/PlayerListView.ts +++ b/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]); + } } diff --git a/front_end/panels/media/PlayerMessagesView.ts b/front_end/panels/media/PlayerMessagesView.ts index a73483cea9..22d14c134f 100644 --- a/front_end/panels/media/PlayerMessagesView.ts +++ b/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]); + } } diff --git a/front_end/panels/media/PlayerPropertiesView.ts b/front_end/panels/media/PlayerPropertiesView.ts index 3c2b0453f8..b334286c16 100644 --- a/front_end/panels/media/PlayerPropertiesView.ts +++ b/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]); + } } diff --git a/scripts/eslint_rules/lib/migrate_create_shadow_root_with_styles.js b/scripts/eslint_rules/lib/migrate_create_shadow_root_with_styles.js index 5f41c62fd6..37c05032a6 100644 --- a/scripts/eslint_rules/lib/migrate_create_shadow_root_with_styles.js +++ b/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; diff --git a/scripts/eslint_rules/lib/migrate_register_required_css.js b/scripts/eslint_rules/lib/migrate_register_required_css.js index 9d6f6f3d16..66594b3588 100644 --- a/scripts/eslint_rules/lib/migrate_register_required_css.js +++ b/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;