DevTools: extract a component for layer viewer

third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js

 // Copyright 2015 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}
  * @param {!WebInspector.TimelineModel} model
  * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
  */
@@ skipping 221 matching lines @@
 
     _updateDetailsForSelection: function()
     {
         var selectedNode = this._dataGrid.selectedNode ? /** @type {!WebInspector.TimelineTreeView.TreeGridNode} */ (this._dataGrid.selectedNode)._profileNode : null;
         if (selectedNode === this._lastSelectedNode)
             return;
         this._lastSelectedNode = selectedNode;
         this._detailsView.detachChildWidgets();
         this._detailsView.element.removeChildren();
         if (!selectedNode || !this._showDetailsForNode(selectedNode)) {
-            var banner = this._detailsView.element.createChild("div", "banner");
+            var banner = this._detailsView.element.createChild("div", "full-widget-dimmed-banner");
             banner.createTextChild(WebInspector.UIString("Select item for details."));
         }
     },
 
     /**
      * @param {!WebInspector.TimelineProfileTree.Node} node
      * @return {boolean}
      */
     _showDetailsForNode: function(node)
     {
@@ skipping 626 matching lines @@
         return selectedNode && /** @type {!WebInspector.TimelineTreeView.GridNode} */ (selectedNode)._profileNode;
     },
 
     _onSelectionChanged: function()
     {
         this.dispatchEventToListeners(WebInspector.TimelineStackView.Events.SelectionChanged);
     },
 
     __proto__: WebInspector.VBox.prototype
 }