DevTools: jump from computed style to styles sidebar pane.

third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.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 11 matching lines @@
  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
+ * @extends {WebInspector.ThrottledWidget}
  * @param {!WebInspector.StylesSidebarPane} stylesSidebarPane
  * @param {!WebInspector.SharedSidebarModel} sharedModel
- * @extends {WebInspector.ThrottledWidget}
+ * @param {function(!WebInspector.CSSProperty)} revealCallback
  */
-WebInspector.ComputedStyleWidget = function(stylesSidebarPane, sharedModel)
+WebInspector.ComputedStyleWidget = function(stylesSidebarPane, sharedModel, revealCallback)
 {
     WebInspector.ThrottledWidget.call(this);
     this.element.classList.add("computed-style-sidebar-pane");
 
     this.registerRequiredCSS("elements/computedStyleSidebarPane.css");
     this._alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
 
     this._sharedModel = sharedModel;
     this._sharedModel.addEventListener(WebInspector.SharedSidebarModel.Events.ComputedStyleChanged, this.update, this);
 
     this._showInheritedComputedStylePropertiesSetting = WebInspector.settings.createSetting("showInheritedComputedStyleProperties", false);
     this._showInheritedComputedStylePropertiesSetting.addChangeListener(this._showInheritedComputedStyleChanged.bind(this));
 
     var hbox = this.element.createChild("div", "hbox styles-sidebar-pane-toolbar");
     var filterContainerElement = hbox.createChild("div", "styles-sidebar-pane-filter-box");
     var filterInput = WebInspector.StylesSidebarPane.createPropertyFilterElement(WebInspector.UIString("Filter"), hbox, filterCallback.bind(this));
     filterContainerElement.appendChild(filterInput);
 
     var toolbar = new WebInspector.Toolbar("styles-pane-toolbar", hbox);
     toolbar.appendToolbarItem(new WebInspector.ToolbarCheckbox(WebInspector.UIString("Show all"), undefined, this._showInheritedComputedStylePropertiesSetting));
 
     this._propertiesOutline = new TreeOutlineInShadow();
     this._propertiesOutline.hideOverflow();
     this._propertiesOutline.registerRequiredCSS("elements/computedStyleSidebarPane.css");
     this._propertiesOutline.element.classList.add("monospace", "computed-properties");
     this.element.appendChild(this._propertiesOutline.element);
 
     this._stylesSidebarPane = stylesSidebarPane;
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
+    this._revealCallback = revealCallback;
 
     /**
      * @param {?RegExp} regex
      * @this {WebInspector.ComputedStyleWidget}
      */
     function filterCallback(regex)
     {
         this._filterRegex = regex;
         this._updateFilter(regex);
     }
 }
 
 /**
  * @param {!WebInspector.StylesSidebarPane} stylesSidebarPane
  * @param {!WebInspector.SharedSidebarModel} sharedModel
+ * @param {function(!WebInspector.CSSProperty)} revealCallback
  * @return {!WebInspector.ElementsSidebarViewWrapperPane}
  */
-WebInspector.ComputedStyleWidget.createSidebarWrapper = function(stylesSidebarPane, sharedModel)
+WebInspector.ComputedStyleWidget.createSidebarWrapper = function(stylesSidebarPane, sharedModel, revealCallback)
 {
-    var widget = new WebInspector.ComputedStyleWidget(stylesSidebarPane, sharedModel);
+    var widget = new WebInspector.ComputedStyleWidget(stylesSidebarPane, sharedModel, revealCallback);
     return new WebInspector.ElementsSidebarViewWrapperPane(WebInspector.UIString("Computed Style"), widget)
 }
 
 WebInspector.ComputedStyleWidget._propertySymbol = Symbol("property");
 
 WebInspector.ComputedStyleWidget.prototype = {
     _showInheritedComputedStyleChanged: function()
     {
         this.update();
     },
@@ skipping 73 matching lines @@
             treeElement[WebInspector.ComputedStyleWidget._propertySymbol] = {
                 name: propertyName,
                 value: propertyValue
             };
             var isOdd = this._propertiesOutline.rootElement().children().length % 2 === 0;
             treeElement.listItemElement.classList.toggle("odd-row", isOdd);
             this._propertiesOutline.appendChild(treeElement);
 
             var trace = propertyTraces.get(propertyName);
             if (trace) {
-                this._renderPropertyTrace(cssModel, matchedStyles, nodeStyle.node, treeElement, trace);
+                var activeProperty = this._renderPropertyTrace(cssModel, matchedStyles, nodeStyle.node, treeElement, trace);
                 treeElement.listItemElement.addEventListener("mousedown", consumeEvent, false);
                 treeElement.listItemElement.addEventListener("dblclick", consumeEvent, false);
                 treeElement.listItemElement.addEventListener("click", handleClick.bind(null, treeElement), false);
+                var gotoSourceElement = propertyValueElement.createChild("div", "goto-source-icon");
+                gotoSourceElement.addEventListener("click", this._navigateToSource.bind(this, activeProperty));
             }
         }
 
         this._updateFilter(this._filterRegex);
 
         /**
          * @param {string} a
          * @param {string} b
          * @return {number}
          */
@@ skipping 13 matching lines @@
         {
             if (!treeElement.expanded)
                 treeElement.expand();
             else
                 treeElement.collapse();
             consumeEvent(event);
         }
     },
 
     /**
+     * @param {!WebInspector.CSSProperty} cssProperty
+     * @param {!Event} event
+     */
+    _navigateToSource: function(cssProperty, event)
+    {
+        if (this._revealCallback)
+            this._revealCallback.call(null, cssProperty);
+        event.consume(true);
+    },
+
+    /**
      * @param {!WebInspector.CSSStyleModel} cssModel
      * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
      * @param {!WebInspector.DOMNode} node
      * @param {!TreeElement} rootTreeElement
      * @param {!Array<!WebInspector.CSSProperty>} tracedProperties
+     * @return {!WebInspector.CSSProperty}
      */
     _renderPropertyTrace: function(cssModel, matchedStyles, node, rootTreeElement, tracedProperties)
     {
+        var activeProperty = null;
         for (var property of tracedProperties) {
             var trace = createElement("div");
             trace.classList.add("property-trace");
             if (matchedStyles.propertyState(property) === WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded)
                 trace.classList.add("property-trace-inactive");
+            else
+                activeProperty = property;
 
             var renderer = new WebInspector.StylesSidebarPropertyRenderer(null, node, property.name, /** @type {string} */(property.value));
             renderer.setColorHandler(this._processColor.bind(this));
             var valueElement = renderer.renderValue();
             valueElement.classList.add("property-trace-value");
+            valueElement.addEventListener("click", this._navigateToSource.bind(this, property), false);
+            var gotoSourceElement = createElement("div");
+            gotoSourceElement.classList.add("goto-source-icon");
+            gotoSourceElement.addEventListener("click", this._navigateToSource.bind(this, property));
+            valueElement.insertBefore(gotoSourceElement, valueElement.firstChild);
+
             trace.appendChild(valueElement);
 
             var rule = property.ownerStyle.parentRule;
             if (rule) {
                 var linkSpan = trace.createChild("span", "trace-link");
                 linkSpan.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(cssModel, this._linkifier, rule));
             }
 
             var selectorElement = trace.createChild("span", "property-trace-selector");
             selectorElement.textContent = rule ? rule.selectorText() : "element.style";
             selectorElement.title = selectorElement.textContent;
 
             var traceTreeElement = new TreeElement();
             traceTreeElement.title = trace;
             traceTreeElement.selectable = false;
             rootTreeElement.appendChild(traceTreeElement);
         }
+        return /** @type {!WebInspector.CSSProperty} */(activeProperty);
     },
 
     /**
      * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
      * @return {!Map<string, !Array<!WebInspector.CSSProperty>>}
      */
     _computePropertyTraces: function(matchedStyles)
     {
         var result = new Map();
         for (var style of matchedStyles.nodeStyles()) {
@@ skipping 34 matching lines @@
         var children = this._propertiesOutline.rootElement().children();
         for (var child of children) {
             var property = child[WebInspector.ComputedStyleWidget._propertySymbol];
             var matched = !regex || regex.test(property.name) || regex.test(property.value);
             child.hidden = !matched;
         }
     },
 
     __proto__: WebInspector.ThrottledWidget.prototype
 }