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

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);
-      }
     }
   }