Devtools: [LayoutEditor] highlight changed value in the SSP

Source/devtools/front_end/elements/PropertyChangeHighlighter.js

Index: Source/devtools/front_end/elements/PropertyChangeHighlighter.js
diff --git a/Source/devtools/front_end/elements/PropertyChangeHighlighter.js b/Source/devtools/front_end/elements/PropertyChangeHighlighter.js
new file mode 100644
index 0000000000000000000000000000000000000000..515d0c98ceefd64ad904024b3a8a27198ee6b358
--- /dev/null
+++ b/Source/devtools/front_end/elements/PropertyChangeHighlighter.js
@@ -0,0 +1,100 @@
+// Copyright (c) 2015 The Chromium Authors. All rights reserved.

[pfeldman, 2015/08/21 01:43:00]

make sure lushnikov@ likes it.

[sergeyv, 2015/08/21 04:05:42]

Done.

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ * @param {!WebInspector.StylesSidebarPane} ssp
+ */
+WebInspector.PropertyChangeHighlighter = function(ssp)
+{
+    this._styleSidebarPane = ssp;
+    WebInspector.targetManager.addModelListener(WebInspector.CSSStyleModel, WebInspector.CSSStyleModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
+    this._animationDuration = 1400;
+    this._requestAnimationFrame = ssp.element.window().requestAnimationFrame;
+}
+
+WebInspector.PropertyChangeHighlighter.prototype = {
+

[lushnikov, 2015/08/21 02:36:07]

stray line

[sergeyv, 2015/08/21 04:05:42]

Done.

+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onLayoutEditorChange: function(event)
+    {
+        this._styleSheetId = event.data.id;
+        this._changeRange = event.data.range;
+        delete this._animationStart;
+        if (!this._nextAnimation)
+            this._nextAnimation = this._requestAnimationFrame.call(null, this.update.bind(this));
+    },
+
+    /**
+     * @param {number} now
+     */
+    update: function(now)
+    {
+        delete this._nextAnimation;

[lushnikov, 2015/08/21 02:36:07]

you might want to check ssp's node's target here

[sergeyv, 2015/08/21 04:05:42]

Done.

+        if (!this._styleSheetId)
+            return;
+
+        var sectionBlocks = this._styleSidebarPane.sectionBlocks();
+        var foundSection = null;
+        for (var block of sectionBlocks) {
+            for (var section of block.sections) {
+                var declaration = section.styleRule.style();
+                if (declaration.styleSheetId !== this._styleSheetId)
+                    continue;
+
+                if (this._checkRanges(declaration.range, this._changeRange)) {

[lushnikov, 2015/08/21 02:36:07]

FYI: you compare outdated declaration range here. 

[sergeyv, 2015/08/21 04:05:42]

Done.

+                    foundSection = section;
+                    break;
+                }
+            }
+        }
+
+        if (!foundSection)
+            return;
+
+        var treeElement = foundSection.propertiesTreeOutline.firstChild();
+        var foundTreeElement = null;
+        while (treeElement) {
+            if (treeElement.property.range  && this._checkRanges(treeElement.property.range, this._changeRange)) {

[lushnikov, 2015/08/21 02:36:07]

FYI: this might occasionally fail as property range is outdated

[sergeyv, 2015/08/21 04:05:42]

Done.

+                foundTreeElement = treeElement;
+                break;
+            }
+            treeElement = treeElement.traverseNextTreeElement(false, null, true);
+        }
+
+        if (!foundTreeElement)
+            return;
+
+        if (!this._animationStart)
+            this._animationStart = now;
+
+        var animationProgress = (now - this._animationStart) / this._animationDuration;
+        var valueElement = foundTreeElement.valueElement;
+        valueElement.classList.toggle("css-update-highlight", animationProgress < 1);
+        valueElement.classList.toggle("first-part", animationProgress < 0.2);
+
+        if (animationProgress > 1) {
+            delete this._animationStart;

[lushnikov, 2015/08/21 02:36:07]

let's delete background

[sergeyv, 2015/08/21 04:05:42]

Done.

+            return;
+        }
+
+        valueElement.style.backgroundColor = "rgba(158, 54, 153, " + (1 - animationProgress) + ")";
+        this._nextAnimation = this._requestAnimationFrame.call(null, this.update.bind(this));
+    },
+
+    /**
+     *
+     * @param {!CSSAgent.SourceRange} outterRange
+     * @param {!CSSAgent.SourceRange} innerRange
+     * @return {boolean}
+     */
+    _checkRanges: function(outterRange, innerRange)
+    {
+        var startsBefore = outterRange.startLine < innerRange.startLine || (outterRange.startLine === innerRange.startLine && outterRange.startColumn <= innerRange.startColumn);
+        var endsAfter = outterRange.endLine > innerRange.endLine || (outterRange.endLine === innerRange.endLine && outterRange.endColumn >= innerRange.endColumn);
+        return startsBefore && endsAfter;
+    }
+}