Changeset 203920 in webkit

Timestamp:

Jul 29, 2016 1:43:42 PM (8 years ago)

Author:

Matt Baker

Message:

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/TimelineOverviewGraph.js (modified) (1 diff)
• UserInterface/Views/TimelineRecordBar.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js

@@ -149 +149 @@
     }
 
+    get secondsPerPixel() { return this._timelineOverview.secondsPerPixel; }
+
     get visible()
     {

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js

@@ -226 +226 @@
     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;
@@ -304 +310 @@
         if (inactiveUnfinished)
             barActiveStartTime = graphCurrentTime;
-
-        var middlePercentage = (barActiveStartTime - barStartTime) / barDuration;
-
-        if (this._renderMode !== WebInspector.TimelineRecordBar.RenderMode.ActiveOnly) {
+        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();
+            }
+        }
+
+        let showInactiveSegment = barActiveStartTime > barStartTime;
+        this._element.classList.toggle("has-inactive-segment", showInactiveSegment);
+
+        let middlePercentage = (barActiveStartTime - barStartTime) / barDuration;
+        if (showInactiveSegment && this._renderMode !== WebInspector.TimelineRecordBar.RenderMode.ActiveOnly) {
             if (!this._inactiveBarElement) {
                 this._inactiveBarElement = document.createElement("div");