summaryrefslogtreecommitdiff
path: root/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js')
-rw-r--r--Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js436
1 files changed, 0 insertions, 436 deletions
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js b/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js
deleted file mode 100644
index fbe9ed036..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js
+++ /dev/null
@@ -1,436 +0,0 @@
-/*
- * Copyright (C) 2013 Apple 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:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. 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.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS 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 APPLE INC. OR ITS 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.
- */
-
-WebInspector.LayerTreeSidebarPanel = function() {
- WebInspector.DOMDetailsSidebarPanel.call(this, "layer-tree", WebInspector.UIString("Layers"), WebInspector.UIString("Layer"), "Images/NavigationItemLayers.svg", "3");
-
- this._dataGridNodesByLayerId = {};
-
- this.element.classList.add(WebInspector.LayerTreeSidebarPanel.StyleClassName);
-
- WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
-
- window.addEventListener("resize", this._windowResized.bind(this));
-
- // Add a container that will host all sections as a vertical stack.
- this._container = this.element.appendChild(document.createElement("div"));
- this._container.className = "box-container";
-
- this._buildLayerInfoSection();
- this._buildDataGridSection();
- this._buildBottomBar();
-};
-
-WebInspector.LayerTreeSidebarPanel.StyleClassName = "layer-tree";
-
-WebInspector.LayerTreeSidebarPanel.prototype = {
- constructor: WebInspector.LayerTreeSidebarPanel,
-
- // DetailsSidebarPanel Overrides.
-
- shown: function()
- {
- WebInspector.layerTreeManager.addEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
-
- console.assert(this.parentSidebar);
-
- this.needsRefresh();
-
- WebInspector.DOMDetailsSidebarPanel.prototype.shown.call(this);
- },
-
- hidden: function()
- {
- WebInspector.layerTreeManager.removeEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
-
- WebInspector.DOMDetailsSidebarPanel.prototype.hidden.call(this);
- },
-
- refresh: function()
- {
- if (!this.domNode)
- return;
-
- WebInspector.layerTreeManager.layersForNode(this.domNode, function(layerForNode, childLayers) {
- this._unfilteredChildLayers = childLayers;
- this._updateDisplayWithLayers(layerForNode, childLayers);
- }.bind(this));
- },
-
- // DOMDetailsSidebarPanel Overrides
-
- supportsDOMNode: function(nodeToInspect)
- {
- return WebInspector.layerTreeManager.supported && nodeToInspect.nodeType() === Node.ELEMENT_NODE;
- },
-
- // Private
-
- _layerTreeDidChange: function(event)
- {
- this.needsRefresh();
- },
-
- _showShadowDOMSettingChanged: function(event)
- {
- if (this.selected)
- this._updateDisplayWithLayers(this._layerForNode, this._unfilteredChildLayers);
- },
-
- _windowResized: function(event)
- {
- if (this._popover && this._popover.visible)
- this._updatePopoverForSelectedNode();
- },
-
- _buildLayerInfoSection: function()
- {
- var rows = this._layerInfoRows = {};
- var rowsArray = [];
-
- rowsArray.push(rows["Width"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width")));
- rowsArray.push(rows["Height"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height")));
- rowsArray.push(rows["Paints"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Paints")));
- rowsArray.push(rows["Memory"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Memory")));
-
- this._layerInfoGroup = new WebInspector.DetailsSectionGroup(rowsArray);
-
- var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Layer Available"));
- emptyRow.showEmptyMessage();
- this._noLayerInformationGroup = new WebInspector.DetailsSectionGroup([emptyRow]);
-
- this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);
-
- this._container.appendChild(this._layerInfoSection.element);
- },
-
- _buildDataGridSection: function()
- {
- this._dataGrid = new WebInspector.LayerTreeDataGrid;
-
- this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
- this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedDataGridNodeChanged, this);
-
- var element = this._dataGrid.element;
- element.addEventListener("focus", this._dataGridGainedFocus.bind(this), false);
- element.addEventListener("blur", this._dataGridLostFocus.bind(this), false);
- element.addEventListener("click", this._dataGridWasClicked.bind(this), false);
-
- this._childLayersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Child Layers"));
- var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
- var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);
-
- // Display it in the container with a class name so we can easily style it differently to other sections,
- // this specific section is meant to scale to fill the space available vertically.
- var element = this._container.appendChild(section.element);
- element.classList.add(section.identifier);
- },
-
- _buildBottomBar: function()
- {
- var bottomBar = this._container.appendChild(document.createElement("div"));
- bottomBar.className = "bottom-bar";
-
- this._layersCountLabel = bottomBar.appendChild(document.createElement("div"));
- this._layersCountLabel.className = "layers-count-label";
-
- this._layersMemoryLabel = bottomBar.appendChild(document.createElement("div"));
- this._layersMemoryLabel.className = "layers-memory-label";
- },
-
- _sortDataGrid: function()
- {
- var dataGrid = this._dataGrid;
-
- var nodes = dataGrid.children.slice();
- var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
- var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
-
- function comparator(a, b)
- {
- var item1 = a.layer[sortColumnIdentifier] || 0;
- var item2 = b.layer[sortColumnIdentifier] || 0;
- return sortDirection * (item1 - item2);
- };
-
- nodes.sort(comparator);
-
- dataGrid.setChildren(nodes);
-
- this._updatePopoverForSelectedNode();
- },
-
- _selectedDataGridNodeChanged: function()
- {
- if (this._dataGrid.selectedNode) {
- this._highlightSelectedNode();
- this._showPopoverForSelectedNode();
- } else {
- WebInspector.domTreeManager.hideDOMNodeHighlight();
- this._hidePopover();
- }
- },
-
- _dataGridGainedFocus: function(event)
- {
- this._highlightSelectedNode();
- this._showPopoverForSelectedNode();
- },
-
- _dataGridLostFocus: function(event)
- {
- WebInspector.domTreeManager.hideDOMNodeHighlight();
- this._hidePopover();
- },
-
- _dataGridWasClicked: function(event)
- {
- if (this._dataGrid.selectedNode && event.target.parentNode.classList.contains("filler"))
- this._dataGrid.selectedNode.deselect();
- },
-
- _highlightSelectedNode: function()
- {
- var dataGridNode = this._dataGrid.selectedNode;
- if (!dataGridNode)
- return;
-
- var layer = dataGridNode.layer;
- if (layer.isGeneratedContent || layer.isReflection || layer.isAnonymous)
- WebInspector.domTreeManager.highlightRect(layer.bounds, true);
- else
- WebInspector.domTreeManager.highlightDOMNode(layer.nodeId);
- },
-
- _updateDisplayWithLayers: function(layerForNode, childLayers)
- {
- if (!WebInspector.showShadowDOMSetting.value) {
- childLayers = childLayers.filter(function(layer) {
- return !layer.isInShadowTree;
- });
- }
-
- this._updateLayerInfoSection(layerForNode);
- this._updateDataGrid(layerForNode, childLayers);
- this._updateMetrics(layerForNode, childLayers);
-
- this._layerForNode = layerForNode;
- this._childLayers = childLayers;
- },
-
- _updateLayerInfoSection: function(layer)
- {
- const emDash = "\u2014";
-
- this._layerInfoSection.groups = layer ? [this._layerInfoGroup] : [this._noLayerInformationGroup];
-
- if (!layer)
- return;
-
- this._layerInfoRows["Memory"].value = Number.bytesToString(layer.memory);
- this._layerInfoRows["Width"].value = layer.compositedBounds.width + "px";
- this._layerInfoRows["Height"].value = layer.compositedBounds.height + "px";
- this._layerInfoRows["Paints"].value = layer.paintCount + "";
- },
-
- _updateDataGrid: function(layerForNode, childLayers)
- {
- var dataGrid = this._dataGrid;
-
- var mutations = WebInspector.layerTreeManager.layerTreeMutations(this._childLayers, childLayers);
-
- mutations.removals.forEach(function(layer) {
- var node = this._dataGridNodesByLayerId[layer.layerId];
- if (node) {
- dataGrid.removeChild(node);
- delete this._dataGridNodesByLayerId[layer.layerId];
- }
- }.bind(this));
-
- mutations.additions.forEach(function(layer) {
- var node = this._dataGridNodeForLayer(layer);
- if (node)
- dataGrid.appendChild(node);
- }.bind(this));
-
- mutations.preserved.forEach(function(layer) {
- var node = this._dataGridNodesByLayerId[layer.layerId];
- if (node)
- node.layer = layer;
- }.bind(this));
-
- this._sortDataGrid();
-
- this._childLayersRow.dataGrid = !isEmptyObject(childLayers) ? this._dataGrid : null;
- },
-
- _dataGridNodeForLayer: function(layer)
- {
- var node = new WebInspector.LayerTreeDataGridNode(layer);
-
- this._dataGridNodesByLayerId[layer.layerId] = node;
-
- return node;
- },
-
- _updateMetrics: function(layerForNode, childLayers)
- {
- var layerCount = 0;
- var totalMemory = 0;
-
- if (layerForNode) {
- layerCount++;
- totalMemory += layerForNode.memory || 0;
- }
-
- childLayers.forEach(function(layer) {
- layerCount++;
- totalMemory += layer.memory || 0;
- });
-
- this._layersCountLabel.textContent = WebInspector.UIString("Layer count: %d").format(layerCount);
- this._layersMemoryLabel.textContent = WebInspector.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
- },
-
- _showPopoverForSelectedNode: function()
- {
- var dataGridNode = this._dataGrid.selectedNode;
- if (!dataGridNode)
- return;
-
- this._contentForPopover(dataGridNode.layer, function(content) {
- if (dataGridNode === this._dataGrid.selectedNode)
- this._updatePopoverForSelectedNode(content);
- }.bind(this));
- },
-
- _updatePopoverForSelectedNode: function(content)
- {
- var dataGridNode = this._dataGrid.selectedNode;
- if (!dataGridNode)
- return;
-
- var popover = this._popover;
- if (!popover)
- popover = this._popover = new WebInspector.Popover;
-
- var targetFrame = WebInspector.Rect.rectFromClientRect(dataGridNode.element.getBoundingClientRect());
-
- if (content)
- popover.content = content;
-
- popover.present(targetFrame.pad(2), [WebInspector.RectEdge.MIN_X]);
- },
-
- _hidePopover: function()
- {
- if (this._popover)
- this._popover.dismiss();
- },
-
- _contentForPopover: function(layer, callback)
- {
- var content = document.createElement("div");
- content.className = "layer-tree-popover";
-
- content.appendChild(document.createElement("p")).textContent = WebInspector.UIString("Reasons for compositing:");
-
- var list = content.appendChild(document.createElement("ul"));
-
- WebInspector.layerTreeManager.reasonsForCompositingLayer(layer, function(compositingReasons) {
- if (isEmptyObject(compositingReasons)) {
- callback(content);
- return;
- }
-
- this._populateListOfCompositingReasons(list, compositingReasons);
-
- callback(content);
- }.bind(this));
-
- return content;
- },
-
- _populateListOfCompositingReasons: function(list, compositingReasons)
- {
- function addReason(reason)
- {
- list.appendChild(document.createElement("li")).textContent = reason;
- }
-
- if (compositingReasons.transform3D)
- addReason(WebInspector.UIString("Element has a 3D transform"));
- if (compositingReasons.video)
- addReason(WebInspector.UIString("Element is <video>"));
- if (compositingReasons.canvas)
- addReason(WebInspector.UIString("Element is <canvas>"));
- if (compositingReasons.plugin)
- addReason(WebInspector.UIString("Element is a plug-in"));
- if (compositingReasons.iFrame)
- addReason(WebInspector.UIString("Element is <iframe>"));
- if (compositingReasons.backfaceVisibilityHidden)
- addReason(WebInspector.UIString("Element has “backface-visibility: hidden” style"));
- if (compositingReasons.clipsCompositingDescendants)
- addReason(WebInspector.UIString("Element clips compositing descendants"));
- if (compositingReasons.animation)
- addReason(WebInspector.UIString("Element is animated"));
- if (compositingReasons.filters)
- addReason(WebInspector.UIString("Element has CSS filters applied"));
- if (compositingReasons.positionFixed)
- addReason(WebInspector.UIString("Element has “position: fixed” style"));
- if (compositingReasons.positionSticky)
- addReason(WebInspector.UIString("Element has “position: sticky” style"));
- if (compositingReasons.overflowScrollingTouch)
- addReason(WebInspector.UIString("Element has “-webkit-overflow-scrolling: touch” style"));
- if (compositingReasons.stacking)
- addReason(WebInspector.UIString("Element establishes a stacking context"));
- if (compositingReasons.overlap)
- addReason(WebInspector.UIString("Element overlaps other compositing element"));
- if (compositingReasons.negativeZIndexChildren)
- addReason(WebInspector.UIString("Element has children with a negative z-index"));
- if (compositingReasons.transformWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has a 2D transform and composited descendants"));
- if (compositingReasons.opacityWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has opacity applied and composited descendants"));
- if (compositingReasons.maskWithCompositedDescendants)
- addReason(WebInspector.UIString("Element is masked and composited descendants"));
- if (compositingReasons.reflectionWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has a reflection and composited descendants"));
- if (compositingReasons.filterWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has CSS filters applied and composited descendants"));
- if (compositingReasons.blendingWithCompositedDescendants)
- addReason(WebInspector.UIString("Element has CSS blending applied and composited descendants"));
- if (compositingReasons.perspective)
- addReason(WebInspector.UIString("Element has perspective applied"));
- if (compositingReasons.preserve3D)
- addReason(WebInspector.UIString("Element has “transform-style: preserve-3d” style"));
- if (compositingReasons.root)
- addReason(WebInspector.UIString("Element is the root element"));
- if (compositingReasons.blending)
- addReason(WebInspector.UIString("Element has “blend-mode” style"));
- }
-};
-
-WebInspector.LayerTreeSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;