From ef9fa0f54f972866989a5980562a4129ad056764 Mon Sep 17 00:00:00 2001 From: alph Date: Fri, 28 Apr 2017 13:37:53 -0700 Subject: [PATCH] Revert of DevTools: Show screenshots on the main flamechart (patchset #3 id:40001 of https://codereview.chromium.org/2830343004/ ) Reason for revert: Panning does not work, as well as HiDPI. Original issue's description: > DevTools: Show screenshots on the main flamechart > > The patch puts the screenshots on the frame bar and makes it expandable. > > BUG=705054 > > Review-Url: https://codereview.chromium.org/2830343004 > Cr-Commit-Position: refs/heads/master@{#466821} > Committed: https://chromium.googlesource.com/chromium/src/+/575cce8631ed083645523d47a35090d6ca6ccdfd TBR=pfeldman@chromium.org # Not skipping CQ checks because original CL landed more than 1 days ago. BUG=705054 Review-Url: https://codereview.chromium.org/2854473002 Cr-Commit-Position: refs/heads/master@{#468116} --- front_end/timeline/TimelineDetailsView.js | 7 +- front_end/timeline/TimelineEventOverview.js | 34 +++++-- .../TimelineFlameChartDataProvider.js | 96 ++++--------------- front_end/timeline/TimelineUIUtils.js | 15 --- 4 files changed, 53 insertions(+), 99 deletions(-) diff --git a/front_end/timeline/TimelineDetailsView.js b/front_end/timeline/TimelineDetailsView.js index 8aa39fa61c..edd10a8cce 100644 --- a/front_end/timeline/TimelineDetailsView.js +++ b/front_end/timeline/TimelineDetailsView.js @@ -122,7 +122,12 @@ Timeline.TimelineDetailsView = class extends UI.VBox { break; case Timeline.TimelineSelection.Type.Frame: var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._selection.object()); - var filmStripFrame = Timeline.TimelineUIUtils.filmStripModelFrame(this._model.filmStripModel(), frame); + var screenshotTime = frame.idle ? + frame.startTime : + frame.endTime; // For idle frames, look at the state at the beginning of the frame. + var filmStripFrame = this._model.filmStripModel().frameByTimestamp(screenshotTime); + if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10) + filmStripFrame = null; this._setContent(Timeline.TimelineUIUtils.generateDetailsContentForFrame(frame, filmStripFrame)); if (frame.layerTree) { var layersView = this._layersView(); diff --git a/front_end/timeline/TimelineEventOverview.js b/front_end/timeline/TimelineEventOverview.js index 71c8a933e0..45b6cab911 100644 --- a/front_end/timeline/TimelineEventOverview.js +++ b/front_end/timeline/TimelineEventOverview.js @@ -364,7 +364,7 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie this._imageByFrame(frames[0]).then(image => { if (this._drawGeneration !== drawGeneration) return; - if (!image || !image.naturalWidth || !image.naturalHeight) + if (!image.naturalWidth || !image.naturalHeight) return; var imageHeight = this.height() - 2 * Timeline.TimelineFilmStripOverview.Padding; var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.naturalHeight); @@ -376,15 +376,34 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie /** * @param {!SDK.FilmStripModel.Frame} frame - * @return {!Promise} + * @return {!Promise} */ _imageByFrame(frame) { var imagePromise = this._frameToImagePromise.get(frame); if (!imagePromise) { - imagePromise = frame.imageDataPromise().then(data => UI.loadImage(data ? 'data:image/jpg;base64,' + data : '')); + imagePromise = frame.imageDataPromise().then(createImage); this._frameToImagePromise.set(frame, imagePromise); } return imagePromise; + + /** + * @param {?string} data + * @return {!Promise} + */ + function createImage(data) { + var fulfill; + var promise = new Promise(f => fulfill = f); + + var image = /** @type {!HTMLImageElement} */ (createElement('img')); + if (data) { + image.src = 'data:image/jpg;base64,' + data; + image.addEventListener('load', () => fulfill(image)); + image.addEventListener('error', () => fulfill(image)); + } else { + fulfill(image); + } + return promise; + } } /** @@ -419,12 +438,12 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie /** * @param {number} x - * @param {?HTMLImageElement} image + * @param {!HTMLImageElement} image * @this {Timeline.TimelineFilmStripOverview} */ function drawFrameImage(x, image) { // Ignore draws deferred from a previous update call. - if (this._drawGeneration !== drawGeneration || !image) + if (this._drawGeneration !== drawGeneration) return; context.drawImage(image, x, 1, imageWidth, imageHeight); } @@ -448,13 +467,12 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie /** * @this {Timeline.TimelineFilmStripOverview} - * @param {?HTMLImageElement} image + * @param {!HTMLImageElement} image * @return {?Element} */ function createFrameElement(image) { var element = createElementWithClass('div', 'frame'); - if (image) - element.createChild('div', 'thumbnail').appendChild(image); + element.createChild('div', 'thumbnail').appendChild(image); this._lastFrame = frame; this._lastElement = element; return element; diff --git a/front_end/timeline/TimelineFlameChartDataProvider.js b/front_end/timeline/TimelineFlameChartDataProvider.js index 96a0b5c9d0..c29d535838 100644 --- a/front_end/timeline/TimelineFlameChartDataProvider.js +++ b/front_end/timeline/TimelineFlameChartDataProvider.js @@ -47,7 +47,6 @@ Timeline.TimelineFlameChartDataProvider = class { 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); @@ -71,10 +70,8 @@ Timeline.TimelineFlameChartDataProvider = class { (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({}, defaultGroupStyle, {useFirstLineForOverview: true})); + (Object.assign({useFirstLineForOverview: true}, defaultGroupStyle)); this._interactionsHeaderLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} */ (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1})); @@ -161,8 +158,6 @@ Timeline.TimelineFlameChartDataProvider = class { this._asyncColorByInteractionPhase = new Map(); /** @type {!Array} */ this._extensionInfo = []; - /** @type {!Map>} */ - this._frameImageCache = new Map(); } /** @@ -191,6 +186,7 @@ Timeline.TimelineFlameChartDataProvider = class { 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); @@ -443,18 +439,14 @@ Timeline.TimelineFlameChartDataProvider = class { * @param {!Array.} 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 frame of frames) { + for (var i = 0; i < frames.length; ++i) { this._markers.push(new Timeline.TimelineFlameChartMarker( - frame.startTime, frame.startTime - this._model.minimumRecordTime(), style)); - this._appendFrame(frame); + frames[i].startTime, frames[i].startTime - this._model.minimumRecordTime(), style)); + this._appendFrame(frames[i]); } - this._currentLevel += hasFilmStrtip ? this._expandedFrameBarHeight : 1; + ++this._currentLevel; } /** @@ -557,66 +549,6 @@ Timeline.TimelineFlameChartDataProvider = class { 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; - // ---------------- ASYNC ---------------- - 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 @@ -634,7 +566,21 @@ Timeline.TimelineFlameChartDataProvider = class { var data = this._entryData[entryIndex]; var type = this._entryType(entryIndex); if (type === Timeline.TimelineFlameChartEntryType.Frame) { - this._drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight); + 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); + } return true; } diff --git a/front_end/timeline/TimelineUIUtils.js b/front_end/timeline/TimelineUIUtils.js index 3a8ec1a4f2..fdec03b387 100644 --- a/front_end/timeline/TimelineUIUtils.js +++ b/front_end/timeline/TimelineUIUtils.js @@ -1819,21 +1819,6 @@ Timeline.TimelineUIUtils = class { trimAt = 30; return url.startsWith('about:') ? `"${frame.name.trimMiddle(trimAt)}"` : frame.url.trimEnd(trimAt); } - - /** - * @param {!SDK.FilmStripModel} filmStripModel - * @param {!TimelineModel.TimelineFrame} frame - * @return {?SDK.FilmStripModel.Frame} - */ - static filmStripModelFrame(filmStripModel, frame) { - var screenshotTime = frame.idle ? - frame.startTime : - frame.endTime; // For idle frames, look at the state at the beginning of the frame. - var filmStripFrame = filmStripModel.frameByTimestamp(screenshotTime); - if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10) - filmStripFrame = null; - return filmStripFrame; - } }; /**