Timeline: add layer tree outline to layer details view

This brings LayerTreeOutline to layers shown in Timeline details.

BUG=

Review URL: https://codereview.chromium.org/659403003

git-svn-id: svn://svn.chromium.org/blink/trunk@183991 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/devtools.gypi

@@ -320,7 +320,6 @@
             'front_end/indexedDBViews.css',
             'front_end/inspectorCommon.css',
             'front_end/inspectorSyntaxHighlight.css',
-            'front_end/layersPanel.css',
             'front_end/navigatorView.css',
             'front_end/networkLogView.css',
             'front_end/networkPanel.css',
@@ -408,7 +407,6 @@
             'front_end/layers/LayerDetailsView.js',
             'front_end/layers/LayerPaintProfilerView.js',
             'front_end/layers/LayersPanel.js',
-            'front_end/layers/LayerTreeOutline.js',
         ],
         'devtools_network_js_files': [
             'front_end/network/NetworkItemView.js',
@@ -514,6 +512,7 @@
         ],
         'devtools_timeline_js_files': [
             'front_end/timeline/CountersGraph.js',
+            'front_end/timeline/LayerTreeOutline.js',
             'front_end/timeline/Layers3DView.js',
             'front_end/timeline/MemoryCountersGraph.js',
             'front_end/timeline/PaintProfilerView.js',

third_party/WebKit/Source/devtools/front_end/layers/LayersPanel.js

@@ -36,11 +36,10 @@
 WebInspector.LayersPanel = function()
 {
     WebInspector.PanelWithSidebarTree.call(this, "layers", 225);
-    this.registerRequiredCSS("layersPanel.css");
     this.registerRequiredCSS("timelinePanel.css");
     this._target = null;
 
-    this.sidebarElement().classList.add("outline-disclosure");
+    this.sidebarElement().classList.add("outline-disclosure", "layer-tree");
     this.sidebarTree.element.classList.remove("sidebar-tree");
 
     WebInspector.targetManager.observeTargets(this);

third_party/WebKit/Source/devtools/front_end/layers/module.json

@@ -16,7 +16,6 @@
     "dependencies": ["timeline"],
     "experiment": "layersPanel",
     "scripts": [
-        "LayerTreeOutline.js",
         "LayerDetailsView.js",
         "LayerPaintProfilerView.js",
         "LayersPanel.js"

third_party/WebKit/Source/devtools/front_end/layersPanel.css

-/*
- * Copyright (C) 2013 Google Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.layers.panel .outline-disclosure {
-    z-index: 10;
-}
-
-.layers.panel div.outline-disclosure > ol {
-    margin-left: -12px;
-}
-
-.layers.panel .outline-disclosure ol.children {
-    padding-left: 12px;
-}
-
-.layers.panel .outline-disclosure li {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: 1 1 1 14px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.layers.panel .outline-disclosure .dimmed {
-    opacity: 0.6;
-}
-

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

@@ -6,18 +6,26 @@
 
 /**
  * @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 = {
@@ -125,6 +133,7 @@ WebInspector.TimelineLayersView.prototype = {
          */
         function onLayersAndTilesReady()
         {
+            this._layerTreeOutline.update(layerTree);
             this._layers3DView.setLayerTree(layerTree);
             this._layers3DView.setTiles(this._paintTiles);
         }
@@ -140,6 +149,7 @@ WebInspector.TimelineLayersView.prototype = {
             return;
         this._currentlySelectedLayer = activeObject;
         this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
+        this._layerTreeOutline.selectLayer(layer);
         this._layers3DView.selectObject(activeObject);
     },
 
@@ -153,6 +163,7 @@ WebInspector.TimelineLayersView.prototype = {
             return;
         this._currentlyHoveredLayer = activeObject;
         this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
+        this._layerTreeOutline.hoverLayer(layer);
         this._layers3DView.hoverObject(activeObject);
     },
 
@@ -195,5 +206,5 @@ WebInspector.TimelineLayersView.prototype = {
         this._paintTiles = [];
     },
 
-    __proto__: WebInspector.VBox.prototype
+    __proto__: WebInspector.SplitView.prototype
 }

third_party/WebKit/Source/devtools/front_end/timeline/module.json

@@ -13,6 +13,7 @@
     ],
     "scripts": [
         "CountersGraph.js",
+        "LayerTreeOutline.js",
         "Layers3DView.js",
         "MemoryCountersGraph.js",
         "TimelineModel.js",

third_party/WebKit/Source/devtools/front_end/timelinePanel.css

@@ -744,6 +744,38 @@
     align-items: center;
 }
 
+.layer-tree.outline-disclosure {
+    z-index: 10;
+}
+
+.layer-tree.outline-disclosure > ol,
+.profiler-log-view > ol {
+    margin-left: -12px;
+}
+
+.layer-tree.outline-disclosure ol.children,
+.profiler-log-view ol.children {
+    padding-left: 12px;
+}
+
+.layer-tree.outline-disclosure li,
+.profiler-log-view li {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 1 1 1 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.timeline-paint-profiler-view .outline-disclosure ol.children {
+    padding-left: 12px;
+}
+
+.layer-tree.outline-disclosure .dimmed {
+    opacity: 0.6;
+}
+
 .layers-3d-view {
     overflow: hidden;
     -webkit-user-select: none;
@@ -842,19 +874,6 @@
     display: block;
 }
 
-.timeline-paint-profiler-view .outline-disclosure li {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: 1px 1px 1px 14px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.timeline-paint-profiler-view .outline-disclosure ol.children {
-    padding-left: 12px;
-}
-
 .paint-profiler-image-view {
     overflow: hidden;
 }