Changeset 195522 in webkit

Timestamp:

Jan 24, 2016, 8:00:36 PM (10 years ago)

Author:

Matt Baker

Message:

Web Inspector: add support for placing Views in DataGrid column headers
​https://bugs.webkit.org/show_bug.cgi?id=153387
<rdar://problem/24310797>

Reviewed by Timothy Hatcher.

This patch adds a new DataGrid column property, headerView, allowing a
custom View object to be placed in a column's header cell. The grid ensures
that the left and right edges of the view are kept in sync as columns are
resized. As most views use absolute positioning and are styled in CSS, the
vertical position and height of the view isn't set by the grid.

• UserInterface/Views/DataGrid.js:

(WebInspector.DataGrid.prototype.insertColumn):
If the new column includes the headerView column data property,
it should take priority over titleDOMFragment and title text.
The specified View object is inserted into the DOM under the
column's <th> element, and added as a subview of the data grid.
(WebInspector.DataGrid.prototype.layout):
Update header views after performing default layout.
(WebInspector.DataGrid.prototype._showColumn):
Set hidden column property false instead of deleting it.
(WebInspector.DataGrid.prototype._positionHeaderViews):
Update the left and right style positions for all Views embedded in
column header cells, then update their layouts.
(WebInspector.DataGrid.prototype.resizerDragging):
Update header views after column resizers are repositioned.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/DataGrid.js (modified) (5 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-01-24  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: add support for placing Views in DataGrid column headers
+        https://bugs.webkit.org/show_bug.cgi?id=153387
+        <rdar://problem/24310797>
+
+        Reviewed by Timothy Hatcher.
+
+        This patch adds a new DataGrid column property, `headerView`, allowing a
+        custom View object to be placed in a column's header cell. The grid ensures
+        that the left and right edges of the view are kept in sync as columns are
+        resized. As most views use absolute positioning and are styled in CSS, the
+        vertical position and height of the view isn't set by the grid.
+
+        * UserInterface/Views/DataGrid.js:
+        (WebInspector.DataGrid.prototype.insertColumn):
+        If the new column includes the `headerView` column data property,
+        it should take priority over `titleDOMFragment` and title text.
+        The specified View object is inserted into the DOM under the
+        column's <th> element, and added as a subview of the data grid.
+        (WebInspector.DataGrid.prototype.layout):
+        Update header views after performing default layout.
+        (WebInspector.DataGrid.prototype._showColumn):
+        Set `hidden` column property false instead of deleting it.
+        (WebInspector.DataGrid.prototype._positionHeaderViews):
+        Update the left and right style positions for all Views embedded in
+        column header cells, then update their layouts.
+        (WebInspector.DataGrid.prototype.resizerDragging):
+        Update header views after column resizers are repositioned.
+
 2016-01-24  Nikita Vasilyev  <nvasilyev@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js

@@ -475 +475 @@
         this._headerTableRowElement.insertBefore(headerCellElement, referenceElement);
 
-        var div = headerCellElement.createChild("div");
-        if (column["titleDOMFragment"])
-            div.appendChild(column["titleDOMFragment"]);
-        else
-            div.textContent = column["title"] || "";
+        if (column["headerView"]) {
+            let headerView = column["headerView"];
+            console.assert(headerView instanceof WebInspector.View);
+
+            headerCellElement.appendChild(headerView.element);
+            this.addSubview(headerView);
+        } else {
+            let titleElement = headerCellElement.createChild("div");
+            if (column["titleDOMFragment"])
+                titleElement.appendChild(column["titleDOMFragment"]);
+            else
+                titleElement.textContent = column["title"] || "";
+        }
 
         if (column["sortable"]) {
@@ -610 +618 @@
 
         this._positionResizerElements();
+        this._positionHeaderViews();
     }
 
@@ -641 +650 @@
     _showColumn(columnIdentifier)
     {
-        delete this.columns.get(columnIdentifier)["hidden"];
+        this.columns.get(columnIdentifier)["hidden"] = false;
     }
 
@@ -707 +716 @@
         if (previousResizer)
             previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = this.orderedColumns.length - 1;
+    }
+
+    _positionHeaderViews()
+    {
+        let visibleHeaderViews = false;
+        for (let column of this.columns.values()) {
+            if (column["headerView"] && !column["hidden"]) {
+                visibleHeaderViews = true;
+                break;
+            }
+        }
+
+        if (!visibleHeaderViews)
+            return;
+
+        let left = 0;
+        for (let columnIdentifier of this.orderedColumns) {
+            let column = this.columns.get(columnIdentifier);
+            console.assert(column, "Missing column data for header cell with columnIdentifier " + columnIdentifier);
+            if (!column)
+                continue;
+
+            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();
+            }
+
+            left += columnWidth;
+        }
     }
 
@@ -1286 +1327 @@
 
         this._positionResizerElements();
+        this._positionHeaderViews();
         event.preventDefault();
     }