DevTools: jump from computed style to styles sidebar pane.

third_party/WebKit/Source/devtools/front_end/elements/PropertyChangeHighlighter.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // 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
+ * @param {!WebInspector.CSSStyleModel} cssModel
+ * @param {!CSSAgent.StyleSheetId} styleSheetId
+ * @param {!WebInspector.TextRange} range
  */
-WebInspector.PropertyChangeHighlighter = function(ssp)
+WebInspector.PropertyChangeHighlighter = function(ssp, cssModel, styleSheetId, range)
 {
     this._styleSidebarPane = ssp;
-    WebInspector.targetManager.addModelListener(WebInspector.CSSStyleModel, WebInspector.CSSStyleModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
+    this._target = cssModel.target();
+    this._styleSheetId = styleSheetId;
+    this._range = range;
 }
 
 WebInspector.PropertyChangeHighlighter.prototype = {
     /**
-     * @param {!WebInspector.Event} event
      */
-    _onLayoutEditorChange: function(event)
+    perform: function()
     {
-        this._styleSidebarPane.runDecoratorAfterUpdate(this._updateHighlight.bind(this, event));
-        this._styleSidebarPane.update();
-    },
-
-    /**
-     * @param {!WebInspector.Event} event
-     */
-    _updateHighlight: function(event)
-    {
-        var cssModel = /** @type {!WebInspector.CSSStyleModel} */(event.target);
-        var styleSheetId = event.data["id"];
-        var changeRange = /** @type {!CSSAgent.SourceRange} */(event.data["range"]);
-        var changeRangeObject = WebInspector.TextRange.fromObject(changeRange);
-
         var node = this._styleSidebarPane.node();
-        if (!node || cssModel.target() !== node.target())
+        if (!node || this._target !== node.target())
             return;
 
-        var sectionBlocks = this._styleSidebarPane.sectionBlocks();
         var foundSection = null;
-        for (var block of sectionBlocks) {
-            for (var section of block.sections) {
-                var declaration = section.style();
-                if (declaration.styleSheetId !== styleSheetId)
-                    continue;
+        for (var section of this._styleSidebarPane.allSections()) {
+            var declaration = section.style();
+            if (declaration.styleSheetId !== this._styleSheetId)
+                continue;
 
-                var parentRule = declaration.parentRule;
-                var isInlineSelector = changeRangeObject.isEmpty();
-                var isMatchingRule = parentRule && parentRule.selectorRange() && changeRangeObject.compareTo(parentRule.selectorRange()) === 0;
-                if (isInlineSelector || isMatchingRule) {
-                    section.element.animate([
-                        { offset: 0, backgroundColor: "rgba(255, 227, 199, 1)" },
-                        { offset: 0.5, backgroundColor: "rgba(255, 227, 199, 1)" },
-                        { offset: 0.9, backgroundColor: "rgba(255, 227, 199, 0)" },
-                        { offset: 1, backgroundColor: "white" }
-                    ], { duration : 400, easing: "cubic-bezier(0, 0, 0.2, 1)" });
-                    return;
-                }
+            var parentRule = declaration.parentRule;
+            var isInlineSelector = this._range.isEmpty();
+            var isMatchingRule = parentRule && parentRule.selectorRange() && this._range.compareTo(parentRule.selectorRange()) === 0;
+            if (isInlineSelector || isMatchingRule) {
+                section.element.animate([
+                    { offset: 0, backgroundColor: "rgba(255, 227, 199, 1)" },
+                    { offset: 0.5, backgroundColor: "rgba(255, 227, 199, 1)" },
+                    { offset: 0.9, backgroundColor: "rgba(255, 227, 199, 0)" },
+                    { offset: 1, backgroundColor: "white" }
+                ], { duration : 400, easing: "cubic-bezier(0, 0, 0.2, 1)" });
+                return;
+            }
 
-                if (this._checkRanges(declaration.range, changeRange)) {
-                    foundSection = section;
-                    break;
-                }
+            if (this._checkRanges(declaration.range, this._range)) {
+                foundSection = section;
+                break;
             }
-            if (foundSection)
-                break;
         }
 
         if (!foundSection)
             return;
 
         var highlightElement;
         var treeElement = foundSection.propertiesTreeOutline.firstChild();
         var foundTreeElement = null;
         while (!highlightElement && treeElement) {
-            if (treeElement.property.range  && this._checkRanges(treeElement.property.range, changeRange)) {
+            if (treeElement.property.range  && this._checkRanges(treeElement.property.range, this._range)) {
                 highlightElement = treeElement.valueElement;
                 break;
             }
             treeElement = treeElement.traverseNextTreeElement(false, null, true);
         }
 
         if (highlightElement) {
             highlightElement.animate([
                     { offset: 0, backgroundColor: "rgba(158, 54, 153, 1)", color: "white" },
                     { offset: 0.5, backgroundColor: "rgba(158, 54, 153, 1)", color: "white" },
                     { offset: 0.9, backgroundColor: "rgba(158, 54, 153, 0)", color: "initial" },
                     { offset: 1, backgroundColor: "white", color: "initial" }
                 ], { duration : 400, easing: "cubic-bezier(0, 0, 0.2, 1)" });
         }
     },
 
     /**
      *
-     * @param {!CSSAgent.SourceRange} outterRange
-     * @param {!CSSAgent.SourceRange} innerRange
+     * @param {!WebInspector.TextRange} outterRange
+     * @param {!WebInspector.TextRange} innerRange
      * @return {boolean}
      */
     _checkRanges: function(outterRange, innerRange)
     {
         var startsBefore = outterRange.startLine < innerRange.startLine || (outterRange.startLine === innerRange.startLine && outterRange.startColumn <= innerRange.startColumn);
         // SSP might be outdated, so inner range will a bit bigger than outter. E.g.; "padding-left: 9px" -> "padding-left: 10px"
         var eps = 5;
         var endsAfter = outterRange.endLine > innerRange.endLine || (outterRange.endLine === innerRange.endLine && outterRange.endColumn + eps >= innerRange.endColumn);
         return startsBefore && endsAfter;
     }
-}
+}
+
+/**
+ * @constructor
+ * @param {!WebInspector.StylesSidebarPane} ssp
+ * @param {!WebInspector.CSSProperty} cssProperty
+ */
+WebInspector.PropertyRevealHighlighter = function(ssp, cssProperty)
+{
+    this._styleSidebarPane = ssp;
+    this._cssProperty = cssProperty;
+}
+
+WebInspector.PropertyRevealHighlighter.prototype = {
+    perform: function()
+    {
+        // Expand all shorthands.
+        for (var section of this._styleSidebarPane.allSections()) {
+            for (var treeElement = section.propertiesTreeOutline.firstChild(); treeElement; treeElement = treeElement.nextSibling)

[pfeldman, 2016/01/16 01:00:47]

how much do we want this class to know about the styles sidebar pane? traversing
tree elements might be too much. Should it be moved into ssp?

[lushnikov, 2016/01/16 01:38:55]

The patch doesn't change the approach from this point of view; we can discuss
any way of dealing with this offline.

+                treeElement.onpopulate();
+        }
+        var highlightTreeElement = null;
+        for (var section of this._styleSidebarPane.allSections()) {
+            var treeElement = section.propertiesTreeOutline.firstChild();
+            while (treeElement && !highlightTreeElement) {
+                if (treeElement.property === this._cssProperty) {
+                    highlightTreeElement = treeElement;
+                    break;
+                }
+                treeElement = treeElement.traverseNextTreeElement(false, null, true);
+            }
+            if (highlightTreeElement)
+                break;
+        }
+
+        if (!highlightTreeElement)
+            return;
+
+        highlightTreeElement.parent.expand();
+        highlightTreeElement.listItemElement.scrollIntoViewIfNeeded();
+        highlightTreeElement.listItemElement.animate([
+                { offset: 0, backgroundColor: "rgba(255, 255, 0, 0.2)"},
+                { offset: 0.1, backgroundColor: "rgba(255, 255, 0, 0.7)"},
+                { offset: 1, backgroundColor: "transparent"}
+            ], { duration : 2000, easing: "cubic-bezier(0, 0, 0.2, 1)" });
+    },
+}