DevTools: move off WebInspector.css/domModel in sidebars.

Source/devtools/front_end/MetricsSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  *
  * 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.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 15 matching lines @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
  */
 WebInspector.MetricsSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Metrics"));
-
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this);
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributesUpdated, this);
-    WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributesUpdated, this);
-    WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this);
 }
 
 WebInspector.MetricsSidebarPane.prototype = {
     /**
      * @param {?WebInspector.DOMNode=} node
      */
     update: function(node)
     {
-        if (node)
-            this.node = node;
+        if (!node || this._node === node) {
+            this._innerUpdate();
+            return;
+        }
+
+        this._node = node;
+        this._updateTarget(node.target());
         this._innerUpdate();
     },
 
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    _updateTarget: function(target)
+    {
+        if (this._target === target)
+            return;
+
+        if (this._target) {
+            this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this);
+            this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this);
+            this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributesUpdated, this);
+            this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributesUpdated, this);
+            this._target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this);
+        }
+        this._target = target;
+        this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this);
+        this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this);
+        this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, this._attributesUpdated, this);
+        this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved, this._attributesUpdated, this);
+        this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this);
+    },
+
     _innerUpdate: function()
     {
         // "style" attribute might have changed. Update metrics unless they are being edited
         // (if a CSS property is added, a StyleSheetChanged event is dispatched).
         if (this._isEditingMetrics)
             return;
 
         // FIXME: avoid updates of a collapsed pane.
-        var node = this.node;
+        var node = this._node;
 
         if (!node || node.nodeType() !== Node.ELEMENT_NODE) {
             this.bodyElement.removeChildren();
             return;
         }
 
         /**
          * @param {?WebInspector.CSSStyleDeclaration} style
          * @this {WebInspector.MetricsSidebarPane}
          */
         function callback(style)
         {
-            if (!style || this.node !== node)
+            if (!style || this._node !== node)
                 return;
             this._updateMetrics(style);
         }
-        WebInspector.cssModel.getComputedStyleAsync(node.id, callback.bind(this));
+        this._target.cssModel.getComputedStyleAsync(node.id, callback.bind(this));
 
         /**
          * @param {?WebInspector.CSSStyleDeclaration} style
          * @this {WebInspector.MetricsSidebarPane}
          */
         function inlineStyleCallback(style)
         {
-            if (!style || this.node !== node)
+            if (!style || this._node !== node)
                 return;
             this.inlineStyle = style;
         }
-        WebInspector.cssModel.getInlineStylesAsync(node.id, inlineStyleCallback.bind(this));
+        this._target.cssModel.getInlineStylesAsync(node.id, inlineStyleCallback.bind(this));
     },
 
     _styleSheetOrMediaQueryResultChanged: function()
     {
         this._innerUpdate();
     },
 
     _frameResized: function()
     {
         /**
          * @this {WebInspector.MetricsSidebarPane}
          */
         function refreshContents()
         {
             this._innerUpdate();
             delete this._activeTimer;
         }
 
         if (this._activeTimer)
             clearTimeout(this._activeTimer);
 
         this._activeTimer = setTimeout(refreshContents.bind(this), 100);
     },
 
     _attributesUpdated: function(event)
     {
-        if (this.node !== event.data.node)
+        if (this._node !== event.data.node)
             return;
 
         this._innerUpdate();
     },
 
     _getPropertyValueAsPx: function(style, propertyName)
     {
         return Number(style.getPropertyValue(propertyName).replace(/px$/, "") || 0);
     },
 
     _getBox: function(computedStyle, componentName)
     {
         var suffix = componentName === "border" ? "-width" : "";
         var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
         var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
         var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
         var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
         return { left: left, top: top, right: right, bottom: bottom };
     },
 
     _highlightDOMNode: function(showHighlight, mode, event)
     {
         event.consume();
-        if (showHighlight && this.node) {
+        if (showHighlight && this._node) {
             if (this._highlightMode === mode)
                 return;
             this._highlightMode = mode;
-            this.node.highlight(mode);
+            this._node.highlight(mode);
         } else {
             delete this._highlightMode;
-            WebInspector.domModel.hideDOMNodeHighlight();
+            this._target.domModel.hideDOMNodeHighlight();
         }
 
         for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) {
             var element = this._boxElements[i];
-            if (!this.node || mode === "all" || element._name === mode)
+            if (!this._node || mode === "all" || element._name === mode)
                 element.style.backgroundColor = element._backgroundColor;
             else
                 element.style.backgroundColor = "";
         }
     },
 
     /**
      * @param {!WebInspector.CSSStyleDeclaration} style
      */
     _updateMetrics: function(style)
@@ skipping 260 matching lines @@
         this.previousPropertyDataCandidate = null;
         var self = this;
         var callback = function(style) {
             if (!style)
                 return;
             self.inlineStyle = style;
             if (!("originalPropertyData" in self))
                 self.originalPropertyData = self.previousPropertyDataCandidate;
 
             if (typeof self._highlightMode !== "undefined")
-                self.node.highlight(self._highlightMode);
+                self._node.highlight(self._highlightMode);
 
             if (commitEditor) {
                 self.dispatchEventToListeners("metrics edited");
                 self.update();
             }
         };
 
         var allProperties = this.inlineStyle.allProperties;
         for (var i = 0; i < allProperties.length; ++i) {
             var property = allProperties[i];
             if (property.name !== context.styleProperty || property.inactive)
                 continue;
 
             this.previousPropertyDataCandidate = property;
             property.setValue(userInput, commitEditor, true, callback);
             return;
         }
 
         this.inlineStyle.appendProperty(context.styleProperty, userInput, callback);
     },
 
     editingCommitted: function(element, userInput, previousContent, context)
     {
         this.editingEnded(element, context);
         this._applyUserInput(element, userInput, previousContent, context, true);
     },
 
     __proto__: WebInspector.SidebarPane.prototype
 }