DevTools: Timeline warning colors should scale with severity.

third_party/WebKit/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 725 matching lines @@
         var data = this._entryData[entryIndex];
         var type = this._entryType(entryIndex);
         if (type === WebInspector.TimelineFlameChartEntryType.Frame) {
             var /** @const */ vPadding = 1;
             var /** @const */ hPadding = 1;
             var frame = /** {!WebInspector.TimelineFrame} */ (data);
             barX += hPadding;
             barWidth -= 2 * hPadding;
             barY += vPadding;
             barHeight -= 2 * vPadding + 1;
-            context.fillStyle = frame.idle ? "white" : (frame.hasWarnings() ? "#fad1d1" : "#d7f0d1");
+
+            if (frame.hasWarnings()) {
+                var intensity = Number.constrain(frame.duration / (30 + frame.duration), 0, 1).toFixed(3);

[alph, 2016/08/31 19:38:43]

You have a different formula here. Is it intended?

+                context.fillStyle = `hsla(0, 80%, 85%, ${intensity})`;
+            } else {
+                context.fillStyle = frame.idle ? "white" : "#d7f0d1";
+            }
             context.fillRect(barX, barY, barWidth, barHeight);
             var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
             var textWidth = context.measureText(frameDurationText).width;
             if (barWidth >= textWidth) {
                 context.fillStyle = this.textColor(entryIndex);
                 context.fillText(frameDurationText, barX + (barWidth - textWidth) / 2, barY + barHeight - 3);
             }
             return true;
         }
 
@@ skipping 759 matching lines @@
 /**
   * @constructor
   * @param {!WebInspector.TimelineSelection} selection
   * @param {number} entryIndex
   */
 WebInspector.TimelineFlameChartView.Selection = function(selection, entryIndex)
 {
     this.timelineSelection = selection;
     this.entryIndex = entryIndex;
 }