Web Inspector: Show resource timing details in Network waterfall
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 8 Sep 2016 01:04:48 +0000 (01:04 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 8 Sep 2016 01:04:48 +0000 (01:04 +0000)
commit52124b8153db4659bb42902f9964468985a14aab
tree5ee7fe9990efa71a7633c01bdbfb1bb4fa14009e
parentffdd716e59eee7828d51eaa5cdb367720ab0b0c9
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@205578 268f45cc-cd09-0410-ab3c-d52691b4dbfc
14 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/DataGrid.css
Source/WebInspectorUI/UserInterface/Views/DataGrid.js
Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js
Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js
Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.css [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js
Source/WebInspectorUI/UserInterface/Views/ResourceTimingPopoverDataGridNode.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js
Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js