Timeline: add layer tree outline to layer details view

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}
+ * @extends {WebInspector.SplitView}
  */
 WebInspector.TimelineLayersView = function()
 {
-    WebInspector.VBox.call(this);
+    WebInspector.SplitView.call(this, true, false, "timelineLayersView");
 
     this._paintTiles = [];
+
+    this.sidebarElement().classList.add("outline-disclosure", "layer-tree");
+    var sidebarTreeElement = this.sidebarElement().createChild("ol");
+    var treeOutline = new TreeOutline(sidebarTreeElement);
+    this._layerTreeOutline = new WebInspector.LayerTreeOutline(treeOutline);
+    this._layerTreeOutline.addEventListener(WebInspector.LayerTreeOutline.Events.LayerSelected, this._onObjectSelected, this);
+    this._layerTreeOutline.addEventListener(WebInspector.LayerTreeOutline.Events.LayerHovered, this._onObjectHovered, this);
+
     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.addEventListener(WebInspector.Layers3DView.Events.JumpToPaintEventRequested, this._jumpToPaintEvent, this);
-    this._layers3DView.show(this.element);
+    this._layers3DView.show(this.mainElement());
 }
 
 WebInspector.TimelineLayersView.prototype = {
     /**
      * @param {!WebInspector.DeferredLayerTree} deferredLayerTree
      * @param {?Array.<!WebInspector.LayerPaintEvent>} paints
      */
     showLayerTree: function(deferredLayerTree, paints)
     {
         this._disposeTiles();
@@ skipping 87 matching lines @@
                 return;
             }
             this._paintTiles.push({layerId: paintEvent.layerId(), rect: rect, snapshot: snapshot, traceEvent: paintEvent.event()});
         }
 
         /**
          * @this {WebInspector.TimelineLayersView}
          */
         function onLayersAndTilesReady()
         {
+            this._layerTreeOutline.update(layerTree);
             this._layers3DView.setLayerTree(layerTree);
             this._layers3DView.setTiles(this._paintTiles);
         }
     },
 
     /**
      * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
      */
     _selectObject: function(activeObject)
     {
         var layer = activeObject && activeObject.layer;
         if (this._currentlySelectedLayer === activeObject)
             return;
         this._currentlySelectedLayer = activeObject;
         this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
+        this._layerTreeOutline.selectLayer(layer);
         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;
         this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
+        this._layerTreeOutline.hoverLayer(layer);
         this._layers3DView.hoverObject(activeObject);
     },
 
     /**
      * @param {?WebInspector.DOMNode} node
      */
     _toggleNodeHighlight: function(node)
     {
         if (node) {
             node.highlightForTwoSeconds();
@@ skipping 22 matching lines @@
         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
+    __proto__: WebInspector.SplitView.prototype
 }