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

[Elements] Rename ComputedStyleChanged event to CSSModelChanged

Browse Source 
`ComputedStyleChanged` event does not directly reflect
the occasions where this event is emitted.

For example, it might be that a new StyleSheet added
to the CSSModel that didn't change the computed
styles of the node. So, we rename the event to be
`CSSModelChanged`.

Bug: 349566291
Change-Id: I341713ed591e0d88c1842ed5f6bb3cc0c32fae41
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6069996
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>
This commit is contained in:
Ergun Erdogmus
2024-12-10 13:12:36 +00:00
committed by Devtools-frontend LUCI CQ
parent 869231c057
commit db6207a441
5 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/panels/elements/ComputedStyleModel.ts
+17 -18
View File
@@ -31,7 +31,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
private onNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
this.nodeInternal = event.data;
this.updateModel(this.nodeInternal ? this.nodeInternal.domModel().cssModel() : null);
this.onComputedStyleChanged(null);
this.onCSSModelChanged(null);
}
private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
@@ -44,21 +44,21 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
const resourceTreeModel = cssModel ? cssModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel) : null;
if (cssModel && domModel && resourceTreeModel) {
this.eventListeners = [
cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.onComputedStyleChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetRemoved, this.onComputedStyleChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.onComputedStyleChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.FontsUpdated, this.onComputedStyleChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.MediaQueryResultChanged, this.onComputedStyleChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced, this.onComputedStyleChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.ModelWasEnabled, this.onComputedStyleChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.ComputedStyleUpdated, this.onComputedStyleChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.onCSSModelChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetRemoved, this.onCSSModelChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.onCSSModelChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.FontsUpdated, this.onCSSModelChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.MediaQueryResultChanged, this.onCSSModelChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced, this.onCSSModelChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.ModelWasEnabled, this.onCSSModelChanged, this),
cssModel.addEventListener(SDK.CSSModel.Events.ComputedStyleUpdated, this.onCSSModelChanged, this),
domModel.addEventListener(SDK.DOMModel.Events.DOMMutated, this.onDOMModelChanged, this),
resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameResized, this),
];
}
}
private onComputedStyleChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent>|null): void {
private onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent>|null): void {
delete this.computedStylePromise;
// If the event contains `nodeId` and that's not the same as this node's id
// we don't emit the COMPUTED_STYLE_CHANGED event.
@@ -66,7 +66,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
return;
}
this.dispatchEventToListeners(Events.COMPUTED_STYLE_CHANGED, event?.data ?? null);
this.dispatchEventToListeners(Events.CSS_MODEL_CHANGED, event?.data ?? null);
}
private onDOMModelChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
@@ -77,12 +77,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
!node.isAncestor(this.nodeInternal)) {
return;
}
this.onComputedStyleChanged(null);
this.onCSSModelChanged(null);
}
private onFrameResized(): void {
function refreshContents(this: ComputedStyleModel): void {
this.onComputedStyleChanged(null);
this.onCSSModelChanged(null);
delete this.frameResizedTimer;
}
@@ -128,15 +128,14 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
}
export const enum Events {
COMPUTED_STYLE_CHANGED = 'ComputedStyleChanged',
CSS_MODEL_CHANGED = 'CSSModelChanged',
}
export type ComputedStyleChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|
SDK.CSSModel.StyleSheetChangedEvent|SDK.CSSModel.PseudoStateForcedEvent|
SDK.CSSModel.ComputedStyleUpdatedEvent|null|void;
export type CSSModelChangedEvent = SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|SDK.CSSModel.StyleSheetChangedEvent|
SDK.CSSModel.PseudoStateForcedEvent|SDK.CSSModel.ComputedStyleUpdatedEvent|null|void;
export type EventTypes = {
[Events.COMPUTED_STYLE_CHANGED]: ComputedStyleChangedEvent,
[Events.CSS_MODEL_CHANGED]: CSSModelChangedEvent,
};
export class ComputedStyle {
front_end/panels/elements/ComputedStyleWidget.ts
+1 -1
View File
@@ -248,7 +248,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
this.contentElement.classList.add('styles-sidebar-computed-style-widget');
this.computedStyleModel = new ComputedStyleModel();
this.computedStyleModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
this.computedStyleModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
this.showInheritedComputedStylePropertiesSetting =
Common.Settings.Settings.instance().createSetting('show-inherited-computed-style-properties', false);
front_end/panels/elements/ElementsSidebarPane.ts
+3 -3
View File
@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
import type * as SDK from '../../core/sdk/sdk.js';
import * as UI from '../../ui/legacy/legacy.js';
import {type ComputedStyleChangedEvent, ComputedStyleModel, Events} from './ComputedStyleModel.js';
import {ComputedStyleModel, type CSSModelChangedEvent, Events} from './ComputedStyleModel.js';
export class ElementsSidebarPane extends UI.Widget.VBox {
protected computedStyleModelInternal: ComputedStyleModel;
@@ -16,7 +16,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
super(true, delegatesFocus);
this.element.classList.add('flex-none');
this.computedStyleModelInternal = new ComputedStyleModel();
this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onCSSModelChanged, this);
this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
this.updateThrottler = new Common.Throttler.Throttler(100);
this.updateWhenVisible = false;
@@ -57,6 +57,6 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
}
}
onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent|null>): void {
onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent|null>): void {
}
}
front_end/panels/elements/PlatformFontsWidget.ts
+1 -1
View File
@@ -80,7 +80,7 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
super(true);
this.sharedModel = sharedModel;
this.sharedModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
this.sharedModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
this.sectionTitle = document.createElement('div');
this.sectionTitle.classList.add('title');
front_end/panels/elements/StylesSidebarPane.ts
+2 -2
View File
@@ -53,7 +53,7 @@ import * as UI from '../../ui/legacy/legacy.js';
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
import * as ElementsComponents from './components/components.js';
import {type ComputedStyleChangedEvent, ComputedStyleModel} from './ComputedStyleModel.js';
import {ComputedStyleModel, type CSSModelChangedEvent} from './ComputedStyleModel.js';
import {ElementsPanel} from './ElementsPanel.js';
import {ElementsSidebarPane} from './ElementsSidebarPane.js';
import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -859,7 +859,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
}
}
override onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyleChangedEvent>): void {
override onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent>): void {
const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
if (edit) {
for (const section of this.allSections()) {