Fix UI glitches on Performance and Memory panels

third_party/WebKit/Source/devtools/front_end/perf_ui/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 679 matching lines @@
       }
       var unclippedBarX = this._timeToPosition(entryStartTime);
       if (this._dataProvider.decorateEntry(
               entryIndex, context, text, barX, barY, barWidth, barHeight, unclippedBarX, this._timeToPixel))
         continue;
       if (!text || !text.length)
         continue;
       context.fillStyle = this._dataProvider.textColor(entryIndex);
       context.fillText(text, barX + textPadding, barY + textBaseHeight);
     }
-
     context.restore();
 
     this._drawGroupHeaders(width, height);
     this._drawMarkers();
     const headerHeight = this._rulerEnabled ? PerfUI.FlameChart.HeaderHeight : 0;
     PerfUI.TimelineGrid.drawCanvasGrid(context, this._calculator, 3, headerHeight);
 
     this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
     this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
     this._updateMarkerHighlight();
@@ skipping 13 matching lines @@
     if (!groups.length)
       return;
 
     var groupOffsets = this._groupOffsets;
     var lastGroupOffset = Array.prototype.peekLast.call(groupOffsets);
     var colorUsage = UI.ThemeSupport.ColorUsage;
 
     context.save();
     context.scale(ratio, ratio);
     context.translate(0, -top);
+    var defaultFont = '11px ' + Host.fontFamily();
+    context.font = defaultFont;
 
     context.fillStyle = UI.themeSupport.patchColor('#fff', colorUsage.Background);
     forEachGroup.call(this, (offset, index, group) => {
       var paddingHeight = group.style.padding;
       if (paddingHeight < 5)
         return;
       context.fillRect(0, offset - paddingHeight + 2, width, paddingHeight - 4);
     });
     if (groups.length && lastGroupOffset < top + height)
       context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset);
@@ skipping 125 matching lines @@
   /**
    * @param {!PerfUI.FlameChart.Group} group
    * @param {number} y
    * @param {number} endLevel
    */
   _drawCollapsedOverviewForGroup(group, y, endLevel) {
     var range = new Common.SegmentedRange(mergeCallback);
     var timeWindowRight = this._timeWindowRight;
     var timeWindowLeft = this._timeWindowLeft - this._paddingLeft / this._timeToPixel;
     var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getContext('2d'));
-    var barHeight = this._barHeight - 2;
+    var barHeight = this._barHeight - 1;
     var entryStartTimes = this._rawTimelineData.entryStartTimes;
     var entryTotalTimes = this._rawTimelineData.entryTotalTimes;
 
     for (var level = group.startLevel; level < endLevel; ++level) {
       var levelIndexes = this._timelineLevels[level];
       var rightIndexOnLevel =
           levelIndexes.lowerBound(timeWindowRight, (time, entryIndex) => time - entryStartTimes[entryIndex]) - 1;
       var lastDrawOffset = Infinity;
 
       for (var entryIndexOnLevel = rightIndexOnLevel; entryIndexOnLevel >= 0; --entryIndexOnLevel) {
         const entryIndex = levelIndexes[entryIndexOnLevel];
         const entryStartTime = entryStartTimes[entryIndex];
         const barX = this._timeToPositionClipped(entryStartTime);
         const entryEndTime = entryStartTime + entryTotalTimes[entryIndex];
         if (isNaN(entryEndTime) || barX >= lastDrawOffset)
           continue;
         if (entryEndTime <= timeWindowLeft)
           break;
         lastDrawOffset = barX;
         const color = this._dataProvider.entryColor(entryIndex);
         const endBarX = this._timeToPositionClipped(entryEndTime);
         if (group.style.useDecoratorsForOverview && this._dataProvider.forceDecoration(entryIndex)) {
           const unclippedBarX = this._timeToPosition(entryStartTime);
           const barWidth = endBarX - barX;
           context.beginPath();
           context.fillStyle = color;
-          context.fillRect(barX, y, barWidth, barHeight - 1);
+          context.fillRect(barX, y, barWidth, barHeight);
           this._dataProvider.decorateEntry(
-              entryIndex, context, '', barX, y, barWidth, barHeight, unclippedBarX, this._timeToPixel);
+              entryIndex, context, '', barX, y, barWidth, this._barHeight, unclippedBarX, this._timeToPixel);
           continue;
         }
         range.append(new Common.Segment(barX, endBarX, color));
       }
     }
 
     var segments = range.segments().slice().sort((a, b) => a.data.localeCompare(b.data));
     var lastColor;
     context.beginPath();
     for (var i = 0; i < segments.length; ++i) {
@@ skipping 609 matching lines @@
   }
 
   /**
    * @override
    * @return {number}
    */
   boundarySpan() {
     return this._maximumBoundaries - this._minimumBoundaries;
   }
 };