DevTools: Timeline warning colors should scale with severity.

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

 /*
  * Copyright (C) 2013 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 371 matching lines @@
      */
     update: function()
     {
         WebInspector.TimelineEventOverview.prototype.update.call(this);
         var height = this._canvas.height;
         var timeOffset = this._model.minimumRecordTime();
         var timeSpan = this._model.maximumRecordTime() - timeOffset;
         var scale = this._canvas.width / timeSpan;
         var frames = this._frameModel.frames();
         var ctx = this._context;
-        var fillPath = new Path2D();
-        var markersPath = new Path2D();
+
         for (var i = 0; i < frames.length; ++i) {
             var frame = frames[i];
             if (!frame.hasWarnings())
                 continue;
             paintWarningDecoration(frame.startTime, frame.duration);
         }
 
         var events = this._model.mainThreadEvents();
         for (var i = 0; i < events.length; ++i) {
             if (!events[i].warning)
                 continue;
             paintWarningDecoration(events[i].startTime, events[i].duration);
         }
 
-        ctx.fillStyle = "hsl(0, 80%, 90%)";
-        ctx.strokeStyle = "red";
-        ctx.lineWidth = 2 * window.devicePixelRatio;
-        ctx.fill(fillPath);
-        ctx.stroke(markersPath);
 
         /**
          * @param {number} time
          * @param {number} duration
          */
         function paintWarningDecoration(time, duration)
         {
             var x = Math.round(scale * (time - timeOffset));
             var w = Math.round(scale * duration);
-            fillPath.rect(x, 0, w, height);
-            markersPath.moveTo(x + w, 0);
-            markersPath.lineTo(x + w, height);
+            var markersPath = new Path2D();
+
+            var overage = duration - 16;

[caseq, 2016/08/16 18:37:16]

should we do it just for frames perhaps? how does it work on lots of short
layout thrashing events?

+            var intensity = Number.constrain(overage / (30 + overage), 0, 1).toFixed(3);
+            ctx.fillStyle = `hsla(0, 80%, 85%, ${intensity})`;
+            ctx.fillRect(x, 0, w, height);
+
+            markersPath.moveTo(x, 0);
+            markersPath.lineTo(x + w, 0);
+            ctx.strokeStyle = `hsla(0, 80%, 45%, ${intensity})`;
+            ctx.lineWidth = 2 * window.devicePixelRatio;
+            ctx.stroke(markersPath);
         }
     },
 
     __proto__: WebInspector.TimelineEventOverview.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {!WebInspector.TimelineModel} model
@@ skipping 377 matching lines @@
             counters[group] = this._quantDuration;
             this._callback(counters);
             interval -= this._quantDuration;
         }
         this._counters = [];
         this._counters[group] = interval;
         this._lastTime = time;
         this._remainder = this._quantDuration - interval;
     }
 }