Title: [198645] trunk/Source/WebInspectorUI
- Revision
- 198645
- Author
- [email protected]
- Date
- 2016-03-24 15:20:52 -0700 (Thu, 24 Mar 2016)
Log Message
Web Inspector: Reduce forced layouts
https://bugs.webkit.org/show_bug.cgi?id=155852
<rdar://problem/25345197>
Patch by Joseph Pecoraro <[email protected]> on 2016-03-24
Reviewed by Timothy Hatcher.
* UserInterface/Views/DataGrid.js:
(WebInspector.DataGrid.prototype.layout):
(WebInspector.DataGrid.prototype._positionResizerElements):
(WebInspector.DataGrid.prototype._positionHeaderViews):
In loops, force layout once, calculate values, then set styles.
* UserInterface/Views/RadioButtonNavigationItem.js:
(WebInspector.RadioButtonNavigationItem):
(WebInspector.RadioButtonNavigationItem.prototype.updateLayout):
Force layout once to calculate the min-width, then never again.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (198644 => 198645)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-03-24 22:18:48 UTC (rev 198644)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-03-24 22:20:52 UTC (rev 198645)
@@ -1,5 +1,24 @@
2016-03-24 Joseph Pecoraro <[email protected]>
+ Web Inspector: Reduce forced layouts
+ https://bugs.webkit.org/show_bug.cgi?id=155852
+ <rdar://problem/25345197>
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/DataGrid.js:
+ (WebInspector.DataGrid.prototype.layout):
+ (WebInspector.DataGrid.prototype._positionResizerElements):
+ (WebInspector.DataGrid.prototype._positionHeaderViews):
+ In loops, force layout once, calculate values, then set styles.
+
+ * UserInterface/Views/RadioButtonNavigationItem.js:
+ (WebInspector.RadioButtonNavigationItem):
+ (WebInspector.RadioButtonNavigationItem.prototype.updateLayout):
+ Force layout once to calculate the min-width, then never again.
+
+2016-03-24 Joseph Pecoraro <[email protected]>
+
Web Inspector: Open Resource Dialog should not system beep when using Enter to select an item
https://bugs.webkit.org/show_bug.cgi?id=155853
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (198644 => 198645)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-03-24 22:18:48 UTC (rev 198644)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-03-24 22:20:52 UTC (rev 198645)
@@ -606,19 +606,27 @@
var headerTableColumnElements = this._headerTableColumnGroupElement.children;
var tableWidth = this._dataTableElement.offsetWidth;
var numColumns = headerTableColumnElements.length;
- for (var i = 0; i < numColumns; i++) {
- var headerCellElement = this._headerTableBodyElement.rows[0].cells[i]
+ var cells = this._headerTableBodyElement.rows[0].cells;
+
+ // Calculate widths.
+ var columnWidths = [];
+ for (var i = 0; i < numColumns; ++i) {
+ var headerCellElement = cells[i];
if (this._isColumnVisible(headerCellElement.columnIdentifier)) {
var columnWidth = headerCellElement.offsetWidth;
var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
- this._headerTableColumnGroupElement.children[i].style.width = percentWidth;
- this._dataTableColumnGroupElement.children[i].style.width = percentWidth;
- } else {
- this._headerTableColumnGroupElement.children[i].style.width = 0;
- this._dataTableColumnGroupElement.children[i].style.width = 0;
- }
+ columnWidths.push(percentWidth);
+ } else
+ columnWidths.push(0);
}
+ // Apply widths.
+ for (var i = 0; i < numColumns; i++) {
+ let percentWidth = columnWidths[i];
+ this._headerTableColumnGroupElement.children[i].style.width = percentWidth;
+ this._dataTableColumnGroupElement.children[i].style.width = percentWidth;
+ }
+
this._columnWidthsInitialized = true;
firstUpdate = true;
}
@@ -693,22 +701,31 @@
var previousResizer = null;
// Make n - 1 resizers for n columns.
- for (var i = 0; i < this.orderedColumns.length - 1; ++i) {
+ var numResizers = this.orderedColumns.length - 1;
+
+ // Calculate left offsets.
+ // Get the width of the cell in the first (and only) row of the
+ // header table in order to determine the width of the column, since
+ // it is not possible to query a column for its width.
+ var cells = this._headerTableBodyElement.rows[0].cells;
+ var columnWidths = [];
+ for (var i = 0; i < numResizers; ++i) {
+ left += cells[i].getBoundingClientRect().width;
+ columnWidths.push(left);
+ }
+
+ // Apply left offsets.
+ for (var i = 0; i < numResizers; ++i) {
// Create a new resizer if one does not exist for this column.
- if (i === this.resizers.length) {
- resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
- this.resizers[i] = resizer;
- // This resizer is associated with the column to its right.
+ // This resizer is associated with the column to its right.
+ var resizer = this.resizers[i];
+ if (!resizer) {
+ resizer = this.resizers[i] = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
this.element.appendChild(resizer.element);
}
+
+ left = columnWidths[i];
- var resizer = this.resizers[i];
-
- // Get the width of the cell in the first (and only) row of the
- // header table in order to determine the width of the column, since
- // it is not possible to query a column for its width.
- left += this._headerTableBodyElement.rows[0].cells[i].getBoundingClientRect().width;
-
if (this._isColumnVisible(this.orderedColumns[i])) {
resizer.element.style.removeProperty("display");
resizer.element.style.left = left + "px";
@@ -740,6 +757,11 @@
return;
let left = 0;
+ let headerViews = [];
+ let lefts = [];
+ let columnWidths = [];
+
+ // Calculate left offsets and widths.
for (let columnIdentifier of this.orderedColumns) {
let column = this.columns.get(columnIdentifier);
console.assert(column, "Missing column data for header cell with columnIdentifier " + columnIdentifier);
@@ -749,13 +771,21 @@
let columnWidth = this._headerTableCellElements.get(columnIdentifier).offsetWidth;
let headerView = column["headerView"];
if (headerView) {
- headerView.element.style.left = left + "px";
- headerView.element.style.width = columnWidth + "px";
- headerView.updateLayout(WebInspector.View.LayoutReason.Resize);
+ headerViews.push(headerView);
+ lefts.push(left);
+ columnWidths.push(columnWidth);
}
left += columnWidth;
}
+
+ // Apply left offsets and widths.
+ for (let i = 0; i < headerViews.length; ++i) {
+ let headerView = headerViews[i];
+ headerView.element.style.left = lefts[i] + "px";
+ headerView.element.style.width = columnWidths[i] + "px";
+ headerView.updateLayout(WebInspector.View.LayoutReason.Resize);
+ }
}
addPlaceholderNode()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js (198644 => 198645)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js 2016-03-24 22:18:48 UTC (rev 198644)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js 2016-03-24 22:20:52 UTC (rev 198645)
@@ -28,6 +28,8 @@
constructor(identifier, toolTip, image, imageWidth, imageHeight)
{
super(identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
+
+ this._initializedMinWidth = false;
}
// Public
@@ -70,9 +72,13 @@
this.element.setAttribute("aria-selected", "true");
}
- var selectedWidth = this.element.offsetWidth;
- if (selectedWidth)
- this.element.style.minWidth = selectedWidth + "px";
+ if (!this._initializedMinWidth) {
+ var width = this.element.offsetWidth;
+ if (width) {
+ this._initializedMinWidth = true;
+ this.element.style.minWidth = width + "px";
+ }
+ }
if (!isSelected) {
this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
