--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -262,17 +262,17 @@ class FlexboxHighlighter extends AutoRef
_hasMoved() {
const hasMoved = AutoRefreshHighlighter.prototype._hasMoved.call(this);
if (!this.computedStyle) {
this.computedStyle = getComputedStyle(this.currentNode);
}
const oldFlexData = this.flexData;
- this.flexData = this.currentNode.getAsFlexContainer();
+ this.flexData = getFlexData(this.currentNode.getAsFlexContainer(), this.win);
const hasFlexDataChanged = compareFlexData(oldFlexData, this.flexData);
const oldAlignItems = this.alignItemsValue;
this.alignItemsValue = this.computedStyle.alignItems;
const newAlignItems = this.alignItemsValue;
const oldFlexBasis = this.flexBasis;
this.flexBasis = this.computedStyle.flexBasis;
@@ -375,21 +375,20 @@ class FlexboxHighlighter extends AutoRef
this.ctx.save();
this.ctx.translate(offset - canvasX, offset - canvasY);
this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.alignItems.lineDash);
this.ctx.lineWidth = lineWidth * 3;
this.ctx.strokeStyle = DEFAULT_COLOR;
const { bounds } = this.currentQuads.content[0];
- const flexLines = this.flexData.getLines();
const isColumn = this.flexDirection.startsWith("column");
const options = { matrix: this.currentMatrix };
- for (const flexLine of flexLines) {
+ for (const flexLine of this.flexData.lines) {
const { crossStart, crossSize } = flexLine;
switch (this.alignItemsValue) {
case "baseline":
case "first baseline":
const { firstBaselineOffset } = flexLine;
if (firstBaselineOffset < 0) {
@@ -555,41 +554,36 @@ class FlexboxHighlighter extends AutoRef
this.ctx.save();
this.ctx.translate(offset - canvasX, offset - canvasY);
this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.item.lineDash);
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = DEFAULT_COLOR;
const { bounds } = this.currentQuads.content[0];
- const flexLines = this.flexData.getLines();
- for (const flexLine of flexLines) {
- const flexItems = flexLine.getItems();
-
- for (const flexItem of flexItems) {
- const { node } = flexItem;
- const quads = getAdjustedQuads(this.win, node, "border");
-
+ for (const flexLine of this.flexData.lines) {
+ for (const flexItem of flexLine.items) {
+ const quads = flexItem.quads;
if (!quads.length) {
continue;
}
// Adjust the flex item bounds relative to the current quads.
const { bounds: flexItemBounds } = quads[0];
const left = Math.round(flexItemBounds.left - bounds.left);
const top = Math.round(flexItemBounds.top - bounds.top);
const right = Math.round(flexItemBounds.right - bounds.left);
const bottom = Math.round(flexItemBounds.bottom - bounds.top);
clearRect(this.ctx, left, top, right, bottom, this.currentMatrix);
drawRect(this.ctx, left, top, right, bottom, this.currentMatrix);
this.ctx.stroke();
- this.renderFlexItemBasis(node, left, top, right, bottom, bounds.width);
+ this.renderFlexItemBasis(flexItem.node, left, top, right, bottom, bounds.width);
}
}
this.ctx.restore();
}
renderFlexLines() {
if (!this.flexData || !this.currentQuads.content || !this.currentQuads.content[0]) {
@@ -603,21 +597,20 @@ class FlexboxHighlighter extends AutoRef
const canvasY = Math.round(this._canvasPosition.y * devicePixelRatio);
this.ctx.save();
this.ctx.translate(offset - canvasX, offset - canvasY);
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = DEFAULT_COLOR;
const { bounds } = this.currentQuads.content[0];
- const flexLines = this.flexData.getLines();
const isColumn = this.flexDirection.startsWith("column");
const options = { matrix: this.currentMatrix };
- for (const flexLine of flexLines) {
+ for (const flexLine of this.flexData.lines) {
const { crossStart, crossSize } = flexLine;
if (isColumn) {
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) {
@@ -654,28 +647,24 @@ class FlexboxHighlighter extends AutoRef
}
renderJustifyContent() {
if (!this.flexData || !this.currentQuads.content || !this.currentQuads.content[0]) {
return;
}
const { bounds } = this.currentQuads.content[0];
- const flexLines = this.flexData.getLines();
const isColumn = this.flexDirection.startsWith("column");
- for (const flexLine of flexLines) {
+ for (const flexLine of this.flexData.lines) {
const { crossStart, crossSize } = flexLine;
- const flexItems = flexLine.getItems();
let mainStart = 0;
- for (const flexItem of flexItems) {
- const { node } = flexItem;
- const quads = getAdjustedQuads(this.win, node, "margin");
-
+ for (const flexItem of flexLine.items) {
+ const quads = flexItem.quads;
if (!quads.length) {
continue;
}
// Adjust the flex item bounds relative to the current quads.
const { bounds: flexItemBounds } = quads[0];
const left = Math.round(flexItemBounds.left - bounds.left);
const top = Math.round(flexItemBounds.top - bounds.top);
@@ -737,31 +726,67 @@ class FlexboxHighlighter extends AutoRef
`position: absolute; width: ${width}px; height: ${height}px; overflow: hidden`);
setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement);
return true;
}
}
/**
+ * Returns an object representation of the Flex data object and its array of FlexLine
+ * and FlexItem objects along with the box quads of the flex items.
+ *
+ * @param {Flex} flex
+ * The Flex data object.
+ * @param {Window} win
+ * The Window object.
+ * @return {Object} representation of the Flex data object.
+ */
+function getFlexData(flex, win) {
+ return {
+ lines: flex.getLines().map(line => {
+ return {
+ crossSize: line.crossSize,
+ crossStart: line.crossStart,
+ firstBaselineOffset: line.firstBaselineOffset,
+ growthState: line.growthState,
+ lastBaselineOffset: line.lastBaselineOffset,
+ items: line.getItems().map(item => {
+ return {
+ crossMaxSize: item.crossMaxSize,
+ crossMinSize: item.crossMinSize,
+ mainBaseSize: item.mainBaseSize,
+ mainDeltaSize: item.mainDeltaSize,
+ mainMaxSize: item.mainMaxSize,
+ mainMinSize: item.mainMinSize,
+ node: item.node,
+ quads: getAdjustedQuads(win, item.node, "border"),
+ };
+ }),
+ };
+ })
+ };
+}
+
+/**
* Returns whether or not the flex data has changed.
*
* @param {Flex} oldFlexData
* The old Flex data object.
* @param {Flex} newFlexData
* The new Flex data object.
* @return {Boolean} true if the flex data has changed and false otherwise.
*/
function compareFlexData(oldFlexData, newFlexData) {
if (!oldFlexData || !newFlexData) {
return true;
}
- const oldLines = oldFlexData.getLines();
- const newLines = newFlexData.getLines();
+ const oldLines = oldFlexData.lines;
+ const newLines = newFlexData.lines;
if (oldLines.length !== newLines.length) {
return true;
}
for (let i = 0; i < oldLines.length; i++) {
const oldLine = oldLines[i];
const newLine = newLines[i];
@@ -769,18 +794,18 @@ function compareFlexData(oldFlexData, ne
if (oldLine.crossSize !== newLine.crossSize ||
oldLine.crossStart !== newLine.crossStart ||
oldLine.firstBaselineOffset !== newLine.firstBaselineOffset ||
oldLine.growthState !== newLine.growthState ||
oldLine.lastBaselineOffset !== newLine.lastBaselineOffset) {
return true;
}
- const oldItems = oldLine.getItems();
- const newItems = newLine.getItems();
+ const oldItems = oldLine.items;
+ const newItems = newLine.items;
if (oldItems.length !== newItems.length) {
return true;
}
for (let j = 0; j < oldItems.length; j++) {
const oldItem = oldItems[j];
const newItem = newItems[j];
@@ -788,15 +813,36 @@ function compareFlexData(oldFlexData, ne
if (oldItem.crossMaxSize !== newItem.crossMaxSize ||
oldItem.crossMinSize !== newItem.crossMinSize ||
oldItem.mainBaseSize !== newItem.mainBaseSize ||
oldItem.mainDeltaSize !== newItem.mainDeltaSize ||
oldItem.mainMaxSize !== newItem.mainMaxSize ||
oldItem.mainMinSize !== newItem.mainMinSize) {
return true;
}
+
+ const oldItemQuads = oldItem.quads;
+ const newItemQuads = newItem.quads;
+
+ if (oldItemQuads.length !== newItemQuads.length) {
+ return true;
+ }
+
+ const { bounds: oldItemBounds } = oldItemQuads[0];
+ const { bounds: newItemBounds } = newItemQuads[0];
+
+ if (oldItemBounds.bottom !== newItemBounds.bottom ||
+ oldItemBounds.height !== newItemBounds.height ||
+ oldItemBounds.left !== newItemBounds.left ||
+ oldItemBounds.right !== newItemBounds.right ||
+ oldItemBounds.top !== newItemBounds.top ||
+ oldItemBounds.width !== newItemBounds.width ||
+ oldItemBounds.x !== newItemBounds.x ||
+ oldItemBounds.y !== newItemBounds.y) {
+ return true;
+ }
}
}
return false;
}
exports.FlexboxHighlighter = FlexboxHighlighter;