Timeline: visually distinguish idle frames

Source/devtools/front_end/timeline/TimelineFrameOverview.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 184 matching lines @@
      * @param {!Array.<!WebInspector.TimelineFrame>} frames
      * @param {number} framesPerBar
      * @return {!Array.<!WebInspector.TimelineFrame>}
      */
     _aggregateFrames: function(frames, framesPerBar)
     {
         var visibleFrames = [];
         for (var barIndex = 0, currentFrame = 0; currentFrame < frames.length; ++barIndex) {
             var barStartTime = frames[currentFrame].startTime;
             var longestFrame = null;
-            var longestDuration = 0;
+            var longestDuration;
 
             for (var lastFrame = Math.min(Math.floor((barIndex + 1) * framesPerBar), frames.length);
                  currentFrame < lastFrame; ++currentFrame) {
-                var duration = frames[currentFrame].duration;
+                var frame = frames[currentFrame];
+                var duration = frame.idle ? 0 : frame.duration; // Only consider idle frames if there are no regular frames.
                 if (!longestFrame || longestDuration < duration) {
-                    longestFrame = frames[currentFrame];
+                    longestFrame = frame;
                     longestDuration = duration;
                 }
             }
             var barEndTime = frames[currentFrame - 1].endTime;
             if (longestFrame) {
                 visibleFrames.push(longestFrame);
                 this._barTimes.push({ startTime: barStartTime, endTime: barEndTime });
             }
         }
         return visibleFrames;
@@ skipping 122 matching lines @@
             this._context.fillRect(0, y, this._maxInnerBarWidth, Math.floor(height));
             this._context.strokeStyle = WebInspector.TimelineUIUtils.categories()[category].borderColor;
             this._context.beginPath();
             this._context.moveTo(0, y);
             this._context.lineTo(this._maxInnerBarWidth, y);
             this._context.stroke();
             this._context.restore();
 
             bottomOffset -= height;
         }
+        // Skip outline for idle frames, unless frame is selected.
+        if (frame.idle && index !== this._activeBarIndex)
+            return;
+
         // Draw a contour for the total frame time.
-        var y0 = Math.floor(windowHeight - frame.duration * this._scale) + 0.5;
+        var y0 = frame.idle ? bottomOffset + 0.5 : Math.floor(windowHeight - frame.duration * this._scale) + 0.5;
         var y1 = windowHeight + 0.5;
 
         this._context.strokeStyle = index === this._activeBarIndex ? "rgba(0, 0, 0, 0.6)" : "rgba(90, 90, 90, 0.2)";
         this._context.beginPath();
         this._context.moveTo(x, y1);
         this._context.lineTo(x, y0);
         this._context.lineTo(x + width, y0);
         this._context.lineTo(x + width, y1);
         this._context.stroke();
     },
@@ skipping 96 matching lines @@
      * @param {number} time
      * @param {function(number, {startTime:number, endTime:number}):number} comparator
      */
     _firstBarAfter: function(time, comparator)
     {
         return insertionIndexForObjectInListSortedByFunction(time, this._barTimes, comparator);
     },
 
     __proto__: WebInspector.TimelineOverviewBase.prototype
 }