DevTools: move recurring flag into AsyncTask, control cancelation from embedder only.

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 937 matching lines @@
    * @param {number} width
    */
   _drawFlowEvents(context, width, height) {
     context.save();
     var ratio = window.devicePixelRatio;
     var top = this.getScrollOffset();
     var arrowWidth = 6;
     context.scale(ratio, ratio);
     context.translate(0, -top);
 
-    context.fillStyle = '#7f0000';
-    context.strokeStyle = '#7f0000';
+    context.fillStyle = '#7f5050';

[alph, 2017/03/14 00:39:37]

Red color is reserved for something being wrong.

[pfeldman, 2017/03/14 01:15:10]

Yeah, that's why I made it brown.

+    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] < this._timeWindowLeft)
+      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 distance = (endY - startY) / 10;
-      var spread = 30;
-      var lineY = spread + Math.max(0, startY + distance * (i % spread));
+
 
       var segment = Math.min((endX - startX) / 4, 40);
+      var distanceTime = td.flowEndTimes[i] - td.flowStartTimes[i];

[alph, 2017/03/14 00:39:37]

This file changes seem to be unrelated to the main change.

[pfeldman, 2017/03/14 01:15:10]

I know, I am sorry.

+      var distanceY = (endY - startY) / 10;
+      var spread = 30;
+      var lineY = distanceTime < 1 ? startY : spread + Math.max(0, startY + distanceY * (i % spread));
+
+      var p = [];

[alph, 2017/03/14 00:39:37]

creating arrays of objects is not a good idea for the hot code.

[pfeldman, 2017/03/14 01:15:10]

Do you think 2 bezierCurveTo-s is not making this overhead negligible?

+      p.push({x: startX, y: startY});
+      p.push({x: startX + arrowWidth, y: startY});
+      p.push({x: startX + segment + 2 * arrowWidth, y: startY});
+      p.push({x: startX + segment, y: lineY});
+      p.push({x: startX + segment * 2, y: lineY});
+      p.push({x: endX - segment * 2, y: lineY});
+      p.push({x: endX - segment, y: lineY});
+      p.push({x: endX - segment - 2 * arrowWidth, y: endY});
+      p.push({x: endX - arrowWidth, y: endY});
+
       context.beginPath();
-      context.moveTo(startX, startY);
-      context.bezierCurveTo(startX + segment, startY, startX + segment, lineY, startX + segment * 2, lineY);
-      context.lineTo(endX - segment * 2, lineY);
-      context.bezierCurveTo(endX - segment, lineY, endX - segment, endY, endX - arrowWidth, endY);
+      context.moveTo(p[0].x, p[0].y);
+      context.lineTo(p[1].x, p[1].y);
+      context.bezierCurveTo(p[2].x, p[2].y, p[3].x, p[3].y, p[4].x, p[4].y);
+      context.lineTo(p[5].x, p[5].y);
+      context.bezierCurveTo(p[6].x, p[6].y, p[7].x, p[7].y, p[8].x, p[8].y);
       context.stroke();
 
       context.beginPath();
       context.arc(startX, startY, 2, -Math.PI / 2, Math.PI / 2, false);
       context.fill();
 
       context.beginPath();
       context.moveTo(endX, endY);
       context.lineTo(endX - arrowWidth, endY - 3);
       context.lineTo(endX - arrowWidth, endY + 3);
@@ skipping 595 matching lines @@
   }
 
   /**
    * @override
    * @return {number}
    */
   boundarySpan() {
     return this._maximumBoundaries - this._minimumBoundaries;
   }
 };