Title: [195522] trunk/Source/WebInspectorUI
- Revision
- 195522
- Author
- [email protected]
- Date
- 2016-01-24 20:00:36 -0800 (Sun, 24 Jan 2016)
Log 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.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (195521 => 195522)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-25 01:19:06 UTC (rev 195521)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-25 04:00:36 UTC (rev 195522)
@@ -1,3 +1,33 @@
+2016-01-24 Matt Baker <[email protected]>
+
+ 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 <[email protected]>
Web Inspector: Highlight timeline range handles on hover
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (195521 => 195522)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-01-25 01:19:06 UTC (rev 195521)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-01-25 04:00:36 UTC (rev 195522)
@@ -474,12 +474,20 @@
var referenceElement = this._headerTableRowElement.children[insertionIndex];
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"]) {
listeners.register(headerCellElement, "click", this._headerCellClicked);
headerCellElement.classList.add(WebInspector.DataGrid.SortableColumnStyleClassName);
@@ -609,6 +617,7 @@
}
this._positionResizerElements();
+ this._positionHeaderViews();
}
columnWidthsMap()
@@ -640,7 +649,7 @@
_showColumn(columnIdentifier)
{
- delete this.columns.get(columnIdentifier)["hidden"];
+ this.columns.get(columnIdentifier)["hidden"] = false;
}
_hideColumn(columnIdentifier)
@@ -708,6 +717,38 @@
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;
+ }
+ }
+
addPlaceholderNode()
{
if (this.placeholderNode)
@@ -1285,6 +1326,7 @@
this._dataTableColumnGroupElement.children[rightCellIndex].style.width = percentRightColumn;
this._positionResizerElements();
+ this._positionHeaderViews();
event.preventDefault();
}
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
