Skip to content

Commit ef9fa0f

Browse files
a1phCommit bot
a1ph
authored and
Commit bot
committed
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 [email protected] # 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}
1 parent a75caae commit ef9fa0f

4 files changed

+53
-99
lines changed

‎front_end/timeline/TimelineDetailsView.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,12 @@ Timeline.TimelineDetailsView = class extends UI.VBox {
122122
break;
123123
case Timeline.TimelineSelection.Type.Frame:
124124
var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._selection.object());
125-
var filmStripFrame = Timeline.TimelineUIUtils.filmStripModelFrame(this._model.filmStripModel(), frame);
125+
var screenshotTime = frame.idle ?
126+
frame.startTime :
127+
frame.endTime; // For idle frames, look at the state at the beginning of the frame.
128+
var filmStripFrame = this._model.filmStripModel().frameByTimestamp(screenshotTime);
129+
if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10)
130+
filmStripFrame = null;
126131
this._setContent(Timeline.TimelineUIUtils.generateDetailsContentForFrame(frame, filmStripFrame));
127132
if (frame.layerTree) {
128133
var layersView = this._layersView();

‎front_end/timeline/TimelineEventOverview.js

+26-8
Original file line numberDiff line numberDiff line change
@@ -364,7 +364,7 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
364364
this._imageByFrame(frames[0]).then(image => {
365365
if (this._drawGeneration !== drawGeneration)
366366
return;
367-
if (!image || !image.naturalWidth || !image.naturalHeight)
367+
if (!image.naturalWidth || !image.naturalHeight)
368368
return;
369369
var imageHeight = this.height() - 2 * Timeline.TimelineFilmStripOverview.Padding;
370370
var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.naturalHeight);
@@ -376,15 +376,34 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
376376

377377
/**
378378
* @param {!SDK.FilmStripModel.Frame} frame
379-
* @return {!Promise<?HTMLImageElement>}
379+
* @return {!Promise<!HTMLImageElement>}
380380
*/
381381
_imageByFrame(frame) {
382382
var imagePromise = this._frameToImagePromise.get(frame);
383383
if (!imagePromise) {
384-
imagePromise = frame.imageDataPromise().then(data => UI.loadImage(data ? 'data:image/jpg;base64,' + data : ''));
384+
imagePromise = frame.imageDataPromise().then(createImage);
385385
this._frameToImagePromise.set(frame, imagePromise);
386386
}
387387
return imagePromise;
388+
389+
/**
390+
* @param {?string} data
391+
* @return {!Promise<!HTMLImageElement>}
392+
*/
393+
function createImage(data) {
394+
var fulfill;
395+
var promise = new Promise(f => fulfill = f);
396+
397+
var image = /** @type {!HTMLImageElement} */ (createElement('img'));
398+
if (data) {
399+
image.src = 'data:image/jpg;base64,' + data;
400+
image.addEventListener('load', () => fulfill(image));
401+
image.addEventListener('error', () => fulfill(image));
402+
} else {
403+
fulfill(image);
404+
}
405+
return promise;
406+
}
388407
}
389408

390409
/**
@@ -419,12 +438,12 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
419438

420439
/**
421440
* @param {number} x
422-
* @param {?HTMLImageElement} image
441+
* @param {!HTMLImageElement} image
423442
* @this {Timeline.TimelineFilmStripOverview}
424443
*/
425444
function drawFrameImage(x, image) {
426445
// Ignore draws deferred from a previous update call.
427-
if (this._drawGeneration !== drawGeneration || !image)
446+
if (this._drawGeneration !== drawGeneration)
428447
return;
429448
context.drawImage(image, x, 1, imageWidth, imageHeight);
430449
}
@@ -448,13 +467,12 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
448467

449468
/**
450469
* @this {Timeline.TimelineFilmStripOverview}
451-
* @param {?HTMLImageElement} image
470+
* @param {!HTMLImageElement} image
452471
* @return {?Element}
453472
*/
454473
function createFrameElement(image) {
455474
var element = createElementWithClass('div', 'frame');
456-
if (image)
457-
element.createChild('div', 'thumbnail').appendChild(image);
475+
element.createChild('div', 'thumbnail').appendChild(image);
458476
this._lastFrame = frame;
459477
this._lastElement = element;
460478
return element;

‎front_end/timeline/TimelineFlameChartDataProvider.js

+21-75
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ Timeline.TimelineFlameChartDataProvider = class {
4747
this._performanceModel = null;
4848
/** @type {?TimelineModel.TimelineModel} */
4949
this._model = null;
50-
this._expandedFrameBarHeight = 5; // Number of bars.
5150

5251
this._consoleColorGenerator =
5352
new PerfUI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7);
@@ -71,10 +70,8 @@ Timeline.TimelineFlameChartDataProvider = class {
7170
(Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1, collapsible: false}));
7271
this._staticHeader = /** @type {!PerfUI.FlameChart.GroupStyle} */
7372
(Object.assign({}, defaultGroupStyle, {collapsible: false}));
74-
this._framesHeader = /** @type {!PerfUI.FlameChart.GroupStyle} */
75-
(Object.assign({}, defaultGroupStyle, {useFirstLineForOverview: true, shareHeaderLine: true}));
7673
this._interactionsHeaderLevel1 = /** @type {!PerfUI.FlameChart.GroupStyle} */
77-
(Object.assign({}, defaultGroupStyle, {useFirstLineForOverview: true}));
74+
(Object.assign({useFirstLineForOverview: true}, defaultGroupStyle));
7875
this._interactionsHeaderLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} */
7976
(Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1}));
8077

@@ -161,8 +158,6 @@ Timeline.TimelineFlameChartDataProvider = class {
161158
this._asyncColorByInteractionPhase = new Map();
162159
/** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */
163160
this._extensionInfo = [];
164-
/** @type {!Map<!TimelineModel.TimelineFrame, ?Promise<?Image>>} */
165-
this._frameImageCache = new Map();
166161
}
167162

168163
/**
@@ -191,6 +186,7 @@ Timeline.TimelineFlameChartDataProvider = class {
191186
this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTime() - this._minimumBoundary;
192187
this._currentLevel = 0;
193188

189+
this._appendHeader(Common.UIString('Frames'), this._staticHeader);
194190
this._appendFrameBars(this._performanceModel.frames());
195191

196192
this._appendHeader(Common.UIString('Interactions'), this._interactionsHeaderLevel1);
@@ -443,18 +439,14 @@ Timeline.TimelineFlameChartDataProvider = class {
443439
* @param {!Array.<!TimelineModel.TimelineFrame>} frames
444440
*/
445441
_appendFrameBars(frames) {
446-
var hasFilmStrtip = !!this._performanceModel.filmStripModel().frames().length;
447-
this._framesHeader.collapsible = hasFilmStrtip;
448-
this._appendHeader(Common.UIString('Frames'), this._framesHeader);
449-
this._frameGroup = this._timelineData.groups.peekLast();
450442
var style = Timeline.TimelineUIUtils.markerStyleForFrame();
451443
this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartEntryType.Frame;
452-
for (var frame of frames) {
444+
for (var i = 0; i < frames.length; ++i) {
453445
this._markers.push(new Timeline.TimelineFlameChartMarker(
454-
frame.startTime, frame.startTime - this._model.minimumRecordTime(), style));
455-
this._appendFrame(frame);
446+
frames[i].startTime, frames[i].startTime - this._model.minimumRecordTime(), style));
447+
this._appendFrame(frames[i]);
456448
}
457-
this._currentLevel += hasFilmStrtip ? this._expandedFrameBarHeight : 1;
449+
++this._currentLevel;
458450
}
459451

460452
/**
@@ -557,66 +549,6 @@ Timeline.TimelineFlameChartDataProvider = class {
557549
return '';
558550
}
559551

560-
/**
561-
* @param {number} entryIndex
562-
* @param {!CanvasRenderingContext2D} context
563-
* @param {?string} text
564-
* @param {number} barX
565-
* @param {number} barY
566-
* @param {number} barWidth
567-
* @param {number} barHeight
568-
* @return {!Promise}
569-
*/
570-
async _drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight) {
571-
var /** @const */ hPadding = 1;
572-
var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryIndex]);
573-
barX += hPadding;
574-
barWidth -= 2 * hPadding;
575-
context.fillStyle = frame.idle ? 'white' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1');
576-
context.fillRect(barX, barY, barWidth, barHeight);
577-
578-
var imagePromise;
579-
if (this._frameImageCache.has(frame)) {
580-
imagePromise = this._frameImageCache.get(frame);
581-
} else {
582-
var modelFrame = Timeline.TimelineUIUtils.filmStripModelFrame(this._performanceModel.filmStripModel(), frame);
583-
imagePromise = modelFrame &&
584-
modelFrame.imageDataPromise().then(data => UI.loadImage(data ? 'data:image/jpg;base64,' + data : ''));
585-
this._frameImageCache.set(frame, imagePromise);
586-
}
587-
var image = await imagePromise;
588-
// ---------------- ASYNC ----------------
589-
var maxTextWidth = barWidth;
590-
if (image) {
591-
var imageHeight = barHeight;
592-
var imageY = barY;
593-
if (this._frameGroup.expanded) {
594-
imageHeight *= (this._expandedFrameBarHeight - 1);
595-
imageY += barHeight;
596-
}
597-
var scale = imageHeight / image.naturalHeight;
598-
var imageWidth = image.naturalWidth * scale;
599-
if (!this._frameGroup.expanded)
600-
maxTextWidth = Math.max(0, barWidth - imageWidth);
601-
context.save();
602-
context.beginPath();
603-
context.rect(barX, imageY, barWidth, imageHeight);
604-
context.clip();
605-
context.drawImage(image, barX + barWidth - imageWidth, imageY, imageWidth, imageHeight);
606-
context.restore();
607-
}
608-
609-
var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
610-
var textWidth = context.measureText(frameDurationText).width;
611-
if (textWidth <= maxTextWidth) {
612-
var font = this.entryFont(entryIndex);
613-
if (font)
614-
context.font = font;
615-
context.fillStyle = this.textColor(entryIndex);
616-
context.fillText(frameDurationText, barX + (maxTextWidth - textWidth) / 2, barY + barHeight - 4);
617-
}
618-
}
619-
620552
/**
621553
* @override
622554
* @param {number} entryIndex
@@ -634,7 +566,21 @@ Timeline.TimelineFlameChartDataProvider = class {
634566
var data = this._entryData[entryIndex];
635567
var type = this._entryType(entryIndex);
636568
if (type === Timeline.TimelineFlameChartEntryType.Frame) {
637-
this._drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight);
569+
var /** @const */ vPadding = 1;
570+
var /** @const */ hPadding = 1;
571+
var frame = /** {!TimelineModel.TimelineFrame} */ (data);
572+
barX += hPadding;
573+
barWidth -= 2 * hPadding;
574+
barY += vPadding;
575+
barHeight -= 2 * vPadding + 1;
576+
context.fillStyle = frame.idle ? 'white' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1');
577+
context.fillRect(barX, barY, barWidth, barHeight);
578+
var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
579+
var textWidth = context.measureText(frameDurationText).width;
580+
if (barWidth >= textWidth) {
581+
context.fillStyle = this.textColor(entryIndex);
582+
context.fillText(frameDurationText, barX + (barWidth - textWidth) / 2, barY + barHeight - 3);
583+
}
638584
return true;
639585
}
640586

‎front_end/timeline/TimelineUIUtils.js

-15
Original file line numberDiff line numberDiff line change
@@ -1819,21 +1819,6 @@ Timeline.TimelineUIUtils = class {
18191819
trimAt = 30;
18201820
return url.startsWith('about:') ? `"${frame.name.trimMiddle(trimAt)}"` : frame.url.trimEnd(trimAt);
18211821
}
1822-
1823-
/**
1824-
* @param {!SDK.FilmStripModel} filmStripModel
1825-
* @param {!TimelineModel.TimelineFrame} frame
1826-
* @return {?SDK.FilmStripModel.Frame}
1827-
*/
1828-
static filmStripModelFrame(filmStripModel, frame) {
1829-
var screenshotTime = frame.idle ?
1830-
frame.startTime :
1831-
frame.endTime; // For idle frames, look at the state at the beginning of the frame.
1832-
var filmStripFrame = filmStripModel.frameByTimestamp(screenshotTime);
1833-
if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10)
1834-
filmStripFrame = null;
1835-
return filmStripFrame;
1836-
}
18371822
};
18381823

18391824
/**

0 commit comments

Comments
 (0)