[Devtools] Finished inlining function for _drawSimplifiedBars

third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 Network.NetworkWaterfallColumn = class extends UI.VBox {
   /**
    * @param {number} rowHeight
    * @param {!Network.NetworkTimeCalculator} calculator
    */
   constructor(rowHeight, calculator) {
     // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
@@ skipping 460 matching lines @@
     context.fillStyle = fillColor;
     context.rect(ranges.mid, 0, barWidth, height - borderWidth);
     context.fill();
     context.stroke();
 
     /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */
     var labels = null;
     if (node.hovered()) {
       labels = this._calculator.computeBarGraphLabels(request);
 
-      // TODO(allada) This will be inlined in an immidate next patch.
-      const leftText = labels.left;
-      const rightText = labels.right;
-      const startX = ranges.start;
-      const midX = ranges.mid;
-      const endX = ranges.mid + barWidth + borderOffset;
-      const currentY = y;
-
       const barDotLineLength = 10;
       context.save();
-      var leftLabelWidth = context.measureText(leftText).width;
-      var rightLabelWidth = context.measureText(rightText).width;
+      var leftLabelWidth = context.measureText(labels.left).width;
+      var rightLabelWidth = context.measureText(labels.right).width;
       context.fillStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.ColorUsage.Foreground);
       context.strokeStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.ColorUsage.Foreground);
-      if (leftLabelWidth < midX - startX) {
-        const midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2;
-        this._textLayers.push({text: leftText, x: midBarX, y: currentY + this._fontSize});
-      } else if (barDotLineLength + leftLabelWidth + this._leftPadding < startX) {
+      if (leftLabelWidth < ranges.mid - ranges.start) {
+        const midBarX = ranges.start + (ranges.mid - ranges.start) / 2 - leftLabelWidth / 2;

[caseq, 2017/03/02 23:30:23]

nit: this could really be 

midBarX = (ranges.start + ranges.mid - leftLabelWidth) / 2;

[allada, 2017/03/03 04:07:43]

Done.

+        this._textLayers.push({text: labels.left, x: midBarX, y: y + this._fontSize});
+      } else if (barDotLineLength + leftLabelWidth + this._leftPadding < ranges.start) {
         this._textLayers.push(
-            {text: leftText, x: startX - leftLabelWidth - barDotLineLength - 1, y: currentY + this._fontSize});
+            {text: labels.left, x: ranges.start - leftLabelWidth - barDotLineLength - 1, y: y + this._fontSize});
         context.beginPath();
-        context.arc(startX, Math.floor(height / 2), 2, 0, 2 * Math.PI);
+        context.arc(ranges.start, Math.floor(height / 2), 2, 0, 2 * Math.PI);
         context.fill();
         context.beginPath();
         context.lineWidth = 1;
-        context.moveTo(startX - barDotLineLength, Math.floor(height / 2));
-        context.lineTo(startX, Math.floor(height / 2));
+        context.moveTo(ranges.start - barDotLineLength, Math.floor(height / 2));
+        context.lineTo(ranges.start, Math.floor(height / 2));
         context.stroke();
       }
 
-      if (rightLabelWidth < endX - midX) {
-        var midBarX = midX + (endX - midX) / 2 - rightLabelWidth / 2;
-        this._textLayers.push({text: rightText, x: midBarX, y: currentY + this._fontSize});
+      const endX = ranges.mid + barWidth + borderOffset;
+      if (rightLabelWidth < endX - ranges.mid) {
+        var midBarX = ranges.mid + (endX - ranges.mid) / 2 - rightLabelWidth / 2;
+        this._textLayers.push({text: labels.right, x: midBarX, y: y + this._fontSize});
       } else if (endX + barDotLineLength + rightLabelWidth < this._offsetWidth - this._leftPadding) {
-        this._textLayers.push({text: rightText, x: endX + barDotLineLength + 1, y: currentY + this._fontSize});
+        this._textLayers.push({text: labels.right, x: endX + barDotLineLength + 1, y: y + this._fontSize});

[caseq, 2017/03/02 23:30:23]

ditto. actually, it would perhaps be nice to dedupe this branch wrt the one
above.

[allada, 2017/03/03 04:07:43]

These branches do quite different things. They both decide weather the right
text can fit in the right block, left text can fit in left block and if they
cant they are not sown.

         context.beginPath();
         context.arc(endX, Math.floor(height / 2), 2, 0, 2 * Math.PI);
         context.fill();
         context.beginPath();
         context.lineWidth = 1;
         context.moveTo(endX, Math.floor(height / 2));
         context.lineTo(endX + barDotLineLength, Math.floor(height / 2));
         context.stroke();
       }
       context.restore();
@@ skipping 115 matching lines @@
   script: 'hsl(31, 100%, 80%)',
   stylesheet: 'hsl(272, 64%, 80%)',
   texttrack: 'hsl(8, 100%, 80%)',
   websocket: 'hsl(0, 0%, 95%)',
   xhr: 'hsl(53, 100%, 80%)',
   other: 'hsl(0, 0%, 95%)'
 };
 
 /** @typedef {!{x: number, y: number, text: string}} */
 Network.NetworkWaterfallColumn._TextLayer;