DevTools: Depict network request timings on timeline network pane.

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 532 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._dataProvider.textPadding();
-    var minTextWidth = 2 * textPadding + this._measureWidth(context, '\u2026');
+    var minTextWidth = 2 * textPadding + WebInspector.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)
         break;
       if (!this._visibleLevels[level])
         continue;
@@ skipping 75 matching lines @@
       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 text = this._dataProvider.entryTitle(entryIndex);
       if (text && text.length) {
         context.font = this._dataProvider.entryFont(entryIndex) || defaultFont;
-        text = this._prepareText(context, text, barWidth - 2 * textPadding);
+        text = WebInspector.trimTextMiddle(context, text, barWidth - 2 * textPadding);
       }
       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);
     }
@@ skipping 155 matching lines @@
       }
     }
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {!WebInspector.FlameChart.Group} group
    * @return {number}
    */
   _labelWidthForGroup(context, group) {
-    return this._measureWidth(context, group.name) + this._expansionArrowIndent * (group.style.nestingLevel + 1) +
+    return WebInspector.measureTextWidth(context, group.name) + this._expansionArrowIndent * (group.style.nestingLevel + 1) +
         2 * this._headerLabelXPadding;
   }
 
   /**
    * @param {number} y
    * @param {number} startLevel
    * @param {number} endLevel
    */
   _drawCollapsedOverviewForGroup(y, startLevel, endLevel) {
     var range = new WebInspector.SegmentedRange(mergeCallback);
@@ skipping 294 matching lines @@
   }
 
   /**
    * @param {number} level
    * @return {number}
    */
   _levelToHeight(level) {
     return this._visibleLevelOffsets[level];
   }
 
-  /**
-   * @param {!CanvasRenderingContext2D} context
-   * @param {string} text
-   * @param {number} maxWidth
-   * @return {string}
-   */
-  _prepareText(context, text, maxWidth) {
-    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 = 0;
-    var r = text.length;
-    var lv = 0;
-    var rv = textWidth;
-    while (l < r && lv !== rv && lv !== maxWidth) {
-      var m = Math.ceil(l + (r - l) * (maxWidth - lv) / (rv - lv));
-      var mv = this._measureWidth(context, text.trimMiddle(m));
-      if (mv <= maxWidth) {
-        l = m;
-        lv = mv;
-      } else {
-        r = m - 1;
-        rv = mv;
-      }
-    }
-    text = text.trimMiddle(l);
-    return text !== '\u2026' ? text : '';
-  }
-
-  /**
-   * @param {!CanvasRenderingContext2D} context
-   * @param {string} text
-   * @return {number}
-   */
-  _measureWidth(context, text) {
-    var /** @const */ maxCacheableLength = 200;
-    if (text.length > maxCacheableLength)
-      return context.measureText(text).width;
-
-    var font = context.font;
-    var textWidths = this._textWidth.get(font);
-    if (!textWidths) {
-      textWidths = new Map();
-      this._textWidth.set(font, textWidths);
-    }
-    var width = textWidths.get(text);
-    if (!width) {
-      width = context.measureText(text).width;
-      textWidths.set(text, width);
-    }
-    return width;
-  }
-
   _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) {
@@ skipping 395 matching lines @@
   }
 
   /**
    * @override
    * @return {number}
    */
   boundarySpan() {
     return this._maximumBoundaries - this._minimumBoundaries;
   }
 };