DevTools: Introduce FrameStartedLoading event

Show the navigation time mark on the timeline.

Change-Id: I1d8d832f40b17094f84ef1b1ae366beabe6016ec
Reviewed-on: https://chromium-review.googlesource.com/1036619Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Alexei Filippov <alph@chromium.org>
Cr-Commit-Position: refs/heads/master@{#555208}

third_party/WebKit/LayoutTests/http/tests/devtools/tracing/timeline-misc/timeline-load-event-expected.txt

@@ -2,6 +2,15 @@ Tests the load event.
 
 Page reloaded.
 Model records:
+FrameStartedLoading Properties:
+{
+    data : {
+        frame : <string>
+    }
+    endTime : <number>
+    startTime : <number>
+    type : "FrameStartedLoading"
+}
 MarkDOMContent Properties:
 {
     data : {

third_party/WebKit/LayoutTests/http/tests/devtools/tracing/timeline-misc/timeline-load-event.js

@@ -23,6 +23,7 @@
   await PerformanceTestRunner.stopTimeline();
 
   TestRunner.addResult('Model records:');
+  PerformanceTestRunner.printTimelineRecords('FrameStartedLoading');
   PerformanceTestRunner.printTimelineRecords('MarkDOMContent');
   PerformanceTestRunner.printTimelineRecords('MarkLoad');
   TestRunner.addResult('Timestamp records:');
@@ -30,8 +31,8 @@
   PerformanceTestRunner.printTimestampRecords('MarkLoad');
   PerformanceTestRunner.printTimestampRecords('MarkFirstPaint');
 
-  const eventDividers = PerformanceTestRunner.timelineModel().eventDividers();
-  eventDividers.reduce((prev, current) => {
+  const markers = PerformanceTestRunner.timelineModel().timeMarkerEvents();
+  markers.reduce((prev, current) => {
     TestRunner.assertGreaterOrEqual(current.startTime, prev.startTime,
         'Event divider timestamps should be monotonically non-decreasing');
     return current;

third_party/blink/renderer/core/inspector/inspector_trace_events.cc

@@ -211,6 +211,12 @@ void InspectorTraceEvents::PaintTiming(Document* document,
                                    "frame", ToTraceValue(document->GetFrame()));
 }
 
+void InspectorTraceEvents::FrameStartedLoading(LocalFrame* frame,
+                                               FrameLoadType) {
+  TRACE_EVENT_INSTANT1("devtools.timeline", "FrameStartedLoading",
+                       TRACE_EVENT_SCOPE_THREAD, "frame", ToTraceValue(frame));
+}
+
 namespace {
 
 void SetNodeInfo(TracedValue* value,

third_party/blink/renderer/core/inspector/inspector_trace_events.h

@@ -11,6 +11,7 @@
 #include "base/optional.h"
 #include "third_party/blink/renderer/core/core_export.h"
 #include "third_party/blink/renderer/core/css/css_selector.h"
+#include "third_party/blink/renderer/core/loader/frame_loader_types.h"
 #include "third_party/blink/renderer/platform/heap/handle.h"
 #include "third_party/blink/renderer/platform/instrumentation/tracing/trace_event.h"
 #include "third_party/blink/renderer/platform/instrumentation/tracing/traced_value.h"
@@ -110,6 +111,8 @@ class CORE_EXPORT InspectorTraceEvents
 
   void PaintTiming(Document*, const char* name, double timestamp);
 
+  void FrameStartedLoading(LocalFrame*, FrameLoadType);
+
   void Trace(blink::Visitor*) {}
 
  private:

third_party/blink/renderer/core/probe/CoreProbes.json5

@@ -198,6 +198,7 @@
         "didFinishLoading",
         "didReceiveData",
         "didReceiveResourceResponse",
+        "frameStartedLoading",
         "paintTiming",
         "willSendRequest",
       ]

third_party/blink/renderer/devtools/front_end/performance_test_runner/TimelineTestRunner.js

@@ -207,7 +207,7 @@ PerformanceTestRunner.walkTimelineEventTreeUnderNode = function(callback, root,
 };
 
 PerformanceTestRunner.printTimestampRecords = function(typeName) {
-  const dividers = PerformanceTestRunner.timelineModel().eventDividers();
+  const dividers = PerformanceTestRunner.timelineModel().timeMarkerEvents();
 
   for (const event of dividers) {
     if (event.name === typeName)

third_party/blink/renderer/devtools/front_end/timeline/TimelinePanel.js

@@ -745,7 +745,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
     const recordTypes = TimelineModel.TimelineModel.RecordType;
     const zeroTime = timelineModel.minimumRecordTime();
     const filter = Timeline.TimelineUIUtils.paintEventsFilter();
-    for (const event of timelineModel.eventDividers()) {
+    for (const event of timelineModel.timeMarkerEvents()) {
       if (event.name === recordTypes.TimeStamp || event.name === recordTypes.ConsoleTime)
         continue;
       if (!filter.accept(event))

third_party/blink/renderer/devtools/front_end/timeline/TimelineUIUtils.js

@@ -109,6 +109,8 @@ Timeline.TimelineUIUtils = class {
         new Timeline.TimelineRecordStyle(Common.UIString('Evaluate Module'), categories['scripting']);
     eventStyles[recordTypes.ParseScriptOnBackground] =
         new Timeline.TimelineRecordStyle(Common.UIString('Parse Script'), categories['scripting']);
+    eventStyles[recordTypes.FrameStartedLoading] =
+        new Timeline.TimelineRecordStyle(Common.UIString('Frame Started Loading'), categories['loading'], true);
     eventStyles[recordTypes.MarkLoad] =
         new Timeline.TimelineRecordStyle(Common.UIString('Load event'), categories['scripting'], true);
     eventStyles[recordTypes.MarkDOMContent] =
@@ -1778,8 +1780,12 @@ Timeline.TimelineUIUtils = class {
     }
     const recordTypes = TimelineModel.TimelineModel.RecordType;
     let tall = false;
-    let color = 'green';
+    let color = 'grey';
     switch (event.name) {
+      case recordTypes.FrameStartedLoading:
+        color = 'green';
+        tall = true;
+        break;
       case recordTypes.MarkDOMContent:
         color = 'blue';
         tall = true;

third_party/blink/renderer/devtools/front_end/timeline_model/TimelineModel.js

@@ -91,6 +91,7 @@ TimelineModel.TimelineModel = class {
   static isMarkerEvent(event) {
     const recordTypes = TimelineModel.TimelineModel.RecordType;
     switch (event.name) {
+      case recordTypes.FrameStartedLoading:
       case recordTypes.TimeStamp:
       case recordTypes.MarkFirstPaint:
       case recordTypes.MarkFCP:
@@ -124,7 +125,7 @@ TimelineModel.TimelineModel = class {
    */
   static eventFrameId(event) {
     const data = event.args['data'] || event.args['beginData'];
-    return (data && data['frame']) || '';
+    return data && data['frame'] || '';
   }
 
   /**
@@ -538,7 +539,7 @@ TimelineModel.TimelineModel = class {
           eventStack.push(event);
         }
         if (TimelineModel.TimelineModel.isMarkerEvent(event))
-          this._eventDividers.push(event);
+          this._timeMarkerEvents.push(event);
 
         track.events.push(event);
         this._inspectedTargetEvents.push(event);
@@ -848,10 +849,15 @@ TimelineModel.TimelineModel = class {
         break;
       }
 
+      case recordTypes.FrameStartedLoading:
+        if (this._mainFrame.frameId !== event.args['frame'])
+          return false;
+        break;
+
       case recordTypes.MarkDOMContent:
       case recordTypes.MarkLoad: {
         const frameId = TimelineModel.TimelineModel.eventFrameId(event);
-        if (!this._pageFrames.get(frameId))
+        if (!this._pageFrames.has(frameId))
           return false;
         break;
       }
@@ -1012,7 +1018,7 @@ TimelineModel.TimelineModel = class {
     /** @type {!Array<!SDK.TracingModel.Event>} */
     this._inspectedTargetEvents = [];
     /** @type {!Array<!SDK.TracingModel.Event>} */
-    this._eventDividers = [];
+    this._timeMarkerEvents = [];
     /** @type {?string} */
     this._sessionId = null;
     /** @type {?number} */
@@ -1081,8 +1087,8 @@ TimelineModel.TimelineModel = class {
   /**
    * @return {!Array<!SDK.TracingModel.Event>}
    */
-  eventDividers() {
-    return this._eventDividers;
+  timeMarkerEvents() {
+    return this._timeMarkerEvents;
   }
 
   /**
@@ -1199,6 +1205,7 @@ TimelineModel.TimelineModel.RecordType = {
   CompileModule: 'v8.compileModule',
   EvaluateModule: 'v8.evaluateModule',
 
+  FrameStartedLoading: 'FrameStartedLoading',
   CommitLoad: 'CommitLoad',
   MarkLoad: 'MarkLoad',
   MarkDOMContent: 'MarkDOMContent',