Support warning decorations in Timeline flame chart based on trace events

BUG=361045

Review URL: https://codereview.chromium.org/270553005

git-svn-id: svn://svn.chromium.org/blink/trunk@173654 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/devtools.gypi

@@ -137,7 +137,6 @@
             'front_end/sdk/Target.js',
             'front_end/sdk/TempFile.js',
             'front_end/sdk/TimelineManager.js',
-            'front_end/sdk/TracingModel.js',
             'front_end/sdk/UISourceCode.js',
             'front_end/sdk/WorkerManager.js',
             'front_end/sdk/WorkerTargetManager.js',
@@ -365,6 +364,7 @@
             'front_end/timeline/TimelinePowerOverview.js',
             'front_end/timeline/TimelinePanel.js',
             'front_end/timeline/TimelineTracingView.js',
+            'front_end/timeline/TracingModel.js',
         ],
         'devtools_profiler_js_files': [
             'front_end/profiler/CPUProfileBottomUpDataGrid.js',

third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js

@@ -633,7 +633,42 @@ WebInspector.TracingBasedTimelineFlameChartDataProvider.prototype = {
      */
     decorateEntry: function(entryIndex, context, text, barX, barY, barWidth, barHeight, offsetToPosition)
     {
-        return false;
+        if (barWidth < 5)
+            return false;
+
+        var record = this._records[entryIndex];
+        var timelineData = this._timelineData;
+
+        var category = WebInspector.TimelineUIUtils.styleForTimelineEvent(record.name).category;
+        // Paint text using white color on dark background.
+        if (text) {
+            context.save();
+            context.fillStyle = "white";
+            context.shadowColor = "rgba(0, 0, 0, 0.1)";
+            context.shadowOffsetX = 1;
+            context.shadowOffsetY = 1;
+            context.font = this._font;
+            context.fillText(text, barX + this.textPadding(), barY + barHeight - this.textBaseline());
+            context.restore();
+        }
+
+        if (this._model.bindings().eventWarning(record)) {
+            context.save();
+
+            context.rect(barX, barY, barWidth, this.barHeight());
+            context.clip();
+
+            context.beginPath();
+            context.fillStyle = "red";
+            context.moveTo(barX + barWidth - 15, barY + 1);
+            context.lineTo(barX + barWidth - 1, barY + 1);
+            context.lineTo(barX + barWidth - 1, barY + 15);
+            context.fill();
+
+            context.restore();
+        }
+
+        return true;
     },
 
     /**
@@ -642,10 +677,11 @@ WebInspector.TracingBasedTimelineFlameChartDataProvider.prototype = {
      */
     forceDecoration: function(entryIndex)
     {
-        return false;
+        var record = this._records[entryIndex];
+        return !!this._model.bindings().eventWarning(record);
     },
 
-    /**
+   /**
      * @param {number} entryIndex
      * @return {?{startTimeOffset: number, endTimeOffset: number}}
      */

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

@@ -46,6 +46,7 @@ importScript("TimelineFlameChart.js");
 importScript("TimelineUIUtils.js");
 importScript("TimelineView.js");
 importScript("TimelineTracingView.js");
+importScript("TracingModel.js");
 
 /**
  * @constructor

third_party/WebKit/Source/devtools/front_end/sdk/TracingModel.js → third_party/WebKit/Source/devtools/front_end/timeline/TracingModel.js

@@ -174,6 +174,7 @@ WebInspector.TracingModel.prototype = {
 
     _tracingComplete: function()
     {
+        this._bindings = new WebInspector.TracingModel.EventBindings(this);
         this._active = false;
         if (!this._pendingStopCallback)
             return;
@@ -181,6 +182,14 @@ WebInspector.TracingModel.prototype = {
         this._pendingStopCallback = null;
     },
 
+    /**
+     * @return {!WebInspector.TracingModel.EventBindings}
+     */
+    bindings: function()
+    {
+        return this._bindings;
+    },
+
     reset: function()
     {
         this._processById = {};
@@ -192,6 +201,7 @@ WebInspector.TracingModel.prototype = {
         this._inspectedTargetMainThreadEvents = [];
         this._inspectedTargetLayerTreeHostId = 0;
         this._frameLifecycleEvents = [];
+        this._bindings = null;
     },
 
     /**
@@ -290,6 +300,43 @@ WebInspector.TracingModel.prototype = {
     __proto__: WebInspector.Object.prototype
 }
 
+/**
+ * @param {!WebInspector.TracingModel} model
+ * @constructor
+ */
+WebInspector.TracingModel.EventBindings = function(model)
+{
+    this._eventToWarning = new Map();
+    this._model = model;
+    this._calculateWarnings();
+}
+
+WebInspector.TracingModel.EventBindings.prototype = {
+    /**
+     * @param {!WebInspector.TracingModel.Event} event
+     * @return {string|undefined}
+     */
+    eventWarning: function(event)
+    {
+        return this._eventToWarning.get(event);
+    },
+
+    _calculateWarnings: function()
+    {
+        var events = this._model.inspectedTargetMainThreadEvents();
+        var currentScriptEvent = null;
+        for (var i = 0, length = events.length; i < length; i++) {
+            var event = events[i];
+            if (currentScriptEvent && event.startTime > currentScriptEvent.endTime)
+                currentScriptEvent = null;
+            if (event.name === WebInspector.TimelineModel.RecordType.Layout && currentScriptEvent)
+                this._eventToWarning.put(event, WebInspector.UIString("Forced synchronous layout is a possible performance bottleneck."));
+            if (!currentScriptEvent && (event.name === WebInspector.TimelineModel.RecordType.EvaluateScript || event.name === WebInspector.TimelineModel.RecordType.FunctionCall))
+                currentScriptEvent = event;
+        }
+    }
+}
+
 /**
  * @constructor
  * @param {!WebInspector.TracingModel.EventPayload} payload

third_party/WebKit/Source/devtools/scripts/frontend_modules.json

@@ -83,7 +83,6 @@
             "sdk/ResourceType.js",
             "sdk/ResourceUtils.js",
             "sdk/SourceMap.js",
-            "sdk/TracingModel.js",
             "sdk/NetworkManager.js",
             "sdk/NetworkRequest.js",
             "sdk/UISourceCode.js",
@@ -318,7 +317,8 @@
             "timeline/TimelinePresentationModel.js",
             "timeline/TimelineUIUtils.js",
             "timeline/TimelineView.js",
-            "timeline/TimelineTracingView.js"
+            "timeline/TimelineTracingView.js",
+            "timeline/TracingModel.js"
         ]
     },
     {