DevTools: Show screenshots on the main flamechart

third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartDataProvider.js

 /*
  * Copyright (C) 2014 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 29 matching lines @@
     this.reset();
     this._font = '11px ' + Host.fontFamily();
     this._filters = filters;
     /** @type {?PerfUI.FlameChart.TimelineData} */
     this._timelineData = null;
     this._currentLevel = 0;
     /** @type {?Timeline.PerformanceModel} */
     this._performanceModel = null;
     /** @type {?TimelineModel.TimelineModel} */
     this._model = null;
+    this._expandedFrameBarHeight = 5;  // Number of bars.
 
     this._consoleColorGenerator =
         new PerfUI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7);
     this._extensionColorGenerator =
         new PerfUI.FlameChart.ColorGenerator({min: 210, max: 300}, {min: 70, max: 100, count: 6}, 70, 0.7);
 
     var defaultGroupStyle = {
       padding: 4,
       height: 17,
       collapsible: true,
       color: UI.themeSupport.patchColorText('#222', UI.ThemeSupport.ColorUsage.Foreground),
       backgroundColor: UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background),
       font: this._font,
       nestingLevel: 0,
       shareHeaderLine: true
     };
 
     this._headerLevel1 = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {shareHeaderLine: false}));
     this._headerLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1, collapsible: false}));
     this._staticHeader = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {collapsible: false}));
+    this._framesHeader = /** @type {!PerfUI.FlameChart.GroupStyle} */
+        (Object.assign({}, defaultGroupStyle, {useFirstLineForOverview: true, shareHeaderLine: true}));
     this._interactionsHeaderLevel1 = /** @type {!PerfUI.FlameChart.GroupStyle} */
-        (Object.assign({useFirstLineForOverview: true}, defaultGroupStyle));
+        (Object.assign({}, defaultGroupStyle, {useFirstLineForOverview: true}));
     this._interactionsHeaderLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1}));
 
     /** @type {!Map<string, number>} */
     this._flowEventIndexById = new Map();
   }
 
   /**
    * @param {?Timeline.PerformanceModel} performanceModel
    */
@@ skipping 66 matching lines @@
     /** @type {!Array<string>} */
     this._entryIndexToTitle = [];
     /** @type {!Array<!Timeline.TimelineFlameChartMarker>} */
     this._markers = [];
     /** @type {!Map<!Timeline.TimelineCategory, string>} */
     this._asyncColorByCategory = new Map();
     /** @type {!Map<!TimelineModel.TimelineIRModel.Phases, string>} */
     this._asyncColorByInteractionPhase = new Map();
     /** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */
     this._extensionInfo = [];
+    /** @type {!Map<!TimelineModel.TimelineFrame, ?Promise<?Image>>} */
+    this._frameImageCache = new Map();
   }
 
   /**
    * @override
    * @return {number}
    */
   maxStackDepth() {
     return this._currentLevel;
   }
 
   /**
    * @override
    * @return {!PerfUI.FlameChart.TimelineData}
    */
   timelineData() {
     if (this._timelineData)
       return this._timelineData;
 
     this._timelineData = new PerfUI.FlameChart.TimelineData([], [], [], []);
     if (!this._model)
       return this._timelineData;
 
     this._flowEventIndexById.clear();
 
     this._minimumBoundary = this._model.minimumRecordTime();
     this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTime() - this._minimumBoundary;
     this._currentLevel = 0;
 
-    this._appendHeader(Common.UIString('Frames'), this._staticHeader);
     this._appendFrameBars(this._performanceModel.frames());
 
     this._appendHeader(Common.UIString('Interactions'), this._interactionsHeaderLevel1);
     this._appendInteractionRecords();
 
     var eventEntryType = Timeline.TimelineFlameChartEntryType.Event;
 
     var asyncEventGroups = TimelineModel.TimelineModel.AsyncEventGroup;
     var inputLatencies = this._model.mainThreadAsyncEvents().get(asyncEventGroups.input);
     if (inputLatencies && inputLatencies.length) {
@@ skipping 232 matching lines @@
 
   _appendInteractionRecords() {
     this._performanceModel.interactionRecords().forEach(this._appendSegment, this);
     this._entryTypeByLevel[this._currentLevel++] = Timeline.TimelineFlameChartEntryType.InteractionRecord;
   }
 
   /**
    * @param {!Array.<!TimelineModel.TimelineFrame>} frames
    */
   _appendFrameBars(frames) {
+    var hasFilmStrtip = !!this._performanceModel.filmStripModel().frames().length;
+    this._framesHeader.collapsible = hasFilmStrtip;
+    this._appendHeader(Common.UIString('Frames'), this._framesHeader);
+    this._frameGroup = this._timelineData.groups.peekLast();
     var style = Timeline.TimelineUIUtils.markerStyleForFrame();
     this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartEntryType.Frame;
-    for (var i = 0; i < frames.length; ++i) {
+    for (var frame of frames) {
       this._markers.push(new Timeline.TimelineFlameChartMarker(
-          frames[i].startTime, frames[i].startTime - this._model.minimumRecordTime(), style));
-      this._appendFrame(frames[i]);
+          frame.startTime, frame.startTime - this._model.minimumRecordTime(), style));
+      this._appendFrame(frame);
     }
-    ++this._currentLevel;
+    this._currentLevel += hasFilmStrtip ? this._expandedFrameBarHeight : 1;
   }
 
   /**
    * @param {number} entryIndex
    * @return {!Timeline.TimelineFlameChartEntryType}
    */
   _entryType(entryIndex) {
     return this._entryTypeByLevel[this._timelineData.entryLevels[entryIndex]];
   }
 
@@ skipping 83 matching lines @@
     if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord)
       return 'transparent';
     if (type === Timeline.TimelineFlameChartEntryType.ExtensionEvent) {
       var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       return this._extensionColorGenerator.colorForID(event.name);
     }
     return '';
   }
 
   /**
+   * @param {number} entryIndex
+   * @param {!CanvasRenderingContext2D} context
+   * @param {?string} text
+   * @param {number} barX
+   * @param {number} barY
+   * @param {number} barWidth
+   * @param {number} barHeight
+   * @return {!Promise}
+   */
+  async _drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight) {
+    var /** @const */ hPadding = 1;
+    var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryIndex]);
+    barX += hPadding;
+    barWidth -= 2 * hPadding;
+    context.fillStyle = frame.idle ? 'white' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1');
+    context.fillRect(barX, barY, barWidth, barHeight);
+
+    var imagePromise;
+    if (this._frameImageCache.has(frame)) {
+      imagePromise = this._frameImageCache.get(frame);
+    } else {
+      var modelFrame = Timeline.TimelineUIUtils.filmStripModelFrame(this._performanceModel.filmStripModel(), frame);
+      imagePromise = modelFrame &&
+          modelFrame.imageDataPromise().then(data => UI.loadImage(data ? 'data:image/jpg;base64,' + data : ''));
+      this._frameImageCache.set(frame, imagePromise);
+    }
+    var image = await imagePromise;

[pfeldman, 2017/04/24 21:07:17]

// -------- ASYNC --------

[alph, 2017/04/24 21:18:05]

Done.

+    var maxTextWidth = barWidth;
+    if (image) {
+      var imageHeight = barHeight;
+      var imageY = barY;
+      if (this._frameGroup.expanded) {
+        imageHeight *= (this._expandedFrameBarHeight - 1);
+        imageY += barHeight;
+      }
+      var scale = imageHeight / image.naturalHeight;
+      var imageWidth = image.naturalWidth * scale;
+      if (!this._frameGroup.expanded)
+        maxTextWidth = Math.max(0, barWidth - imageWidth);
+      context.save();
+      context.beginPath();
+      context.rect(barX, imageY, barWidth, imageHeight);
+      context.clip();
+      context.drawImage(image, barX + barWidth - imageWidth, imageY, imageWidth, imageHeight);
+      context.restore();
+    }
+
+    var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
+    var textWidth = context.measureText(frameDurationText).width;
+    if (textWidth <= maxTextWidth) {
+      var font = this.entryFont(entryIndex);
+      if (font)
+        context.font = font;
+      context.fillStyle = this.textColor(entryIndex);
+      context.fillText(frameDurationText, barX + (maxTextWidth - textWidth) / 2, barY + barHeight - 4);
+    }
+  }
+
+  /**
    * @override
    * @param {number} entryIndex
    * @param {!CanvasRenderingContext2D} context
    * @param {?string} text
    * @param {number} barX
    * @param {number} barY
    * @param {number} barWidth
    * @param {number} barHeight
    * @param {number} unclippedBarX
    * @param {number} timeToPixels
    * @return {boolean}
    */
   decorateEntry(entryIndex, context, text, barX, barY, barWidth, barHeight, unclippedBarX, timeToPixels) {
     var data = this._entryData[entryIndex];
     var type = this._entryType(entryIndex);
     if (type === Timeline.TimelineFlameChartEntryType.Frame) {
-      var /** @const */ vPadding = 1;
-      var /** @const */ hPadding = 1;
-      var frame = /** {!TimelineModel.TimelineFrame} */ (data);
-      barX += hPadding;
-      barWidth -= 2 * hPadding;
-      barY += vPadding;
-      barHeight -= 2 * vPadding + 1;
-      context.fillStyle = frame.idle ? 'white' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1');
-      context.fillRect(barX, barY, barWidth, barHeight);
-      var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
-      var textWidth = context.measureText(frameDurationText).width;
-      if (barWidth >= textWidth) {
-        context.fillStyle = this.textColor(entryIndex);
-        context.fillText(frameDurationText, barX + (barWidth - textWidth) / 2, barY + barHeight - 3);
-      }
+      this._drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight);
       return true;
     }
 
     if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord) {
       var color = Timeline.TimelineUIUtils.interactionPhaseColor(
           /** @type {!TimelineModel.TimelineIRModel.Phases} */ (data));
       context.fillStyle = color;
       context.fillRect(barX, barY, barWidth - 1, 2);
       context.fillRect(barX, barY - 3, 2, 3);
       context.fillRect(barX + barWidth - 3, barY - 3, 2, 3);
@@ skipping 316 matching lines @@
    */
   eventByIndex(entryIndex) {
     return this._entryType(entryIndex) === Timeline.TimelineFlameChartEntryType.Event ?
         /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]) :
         null;
   }
 };
 
 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;
 Timeline.TimelineFlameChartDataProvider._indexSymbol = Symbol('index');