Timeline: fix overlapping group headers in Flame Chart

third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.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 1318 matching lines @@
         var top = this._scrollTop;
         var ratio = window.devicePixelRatio;
         var barHeight = this._barHeight;
         var textBaseHeight = barHeight - this._dataProvider.textBaseline();
         var groups = this._rawTimelineData.groups || [];
         if (!groups.length)
             return;
 
         var groupOffsets = this._groupOffsets;
         var lastGroupOffset = Array.prototype.peekLast.call(groupOffsets);
-        var firstVisibleGroup = Math.max(groupOffsets.upperBound(top) - 1, 0);
         var colorUsage = WebInspector.ThemeSupport.ColorUsage;
 
         context.save();
         context.scale(ratio, ratio);
         context.translate(0, -top);
 
         context.fillStyle = WebInspector.themeSupport.patchColor("#eee", colorUsage.Background);
         forEachGroup((offset, index, group) => {
             var paddingHeight = group.style.padding;
             if (paddingHeight < 5)
@@ skipping 106 matching lines @@
             context.restore();
         }
 
         /**
          * @param {function(number, number, !WebInspector.FlameChart.Group, boolean)} callback
          */
         function forEachGroup(callback)
         {
             /** @type !Array<{nestingLevel: number, visible: boolean}> */
             var groupStack = [{nestingLevel: -1, visible: true}];
-            for (var i = firstVisibleGroup; i < groups.length; ++i) {
+            for (var i = 0; i < groups.length; ++i) {
                 var groupTop = groupOffsets[i];
                 var group = groups[i];
                 if (groupTop - group.style.padding > top + height)
                     break;
                 var firstGroup = true;
                 while (groupStack.peekLast().nestingLevel >= group.style.nestingLevel) {
                     groupStack.pop();
                     firstGroup = false;
                 }
                 var parentGroupVisible = groupStack.peekLast().visible;
                 var thisGroupVisible = parentGroupVisible && (!group.style.collapsible || group.expanded);
                 groupStack.push({nestingLevel: group.style.nestingLevel, visible: thisGroupVisible});
-                if (!parentGroupVisible)
+                if (!parentGroupVisible || groupTop + group.style.height < top)
                     continue;
                 callback(groupTop, i, group, firstGroup);
             }
         }
     },
 
     /**
      * @param {number} y
      * @param {number} startLevel
      * @param {number} endLevel
@@ skipping 472 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }