WebKit Bugzilla
Attachment 358113 Details for
Bug 148049
: Web Inspector: Unexpectedly frequent flashing of DOM node attributes
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
148049.diff (text/plain), 5.66 KB, created by
Devin Rousso
on 2018-12-27 18:26:15 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Devin Rousso
Created:
2018-12-27 18:26:15 PST
Size:
5.66 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index d0d8c6c2cb9..4669e07b9f6 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,23 @@ >+2018-12-27 Devin Rousso <drousso@apple.com> >+ >+ Web Inspector: Unexpectedly frequent flashing of DOM node attributes >+ https://bugs.webkit.org/show_bug.cgi?id=148049 >+ <rdar://problem/22296830> >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ Save a timestamp of when the CSS animation began, so that if the attribute's node is replaced, >+ we can "resume" the CSS animation at the same point with the attribute's new node. >+ >+ * UserInterface/Views/DOMTreeElement.js: >+ (WI.DOMTreeElement): >+ (WI.DOMTreeElement.prototype.attributeDidChange): >+ (WI.DOMTreeElement.prototype._buildAttributeDOM): >+ (WI.DOMTreeElement.prototype._createModifiedAnimation): >+ (WI.DOMTreeElement.prototype._markNodeChanged): Deleted. >+ (WI.DOMTreeElement.prototype._nodeChangedAnimationEnd): Deleted. >+ (WI.DOMTreeElement.prototype._fireDidChange): Deleted. >+ > 2018-12-21 Devin Rousso <drousso@apple.com> > > Web Inspector: Styles Redesign: remove unused CSS style icons >diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >index d5d0fafe5e5..b1f18aa50e5 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >@@ -48,8 +48,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > this._subtreeBreakpointCount = 0; > > this._highlightedAttributes = new Set; >- this._recentlyModifiedAttributes = []; >- this._boundNodeChangedAnimationEnd = this._nodeChangedAnimationEnd.bind(this); >+ this._recentlyModifiedAttributes = new Map; > > node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this); > >@@ -266,7 +265,14 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > > attributeDidChange(name) > { >- this._recentlyModifiedAttributes.push({name}); >+ if (this._recentlyModifiedAttributes.has(name)) >+ return; >+ >+ this._recentlyModifiedAttributes.set(name, { >+ value: null, >+ timestamp: NaN, >+ element: null, >+ }); > } > > highlightAttribute(name) >@@ -1303,10 +1309,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > if (hasText) > attrSpanElement.append("\""); > >- for (let attribute of this._recentlyModifiedAttributes) { >- if (attribute.name === name) >- attribute.element = hasText ? attrValueElement : attrNameElement; >- } >+ this._createModifiedAnimation(name, value, hasText ? attrValueElement : attrNameElement); > > if (this._highlightedAttributes.has(name)) > attrSpanElement.classList.add("highlight"); >@@ -1715,29 +1718,40 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > WI.highlightRangesWithStyleClass(this.title, matchRanges, WI.DOMTreeElement.SearchHighlightStyleClassName, this._highlightResult); > } > >- _markNodeChanged() >+ _createModifiedAnimation(key, value, element) > { >- for (let attribute of this._recentlyModifiedAttributes) { >- let element = attribute.element; >- if (!element) >- continue; >+ let existing = this._recentlyModifiedAttributes.get(key); >+ if (!existing) >+ return; > >+ if (existing.element) { >+ if (existing.listener) >+ existing.element.removeEventListener("animationend", existing.listener); >+ >+ existing.element.classList.remove("node-state-changed"); >+ existing.element.style.removeProperty("animation-delay"); >+ } >+ >+ existing.listener = (event) => { > element.classList.remove("node-state-changed"); >- element.addEventListener("animationend", this._boundNodeChangedAnimationEnd); >- element.classList.add("node-state-changed"); >- } >- } >+ element.style.removeProperty("animation-delay"); >+ >+ this._recentlyModifiedAttributes.delete(key); >+ }; > >- _nodeChangedAnimationEnd(event) >- { >- let element = event.target; > element.classList.remove("node-state-changed"); >- element.removeEventListener("animationend", this._boundNodeChangedAnimationEnd); >+ element.style.removeProperty("animation-delay"); > >- for (let i = this._recentlyModifiedAttributes.length - 1; i >= 0; --i) { >- if (this._recentlyModifiedAttributes[i].element === element) >- this._recentlyModifiedAttributes.splice(i, 1); >- } >+ if (existing.value === value) >+ element.style.setProperty("animation-delay", "-" + (performance.now() - existing.timestamp) + "ms"); >+ else >+ existing.timestamp = performance.now(); >+ >+ existing.value = value; >+ existing.element = element; >+ >+ element.addEventListener("animationend", existing.listener, {once: true}); >+ element.classList.add("node-state-changed"); > } > > get pseudoClassesEnabled() >@@ -1754,13 +1768,6 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > this.listItemElement.classList.toggle("pseudo-class-enabled", !!this.representedObject.enabledPseudoClasses.length); > } > >- _fireDidChange() >- { >- super._fireDidChange(); >- >- this._markNodeChanged(); >- } >- > handleEvent(event) > { > if (event.type === "dragstart" && this._editing)
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 148049
:
259067
|
259068
|
259070
|
259072
|
350384
|
358113
|
363434