<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[195522] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/195522">195522</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-01-24 20:00:36 -0800 (Sun, 24 Jan 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (195521 => 195522)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,33 @@
</span><ins>+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.
+
</ins><span class="cx"> 2016-01-24 Nikita Vasilyev <nvasilyev@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Highlight timeline range handles on hover
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (195521 => 195522)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -474,12 +474,20 @@
</span><span class="cx"> var referenceElement = this._headerTableRowElement.children[insertionIndex];
</span><span class="cx"> this._headerTableRowElement.insertBefore(headerCellElement, referenceElement);
</span><span class="cx">
</span><del>- var div = headerCellElement.createChild("div");
- if (column["titleDOMFragment"])
- div.appendChild(column["titleDOMFragment"]);
- else
- div.textContent = column["title"] || "";
</del><ins>+ if (column["headerView"]) {
+ let headerView = column["headerView"];
+ console.assert(headerView instanceof WebInspector.View);
</ins><span class="cx">
</span><ins>+ 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"] || "";
+ }
+
</ins><span class="cx"> if (column["sortable"]) {
</span><span class="cx"> listeners.register(headerCellElement, "click", this._headerCellClicked);
</span><span class="cx"> headerCellElement.classList.add(WebInspector.DataGrid.SortableColumnStyleClassName);
</span><span class="lines">@@ -609,6 +617,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._positionResizerElements();
</span><ins>+ this._positionHeaderViews();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> columnWidthsMap()
</span><span class="lines">@@ -640,7 +649,7 @@
</span><span class="cx">
</span><span class="cx"> _showColumn(columnIdentifier)
</span><span class="cx"> {
</span><del>- delete this.columns.get(columnIdentifier)["hidden"];
</del><ins>+ this.columns.get(columnIdentifier)["hidden"] = false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _hideColumn(columnIdentifier)
</span><span class="lines">@@ -708,6 +717,38 @@
</span><span class="cx"> previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = this.orderedColumns.length - 1;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _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;
+ }
+ }
+
</ins><span class="cx"> addPlaceholderNode()
</span><span class="cx"> {
</span><span class="cx"> if (this.placeholderNode)
</span><span class="lines">@@ -1285,6 +1326,7 @@
</span><span class="cx"> this._dataTableColumnGroupElement.children[rightCellIndex].style.width = percentRightColumn;
</span><span class="cx">
</span><span class="cx"> this._positionResizerElements();
</span><ins>+ this._positionHeaderViews();
</ins><span class="cx"> event.preventDefault();
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>