<!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>[187468] 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/187468">187468</a></dd>

<dt>Author</dt> <dd>mattbaker@apple.com</dd>

<dt>Date</dt> <dd>2015-07-27 17:13:47 -0700 (Mon, 27 Jul 2015)</dd>

</dl>

<h3>Log Message</h3>

<pre>Web Inspector: Clicking a frame in the Rendering Frames timeline should select the corresponding grid row

https://bugs.webkit.org/show_bug.cgi?id=147013

Reviewed by Timothy Hatcher.

Added ability to select (or highlight) a particular frame by clicking in the overview graph. A tick mark

appears above the selected frame inside the ruler, and the frame element's background color changes to a light

blue vertical highlight. Frame selection is synced across the timeline view's data grid, overview graph, and

navigation bar path components.

A few behaviors:

   - Clicking a frame outside the current ruler selection selects the frame.

   - Clicking the selected frame will deselect it.

   - Resizing the ruler selection to exclude the selected frame will deselect it.

* UserInterface/Views/DataGrid.js:

(WebInspector.DataGridNode.prototype.select):

No need to generate two SelectedNodeChanged events when selecting a node causes

the currently selected node to be deselected.

* UserInterface/Views/LayoutTimelineOverviewGraph.js:

(WebInspector.LayoutTimelineOverviewGraph):

* UserInterface/Views/NetworkTimelineOverviewGraph.js:

(WebInspector.NetworkTimelineOverviewGraph):

* UserInterface/Views/ScriptTimelineOverviewGraph.js:

(WebInspector.ScriptTimelineOverviewGraph): Set TimelineOverview during construction.

Set TimelineOverview during construction.

* UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:

(.timeline-overview-graph.rendering-frame &gt; .frame-marker):

(body.window-inactive .timeline-overview-graph.rendering-frame &gt; .frame-marker):

Added styles for selected frame marker.

* UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:

(WebInspector.RenderingFrameTimelineOverviewGraph):

Set TimelineOverview during construction.

(WebInspector.RenderingFrameTimelineOverviewGraph.prototype._mouseClicked):

Added frame marker element and frame selection via mouse click.

* UserInterface/Views/RenderingFrameTimelineView.js:

(WebInspector.RenderingFrameTimelineView.prototype.treeElementDeselected):

Deselect grid node when frame is deselected from the overview graph.

(WebInspector.RenderingFrameTimelineView.prototype.filterDidChange): Deleted.

Removed unnecessary override.

* UserInterface/Views/TimelineOverview.js:

Added selectRecord method and RecordSelected event.

(WebInspector.TimelineOverview):

(WebInspector.TimelineOverview.prototype._timelineRulerMouseDown):

(WebInspector.TimelineOverview.prototype._timelineRulerMouseClicked):

Since timeline ruler specifies pointer-events: all, click events must be forwarded to the

underlying overview graph. Click events following changes to the ruler's selection are ignored.

(WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):

(WebInspector.TimelineOverview.prototype._recordSelected):

Forward RecordSelected events from child graphs to clients of the overview.

* UserInterface/Views/TimelineOverviewGraph.js:

Added RecordSelected event.

(WebInspector.TimelineOverviewGraph):

(WebInspector.TimelineOverviewGraph.prototype.get visible):

(WebInspector.TimelineOverviewGraph.prototype.get selectedRecord):

(WebInspector.TimelineOverviewGraph.prototype.set selectedRecord):

Added property for selecting a record in the graph. Derived graph types can implement record selection

and choose how to style the selected record.

(WebInspector.TimelineOverviewGraph.prototype.updateLayout):

(WebInspector.TimelineOverviewGraph.prototype.needsLayout):

Update frame marker during an animation frame.

(WebInspector.TimelineOverviewGraph.prototype.dispatchSelectedRecordChangedEvent):

Dispatch wrapper to simplify things.

(WebInspector.TimelineOverviewGraph.prototype.updateSelectedRecord):

(WebInspector.TimelineOverviewGraph.prototype._needsSelectedRecordLayout.update):

(WebInspector.TimelineOverviewGraph.prototype._needsSelectedRecordLayout):

Inform derived overview graph to optionally style the selected record.

(WebInspector.TimelineOverviewGraph.prototype.set timelineOverview): Deleted.

No longer needed. TimelineOverview set during construction.

* UserInterface/Views/TimelineRecordFrame.css:

(.timeline-record-frame):

(.timeline-record-frame.tall):

Limit the &quot;fade out&quot; effect to frames that are &gt;= 95% of the graph height, otherwise the

gradient mask is noticeable when selecting a shorter frame.

(.timeline-record-frame.selected):

(body.window-inactive .timeline-record-frame.selected):

(.timeline-record-frame.selected &gt; .frame):

Added highlight (and dimmed inactive highlight) for selected frame element.

* UserInterface/Views/TimelineRecordFrame.js:

(WebInspector.TimelineRecordFrame.prototype.get selected):

(WebInspector.TimelineRecordFrame.prototype.set selected):

Added property for setting selected style.

* UserInterface/Views/TimelineRecordingContentView.js:

(WebInspector.TimelineRecordingContentView):

(WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):

Select record in overview in response to changing navigation path.

(WebInspector.TimelineRecordingContentView.prototype._recordSelected.get console):

(WebInspector.TimelineRecordingContentView.prototype._recordSelected):

Update selected tree element in response to changing record selection in the overview graph.</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>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphcss">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRenderingFrameTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScriptTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewGraphjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramecss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordFramejs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js</a></li>

</ul>

</div>

<div id="patch">

<h3>Diff</h3>

<a id="trunkSourceWebInspectorUIChangeLog"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (187467 => 187468)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2015-07-28 00:12:24 UTC (rev 187467)

+++ trunk/Source/WebInspectorUI/ChangeLog        2015-07-28 00:13:47 UTC (rev 187468)

</span><span class="lines">@@ -1,3 +1,105 @@

</span><ins>+2015-07-27  Matt Baker  &lt;mattbaker@apple.com&gt;

+

+        Web Inspector: Clicking a frame in the Rendering Frames timeline should select the corresponding grid row

+        https://bugs.webkit.org/show_bug.cgi?id=147013

+

+        Reviewed by Timothy Hatcher.

+

+        Added ability to select (or highlight) a particular frame by clicking in the overview graph. A tick mark

+        appears above the selected frame inside the ruler, and the frame element's background color changes to a light

+        blue vertical highlight. Frame selection is synced across the timeline view's data grid, overview graph, and

+        navigation bar path components.

+

+        A few behaviors:

+           - Clicking a frame outside the current ruler selection selects the frame.

+           - Clicking the selected frame will deselect it.

+           - Resizing the ruler selection to exclude the selected frame will deselect it.

+

+        * UserInterface/Views/DataGrid.js:

+        (WebInspector.DataGridNode.prototype.select):

+        No need to generate two SelectedNodeChanged events when selecting a node causes

+        the currently selected node to be deselected.

+

+        * UserInterface/Views/LayoutTimelineOverviewGraph.js:

+        (WebInspector.LayoutTimelineOverviewGraph):

+        * UserInterface/Views/NetworkTimelineOverviewGraph.js:

+        (WebInspector.NetworkTimelineOverviewGraph):

+        * UserInterface/Views/ScriptTimelineOverviewGraph.js:

+        (WebInspector.ScriptTimelineOverviewGraph): Set TimelineOverview during construction.

+        Set TimelineOverview during construction.

+

+        * UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:

+        (.timeline-overview-graph.rendering-frame &gt; .frame-marker):

+        (body.window-inactive .timeline-overview-graph.rendering-frame &gt; .frame-marker):

+        Added styles for selected frame marker.

+

+        * UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:

+        (WebInspector.RenderingFrameTimelineOverviewGraph):

+        Set TimelineOverview during construction.

+        (WebInspector.RenderingFrameTimelineOverviewGraph.prototype._mouseClicked):

+        Added frame marker element and frame selection via mouse click.

+

+        * UserInterface/Views/RenderingFrameTimelineView.js:

+        (WebInspector.RenderingFrameTimelineView.prototype.treeElementDeselected):

+        Deselect grid node when frame is deselected from the overview graph.

+        (WebInspector.RenderingFrameTimelineView.prototype.filterDidChange): Deleted.

+        Removed unnecessary override.

+

+        * UserInterface/Views/TimelineOverview.js:

+        Added selectRecord method and RecordSelected event.

+        (WebInspector.TimelineOverview):

+        (WebInspector.TimelineOverview.prototype._timelineRulerMouseDown):

+        (WebInspector.TimelineOverview.prototype._timelineRulerMouseClicked):

+        Since timeline ruler specifies pointer-events: all, click events must be forwarded to the

+        underlying overview graph. Click events following changes to the ruler's selection are ignored.

+

+        (WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):

+        (WebInspector.TimelineOverview.prototype._recordSelected):

+        Forward RecordSelected events from child graphs to clients of the overview.

+

+        * UserInterface/Views/TimelineOverviewGraph.js:

+        Added RecordSelected event.

+        (WebInspector.TimelineOverviewGraph):

+        (WebInspector.TimelineOverviewGraph.prototype.get visible):

+        (WebInspector.TimelineOverviewGraph.prototype.get selectedRecord):

+        (WebInspector.TimelineOverviewGraph.prototype.set selectedRecord):

+        Added property for selecting a record in the graph. Derived graph types can implement record selection

+        and choose how to style the selected record.

+        (WebInspector.TimelineOverviewGraph.prototype.updateLayout):

+        (WebInspector.TimelineOverviewGraph.prototype.needsLayout):

+        Update frame marker during an animation frame.

+        (WebInspector.TimelineOverviewGraph.prototype.dispatchSelectedRecordChangedEvent):

+        Dispatch wrapper to simplify things.

+        (WebInspector.TimelineOverviewGraph.prototype.updateSelectedRecord):

+        (WebInspector.TimelineOverviewGraph.prototype._needsSelectedRecordLayout.update):

+        (WebInspector.TimelineOverviewGraph.prototype._needsSelectedRecordLayout):

+        Inform derived overview graph to optionally style the selected record.

+        (WebInspector.TimelineOverviewGraph.prototype.set timelineOverview): Deleted.

+        No longer needed. TimelineOverview set during construction.

+

+        * UserInterface/Views/TimelineRecordFrame.css:

+        (.timeline-record-frame):

+        (.timeline-record-frame.tall):

+        Limit the &quot;fade out&quot; effect to frames that are &gt;= 95% of the graph height, otherwise the

+        gradient mask is noticeable when selecting a shorter frame.

+        (.timeline-record-frame.selected):

+        (body.window-inactive .timeline-record-frame.selected):

+        (.timeline-record-frame.selected &gt; .frame):

+        Added highlight (and dimmed inactive highlight) for selected frame element.

+

+        * UserInterface/Views/TimelineRecordFrame.js:

+        (WebInspector.TimelineRecordFrame.prototype.get selected):

+        (WebInspector.TimelineRecordFrame.prototype.set selected):

+        Added property for setting selected style.

+

+        * UserInterface/Views/TimelineRecordingContentView.js:

+        (WebInspector.TimelineRecordingContentView):

+        (WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):

+        Select record in overview in response to changing navigation path.

+        (WebInspector.TimelineRecordingContentView.prototype._recordSelected.get console):

+        (WebInspector.TimelineRecordingContentView.prototype._recordSelected):

+        Update selected tree element in response to changing record selection in the overview graph.

+

</ins><span class="cx"> 2015-07-27  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;

</span><span class="cx"> 

</span><span class="cx">         Web Inspector: Revert change to DOMTreeElement.prototype.remove

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (187467 => 187468)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js        2015-07-28 00:12:24 UTC (rev 187467)

+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js        2015-07-28 00:13:47 UTC (rev 187468)

</span><span class="lines">@@ -1725,7 +1725,7 @@

</span><span class="cx">             return;

</span><span class="cx"> 

</span><span class="cx">         if (this.dataGrid.selectedNode)

</span><del>-            this.dataGrid.selectedNode.deselect();

</del><ins>+            this.dataGrid.selectedNode.deselect(true);

</ins><span class="cx"> 

</span><span class="cx">         this._selected = true;

</span><span class="cx">         this.dataGrid.selectedNode = this;

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayoutTimelineOverviewGraphjs"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js (187467 => 187468)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js        2015-07-28 00:12:24 UTC (rev 187467)

+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js        2015-07-28 00:13:47 UTC (rev 187468)

</span><span class="lines">@@ -23,9 +23,9 @@