DevTools: Tweak frames band overview drawing

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 69 matching lines @@
             - 2 * WebInspector.TimelineEventOverview._smallStripHeight;
         var position = 0;
         if (Runtime.experiments.isEnabled("inputEventsOnTimelineOverview")) {
             var inputHeight = this._drawInputEvents(mainThreadEvents, position, WebInspector.TimelineEventOverview._smallStripHeight);
             position += inputHeight;
             networkHeight -= inputHeight;
         }
         if (Runtime.experiments.isEnabled("frameRateOnEventsOverview"))
             networkHeight -= WebInspector.TimelineEventOverview._fullStripHeight;
         position += this._drawNetwork(mainThreadEvents, position, networkHeight);
-        if (Runtime.experiments.isEnabled("frameRateOnEventsOverview"))
-            position += this._drawFrames(position, WebInspector.TimelineEventOverview._fullStripHeight);
         position += this._drawStackedUtilizationChart(mainThreadEvents, position, WebInspector.TimelineEventOverview._fullStripHeight);
         for (var thread of threads.filter(function(thread) { return !thread.isWorker(); }))
             this._drawEvents(thread.events, position, WebInspector.TimelineEventOverview._smallStripHeight);
         position += WebInspector.TimelineEventOverview._smallStripHeight;
         for (var thread of threads.filter(function(thread) { return thread.isWorker(); }))
             this._drawEvents(thread.events, position, WebInspector.TimelineEventOverview._smallStripHeight);
         position += WebInspector.TimelineEventOverview._smallStripHeight;
+        if (Runtime.experiments.isEnabled("frameRateOnEventsOverview"))
+            position += this._drawFrames(position, WebInspector.TimelineEventOverview._fullStripHeight);
         console.assert(position === this._canvas.clientHeight);
     },
 
     /**
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      * @param {number} position
      * @param {number} height
      * @return {number}
      */
     _drawInputEvents: function(events, position, height)
@@ skipping 225 matching lines @@
         var baseY = (position + height) * window.devicePixelRatio;
         var y = baseY + 10;
         var ctx = this._context;
         ctx.save();
         ctx.beginPath();
         ctx.rect(0, position * window.devicePixelRatio, this._canvas.width, height * window.devicePixelRatio);
         ctx.clip();
         ctx.beginPath();
         ctx.lineWidth = 1 * window.devicePixelRatio;
         ctx.strokeStyle = "hsl(110, 50%, 60%)";
-        ctx.fillStyle = "hsl(110, 50%, 80%)";
+        ctx.fillStyle = "hsl(110, 50%, 88%)";
         ctx.moveTo(0, y);
         for (var i = 0; i < frames.length; ++i) {
             var frame = frames[i];
             var x = Math.round((frame.startTime - timeOffset) * scale) + 0.5;
             ctx.lineTo(x, y);
+            ctx.lineTo(x, y + 1.5);
             y = frame.idle ? baseY + 0.5 : Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1)) - 0.5;
+            ctx.lineTo(x, y + 1.5);
             ctx.lineTo(x, y);
         }
-        ctx.lineTo(this._canvas.width, y);
-        ctx.lineTo(this._canvas.width, baseY + 10);
+        if (frames.length) {
+            var lastFrame = frames.peekLast();
+            var x = Math.round((lastFrame.startTime + lastFrame.duration - timeOffset) * scale) + 0.5;
+            ctx.lineTo(x, y);
+        }
+        ctx.lineTo(x, baseY + 10);
         ctx.closePath();
+        ctx.fill();
         ctx.stroke();
-        ctx.fill();
         ctx.restore();
         return height;
     },
 
     _onCategoryVisibilityChanged: function()
     {
         this.update();
     },
 
     /**
@@ skipping 130 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;
     }
 }