From d8fb451d04b520f9895c76d80906aaf721502ddd Mon Sep 17 00:00:00 2001 From: Kriti Sapra Date: Wed, 18 Aug 2021 14:14:18 +0000 Subject: [PATCH] [CSS]: panels/elements Bug: 1106746 Change-Id: I2f0212094fd4b89e57ca1acad67cb8ede7d63d2c Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3103238 Reviewed-by: Jack Franklin Commit-Queue: Kriti Sapra --- config/gni/devtools_grd_files.gni | 9 +++++++++ front_end/panels/elements/BUILD.gn | 9 +++++++++ front_end/panels/elements/DOMLinkifier.ts | 4 ++-- front_end/panels/elements/ElementStatePaneWidget.ts | 4 +++- front_end/panels/elements/ElementsPanel.ts | 8 ++++++-- front_end/panels/elements/ElementsTreeOutline.ts | 4 +++- front_end/panels/elements/MetricsSidebarPane.ts | 6 +++++- front_end/panels/elements/NodeStackTraceWidget.ts | 5 ++++- front_end/panels/elements/PlatformFontsWidget.ts | 8 +++++++- front_end/panels/elements/PropertiesWidget.ts | 6 +++++- front_end/panels/elements/StylesSidebarPane.ts | 7 ++++--- package.json | 2 +- 12 files changed, 58 insertions(+), 14 deletions(-) diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 5de2ee3329..d97d84ffbc 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni @@ -937,6 +937,15 @@ grd_files_debug_sources = [ "front_end/panels/elements/computedStyleSidebarPane.css.js", "front_end/panels/elements/computedStyleWidgetTree.css.js", "front_end/panels/elements/domLinkifier.css.js", + "front_end/panels/elements/elementStatePaneWidget.css.js", + "front_end/panels/elements/elementsPanel.css.js", + "front_end/panels/elements/elementsTreeOutline.css.js", + "front_end/panels/elements/metricsSidebarPane.css.js", + "front_end/panels/elements/nodeStackTraceWidget.css.js", + "front_end/panels/elements/platformFontsWidget.css.js", + "front_end/panels/elements/propertiesWidget.css.js", + "front_end/panels/elements/stylesSectionTree.css.js", + "front_end/panels/elements/stylesSidebarPane.css.js", "front_end/panels/emulation/AdvancedApp.js", "front_end/panels/emulation/DeviceModeToolbar.js", "front_end/panels/emulation/DeviceModeView.js", diff --git a/front_end/panels/elements/BUILD.gn b/front_end/panels/elements/BUILD.gn index 3068402f08..537c3e72fc 100644 --- a/front_end/panels/elements/BUILD.gn +++ b/front_end/panels/elements/BUILD.gn @@ -14,6 +14,15 @@ generate_css("css_files") { "computedStyleSidebarPane.css", "computedStyleWidgetTree.css", "domLinkifier.css", + "elementStatePaneWidget.css", + "elementsPanel.css", + "elementsTreeOutline.css", + "metricsSidebarPane.css", + "nodeStackTraceWidget.css", + "platformFontsWidget.css", + "propertiesWidget.css", + "stylesSectionTree.css", + "stylesSidebarPane.css", ] } diff --git a/front_end/panels/elements/DOMLinkifier.ts b/front_end/panels/elements/DOMLinkifier.ts index 3517e842a9..586bc48aed 100644 --- a/front_end/panels/elements/DOMLinkifier.ts +++ b/front_end/panels/elements/DOMLinkifier.ts @@ -109,8 +109,8 @@ export const linkifyDeferredNodeReference = function( preventKeyboardFocus: undefined, }): Node { const root = document.createElement('div'); - const shadowRoot = UI.Utils.createShadowRootWithCoreStyles( - root, {cssFile: 'panels/elements/domLinkifier.css', delegatesFocus: undefined}); + const shadowRoot = + UI.Utils.createShadowRootWithCoreStyles(root, {cssFile: [domLinkifierStyles], delegatesFocus: undefined}); const link = (shadowRoot.createChild('div', 'node-link') as HTMLDivElement); link.createChild('slot'); link.addEventListener('click', deferredNode.resolve.bind(deferredNode, onDeferredNodeResolved), false); diff --git a/front_end/panels/elements/ElementStatePaneWidget.ts b/front_end/panels/elements/ElementStatePaneWidget.ts index 89110f7118..1611b650ca 100644 --- a/front_end/panels/elements/ElementStatePaneWidget.ts +++ b/front_end/panels/elements/ElementStatePaneWidget.ts @@ -7,6 +7,7 @@ import * as SDK from '../../core/sdk/sdk.js'; import * as UI from '../../ui/legacy/legacy.js'; import {ElementsPanel} from './ElementsPanel.js'; +import elementStatePaneWidgetStyles from './elementStatePaneWidget.css.js'; const UIStrings = { /** @@ -29,7 +30,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget { private cssModel?: SDK.CSSModel.CSSModel|null; constructor() { super(true); - this.registerRequiredCSS('panels/elements/elementStatePaneWidget.css'); + this.contentElement.className = 'styles-element-state-pane'; UI.UIUtils.createTextChild(this.contentElement.createChild('div'), i18nString(UIStrings.forceElementState)); const table = document.createElement('table'); @@ -98,6 +99,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget { wasShown(): void { super.wasShown(); + this.registerCSSFiles([elementStatePaneWidgetStyles]); this.update(); } diff --git a/front_end/panels/elements/ElementsPanel.ts b/front_end/panels/elements/ElementsPanel.ts index f619d99c6e..77e847ba21 100644 --- a/front_end/panels/elements/ElementsPanel.ts +++ b/front_end/panels/elements/ElementsPanel.ts @@ -38,6 +38,9 @@ import * as i18n from '../../core/i18n/i18n.js'; import * as Root from '../../core/root/root.js'; import * as SDK from '../../core/sdk/sdk.js'; import * as Extensions from '../../models/extensions/extensions.js'; + +import elementsPanelStyles from './elementsPanel.css.js'; + import type * as Adorners from '../../ui/components/adorners/adorners.js'; import * as IconButton from '../../ui/components/icon_button/icon_button.js'; import * as Components from '../../ui/legacy/components/utils/utils.js'; @@ -183,7 +186,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S constructor() { super('elements'); - this.registerRequiredCSS('panels/elements/elementsPanel.css'); + this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'elementsPanelSplitViewState', 325, 325); this.splitWidget.addEventListener( UI.SplitWidget.Events.SidebarSizeChanged, this.updateTreeOutlineVisibleWidth.bind(this)); @@ -404,7 +407,9 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S } wasShown(): void { + super.wasShown(); UI.Context.Context.instance().setFlavor(ElementsPanel, this); + this.registerCSSFiles([elementsPanelStyles]); for (const treeOutline of this.treeOutlines) { // Attach heavy component lazily @@ -416,7 +421,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S this.contentElementInternal.appendChild(treeOutline.element); } } - super.wasShown(); const domModels = SDK.TargetManager.TargetManager.instance().models(SDK.DOMModel.DOMModel); for (const domModel of domModels) { diff --git a/front_end/panels/elements/ElementsTreeOutline.ts b/front_end/panels/elements/ElementsTreeOutline.ts index 346d5ecd6f..80c2856bf7 100644 --- a/front_end/panels/elements/ElementsTreeOutline.ts +++ b/front_end/panels/elements/ElementsTreeOutline.ts @@ -40,7 +40,9 @@ import * as UI from '../../ui/legacy/legacy.js'; import {linkifyDeferredNodeReference} from './DOMLinkifier.js'; import {ElementsPanel} from './ElementsPanel.js'; import {ElementsTreeElement, InitialChildrenLimit} from './ElementsTreeElement.js'; +import elementsTreeOutlineStyles from './elementsTreeOutline.css.js'; import {ImagePreviewPopover} from './ImagePreviewPopover.js'; + import type {MarkerDecoratorRegistration} from './MarkerDecorator.js'; const UIStrings = { @@ -101,7 +103,7 @@ export class ElementsTreeOutline extends UI.TreeOutline.TreeOutline { this.treeElementByNode = new WeakMap(); const shadowContainer = document.createElement('div'); this.shadowRoot = UI.Utils.createShadowRootWithCoreStyles( - shadowContainer, {cssFile: 'panels/elements/elementsTreeOutline.css', delegatesFocus: undefined}); + shadowContainer, {cssFile: [elementsTreeOutlineStyles], delegatesFocus: undefined}); const outlineDisclosureElement = this.shadowRoot.createChild('div', 'elements-disclosure'); this.elementInternal = this.element; diff --git a/front_end/panels/elements/MetricsSidebarPane.ts b/front_end/panels/elements/MetricsSidebarPane.ts index ca655efa08..b6c60a6a3b 100644 --- a/front_end/panels/elements/MetricsSidebarPane.ts +++ b/front_end/panels/elements/MetricsSidebarPane.ts @@ -36,6 +36,7 @@ import * as SDK from '../../core/sdk/sdk.js'; import * as UI from '../../ui/legacy/legacy.js'; import {ElementsSidebarPane} from './ElementsSidebarPane.js'; +import metricsSidebarPaneStyles from './metricsSidebarPane.css.js'; export class MetricsSidebarPane extends ElementsSidebarPane { originalPropertyData: SDK.CSSProperty.CSSProperty|null; @@ -51,7 +52,6 @@ export class MetricsSidebarPane extends ElementsSidebarPane { constructor() { super(); - this.registerRequiredCSS('panels/elements/metricsSidebarPane.css'); this.originalPropertyData = null; this.previousPropertyDataCandidate = null; @@ -510,4 +510,8 @@ export class MetricsSidebarPane extends ElementsSidebarPane { this.editingEnded(element, context); this.applyUserInput(element, userInput, previousContent, context, true); } + wasShown(): void { + super.wasShown(); + this.registerCSSFiles([metricsSidebarPaneStyles]); + } } diff --git a/front_end/panels/elements/NodeStackTraceWidget.ts b/front_end/panels/elements/NodeStackTraceWidget.ts index 331de985d3..72a3ab8602 100644 --- a/front_end/panels/elements/NodeStackTraceWidget.ts +++ b/front_end/panels/elements/NodeStackTraceWidget.ts @@ -7,6 +7,8 @@ import * as SDK from '../../core/sdk/sdk.js'; import * as Components from '../../ui/legacy/components/utils/utils.js'; import * as UI from '../../ui/legacy/legacy.js'; +import nodeStackTraceWidgetStyles from './nodeStackTraceWidget.css.js'; + const UIStrings = { /** *@description Message displayed when no JavaScript stack trace is available for the DOM node in the Stack Trace widget of the Elements panel @@ -24,7 +26,6 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget { constructor() { super(true /* isWebComponent */); - this.registerRequiredCSS('panels/elements/nodeStackTraceWidget.css'); this.noStackTraceElement = this.contentElement.createChild('div', 'gray-info-message'); this.noStackTraceElement.textContent = i18nString(UIStrings.noStackTraceAvailable); @@ -45,7 +46,9 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget { } wasShown(): void { + super.wasShown(); UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this); + this.registerCSSFiles([nodeStackTraceWidgetStyles]); this.update(); } diff --git a/front_end/panels/elements/PlatformFontsWidget.ts b/front_end/panels/elements/PlatformFontsWidget.ts index d9ea6b6aaa..4366e03c5b 100644 --- a/front_end/panels/elements/PlatformFontsWidget.ts +++ b/front_end/panels/elements/PlatformFontsWidget.ts @@ -29,6 +29,9 @@ */ import * as i18n from '../../core/i18n/i18n.js'; + +import platformFontsWidgetStyles from './platformFontsWidget.css.js'; + import type * as SDK from '../../core/sdk/sdk.js'; import * as UI from '../../ui/legacy/legacy.js'; import type * as Protocol from '../../generated/protocol.js'; @@ -64,7 +67,6 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget { constructor(sharedModel: ComputedStyleModel) { super(true); - this.registerRequiredCSS('panels/elements/platformFontsWidget.css'); this.sharedModel = sharedModel; this.sharedModel.addEventListener(Events.ComputedStyleChanged, this.update, this); @@ -124,4 +126,8 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget { fontUsageElement.textContent = i18nString(UIStrings.dGlyphs, {n: usage}); } } + wasShown(): void { + super.wasShown(); + this.registerCSSFiles([platformFontsWidgetStyles]); + } } diff --git a/front_end/panels/elements/PropertiesWidget.ts b/front_end/panels/elements/PropertiesWidget.ts index 9dfb4466b0..a0ac20fbf8 100644 --- a/front_end/panels/elements/PropertiesWidget.ts +++ b/front_end/panels/elements/PropertiesWidget.ts @@ -31,6 +31,7 @@ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ +import propertiesWidgetStyles from './propertiesWidget.css.js'; import type * as Common from '../../core/common/common.js'; import * as Host from '../../core/host/host.js'; import * as SDK from '../../core/sdk/sdk.js'; @@ -48,7 +49,6 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget { private lastRequestedNode?: SDK.DOMModel.DOMNode; constructor() { super(true /* isWebComponent */); - this.registerRequiredCSS('panels/elements/propertiesWidget.css'); SDK.TargetManager.TargetManager.instance().addModelListener( SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.onNodeChange, this); @@ -123,5 +123,9 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget { } this.update(); } + wasShown(): void { + super.wasShown(); + this.registerCSSFiles([propertiesWidgetStyles]); + } } diff --git a/front_end/panels/elements/StylesSidebarPane.ts b/front_end/panels/elements/StylesSidebarPane.ts index 52cd1f9a7f..f690cf268d 100644 --- a/front_end/panels/elements/StylesSidebarPane.ts +++ b/front_end/panels/elements/StylesSidebarPane.ts @@ -54,6 +54,8 @@ import {ElementsSidebarPane} from './ElementsSidebarPane.js'; import {ImagePreviewPopover} from './ImagePreviewPopover.js'; import {StyleEditorWidget} from './StyleEditorWidget.js'; import {StylePropertyHighlighter} from './StylePropertyHighlighter.js'; +import stylesSectionTreeStyles from './stylesSectionTree.css.js'; +import stylesSidebarPaneStyles from './stylesSidebarPane.css.js'; import type {Context} from './StylePropertyTreeElement.js'; import {StylePropertyTreeElement} from './StylePropertyTreeElement.js'; @@ -226,8 +228,7 @@ export class StylesSidebarPane extends ElementsSidebarPane { private constructor() { super(true /* delegatesFocus */); this.setMinimumSize(96, 26); - this.registerRequiredCSS('panels/elements/stylesSidebarPane.css'); - + this.registerCSSFiles([stylesSidebarPaneStyles]); Common.Settings.Settings.instance().moduleSetting('colorFormat').addChangeListener(this.update.bind(this)); Common.Settings.Settings.instance().moduleSetting('textEditorIndent').addChangeListener(this.update.bind(this)); @@ -1209,7 +1210,7 @@ export class StylePropertiesSection { this.propertiesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow(); this.propertiesTreeOutline.setFocusable(false); - this.propertiesTreeOutline.registerRequiredCSS('panels/elements/stylesSectionTree.css'); + this.propertiesTreeOutline.registerCSSFiles([stylesSectionTreeStyles]); this.propertiesTreeOutline.element.classList.add('style-properties', 'matched-styles', 'monospace'); // @ts-ignore TODO: fix ad hoc section property in a separate CL to be safe this.propertiesTreeOutline.section = this; diff --git a/package.json b/package.json index 832300a463..fa0ae100d8 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "check-external-links": "third_party/node/node.py --output scripts/check_external_links.js", "check-gn": "third_party/node/node.py --output scripts/check_gn.js", "check-json": "third_party/node/node.py --output scripts/json_validator/validate_module_json.js", - "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.js && third_party/node/node.py --output scripts/test/run_lint_check_css.js && npm run check-lint-components-css", + "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.js && third_party/node/node.py --output scripts/test/run_lint_check_css.js", "check-lint-css": "third_party/node/node.py --output scripts/test/run_lint_check_css.js", "collect-strings": "third_party/node/node.py --output third_party/i18n/collect-strings.js front_end", "components-server": "third_party/node/node.py --output scripts/component_server/server.js",