zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-29 17:35:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CSS]: panels/elements

Browse Source 
Bug: 1106746
Change-Id: I2f0212094fd4b89e57ca1acad67cb8ede7d63d2c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3103238
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Kriti Sapra <kritisapra@google.com>
This commit is contained in:
Kriti Sapra
2021-08-18 15:07:01 +00:00
committed by Devtools-frontend LUCI CQ
parent b3530a2181
commit d8fb451d04
12 changed files with 58 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/gni/devtools_grd_files.gni
+9
View File
@@ -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",
front_end/panels/elements/BUILD.gn
+9
View File
@@ -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",
]
}
front_end/panels/elements/DOMLinkifier.ts
+2 -2
View File
@@ -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);
front_end/panels/elements/ElementStatePaneWidget.ts
+3 -1
View File
@@ -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();
}
front_end/panels/elements/ElementsPanel.ts
+6 -2
View File
@@ -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) {
front_end/panels/elements/ElementsTreeOutline.ts
+3 -1
View File
@@ -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;
front_end/panels/elements/MetricsSidebarPane.ts
+5 -1
View File
@@ -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]);
}
}
front_end/panels/elements/NodeStackTraceWidget.ts
+4 -1
View File
@@ -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();
}
front_end/panels/elements/PlatformFontsWidget.ts
+7 -1
View File
@@ -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]);
}
}
front_end/panels/elements/PropertiesWidget.ts
+5 -1
View File
@@ -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]);
}
}
front_end/panels/elements/StylesSidebarPane.ts
+4 -3
View File
@@ -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;
package.json
+1 -1
View File
@@ -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",