DevTools: make paint profiler target-aware

Source/devtools/front_end/timeline/TimelineLayersView.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.VBox}
  */
 WebInspector.TimelineLayersView = function()
 {
     WebInspector.VBox.call(this);
 
     this._paintTiles = [];
     this._layers3DView = new WebInspector.Layers3DView();
     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ObjectSelected, this._onObjectSelected, this);
     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ObjectHovered, this._onObjectHovered, this);
     this._layers3DView.show(this.element);
 }
 
 WebInspector.TimelineLayersView.prototype = {
     /**
      * @param {!WebInspector.DeferredLayerTree} deferredLayerTree
      * @param {?Array.<!WebInspector.LayerPaintEvent>} paints
      */
     showLayerTree: function(deferredLayerTree, paints)
     {
         this._disposeTiles();
-        if (!this.isShowing()) {
-            this._pendingLayerTree = deferredLayerTree,
-            this._pendingPaints = paints;
-            return;
-        }
-        this._actuallyShowLayerTree(deferredLayerTree, paints);
+        this._deferredLayerTree = deferredLayerTree;
+        this._paints = paints;
+        if (this.isShowing())
+            this._update();
+        else
+            this._updateWhenVisible = true;
     },
 
     wasShown: function()
     {
-        if (!this._pendingLayerTree)
-            return;
-        this._actuallyShowLayerTree(this._pendingLayerTree, this._pendingPaints);
-        this._pendingLayerTree = null;
-        this._pendingPaints = null;
+        if (this._updateWhenVisible) {
+            this._updateWhenVisible = false;
+            this._update();
+        }
     },
 
-    /**
-     * @param {!WebInspector.DeferredLayerTree} deferredLayerTree
-     * @param {?Array.<!WebInspector.LayerPaintEvent>} paints
-     */
-    _actuallyShowLayerTree: function(deferredLayerTree, paints)
+    _update: function()
     {
         var layerTree;
 
-        this._target = deferredLayerTree.target();
+        this._weakTarget = this._deferredLayerTree.weakTarget();
         var originalTiles = this._paintTiles;
         var tilesReadyBarrier = new CallbackBarrier();
-        deferredLayerTree.resolve(tilesReadyBarrier.createCallback(onLayersReady));
-        for (var i = 0; paints && i < paints.length; ++i)
-            WebInspector.PaintProfilerSnapshot.load(paints[i].picture, tilesReadyBarrier.createCallback(onSnapshotLoaded.bind(this, paints[i])));
+        this._deferredLayerTree.resolve(tilesReadyBarrier.createCallback(onLayersReady));
+        var target = this._weakTarget.get();
+        if (target) {
+            for (var i = 0; this._paints && i < this._paints.length; ++i)
+                WebInspector.PaintProfilerSnapshot.load(target, this._paints[i].picture, tilesReadyBarrier.createCallback(onSnapshotLoaded.bind(this, this._paints[i])));
+        }
         tilesReadyBarrier.callWhenDone(onLayersAndTilesReady.bind(this));
 
         /**
          * @param {!WebInspector.LayerTreeBase} resolvedLayerTree
          */
         function onLayersReady(resolvedLayerTree)
         {
             layerTree = resolvedLayerTree;
         }
 
@@ skipping 26 matching lines @@
 
     /**
      * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
      */
     _selectObject: function(activeObject)
     {
         var layer = activeObject && activeObject.layer;
         if (this._currentlySelectedLayer === activeObject)
             return;
         this._currentlySelectedLayer = activeObject;
-        var node = layer ? layer.nodeForSelfOrAncestor() : null;
-        if (node)
-            node.highlightForTwoSeconds();
-        else
-            this._target.domModel.hideDOMNodeHighlight();
+        this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
         this._layers3DView.selectObject(activeObject);
     },
 
     /**
      * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
      */
     _hoverObject: function(activeObject)
     {
         var layer = activeObject && activeObject.layer;
         if (this._currentlyHoveredLayer === activeObject)
             return;
         this._currentlyHoveredLayer = activeObject;
-        var node = layer ? layer.nodeForSelfOrAncestor() : null;
-        if (node)
-            node.highlight();
-        else
-            this._target.domModel.hideDOMNodeHighlight();
+        this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
         this._layers3DView.hoverObject(activeObject);
     },
 
     /**
+     * @param {?WebInspector.DOMNode} node
+     */
+    _toggleNodeHighlight: function(node)
+    {
+        if (node) {
+            node.highlightForTwoSeconds();
+            return;
+        }
+        var target = this._weakTarget.get();
+        if (target)
+            target.domModel.hideDOMNodeHighlight();
+
+    },
+
+    /**
      * @param {!WebInspector.Event} event
      */
     _onObjectSelected: function(event)
     {
         var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
         this._selectObject(activeObject);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onObjectHovered: function(event)
     {
         var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
         this._hoverObject(activeObject);
     },
 
     _disposeTiles: function()
     {
         for (var i = 0; i < this._paintTiles.length; ++i)
             this._paintTiles[i].snapshot.dispose();
         this._paintTiles = [];
     },
 
     __proto__: WebInspector.VBox.prototype
 }