DevTools: reuse computedstylesmodel in the elements sidebar base class.

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

Index: third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleModel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleModel.js b/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleModel.js
index 6c67b5ba1fda842e1256c259e3e23b41d09f3558..814792e73c77f86221f76f18055d69c450edc509 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleModel.js
@@ -31,7 +31,7 @@ WebInspector.ComputedStyleModel.prototype = {
      */
     cssModel: function()
     {
-        return this._cssModel;
+        return this._cssModel && this._cssModel.isEnabled() ? this._cssModel : null;
     },
 
     /**
@@ -41,7 +41,7 @@ WebInspector.ComputedStyleModel.prototype = {
     {
         this._node = /** @type {?WebInspector.DOMNode} */(event.data);
         this._updateTarget(this._node ? this._node.target() : null);
-        this._onComputedStyleChanged();
+        this._onComputedStyleChanged(null);
     },
 
     /**
@@ -56,25 +56,70 @@ WebInspector.ComputedStyleModel.prototype = {
             this._targetEvents = null;
         }
         this._target = target;
+
         var domModel = null;
+        var resourceTreeModel = null;
         if (target) {
             this._cssModel = WebInspector.CSSModel.fromTarget(target);
             domModel = WebInspector.DOMModel.fromTarget(target);
+            resourceTreeModel = target.resourceTreeModel;
         }
 
-        if (domModel && this._cssModel) {
+        if (this._cssModel && domModel && resourceTreeModel) {
             this._targetEvents = [
-                this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetAdded,  this._onComputedStyleChanged, this),
-                this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetRemoved,  this._onComputedStyleChanged, this),
-                this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetChanged,  this._onComputedStyleChanged, this),
-                this._cssModel.addEventListener(WebInspector.CSSModel.Events.MediaQueryResultChanged,  this._onComputedStyleChanged, this),
-                this._cssModel.addEventListener(WebInspector.CSSModel.Events.PseudoStateForced,  this._onComputedStyleChanged, this),
-                this._cssModel.addEventListener(WebInspector.CSSModel.Events.ModelWasEnabled,  this._onComputedStyleChanged, this),
-                domModel.addEventListener(WebInspector.DOMModel.Events.DOMMutated, this._onComputedStyleChanged, this)
+                this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetAdded, this._onComputedStyleChanged, this),
+                this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetRemoved, this._onComputedStyleChanged, this),
+                this._cssModel.addEventListener(WebInspector.CSSModel.Events.StyleSheetChanged, this._onComputedStyleChanged, this),
+                this._cssModel.addEventListener(WebInspector.CSSModel.Events.MediaQueryResultChanged, this._onComputedStyleChanged, this),
+                this._cssModel.addEventListener(WebInspector.CSSModel.Events.PseudoStateForced, this._onComputedStyleChanged, this),
+                this._cssModel.addEventListener(WebInspector.CSSModel.Events.ModelWasEnabled, this._onComputedStyleChanged, this),
+                domModel.addEventListener(WebInspector.DOMModel.Events.DOMMutated, this._onDOMModelChanged, this),
+                resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._onFrameResized, this),
             ];
         }
     },
 
+     /**
+     * @param {?WebInspector.Event} event
+     */
+   _onComputedStyleChanged: function(event)

[lushnikov, 2016/07/14 00:58:14]

nit: indent is off here (do you use eslint?)

[pfeldman, 2016/07/14 17:26:12]

nope

+    {
+        delete this._computedStylePromise;
+        this.dispatchEventToListeners(WebInspector.ComputedStyleModel.Events.ComputedStyleChanged, event);

[lushnikov, 2016/07/14 00:58:15]

event.data || null

(This will save from writing ugly event.data && event.data.data later)

[pfeldman, 2016/07/14 17:26:12]

Done.

+    },
+
+     /**
+     * @param {!WebInspector.Event} event
+     */
+    _onDOMModelChanged: function(event)
+    {
+        // Any attribute removal or modification can affect the styles of "related" nodes.
+        var node = /** @type {!WebInspector.DOMNode} */ (event.data);
+        if (!this._node || this._node !== node && node.parentNode !== this._node.parentNode && !node.isAncestor(this._node))
+            return;
+        this._onComputedStyleChanged(null);
+    },
+
+   /**
+     * @param {!WebInspector.Event} event
+     */
+    _onFrameResized: function(event)
+    {
+        /**
+         * @this {WebInspector.ComputedStyleModel}
+         */
+        function refreshContents()
+        {
+            this._onComputedStyleChanged(null);
+            delete this._frameResizedTimer;
+        }
+
+        if (this._frameResizedTimer)
+            clearTimeout(this._frameResizedTimer);
+
+        this._frameResizedTimer = setTimeout(refreshContents.bind(this), 100);
+    },
+
     /**
      * @return {?WebInspector.DOMNode}
      */
@@ -110,13 +155,7 @@ WebInspector.ComputedStyleModel.prototype = {
         }
     },
 
-    _onComputedStyleChanged: function()
-    {
-        delete this._computedStylePromise;
-        this.dispatchEventToListeners(WebInspector.ComputedStyleModel.Events.ComputedStyleChanged);
-    },
-
-    __proto__: WebInspector.Object.prototype
+     __proto__: WebInspector.Object.prototype

[lushnikov, 2016/07/14 00:58:15]

nit: indent

[pfeldman, 2016/07/14 17:26:12]

Done.

 }
 
 /**