Changeset 252199 in webkit

Timestamp:

Nov 7, 2019 12:02:22 PM (5 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Timelines: add a marker for when a stop was requested
​https://bugs.webkit.org/show_bug.cgi?id=203935

Reviewed by Timothy Hatcher.

After r244195, the Web Inspector frontend doesn't stop updating the current time marker
until after it receives all of the corresponding *.trackingComplete events. This means
that sometimes, the current time marker can move far past the time at which the stop was
requested, such as if there's a blocking script.

We should indicate where the stop was requested, as that is often right after a particular
issue is reproduced during a timeline recording, rather than have the user try to figure out
where they stopped.

Only keep a marker for the last stop request, and hide the marker once capturing resumes.

It's still useful to have the current time marker continue updating, as we should show all
the information we have about captured things, such as blocking scripts.

• UserInterface/Views/TimelineOverview.js:

(WI.TimelineOverview):
(WI.TimelineOverview.prototype._handleTimelineCapturingStateChanged):

• UserInterface/Models/TimelineMarker.js:
• UserInterface/Views/TimelineRuler.js:

(WI.TimelineRuler.prototype.addMarker):

• UserInterface/Views/TimelineRuler.css:

(.timeline-ruler > .markers > .marker.stopping-time): Added.
(.timeline-ruler > .markers > .marker.current-time):
(.timeline-ruler > .markers > .marker:matches(.stopping-time, .current-time)::after): Added.
(@media (prefers-color-scheme: dark) .timeline-ruler > .markers > .marker.stopping-time): Added.
(.timeline-ruler > .markers > .marker.current-time::after): Deleted.
Make the current time marker always on top (z-index).

• Localizations/en.lproj/localizedStrings.js:

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• UserInterface/Models/TimelineMarker.js (modified) (1 diff)
• UserInterface/Views/TimelineOverview.js (modified) (2 diffs)
• UserInterface/Views/TimelineRuler.css (modified) (2 diffs)
• UserInterface/Views/TimelineRuler.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-11-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Timelines: add a marker for when a stop was requested
+        https://bugs.webkit.org/show_bug.cgi?id=203935
+
+        Reviewed by Timothy Hatcher.
+
+        After r244195, the Web Inspector frontend doesn't stop updating the current time marker
+        until after it receives all of the corresponding `*.trackingComplete` events. This means
+        that sometimes, the current time marker can move far past the time at which the stop was
+        requested, such as if there's a blocking script.
+
+        We should indicate where the stop was requested, as that is often right after a particular
+        issue is reproduced during a timeline recording, rather than have the user try to figure out
+        where they stopped.
+
+        Only keep a marker for the last stop request, and hide the marker once capturing resumes.
+
+        It's still useful to have the current time marker continue updating, as we should show all
+        the information we have about captured things, such as blocking scripts.
+
+        * UserInterface/Views/TimelineOverview.js:
+        (WI.TimelineOverview):
+        (WI.TimelineOverview.prototype._handleTimelineCapturingStateChanged):
+
+        * UserInterface/Models/TimelineMarker.js:
+        * UserInterface/Views/TimelineRuler.js:
+        (WI.TimelineRuler.prototype.addMarker):
+        * UserInterface/Views/TimelineRuler.css:
+        (.timeline-ruler > .markers > .marker.stopping-time): Added.
+        (.timeline-ruler > .markers > .marker.current-time):
+        (.timeline-ruler > .markers > .marker:matches(.stopping-time, .current-time)::after): Added.
+        (@media (prefers-color-scheme: dark) .timeline-ruler > .markers > .marker.stopping-time): Added.
+        (.timeline-ruler > .markers > .marker.current-time::after): Deleted.
+        Make the current time marker always on top (`z-index`).
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2019-11-07  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -884 +884 @@
 localizedStrings["Recording Timeline Data"] = "Recording Timeline Data";
 localizedStrings["Recording Warning: %s"] = "Recording Warning: %s";
+localizedStrings["Recording stop requested \u2014 %s"] = "Recording stop requested \u2014 %s";
 localizedStrings["Recordings"] = "Recordings";
 localizedStrings["Redirect Response"] = "Redirect Response";

trunk/Source/WebInspectorUI/UserInterface/Models/TimelineMarker.js

@@ -84 +84 @@
 
 WI.TimelineMarker.Type = {
+    StoppingTime: "stopping-time",
     CurrentTime: "current-time",
     LoadEvent: "load-event",

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

@@ -86 +86 @@
         this.addSubview(this._timelineRuler);
 
+        this._stoppingTimeMarker = null;
         this._currentTimeMarker = new WI.TimelineMarker(0, WI.TimelineMarker.Type.CurrentTime);
         this._timelineRuler.addMarker(this._currentTimeMarker);
@@ -1030 +1031 @@
     {
         switch (WI.timelineManager.capturingState) {
+        case WI.TimelineManager.CapturingState.Starting:
+            if (this._stoppingTimeMarker)
+                this._stoppingTimeMarker.time = -1; // Hide the marker when capturing resumes.
+            break;
+
         case WI.TimelineManager.CapturingState.Active:
             this._editInstrumentsButton.enabled = false;
             this._stopEditingInstruments();
+            break;
+
+        case WI.TimelineManager.CapturingState.Stopping:
+            if (!this._stoppingTimeMarker) {
+                this._stoppingTimeMarker = new WI.TimelineMarker(this._currentTime, WI.TimelineMarker.Type.StoppingTime);
+                this._timelineRuler.addMarker(this._stoppingTimeMarker);
+            } else
+                this._stoppingTimeMarker.time = this._currentTime;
             break;
 

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css

@@ -173 +173 @@
 }
 
+.timeline-ruler > .markers > .marker.stopping-time {
+    color: hsl(0, 0%, 75%);
+}
+
 .timeline-ruler > .markers > .marker.current-time {
+    z-index: 1;
     color: red;
 }
 
-.timeline-ruler > .markers > .marker.current-time::after {
+.timeline-ruler > .markers > .marker:matches(.stopping-time, .current-time)::after {
     top: var(--timeline-ruler-marker-after-offset);
     width: var(--timeline-ruler-marker-after-size);
@@ -288 +293 @@
 
 @media (prefers-color-scheme: dark) {
+    .timeline-ruler > .markers > .marker.stopping-time {
+        color: lightgrey;
+    }
+
     .timeline-ruler > .markers > .marker.dom-content-event {
         color: hsl(240, 100%, 70%);

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

@@ -349 +349 @@
 
         switch (marker.type) {
+        case WI.TimelineMarker.Type.StoppingTime:
+            markerElement.title = WI.UIString("Recording stop requested \u2014 %s").format(Number.secondsToString(markerTime));
+            break;
         case WI.TimelineMarker.Type.LoadEvent:
             markerElement.title = WI.UIString("Load \u2014 %s").format(Number.secondsToString(markerTime));