Timeline: visually distinguish idle frames

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 562 matching lines @@
     {
         var frame = this._entryIndexToFrame[entryIndex];
         if (frame) {
             var /** @const */ vPadding = 1;
             var /** @const */ hPadding = 2;
             barX += hPadding;
             barWidth -= 2 * hPadding;
             barY += vPadding;
             barHeight -= 2 * vPadding + 1;
 
-            context.fillStyle = "#ccc";
+            context.fillStyle = frame.idle ? "#eee" : "#ccc";
             context.fillRect(barX, barY, barWidth, barHeight);
 
             // Draw frame perforation.
             context.fillStyle = "white";
             for (var i = 1; i < barWidth; i += 4) {
                 context.fillRect(barX + i, barY + 1, 2, 2);
                 context.fillRect(barX + i, barY + barHeight - 3, 2, 2);
             }
 
             var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
@@ skipping 988 matching lines @@
 /**
   * @constructor
   * @param {!WebInspector.TimelineSelection} selection
   * @param {number} entryIndex
   */
 WebInspector.TimelineFlameChartView.Selection = function(selection, entryIndex)
 {
     this.timelineSelection = selection;
     this.entryIndex = entryIndex;
 }