Changeset 140335 in webkit

Timestamp:

Jan 21, 2013 8:07:43 AM (11 years ago)

Author:

caseq@chromium.org

Message:

Web Inspector: data grid resize is slow
​https://bugs.webkit.org/show_bug.cgi?id=107291

Reviewed by Pavel Feldman.

• avoid (most of) unnecessary relayouts and style recalculation when dragging data grid resizer.

• inspector/front-end/DataGrid.js:

(WebInspector.DataGrid.prototype._positionResizers):
(WebInspector.DataGrid.prototype._resizerDragging):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/DataGrid.js (modified) (3 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-01-18  Andrey Kosyakov  <caseq@chromium.org>
+
+        Web Inspector: data grid resize is slow
+        https://bugs.webkit.org/show_bug.cgi?id=107291
+
+        Reviewed by Pavel Feldman.
+
+        - avoid (most of) unnecessary relayouts and style recalculation when dragging data grid resizer.
+
+        * inspector/front-end/DataGrid.js:
+        (WebInspector.DataGrid.prototype._positionResizers):
+        (WebInspector.DataGrid.prototype._resizerDragging):
+
 2013-01-21  Vladislav Kaznacheev  <kaznacheev@chromium.org>
 

trunk/Source/WebCore/inspector/front-end/DataGrid.js

@@ -685 +685 @@
             if (!this._columnsArray[i].hidden) {
                 resizer.style.removeProperty("display");
-                resizer.style.left = left + "px";
+                if (resizer._position !== left) {
+                    resizer._position = left;
+                    resizer.style.left = left + "px";
+                }
                 resizer.leftNeighboringColumnIndex = i;
                 if (previousResizer)
@@ -975 +978 @@
             return;
 
+        var tableWidth = this._dataTable.offsetWidth; // Cache it early, before we invalidate layout.
+
         // Constrain the dragpoint to be within the containing div of the
         // datagrid.
@@ -1005 +1010 @@
         resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
 
-        var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this._dataTable.offsetWidth) * 100) + "%";
+        var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / tableWidth) * 100) + "%";
         this._headerTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
         this._dataTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
 
-        var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._dataTable.offsetWidth) * 100) + "%";
+        var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / tableWidth) * 100) + "%";
         this._headerTableColumnGroup.children[rightCellIndex].style.width =  percentRightColumn;
         this._dataTableColumnGroup.children[rightCellIndex].style.width = percentRightColumn;