Timeline: add 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.SplitView}
  */
 WebInspector.TimelineLayersView = function()
 {
     WebInspector.SplitView.call(this, true, false, "timelineLayersView");
+    this._rightSplitView = new WebInspector.SplitView(true, true, "timelineLayersViewDetails");
+    this._rightSplitView.show(this.mainElement());
 
     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.mainElement());
+    this._layers3DView.show(this._rightSplitView.mainElement());
+
+    this._layerDetailsView = new WebInspector.LayerDetailsView();
+    this._layerDetailsView.show(this._rightSplitView.sidebarElement());
 }
 
 WebInspector.TimelineLayersView.prototype = {
     /**
      * @param {!WebInspector.DeferredLayerTree} deferredLayerTree
      * @param {?Array.<!WebInspector.LayerPaintEvent>} paints
      */
     showLayerTree: function(deferredLayerTree, paints)
     {
         this._disposeTiles();
@@ skipping 105 matching lines @@
      */
     _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);
+        this._layerDetailsView.setObject(activeObject);
     },
 
     /**
      * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
      */
     _hoverObject: function(activeObject)
     {
         var layer = activeObject && activeObject.layer;
         if (this._currentlyHoveredLayer === activeObject)
             return;
@@ skipping 37 matching lines @@
 
     _disposeTiles: function()
     {
         for (var i = 0; i < this._paintTiles.length; ++i)
             this._paintTiles[i].snapshot.dispose();
         this._paintTiles = [];
     },
 
     __proto__: WebInspector.SplitView.prototype
 }