From 9a4efbbdcc02272b4c46e00c94106c4c31a1e118 Mon Sep 17 00:00:00 2001 From: Michael Ratcliffe Date: Fri, 26 Oct 2018 12:00:16 +0000 Subject: [PATCH] Bug 1497182 - Flexbox justify-content incorrectly drawn when using flex-direction: row-reverse r=gl Differential Revision: https://phabricator.services.mozilla.com/D7999 --HG-- extra : moz-landing-system : lando --- .../server/actors/highlighters/flexbox.js | 125 +++++++++++------- 1 file changed, 78 insertions(+), 47 deletions(-) diff --git a/devtools/server/actors/highlighters/flexbox.js b/devtools/server/actors/highlighters/flexbox.js index 099d0ea59309..2bcd19cc7350 100644 --- a/devtools/server/actors/highlighters/flexbox.js +++ b/devtools/server/actors/highlighters/flexbox.js @@ -165,6 +165,8 @@ class FlexboxHighlighter extends AutoRefreshHighlighter { this.clearCache(); this.flexData = null; + this.crossAxisDirection = null; + this.mainAxisDirection = null; AutoRefreshHighlighter.prototype.destroy.call(this); } @@ -301,8 +303,12 @@ class FlexboxHighlighter extends AutoRefreshHighlighter { this.computedStyle = getComputedStyle(this.currentNode); } + const flex = this.currentNode.getAsFlexContainer(); + this.crossAxisDirection = flex.crossAxisDirection; + this.mainAxisDirection = flex.mainAxisDirection; + const oldFlexData = this.flexData; - this.flexData = getFlexData(this.currentNode.getAsFlexContainer(), this.win); + this.flexData = getFlexData(flex, this.win); const hasFlexDataChanged = compareFlexData(oldFlexData, this.flexData); const oldAlignItems = this.alignItemsValue; @@ -588,50 +594,74 @@ class FlexboxHighlighter extends AutoRefreshHighlighter { this.ctx.strokeStyle = this.color; const { bounds } = this.currentQuads.content[0]; - const isColumn = this.flexDirection.startsWith("column"); const options = { matrix: this.currentMatrix }; for (const flexLine of this.flexData.lines) { const { crossStart, crossSize } = flexLine; - if (isColumn) { - clearRect(this.ctx, crossStart, 0, crossStart + crossSize, bounds.height, - this.currentMatrix); + switch (this.mainAxisDirection) { + case "horizontal-lr": + case "horizontal-rl": + clearRect(this.ctx, 0, crossStart, bounds.width, crossStart + crossSize, + this.currentMatrix); - // Avoid drawing the start flex line when they overlap with the flex container. - if (crossStart != 0) { - drawLine(this.ctx, crossStart, 0, crossStart, bounds.height, options); - this.ctx.stroke(); - } + // Avoid drawing the start flex line when they overlap with the flex container. + if (crossStart != 0) { + drawLine(this.ctx, 0, crossStart, bounds.width, crossStart, options); + this.ctx.stroke(); + } - // Avoid drawing the end flex line when they overlap with the flex container. - if (bounds.width - crossStart - crossSize >= lineWidth) { - drawLine(this.ctx, crossStart + crossSize, 0, crossStart + crossSize, - bounds.height, options); - this.ctx.stroke(); - } - } else { - clearRect(this.ctx, 0, crossStart, bounds.width, crossStart + crossSize, - this.currentMatrix); + // Avoid drawing the end flex line when they overlap with the flex container. + if (bounds.height - crossStart - crossSize >= lineWidth) { + drawLine(this.ctx, 0, crossStart + crossSize, bounds.width, + crossStart + crossSize, options); + this.ctx.stroke(); + } + break; + case "vertical-tb": + clearRect(this.ctx, crossStart, 0, crossStart + crossSize, bounds.height, + this.currentMatrix); - // Avoid drawing the start flex line when they overlap with the flex container. - if (crossStart != 0) { - drawLine(this.ctx, 0, crossStart, bounds.width, crossStart, options); - this.ctx.stroke(); - } + // Avoid drawing the start flex line when they overlap with the flex container. + if (crossStart != 0) { + drawLine(this.ctx, crossStart, 0, crossStart, bounds.height, options); + this.ctx.stroke(); + } - // Avoid drawing the end flex line when they overlap with the flex container. - if (bounds.height - crossStart - crossSize >= lineWidth) { - drawLine(this.ctx, 0, crossStart + crossSize, bounds.width, - crossStart + crossSize, options); - this.ctx.stroke(); - } + // Avoid drawing the end flex line when they overlap with the flex container. + if (bounds.width - crossStart - crossSize >= lineWidth) { + drawLine(this.ctx, crossStart + crossSize, 0, crossStart + crossSize, + bounds.height, options); + this.ctx.stroke(); + } + break; + case "vertical-bt": + clearRect(this.ctx, bounds.width - crossStart, 0, + bounds.width - crossStart - crossSize, bounds.height, this.currentMatrix); + + // Avoid drawing the start flex line when they overlap with the flex container. + if (crossStart != 0) { + drawLine(this.ctx, bounds.width - crossStart, 0, bounds.width - crossStart, + bounds.height, options); + this.ctx.stroke(); + } + + // Avoid drawing the end flex line when they overlap with the flex container. + if (bounds.width - crossStart - crossSize >= lineWidth) { + drawLine(this.ctx, bounds.width - crossStart - crossSize, 0, + bounds.width - crossStart - crossSize, bounds.height, options); + this.ctx.stroke(); + } + break; } } this.ctx.restore(); } + /** + * Clear the whole alignment container along the main axis for each flex item. + */ renderJustifyContent() { if (!this.flexData || !this.currentQuads.content || !this.currentQuads.content[0]) { return; @@ -639,11 +669,12 @@ class FlexboxHighlighter extends AutoRefreshHighlighter { const zoom = getCurrentZoom(this.win); const { bounds } = this.currentQuads.content[0]; - const isColumn = this.flexDirection.startsWith("column"); + + // Draw a justify content pattern over the whole flex container. + this.drawJustifyContent(0, 0, bounds.width, bounds.height, this.currentMatrix); for (const flexLine of this.flexData.lines) { const { crossStart, crossSize } = flexLine; - let mainStart = 0; for (const flexItem of flexLine.items) { const quads = flexItem.quads; @@ -658,23 +689,23 @@ class FlexboxHighlighter extends AutoRefreshHighlighter { const right = Math.round(flexItemBounds.right / zoom - bounds.left); const bottom = Math.round(flexItemBounds.bottom / zoom - bounds.top); - if (isColumn) { - this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize, top); - mainStart = bottom; - } else { - this.drawJustifyContent(mainStart, crossStart, left, crossStart + crossSize); - mainStart = right; + // Clear a rectangular are covering the alignment container. + switch (this.mainAxisDirection) { + case "horizontal-lr": + case "horizontal-rl": + clearRect(this.ctx, left, Math.round(crossStart) + 2, right, + Math.round(crossStart + crossSize) - 2, this.currentMatrix); + break; + case "vertical-tb": + clearRect(this.ctx, Math.round(crossStart) + 1, top, + Math.round(crossStart + crossSize), bottom, this.currentMatrix); + break; + case "vertical-bt": + clearRect(this.ctx, Math.round(bounds.width - crossStart - crossSize) + 1, + top, Math.round(bounds.width - crossStart), bottom, this.currentMatrix); + break; } } - - // 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); - } } }