Support warning decorations in Timeline flame chart based on trace events

Source/devtools/front_end/timeline/TimelineFlameChart.js

 /*
  * Copyright (C) 2014 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 602 matching lines @@
      * @param {?string} text
      * @param {number} barX
      * @param {number} barY
      * @param {number} barWidth
      * @param {number} barHeight
      * @param {function(number):number} offsetToPosition
      * @return {boolean}
      */
     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();
+        }
+
+        var bindings = this._model.bindings();
+        if (bindings && 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;
     },
 
     /**
      * @param {number} entryIndex
      * @return {boolean}
      */
     forceDecoration: function(entryIndex)
     {
-        return false;
+        var record = this._records[entryIndex];
+        var bindings = this._model.bindings();
+        return !!bindings && !!bindings.eventWarning(record);
     },
 
-    /**
+   /**
      * @param {number} entryIndex
      * @return {?{startTimeOffset: number, endTimeOffset: number}}
      */
     highlightTimeRange: function(entryIndex)
     {
         var record = this._records[entryIndex];
         if (!record || this._isHeaderRecord(record))
             return null;
         return {
             startTimeOffset: this._toTimelineTime(record.startTime - this._zeroTime),
@@ skipping 242 matching lines @@
     _onEntrySelected: function(event)
     {
         var entryIndex = event.data;
         var record = this._dataProvider._records[entryIndex];
         if (record instanceof WebInspector.TimelineModel.RecordImpl)
             this._delegate.select(WebInspector.TimelineSelection.fromRecord(record));
     },
 
     __proto__: WebInspector.VBox.prototype
 }