DevTools: speed up text width measure on flame chart for long strings.

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 1194 matching lines @@
             var barX = this._timeToPositionClipped(entryStartTime);
             var barRight = Math.min(this._timeToPositionClipped(entryStartTime + entryTotalTimes[entryIndex]), unclippedWidth) + 1;
             var barWidth = barRight - barX;
             var barLevel = entryLevels[entryIndex];
             var barY = this._levelToHeight(barLevel);
             var text = this._dataProvider.entryTitle(entryIndex);
             if (text && text.length) {
                 context.font = this._dataProvider.entryFont(entryIndex);
                 text = this._prepareText(context, text, barWidth - 2 * textPadding);
             }
-
             if (this._dataProvider.decorateEntry(entryIndex, context, text, barX, barY, barWidth, barHeight))
                 continue;
             if (!text || !text.length)
                 continue;
 
             context.fillStyle = this._dataProvider.textColor(entryIndex);
             context.fillText(text, barX + textPadding, textBaseHeight - barLevel * this._barHeightDelta);
         }
 
         this._drawFlowEvents(context, width, height);
@@ skipping 214 matching lines @@
             if (typeof entry.value === "string")
                 row.createChild("td").textContent = entry.value;
             else
                 row.createChild("td").appendChild(entry.value);
         }
         return infoTable;
     },
 
     /**
      * @param {!CanvasRenderingContext2D} context
-     * @param {string} title
-     * @param {number} maxSize
+     * @param {string} text
+     * @param {number} maxWidth
      * @return {string}
      */
-    _prepareText: function(context, title, maxSize)
+    _prepareText: function(context, text, maxWidth)
     {
-        var titleWidth = this._measureWidth(context, title);
-        if (maxSize >= titleWidth)
-            return title;
+        var /** @const */ maxLength = 200;
+        if (maxWidth <= 10)
+            return "";
+        if (text.length > maxLength)
+            text = text.trimMiddle(maxLength);
+        var textWidth = this._measureWidth(context, text);
+        if (textWidth <= maxWidth)
+            return text;
 
-        var l = 2;
-        var r = title.length;
-        while (l < r) {
-            var m = (l + r) >> 1;
-            if (this._measureWidth(context, title.trimMiddle(m)) <= maxSize)
-                l = m + 1;
-            else
-                r = m;
+        var l = 0;
+        var r = text.length;
+        var lv = 0;
+        var rv = textWidth;
+        while (l < r && rv !== lv) {
+            var m = Math.ceil(l + (r - l) * (maxWidth - lv) / (rv - lv));

[caseq, 2015/12/02 22:31:53]

I'm a bit concerned with what happens when maxWidth == lv

[alph, 2015/12/02 23:35:37]

Thanks. Fixed.

+            var mv = this._measureWidth(context, text.trimMiddle(m));
+            if (mv <= maxWidth) {
+                l = m;
+                lv = mv;
+            } else {
+                r = m - 1;
+                rv = mv;
+            }
         }
-        title = title.trimMiddle(r - 1);
-        return title !== "\u2026" ? title : "";
+        text = text.trimMiddle(l);
+        return text !== "\u2026" ? text : "";
     },
 
     /**
      * @param {!CanvasRenderingContext2D} context
      * @param {string} text
      * @return {number}
      */
     _measureWidth: function(context, text)
     {
-        if (text.length > 20)
+        if (text.length > 200)
             return context.measureText(text).width;
 
         var font = context.font;
         var textWidths = this._textWidth[font];
         if (!textWidths) {
             textWidths = {};
             this._textWidth[font] = textWidths;
         }
         var width = textWidths[text];
         if (!width) {
@@ skipping 93 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }