DevTools: remove the ComputedStyles -> Styles pane dependency.

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 12 matching lines @@
  * (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
- * @param {function(!WebInspector.CSSProperty)} revealCallback
  */
-WebInspector.ComputedStyleWidget = function(stylesSidebarPane, sharedModel, revealCallback)
+WebInspector.ComputedStyleWidget = function()
 {
     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._computedStyleModel = new WebInspector.ComputedStyleModel();
+    this._computedStyleModel.addEventListener(WebInspector.ComputedStyleModel.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);
     }
+
+    var fontsWidget = new WebInspector.PlatformFontsWidget(this._computedStyleModel);
+    fontsWidget.show(this.element);
 }
 
 /**
- * @param {!WebInspector.StylesSidebarPane} stylesSidebarPane
- * @param {!WebInspector.SharedSidebarModel} sharedModel
- * @param {function(!WebInspector.CSSProperty)} revealCallback
  * @return {!WebInspector.ElementsSidebarViewWrapperPane}
  */
-WebInspector.ComputedStyleWidget.createSidebarWrapper = function(stylesSidebarPane, sharedModel, revealCallback)
+WebInspector.ComputedStyleWidget.createSidebarWrapper = function()
 {
-    var widget = new WebInspector.ComputedStyleWidget(stylesSidebarPane, sharedModel, revealCallback);
+    var widget = new WebInspector.ComputedStyleWidget();
     return new WebInspector.ElementsSidebarViewWrapperPane(WebInspector.UIString("Computed Style"), widget)

[lushnikov, 2016/07/13 13:33:58]

while we're here: semicolon is missing

 }
 
 WebInspector.ComputedStyleWidget._propertySymbol = Symbol("property");
 
 WebInspector.ComputedStyleWidget.prototype = {
     _showInheritedComputedStyleChanged: function()
     {
         this.update();
     },
 
     /**
      * @override
      * @return {!Promise.<?>}
      */
     doUpdate: function()
     {
         var promises = [
-            this._sharedModel.fetchComputedStyle(),
-            this._stylesSidebarPane.fetchMatchedCascade()
+            this._computedStyleModel.fetchComputedStyle(),
+            this._fetchMatchedCascade()
         ];
         return Promise.all(promises)
             .spread(this._innerRebuildUpdate.bind(this));
     },
 
     /**
+     * @return {!Promise.<?WebInspector.CSSMatchedStyles>}
+     */
+    _fetchMatchedCascade: function()
+    {
+        var node = this._computedStyleModel.node();
+        if (!node || !this._computedStyleModel.cssModel())
+            return Promise.resolve(/** @type {?WebInspector.CSSMatchedStyles} */(null));
+
+        return this._computedStyleModel.cssModel().cachedMatchedCascadeForNode(node).then(validateStyles.bind(this));
+
+        /**
+         * @param {?WebInspector.CSSMatchedStyles} matchedStyles
+         * @return {?WebInspector.CSSMatchedStyles}
+         * @this {WebInspector.ComputedStyleWidget}
+         */
+        function validateStyles(matchedStyles)
+        {
+            return matchedStyles && matchedStyles.node() === this._computedStyleModel.node() ? matchedStyles : null;
+        }
+    },
+
+    /**
      * @param {string} text
      * @return {!Node}
      */
     _processColor: function(text)
     {
         var color = WebInspector.Color.parse(text);
         if (!color)
             return createTextNode(text);
         var swatch = WebInspector.ColorSwatch.create();
         swatch.setColorText(text);
         swatch.setFormat(WebInspector.Color.detectColorFormat(color));
         return swatch;
     },
 
     /**
-     * @param {?WebInspector.SharedSidebarModel.ComputedStyle} nodeStyle
+     * @param {?WebInspector.ComputedStyleModel.ComputedStyle} nodeStyle
      * @param {?WebInspector.CSSMatchedStyles} matchedStyles
      */
     _innerRebuildUpdate: function(nodeStyle, matchedStyles)
     {
         this._propertiesOutline.removeChildren();
         this._linkifier.reset();
-        var cssModel = this._sharedModel.cssModel();
+        var cssModel = this._computedStyleModel.cssModel();
         if (!nodeStyle || !matchedStyles || !cssModel)
             return;
 
         var uniqueProperties = nodeStyle.computedStyle.keysArray();
         uniqueProperties.sort(propertySorter);
 
         var propertyTraces = this._computePropertyTraces(matchedStyles);
         var inhertiedProperties = this._computeInheritedProperties(matchedStyles);
         var showInherited = this._showInheritedComputedStylePropertiesSetting.get();
         for (var i = 0; i < uniqueProperties.length; ++i) {
@@ skipping 79 matching lines @@
             consumeEvent(event);
         }
     },
 
     /**
      * @param {!WebInspector.CSSProperty} cssProperty
      * @param {!Event} event
      */
     _navigateToSource: function(cssProperty, event)
     {
-        if (this._revealCallback)
-            this._revealCallback.call(null, cssProperty);
+        WebInspector.Revealer.reveal(cssProperty);
         event.consume(true);
     },
 
     /**
      * @param {!WebInspector.CSSModel} cssModel
      * @param {!WebInspector.CSSMatchedStyles} matchedStyles
      * @param {!WebInspector.DOMNode} node
      * @param {!TreeElement} rootTreeElement
      * @param {!Array<!WebInspector.CSSProperty>} tracedProperties
      * @return {!WebInspector.CSSProperty}
@@ skipping 84 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
 }