Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-20 00:35:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1444032 - Avoid clearing canvas when drawing justify-content areas; r=gl

Browse Source 
So far, we are drawing the entire line area, and then cutting out the various
margin boxes from each item, in order to show where justify-content applies.
This is dangerous because that means clearing pixels in a canvas where we're
drawing tons of other stuff, and it's easy to accidentally clear unwanted
things.
Instead, now we just draw the justify-content where needed only.

MozReview-Commit-ID: LJN6Fl1by4l
This commit is contained in:
Patrick Brosset 2018-03-08 14:04:58 +01:00
parent e15b1f553e
commit d5b6e21206
1 changed files with 14 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
devtools/server/actors/highlighters/flexbox.js
View File

@ -515,27 +515,13 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
let computedStyle = getComputedStyle(this.currentNode);
let isColumn = computedStyle.getPropertyValue("flex-direction").startsWith("column");
// Render the justify-content area by first highlighting all the content, and
// clearing the occupied and margin areas of the flex item.
// First, highlight all the content.
for (let flexLine of flexLines) {
let { crossStart, crossSize } = flexLine;
if (isColumn) {
this.drawJustifyContent(crossStart, 0, crossStart + crossSize, bounds.height);
} else {
this.drawJustifyContent(0, crossStart, bounds.width, crossStart + crossSize);
}
}
// Then, cut all the items out of this content area.
for (let flexLine of flexLines) {
let flexItems = flexLine.getItems();
let mainStart = 0;
for (let flexItem of flexItems) {
let { node } = flexItem;
let quads = getAdjustedQuads(this.win, node, "margin");
if (!quads.length) {
@ -549,22 +535,24 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
let right = Math.round(flexItemBounds.right - bounds.left);
let bottom = Math.round(flexItemBounds.bottom - bounds.top);
// Clear the occupied and margin areas of the flex item.
let { crossStart, crossSize } = flexLine;
crossSize = Math.round(crossSize);
crossStart = Math.round(crossStart);
if (isColumn) {
clearRect(this.ctx, crossStart, top, crossSize + crossStart, bottom,
this.currentMatrix);
this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize, top);
mainStart = bottom;
} else {
clearRect(this.ctx, left, crossStart, right, crossSize + crossStart,
this.currentMatrix);
this.drawJustifyContent(mainStart, crossStart, left, crossStart + crossSize);
mainStart = right;
}
}
}
this.ctx.restore();
// Draw the last justify-content area after the last flex item.
if (isColumn) {
this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize,
bounds.height);
} else {
this.drawJustifyContent(mainStart, crossStart, bounds.width,
crossStart + crossSize);
}
}
}
_update() {