Attachment 284816 Details for Bug 160061 – Patch 4

[patch] Patch 4

bug-160061-20160728140428.patch (text/plain), 15.12 KB, created by Johan K. Jensen on 2016-07-28 14:05:41 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Johan K. Jensen

Created: 2016-07-28 14:05:41 PDT

Size: 15.12 KB

patch

obsolete

>Subversion Revision: 203348
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index e7bf0b0d437ce7ed4e208a24b5df4508502099f9..09a2594a311911258445fa596e3df77f391c2ba1 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,56 @@
>+2016-07-27  Johan K. Jensen  <johan_jensen@apple.com>
>+
>+        Web Inspector: Waterfall view should be visible in Network tab and Network Timeline
>+        https://bugs.webkit.org/show_bug.cgi?id=160061
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Adds a Timeline-column (waterfall) to the Network tab and Network Timeline.
>+
>+        * Localizations/en.lproj/localizedStrings.js:
>+        Add "Timeline" localized string.
>+
>+        * UserInterface/Views/NetworkGridContentView.js:
>+        (WebInspector.NetworkGridContentView):
>+        Add the Timeline-column with a TimelineRuler as the headerview,
>+        and properties for updating current time.
>+
>+        (WebInspector.NetworkGridContentView.prototype.get secondsPerPixel):
>+        (WebInspector.NetworkGridContentView.prototype.get startTime):
>+        (WebInspector.NetworkGridContentView.prototype.get currentTime):
>+        (WebInspector.NetworkGridContentView.prototype.get endTime):
>+        Acting as a graphDataSource used by TimelineDataGridNode.
>+
>+        (WebInspector.NetworkGridContentView.prototype.shown):
>+        (WebInspector.NetworkGridContentView.prototype.reset):
>+        (WebInspector.NetworkGridContentView.prototype.layout):
>+        Refresh graphs and update the TimelineRuler on layout changes.
>+
>+        (WebInspector.NetworkGridContentView.prototype._networkTimelineRecordAdded):
>+        Add listeners for when resources are finished to stop the timer.
>+
>+        (WebInspector.NetworkGridContentView.prototype._update):
>+        (WebInspector.NetworkGridContentView.prototype._startUpdatingCurrentTime):
>+        (WebInspector.NetworkGridContentView.prototype._stopUpdatingCurrentTime):
>+        Adding a timer which updates the TimelineRuler and the layout
>+        if any non-finished requests are running.
>+
>+        * UserInterface/Views/NetworkTimelineView.js:
>+        (WebInspector.NetworkTimelineView):
>+        Add the Timeline-column with a TimelineRuler as the headerview.
>+
>+        (WebInspector.NetworkTimelineView.prototype.get secondsPerPixel):
>+        (WebInspector.NetworkTimelineView.prototype.layout):
>+        Refresh graphs on layout changes.
>+
>+        * UserInterface/Views/TimelineDataGrid.css:
>+        (.tree-outline.timeline-data-grid .item:hover .subtitle):
>+        (.data-grid.timeline th):
>+        (.data-grid.timeline th.graph-column > .timeline-ruler):
>+        (.data-grid.timeline td.graph-column):
>+        (.data-grid.timeline td.graph-column > .cell-content):
>+        (.data-grid.timeline td.graph-column .timeline-record-bar):
>+
> 2016-07-15  Timothy Hatcher  <timothy@apple.com>
> 
>         Web Inspector: Make Open Quickly and Goto Line dialogs match Xcode 8
>diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>index aab426c0c51b3207a29dfe25a99f7ab7afdf092b..9999623606d3bf8e742fd30fbba9747e28b6f58e 100644
>GIT binary patch
>delta 36
>scmdmThPCS~Yr_`C)n3!jdNPVkZhUSu{k;bx$8=q9Mvm>Py%;;C0V3-TI{*Lx
>
>delta 22
>ecmeA=%ev(ZYr_`C)n3!hy%}Y;%X%~BN&^6E0te~<
>
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js
>index cab495f20f45641244a5c97e5316c16a7e3f4ca2..804703a26a970f8261b1954e0d8587a9b8c297e9 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js
>@@ -37,7 +37,7 @@ WebInspector.NetworkGridContentView = class NetworkGridContentView extends WebIn
>         this._contentTreeOutline = this._networkSidebarPanel.contentTreeOutline;
>         this._contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
> 
>-        var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
>+        var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}, graph: {}};
> 
>         columns.domain.title = WebInspector.UIString("Domain");
>         columns.domain.width = "10%";
>@@ -80,6 +80,14 @@ WebInspector.NetworkGridContentView = class NetworkGridContentView extends WebIn
>         for (var column in columns)
>             columns[column].sortable = true;
> 
>+        this._timelineRuler = new WebInspector.TimelineRuler;
>+        this._timelineRuler.allowsClippedLabels = true;
>+
>+        columns.graph.title = WebInspector.UIString("Timeline");
>+        columns.graph.width = "15%";
>+        columns.graph.headerView = this._timelineRuler;
>+        columns.graph.sortable = false;
>+
>         this._dataGrid = new WebInspector.TimelineDataGrid(columns, this._contentTreeOutline);
>         this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
>         this._dataGrid.sortColumnIdentifier = "requestSent";
>@@ -97,10 +105,18 @@ WebInspector.NetworkGridContentView = class NetworkGridContentView extends WebIn
>         this._clearNetworkItemsNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearNetworkItems, this);
> 
>         this._pendingRecords = [];
>+        this._loadingResourceCount = 0;
>+        this._lastUpdateTimestamp = NaN;
>+        this._scheduledCurrentTimeUpdateIdentifier = undefined;
>     }
> 
>     // Public
> 
>+    get secondsPerPixel() { return this._timelineRuler.secondsPerPixel; }
>+    get startTime() { return this._timelineRuler.startTime; }
>+    get currentTime() { return this.endTime || this.startTime; }
>+    get endTime() { return this._timelineRuler.endTime; }
>+
>     get selectionPathComponents()
>     {
>         if (!this._contentTreeOutline.selectedTreeElement || this._contentTreeOutline.selectedTreeElement.hidden)
>@@ -126,6 +142,9 @@ WebInspector.NetworkGridContentView = class NetworkGridContentView extends WebIn
>         super.shown();
> 
>         this._dataGrid.shown();
>+
>+        if (this._loadingResourceCount && !this._scheduledCurrentTimeUpdateIdentifier)
>+            this._startUpdatingCurrentTime();
>     }
> 
>     hidden()
>@@ -144,12 +163,27 @@ WebInspector.NetworkGridContentView = class NetworkGridContentView extends WebIn
>     {
>         this._contentTreeOutline.removeChildren();
>         this._dataGrid.reset();
>+
>+        if (this._scheduledCurrentTimeUpdateIdentifier)
>+            this._stopUpdatingCurrentTime();
>+
>+        this._loadingResourceCount = 0;
>+        this._lastUpdateTimestamp = NaN;
>+
>+        this._timelineRuler.startTime = 0;
>+        this._timelineRuler.endTime = 0;
>     }
> 
>     // Protected
> 
>     layout()
>     {
>+        this._timelineRuler.zeroTime = this.zeroTime;
>+        this._timelineRuler.startTime = this.zeroTime;
>+
>+        for (let dataGridNode of this._dataGrid.children)
>+            dataGridNode.refreshGraph();
>+
>         this._processPendingRecords();
>     }
> 
>@@ -185,9 +219,35 @@ WebInspector.NetworkGridContentView = class NetworkGridContentView extends WebIn
>         var resourceTimelineRecord = event.data.record;
>         console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
> 
>+        let update = (event) => {
>+            if (event.target[WebInspector.NetworkGridContentView.ResourceDidFinishOrFail])
>+                return;
>+
>+            event.target.removeEventListener(null, null, this);
>+            event.target[WebInspector.NetworkGridContentView.ResourceDidFinishOrFail] = true;
>+
>+            this._loadingResourceCount--;
>+            if (this._loadingResourceCount)
>+                return;
>+
>+            this.debounce(250)._stopUpdatingCurrentTime();
>+        };
>+
>         this._pendingRecords.push(resourceTimelineRecord);
> 
>         this.needsLayout();
>+
>+        let resource = resourceTimelineRecord.resource;
>+        if (resource.finished || resource.failed || resource.canceled)
>+            return;
>+
>+        resource[WebInspector.NetworkGridContentView.ResourceDidFinishOrFail] = false;
>+        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, update, this);
>+        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, update, this);
>+
>+        this._loadingResourceCount++;
>+        if (this._loadingResourceCount && !this._scheduledCurrentTimeUpdateIdentifier)
>+            this._startUpdatingCurrentTime();
>     }
> 
>     _treeElementPathComponentSelected(event)
>@@ -222,4 +282,50 @@ WebInspector.NetworkGridContentView = class NetworkGridContentView extends WebIn
>     _clearNetworkItems(event) {
>         this.reset();
>     }
>+
>+    _update(timestamp)
>+    {
>+        console.assert(this._scheduledCurrentTimeUpdateIdentifier);
>+
>+        let startTime = this.startTime;
>+        let currentTime = this.currentTime;
>+        let endTime = this.endTime;
>+        let timespanSinceLastUpdate = (timestamp - this._lastUpdateTimestamp) / 1000 || 0;
>+
>+        currentTime += timespanSinceLastUpdate;
>+
>+        this._timelineRuler.endTime = currentTime;
>+        this._lastUpdateTimestamp = timestamp;
>+        this.updateLayout();
>+
>+        this._scheduledCurrentTimeUpdateIdentifier = requestAnimationFrame(this._updateCallback);
>+    }
>+
>+    _startUpdatingCurrentTime()
>+    {
>+        console.assert(!this._scheduledCurrentTimeUpdateIdentifier);
>+        if (this._scheduledCurrentTimeUpdateIdentifier)
>+            return;
>+
>+        // Don't update the current time if the Inspector is not visible, as the requestAnimationFrames won't work.
>+        if (!WebInspector.visible)
>+            return;
>+
>+        if (!this._updateCallback)
>+            this._updateCallback = this._update.bind(this);
>+
>+        this._scheduledCurrentTimeUpdateIdentifier = requestAnimationFrame(this._updateCallback);
>+    }
>+
>+    _stopUpdatingCurrentTime()
>+    {
>+        console.assert(this._scheduledCurrentTimeUpdateIdentifier);
>+        if (!this._scheduledCurrentTimeUpdateIdentifier)
>+            return;
>+
>+        cancelAnimationFrame(this._scheduledCurrentTimeUpdateIdentifier);
>+        this._scheduledCurrentTimeUpdateIdentifier = undefined;
>+    }
> };
>+
>+WebInspector.NetworkGridContentView.ResourceDidFinishOrFail = Symbol("ResourceDidFinishOrFail");
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
>index 384642d8a98bb99788572e315383d86f2f2d9cf6..cf9692b58c28bbe086c8532a2e47d00178238512 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
>@@ -31,7 +31,7 @@ WebInspector.NetworkTimelineView = class NetworkTimelineView extends WebInspecto
> 
>         console.assert(timeline.type === WebInspector.TimelineRecord.Type.Network);
> 
>-        let columns = {name: {}, domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
>+        let columns = {name: {}, domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}, graph: {}};
> 
>         columns.name.title = WebInspector.UIString("Name");
>         columns.name.icon = true;
>@@ -39,10 +39,10 @@ WebInspector.NetworkTimelineView = class NetworkTimelineView extends WebInspecto
>         columns.name.locked = true;
> 
>         columns.domain.title = WebInspector.UIString("Domain");
>-        columns.domain.width = "10%";
>+        columns.domain.width = "8%";
> 
>         columns.type.title = WebInspector.UIString("Type");
>-        columns.type.width = "8%";
>+        columns.type.width = "7%";
> 
>         var typeToLabelMap = new Map;
>         for (var key in WebInspector.Resource.Type) {
>@@ -54,16 +54,16 @@ WebInspector.NetworkTimelineView = class NetworkTimelineView extends WebInspecto
>         this._scopeBar = columns.type.scopeBar;
> 
>         columns.method.title = WebInspector.UIString("Method");
>-        columns.method.width = "6%";
>+        columns.method.width = "4%";
> 
>         columns.scheme.title = WebInspector.UIString("Scheme");
>-        columns.scheme.width = "6%";
>+        columns.scheme.width = "4%";
> 
>         columns.statusCode.title = WebInspector.UIString("Status");
>-        columns.statusCode.width = "6%";
>+        columns.statusCode.width = "4%";
> 
>         columns.cached.title = WebInspector.UIString("Cached");
>-        columns.cached.width = "6%";
>+        columns.cached.width = "4%";
> 
>         columns.size.title = WebInspector.UIString("Size");
>         columns.size.width = "8%";
>@@ -88,6 +88,14 @@ WebInspector.NetworkTimelineView = class NetworkTimelineView extends WebInspecto
>         for (var column in columns)
>             columns[column].sortable = true;
> 
>+        this._timelineRuler = new WebInspector.TimelineRuler;
>+        this._timelineRuler.allowsClippedLabels = true;
>+
>+        columns.graph.title = WebInspector.UIString("Timeline");
>+        columns.graph.width = "15%";
>+        columns.graph.headerView = this._timelineRuler;
>+        columns.graph.sortable = false;
>+
>         this._dataGrid = new WebInspector.TimelineDataGrid(columns);
>         this._dataGrid.sortDelegate = this;
>         this._dataGrid.sortColumnIdentifier = "requestSent";
>@@ -107,6 +115,8 @@ WebInspector.NetworkTimelineView = class NetworkTimelineView extends WebInspecto
> 
>     // Public
> 
>+    get secondsPerPixel() { return this._timelineRuler.secondsPerPixel; }
>+
>     get selectionPathComponents()
>     {
>         if (!this._dataGrid.selectedNode || this._dataGrid.selectedNode.hidden)
>@@ -197,6 +207,15 @@ WebInspector.NetworkTimelineView = class NetworkTimelineView extends WebInspecto
> 
>     layout()
>     {
>+        this.endTime = Math.min(this.endTime, this.currentTime);
>+
>+        this._timelineRuler.zeroTime = this.zeroTime;
>+        this._timelineRuler.startTime = this.startTime;
>+        this._timelineRuler.endTime = this.endTime;
>+
>+        for (let dataGridNode of this._resourceDataGridNodeMap.values())
>+            dataGridNode.refreshGraph();
>+
>         this._processPendingRecords();
>     }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>index 997654b7e5baf3ec15fc304e417c519cda7587fd..89e86d42ad2a45a6e7f78d71fb121fd9ffc5beef 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>@@ -35,4 +35,26 @@
> 
> .tree-outline.timeline-data-grid .item:hover .subtitle {
>     color: white;
>-}
>\ No newline at end of file
>+}
>+
>+.data-grid.timeline th {
>+    border-top: none;
>+}
>+
>+.data-grid.timeline th.graph-column > .timeline-ruler {
>+    position: absolute;
>+    top: 0;
>+    bottom: 0;
>+}
>+
>+.data-grid.timeline td.graph-column {
>+    padding: 2px 0;
>+}
>+
>+.data-grid.timeline td.graph-column > .cell-content {
>+    position: relative;
>+}
>+
>+.data-grid.timeline td.graph-column .timeline-record-bar {
>+    top: 2px;
>+}

Actions: View | Formatted Diff | Diff

Attachments on bug 160061: 284291 | 284379 | 284535 | 284627 | 284748 | 284816