Web Inspector: Inactive/active network bar segments overlap when latency is zero
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 29 Jul 2016 20:43:42 +0000 (20:43 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 29 Jul 2016 20:43:42 +0000 (20:43 +0000)
https://bugs.webkit.org/show_bug.cgi?id=160147
<rdar://problem/27516007>

Reviewed by Joseph Pecoraro.

TimelineRecordBar should hide the inactive segment when its duration
is less than the minimum displayable size. The active segment can
assume the whole width of the bar.

* UserInterface/Views/TimelineOverviewGraph.js:
(WebInspector.TimelineOverviewGraph.prototype.get secondsPerPixel):
Make secondsPerPixel available during TimelineRecordBars.refresh.

* UserInterface/Views/TimelineRecordBar.js:
(WebInspector.TimelineRecordBar.prototype.refresh):
Check inactive duration against the minimum display size,
and add/remove DOM nodes and bar styles as needed.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@203920 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js
Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js

index 8c0b764..1b799e4 100644 (file)
@@ -1,3 +1,24 @@
+2016-07-29  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Inactive/active network bar segments overlap when latency is zero
+        https://bugs.webkit.org/show_bug.cgi?id=160147
+        <rdar://problem/27516007>
+
+        Reviewed by Joseph Pecoraro.
+
+        TimelineRecordBar should hide the inactive segment when its duration
+        is less than the minimum displayable size. The active segment can
+        assume the whole width of the bar.
+
+        * UserInterface/Views/TimelineOverviewGraph.js:
+        (WebInspector.TimelineOverviewGraph.prototype.get secondsPerPixel):
+        Make secondsPerPixel available during TimelineRecordBars.refresh.
+
+        * UserInterface/Views/TimelineRecordBar.js:
+        (WebInspector.TimelineRecordBar.prototype.refresh):
+        Check inactive duration against the minimum display size,
+        and add/remove DOM nodes and bar styles as needed.
+
 2016-07-29  Nikita Vasilyev  <nvasilyev@apple.com>
 
         REGRESSION (r195456): Web Inspector: Changing tabs in Styles sidebar shouldn't change sidebar's width
index f323a6e..2f232cd 100644 (file)
@@ -148,6 +148,8 @@ WebInspector.TimelineOverviewGraph = class TimelineOverviewGraph extends WebInsp
         return this._timelineOverview;
     }
 
+    get secondsPerPixel() { return this._timelineOverview.secondsPerPixel; }
+
     get visible()
     {
         return this._visible;
index 6273d41..4c85d53 100644 (file)
@@ -225,6 +225,12 @@ WebInspector.TimelineRecordBar = class TimelineRecordBar extends WebInspector.Ob
 
     refresh(graphDataSource)
     {
+        console.assert(graphDataSource.zeroTime);
+        console.assert(graphDataSource.startTime);
+        console.assert(graphDataSource.currentTime);
+        console.assert(graphDataSource.endTime);
+        console.assert(graphDataSource.secondsPerPixel);
+
         if (!this._records || !this._records.length)
             return false;
 
@@ -303,10 +309,21 @@ WebInspector.TimelineRecordBar = class TimelineRecordBar extends WebInspector.Ob
 
         if (inactiveUnfinished)
             barActiveStartTime = graphCurrentTime;
+        else if (this._renderMode === WebInspector.TimelineRecordBar.RenderMode.Normal) {
+            // Hide the inactive segment when its duration is less than the minimum displayable size.
+            let minimumSegmentDuration = graphDataSource.secondsPerPixel * WebInspector.TimelineRecordBar.MinimumWidthPixels;
+            if (barActiveStartTime - barStartTime < minimumSegmentDuration) {
+                barActiveStartTime = barStartTime;
+                if (this._inactiveBarElement)
+                    this._inactiveBarElement.remove();
+            }
+        }
 
-        var middlePercentage = (barActiveStartTime - barStartTime) / barDuration;
+        let showInactiveSegment = barActiveStartTime > barStartTime;
+        this._element.classList.toggle("has-inactive-segment", showInactiveSegment);
 
-        if (this._renderMode !== WebInspector.TimelineRecordBar.RenderMode.ActiveOnly) {
+        let middlePercentage = (barActiveStartTime - barStartTime) / barDuration;
+        if (showInactiveSegment && this._renderMode !== WebInspector.TimelineRecordBar.RenderMode.ActiveOnly) {
             if (!this._inactiveBarElement) {
                 this._inactiveBarElement = document.createElement("div");
                 this._inactiveBarElement.classList.add("segment");