<!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>[205578] 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/205578">205578</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-09-07 18:04:48 -0700 (Wed, 07 Sep 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Show resource timing details in Network waterfall
https://bugs.webkit.org/show_bug.cgi?id=160062
This patch adds a popover to network tab's and timeline tab's resource rows, when hovering
the recordbar. It shows times for the various parts of the resource load if they are available,
or it shows the reason for why not as text (e.g. cached resource, data URI).
Patch by Johan K. Jensen <johan_jensen@apple.com> on 2016-09-07
Reviewed by Matt Baker.
* Localizations/en.lproj/localizedStrings.js:
Added new strings.
* UserInterface/Main.html:
Include new files.
* UserInterface/Views/ComputedStyleDetailsPanel.js:
(WebInspector.ComputedStyleDetailsPanel.prototype.initialLayout):
Updated to use DataGrid property to hide header.
* UserInterface/Views/DataGrid.css:
(.data-grid.no-header > .header-wrapper):
(.data-grid.no-header > .header-wrapper > table.header): Deleted.
Hide the whole DataGrid header.
* UserInterface/Views/DataGrid.js:
(WebInspector.DataGrid):
(WebInspector.DataGrid.prototype.get headerVisible):
(WebInspector.DataGrid.prototype.set headerVisible):
Add property to control header visibility, so grid clients aren't forced to manipulate internal grid styles.
* UserInterface/Views/NetworkGridContentView.js:
(WebInspector.NetworkGridContentView.prototype._processPendingRecords):
* UserInterface/Views/NetworkTimelineView.js:
(WebInspector.NetworkTimelineView.prototype._processPendingRecords):
* UserInterface/Views/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView.prototype._addResourceToDataGridIfNeeded):
Pass in new parameter for whether or not to show the popover for resources.
* UserInterface/Views/ResourceTimelineDataGridNode.css: Added.
(.resource-timing-popover-content .data-grid):
(.resource-timing-popover-content .data-grid .graph-column > .cell-content):
(.resource-timing-popover-content .data-grid td):
(.resource-timing-popover-content .data-grid td.graph-column):
(.resource-timing-popover-content .data-grid table.data):
(.resource-timing-popover-content .data-grid tr:nth-last-child(2)):
Add styling for the popover.
* UserInterface/Views/ResourceTimelineDataGridNode.js:
(WebInspector.ResourceTimelineDataGridNode):
(WebInspector.ResourceTimelineDataGridNode.prototype.didAddRecordBar):
(WebInspector.ResourceTimelineDataGridNode.prototype.didRemoveRecordBar):
(WebInspector.ResourceTimelineDataGridNode.prototype._mouseoverRecordBar):
Creates the popover for a RecordBar and shows detailed info about segments.
* UserInterface/Views/ResourceTimingPopoverDataGridNode.js: Added.
(WebInspector.ResourceTimingPopoverDataGridNode):
(WebInspector.ResourceTimingPopoverDataGridNode.prototype.get records):
(WebInspector.ResourceTimingPopoverDataGridNode.prototype.get data):
(WebInspector.ResourceTimingPopoverDataGridNode.prototype.get selectable):
(WebInspector.ResourceTimingPopoverDataGridNode.prototype.createCellContent):
DataGridNode for the popover.
* UserInterface/Views/TimelineDataGridNode.js:
(WebInspector.TimelineDataGridNode.prototype.refreshGraph.createBar):
(WebInspector.TimelineDataGridNode.prototype.refreshGraph):
(WebInspector.TimelineDataGridNode.prototype.didAddRecordBar):
(WebInspector.TimelineDataGridNode.prototype.didRemoveRecordBar):
(WebInspector.TimelineDataGridNode):
Added hooks for notifying subclasses.
* UserInterface/Views/TimelineRecordBar.js:
(WebInspector.TimelineRecordBar):
(WebInspector.TimelineRecordBar.fromElement):
Added symbol and static method to get the recordBar from a given element.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkGridContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordBarjs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceTimelineDataGridNodecss">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceTimingPopoverDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingPopoverDataGridNode.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -1,3 +1,80 @@
</span><ins>+2016-09-07 Johan K. Jensen <johan_jensen@apple.com>
+
+ Web Inspector: Show resource timing details in Network waterfall
+ https://bugs.webkit.org/show_bug.cgi?id=160062
+
+ This patch adds a popover to network tab's and timeline tab's resource rows, when hovering
+ the recordbar. It shows times for the various parts of the resource load if they are available,
+ or it shows the reason for why not as text (e.g. cached resource, data URI).
+
+ Reviewed by Matt Baker.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ Added new strings.
+
+ * UserInterface/Main.html:
+ Include new files.
+
+ * UserInterface/Views/ComputedStyleDetailsPanel.js:
+ (WebInspector.ComputedStyleDetailsPanel.prototype.initialLayout):
+ Updated to use DataGrid property to hide header.
+
+ * UserInterface/Views/DataGrid.css:
+ (.data-grid.no-header > .header-wrapper):
+ (.data-grid.no-header > .header-wrapper > table.header): Deleted.
+ Hide the whole DataGrid header.
+
+ * UserInterface/Views/DataGrid.js:
+ (WebInspector.DataGrid):
+ (WebInspector.DataGrid.prototype.get headerVisible):
+ (WebInspector.DataGrid.prototype.set headerVisible):
+ Add property to control header visibility, so grid clients aren't forced to manipulate internal grid styles.
+
+ * UserInterface/Views/NetworkGridContentView.js:
+ (WebInspector.NetworkGridContentView.prototype._processPendingRecords):
+ * UserInterface/Views/NetworkTimelineView.js:
+ (WebInspector.NetworkTimelineView.prototype._processPendingRecords):
+ * UserInterface/Views/OverviewTimelineView.js:
+ (WebInspector.OverviewTimelineView.prototype._addResourceToDataGridIfNeeded):
+ Pass in new parameter for whether or not to show the popover for resources.
+
+ * UserInterface/Views/ResourceTimelineDataGridNode.css: Added.
+ (.resource-timing-popover-content .data-grid):
+ (.resource-timing-popover-content .data-grid .graph-column > .cell-content):
+ (.resource-timing-popover-content .data-grid td):
+ (.resource-timing-popover-content .data-grid td.graph-column):
+ (.resource-timing-popover-content .data-grid table.data):
+ (.resource-timing-popover-content .data-grid tr:nth-last-child(2)):
+ Add styling for the popover.
+
+ * UserInterface/Views/ResourceTimelineDataGridNode.js:
+ (WebInspector.ResourceTimelineDataGridNode):
+ (WebInspector.ResourceTimelineDataGridNode.prototype.didAddRecordBar):
+ (WebInspector.ResourceTimelineDataGridNode.prototype.didRemoveRecordBar):
+ (WebInspector.ResourceTimelineDataGridNode.prototype._mouseoverRecordBar):
+ Creates the popover for a RecordBar and shows detailed info about segments.
+
+ * UserInterface/Views/ResourceTimingPopoverDataGridNode.js: Added.
+ (WebInspector.ResourceTimingPopoverDataGridNode):
+ (WebInspector.ResourceTimingPopoverDataGridNode.prototype.get records):
+ (WebInspector.ResourceTimingPopoverDataGridNode.prototype.get data):
+ (WebInspector.ResourceTimingPopoverDataGridNode.prototype.get selectable):
+ (WebInspector.ResourceTimingPopoverDataGridNode.prototype.createCellContent):
+ DataGridNode for the popover.
+
+ * UserInterface/Views/TimelineDataGridNode.js:
+ (WebInspector.TimelineDataGridNode.prototype.refreshGraph.createBar):
+ (WebInspector.TimelineDataGridNode.prototype.refreshGraph):
+ (WebInspector.TimelineDataGridNode.prototype.didAddRecordBar):
+ (WebInspector.TimelineDataGridNode.prototype.didRemoveRecordBar):
+ (WebInspector.TimelineDataGridNode):
+ Added hooks for notifying subclasses.
+
+ * UserInterface/Views/TimelineRecordBar.js:
+ (WebInspector.TimelineRecordBar):
+ (WebInspector.TimelineRecordBar.fromElement):
+ Added symbol and static method to get the recordBar from a given element.
+
</ins><span class="cx"> 2016-09-07 Devin Rousso <dcrousso+webkit@gmail.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: clicking Computed Styles sidebar "Show All" checkbox doesn't trigger relayout of Properties section
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -184,6 +184,7 @@
</span><span class="cx"> localizedStrings["Compression"] = "Compression";
</span><span class="cx"> localizedStrings["Condition"] = "Condition";
</span><span class="cx"> localizedStrings["Conditional expression"] = "Conditional expression";
</span><ins>+localizedStrings["Connection"] = "Connection";
</ins><span class="cx"> localizedStrings["Console"] = "Console";
</span><span class="cx"> localizedStrings["Console Evaluation"] = "Console Evaluation";
</span><span class="cx"> localizedStrings["Console Evaluation %d"] = "Console Evaluation %d";
</span><span class="lines">@@ -213,6 +214,7 @@
</span><span class="cx"> localizedStrings["Create a new tab"] = "Create a new tab";
</span><span class="cx"> localizedStrings["Current"] = "Current";
</span><span class="cx"> localizedStrings["Cursor"] = "Cursor";
</span><ins>+localizedStrings["DNS"] = "DNS";
</ins><span class="cx"> localizedStrings["DOM Content Loaded \u2014 %s"] = "DOM Content Loaded \u2014 %s";
</span><span class="cx"> localizedStrings["Damping"] = "Damping";
</span><span class="cx"> localizedStrings["Dash Array"] = "Dash Array";
</span><span class="lines">@@ -604,6 +606,9 @@
</span><span class="cx"> localizedStrings["Reset"] = "Reset";
</span><span class="cx"> localizedStrings["Resource"] = "Resource";
</span><span class="cx"> localizedStrings["Resource Type"] = "Resource Type";
</span><ins>+localizedStrings["Resource failed to load."] = "Resource failed to load.";
+localizedStrings["Resource was loaded with the 'data' scheme."] = "Resource was loaded with the 'data' scheme.";
+localizedStrings["Resource was served from the cache."] = "Resource was served from the cache.";
</ins><span class="cx"> localizedStrings["Resources"] = "Resources";
</span><span class="cx"> localizedStrings["Response"] = "Response";
</span><span class="cx"> localizedStrings["Response Headers"] = "Response Headers";
</span><span class="lines">@@ -690,6 +695,7 @@
</span><span class="cx"> localizedStrings["Spelling"] = "Spelling";
</span><span class="cx"> localizedStrings["Spread"] = "Spread";
</span><span class="cx"> localizedStrings["Spring"] = "Spring";
</span><ins>+localizedStrings["Stalled"] = "Stalled";
</ins><span class="cx"> localizedStrings["Start Playback"] = "Start Playback";
</span><span class="cx"> localizedStrings["Start Recording"] = "Start Recording";
</span><span class="cx"> localizedStrings["Start Time"] = "Start Time";
</span><span class="lines">@@ -756,6 +762,7 @@
</span><span class="cx"> localizedStrings["Total memory size at the end of the selected time range"] = "Total memory size at the end of the selected time range";
</span><span class="cx"> localizedStrings["Total number of resources, click to show the Resources tab"] = "Total number of resources, click to show the Resources tab";
</span><span class="cx"> localizedStrings["Total size of all resources, click to show the Network Requests timeline"] = "Total size of all resources, click to show the Network Requests timeline";
</span><ins>+localizedStrings["Total time"] = "Total time";
</ins><span class="cx"> localizedStrings["Trace"] = "Trace";
</span><span class="cx"> localizedStrings["Trace: %s"] = "Trace: %s";
</span><span class="cx"> localizedStrings["Transferred"] = "Transferred";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -136,6 +136,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/Resizer.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ResourceIcons.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ResourceSidebarPanel.css">
</span><ins>+ <link rel="stylesheet" href="Views/ResourceTimelineDataGridNode.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/ResourceTreeElement.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/RulesStyleDetailsPanel.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ScopeBar.css">
</span><span class="lines">@@ -604,6 +605,7 @@
</span><span class="cx"> <script src="Views/ResourceDetailsSidebarPanel.js"></script>
</span><span class="cx"> <script src="Views/ResourceSidebarPanel.js"></script>
</span><span class="cx"> <script src="Views/ResourceTimelineDataGridNode.js"></script>
</span><ins>+ <script src="Views/ResourceTimingPopoverDataGridNode.js"></script>
</ins><span class="cx"> <script src="Views/RulesStyleDetailsPanel.js"></script>
</span><span class="cx"> <script src="Views/ScopeBar.js"></script>
</span><span class="cx"> <script src="Views/ScopeBarItem.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -199,7 +199,7 @@
</span><span class="cx"> this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
</span><span class="cx">
</span><span class="cx"> this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
</span><del>- this._containerRegionsDataGrid.element.classList.add("no-header");
</del><ins>+ this._containerRegionsDataGrid.headerVisible = false;
</ins><span class="cx">
</span><span class="cx"> let containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
</span><span class="cx"> let containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -66,7 +66,7 @@
</span><span class="cx"> border-bottom: 1px solid var(--border-color);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid.no-header > .header-wrapper > table.header {
</del><ins>+.data-grid.no-header > .header-wrapper {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -39,6 +39,7 @@
</span><span class="cx"> this._sortOrderSetting = null;
</span><span class="cx"> this._hiddenColumnSetting = null;
</span><span class="cx"> this._columnChooserEnabled = false;
</span><ins>+ this._headerVisible = true;
</ins><span class="cx">
</span><span class="cx"> this._rows = [];
</span><span class="cx">
</span><span class="lines">@@ -209,6 +210,17 @@
</span><span class="cx"> return dataGrid;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get headerVisible() { return this._headerVisible; }
+
+ set headerVisible(x)
+ {
+ if (x === this._headerVisible)
+ return;
+
+ this._headerVisible = x;
+ this.element.classList.toggle("no-header", !this._headerVisible);
+ }
+
</ins><span class="cx"> get columnChooserEnabled() { return this._columnChooserEnabled; }
</span><span class="cx"> set columnChooserEnabled(x) { this._columnChooserEnabled = x; }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkGridContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -209,8 +209,11 @@
</span><span class="cx"> continue;
</span><span class="cx">
</span><span class="cx"> treeElement = new WebInspector.ResourceTreeElement(resourceTimelineRecord.resource);
</span><del>- var dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, false, this);
</del><span class="cx">
</span><ins>+ const includesGraph = false;
+ const shouldShowPopover = true;
+ let dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, includesGraph, this, shouldShowPopover);
+
</ins><span class="cx"> this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -241,7 +241,9 @@
</span><span class="cx"> if (dataGridNode)
</span><span class="cx"> continue;
</span><span class="cx">
</span><del>- dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, false, this);
</del><ins>+ const includesGraph = false;
+ const shouldShowPopover = true;
+ dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, includesGraph, this, shouldShowPopover);
</ins><span class="cx"> this._resourceDataGridNodeMap.set(resourceTimelineRecord.resource, dataGridNode);
</span><span class="cx">
</span><span class="cx"> this._dataGrid.addRowInSortOrder(null, dataGridNode);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsOverviewTimelineViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -211,7 +211,9 @@
</span><span class="cx"> if (!resourceTimelineRecord)
</span><span class="cx"> resourceTimelineRecord = new WebInspector.ResourceTimelineRecord(resource);
</span><span class="cx">
</span><del>- let resourceDataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, true, this);
</del><ins>+ const includesGraph = true;
+ const shouldShowPopover = false;
+ let resourceDataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, includesGraph, this, shouldShowPopover);
</ins><span class="cx"> this._resourceDataGridNodeMap.set(resource, resourceDataGridNode);
</span><span class="cx">
</span><span class="cx"> let expandedByDefault = false;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceTimelineDataGridNodecss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.css (0 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.css 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.resource-timing-popover-content .data-grid {
+ border: none;
+ width: 280px;
+}
+
+.resource-timing-popover-content .data-grid .graph-column > .cell-content {
+ position: relative;
+}
+
+.resource-timing-popover-content .data-grid td {
+ border-right: none;
+}
+
+.resource-timing-popover-content .data-grid td.graph-column {
+ padding: 4px 0 0;
+}
+
+.resource-timing-popover-content .data-grid table.data {
+ background-image: none;
+}
+
+.resource-timing-popover-content .data-grid tr:nth-last-child(2) {
+ border-top: 1px solid var(--border-color);
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -25,12 +25,13 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.ResourceTimelineDataGridNode = class ResourceTimelineDataGridNode extends WebInspector.TimelineDataGridNode
</span><span class="cx"> {
</span><del>- constructor(resourceTimelineRecord, includesGraph, graphDataSource)
</del><ins>+ constructor(resourceTimelineRecord, includesGraph, graphDataSource, shouldShowPopover)
</ins><span class="cx"> {
</span><span class="cx"> super(includesGraph, graphDataSource);
</span><span class="cx">
</span><span class="cx"> this._resource = resourceTimelineRecord.resource;
</span><span class="cx"> this._record = resourceTimelineRecord;
</span><ins>+ this._shouldShowPopover = shouldShowPopover;
</ins><span class="cx">
</span><span class="cx"> this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._needsRefresh, this);
</span><span class="cx"> this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._needsRefresh, this);
</span><span class="lines">@@ -153,6 +154,31 @@
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="cx">
</span><ins>+ didAddRecordBar(recordBar)
+ {
+ if (!this._shouldShowPopover)
+ return;
+
+ if (!recordBar.records.length || recordBar.records[0].type !== WebInspector.TimelineRecord.Type.Network)
+ return;
+
+ console.assert(!this._mouseEnterRecordBarListener);
+ this._mouseEnterRecordBarListener = this._mouseoverRecordBar.bind(this);
+ recordBar.element.addEventListener("mouseenter", this._mouseEnterRecordBarListener);
+ }
+
+ didRemoveRecordBar(recordBar)
+ {
+ if (!this._shouldShowPopover)
+ return;
+
+ if (!recordBar.records.length || recordBar.records[0].type !== WebInspector.TimelineRecord.Type.Network)
+ return;
+
+ recordBar.element.removeEventListener("mouseenter", this._mouseEnterRecordBarListener);
+ this._mouseEnterRecordBarListener = null;
+ }
+
</ins><span class="cx"> filterableDataForColumn(columnIdentifier)
</span><span class="cx"> {
</span><span class="cx"> if (columnIdentifier === "name")
</span><span class="lines">@@ -240,4 +266,120 @@
</span><span class="cx"> let contentElement = cell.firstChild;
</span><span class="cx"> contentElement.appendChild(this._spinner.element);
</span><span class="cx"> }
</span><ins>+
+ _mouseoverRecordBar(event)
+ {
+ let recordBar = WebInspector.TimelineRecordBar.fromElement(event.target);
+ console.assert(recordBar);
+ if (!recordBar)
+ return;
+
+ let calculateTargetFrame = () => {
+ let columnRect = WebInspector.Rect.rectFromClientRect(this.elementWithColumnIdentifier("graph").getBoundingClientRect());
+ let barRect = WebInspector.Rect.rectFromClientRect(event.target.getBoundingClientRect());
+ return columnRect.intersectionWithRect(barRect);
+ };
+
+ let targetFrame = calculateTargetFrame();
+ if (!targetFrame.size.width && !targetFrame.size.height)
+ return;
+
+ console.assert(recordBar.records.length);
+ let resource = recordBar.records[0].resource;
+ if (!resource.timingData)
+ return;
+
+ if (!resource.timingData.responseEnd)
+ return;
+
+ if (this.dataGrid._dismissPopoverTimeout) {
+ clearTimeout(this.dataGrid._dismissPopoverTimeout);
+ this.dataGrid._dismissPopoverTimeout = undefined;
+ }
+
+ let popoverContentElement = document.createElement("div");
+ popoverContentElement.classList.add("resource-timing-popover-content");
+
+ if (resource.failed || resource.urlComponents.scheme === "data" || (resource.cached && resource.statusCode !== 304)) {
+ let descriptionElement = document.createElement("span");
+ descriptionElement.classList.add("description");
+ if (resource.failed)
+ descriptionElement.textContent = WebInspector.UIString("Resource failed to load.");
+ else if (resource.urlComponents.scheme === "data")
+ descriptionElement.textContent = WebInspector.UIString("Resource was loaded with the 'data' scheme.");
+ else
+ descriptionElement.textContent = WebInspector.UIString("Resource was served from the cache.");
+ popoverContentElement.appendChild(descriptionElement);
+ } else {
+ let columns = {
+ description: {
+ width: "80px"
+ },
+ graph: {
+ width: `${WebInspector.ResourceTimelineDataGridNode.PopoverGraphColumnWidthPixels}px`
+ },
+ duration: {
+ width: "70px",
+ aligned: "right"
+ }
+ };
+
+ let popoverDataGrid = new WebInspector.DataGrid(columns);
+ popoverDataGrid.inline = true;
+ popoverDataGrid.headerVisible = false;
+ popoverContentElement.appendChild(popoverDataGrid.element);
+
+ let graphDataSource = {
+ get secondsPerPixel() { return resource.duration / WebInspector.ResourceTimelineDataGridNode.PopoverGraphColumnWidthPixels; },
+ get zeroTime() { return resource.firstTimestamp; },
+ get startTime() { return resource.firstTimestamp; },
+ get currentTime() { return this.endTime; },
+
+ get endTime()
+ {
+ let endTimePadding = this.secondsPerPixel * WebInspector.TimelineRecordBar.MinimumWidthPixels;
+ return resource.lastTimestamp + endTimePadding;
+ }
+ };
+
+ let secondTimestamp = resource.timingData.domainLookupStart || resource.timingData.connectStart || resource.timingData.requestStart;
+ if (secondTimestamp - resource.timingData.startTime)
+ popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Stalled"), resource.timingData.startTime, secondTimestamp, graphDataSource));
+ if (resource.timingData.domainLookupStart)
+ popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("DNS"), resource.timingData.domainLookupStart, resource.timingData.domainLookupEnd, graphDataSource));
+ if (resource.timingData.connectStart)
+ popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Connection"), resource.timingData.connectStart, resource.timingData.connectEnd, graphDataSource));
+ if (resource.timingData.secureConnectionStart)
+ popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Secure"), resource.timingData.secureConnectionStart, resource.timingData.connectEnd, graphDataSource));
+ popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Request"), resource.timingData.requestStart, resource.timingData.responseStart, graphDataSource));
+ popoverDataGrid.appendChild(new WebInspector.ResourceTimingPopoverDataGridNode(WebInspector.UIString("Response"), resource.timingData.responseStart, resource.timingData.responseEnd, graphDataSource));
+
+ const higherResolution = true;
+ let totalData = {
+ description: WebInspector.UIString("Total time"),
+ duration: Number.secondsToMillisecondsString(resource.timingData.responseEnd - resource.timingData.startTime, higherResolution)
+ };
+ popoverDataGrid.appendChild(new WebInspector.DataGridNode(totalData));
+
+ popoverDataGrid.updateLayout();
+ }
+
+ if (!this.dataGrid._popover)
+ this.dataGrid._popover = new WebInspector.Popover;
+
+ let preferredEdges = [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MIN_X];
+ this.dataGrid._popover.windowResizeHandler = () => {
+ let bounds = calculateTargetFrame();
+ this.dataGrid._popover.present(bounds.pad(2), preferredEdges);
+ };
+
+ recordBar.element.addEventListener("mouseleave", () => {
+ this.dataGrid._dismissPopoverTimeout = setTimeout(() => this.dataGrid._popover.dismiss(), WebInspector.ResourceTimelineDataGridNode.DelayedPopoverDismissalTimeout);
+ }, {once: true});
+
+ this.dataGrid._popover.presentNewContentWithFrame(popoverContentElement, targetFrame.pad(2), preferredEdges);
+ }
</ins><span class="cx"> };
</span><ins>+
+WebInspector.ResourceTimelineDataGridNode.PopoverGraphColumnWidthPixels = 110;
+WebInspector.ResourceTimelineDataGridNode.DelayedPopoverDismissalTimeout = 500;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceTimingPopoverDataGridNodejs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingPopoverDataGridNode.js (0 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingPopoverDataGridNode.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingPopoverDataGridNode.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -0,0 +1,59 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTimingPopoverDataGridNode = class ResourceTimingPopoverDataGridNode extends WebInspector.TimelineDataGridNode
+{
+ constructor(description, startTime, endTime, graphDataSource)
+ {
+ super(true, graphDataSource);
+
+ const higherResolution = true;
+ let duration = Number.secondsToMillisecondsString(endTime - startTime, higherResolution);
+
+ this._data = {description, duration};
+ this._record = new WebInspector.TimelineRecord(WebInspector.TimelineRecord.Type.Network, startTime, endTime);
+ }
+
+ // Public
+
+ get records() { return [this._record]; }
+ get data() { return this._data; }
+ get selectable() { return false; }
+
+ // Protected
+
+ createCellContent(columnIdentifier, cell)
+ {
+ let value = this.data[columnIdentifier];
+
+ switch (columnIdentifier) {
+ case "description":
+ case "duration":
+ return value || emDash;
+ }
+
+ return super.createCellContent(columnIdentifier, cell);
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -241,8 +241,10 @@
</span><span class="cx"> timelineRecordBar.records = records;
</span><span class="cx"> }
</span><span class="cx"> timelineRecordBar.refresh(this._graphDataSource);
</span><del>- if (!timelineRecordBar.element.parentNode)
</del><ins>+ if (!timelineRecordBar.element.parentNode) {
</ins><span class="cx"> this._graphContainerElement.appendChild(timelineRecordBar.element);
</span><ins>+ this.didAddRecordBar(timelineRecordBar);
+ }
</ins><span class="cx"> ++recordBarIndex;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -284,8 +286,9 @@
</span><span class="cx">
</span><span class="cx"> // Remove the remaining unused TimelineRecordBars.
</span><span class="cx"> for (; recordBarIndex < this._timelineRecordBars.length; ++recordBarIndex) {
</span><ins>+ this._timelineRecordBars[recordBarIndex].element.remove();
+ this.didRemoveRecordBar(this._timelineRecordBars[recordBarIndex]);
</ins><span class="cx"> this._timelineRecordBars[recordBarIndex].records = null;
</span><del>- this._timelineRecordBars[recordBarIndex].element.remove();
</del><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -376,4 +379,14 @@
</span><span class="cx">
</span><span class="cx"> return super.filterableDataForColumn(columnIdentifier);
</span><span class="cx"> }
</span><ins>+
+ didAddRecordBar(recordBar)
+ {
+ // Implemented by subclasses.
+ }
+
+ didRemoveRecordBar(recordBar)
+ {
+ // Implemented by subclasses.
+ }
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordBarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js (205577 => 205578)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js 2016-09-08 00:40:17 UTC (rev 205577)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js 2016-09-08 01:04:48 UTC (rev 205578)
</span><span class="lines">@@ -31,6 +31,7 @@
</span><span class="cx">
</span><span class="cx"> this._element = document.createElement("div");
</span><span class="cx"> this._element.classList.add("timeline-record-bar");
</span><ins>+ this._element[WebInspector.TimelineRecordBar.ElementReferenceSymbol] = this;
</ins><span class="cx">
</span><span class="cx"> this.renderMode = renderMode;
</span><span class="cx"> this.records = records;
</span><span class="lines">@@ -166,6 +167,11 @@
</span><span class="cx"> createBarCallback(activeRecords, WebInspector.TimelineRecordBar.RenderMode.ActiveOnly);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ static fromElement(element)
+ {
+ return element[WebInspector.TimelineRecordBar.ElementReferenceSymbol] || null;
+ }
+
</ins><span class="cx"> // Public
</span><span class="cx">
</span><span class="cx"> get element()
</span><span class="lines">@@ -362,6 +368,8 @@
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+WebInspector.TimelineRecordBar.ElementReferenceSymbol = Symbol("timeline-record-bar");
+
</ins><span class="cx"> WebInspector.TimelineRecordBar.MinimumWidthPixels = 4;
</span><span class="cx"> WebInspector.TimelineRecordBar.MinimumMarginPixels = 1;
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>