Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (227243 => 227244)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-01-19 23:01:11 UTC (rev 227243)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-01-19 23:18:44 UTC (rev 227244)
@@ -1,3 +1,41 @@
+2018-01-19 Ross Kirsling <[email protected]>
+
+ Web Inspector: Layers tab should do away with popovers (if possible)
+ https://bugs.webkit.org/show_bug.cgi?id=181805
+
+ Reviewed by Matt Baker.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ Remove superfluous colon from a string.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/LayerDetailsSidebarPanel.css:
+ * UserInterface/Views/Layers3DContentView.css: Added.
+ Remove popover styling from sidebar, add new file with similar styling for canvas overlay.
+
+ * UserInterface/Views/LayerDetailsSidebarPanel.js:
+ (WI.LayerDetailsSidebarPanel):
+ (WI.LayerDetailsSidebarPanel.prototype.selectNodeByLayerId):
+ (WI.LayerDetailsSidebarPanel.prototype._dataGridSelectedNodeChanged):
+ (WI.LayerDetailsSidebarPanel.prototype._updateLayers):
+ (WI.LayerDetailsSidebarPanel.prototype._updateBottomBar):
+ (WI.LayerDetailsSidebarPanel.prototype.willDismissPopover): Deleted.
+ (WI.LayerDetailsSidebarPanel.prototype._showPopoverForSelectedNode): Deleted.
+ (WI.LayerDetailsSidebarPanel.prototype._presentPopover): Deleted.
+ (WI.LayerDetailsSidebarPanel.prototype._contentForPopover): Deleted.
+ (WI.LayerDetailsSidebarPanel.prototype._populateListOfCompositingReasons.addReason): Deleted.
+ (WI.LayerDetailsSidebarPanel.prototype._populateListOfCompositingReasons): Deleted.
+ * UserInterface/Views/Layers3DContentView.js:
+ (WI.Layers3DContentView):
+ (WI.Layers3DContentView.prototype.shown):
+ (WI.Layers3DContentView.prototype.selectLayerById):
+ (WI.Layers3DContentView.prototype._canvasMouseDown):
+ (WI.Layers3DContentView.prototype._buildLayerInfoElement):
+ (WI.Layers3DContentView.prototype._updateLayerInfoElement):
+ (WI.Layers3DContentView.prototype._updateReasonsList):
+ Remove popover from sidebar table, overlay div with same data arrangement on top of the canvas.
+ Also reverse the fix from r226671 since the visualization is no longer unusable without the sidebar!
+
2018-01-19 Matt Baker <[email protected]>
Web Inspector: Canvas Tab: Multiple "waiting for frames" messages displayed
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (227243 => 227244)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2018-01-19 23:01:11 UTC (rev 227243)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2018-01-19 23:18:44 UTC (rev 227244)
@@ -731,7 +731,7 @@
localizedStrings["Radius Y"] = "Radius Y";
localizedStrings["Range Issue"] = "Range Issue";
localizedStrings["Readonly"] = "Readonly";
-localizedStrings["Reasons for compositing:"] = "Reasons for compositing:";
+localizedStrings["Reasons for compositing"] = "Reasons for compositing";
localizedStrings["Recently Closed Tabs"] = "Recently Closed Tabs";
localizedStrings["Recording"] = "Recording";
localizedStrings["Recording %d"] = "Recording %d";
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (227243 => 227244)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2018-01-19 23:01:11 UTC (rev 227243)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2018-01-19 23:18:44 UTC (rev 227244)
@@ -110,6 +110,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.css (227243 => 227244)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.css 2018-01-19 23:01:11 UTC (rev 227243)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.css 2018-01-19 23:18:44 UTC (rev 227244)
@@ -74,33 +74,3 @@
.panel.details.layer .layers-memory-label {
justify-content: flex-end;
}
-
-.layer-popover {
- max-width: 300px;
- padding: 5px;
-}
-
-.layer-popover > div {
- font-size: 1.1em;
- font-weight: bold;
-}
-
-.layer-popover table {
- margin: 10px 0;
-}
-.layer-popover td {
- padding: 0 5px;
- line-height: 1.3em;
-}
-
-.layer-popover ul {
- margin: 10px 0 0;
- padding: 0;
-
- -webkit-margin-start: 1em;
- -webkit-padding-start: 1em;
-}
-
-.layer-popover li {
- line-height: 1.3em;
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.js (227243 => 227244)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.js 2018-01-19 23:01:11 UTC (rev 227243)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.js 2018-01-19 23:18:44 UTC (rev 227244)
@@ -40,7 +40,6 @@
this._bottomBar = null;
this._layersCountLabel = null;
this._layersMemoryLabel = null;
- this._popover = null;
}
// Public
@@ -56,27 +55,16 @@
return !!layers.length;
}
- willDismissPopover()
- {
- this._popover = null;
- }
-
selectNodeByLayerId(layerId)
{
- if (!this.parentSidebar)
- return;
-
let node = this._dataGridNodesByLayerId.get(layerId);
if (node === this._dataGrid.selectedNode)
return;
const suppressEvent = true;
- if (node) {
- this.parentSidebar.selectedSidebarPanel = this;
- this.parentSidebar.collapsed = false;
+ if (node)
node.revealAndSelect(suppressEvent);
- this._showPopoverForSelectedNode();
- } else if (this._dataGrid.selectedNode)
+ else if (this._dataGrid.selectedNode)
this._dataGrid.selectedNode.deselect(suppressEvent);
}
@@ -151,8 +139,6 @@
{
let layerId = this._dataGrid.selectedNode ? this._dataGrid.selectedNode.layer.layerId : null;
this.dispatchEventToListeners(WI.LayerDetailsSidebarPanel.Event.SelectedLayerChanged, {layerId});
-
- this._showPopoverForSelectedNode();
}
_dataGridMouseMove(event)
@@ -188,9 +174,6 @@
_updateLayers(newLayers)
{
- if (this._popover)
- this._popover.dismiss();
-
this._updateDataGrid(newLayers);
this._updateBottomBar(newLayers);
@@ -234,132 +217,6 @@
let totalMemory = newLayers.reduce((total, layer) => total + (layer.memory || 0), 0);
this._layersMemoryLabel.textContent = WI.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
}
-
- _showPopoverForSelectedNode()
- {
- let dataGridNode = this._dataGrid.selectedNode;
- if (!dataGridNode)
- return;
-
- this._contentForPopover(dataGridNode.layer, (content) => {
- if (dataGridNode !== this._dataGrid.selectedNode)
- return;
-
- this._popover = this._popover || new WI.Popover(this);
- this._popover.windowResizeHandler = () => { this._presentPopover(); };
-
- this._presentPopover(content);
- });
- }
-
- _presentPopover(content)
- {
- let targetFrame = WI.Rect.rectFromClientRect(this._dataGrid.selectedNode.element.getBoundingClientRect());
- if (content)
- this._popover.presentNewContentWithFrame(content, targetFrame.pad(2), [WI.RectEdge.MIN_X]);
- else
- this._popover.present(targetFrame.pad(2), [WI.RectEdge.MIN_X]);
- }
-
- _contentForPopover(layer, callback)
- {
- let content = document.createElement("div");
- content.className = "layer-popover";
-
- let dimensionsTitle = content.appendChild(document.createElement("div"));
- dimensionsTitle.textContent = WI.UIString("Dimensions");
-
- let dimensionsTable = content.appendChild(document.createElement("table"));
-
- let compositedRow = dimensionsTable.appendChild(document.createElement("tr"));
- let compositedLabel = compositedRow.appendChild(document.createElement("td"));
- let compositedValue = compositedRow.appendChild(document.createElement("td"));
- compositedLabel.textContent = WI.UIString("Composited");
- compositedValue.textContent = `${layer.compositedBounds.width}px ${multiplicationSign} ${layer.compositedBounds.height}px`;
-
- let visibleRow = dimensionsTable.appendChild(document.createElement("tr"));
- let visibleLabel = visibleRow.appendChild(document.createElement("td"));
- let visibleValue = visibleRow.appendChild(document.createElement("td"));
- visibleLabel.textContent = WI.UIString("Visible");
- visibleValue.textContent = `${layer.bounds.width}px ${multiplicationSign} ${layer.bounds.height}px`;
-
- let reasonsTitle = content.appendChild(document.createElement("div"));
- reasonsTitle.textContent = WI.UIString("Reasons for compositing:");
-
- let list = content.appendChild(document.createElement("ul"));
-
- WI.layerTreeManager.reasonsForCompositingLayer(layer, (compositingReasons) => {
- if (!isEmptyObject(compositingReasons))
- this._populateListOfCompositingReasons(list, compositingReasons);
-
- callback(content);
- });
-
- return content;
- }
-
- _populateListOfCompositingReasons(list, compositingReasons)
- {
- function addReason(reason) {
- let item = list.appendChild(document.createElement("li"));
- item.textContent = reason;
- }
-
- if (compositingReasons.transform3D)
- addReason(WI.UIString("Element has a 3D transform"));
- if (compositingReasons.video)
- addReason(WI.UIString("Element is <video>"));
- if (compositingReasons.canvas)
- addReason(WI.UIString("Element is <canvas>"));
- if (compositingReasons.plugin)
- addReason(WI.UIString("Element is a plug-in"));
- if (compositingReasons.iFrame)
- addReason(WI.UIString("Element is <iframe>"));
- if (compositingReasons.backfaceVisibilityHidden)
- addReason(WI.UIString("Element has “backface-visibility: hidden” style"));
- if (compositingReasons.clipsCompositingDescendants)
- addReason(WI.UIString("Element clips compositing descendants"));
- if (compositingReasons.animation)
- addReason(WI.UIString("Element is animated"));
- if (compositingReasons.filters)
- addReason(WI.UIString("Element has CSS filters applied"));
- if (compositingReasons.positionFixed)
- addReason(WI.UIString("Element has “position: fixed” style"));
- if (compositingReasons.positionSticky)
- addReason(WI.UIString("Element has “position: sticky” style"));
- if (compositingReasons.overflowScrollingTouch)
- addReason(WI.UIString("Element has “-webkit-overflow-scrolling: touch” style"));
- if (compositingReasons.stacking)
- addReason(WI.UIString("Element may overlap another compositing element"));
- if (compositingReasons.overlap)
- addReason(WI.UIString("Element overlaps other compositing element"));
- if (compositingReasons.negativeZIndexChildren)
- addReason(WI.UIString("Element has children with a negative z-index"));
- if (compositingReasons.transformWithCompositedDescendants)
- addReason(WI.UIString("Element has a 2D transform and composited descendants"));
- if (compositingReasons.opacityWithCompositedDescendants)
- addReason(WI.UIString("Element has opacity applied and composited descendants"));
- if (compositingReasons.maskWithCompositedDescendants)
- addReason(WI.UIString("Element is masked and composited descendants"));
- if (compositingReasons.reflectionWithCompositedDescendants)
- addReason(WI.UIString("Element has a reflection and composited descendants"));
- if (compositingReasons.filterWithCompositedDescendants)
- addReason(WI.UIString("Element has CSS filters applied and composited descendants"));
- if (compositingReasons.blendingWithCompositedDescendants)
- addReason(WI.UIString("Element has CSS blending applied and composited descendants"));
- if (compositingReasons.isolatesCompositedBlendingDescendants)
- addReason(WI.UIString("Element is a stacking context and has composited descendants with CSS blending applied"));
- if (compositingReasons.perspective)
- addReason(WI.UIString("Element has perspective applied"));
- if (compositingReasons.preserve3D)
- addReason(WI.UIString("Element has “transform-style: preserve-3d” style"));
- if (compositingReasons.willChange)
- addReason(WI.UIString("Element has “will-change” style with includes opacity, transform, transform-style, perspective, filter or backdrop-filter"));
- if (compositingReasons.root)
- addReason(WI.UIString("Element is the root element"));
- if (compositingReasons.blending)
- addReason(WI.UIString("Element has “blend-mode” style"));
- }
};
WI.LayerDetailsSidebarPanel.Event = {
Added: trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.css (0 => 227244)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.css 2018-01-19 23:18:44 UTC (rev 227244)
@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2018 Sony Interactive Entertainment Inc.
+ *
+ * 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.
+ */
+
+.content-view.layers-3d .layer-info {
+ display: flex;
+ position: absolute;
+ top: 0;
+ max-width: 300px;
+ max-height: calc(100% - 20px);
+ margin: 10px;
+ border-radius: 5px;
+ background-color: var(--panel-background-color);
+ box-shadow: 0 1px 5px hsla(0, 0%, 0%, 0.5);
+}
+
+.content-view.layers-3d .layer-info .content {
+ flex: 1;
+ margin: 10px;
+ overflow-y: auto;
+}
+
+.content-view.layers-3d .layer-info .content > div {
+ font-size: 12px;
+ font-weight: bold;
+}
+
+.content-view.layers-3d .layer-info table {
+ margin: 10px 0;
+}
+.content-view.layers-3d .layer-info td {
+ padding: 0 5px;
+ line-height: 14px;
+ vertical-align: top;
+}
+
+.content-view.layers-3d .layer-info ul {
+ margin: 10px 0 0;
+ padding: 0;
+
+ -webkit-margin-start: 11px;
+ -webkit-padding-start: 11px;
+}
+
+.content-view.layers-3d .layer-info li {
+ line-height: 14px;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js (227243 => 227244)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js 2018-01-19 23:01:11 UTC (rev 227243)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js 2018-01-19 23:18:44 UTC (rev 227244)
@@ -55,6 +55,11 @@
this._mouse = null;
this._animationFrameRequestId = null;
this._documentNode = null;
+
+ this._layerInfoElement = null;
+ this._compositedDimensionsElement = null;
+ this._visibleDimensionsElement = null;
+ this._reasonsListElement = null;
}
// Public
@@ -77,7 +82,7 @@
this.updateLayout();
WI.layerTreeManager.addEventListener(WI.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
-
+
if (this.didInitialLayout)
this._animate();
}
@@ -101,6 +106,7 @@
{
let layerGroup = this._layerGroupsById.get(layerId);
this._updateLayerGroupSelection(layerGroup);
+ this._updateLayerInfoElement();
this._centerOnSelection();
}
@@ -287,6 +293,7 @@
}
this._updateLayerGroupSelection(selection);
+ this._updateLayerInfoElement();
let layerId = selection ? selection.userData.layer.layerId : null;
this.dispatchEventToListeners(WI.Layers3DContentView.Event.SelectedLayerChanged, {layerId});
@@ -361,6 +368,118 @@
this._compositingBordersButtonNavigationItem.activated = !this._compositingBordersButtonNavigationItem.activated;
PageAgent.setCompositingBordersVisible(this._compositingBordersButtonNavigationItem.activated);
}
+
+ _buildLayerInfoElement()
+ {
+ this._layerInfoElement = this._element.appendChild(document.createElement("div"));
+ this._layerInfoElement.classList.add("layer-info", "hidden");
+
+ let content = this._layerInfoElement.appendChild(document.createElement("div"));
+ content.className = "content";
+
+ let dimensionsTitle = content.appendChild(document.createElement("div"));
+ dimensionsTitle.textContent = WI.UIString("Dimensions");
+ let dimensionsTable = content.appendChild(document.createElement("table"));
+
+ let compositedRow = dimensionsTable.appendChild(document.createElement("tr"));
+ let compositedLabel = compositedRow.appendChild(document.createElement("td"));
+ compositedLabel.textContent = WI.UIString("Composited");
+ this._compositedDimensionsElement = compositedRow.appendChild(document.createElement("td"));
+
+ let visibleRow = dimensionsTable.appendChild(document.createElement("tr"));
+ let visibleLabel = visibleRow.appendChild(document.createElement("td"));
+ visibleLabel.textContent = WI.UIString("Visible");
+ this._visibleDimensionsElement = visibleRow.appendChild(document.createElement("td"));
+
+ let reasonsTitle = content.appendChild(document.createElement("div"));
+ reasonsTitle.textContent = WI.UIString("Reasons for compositing");
+ this._reasonsListElement = content.appendChild(document.createElement("ul"));
+ }
+
+ _updateLayerInfoElement()
+ {
+ if (!this._layerInfoElement)
+ this._buildLayerInfoElement();
+
+ if (!this._selectedLayerGroup) {
+ this._layerInfoElement.classList.add("hidden");
+ return;
+ }
+
+ let layer = this._selectedLayerGroup.userData.layer;
+ this._compositedDimensionsElement.textContent = `${layer.compositedBounds.width}px ${multiplicationSign} ${layer.compositedBounds.height}px`;
+ this._visibleDimensionsElement.textContent = `${layer.bounds.width}px ${multiplicationSign} ${layer.bounds.height}px`;
+
+ WI.layerTreeManager.reasonsForCompositingLayer(layer, (compositingReasons) => {
+ this._updateReasonsList(compositingReasons);
+ this._layerInfoElement.classList.remove("hidden");
+ });
+ }
+
+ _updateReasonsList(compositingReasons)
+ {
+ this._reasonsListElement.removeChildren();
+
+ let addReason = (reason) => {
+ let item = this._reasonsListElement.appendChild(document.createElement("li"));
+ item.textContent = reason;
+ };
+
+ if (compositingReasons.transform3D)
+ addReason(WI.UIString("Element has a 3D transform"));
+ if (compositingReasons.video)
+ addReason(WI.UIString("Element is <video>"));
+ if (compositingReasons.canvas)
+ addReason(WI.UIString("Element is <canvas>"));
+ if (compositingReasons.plugin)
+ addReason(WI.UIString("Element is a plug-in"));
+ if (compositingReasons.iFrame)
+ addReason(WI.UIString("Element is <iframe>"));
+ if (compositingReasons.backfaceVisibilityHidden)
+ addReason(WI.UIString("Element has “backface-visibility: hidden” style"));
+ if (compositingReasons.clipsCompositingDescendants)
+ addReason(WI.UIString("Element clips compositing descendants"));
+ if (compositingReasons.animation)
+ addReason(WI.UIString("Element is animated"));
+ if (compositingReasons.filters)
+ addReason(WI.UIString("Element has CSS filters applied"));
+ if (compositingReasons.positionFixed)
+ addReason(WI.UIString("Element has “position: fixed” style"));
+ if (compositingReasons.positionSticky)
+ addReason(WI.UIString("Element has “position: sticky” style"));
+ if (compositingReasons.overflowScrollingTouch)
+ addReason(WI.UIString("Element has “-webkit-overflow-scrolling: touch” style"));
+ if (compositingReasons.stacking)
+ addReason(WI.UIString("Element may overlap another compositing element"));
+ if (compositingReasons.overlap)
+ addReason(WI.UIString("Element overlaps other compositing element"));
+ if (compositingReasons.negativeZIndexChildren)
+ addReason(WI.UIString("Element has children with a negative z-index"));
+ if (compositingReasons.transformWithCompositedDescendants)
+ addReason(WI.UIString("Element has a 2D transform and composited descendants"));
+ if (compositingReasons.opacityWithCompositedDescendants)
+ addReason(WI.UIString("Element has opacity applied and composited descendants"));
+ if (compositingReasons.maskWithCompositedDescendants)
+ addReason(WI.UIString("Element is masked and composited descendants"));
+ if (compositingReasons.reflectionWithCompositedDescendants)
+ addReason(WI.UIString("Element has a reflection and composited descendants"));
+ if (compositingReasons.filterWithCompositedDescendants)
+ addReason(WI.UIString("Element has CSS filters applied and composited descendants"));
+ if (compositingReasons.blendingWithCompositedDescendants)
+ addReason(WI.UIString("Element has CSS blending applied and composited descendants"));
+ if (compositingReasons.isolatesCompositedBlendingDescendants)
+ addReason(WI.UIString("Element is a stacking context and has composited descendants with CSS blending applied"));
+ if (compositingReasons.perspective)
+ addReason(WI.UIString("Element has perspective applied"));
+ if (compositingReasons.preserve3D)
+ addReason(WI.UIString("Element has “transform-style: preserve-3d” style"));
+ if (compositingReasons.willChange)
+ addReason(WI.UIString("Element has “will-change” style with includes opacity, transform, transform-style, perspective, filter or backdrop-filter"));
+ if (compositingReasons.root)
+ addReason(WI.UIString("Element is the root element"));
+ if (compositingReasons.blending)
+ addReason(WI.UIString("Element has “blend-mode” style"));
+ }
};
WI.Layers3DContentView._zPadding = 3000;
