Skip to content

Commit 40a817d

Browse files
bmeurerDevtools-frontend LUCI CQ
bmeurer
authored and
Devtools-frontend LUCI CQ
committed
[unified-css] Reintroduce registerRequiredCSS().
This basically reverts fe54ded and 887c6ad, following the decision to consistently use `<style>` for CSS instead of Constructed Style Sheets. Bug: 391381439 Change-Id: I0c4c91383292a25964f9f01ca4b22b1ad981c24e Doc: https://goo.gle/devtools-unified-css-design Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6216262 Reviewed-by: Danil Somsikov <[email protected]> Auto-Submit: Benedikt Meurer <[email protected]> Commit-Queue: Benedikt Meurer <[email protected]>
1 parent 36cb033 commit 40a817d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+187
-218
lines changed

‎config/gni/devtools_grd_files.gni‎

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1435,9 +1435,9 @@ grd_files_debug_sources = [
14351435
"front_end/panels/emulation/InspectedPagePlaceholder.js",
14361436
"front_end/panels/emulation/MediaQueryInspector.js",
14371437
"front_end/panels/emulation/components/DeviceSizeInputElement.js",
1438-
"front_end/panels/emulation/deviceModeView.css.js",
1439-
"front_end/panels/emulation/inspectedPagePlaceholder.css.js",
1440-
"front_end/panels/emulation/mediaQueryInspector.css.js",
1438+
"front_end/panels/emulation/deviceModeView.css.legacy.js",
1439+
"front_end/panels/emulation/inspectedPagePlaceholder.css.legacy.js",
1440+
"front_end/panels/emulation/mediaQueryInspector.css.legacy.js",
14411441
"front_end/panels/event_listeners/EventListenersUtils.js",
14421442
"front_end/panels/event_listeners/EventListenersView.js",
14431443
"front_end/panels/event_listeners/eventListenersView.css.js",
@@ -2228,6 +2228,7 @@ grd_files_debug_sources = [
22282228
"front_end/ui/components/floating_button/floatingButton.css.js",
22292229
"front_end/ui/components/helpers/component-server-setup.js",
22302230
"front_end/ui/components/helpers/directives.js",
2231+
"front_end/ui/components/helpers/get-root-node.js",
22312232
"front_end/ui/components/helpers/scheduled-render.js",
22322233
"front_end/ui/components/highlighting/HighlightManager.js",
22332234
"front_end/ui/components/highlighting/highlighting.css.js",
@@ -2364,7 +2365,7 @@ grd_files_debug_sources = [
23642365
"front_end/ui/legacy/XLink.js",
23652366
"front_end/ui/legacy/XWidget.js",
23662367
"front_end/ui/legacy/ZoomManager.js",
2367-
"front_end/ui/legacy/checkboxTextLabel.css.js",
2368+
"front_end/ui/legacy/checkboxTextLabel.css.legacy.js",
23682369
"front_end/ui/legacy/components/color_picker/ColorFormatSpec.js",
23692370
"front_end/ui/legacy/components/color_picker/ContrastDetails.js",
23702371
"front_end/ui/legacy/components/color_picker/ContrastInfo.js",
@@ -2436,9 +2437,9 @@ grd_files_debug_sources = [
24362437
"front_end/ui/legacy/components/perf_ui/TimelineGrid.js",
24372438
"front_end/ui/legacy/components/perf_ui/TimelineOverviewCalculator.js",
24382439
"front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.js",
2439-
"front_end/ui/legacy/components/perf_ui/chartViewport.css.js",
2440-
"front_end/ui/legacy/components/perf_ui/filmStripView.css.js",
2441-
"front_end/ui/legacy/components/perf_ui/flameChart.css.js",
2440+
"front_end/ui/legacy/components/perf_ui/chartViewport.css.legacy.js",
2441+
"front_end/ui/legacy/components/perf_ui/filmStripView.css.legacy.js",
2442+
"front_end/ui/legacy/components/perf_ui/flameChart.css.legacy.js",
24422443
"front_end/ui/legacy/components/perf_ui/overviewGrid.css.legacy.js",
24432444
"front_end/ui/legacy/components/perf_ui/pieChart.css.js",
24442445
"front_end/ui/legacy/components/perf_ui/timelineGrid.css.legacy.js",
@@ -2457,51 +2458,52 @@ grd_files_debug_sources = [
24572458
"front_end/ui/legacy/components/source_frame/SourceFrame.js",
24582459
"front_end/ui/legacy/components/source_frame/StreamingContentHexView.js",
24592460
"front_end/ui/legacy/components/source_frame/XMLView.js",
2460-
"front_end/ui/legacy/components/source_frame/fontView.css.js",
2461-
"front_end/ui/legacy/components/source_frame/imageView.css.js",
2462-
"front_end/ui/legacy/components/source_frame/jsonView.css.js",
2463-
"front_end/ui/legacy/components/source_frame/resourceSourceFrame.css.js",
2464-
"front_end/ui/legacy/components/source_frame/selfXssDialog.css.js",
2465-
"front_end/ui/legacy/components/source_frame/xmlTree.css.js",
2466-
"front_end/ui/legacy/components/source_frame/xmlView.css.js",
2461+
"front_end/ui/legacy/components/source_frame/fontView.css.legacy.js",
2462+
"front_end/ui/legacy/components/source_frame/imageView.css.legacy.js",
2463+
"front_end/ui/legacy/components/source_frame/jsonView.css.legacy.js",
2464+
"front_end/ui/legacy/components/source_frame/resourceSourceFrame.css.legacy.js",
2465+
"front_end/ui/legacy/components/source_frame/selfXssDialog.css.legacy.js",
2466+
"front_end/ui/legacy/components/source_frame/xmlTree.css.legacy.js",
2467+
"front_end/ui/legacy/components/source_frame/xmlView.css.legacy.js",
24672468
"front_end/ui/legacy/components/utils/ImagePreview.js",
24682469
"front_end/ui/legacy/components/utils/JSPresentationUtils.js",
24692470
"front_end/ui/legacy/components/utils/Linkifier.js",
24702471
"front_end/ui/legacy/components/utils/Reload.js",
24712472
"front_end/ui/legacy/components/utils/TargetDetachedDialog.js",
24722473
"front_end/ui/legacy/components/utils/imagePreview.css.js",
24732474
"front_end/ui/legacy/components/utils/jsUtils.css.js",
2474-
"front_end/ui/legacy/confirmDialog.css.js",
2475-
"front_end/ui/legacy/dialog.css.js",
2476-
"front_end/ui/legacy/dropTarget.css.js",
2475+
"front_end/ui/legacy/confirmDialog.css.legacy.js",
2476+
"front_end/ui/legacy/dialog.css.legacy.js",
2477+
"front_end/ui/legacy/dropTarget.css.legacy.js",
24772478
"front_end/ui/legacy/emptyWidget.css.js",
2478-
"front_end/ui/legacy/filter.css.js",
2479-
"front_end/ui/legacy/glassPane.css.js",
2480-
"front_end/ui/legacy/infobar.css.js",
2481-
"front_end/ui/legacy/inlineButton.css.js",
2479+
"front_end/ui/legacy/emptyWidget.css.legacy.js",
2480+
"front_end/ui/legacy/filter.css.legacy.js",
2481+
"front_end/ui/legacy/glassPane.css.legacy.js",
2482+
"front_end/ui/legacy/infobar.css.legacy.js",
2483+
"front_end/ui/legacy/inlineButton.css.legacy.js",
24822484
"front_end/ui/legacy/inspectorCommon.css.js",
24832485
"front_end/ui/legacy/inspectorCommon.css.legacy.js",
2484-
"front_end/ui/legacy/inspectorViewTabbedPane.css.js",
2485-
"front_end/ui/legacy/listWidget.css.js",
2486-
"front_end/ui/legacy/popover.css.js",
2487-
"front_end/ui/legacy/progressIndicator.css.js",
2488-
"front_end/ui/legacy/remoteDebuggingTerminatedScreen.css.js",
2489-
"front_end/ui/legacy/reportView.css.js",
2490-
"front_end/ui/legacy/rootView.css.js",
2491-
"front_end/ui/legacy/searchableView.css.js",
2492-
"front_end/ui/legacy/smallBubble.css.js",
2493-
"front_end/ui/legacy/softContextMenu.css.js",
2494-
"front_end/ui/legacy/softDropDown.css.js",
2486+
"front_end/ui/legacy/inspectorViewTabbedPane.css.legacy.js",
2487+
"front_end/ui/legacy/listWidget.css.legacy.js",
2488+
"front_end/ui/legacy/popover.css.legacy.js",
2489+
"front_end/ui/legacy/progressIndicator.css.legacy.js",
2490+
"front_end/ui/legacy/remoteDebuggingTerminatedScreen.css.legacy.js",
2491+
"front_end/ui/legacy/reportView.css.legacy.js",
2492+
"front_end/ui/legacy/rootView.css.legacy.js",
2493+
"front_end/ui/legacy/searchableView.css.legacy.js",
2494+
"front_end/ui/legacy/smallBubble.css.legacy.js",
2495+
"front_end/ui/legacy/softContextMenu.css.legacy.js",
2496+
"front_end/ui/legacy/softDropDown.css.legacy.js",
24952497
"front_end/ui/legacy/softDropDownButton.css.legacy.js",
2496-
"front_end/ui/legacy/splitWidget.css.js",
2497-
"front_end/ui/legacy/suggestBox.css.js",
2498-
"front_end/ui/legacy/tabbedPane.css.js",
2499-
"front_end/ui/legacy/targetCrashedScreen.css.js",
2498+
"front_end/ui/legacy/splitWidget.css.legacy.js",
2499+
"front_end/ui/legacy/suggestBox.css.legacy.js",
2500+
"front_end/ui/legacy/tabbedPane.css.legacy.js",
2501+
"front_end/ui/legacy/targetCrashedScreen.css.legacy.js",
25002502
"front_end/ui/legacy/textPrompt.css.legacy.js",
25012503
"front_end/ui/legacy/theme_support/ThemeSupport.js",
25022504
"front_end/ui/legacy/toolbar.css.js",
2503-
"front_end/ui/legacy/treeoutline.css.js",
2504-
"front_end/ui/legacy/viewContainers.css.js",
2505+
"front_end/ui/legacy/treeoutline.css.legacy.js",
2506+
"front_end/ui/legacy/viewContainers.css.legacy.js",
25052507
"front_end/ui/lit/i18n-template.js",
25062508
"front_end/ui/visual_logging/Debugging.js",
25072509
"front_end/ui/visual_logging/DomState.js",

‎front_end/panels/emulation/BUILD.gn‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ generate_css("css_files") {
1414
"inspectedPagePlaceholder.css",
1515
"mediaQueryInspector.css",
1616
]
17+
18+
legacy = true
1719
}
1820

1921
devtools_module("emulation") {

‎front_end/panels/emulation/DeviceModeView.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import * as UI from '../../ui/legacy/legacy.js';
1212
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
1313

1414
import {DeviceModeToolbar} from './DeviceModeToolbar.js';
15-
import deviceModeViewStyles from './deviceModeView.css.js';
15+
import deviceModeViewStyles from './deviceModeView.css.legacy.js';
1616
import {MediaQueryInspector} from './MediaQueryInspector.js';
1717

1818
const UIStrings = {
@@ -100,6 +100,7 @@ export class DeviceModeView extends UI.Widget.VBox {
100100

101101
this.setMinimumSize(150, 150);
102102
this.element.classList.add('device-mode-view');
103+
this.registerRequiredCSS(deviceModeViewStyles);
103104

104105
this.model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
105106
this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.updateUI, this);
@@ -439,15 +440,12 @@ export class DeviceModeView extends UI.Widget.VBox {
439440
}
440441

441442
override wasShown(): void {
442-
super.wasShown();
443-
this.registerCSSFiles([deviceModeViewStyles]);
444443
this.measureHandles();
445444
this.toolbar.restore();
446445
}
447446

448447
override willHide(): void {
449448
this.model.emulate(EmulationModel.DeviceModeModel.Type.None, null, null);
450-
super.willHide();
451449
}
452450

453451
async captureScreenshot(): Promise<void> {

‎front_end/panels/emulation/InspectedPagePlaceholder.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import * as Common from '../../core/common/common.js';
66
import * as UI from '../../ui/legacy/legacy.js';
77

8-
import inspectedPagePlaceholderStyles from './inspectedPagePlaceholder.css.js';
8+
import inspectedPagePlaceholderStyles from './inspectedPagePlaceholder.css.legacy.js';
99

1010
let inspectedPagePlaceholderInstance: InspectedPagePlaceholder;
1111

@@ -14,6 +14,7 @@ export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<Ev
1414
private updateId?: number;
1515
constructor() {
1616
super(true);
17+
this.registerRequiredCSS(inspectedPagePlaceholderStyles);
1718
UI.ZoomManager.ZoomManager.instance().addEventListener(UI.ZoomManager.Events.ZOOM_CHANGED, this.onResize, this);
1819
this.restoreMinimumSize();
1920
}
@@ -29,11 +30,6 @@ export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<Ev
2930
return inspectedPagePlaceholderInstance;
3031
}
3132

32-
override wasShown(): void {
33-
super.wasShown();
34-
this.registerCSSFiles([inspectedPagePlaceholderStyles]);
35-
}
36-
3733
override onResize(): void {
3834
if (this.updateId) {
3935
this.element.window().cancelAnimationFrame(this.updateId);

‎front_end/panels/emulation/MediaQueryInspector.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type * as Workspace from '../../models/workspace/workspace.js';
1111
import * as UI from '../../ui/legacy/legacy.js';
1212
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
1313

14-
import mediaQueryInspectorStyles from './mediaQueryInspector.css.js';
14+
import mediaQueryInspectorStyles from './mediaQueryInspector.css.legacy.js';
1515

1616
const UIStrings = {
1717
/**
@@ -37,6 +37,7 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
3737
getWidthCallback: () => number, setWidthCallback: (arg0: number) => void,
3838
mediaThrottler: Common.Throttler.Throttler) {
3939
super(true);
40+
this.registerRequiredCSS(mediaQueryInspectorStyles);
4041
this.contentElement.classList.add('media-inspector-view');
4142
this.contentElement.setAttribute('jslog', `${VisualLogging.mediaInspectorView().track({click: true})}`);
4243
this.contentElement.addEventListener('click', this.onMediaQueryClicked.bind(this), false);
@@ -270,7 +271,6 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
270271

271272
override wasShown(): void {
272273
super.wasShown();
273-
this.registerCSSFiles([mediaQueryInspectorStyles]);
274274
this.scheduleMediaQueriesUpdate();
275275
}
276276

‎front_end/ui/components/helpers/BUILD.gn‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ devtools_module("helpers") {
1212
sources = [
1313
"component-server-setup.ts",
1414
"directives.ts",
15+
"get-root-node.ts",
1516
"scheduled-render.ts",
1617
]
1718

‎front_end/ui/components/helpers/get-root-node.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Copyright 2021 The Chromium Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
/**
6+
* Function to return the root node of a given node.
7+
*/
8+
export function getRootNode(node: Node): ShadowRoot|Document {
9+
const potentialRoot = node.getRootNode();
10+
if (!(potentialRoot instanceof Document || potentialRoot instanceof ShadowRoot)) {
11+
throw new Error(`Expected root of widget to be a document or shadowRoot, but was "${potentialRoot.nodeName}"`);
12+
}
13+
return potentialRoot;
14+
}

‎front_end/ui/components/helpers/helpers.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44

55
import * as ComponentServerSetup from './component-server-setup.js';
66
import * as Directives from './directives.js';
7+
import * as GetRootNode from './get-root-node.js';
78
import * as ScheduledRender from './scheduled-render.js';
89

910
export {
1011
ComponentServerSetup,
1112
Directives,
13+
GetRootNode,
1214
ScheduledRender,
1315
};

‎front_end/ui/legacy/BUILD.gn‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ import("../../../scripts/build/typescript/typescript.gni")
99
import("./visibility.gni")
1010

1111
generate_css("css_files") {
12+
sources = [
13+
"emptyWidget.css",
14+
"inspectorCommon.css",
15+
"toolbar.css",
16+
]
17+
}
18+
19+
generate_css("legacy_css_files") {
1220
sources = [
1321
"checkboxTextLabel.css",
1422
"confirmDialog.css",
@@ -31,22 +39,15 @@ generate_css("css_files") {
3139
"smallBubble.css",
3240
"softContextMenu.css",
3341
"softDropDown.css",
42+
"softDropDownButton.css",
3443
"splitWidget.css",
3544
"suggestBox.css",
3645
"tabbedPane.css",
3746
"targetCrashedScreen.css",
38-
"toolbar.css",
47+
"textPrompt.css",
3948
"treeoutline.css",
4049
"viewContainers.css",
4150
]
42-
}
43-
44-
generate_css("legacy_css_files") {
45-
sources = [
46-
"inspectorCommon.css",
47-
"softDropDownButton.css",
48-
"textPrompt.css",
49-
]
5051

5152
legacy = true
5253
}

‎front_end/ui/legacy/Dialog.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import * as Common from '../../core/common/common.js';
3232
import * as VisualLogging from '../visual_logging/visual_logging.js';
3333

3434
import * as ARIAUtils from './ARIAUtils.js';
35-
import dialogStyles from './dialog.css.js';
35+
import dialogStyles from './dialog.css.legacy.js';
3636
import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
3737
import {InspectorView} from './InspectorView.js';
3838
import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
@@ -50,7 +50,7 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
5050

5151
constructor(jslogContext?: string) {
5252
super();
53-
this.registerCSSFiles([dialogStyles]);
53+
this.registerRequiredCSS(dialogStyles);
5454
this.contentElement.tabIndex = 0;
5555
this.contentElement.addEventListener('focus', () => this.widget().focus(), false);
5656
if (jslogContext) {
@@ -81,7 +81,8 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
8181
}
8282

8383
override show(where?: Document|Element): void {
84-
const document = where instanceof Document ? where : (where ?? InspectorView.instance().element).ownerDocument;
84+
const document =
85+
(where instanceof Document ? where : (where || InspectorView.instance().element).ownerDocument as Document);
8586
this.targetDocument = document;
8687
this.targetDocument.addEventListener('keydown', this.targetDocumentKeyDownHandler, true);
8788

0 commit comments

Comments
 (0)