Skip to content

Commit

Permalink
Revert of DevTools: Show screenshots on the main flamechart (patchset #3
Browse files Browse the repository at this point in the history 
 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}
  • Loading branch information
@a1ph
a1ph authored and Commit bot committed Apr 28, 2017
1 parent a75caae commit ef9fa0f
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 99 deletions.
7 changes: 6 additions & 1 deletion front_end/timeline/TimelineDetailsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
34 changes: 26 additions & 8 deletions front_end/timeline/TimelineEventOverview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -376,15 +376,34 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie

/**
* @param {!SDK.FilmStripModel.Frame} frame
* @return {!Promise<?HTMLImageElement>}
* @return {!Promise<!HTMLImageElement>}
*/
_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<!HTMLImageElement>}
*/
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;
}
}

/**
Expand Down Expand Up @@ -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);
}
Expand All @@ -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;
Expand Down
96 changes: 21 additions & 75 deletions front_end/timeline/TimelineFlameChartDataProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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}));

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

/**
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -443,18 +439,14 @@ Timeline.TimelineFlameChartDataProvider = class {
* @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 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;
}

/**
Expand Down Expand Up @@ -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
Expand All @@ -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;
}

Expand Down
15 changes: 0 additions & 15 deletions front_end/timeline/TimelineUIUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
};

/**
Expand Down

0 comments on commit ef9fa0f

Please sign in to comment.