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

   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 /**
  32  * @constructor
  33  * @extends {WebInspector.PanelWithSidebarTree}
  34  * @implements {WebInspector.TargetManager.Observer}
  35  */
  36 WebInspector.LayersPanel = function()
  37 {
  38     WebInspector.PanelWithSidebarTree.call(this, "layers", 225);
  39     this.registerRequiredCSS("timeline/timelinePanel.css");
  40     this._target = null;
  41
  42     this.sidebarElement().classList.add("outline-disclosure", "layer-tree");
  43     this.sidebarTree.element.classList.remove("sidebar-tree");
  44
  45     WebInspector.targetManager.observeTargets(this);
  46     this._currentlySelectedLayer = null;
  47     this._currentlyHoveredLayer = null;
  48
  49     this._layerTreeOutline = new WebInspector.LayerTreeOutline(this.sidebarTree);
  50     this._layerTreeOutline.addEventListener(WebInspector.LayerTreeOutline.Events.LayerSelected, this._onObjectSelected, this);
  51     this._layerTreeOutline.addEventListener(WebInspector.LayerTreeOutline.Events.LayerHovered, this._onObjectHovered, this);
  52
  53     this._rightSplitView = new WebInspector.SplitView(false, true, "layerDetailsSplitViewState");
  54     this._rightSplitView.show(this.mainElement());
  55
  56     this._layers3DView = new WebInspector.Layers3DView();
  57     this._layers3DView.show(this._rightSplitView.mainElement());
  58     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ObjectSelected, this._onObjectSelected, this);
  59     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ObjectHovered, this._onObjectHovered, this);
  60     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSnapshotRequested, this._onSnapshotRequested, this);
  61
  62     this._tabbedPane = new WebInspector.TabbedPane();
  63     this._tabbedPane.show(this._rightSplitView.sidebarElement());
  64
  65     this._layerDetailsView = new WebInspector.LayerDetailsView();
  66     this._layerDetailsView.addEventListener(WebInspector.LayerDetailsView.Events.ObjectSelected, this._onObjectSelected, this);
  67     this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Details, WebInspector.UIString("Details"), this._layerDetailsView);
  68
  69     this._paintProfilerView = new WebInspector.LayerPaintProfilerView(this._layers3DView.showImageForLayer.bind(this._layers3DView));
  70     this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler, WebInspector.UIString("Profiler"), this._paintProfilerView);
  71 }
  72
  73 WebInspector.LayersPanel.DetailsViewTabs = {
  74     Details: "details",
  75     Profiler: "profiler"
  76 };
  77
  78 WebInspector.LayersPanel.prototype = {
  79     wasShown: function()
  80     {
  81         WebInspector.Panel.prototype.wasShown.call(this);
  82         this.sidebarTree.element.focus();
  83         if (this._target)
  84             this._target.layerTreeModel.enable();
  85     },
  86
  87     willHide: function()
  88     {
  89         if (this._target)
  90             this._target.layerTreeModel.disable();
  91         WebInspector.Panel.prototype.willHide.call(this);
  92     },
  93
  94     /**
  95      * @param {!WebInspector.Target} target
  96      */
  97     targetAdded: function(target)
  98     {
  99         if (this._target)
 100             return;
 101         this._target = target;
 102         this._target.layerTreeModel.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
 103         this._target.layerTreeModel.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
 104         if (this.isShowing())
 105             this._target.layerTreeModel.enable();
 106     },
 107
 108     /**
 109      * @param {!WebInspector.Target} target
 110      */
 111     targetRemoved: function(target)
 112     {
 113         if (this._target !== target)
 114             return;
 115         this._target.layerTreeModel.removeEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
 116         this._target.layerTreeModel.removeEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
 117         this._target.layerTreeModel.disable();
 118         this._target = null;
 119     },
 120
 121     /**
 122      * @param {!WebInspector.DeferredLayerTree} deferredLayerTree
 123      */
 124     _showLayerTree: function(deferredLayerTree)
 125     {
 126         deferredLayerTree.resolve(this._setLayerTree.bind(this));
 127     },
 128
 129     _onLayerTreeUpdated: function()
 130     {
 131         if (this._target)
 132             this._setLayerTree(this._target.layerTreeModel.layerTree());
 133     },
 134
 135     /**
 136      * @param {?WebInspector.LayerTreeBase} layerTree
 137      */
 138     _setLayerTree: function(layerTree)
 139     {
 140         this._layers3DView.setLayerTree(layerTree);
 141         this._layerTreeOutline.update(layerTree);
 142         if (this._currentlySelectedLayer && (!layerTree || !layerTree.layerById(this._currentlySelectedLayer.layer.id())))
 143             this._selectObject(null);
 144         if (this._currentlyHoveredLayer && (!layerTree || !layerTree.layerById(this._currentlyHoveredLayer.layer.id())))
 145             this._hoverObject(null);
 146         this._layerDetailsView.update();
 147     },
 148
 149     /**
 150      * @param {!WebInspector.Event} event
 151      */
 152     _onLayerPainted: function(event)
 153     {
 154         if (!this._target)
 155             return;
 156         this._layers3DView.setLayerTree(this._target.layerTreeModel.layerTree());
 157         if (this._currentlySelectedLayer && this._currentlySelectedLayer.layer === event.data)
 158             this._layerDetailsView.update();
 159     },
 160
 161     /**
 162      * @param {!WebInspector.Event} event
 163      */
 164     _onObjectSelected: function(event)
 165     {
 166         var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
 167         this._selectObject(activeObject);
 168     },
 169
 170     /**
 171      * @param {!WebInspector.Event} event
 172      */
 173     _onObjectHovered: function(event)
 174     {
 175         var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
 176         this._hoverObject(activeObject);
 177     },
 178
 179     /**
 180      * @param {!WebInspector.Event} event
 181      */
 182     _onSnapshotRequested: function(event)
 183     {
 184         var layer = /** @type {!WebInspector.Layer} */ (event.data);
 185         this._tabbedPane.selectTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler);
 186         this._paintProfilerView.profileLayer(layer);
 187     },
 188
 189     /**
 190      * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
 191      */
 192     _selectObject: function(activeObject)
 193     {
 194         var layer = activeObject && activeObject.layer;
 195         if (this._currentlySelectedLayer === activeObject)
 196             return;
 197         this._currentlySelectedLayer = activeObject;
 198         var node = layer ? layer.nodeForSelfOrAncestor() : null;
 199         if (node)
 200             node.highlightForTwoSeconds();
 201         else if (this._target)
 202             this._target.domModel.hideDOMNodeHighlight();
 203         this._layerTreeOutline.selectLayer(layer);
 204         this._layers3DView.selectObject(activeObject);
 205         this._layerDetailsView.setObject(activeObject);
 206     },
 207
 208     /**
 209      * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
 210      */
 211     _hoverObject: function(activeObject)
 212     {
 213         var layer = activeObject && activeObject.layer;
 214         if (this._currentlyHoveredLayer === activeObject)
 215             return;
 216         this._currentlyHoveredLayer = activeObject;
 217         var node = layer ? layer.nodeForSelfOrAncestor() : null;
 218         if (node)
 219             node.highlight();
 220         else if (this._target)
 221             this._target.domModel.hideDOMNodeHighlight();
 222         this._layerTreeOutline.hoverLayer(layer);
 223         this._layers3DView.hoverObject(activeObject);
 224     },
 225
 226     __proto__: WebInspector.PanelWithSidebarTree.prototype
 227 }
 228
 229 /**
 230  * @constructor
 231  * @implements {WebInspector.Revealer}
 232  */
 233 WebInspector.LayersPanel.LayerTreeRevealer = function()
 234 {
 235 }
 236
 237 WebInspector.LayersPanel.LayerTreeRevealer.prototype = {
 238     /**
 239      * @param {!Object} snapshotData
 240      * @return {!Promise}
 241      */
 242     reveal: function(snapshotData)
 243     {
 244         if (!(snapshotData instanceof WebInspector.DeferredLayerTree))
 245             return Promise.rejectWithError("Internal error: not a WebInspector.DeferredLayerTree");
 246         var panel = WebInspector.LayersPanel._instance();
 247         WebInspector.inspectorView.setCurrentPanel(panel);
 248         panel._showLayerTree(/** @type {!WebInspector.DeferredLayerTree} */ (snapshotData));
 249         return Promise.resolve();
 250     }
 251 }
 252
 253 /**
 254  * @return {!WebInspector.LayersPanel}
 255  */
 256 WebInspector.LayersPanel._instance = function()
 257 {
 258     if (!WebInspector.LayersPanel._instanceObject)
 259         WebInspector.LayersPanel._instanceObject = new WebInspector.LayersPanel();
 260     return WebInspector.LayersPanel._instanceObject;
 261 }
 262
 263 /**
 264  * @constructor
 265  * @implements {WebInspector.PanelFactory}
 266  */
 267 WebInspector.LayersPanelFactory = function()
 268 {
 269 }
 270
 271 WebInspector.LayersPanelFactory.prototype = {
 272     /**
 273      * @return {!WebInspector.Panel}
 274      */
 275     createPanel: function()
 276     {
 277         return WebInspector.LayersPanel._instance();
 278     }
 279 }