1 /* 2 * Copyright (C) 2013 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions are 6 * met: 7 * 8 * * Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * * Redistributions in binary form must reproduce the above 11 * copyright notice, this list of conditions and the following disclaimer 12 * in the documentation and/or other materials provided with the 13 * distribution. 14 * * Neither the name of Google Inc. nor the names of its 15 * contributors may be used to endorse or promote products derived from 16 * this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 */ 30 31 importScript("LayerTreeOutline.js"); 32 importScript("LayerDetailsView.js"); 33 importScript("PaintProfilerView.js"); 34 importScript("LayerPaintProfilerView.js"); 35 36 /** 37 * @constructor 38 * @extends {WebInspector.PanelWithSidebarTree} 39 */ 40 WebInspector.LayersPanel = function() 41 { 42 WebInspector.PanelWithSidebarTree.call(this, "layers", 225); 43 this.registerRequiredCSS("layersPanel.css"); 44 45 this.sidebarElement().classList.add("outline-disclosure"); 46 this.sidebarTree.element.classList.remove("sidebar-tree"); 47 48 this._target = /** @type {!WebInspector.Target} */ (WebInspector.targetManager.activeTarget()); 49 this._model = new WebInspector.LayerTreeModel(this._target); 50 this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this); 51 this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this); 52 this._currentlySelectedLayer = null; 53 this._currentlyHoveredLayer = null; 54 55 this._layerTreeOutline = new WebInspector.LayerTreeOutline(this.sidebarTree); 56 this._layerTreeOutline.addEventListener(WebInspector.LayerTreeOutline.Events.LayerSelected, this._onObjectSelected, this); 57 this._layerTreeOutline.addEventListener(WebInspector.LayerTreeOutline.Events.LayerHovered, this._onObjectHovered, this); 58 59 this._rightSplitView = new WebInspector.SplitView(false, true, "layerDetailsSplitViewState"); 60 this._rightSplitView.show(this.mainElement()); 61 62 this._layers3DView = new WebInspector.Layers3DView(); 63 this._layers3DView.show(this._rightSplitView.mainElement()); 64 this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ObjectSelected, this._onObjectSelected, this); 65 this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ObjectHovered, this._onObjectHovered, this); 66 this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSnapshotRequested, this._onSnapshotRequested, this); 67 this._layers3DView.registerShortcuts(this.registerShortcuts.bind(this)); 68 69 this._tabbedPane = new WebInspector.TabbedPane(); 70 this._tabbedPane.show(this._rightSplitView.sidebarElement()); 71 72 this._layerDetailsView = new WebInspector.LayerDetailsView(); 73 this._layerDetailsView.addEventListener(WebInspector.LayerDetailsView.Events.ObjectSelected, this._onObjectSelected, this); 74 this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Details, WebInspector.UIString("Details"), this._layerDetailsView); 75 76 this._paintProfilerView = new WebInspector.LayerPaintProfilerView(this._layers3DView.showImageForLayer.bind(this._layers3DView)); 77 this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler, WebInspector.UIString("Profiler"), this._paintProfilerView); 78 } 79 80 WebInspector.LayersPanel.DetailsViewTabs = { 81 Details: "details", 82 Profiler: "profiler" 83 }; 84 85 WebInspector.LayersPanel.prototype = { 86 wasShown: function() 87 { 88 WebInspector.Panel.prototype.wasShown.call(this); 89 this.sidebarTree.element.focus(); 90 this._model.enable(); 91 }, 92 93 willHide: function() 94 { 95 this._model.disable(); 96 WebInspector.Panel.prototype.willHide.call(this); 97 }, 98 99 /** 100 * @param {!WebInspector.DeferredLayerTree} deferredLayerTree 101 */ 102 _showLayerTree: function(deferredLayerTree) 103 { 104 deferredLayerTree.resolve(onLayersReady.bind(this)); 105 /** 106 * @param {!WebInspector.LayerTreeBase} layerTree 107 * @this {WebInspector.LayersPanel} this 108 */ 109 function onLayersReady(layerTree) 110 { 111 this._model.setLayerTree(layerTree); 112 } 113 }, 114 115 _onLayerTreeUpdated: function() 116 { 117 var layerTree = this._model.layerTree(); 118 this._layers3DView.setLayerTree(layerTree); 119 this._layerTreeOutline.update(layerTree); 120 if (this._currentlySelectedLayer && (!layerTree || !layerTree.layerById(this._currentlySelectedLayer.layer.id()))) 121 this._selectObject(null); 122 if (this._currentlyHoveredLayer && (!layerTree || !layerTree.layerById(this._currentlyHoveredLayer.layer.id()))) 123 this._hoverObject(null); 124 this._layerDetailsView.update(); 125 }, 126 127 /** 128 * @param {!WebInspector.Event} event 129 */ 130 _onLayerPainted: function(event) 131 { 132 this._layers3DView.setLayerTree(this._model.layerTree()); 133 if (this._currentlySelectedLayer && this._currentlySelectedLayer.layer === event.data) 134 this._layerDetailsView.update(); 135 }, 136 137 /** 138 * @param {!WebInspector.Event} event 139 */ 140 _onObjectSelected: function(event) 141 { 142 var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data); 143 this._selectObject(activeObject); 144 }, 145 146 /** 147 * @param {!WebInspector.Event} event 148 */ 149 _onObjectHovered: function(event) 150 { 151 var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data); 152 this._hoverObject(activeObject); 153 }, 154 155 /** 156 * @param {!WebInspector.Event} event 157 */ 158 _onSnapshotRequested: function(event) 159 { 160 var layer = /** @type {!WebInspector.Layer} */ (event.data); 161 this._tabbedPane.selectTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler); 162 this._paintProfilerView.profileLayer(layer); 163 }, 164 165 /** 166 * @param {?WebInspector.Layers3DView.ActiveObject} activeObject 167 */ 168 _selectObject: function(activeObject) 169 { 170 var layer = activeObject && activeObject.layer; 171 if (this._currentlySelectedLayer === activeObject) 172 return; 173 this._currentlySelectedLayer = activeObject; 174 var node = layer ? layer.nodeForSelfOrAncestor() : null; 175 if (node) 176 node.highlightForTwoSeconds(); 177 else 178 this._target.domModel.hideDOMNodeHighlight(); 179 this._layerTreeOutline.selectLayer(layer); 180 this._layers3DView.selectObject(activeObject); 181 this._layerDetailsView.setObject(activeObject); 182 }, 183 184 /** 185 * @param {?WebInspector.Layers3DView.ActiveObject} activeObject 186 */ 187 _hoverObject: function(activeObject) 188 { 189 var layer = activeObject && activeObject.layer; 190 if (this._currentlyHoveredLayer === activeObject) 191 return; 192 this._currentlyHoveredLayer = activeObject; 193 var node = layer ? layer.nodeForSelfOrAncestor() : null; 194 if (node) 195 node.highlight(); 196 else 197 this._target.domModel.hideDOMNodeHighlight(); 198 this._layerTreeOutline.hoverLayer(layer); 199 this._layers3DView.hoverObject(activeObject); 200 }, 201 202 /** 203 * @param {!WebInspector.Layer} layer 204 * @param {string=} imageURL 205 */ 206 _showImageForLayer: function(layer, imageURL) 207 { 208 this._layers3DView.showImageForLayer(layer, imageURL); 209 }, 210 211 __proto__: WebInspector.PanelWithSidebarTree.prototype 212 } 213 214 /** 215 * @constructor 216 * @implements {WebInspector.Revealer} 217 */ 218 WebInspector.LayersPanel.LayerTreeRevealer = function() 219 { 220 } 221 222 WebInspector.LayersPanel.LayerTreeRevealer.prototype = { 223 /** 224 * @param {!Object} snapshotData 225 */ 226 reveal: function(snapshotData) 227 { 228 if (!(snapshotData instanceof WebInspector.DeferredLayerTree)) 229 return; 230 var panel = /** @type {!WebInspector.LayersPanel} */ (WebInspector.inspectorView.showPanel("layers")); 231 panel._showLayerTree(/** @type {!WebInspector.DeferredLayerTree} */ (snapshotData)); 232 } 233 } 234