DevTools: Draw screenshot independently of frames bar on 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 58 matching lines @@
         font: font,
         nestingLevel: 0,
         shareHeaderLine: true
       };
       return /** @type {!PerfUI.FlameChart.GroupStyle} */ (Object.assign(defaultGroupStyle, extra));
     }
 
     this._headerLevel1 = buildGroupStyle({shareHeaderLine: false});
     this._headerLevel2 = buildGroupStyle({padding: 2, nestingLevel: 1, collapsible: false});
     this._staticHeader = buildGroupStyle({collapsible: false});
-    this._framesHeader = buildGroupStyle({useFirstLineForOverview: true, shareHeaderLine: true, itemsHeight: 150});
+    this._framesHeader = buildGroupStyle({useFirstLineForOverview: true});
+    this._screenshotsHeader =
+        buildGroupStyle({useFirstLineForOverview: true, nestingLevel: 1, collapsible: false, itemsHeight: 150});
     this._interactionsHeaderLevel1 = buildGroupStyle({useFirstLineForOverview: true});
     this._interactionsHeaderLevel2 = buildGroupStyle({padding: 2, nestingLevel: 1});
 
     /** @type {!Map<string, number>} */
     this._flowEventIndexById = new Map();
   }
 
   /**
    * @param {?Timeline.PerformanceModel} performanceModel
    */
   setModel(performanceModel) {
     this.reset();
     this._performanceModel = performanceModel;
     this._model = performanceModel && performanceModel.timelineModel();
   }
 
   /**
    * @override
    * @param {number} entryIndex
    * @return {?string}
    */
   entryTitle(entryIndex) {
+    var entryTypes = Timeline.TimelineFlameChartDataProvider.EntryType;
     var entryType = this._entryType(entryIndex);
-    if (entryType === Timeline.TimelineFlameChartEntryType.Event) {
+    if (entryType === entryTypes.Event) {
       var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       if (event.phase === SDK.TracingModel.Phase.AsyncStepInto || event.phase === SDK.TracingModel.Phase.AsyncStepPast)
         return event.name + ':' + event.args['step'];
       if (event._blackboxRoot)
         return Common.UIString('Blackboxed');
       var name = Timeline.TimelineUIUtils.eventStyle(event).title;
       // TODO(yurys): support event dividers
       var detailsText = Timeline.TimelineUIUtils.buildDetailsTextForTraceEvent(event, this._model.targetByEvent(event));
       if (event.name === TimelineModel.TimelineModel.RecordType.JSFrame && detailsText)
         return detailsText;
       return detailsText ? Common.UIString('%s (%s)', name, detailsText) : name;
     }
-    if (entryType === Timeline.TimelineFlameChartEntryType.ExtensionEvent) {
+    if (entryType === entryTypes.ExtensionEvent) {
       var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       return event.name;
     }
+    if (entryType === entryTypes.Screenshot)
+      return '';
     var title = this._entryIndexToTitle[entryIndex];
     if (!title) {
       title = Common.UIString('Unexpected entryIndex %d', entryIndex);
       console.error(title);
     }
     return title;
   }
 
   /**
    * @override
@@ skipping 10 matching lines @@
    * @param {number} index
    * @return {?string}
    */
   entryFont(index) {
     return this._font;
   }
 
   reset() {
     this._currentLevel = 0;
     this._timelineData = null;
-    /** @type {!Array<!SDK.TracingModel.Event|!TimelineModel.TimelineFrame|!TimelineModel.TimelineIRModel.Phases>} */
+    /** @type {!Array<!SDK.FilmStripModel.Frame|!SDK.TracingModel.Event|!TimelineModel.TimelineFrame|!TimelineModel.TimelineIRModel.Phases>} */
     this._entryData = [];
     /** @type {!Array<!SDK.TracingModel.Event>} */
     this._entryParent = [];
-    /** @type {!Array<!Timeline.TimelineFlameChartEntryType>} */
+    /** @type {!Array<!Timeline.TimelineFlameChartDataProvider.EntryType>} */
     this._entryTypeByLevel = [];
     /** @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, ?Image>} */
-    this._frameImageCache = new Map();
+    /** @type {!Map<!SDK.FilmStripModel.Frame, ?Image>} */
+    this._screenshotImageCache = 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._appendFrameBars(this._performanceModel.frames());
+    this._appendFrameBars();
 
     this._appendHeader(Common.UIString('Interactions'), this._interactionsHeaderLevel1);
     this._appendInteractionRecords();
 
-    var eventEntryType = Timeline.TimelineFlameChartEntryType.Event;
+    var eventEntryType = Timeline.TimelineFlameChartDataProvider.EntryType.Event;
 
     var asyncEventGroups = TimelineModel.TimelineModel.AsyncEventGroup;
     var inputLatencies = this._model.mainThreadAsyncEvents().get(asyncEventGroups.input);
     if (inputLatencies && inputLatencies.length) {
       var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.input);
       this._appendAsyncEventsGroup(title, inputLatencies, this._interactionsHeaderLevel2, eventEntryType);
     }
     var animations = this._model.mainThreadAsyncEvents().get(asyncEventGroups.animation);
     if (animations && animations.length) {
       var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.animation);
@@ skipping 24 matching lines @@
     }
     this._appendGPUEvents();
 
     otherThreads.forEach(
         thread => this._appendThreadTimelineData(
             thread.name || Common.UIString('Thread %d', thread.id), thread.events, thread.asyncEventsByGroup));
 
     for (let extensionIndex = 0; extensionIndex < this._extensionInfo.length; extensionIndex++)
       this._innerAppendExtensionEvents(extensionIndex);
 
-    /**
-     * @param {!Timeline.TimelineFlameChartMarker} a
-     * @param {!Timeline.TimelineFlameChartMarker} b
-     */
-    function compareStartTime(a, b) {
-      return a.startTime() - b.startTime();
-    }
-
-    this._markers.sort(compareStartTime);
+    this._markers.sort((a, b) => a.startTime() - b.startTime());
     this._timelineData.markers = this._markers;
     this._flowEventIndexById.clear();
 
     return this._timelineData;
   }
 
   /**
    * @override
    * @return {number}
    */
@@ skipping 12 matching lines @@
   /**
    * @param {number} level
    * @param {!TimelineModel.TimelineModel.PageFrame} frame
    */
   _appendFrameEvents(level, frame) {
     var events = this._model.eventsForFrame(frame.id);
     var clonedHeader = Object.assign({}, this._headerLevel1);
     clonedHeader.nestingLevel = level;
     this._appendSyncEvents(
         events, Timeline.TimelineUIUtils.displayNameForFrame(frame),
-        /** @type {!PerfUI.FlameChart.GroupStyle} */ (clonedHeader), Timeline.TimelineFlameChartEntryType.Event);
+        /** @type {!PerfUI.FlameChart.GroupStyle} */ (clonedHeader),
+        Timeline.TimelineFlameChartDataProvider.EntryType.Event);
     frame.children.forEach(this._appendFrameEvents.bind(this, level + 1));
   }
 
   /**
    * @param {string} threadTitle
    * @param {!Array<!SDK.TracingModel.Event>} syncEvents
    * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.TracingModel.AsyncEvent>>} asyncEvents
    * @param {boolean=} forceExpanded
    */
   _appendThreadTimelineData(threadTitle, syncEvents, asyncEvents, forceExpanded) {
-    var entryType = Timeline.TimelineFlameChartEntryType.Event;
+    var entryType = Timeline.TimelineFlameChartDataProvider.EntryType.Event;
     this._appendAsyncEvents(asyncEvents);
     this._appendSyncEvents(syncEvents, threadTitle, this._headerLevel1, entryType, forceExpanded);
   }
 
   /**
    * @param {!Array<!SDK.TracingModel.Event>} events
    * @param {string} title
    * @param {!PerfUI.FlameChart.GroupStyle} style
-   * @param {!Timeline.TimelineFlameChartEntryType} entryType
+   * @param {!Timeline.TimelineFlameChartDataProvider.EntryType} entryType
    * @param {boolean=} forceExpanded
    */
   _appendSyncEvents(events, title, style, entryType, forceExpanded) {
-    var isExtension = entryType === Timeline.TimelineFlameChartEntryType.ExtensionEvent;
+    var isExtension = entryType === Timeline.TimelineFlameChartDataProvider.EntryType.ExtensionEvent;
     var openEvents = [];
     var flowEventsEnabled = Runtime.experiments.isEnabled('timelineFlowEvents');
     var blackboxingEnabled = !isExtension && Runtime.experiments.isEnabled('blackboxJSFramesOnTimeline');
     var maxStackDepth = 0;
     for (var i = 0; i < events.length; ++i) {
       var e = events[i];
       if (!isExtension && TimelineModel.TimelineModel.isMarkerEvent(e)) {
         this._markers.push(new Timeline.TimelineFlameChartMarker(
             e.startTime, e.startTime - this._model.minimumRecordTime(),
             Timeline.TimelineUIUtils.markerStyleForEvent(e)));
@@ skipping 54 matching lines @@
    * @return {boolean}
    */
   _isBlackboxedURL(url) {
     return Bindings.blackboxManager.isBlackboxedURL(url);
   }
 
   /**
    * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.TracingModel.AsyncEvent>>} asyncEvents
    */
   _appendAsyncEvents(asyncEvents) {
-    var entryType = Timeline.TimelineFlameChartEntryType.Event;
+    var entryType = Timeline.TimelineFlameChartDataProvider.EntryType.Event;
     var groups = TimelineModel.TimelineModel.AsyncEventGroup;
     var groupArray = Object.keys(groups).map(key => groups[key]);
 
     groupArray.remove(groups.animation);
     groupArray.remove(groups.input);
 
     for (var groupIndex = 0; groupIndex < groupArray.length; ++groupIndex) {
       var group = groupArray[groupIndex];
       var events = asyncEvents.get(group);
       if (!events)
         continue;
       var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(group);
       this._appendAsyncEventsGroup(title, events, this._headerLevel1, entryType);
     }
   }
 
   /**
    * @param {string} header
    * @param {!Array<!SDK.TracingModel.AsyncEvent>} events
    * @param {!PerfUI.FlameChart.GroupStyle} style
-   * @param {!Timeline.TimelineFlameChartEntryType} entryType
+   * @param {!Timeline.TimelineFlameChartDataProvider.EntryType} entryType
    */
   _appendAsyncEventsGroup(header, events, style, entryType) {
     var lastUsedTimeByLevel = [];
     var groupHeaderAppended = false;
     for (var i = 0; i < events.length; ++i) {
       var asyncEvent = events[i];
       if (!this._isVisible(asyncEvent))
         continue;
       if (!groupHeaderAppended) {
         this._appendHeader(header, style);
         groupHeaderAppended = true;
       }
       var startTime = asyncEvent.startTime;
       var level;
       for (level = 0; level < lastUsedTimeByLevel.length && lastUsedTimeByLevel[level] > startTime; ++level) {
       }
       this._appendAsyncEvent(asyncEvent, this._currentLevel + level);
       lastUsedTimeByLevel[level] = asyncEvent.endTime;
     }
     this._entryTypeByLevel.length = this._currentLevel + lastUsedTimeByLevel.length;
     this._entryTypeByLevel.fill(entryType, this._currentLevel);
     this._currentLevel += lastUsedTimeByLevel.length;
   }
 
   _appendGPUEvents() {
-    var eventType = Timeline.TimelineFlameChartEntryType.Event;
+    var eventType = Timeline.TimelineFlameChartDataProvider.EntryType.Event;
     var gpuEvents = this._model.gpuEvents();
     if (this._appendSyncEvents(gpuEvents, Common.UIString('GPU'), this._headerLevel1, eventType, false))
       ++this._currentLevel;
   }
 
   _appendInteractionRecords() {
     this._performanceModel.interactionRecords().forEach(this._appendSegment, this);
-    this._entryTypeByLevel[this._currentLevel++] = Timeline.TimelineFlameChartEntryType.InteractionRecord;
+    this._entryTypeByLevel[this._currentLevel++] = Timeline.TimelineFlameChartDataProvider.EntryType.InteractionRecord;
   }
 
-  /**
-   * @param {!Array.<!TimelineModel.TimelineFrame>} frames
-   */
-  _appendFrameBars(frames) {
-    var hasFilmStrip = !!this._performanceModel.filmStripModel().frames().length;
+  _appendFrameBars() {
+    var screenshots = this._performanceModel.filmStripModel().frames();
+    var hasFilmStrip = !!screenshots.length;
     this._framesHeader.collapsible = hasFilmStrip;
     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 frame of frames) {
+    this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartDataProvider.EntryType.Frame;
+    for (var frame of this._performanceModel.frames()) {
       this._markers.push(new Timeline.TimelineFlameChartMarker(
           frame.startTime, frame.startTime - this._model.minimumRecordTime(), style));
       this._appendFrame(frame);
     }
     ++this._currentLevel;
+    if (!hasFilmStrip)
+      return;
+    this._appendHeader('', this._screenshotsHeader);
+    this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartDataProvider.EntryType.Screenshot;
+    var prevTimestamp;
+    for (var screenshot of screenshots) {
+      var index = this._entryData.length;
+      this._entryData.push(screenshot);
+      this._timelineData.entryLevels[index] = this._currentLevel;
+      this._timelineData.entryStartTimes[index] = screenshot.timestamp;
+      if (prevTimestamp)
+        this._timelineData.entryTotalTimes[index - 1] = screenshot.timestamp - prevTimestamp;
+      prevTimestamp = screenshot.timestamp;
+    }
+    this._timelineData.entryTotalTimes[this._timelineData.entryTotalTimes.length - 1] =
+        this._model.maximumRecordTime() - prevTimestamp;
+    ++this._currentLevel;
   }
 
   /**
    * @param {number} entryIndex
-   * @return {!Timeline.TimelineFlameChartEntryType}
+   * @return {!Timeline.TimelineFlameChartDataProvider.EntryType}
    */
   _entryType(entryIndex) {
     return this._entryTypeByLevel[this._timelineData.entryLevels[entryIndex]];
   }
 
   /**
    * @override
    * @param {number} entryIndex
    * @return {?Element}
    */
   prepareHighlightedEntryInfo(entryIndex) {
     var time = '';
     var title;
     var warning;
     var type = this._entryType(entryIndex);
-    if (type === Timeline.TimelineFlameChartEntryType.Event) {
+    if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Event) {
       var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       var totalTime = event.duration;
       var selfTime = event.selfTime;
       var /** @const */ eps = 1e-6;
       if (typeof totalTime === 'number') {
         time = Math.abs(totalTime - selfTime) > eps && selfTime > eps ?
             Common.UIString(
                 '%s (self %s)', Number.millisToString(totalTime, true), Number.millisToString(selfTime, true)) :
             Number.millisToString(totalTime, true);
       }
       title = this.entryTitle(entryIndex);
       warning = Timeline.TimelineUIUtils.eventWarning(event);
-    } else if (type === Timeline.TimelineFlameChartEntryType.Frame) {
+    } else if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Frame) {
       var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryIndex]);
       time = Common.UIString(
           '%s ~ %.0f\xa0fps', Number.preciseMillisToString(frame.duration, 1), (1000 / frame.duration));
       title = frame.idle ? Common.UIString('Idle Frame') : Common.UIString('Frame');
       if (frame.hasWarnings()) {
         warning = createElement('span');
         warning.textContent = Common.UIString('Long frame');
       }
     } else {
       return null;
@@ skipping 20 matching lines @@
     function patchColorAndCache(cache, key, lookupColor) {
       var color = cache.get(key);
       if (color)
         return color;
       var parsedColor = Common.Color.parse(lookupColor(key));
       color = parsedColor.setAlpha(0.7).asString(Common.Color.Format.RGBA) || '';
       cache.set(key, color);
       return color;
     }
 
+    var entryTypes = Timeline.TimelineFlameChartDataProvider.EntryType;
     var type = this._entryType(entryIndex);
-    if (type === Timeline.TimelineFlameChartEntryType.Event) {
+    if (type === entryTypes.Event) {
       var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       if (!SDK.TracingModel.isAsyncPhase(event.phase))
         return this._colorForEvent(event);
       if (event.hasCategory(TimelineModel.TimelineModel.Category.Console) ||
           event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming))
         return this._consoleColorGenerator.colorForID(event.name);
       if (event.hasCategory(TimelineModel.TimelineModel.Category.LatencyInfo)) {
         var phase =
             TimelineModel.TimelineIRModel.phaseForEvent(event) || TimelineModel.TimelineIRModel.Phases.Uncategorized;
         return patchColorAndCache(
             this._asyncColorByInteractionPhase, phase, Timeline.TimelineUIUtils.interactionPhaseColor);
       }
       var category = Timeline.TimelineUIUtils.eventStyle(event).category;
       return patchColorAndCache(this._asyncColorByCategory, category, () => category.color);
     }
-    if (type === Timeline.TimelineFlameChartEntryType.Frame)
+    if (type === entryTypes.Frame)
       return 'white';
-    if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord)
+    if (type === entryTypes.InteractionRecord)
       return 'transparent';
-    if (type === Timeline.TimelineFlameChartEntryType.ExtensionEvent) {
+    if (type === entryTypes.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
    */
   _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 headerHeight = 17;
     var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
     var textWidth = context.measureText(frameDurationText).width;
     if (textWidth <= barWidth) {
-      var font = this.entryFont(entryIndex);
-      if (font)
-        context.font = font;
       context.fillStyle = this.textColor(entryIndex);
-      context.fillText(frameDurationText, barX + (barWidth - textWidth) / 2, barY + headerHeight - 4);
+      context.fillText(frameDurationText, barX + (barWidth - textWidth) / 2, barY + barHeight - 4);
     }
+  }
 
-    var imageHeight = barHeight - headerHeight;
-    if (imageHeight < headerHeight)
+  /**
+   * @param {number} entryIndex
+   * @param {!CanvasRenderingContext2D} context
+   * @param {number} barX
+   * @param {number} barY
+   * @param {number} barWidth
+   * @param {number} barHeight
+   */
+  async _drawScreenshot(entryIndex, context, barX, barY, barWidth, barHeight) {
+    var screenshot = /** @type {!SDK.FilmStripModel.Frame} */ (this._entryData[entryIndex]);
+    if (!this._screenshotImageCache.has(screenshot)) {
+      this._screenshotImageCache.set(screenshot, null);
+      var data = await screenshot.imageDataPromise();
+      var image = await UI.loadImageFromData(data);
+      this._screenshotImageCache.set(screenshot, image);
+      this.dispatchEventToListeners(Timeline.TimelineFlameChartDataProvider.Events.DataChanged);
       return;
-    if (!this._frameImageCache.has(frame)) {
-      this._frameImageCache.set(frame, null);  // Mark the image promise is in flight.
-      var modelFrame = this._performanceModel.filmStripModelFrame(frame);
-      if (modelFrame) {
-        modelFrame.imageDataPromise().then(data => UI.loadImageFromData(data)).then(image => {
-          this._frameImageCache.set(frame, image);
-          this.dispatchEventToListeners(Timeline.TimelineFlameChartDataProvider.Events.DataChanged);
-        });
-      }
     }
-    var image = this._frameImageCache.get(frame);
+    context.fillStyle = '#eee';
+    context.fillRect(barX, barY, barWidth, barHeight);
+    var image = this._screenshotImageCache.get(screenshot);
     if (!image)
       return;
-    var imageX = barX;
-    var imageY = barY + headerHeight;
+    var imageX = barX + 1;
+    var imageY = barY + 1;
+    var imageHeight = barHeight - 2;
     var scale = imageHeight / image.naturalHeight;
     var imageWidth = image.naturalWidth * scale;
     context.save();
     context.beginPath();
-    context.rect(imageX, imageY, barWidth, imageHeight);
+    context.rect(imageX, imageY, barWidth - 2, imageHeight);
     context.clip();
     context.drawImage(image, imageX, imageY, imageWidth, imageHeight);
     context.restore();
   }
 
   /**
    * @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 entryTypes = Timeline.TimelineFlameChartDataProvider.EntryType;
+
+    if (type === entryTypes.Frame) {
       this._drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight);
       return true;
     }
 
-    if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord) {
+    if (type === entryTypes.Screenshot) {
+      this._drawScreenshot(entryIndex, context, barX, barY, barWidth, barHeight);
+      return true;
+    }
+
+    if (type === entryTypes.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);
       return false;
     }
 
-    if (type === Timeline.TimelineFlameChartEntryType.Event) {
+    if (type === entryTypes.Event) {
       var event = /** @type {!SDK.TracingModel.Event} */ (data);
       if (event.hasCategory(TimelineModel.TimelineModel.Category.LatencyInfo)) {
         var timeWaitingForMainThread = TimelineModel.TimelineData.forEvent(event).timeWaitingForMainThread;
         if (timeWaitingForMainThread) {
           context.fillStyle = 'hsla(0, 70%, 60%, 1)';
           var width = Math.floor(unclippedBarX - barX + timeWaitingForMainThread * timeToPixels);
           context.fillRect(barX, barY + barHeight - 3, width, 2);
         }
       }
       if (TimelineModel.TimelineData.forEvent(event).warning)
@@ skipping 21 matching lines @@
 
     return false;
   }
 
   /**
    * @override
    * @param {number} entryIndex
    * @return {boolean}
    */
   forceDecoration(entryIndex) {
+    var entryTypes = Timeline.TimelineFlameChartDataProvider.EntryType;
     var type = this._entryType(entryIndex);
-    if (type === Timeline.TimelineFlameChartEntryType.Frame)
+    if (type === entryTypes.Frame)
+      return true;
+    if (type === entryTypes.Screenshot)
       return true;
 
-    if (type === Timeline.TimelineFlameChartEntryType.Event) {
+    if (type === entryTypes.Event) {
       var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       return !!TimelineModel.TimelineData.forEvent(event).warning;
     }
     return false;
   }
 
   /**
    * @param {!{title: string, model: !SDK.TracingModel}} entry
    */
   appendExtensionEvents(entry) {
     this._extensionInfo.push(entry);
     if (this._timelineData)
       this._innerAppendExtensionEvents(this._extensionInfo.length - 1);
   }
 
   /**
    * @param {number} index
    */
   _innerAppendExtensionEvents(index) {
     var entry = this._extensionInfo[index];
-    var entryType = Timeline.TimelineFlameChartEntryType.ExtensionEvent;
+    var entryType = Timeline.TimelineFlameChartDataProvider.EntryType.ExtensionEvent;
     var allThreads = [].concat(...entry.model.sortedProcesses().map(process => process.sortedThreads()));
     if (!allThreads.length)
       return;
 
     this._appendHeader(entry.title, this._headerLevel1);
     for (let thread of allThreads) {
       this._appendAsyncEventsGroup(thread.name(), thread.asyncEvents(), this._headerLevel2, entryType);
       this._appendSyncEvents(thread.events(), thread.name(), this._headerLevel2, entryType, false);
     }
   }
@@ skipping 111 matching lines @@
     this._timelineData.entryStartTimes[index] = segment.begin;
   }
 
   /**
    * @param {number} entryIndex
    * @return {?Timeline.TimelineSelection}
    */
   createSelection(entryIndex) {
     var type = this._entryType(entryIndex);
     var timelineSelection = null;
-    if (type === Timeline.TimelineFlameChartEntryType.Event) {
+    if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Event) {
       timelineSelection = Timeline.TimelineSelection.fromTraceEvent(
           /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]));
-    } else if (type === Timeline.TimelineFlameChartEntryType.Frame) {
+    } else if (type === Timeline.TimelineFlameChartDataProvider.EntryType.Frame) {
       timelineSelection = Timeline.TimelineSelection.fromFrame(
           /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryIndex]));
     }
     if (timelineSelection)
       this._lastSelection = new Timeline.TimelineFlameChartView.Selection(timelineSelection, entryIndex);
     return timelineSelection;
   }
 
   /**
    * @override
@@ skipping 92 matching lines @@
    */
   _eventParent(event) {
     return this._entryParent[event[Timeline.TimelineFlameChartDataProvider._indexSymbol]] || null;
   }
 
   /**
    * @param {number} entryIndex
    * @return {?SDK.TracingModel.Event}
    */
   eventByIndex(entryIndex) {
-    return this._entryType(entryIndex) === Timeline.TimelineFlameChartEntryType.Event ?
+    return this._entryType(entryIndex) === Timeline.TimelineFlameChartDataProvider.EntryType.Event ?
         /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]) :
         null;
   }
 
   /**
    * @param {function(!SDK.TracingModel.Event):string} colorForEvent
    */
   setEventColorMapping(colorForEvent) {
     this._colorForEvent = colorForEvent;
   }
 };
 
 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;
 Timeline.TimelineFlameChartDataProvider._indexSymbol = Symbol('index');
 
 /** @enum {symbol} */
 Timeline.TimelineFlameChartDataProvider.Events = {
   DataChanged: Symbol('DataChanged')
 };
+
+/** @enum {symbol} */
+Timeline.TimelineFlameChartDataProvider.EntryType = {
+  Frame: Symbol('Frame'),
+  Event: Symbol('Event'),
+  InteractionRecord: Symbol('InteractionRecord'),
+  ExtensionEvent: Symbol('ExtensionEvent'),
+  Screenshot: Symbol('Screenshot'),
+};