DevTools: move UI components to target observers in preparation to early UI initialization.

Source/devtools/front_end/toolbox/MediaQueryInspector.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.View}
+ * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.MediaQueryInspector = function()
 {
     WebInspector.View.call(this);
     this.element.classList.add("media-inspector-view", "media-inspector-view-empty");
     this.element.addEventListener("click", this._onMediaQueryClicked.bind(this), false);
     this.element.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
     this.element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bind(this), false);
     this._mediaThrottler = new WebInspector.Throttler(100);
 
     this._translateZero = 0;
     this._offset = 0;
     this._scale = 1;
 
     this._rulerDecorationLayer = document.createElementWithClass("div", "fill");
     this._rulerDecorationLayer.classList.add("media-inspector-ruler-decoration");
     this._rulerDecorationLayer.addEventListener("click", this._onRulerDecorationClicked.bind(this), false);
 
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._scheduleMediaQueriesUpdate, this);
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._scheduleMediaQueriesUpdate, this);
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._scheduleMediaQueriesUpdate, this);
-    WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._scheduleMediaQueriesUpdate, this);
+    WebInspector.targetManager.observeTargets(this);
+
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._renderMediaQueries.bind(this), this);
     this._scheduleMediaQueriesUpdate();
 }
 
 /**
  * @enum {number}
  */
 WebInspector.MediaQueryInspector.Section = {
     Max: 0,
     MinMax: 1,
     Min: 2
 }
 
 WebInspector.MediaQueryInspector.Events = {
     HeightUpdated: "HeightUpdated"
 }
 
 WebInspector.MediaQueryInspector.prototype = {
     /**
+     * @param {!WebInspector.Target} target
+     */
+    targetAdded: function(target)
+    {
+        // FIXME: adapt this to multiple targets.
+        if (this._target)
+            return;
+        this._target = target;
+        target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._scheduleMediaQueriesUpdate, this);
+        target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._scheduleMediaQueriesUpdate, this);
+        target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._scheduleMediaQueriesUpdate, this);
+        target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._scheduleMediaQueriesUpdate, this);
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetRemoved: function(target)
+    {
+        if (target !== this._target)
+            return;
+        target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._scheduleMediaQueriesUpdate, this);
+        target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._scheduleMediaQueriesUpdate, this);
+        target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._scheduleMediaQueriesUpdate, this);
+        target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._scheduleMediaQueriesUpdate, this);
+    },
+
+    /**
      * @return {!Element}
      */
     rulerDecorationLayer: function()
     {
         return this._rulerDecorationLayer;
     },
 
     /**
      * @return {!Array.<number>}
      */
@@ skipping 150 matching lines @@
 
         /**
          * @param {!Array.<!WebInspector.CSSMedia>} cssMedias
          * @this {!WebInspector.MediaQueryInspector}
          */
         function callback(cssMedias)
         {
             this._rebuildMediaQueries(cssMedias);
             finishCallback();
         }
-        WebInspector.cssModel.getMediaQueries(callback.bind(this));
+        this._target.cssModel.getMediaQueries(callback.bind(this));
     },
 
     /**
      * @param {!Array.<!WebInspector.MediaQueryInspector.MediaQueryUIModel>} models
      * @return {!Array.<!WebInspector.MediaQueryInspector.MediaQueryUIModel>}
      */
     _squashAdjacentEqual: function(models)
     {
         var filtered = [];
         for (var i = 0; i < models.length; ++i) {
@@ skipping 290 matching lines @@
     },
 
     /**
      * @return {?WebInspector.CSSMediaQueryExpression}
      */
     maxWidthExpression: function()
     {
         return this._maxWidthExpression;
     }
 }