DevTools: bring violations and timeline warnings in sync.

third_party/WebKit/Source/devtools/front_end/timeline_model/TimelineModel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 626 matching lines @@
    * @param {!SDK.TracingModel.Event} event
    * @return {boolean}
    */
   _processEvent(event) {
     var eventStack = this._eventStack;
     while (eventStack.length && eventStack.peekLast().endTime <= event.startTime)
       eventStack.pop();
 
     var recordTypes = TimelineModel.TimelineModel.RecordType;
 
+    if (!eventStack.length) {
+      if (this._currentTaskLayoutAndRecalcEvents && this._currentTaskLayoutAndRecalcEvents.length) {

[alph, 2016/11/19 05:36:27]

It won't work for the very last top level event.

+        var totalTime = this._currentTaskLayoutAndRecalcEvents.reduce((time, event) => time + event.duration, 0);

[alph, 2016/11/19 05:36:27]

We use const if the value is never changed.

+        if (totalTime > TimelineModel.TimelineModel.Thresholds.ForcedLayout) {
+          for (var e of this._currentTaskLayoutAndRecalcEvents) {
+            var timelineData = TimelineModel.TimelineData.forEvent(e);

[caseq, 2016/11/19 05:51:08]

This has the same name as a different variable below -- while this works, we
typically extract the definition to the top in such cases. Or use a different
name.

+            timelineData.warning = e.name === recordTypes.Layout ?
+                TimelineModel.TimelineModel.WarningType.ForcedLayout :
+                TimelineModel.TimelineModel.WarningType.ForcedStyle;
+          }
+        }
+      }
+      this._currentTaskLayoutAndRecalcEvents = [];
+    }
+
     if (this._currentScriptEvent && event.startTime > this._currentScriptEvent.endTime)
       this._currentScriptEvent = null;
 
     var eventData = event.args['data'] || event.args['beginData'] || {};
     var timelineData = TimelineModel.TimelineData.forEvent(event);
     if (eventData['stackTrace'])
       timelineData.stackTrace = eventData['stackTrace'];
     if (timelineData.stackTrace && event.name !== recordTypes.JSSample) {
       // TraceEvents come with 1-based line & column numbers. The frontend code
       // requires 0-based ones. Adjust the values.
@@ skipping 18 matching lines @@
         this._lastScheduleStyleRecalculation[eventData['frame']] = event;
         break;
 
       case recordTypes.UpdateLayoutTree:
       case recordTypes.RecalculateStyles:
         this._invalidationTracker.didRecalcStyle(event);
         if (event.args['beginData'])
           timelineData.setInitiator(this._lastScheduleStyleRecalculation[event.args['beginData']['frame']]);
         this._lastRecalculateStylesEvent = event;
         if (this._currentScriptEvent)
-          timelineData.warning = TimelineModel.TimelineModel.WarningType.ForcedStyle;
+          this._currentTaskLayoutAndRecalcEvents.push(event);
         break;
 
       case recordTypes.ScheduleStyleInvalidationTracking:
       case recordTypes.StyleRecalcInvalidationTracking:
       case recordTypes.StyleInvalidatorInvalidationTracking:
       case recordTypes.LayoutInvalidationTracking:
       case recordTypes.LayerInvalidationTracking:
       case recordTypes.PaintInvalidationTracking:
       case recordTypes.ScrollInvalidationTracking:
         this._invalidationTracker.addInvalidation(new TimelineModel.InvalidationTrackingEvent(event));
@@ skipping 12 matching lines @@
 
       case recordTypes.Layout:
         this._invalidationTracker.didLayout(event);
         var frameId = event.args['beginData']['frame'];
         timelineData.setInitiator(this._layoutInvalidate[frameId]);
         // In case we have no closing Layout event, endData is not available.
         if (event.args['endData'])
           timelineData.backendNodeId = event.args['endData']['rootNode'];
         this._layoutInvalidate[frameId] = null;
         if (this._currentScriptEvent)
-          timelineData.warning = TimelineModel.TimelineModel.WarningType.ForcedLayout;
+          this._currentTaskLayoutAndRecalcEvents.push(event);
         break;
 
       case recordTypes.FunctionCall:
         // Compatibility with old format.
         if (typeof eventData['scriptName'] === 'string')
           eventData['url'] = eventData['scriptName'];
         if (typeof eventData['scriptLine'] === 'number')
           eventData['lineNumber'] = eventData['scriptLine'];
+
+        if (event.duration > TimelineModel.TimelineModel.Thresholds.Handler) {
+          var parentEvent = eventStack.peekLast();
+          if (parentEvent && parentEvent.name === recordTypes.EventDispatch) {

[caseq, 2016/11/19 05:51:08]

Why do it here? Let's do it when handling corresponding "parent" event instead.

+            TimelineModel.TimelineData.forEvent(parentEvent).warning =
+                TimelineModel.TimelineModel.WarningType.LongHandler;
+          }
+        }
+
+        if (event.duration > TimelineModel.TimelineModel.Thresholds.RecurringHandler) {
+          var parentEvent = eventStack.peekLast();
+          if (parentEvent &&
+              (parentEvent.name === recordTypes.TimerFire || parentEvent.name === recordTypes.FireAnimationFrame)) {

[caseq, 2016/11/19 05:51:08]

ditto.

+            TimelineModel.TimelineData.forEvent(parentEvent).warning =
+                TimelineModel.TimelineModel.WarningType.LongRecurringHandler;
+          }
+        }
+
       // Fallthrough.
+
       case recordTypes.EvaluateScript:
       case recordTypes.CompileScript:
         if (typeof eventData['lineNumber'] === 'number')
           --eventData['lineNumber'];
         if (typeof eventData['columnNumber'] === 'number')
           --eventData['columnNumber'];
+
       // Fallthrough intended.
+
       case recordTypes.RunMicrotasks:
         // Microtasks technically are not necessarily scripts, but for purpose of
         // forced sync style recalc or layout detection they are.
         if (!this._currentScriptEvent)
           this._currentScriptEvent = event;
         break;
 
       case recordTypes.SetLayerTreeId:
         this._inspectedTargetLayerTreeId = event.args['layerTreeId'] || event.args['data']['layerTreeId'];
         break;
@@ skipping 76 matching lines @@
         this._hadCommitLoad = true;
         this._firstCompositeLayers = null;
         break;
 
       case recordTypes.CompositeLayers:
         if (!this._firstCompositeLayers && this._hadCommitLoad)
           this._firstCompositeLayers = event;
         break;
 
       case recordTypes.FireIdleCallback:
-        if (event.duration > eventData['allottedMilliseconds'])
+        if (event.duration >
+            eventData['allottedMilliseconds'] + TimelineModel.TimelineModel.Thresholds.IdleCallbackAddon)
           timelineData.warning = TimelineModel.TimelineModel.WarningType.IdleDeadlineExceeded;
-
         break;
     }
     if (SDK.TracingModel.isAsyncPhase(event.phase))
       return true;
     var duration = event.duration;
     if (!duration)
       return true;
     if (eventStack.length) {
       var parent = eventStack.peekLast();
       parent.selfTime -= duration;
@@ skipping 399 matching lines @@
   LatencyInfo: 'latencyInfo'
 };
 
 /**
  * @enum {string}
  */
 TimelineModel.TimelineModel.WarningType = {
   ForcedStyle: 'ForcedStyle',
   ForcedLayout: 'ForcedLayout',
   IdleDeadlineExceeded: 'IdleDeadlineExceeded',
+  LongHandler: 'LongHandler',
+  LongRecurringHandler: 'LongRecurringHandler',
   V8Deopt: 'V8Deopt'
 };
 
 TimelineModel.TimelineModel.MainThreadName = 'main';
 TimelineModel.TimelineModel.WorkerThreadName = 'DedicatedWorker Thread';
 TimelineModel.TimelineModel.RendererMainThreadName = 'CrRendererMain';
 
 /**
  * @enum {symbol}
  */
 TimelineModel.TimelineModel.AsyncEventGroup = {
   animation: Symbol('animation'),
   console: Symbol('console'),
   userTiming: Symbol('userTiming'),
   input: Symbol('input')
 };
 
 
 TimelineModel.TimelineModel.DevToolsMetadataEvent = {
   TracingStartedInBrowser: 'TracingStartedInBrowser',
   TracingStartedInPage: 'TracingStartedInPage',
   TracingSessionIdForWorker: 'TracingSessionIdForWorker',
 };
 
+TimelineModel.TimelineModel.Thresholds = {
+  Handler: 150,

[alph, 2016/11/19 05:36:27]

Perhaps, there should be different types of handlers, e.g. 150 is to much for
mousemove. Not for this patch though. 

+  RecurringHandler: 50,
+  ForcedLayout: 30,
+  IdleCallbackAddon: 5
+};
+
 /**
  * @unrestricted
  */
 TimelineModel.TimelineModel.VirtualThread = class {
   /**
    * @param {string} name
    */
   constructor(name) {
     this.name = name;
     /** @type {!Array<!SDK.TracingModel.Event>} */
@@ skipping 701 matching lines @@
     var data = event[TimelineModel.TimelineData._symbol];
     if (!data) {
       data = new TimelineModel.TimelineData();
       event[TimelineModel.TimelineData._symbol] = data;
     }
     return data;
   }
 };
 
 TimelineModel.TimelineData._symbol = Symbol('timelineData');