Timeline: visually distinguish idle frames

Source/devtools/front_end/timeline/TimelineFrameOverview.js

Index: Source/devtools/front_end/timeline/TimelineFrameOverview.js
diff --git a/Source/devtools/front_end/timeline/TimelineFrameOverview.js b/Source/devtools/front_end/timeline/TimelineFrameOverview.js
index 80cc6d92b4d8a59085b705d48e2d82617f2f37b5..35e7842f9e92484862cdc5b5755f8395070be478 100644
--- a/Source/devtools/front_end/timeline/TimelineFrameOverview.js
+++ b/Source/devtools/front_end/timeline/TimelineFrameOverview.js
@@ -202,13 +202,14 @@ WebInspector.TimelineFrameOverview.prototype = {
         for (var barIndex = 0, currentFrame = 0; currentFrame < frames.length; ++barIndex) {
             var barStartTime = frames[currentFrame].startTime;
             var longestFrame = null;
-            var longestDuration = 0;
+            var longestDuration = -Infinity;

[alph, 2015/06/05 16:55:39]

nit: the initial value doesn't really matter.

 
             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;
                 }
             }
@@ -351,8 +352,12 @@ WebInspector.TimelineFrameOverview.prototype = {
 
             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)";