DevTools: minor flame chart speedups.

Source/devtools/front_end/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 456 matching lines @@
 
     onResize: function()
     {
         this._scheduleUpdate();
     },
 
     _scheduleUpdate: function()
     {
         if (this._updateTimerId)
             return;
-        this._updateTimerId = setTimeout(this.update.bind(this), 10);
+        this._updateTimerId = requestAnimationFrame(this.update.bind(this));
     },
 
     update: function()
     {
         this._updateTimerId = 0;
         var timelineData = this._timelineData();
         if (!timelineData)
             return;
         this._resetCanvas(this._overviewContainer.clientWidth, this._overviewContainer.clientHeight - WebInspector.FlameChart.DividersBarHeight);
         this._overviewCalculator._updateBoundaries(this);
@@ skipping 118 matching lines @@
     this._windowRight = 1.0;
     this._windowWidth = 1.0;
     this._timeWindowLeft = 0;
     this._timeWindowRight = Infinity;
     this._barHeight = dataProvider.barHeight();
     this._barHeightDelta = this._isTopDown ? -this._barHeight : this._barHeight;
     this._minWidth = 1;
     this._paddingLeft = 15;
     this._highlightedEntryIndex = -1;
     this._selectedEntryIndex = -1;
+    this._textWidth = {};
 }
 
 WebInspector.FlameChart.MainPane.prototype = {
     /**
      * @return {?WebInspector.FlameChart.TimelineData}
      */
     _timelineData: function()
     {
         return this._dataProvider.timelineData();
     },
@@ skipping 191 matching lines @@
         var timeToPixel = this._timeToPixel;
         var pixelWindowLeft = this._pixelWindowLeft;
         var paddingLeft = this._paddingLeft;
         var minWidth = this._minWidth;
         var entryTotalTimes = timelineData.entryTotalTimes;
         var entryOffsets = timelineData.entryOffsets;
         var entryLevels = timelineData.entryLevels;
 
         var titleIndexes = new Uint32Array(timelineData.entryTotalTimes);
         var lastTitleIndex = 0;
-        var dotsWidth = context.measureText("\u2026").width;
         var textPadding = this._dataProvider.textPadding();
-        this._minTextWidth = context.measureText("\u2026").width + 2 * textPadding;
+        var dotsWidth = this._measureWidth(context, "\u2026");

[loislo, 2014/03/06 06:04:51]

lets also assign it to this._dotWidth

[pfeldman, 2014/03/06 11:19:57]

I removed this._dotsWidth instead.

+        this._minTextWidth = 2 * textPadding + dotsWidth;
         var minTextWidth = this._minTextWidth;
 
         var lastDrawOffset = new Int32Array(this._dataProvider.maxStackDepth());
         for (var i = 0; i < lastDrawOffset.length; ++i)
             lastDrawOffset[i] = -1;
 
         var barX = 0;
         var barY = 0;
         var barWidth = 0;
         var barRight = 0;
@@ skipping 72 matching lines @@
                 barLevel = entryLevels[entryIndex];
                 barY = this._levelToHeight(barLevel);
                 context.rect(barX, barY, barWidth, this._barHeight);
                 if (barWidth > minTextWidth)
                     titleIndexes[lastTitleIndex++] = entryIndex;
             }
             context.fill();
         }
 
         context.textBaseline = "alphabetic";
-        context.fillStyle = "#333";
-        this._dotsWidth = context.measureText("\u2026").width;
+        this._dotsWidth = this._measureWidth(context, "\u2026");

[loislo, 2014/03/06 06:04:51]

looks like we don't need this line.

[alph, 2014/03/06 06:24:46]

Could that be done in the constructor?

[pfeldman, 2014/03/06 11:19:57]

Same here, removed

[pfeldman, 2014/03/06 11:19:57]

It might depend on the styles, though I am not sure.

 
         for (i = 0; i < lastTitleIndex; ++i) {
             entryIndex = titleIndexes[i];
             text = this._dataProvider.entryTitle(entryIndex);
             if (!text || !text.length)
                 continue;
             font = this._dataProvider.entryFont(entryIndex);
             entryOffset = entryOffsets[entryIndex];
             barX = this._offsetToPosition(entryOffset);
             barRight = this._offsetToPosition(entryOffset + entryTotalTimes[entryIndex]);
@@ skipping 64 matching lines @@
             titleCell.textContent = entryInfo[i].title;
             titleCell.className = "title";
             var textCell = row.createChild("td");
             textCell.textContent = entryInfo[i].text;
         }
         return infoTable;
     },
 
     _prepareText: function(context, title, maxSize)
     {
-        if (maxSize < this._dotsWidth)
-            return null;
-        var titleWidth = context.measureText(title).width;
+        var titleWidth = this._measureWidth(context, title);
         if (maxSize > titleWidth)
             return title;
         maxSize -= this._dotsWidth;
         var dotRegExp=/[\.\$]/g;
         var match = dotRegExp.exec(title);
         if (!match) {
             var visiblePartSize = maxSize / titleWidth;
             var newTextLength = Math.floor(title.length * visiblePartSize) + 1;
-            var minTextLength = 4;
+            var minTextLength = 2;
             if (newTextLength < minTextLength)
                 return null;
             var substring;
             do {
                 --newTextLength;
                 substring = title.substring(0, newTextLength);
-            } while (context.measureText(substring).width > maxSize);
+            } while (this._measureWidth(context, substring).width > maxSize);
             return title.substring(0, newTextLength) + "\u2026";
         }
         while (match) {
             var substring = title.substring(match.index + 1);
-            var width = context.measureText(substring).width;
+            var width = this._measureWidth(context, substring).width;
             if (maxSize > width)
                 return "\u2026" + substring;
             match = dotRegExp.exec(title);
         }
         var i = 0;
         do {
             ++i;
-        } while (context.measureText(title.substring(0, i)).width < maxSize);
+        } while (this._measureWidth(context, title.substring(0, i)).width < maxSize);
         return title.substring(0, i - 1) + "\u2026";
     },
 
+    /**
+     * @param {Context} context

[alph, 2014/03/06 06:24:46]

!Context

[pfeldman, 2014/03/06 11:19:57]

Done.

+     * @param {string} text
+     * @return {number}
+     */
+    _measureWidth: function(context, text)
+    {
+        if (text.length > 20)

[alph, 2014/03/06 06:24:46]

I'm wondering does it really help the performance?

[pfeldman, 2014/03/06 11:19:57]

It prevents from forcing layout.

[alph, 2014/03/06 11:23:27]

I was asking about that 'if' statement, not about the whole function.

+            return context.measureText(text).width;
+
+        var width = this._textWidth[text];
+        if (!width) {
+            width = context.measureText(text).width;
+            this._textWidth[text] = width;
+        }
+        return width;
+    },
+
     _updateBoundaries: function()
     {
         this._totalTime = this._dataProvider.totalTime();
         this._zeroTime = this._dataProvider.zeroTime();
         if (this._timeBasedWindow) {
             if (this._timeWindowRight !== Infinity) {
                 this._windowLeft = (this._timeWindowLeft - this._zeroTime) / this._totalTime;
                 this._windowRight = (this._timeWindowRight - this._zeroTime) / this._totalTime;
                 this._windowWidth = this._windowRight - this._windowLeft;
             } else {
                 this._windowLeft = 0;
                 this._windowRight = 1;
                 this._windowWidth = 1;
             }
         } else {
             this._timeWindowLeft = this._windowLeft * this._totalTime;
             this._timeWindowRight = this._windowRight * this._totalTime;
         }
 
-        this._pixelWindowWidth = this.element.clientWidth - this._paddingLeft;
+        this._pixelWindowWidth = this._offsetWidth - this._paddingLeft;
         this._totalPixels = Math.floor(this._pixelWindowWidth / this._windowWidth);
         this._pixelWindowLeft = Math.floor(this._totalPixels * this._windowLeft);
         this._pixelWindowRight = Math.floor(this._totalPixels * this._windowRight);
 
         this._timeToPixel = this._totalPixels / this._totalTime;
         this._pixelToTime = this._totalTime / this._totalPixels;
         this._paddingLeftTime = this._paddingLeft / this._timeToPixel;
     },
 
     onResize: function()
     {
+        this._offsetWidth = this.element.offsetWidth;
+        this._offsetHeight = this.element.offsetHeight;
         this._scheduleUpdate();
     },
 
     _scheduleUpdate: function()
     {
         if (this._updateTimerId)
             return;
-        this._updateTimerId = setTimeout(this.update.bind(this), 10);
+        this._updateTimerId = requestAnimationFrame(this.update.bind(this));
     },
 
     update: function()
     {
         this._updateTimerId = 0;
         if (!this._timelineData()) {
             this._timelineGrid.hideDividers();
             return;
         }
         this._updateBoundaries();
         if (this._timelineData().entryLevels.length)
             this._timelineGrid.showDividers();
         else
             this._timelineGrid.hideDividers();
-        this.draw(this.element.clientWidth, this.element.clientHeight);
+        this.draw(this._offsetWidth, this._offsetHeight);
         this._calculator._updateBoundaries(this);
-        this._timelineGrid.element.style.width = this.element.clientWidth;
+        this._timelineGrid.element.style.width = this._offsetWidth;
         var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
         this._timelineGrid.updateDividers(this._calculator, offsets, true);
     },
 
     reset: function()
     {
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
+        this._textWidth = {};
         this.update();
     },
 
     __proto__: WebInspector.View.prototype
 }