DevTools: jump from computed style to styles sidebar pane.

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 29 matching lines @@
     WebInspector.moduleSetting("textEditorIndent").addChangeListener(this.update.bind(this));
 
     this._sectionsContainer = this.element.createChild("div");
     this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     this.element.classList.add("styles-pane");
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
     this._keyDownBound = this._keyDown.bind(this);
     this._keyUpBound = this._keyUp.bind(this);
-    new WebInspector.PropertyChangeHighlighter(this);
+
+    WebInspector.targetManager.addModelListener(WebInspector.CSSStyleModel, WebInspector.CSSStyleModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
 }
 
 /**
  * @param {!WebInspector.CSSProperty} property
  * @return {!Element}
  */
 WebInspector.StylesSidebarPane.createExclamationMark = function(property)
 {
     var exclamationElement = createElement("label", "dt-icon-label");
     exclamationElement.className = "exclamation-mark";
@@ skipping 37 matching lines @@
     // IE hack.
     if (value.endsWith("\9"))
         return true;
     if (hasUnknownVendorPrefix(value))
         return true;
 
     return false;
 }
 
 WebInspector.StylesSidebarPane.prototype = {
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onLayoutEditorChange: function(event)
+    {
+        var cssModel = /** @type {!WebInspector.CSSStyleModel} */(event.target);
+        var styleSheetId = event.data["id"];
+        var sourceRange = /** @type {!CSSAgent.SourceRange} */(event.data["range"]);
+        var range = WebInspector.TextRange.fromObject(sourceRange);
+        this._decorator = new WebInspector.PropertyChangeHighlighter(this, cssModel, styleSheetId, range);
+        this.update();
+    },
+
+    /**
+     * @param {!WebInspector.CSSProperty} cssProperty
+     */
+    revealProperty: function(cssProperty)
+    {
+        this._decorator = new WebInspector.PropertyRevealHighlighter(this, cssProperty);
+        this._decorator.perform();
+        this.update();
+    },
+
     onUndoOrRedoHappened: function()
     {
         this.setNode(this.node());
     },
 
     /**
      * @param {!Event} event
      */
     _onAddButtonLongClick: function(event)
     {
@@ skipping 47 matching lines @@
 
     /**
      * @param {!WebInspector.CSSRule} editedRule
      * @param {!WebInspector.TextRange} oldRange
      * @param {!WebInspector.TextRange} newRange
      */
     _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
     {
         if (!editedRule.styleSheetId)
             return;
-        for (var block of this._sectionBlocks) {
-            for (var section of block.sections)
-                section._styleSheetRuleEdited(editedRule, oldRange, newRange);
-        }
+        for (var section of this.allSections())
+            section._styleSheetRuleEdited(editedRule, oldRange, newRange);
     },
 
     /**
      * @param {!WebInspector.CSSMedia} oldMedia
      * @param {!WebInspector.CSSMedia}  newMedia
      */
     _styleSheetMediaEdited: function(oldMedia, newMedia)
     {
         if (!oldMedia.parentStyleSheetId)
             return;
-        for (var block of this._sectionBlocks) {
-            for (var section of block.sections)
-                section._styleSheetMediaEdited(oldMedia, newMedia);
-        }
+        for (var section of this.allSections())
+            section._styleSheetMediaEdited(oldMedia, newMedia);
     },
 
     /**
      * @param {?RegExp} regex
      */
     onFilterChanged: function(regex)
     {
         this._filterRegex = regex;
         this._updateFilter();
     },
@@ skipping 13 matching lines @@
 
     /**
      * @param {!WebInspector.StylePropertiesSection=} editedSection
      */
     _refreshUpdate: function(editedSection)
     {
         var node = this.node();
         if (!node)
             return;
 
-        for (var block of this._sectionBlocks) {
-            for (var section of block.sections) {
-                if (section.isBlank)
-                    continue;
-                section.update(section === editedSection);
-            }
+        for (var section of this.allSections()) {
+            if (section.isBlank)
+                continue;
+            section.update(section === editedSection);
         }
 
         if (this._filterRegex)
             this._updateFilter();
         this._nodeStylesUpdatedForTest(node, false);
     },
 
     /**
      * @override
      * @return {!Promise.<?>}
      */
     doUpdate: function()
     {
         this._discardElementUnderMouse();
 
         return this.fetchMatchedCascade()
             .then(this._innerRebuildUpdate.bind(this));
     },
 
-    /**
-     * @param {function()} callback
-     */
-    runDecoratorAfterUpdate: function(callback)
-    {
-        this._decoratorCallback = callback;
-    },
-
     _resetCache: function()
     {
         delete this._matchedCascadePromise;
     },
 
     /**
      * @return {!Promise.<?WebInspector.CSSStyleModel.MatchedStyleResult>}
      */
     fetchMatchedCascade: function()
     {
@@ skipping 119 matching lines @@
             if (titleElement)
                 this._sectionsContainer.appendChild(titleElement);
             for (var section of block.sections)
                 this._sectionsContainer.appendChild(section.element);
         }
 
         if (this._filterRegex)
             this._updateFilter();
 
         this._nodeStylesUpdatedForTest(node, true);
-        if (this._decoratorCallback) {
-            this._decoratorCallback();
-            delete this._decoratorCallback;
+        if (this._decorator) {
+            this._decorator.perform();
+            delete this._decorator;
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {boolean} rebuild
      */
     _nodeStylesUpdatedForTest: function(node, rebuild)
     {
         // For sniffing in tests.
@@ skipping 171 matching lines @@
      */
     _keyUp: function(event)
     {
         if ((!WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Ctrl.code) ||
             (WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Meta.code)) {
             this._discardElementUnderMouse();
         }
     },
 
     /**
-     * @return {!Array<!WebInspector.SectionBlock>}
+     * @return {!Array<!WebInspector.StylePropertiesSection>}
      */
-    sectionBlocks: function()
+    allSections: function()
     {
-        return this._sectionBlocks || [];
+        var sections = [];
+        for (var block of this._sectionBlocks)
+            sections = sections.concat(block.sections);
+        return sections;
     },
 
     __proto__: WebInspector.ElementsSidebarPane.prototype
 }
 
 /**
  * @param {string} placeholder
  * @param {!Element} container
  * @param {function(?RegExp)} filterCallback
  * @return {!Element}
@@ skipping 2345 matching lines @@
     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeChanged);
     onNodeChanged();
     return button;
 
     function onNodeChanged()
     {
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         button.setEnabled(!!node);
     }
 }