DevTools: Support arbitrary bar heights on flamechart

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 73 matching lines @@
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
     this._timeWindowLeft = 0;
     this._timeWindowRight = Infinity;
     this._rangeSelectionStart = 0;
     this._rangeSelectionEnd = 0;
     this._barHeight = 17;
     this._textBaseline = 5;
     this._textPadding = 5;
     this._paddingLeft = 0;
-    var markerPadding = 2;
-    this._markerRadius = this._barHeight / 2 - markerPadding;
+    this._markerRadius = 6;
 
     /** @const */
     this._headerLeftPadding = 6;
     /** @const */
     this._arrowSide = 8;
     /** @const */
     this._expansionArrowIndent = this._headerLeftPadding + this._arrowSide / 2;
     /** @const */
     this._headerLabelXPadding = 3;
     /** @const */
@@ skipping 97 matching lines @@
     if (!timelineData)
       return;
     // Think in terms of not where we are, but where we'll be after animation (if present)
     var timeLeft = this._cancelWindowTimesAnimation ? this._pendingAnimationTimeLeft : this._timeWindowLeft;
     var timeRight = this._cancelWindowTimesAnimation ? this._pendingAnimationTimeRight : this._timeWindowRight;
     var entryStartTime = timelineData.entryStartTimes[entryIndex];
     var entryTotalTime = timelineData.entryTotalTimes[entryIndex];
     var entryEndTime = entryStartTime + entryTotalTime;
     var minEntryTimeWindow = Math.min(entryTotalTime, timeRight - timeLeft);
 
-    var y = this._levelToHeight(timelineData.entryLevels[entryIndex]);
-    this.setScrollOffset(y, this._barHeight);
+    var level = timelineData.entryLevels[entryIndex];
+    this.setScrollOffset(this._levelToOffset(level), this._levelHeight(level));
 
     var minVisibleWidthPx = 30;
     var futurePixelToTime = (timeRight - timeLeft) / this._offsetWidth;
     minEntryTimeWindow = Math.max(minEntryTimeWindow, futurePixelToTime * minVisibleWidthPx);
     if (timeLeft > entryEndTime) {
       var delta = timeLeft - entryEndTime + minEntryTimeWindow;
       this._flameChartDelegate.requestWindowTimes(timeLeft - delta, timeRight - delta);
     } else if (timeRight < entryStartTime) {
       var delta = entryStartTime - timeRight + minEntryTimeWindow;
       this._flameChartDelegate.requestWindowTimes(timeLeft + delta, timeRight + delta);
@@ skipping 230 matching lines @@
       return -1;
     y += this.getScrollOffset();
     var timelineData = this._timelineData();
     if (!timelineData)
       return -1;
     var cursorTime = this._cursorTime(x);
     var cursorLevel = this._visibleLevelOffsets.upperBound(y) - 1;
     if (cursorLevel < 0 || !this._visibleLevels[cursorLevel])
       return -1;
     var offsetFromLevel = y - this._visibleLevelOffsets[cursorLevel];
-    if (offsetFromLevel > this._barHeight)
+    if (offsetFromLevel > this._levelHeight(cursorLevel))
       return -1;
     var entryStartTimes = timelineData.entryStartTimes;
     var entryTotalTimes = timelineData.entryTotalTimes;
     var entryIndexes = this._timelineLevels[cursorLevel];
     if (!entryIndexes || !entryIndexes.length)
       return -1;
 
     /**
      * @param {number} time
      * @param {number} entryIndex
      * @return {number}
      */
     function comparator(time, entryIndex) {
       return time - entryStartTimes[entryIndex];
     }
     var indexOnLevel = Math.max(entryIndexes.upperBound(cursorTime, comparator) - 1, 0);
 
     /**
      * @this {PerfUI.FlameChart}
      * @param {number} entryIndex
      * @return {boolean}
      */
     function checkEntryHit(entryIndex) {
       if (entryIndex === undefined)
         return false;
       var startTime = entryStartTimes[entryIndex];
       var duration = entryTotalTimes[entryIndex];
       if (isNaN(duration)) {
         var dx = (startTime - cursorTime) / this._pixelToTime;
-        var dy = this._barHeight / 2 - offsetFromLevel;
+        var dy = this._levelHeight(cursorLevel) / 2 - offsetFromLevel;
         return dx * dx + dy * dy < this._markerRadius * this._markerRadius;
       }
       var endTime = startTime + duration;
       var barThreshold = 3 * this._pixelToTime;
       return startTime - barThreshold < cursorTime && cursorTime < endTime + barThreshold;
     }
 
     var entryIndex = entryIndexes[indexOnLevel];
     if (checkEntryHit.call(this, entryIndex))
       return entryIndex;
@@ skipping 83 matching lines @@
     var timeWindowRight = this._timeWindowRight;
     var timeWindowLeft = this._timeWindowLeft - this._paddingLeft / this._timeToPixel;
     var entryTotalTimes = timelineData.entryTotalTimes;
     var entryStartTimes = timelineData.entryStartTimes;
     var entryLevels = timelineData.entryLevels;
 
     var titleIndices = [];
     var markerIndices = [];
     var textPadding = this._textPadding;
     var minTextWidth = 2 * textPadding + UI.measureTextWidth(context, '\u2026');
-    var barHeight = this._barHeight;
     var minVisibleBarLevel = Math.max(this._visibleLevelOffsets.upperBound(top) - 1, 0);
 
     /** @type {!Map<string, !Array<number>>} */
     var colorBuckets = new Map();
     for (var level = minVisibleBarLevel; level < this._dataProvider.maxStackDepth(); ++level) {
-      if (this._levelToHeight(level) > top + height)
+      if (this._levelToOffset(level) > top + height)
         break;
       if (!this._visibleLevels[level])
         continue;
 
       // Entries are ordered by start time within a level, so find the last visible entry.
       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) {
@@ skipping 25 matching lines @@
       var color = colors[c];
       var indexes = colorBuckets.get(color);
       context.beginPath();
       context.fillStyle = color;
       for (var i = 0; i < indexes.length; ++i) {
         var entryIndex = indexes[i];
         var entryStartTime = entryStartTimes[entryIndex];
         var barX = this._timeToPositionClipped(entryStartTime);
         var duration = entryTotalTimes[entryIndex];
         var barLevel = entryLevels[entryIndex];
-        var barY = this._levelToHeight(barLevel);
+        var barHeight = this._levelHeight(barLevel);
+        var barY = this._levelToOffset(barLevel);
         if (isNaN(duration)) {
           context.moveTo(barX + this._markerRadius, barY + barHeight / 2);
           context.arc(barX, barY + barHeight / 2, this._markerRadius, 0, Math.PI * 2);
           markerIndices.push(entryIndex);
           continue;
         }
         var barRight = this._timeToPositionClipped(entryStartTime + duration);
         var barWidth = Math.max(barRight - barX, 1);
         context.rect(barX, barY, barWidth - 0.4, barHeight - 1);
         if (barWidth > minTextWidth || this._dataProvider.forceDecoration(entryIndex))
           titleIndices.push(entryIndex);
       }
       context.fill();
     }
 
     context.strokeStyle = 'rgba(0, 0, 0, 0.2)';
     context.beginPath();
     for (var m = 0; m < markerIndices.length; ++m) {
       var entryIndex = markerIndices[m];
       var entryStartTime = entryStartTimes[entryIndex];
       var barX = this._timeToPositionClipped(entryStartTime);
       var barLevel = entryLevels[entryIndex];
-      var barY = this._levelToHeight(barLevel);
-      context.moveTo(barX + this._markerRadius, barY + barHeight / 2);
-      context.arc(barX, barY + barHeight / 2, this._markerRadius, 0, Math.PI * 2);
+      var y = this._levelToOffset(barLevel) + this._levelHeight(barLevel) / 2;
+      context.moveTo(barX + this._markerRadius, y);
+      context.arc(barX, y, this._markerRadius, 0, Math.PI * 2);
     }
     context.stroke();
 
     context.textBaseline = 'alphabetic';
-    var textBaseHeight = this._barHeight - this._textBaseline;
-
     for (var i = 0; i < titleIndices.length; ++i) {
       var entryIndex = titleIndices[i];
       var entryStartTime = entryStartTimes[entryIndex];
       var barX = this._timeToPositionClipped(entryStartTime);
       var barRight = Math.min(this._timeToPositionClipped(entryStartTime + entryTotalTimes[entryIndex]), width) + 1;
       var barWidth = barRight - barX;
       var barLevel = entryLevels[entryIndex];
-      var barY = this._levelToHeight(barLevel);
+      var barY = this._levelToOffset(barLevel);
       var text = this._dataProvider.entryTitle(entryIndex);
       if (text && text.length) {
         context.font = this._dataProvider.entryFont(entryIndex) || defaultFont;
         text = UI.trimTextMiddle(context, text, barWidth - 2 * textPadding);
       }
       var unclippedBarX = this._timeToPosition(entryStartTime);
+      var barHeight = this._levelHeight(barLevel);
       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.fillText(text, barX + textPadding, barY + barHeight - this._textBaseline);
     }
 
     context.restore();
 
     this._drawGroupHeaders(width, height);
     this._drawFlowEvents(context, width, height);
     this._drawMarkers();
     var 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();
   }
 
   /**
    * @param {number} width
    * @param {number} height
    */
   _drawGroupHeaders(width, height) {
     var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getContext('2d'));
     var top = this.getScrollOffset();
     var ratio = window.devicePixelRatio;
-    var barHeight = this._barHeight;
-    var textBaseHeight = barHeight - this._textBaseline;
     var groups = this._rawTimelineData.groups || [];
     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);
@@ skipping 39 matching lines @@
     });
 
     context.save();
     forEachGroup.call(this, (offset, index, group) => {
       context.font = group.style.font;
       if (this._isGroupCollapsible(index) && !group.expanded || group.style.shareHeaderLine) {
         var width = this._labelWidthForGroup(context, group) + 2;
         context.fillStyle = Common.Color.parse(group.style.backgroundColor).setAlpha(0.8).asString(null);
         context.fillRect(
             this._headerLeftPadding - this._headerLabelXPadding, offset + this._headerLabelYPadding, width,
-            barHeight - 2 * this._headerLabelYPadding);
+            group.style.height - 2 * this._headerLabelYPadding);
       }
       context.fillStyle = group.style.color;
       context.fillText(
           group.name, Math.floor(this._expansionArrowIndent * (group.style.nestingLevel + 1) + this._arrowSide),
-          offset + textBaseHeight);
+          offset + group.style.height - this._textBaseline);
     });
     context.restore();
 
     context.fillStyle = UI.themeSupport.patchColorText('#6e6e6e', colorUsage.Foreground);
     context.beginPath();
     forEachGroup.call(this, (offset, index, group) => {
       if (this._isGroupCollapsible(index)) {
         drawExpansionArrow.call(
             this, this._expansionArrowIndent * (group.style.nestingLevel + 1),
-            offset + textBaseHeight - this._arrowSide / 2, !!group.expanded);
+            offset + group.style.height - this._textBaseline - this._arrowSide / 2, !!group.expanded);
       }
     });
     context.fill();
 
     context.strokeStyle = UI.themeSupport.patchColorText('#ddd', colorUsage.Background);
     context.beginPath();
     context.stroke();
 
     context.restore();
 
@@ skipping 63 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 - 1;
+    var barHeight = group.style.height;
     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) {
         var entryIndex = levelIndexes[entryIndexOnLevel];
         var entryStartTime = entryStartTimes[entryIndex];
         var barX = this._timeToPositionClipped(entryStartTime);
         var entryEndTime = entryStartTime + entryTotalTimes[entryIndex];
         if (isNaN(entryEndTime) || barX >= lastDrawOffset)
           continue;
         if (entryEndTime <= timeWindowLeft)
           break;
         lastDrawOffset = barX;
         var color = this._dataProvider.entryColor(entryIndex);
         var endBarX = this._timeToPositionClipped(entryEndTime);
         if (group.style.useDecoratorsForOverview && this._dataProvider.forceDecoration(entryIndex)) {
           var unclippedBarX = this._timeToPosition(entryStartTime);
           var barWidth = endBarX - barX;
           context.beginPath();
           context.fillStyle = color;
-          context.fillRect(barX, y, barWidth, barHeight);
+          context.fillRect(barX, y, barWidth, barHeight - 1);
           this._dataProvider.decorateEntry(
-              entryIndex, context, '', barX, y, barWidth, this._barHeight, unclippedBarX, this._timeToPixel);
+              entryIndex, context, '', barX, y, barWidth, 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) {
       var segment = segments[i];
       if (lastColor !== segments[i].data) {
         context.fill();
         context.beginPath();
         lastColor = segments[i].data;
         context.fillStyle = lastColor;
       }
-      context.rect(segment.begin, y, segment.end - segment.begin, barHeight);
+      context.rect(segment.begin, y, segment.end - segment.begin, barHeight - 1);
     }
     context.fill();
 
     /**
      * @param {!Common.Segment} a
      * @param {!Common.Segment} b
      * @return {?Common.Segment}
      */
     function mergeCallback(a, b) {
       return a.data === b.data && a.end + 0.4 > b.end ? a : null;
@@ skipping 17 matching lines @@
     context.strokeStyle = '#7f5050';
     var td = this._timelineData();
     var endIndex = td.flowStartTimes.lowerBound(this._timeWindowRight);
 
     context.lineWidth = 0.5;
     for (var i = 0; i < endIndex; ++i) {
       if (!td.flowEndTimes[i] || td.flowEndTimes[i] < this._timeWindowLeft)
         continue;
       var startX = this._timeToPosition(td.flowStartTimes[i]);
       var endX = this._timeToPosition(td.flowEndTimes[i]);
-      var startY = this._levelToHeight(td.flowStartLevels[i]) + this._barHeight / 2;
-      var endY = this._levelToHeight(td.flowEndLevels[i]) + this._barHeight / 2;
+      var startLevel = td.flowStartLevels[i];
+      var endLevel = td.flowEndLevels[i];
+      var startY = this._levelToOffset(startLevel) + this._levelHeight(startLevel) / 2;
+      var endY = this._levelToOffset(endLevel) + this._levelHeight(endLevel) / 2;
 
 
       var segment = Math.min((endX - startX) / 4, 40);
       var distanceTime = td.flowEndTimes[i] - td.flowStartTimes[i];
       var distanceY = (endY - startY) / 10;
       var spread = 30;
       var lineY = distanceTime < 1 ? startY : spread + Math.max(0, startY + distanceY * (i % spread));
 
       var p = [];
       p.push({x: startX, y: startY});
@@ skipping 100 matching lines @@
         groups[i].expanded = expanded;
     }
     this._updateLevelPositions();
     this._updateHeight();
   }
 
   _updateLevelPositions() {
     var levelCount = this._dataProvider.maxStackDepth();
     var groups = this._rawTimelineData.groups || [];
     this._visibleLevelOffsets = new Uint32Array(levelCount + 1);
+    this._visibleLevelHeights = new Uint32Array(levelCount);
     this._visibleLevels = new Uint16Array(levelCount);
     this._groupOffsets = new Uint32Array(groups.length + 1);
 
     var groupIndex = -1;
     var currentOffset = this._rulerEnabled ? PerfUI.FlameChart.HeaderHeight : 2;
     var visible = true;
     /** @type !Array<{nestingLevel: number, visible: boolean}> */
     var groupStack = [{nestingLevel: -1, visible: true}];
     var lastGroupLevel = Math.max(levelCount, groups.length ? groups.peekLast().startLevel + 1 : 0);
     for (var level = 0; level < lastGroupLevel; ++level) {
@@ skipping 12 matching lines @@
         groupStack.push({nestingLevel: style.nestingLevel, visible: visible});
         if (parentGroupIsVisible)
           currentOffset += nextLevel ? 0 : style.padding;
         this._groupOffsets[groupIndex] = currentOffset;
         if (parentGroupIsVisible && !style.shareHeaderLine)
           currentOffset += style.height;
       }
       var isFirstOnLevel = groupIndex >= 0 && level === groups[groupIndex].startLevel;
       var thisLevelIsVisible = visible || isFirstOnLevel && groups[groupIndex].style.useFirstLineForOverview;
       if (level < levelCount) {
+        var height;
+        if (groupIndex >= 0) {
+          var style = groups[groupIndex].style;
+          height = isFirstOnLevel ? style.height : style.itemsHeight || this._barHeight;

[caseq, 2017/05/01 22:19:30]

nit: add parenthesis around last clause of ternary operator.

[alph, 2017/05/02 01:20:20]

Done.

+        } else {
+          height = this._barHeight;
+        }
         this._visibleLevels[level] = thisLevelIsVisible;
         this._visibleLevelOffsets[level] = currentOffset;
+        this._visibleLevelHeights[level] = height;

[caseq, 2017/05/01 22:19:30]

this looks more like just this._levelHeight

[alph, 2017/05/02 01:20:20]

Acknowledged.

       }
       if (thisLevelIsVisible || (parentGroupIsVisible && style.shareHeaderLine && isFirstOnLevel))
-        currentOffset += this._barHeight;
+        currentOffset += this._visibleLevelHeights[level];
     }
     if (groupIndex >= 0)
       this._groupOffsets[groupIndex + 1] = currentOffset;
     this._visibleLevelOffsets[level] = currentOffset;
   }
 
   /**
    * @param {number} index
    */
   _isGroupCollapsible(index) {
@@ skipping 36 matching lines @@
     var startTime = timelineData.entryStartTimes[entryIndex];
     var endTime = startTime + (timelineData.entryTotalTimes[entryIndex] || 0);
     var barX = this._timeToPositionClipped(startTime);
     var barRight = this._timeToPositionClipped(endTime);
     if (barRight === 0 || barX === this._offsetWidth)
       return;
     var barWidth = barRight - barX;
     var barCenter = barX + barWidth / 2;
     barWidth = Math.max(barWidth, elementMinWidthPx);
     barX = barCenter - barWidth / 2;
-    var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]) - this.getScrollOffset();
+    var entryLevel = timelineData.entryLevels[entryIndex];
+    var barY = this._levelToOffset(entryLevel) - this.getScrollOffset();
+    var barHeight = this._levelHeight(entryLevel);
     var style = element.style;
     style.left = barX + 'px';
     style.top = barY + 'px';
     style.width = barWidth + 'px';
-    style.height = this._barHeight - 1 + 'px';
+    style.height = barHeight - 1 + 'px';
     this.viewportElement.appendChild(element);
   }
 
   /**
    * @param {number} time
    * @return {number}
    */
   _timeToPositionClipped(time) {
     return Number.constrain(this._timeToPosition(time), 0, this._offsetWidth);
   }
 
   /**
    * @param {number} time
    * @return {number}
    */
   _timeToPosition(time) {
     return Math.floor((time - this._minimumBoundary) * this._timeToPixel) - this._pixelWindowLeft + this._paddingLeft;
   }
 
   /**
    * @param {number} level
    * @return {number}
    */
-  _levelToHeight(level) {
+  _levelToOffset(level) {
     return this._visibleLevelOffsets[level];
   }
 
+  /**
+   * @param {number} level
+   * @return {number}
+   */
+  _levelHeight(level) {
+    return this._visibleLevelHeights[level];

[caseq, 2017/05/01 22:19:30]

nit: I wonder if we should just inline it.

[alph, 2017/05/02 01:20:20]

I've done it the same way as _levelToOffset

+  }
+
   _updateBoundaries() {
     this._totalTime = this._dataProvider.totalTime();
     this._minimumBoundary = this._dataProvider.minimumBoundary();
 
     var windowWidth = 1;
     if (this._timeWindowRight !== Infinity) {
       this._windowLeft = (this._timeWindowLeft - this._minimumBoundary) / this._totalTime;
       this._windowRight = (this._timeWindowRight - this._minimumBoundary) / this._totalTime;
       windowWidth = this._windowRight - this._windowLeft;
     } else if (this._timeWindowLeft === Infinity) {
       this._windowLeft = Infinity;
       this._windowRight = Infinity;
     } else {
       this._windowLeft = 0;
       this._windowRight = 1;
     }
 
     var totalPixels = Math.floor((this._offsetWidth - this._paddingLeft) / windowWidth);
     this._pixelWindowLeft = Math.floor(totalPixels * this._windowLeft);
 
     this._timeToPixel = totalPixels / this._totalTime;
     this._pixelToTime = this._totalTime / totalPixels;
   }
 
   _updateHeight() {
-    var height = this._levelToHeight(this._dataProvider.maxStackDepth());
+    var height = this._levelToOffset(this._dataProvider.maxStackDepth());
     this.setContentHeight(height);
   }
 
   /**
    * @override
    */
   onResize() {
     super.onResize();
     this.scheduleUpdate();
   }
@@ skipping 36 matching lines @@
 PerfUI.FlameChart.HeaderHeight = 15;
 
 PerfUI.FlameChart.MinimalTimeWindowMs = 0.5;
 
 /**
  * @interface
  */
 PerfUI.FlameChartDataProvider = function() {};
 
 /**
- * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined), style: !PerfUI.FlameChart.GroupStyle}}
+ * @typedef {!{
+ *     name: string,
+ *     startLevel: number,
+ *     expanded: (boolean|undefined),
+ *     style: !PerfUI.FlameChart.GroupStyle
+ * }}
  */
 PerfUI.FlameChart.Group;
 
 /**
  * @typedef {!{
  *     height: number,
  *     padding: number,
  *     collapsible: boolean,
  *     font: string,
  *     color: string,
  *     backgroundColor: string,
  *     nestingLevel: number,
+ *     itemsHeight: (number|undefined),
  *     shareHeaderLine: (boolean|undefined),
  *     useFirstLineForOverview: (boolean|undefined),
  *     useDecoratorsForOverview: (boolean|undefined)
  * }}
  */
 PerfUI.FlameChart.GroupStyle;
 
 /**
  * @unrestricted
  */
@@ skipping 275 matching lines @@
   }
 
   /**
    * @override
    * @return {number}
    */
   boundarySpan() {
     return this._maximumBoundaries - this._minimumBoundaries;
   }
 };