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  */
  35 WebInspector.LayersPanel = function()
  36 {
  37     WebInspector.PanelWithSidebarTree.call(this, "layers", 225);
  38     this.registerRequiredCSS("layersPanel.css");
  39
  40     this.sidebarElement().classList.add("outline-disclosure");
  41     this.sidebarTree.element.classList.remove("sidebar-tree");
  42
  43     this._target = /** @type {!WebInspector.Target} */ (WebInspector.targetManager.mainTarget());
  44     this._model = new WebInspector.LayerTreeModel(this._target);
  45     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
  46     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
  47     this._currentlySelectedLayer = null;
  48     this._currentlyHoveredLayer = null;
  49
  50     this._layerTreeOutline = new WebInspector.LayerTreeOutline(this.sidebarTree);
  51     this._layerTreeOutline.addEventListener(WebInspector.LayerTreeOutline.Events.LayerSelected, this._onObjectSelected, this);
  52     this._layerTreeOutline.addEventListener(WebInspector.LayerTreeOutline.Events.LayerHovered, this._onObjectHovered, this);
  53
  54     this._rightSplitView = new WebInspector.SplitView(false, true, "layerDetailsSplitViewState");
  55     this._rightSplitView.show(this.mainElement());
  56
  57     this._layers3DView = new WebInspector.Layers3DView();
  58     this._layers3DView.show(this._rightSplitView.mainElement());
  59     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ObjectSelected, this._onObjectSelected, this);
  60     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.ObjectHovered, this._onObjectHovered, this);
  61     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSnapshotRequested, this._onSnapshotRequested, this);
  62
  63     this._tabbedPane = new WebInspector.TabbedPane();
  64     this._tabbedPane.show(this._rightSplitView.sidebarElement());
  65
  66     this._layerDetailsView = new WebInspector.LayerDetailsView();
  67     this._layerDetailsView.addEventListener(WebInspector.LayerDetailsView.Events.ObjectSelected, this._onObjectSelected, this);
  68     this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Details, WebInspector.UIString("Details"), this._layerDetailsView);
  69
  70     this._paintProfilerView = new WebInspector.LayerPaintProfilerView(this._layers3DView.showImageForLayer.bind(this._layers3DView));
  71     this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler, WebInspector.UIString("Profiler"), this._paintProfilerView);
  72 }
  73
  74 WebInspector.LayersPanel.DetailsViewTabs = {
  75     Details: "details",
  76     Profiler: "profiler"
  77 };
  78
  79 WebInspector.LayersPanel.prototype = {
  80     wasShown: function()
  81     {
  82         WebInspector.Panel.prototype.wasShown.call(this);
  83         this.sidebarTree.element.focus();
  84         this._model.enable();
  85     },
  86
  87     willHide: function()
  88     {
  89         this._model.disable();
  90         WebInspector.Panel.prototype.willHide.call(this);
  91     },
  92
  93     /**
  94      * @param {!WebInspector.DeferredLayerTree} deferredLayerTree
  95      */
  96     _showLayerTree: function(deferredLayerTree)
  97     {
  98         deferredLayerTree.resolve(onLayersReady.bind(this));
  99         /**
 100          * @param {!WebInspector.LayerTreeBase} layerTree
 101          * @this {WebInspector.LayersPanel} this
 102          */
 103         function onLayersReady(layerTree)
 104         {
 105             this._model.setLayerTree(layerTree);
 106         }
 107     },
 108
 109     _onLayerTreeUpdated: function()
 110     {
 111         var layerTree = this._model.layerTree();
 112         this._layers3DView.setLayerTree(layerTree);
 113         this._layerTreeOutline.update(layerTree);
 114         if (this._currentlySelectedLayer && (!layerTree || !layerTree.layerById(this._currentlySelectedLayer.layer.id())))
 115             this._selectObject(null);
 116         if (this._currentlyHoveredLayer && (!layerTree || !layerTree.layerById(this._currentlyHoveredLayer.layer.id())))
 117             this._hoverObject(null);
 118         this._layerDetailsView.update();
 119     },
 120
 121     /**
 122      * @param {!WebInspector.Event} event
 123      */
 124     _onLayerPainted: function(event)
 125     {
 126         this._layers3DView.setLayerTree(this._model.layerTree());
 127         if (this._currentlySelectedLayer && this._currentlySelectedLayer.layer === event.data)
 128             this._layerDetailsView.update();
 129     },
 130
 131     /**
 132      * @param {!WebInspector.Event} event
 133      */
 134     _onObjectSelected: function(event)
 135     {
 136         var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
 137         this._selectObject(activeObject);
 138     },
 139
 140     /**
 141      * @param {!WebInspector.Event} event
 142      */
 143     _onObjectHovered: function(event)
 144     {
 145         var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
 146         this._hoverObject(activeObject);
 147     },
 148
 149     /**
 150      * @param {!WebInspector.Event} event
 151      */
 152     _onSnapshotRequested: function(event)
 153     {
 154         var layer = /** @type {!WebInspector.Layer} */ (event.data);
 155         this._tabbedPane.selectTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler);
 156         this._paintProfilerView.profileLayer(layer);
 157     },
 158
 159     /**
 160      * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
 161      */
 162     _selectObject: function(activeObject)
 163     {
 164         var layer = activeObject && activeObject.layer;
 165         if (this._currentlySelectedLayer === activeObject)
 166             return;
 167         this._currentlySelectedLayer = activeObject;
 168         var node = layer ? layer.nodeForSelfOrAncestor() : null;
 169         if (node)
 170             node.highlightForTwoSeconds();
 171         else
 172             this._target.domModel.hideDOMNodeHighlight();
 173         this._layerTreeOutline.selectLayer(layer);
 174         this._layers3DView.selectObject(activeObject);
 175         this._layerDetailsView.setObject(activeObject);
 176     },
 177
 178     /**
 179      * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
 180      */
 181     _hoverObject: function(activeObject)
 182     {
 183         var layer = activeObject && activeObject.layer;
 184         if (this._currentlyHoveredLayer === activeObject)
 185             return;
 186         this._currentlyHoveredLayer = activeObject;
 187         var node = layer ? layer.nodeForSelfOrAncestor() : null;
 188         if (node)
 189             node.highlight();
 190         else
 191             this._target.domModel.hideDOMNodeHighlight();
 192         this._layerTreeOutline.hoverLayer(layer);
 193         this._layers3DView.hoverObject(activeObject);
 194     },
 195
 196     __proto__: WebInspector.PanelWithSidebarTree.prototype
 197 }
 198
 199 /**
 200  * @constructor
 201  * @implements {WebInspector.Revealer}
 202  */
 203 WebInspector.LayersPanel.LayerTreeRevealer = function()
 204 {
 205 }
 206
 207 WebInspector.LayersPanel.LayerTreeRevealer.prototype = {
 208     /**
 209      * @param {!Object} snapshotData
 210      */
 211     reveal: function(snapshotData)
 212     {
 213         if (!(snapshotData instanceof WebInspector.DeferredLayerTree))
 214             return;
 215         var panel = /** @type {?WebInspector.LayersPanel} */ (WebInspector.inspectorView.showPanel("layers"));
 216         if (panel)
 217             panel._showLayerTree(/** @type {!WebInspector.DeferredLayerTree} */ (snapshotData));
 218     }
 219 }