Attachment 358113 Details for Bug 148049 – Patch

[patch] Patch

148049.diff (text/plain), 5.66 KB, created by Devin Rousso on 2018-12-27 18:26:15 PST

(hide)

Description:

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)

Actions: View | Formatted Diff | Diff

Attachments on bug 148049: 259067 | 259068 | 259070 | 259072 | 350384 | 358113 | 363434