Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (261236 => 261237)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-05-06 17:14:27 UTC (rev 261237)
@@ -1,3 +1,36 @@
+2020-05-06 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Layers: the text at the bottom of the details sidebar can get squished
+ https://bugs.webkit.org/show_bug.cgi?id=211486
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Views/Sidebar.js:
+ (WI.Sidebar.prototype.get minimumWidth):
+ Ask both the `this._navigationBar` and `this._selectedSidebarPanel` instead of just one.
+
+ * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
+ (WI.GeneralStyleDetailsSidebarPanel.prototype.get minimumWidth): Added.
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ (WI.ComputedStyleDetailsPanel.prototype.get minimumWidth): Addede.
+ * UserInterface/Views/BoxModelDetailsSectionRow.js:
+ (WI.BoxModelDetailsSectionRow):
+ (WI.BoxModelDetailsSectionRow.prototype.get minimumWidth): Added.
+ (WI.BoxModelDetailsSectionRow.prototype._updateMetrics):
+ * UserInterface/Views/BoxModelDetailsSectionRow.css:
+ (.details-section .row.box-model):
+ Keep track of the outermost box and provide a way to report its width.
+
+ * UserInterface/Views/LayerDetailsSidebarPanel.js:
+ (WI.LayerDetailsSidebarPanel):
+ (WI.LayerDetailsSidebarPanel.prototype.get minimumWidth): Added.
+ (WI.LayerDetailsSidebarPanel.prototype._buildBottomBar):
+ (WI.LayerDetailsSidebarPanel.prototype._updateBottomBar):
+ * UserInterface/Views/LayerDetailsSidebarPanel.css:
+ (.panel.details.layer .bottom-bar):
+ (.panel.details.layer .bottom-bar > div):
+ Cache the width of the items in the bottom bar and use it in `get minimumWidth`.
+
2020-05-05 Devin Rousso <drou...@apple.com>
Web Inspector: REGRESSION(r239175): Source Maps: original source not shown when in nested folder
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css (261236 => 261237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2020-05-06 17:14:27 UTC (rev 261237)
@@ -24,7 +24,7 @@
*/
.details-section .row.box-model {
- padding: 6px;
+ padding-bottom: 6px;
text-align: center;
white-space: nowrap;
}
@@ -32,7 +32,7 @@
.details-section .row.box-model .box {
display: inline-block;
position: relative;
- margin: 3px;
+ margin: 3px; /* Keep this in sync with `WI.BoxModelDetailsSectionRow.prototype.get minimumWidth`. */
padding: 3px;
text-align: center;
vertical-align: middle;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js (261236 => 261237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js 2020-05-06 17:14:27 UTC (rev 261237)
@@ -32,6 +32,9 @@
this.element.classList.add("box-model");
this._nodeStyles = null;
+
+ this._outermostBox = null;
+ this._outermostBoxWidth = NaN;
}
// Public
@@ -53,6 +56,15 @@
this._refresh();
}
+ get minimumWidth()
+ {
+ if (isNaN(this._outermostBoxWidth) && this._outermostBox) {
+ const margin = 6; // Keep this in sync with `.details-section .row.box-model .box`.
+ this._outermostBoxWidth = this._outermostBox.realOffsetWidth + margin;
+ }
+ return this._outermostBoxWidth || 0;
+ }
+
// Private
_refresh()
@@ -235,7 +247,9 @@
return;
}
- var previousBox = null;
+ this._outermostBox = null;
+ this._outermostBoxWidth = NaN;
+
for (let name of ["content", "padding", "border", "margin", "position"]) {
if (name === "margin" && noMarginDisplayType[displayProperty.value])
@@ -303,8 +317,8 @@
boxElement.appendChild(document.createElement("br"));
boxElement.appendChild(leftElement);
- if (previousBox)
- boxElement.appendChild(previousBox);
+ if (this._outermostBox)
+ boxElement.appendChild(this._outermostBox);
boxElement.appendChild(rightElement);
boxElement.appendChild(document.createElement("br"));
@@ -318,10 +332,10 @@
boxElement.appendChild(borderBottomRightRadiusElement);
}
- previousBox = boxElement;
+ this._outermostBox = boxElement;
}
- metricsElement.appendChild(previousBox);
+ metricsElement.appendChild(this._outermostBox);
metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, ""), false);
this.hideEmptyMessage();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (261236 => 261237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2020-05-06 17:14:27 UTC (rev 261237)
@@ -37,6 +37,11 @@
// Public
+ get minimumWidth()
+ {
+ return this._boxModelDiagramRow.minimumWidth;
+ }
+
refresh(significantChange)
{
// We only need to do a rebuild on significant changes. Other changes are handled
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js (261236 => 261237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js 2020-05-06 17:14:27 UTC (rev 261237)
@@ -43,6 +43,11 @@
get panel() { return this._panel; }
+ get minimumWidth()
+ {
+ return Math.max(super.minimumWidth, this._panel.minimumWidth || 0);
+ }
+
supportsDOMNode(nodeToInspect)
{
return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.css (261236 => 261237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.css 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.css 2020-05-06 17:14:27 UTC (rev 261237)
@@ -55,6 +55,7 @@
.panel.details.layer .bottom-bar {
position: absolute;
display: flex;
+ justify-content: space-between;
bottom: 0;
height: var(--console-prompt-min-height);
width: 100%;
@@ -63,7 +64,6 @@
.panel.details.layer .bottom-bar > div {
display: flex;
- flex: 1;
padding: 4px 6px;
line-height: 20px;
white-space: nowrap;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.js (261236 => 261237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.js 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerDetailsSidebarPanel.js 2020-05-06 17:14:27 UTC (rev 261237)
@@ -40,6 +40,7 @@
this._dataGridNodesByLayerId = new Map;
this._bottomBar = null;
+ this._bottomBarWidth = NaN;
this._layersCountLabel = null;
this._layersMemoryLabel = null;
}
@@ -46,6 +47,18 @@
// Public
+ get minimumWidth()
+ {
+ let minimumWidth = super.minimumWidth;
+
+ if (isNaN(this._bottomBarWidth) && this._layersCountLabel && this._layersMemoryLabel)
+ this._bottomBarWidth = this._layersCountLabel.realOffsetWidth + this._layersMemoryLabel.realOffsetWidth;
+ if (!isNaN(this._bottomBarWidth))
+ minimumWidth = Math.max(minimumWidth, this._bottomBarWidth);
+
+ return minimumWidth;
+ }
+
inspect(objects)
{
if (!(objects instanceof Array))
@@ -126,6 +139,8 @@
this._layersMemoryLabel = this._bottomBar.appendChild(document.createElement("div"));
this._layersMemoryLabel.className = "layers-memory-label";
+
+ this._bottomBarWidth = NaN;
}
_sortDataGrid()
@@ -232,6 +247,8 @@
let totalMemory = newLayers.reduce((total, layer) => total + (layer.memory || 0), 0);
this._layersMemoryLabel.textContent = WI.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
+
+ this._bottomBarWidth = NaN;
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayersTabContentView.js (261236 => 261237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayersTabContentView.js 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayersTabContentView.js 2020-05-06 17:14:27 UTC (rev 261237)
@@ -29,6 +29,7 @@
{
super(LayersTabContentView.tabInfo(), {
detailsSidebarPanelConstructors: [WI.LayerDetailsSidebarPanel],
+ disableBackForward: true,
});
this._layerDetailsSidebarPanel = this.detailsSidebarPanels[0];
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js (261236 => 261237)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2020-05-06 16:30:35 UTC (rev 261236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2020-05-06 17:14:27 UTC (rev 261237)
@@ -148,11 +148,12 @@
get minimumWidth()
{
+ let minimumWidth = WI.Sidebar.AbsoluteMinimumWidth;
if (this._navigationBar)
- return Math.max(WI.Sidebar.AbsoluteMinimumWidth, this._navigationBar.minimumWidth);
+ minimumWidth = Math.max(minimumWidth, this._navigationBar.minimumWidth);
if (this._selectedSidebarPanel)
- return Math.max(WI.Sidebar.AbsoluteMinimumWidth, this._selectedSidebarPanel.minimumWidth);
- return WI.Sidebar.AbsoluteMinimumWidth;
+ minimumWidth = Math.max(minimumWidth, this._selectedSidebarPanel.minimumWidth);
+ return minimumWidth;
}
get maximumWidth()
