src/third_party/WebKit/Source/devtools/front_end/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 importScript("LayerTreeModel.js");
  32 importScript("LayerTree.js");
  33 importScript("Layers3DView.js");
  34 importScript("LayerDetailsView.js");
  35 importScript("PaintProfilerView.js");
  36
  37 /**
  38  * @constructor
  39  * @extends {WebInspector.PanelWithSidebarTree}
  40  */
  41 WebInspector.LayersPanel = function()
  42 {
  43     WebInspector.PanelWithSidebarTree.call(this, "layers", 225);
  44     this.registerRequiredCSS("layersPanel.css");
  45
  46     this.sidebarElement().classList.add("outline-disclosure");
  47     this.sidebarTree.element.classList.remove("sidebar-tree");
  48
  49     this._model = new WebInspector.LayerTreeModel();
  50     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._onLayerTreeUpdated, this);
  51     this._currentlySelectedLayer = null;
  52     this._currentlyHoveredLayer = null;
  53
  54     this._layerTree = new WebInspector.LayerTree(this._model, this.sidebarTree);
  55     this._layerTree.addEventListener(WebInspector.LayerTree.Events.LayerSelected, this._onLayerSelected, this);
  56     this._layerTree.addEventListener(WebInspector.LayerTree.Events.LayerHovered, this._onLayerHovered, this);
  57
  58     this._rightSplitView = new WebInspector.SplitView(false, true, "layerDetailsSplitView");
  59     this._rightSplitView.show(this.mainElement());
  60
  61     this._layers3DView = new WebInspector.Layers3DView(this._model);
  62     this._layers3DView.show(this._rightSplitView.mainElement());
  63     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSelected, this._onLayerSelected, this);
  64     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerHovered, this._onLayerHovered, this);
  65     this._layers3DView.addEventListener(WebInspector.Layers3DView.Events.LayerSnapshotRequested, this._onSnapshotRequested, this);
  66
  67     this._tabbedPane = new WebInspector.TabbedPane();
  68     this._tabbedPane.show(this._rightSplitView.sidebarElement());
  69
  70     this._layerDetailsView = new WebInspector.LayerDetailsView(this._model);
  71     this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Details, WebInspector.UIString("Details"), this._layerDetailsView);
  72     this._paintProfilerView = new WebInspector.PaintProfilerView(this._model, this._layers3DView);
  73     this._tabbedPane.appendTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler, WebInspector.UIString("Profiler"), this._paintProfilerView);
  74 }
  75
  76 WebInspector.LayersPanel.DetailsViewTabs = {
  77     Details: "details",
  78     Profiler: "profiler"
  79 };
  80
  81 WebInspector.LayersPanel.prototype = {
  82     wasShown: function()
  83     {
  84         WebInspector.Panel.prototype.wasShown.call(this);
  85         this.sidebarTree.element.focus();
  86         this._model.enable();
  87     },
  88
  89     willHide: function()
  90     {
  91         this._model.disable();
  92         WebInspector.Panel.prototype.willHide.call(this);
  93     },
  94
  95     _onLayerTreeUpdated: function()
  96     {
  97         if (this._currentlySelectedLayer && !this._model.layerById(this._currentlySelectedLayer.id()))
  98             this._selectLayer(null);
  99         if (this._currentlyHoveredLayer && !this._model.layerById(this._currentlyHoveredLayer.id()))
 100             this._hoverLayer(null);
 101     },
 102
 103     /**
 104      * @param {!WebInspector.Event} event
 105      */
 106     _onLayerSelected: function(event)
 107     {
 108         var layer = /** @type {!WebInspector.Layer} */ (event.data);
 109         this._selectLayer(layer);
 110     },
 111
 112     /**
 113      * @param {!WebInspector.Event} event
 114      */
 115     _onLayerHovered: function(event)
 116     {
 117         var layer = /** @type WebInspector.Layer */ (event.data);
 118         this._hoverLayer(layer);
 119     },
 120
 121     /**
 122      * @param {!WebInspector.Event} event
 123      */
 124     _onSnapshotRequested: function(event)
 125     {
 126         var layer = /** @type {!WebInspector.Layer} */ (event.data);
 127         this._tabbedPane.selectTab(WebInspector.LayersPanel.DetailsViewTabs.Profiler);
 128         this._paintProfilerView.profile(layer);
 129     },
 130
 131     /**
 132      * @param {?WebInspector.Layer} layer
 133      */
 134     _selectLayer: function(layer)
 135     {
 136         if (this._currentlySelectedLayer === layer)
 137             return;
 138         this._currentlySelectedLayer = layer;
 139         var nodeId = layer && layer.nodeIdForSelfOrAncestor();
 140         if (nodeId)
 141             WebInspector.domAgent.highlightDOMNodeForTwoSeconds(nodeId);
 142         else
 143             WebInspector.domAgent.hideDOMNodeHighlight();
 144         this._layerTree.selectLayer(layer);
 145         this._layers3DView.selectLayer(layer);
 146         this._layerDetailsView.setLayer(layer);
 147     },
 148
 149     /**
 150      * @param {?WebInspector.Layer} layer
 151      */
 152     _hoverLayer: function(layer)
 153     {
 154         if (this._currentlyHoveredLayer === layer)
 155             return;
 156         this._currentlyHoveredLayer = layer;
 157         var nodeId = layer && layer.nodeIdForSelfOrAncestor();
 158         if (nodeId)
 159             WebInspector.domAgent.highlightDOMNode(nodeId);
 160         else
 161             WebInspector.domAgent.hideDOMNodeHighlight();
 162         this._layerTree.hoverLayer(layer);
 163         this._layers3DView.hoverLayer(layer);
 164     },
 165
 166     __proto__: WebInspector.PanelWithSidebarTree.prototype
 167 }