Bug 1509457 - Flex line background pattern shouldn't be draw outside of flex lines r=gl
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Wed, 28 Nov 2018 12:27:20 +0000
changeset 507705 1f338cc3d9bbd955bc5b692cd09d13c4606a5cff
parent 507704 6adfb885abd523d418b0919cabd04b4a22472a25
child 507706 4e55f708271a1394f850d3bbd5a853b283f32184
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1509457
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1509457 - Flex line background pattern shouldn't be draw outside of flex lines r=gl Differential Revision: https://phabricator.services.mozilla.com/D12749
devtools/server/actors/highlighters/flexbox.js
--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -673,53 +673,81 @@ class FlexboxHighlighter extends AutoRef
   /**
    * 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;
     }
 
-    const lineWidth = getDisplayPixelRatio(this.win);
     const containerQuad = getUntransformedQuad(this.currentNode, "content");
     const containerBounds = containerQuad.getBounds();
-
-    // Draw a justify content pattern over the whole flex container content area.
-    this.drawJustifyContent(0, 0, containerBounds.width, containerBounds.height);
+    const { width: containerWidth, height: containerHeight } = containerBounds;
 
     for (const flexLine of this.flexData.lines) {
       const { crossStart, crossSize } = flexLine;
+      let mainStart = 0;
+
+      // In these two situations mainStart goes from right to left so set it's
+      // value as appropriate.
+      if (this.axes === "horizontal-lr vertical-bt" ||
+          this.axes === "horizontal-rl vertical-tb") {
+        mainStart = containerWidth;
+      }
 
       for (const flexItem of flexLine.items) {
         const { left, top, right, bottom } = flexItem.rect;
 
-        // Clear a rectangular are covering the alignment container.
         switch (this.axes) {
           case "horizontal-lr vertical-tb":
+          case "horizontal-rl vertical-bt":
+            this.drawJustifyContent(mainStart, crossStart, left, crossStart + crossSize);
+            mainStart = right;
+            break;
           case "horizontal-lr vertical-bt":
           case "horizontal-rl vertical-tb":
-          case "horizontal-rl vertical-bt":
-            clearRect(this.ctx, left, crossStart + lineWidth, right,
-              crossStart + crossSize - lineWidth, this.currentMatrix);
+            this.drawJustifyContent(right, crossStart, mainStart, crossStart + crossSize);
+            mainStart = left;
             break;
           case "vertical-tb horizontal-lr":
           case "vertical-bt horizontal-rl":
-            clearRect(this.ctx,
-              crossStart + lineWidth * 2, top,
-              crossStart + crossSize - lineWidth, bottom, this.currentMatrix);
+            this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize, top);
+            mainStart = bottom;
             break;
           case "vertical-bt horizontal-lr":
           case "vertical-tb horizontal-rl":
-            clearRect(this.ctx,
-              containerBounds.width - crossStart - crossSize + lineWidth * 2, top,
-              containerBounds.width - crossStart - lineWidth, bottom,
-              this.currentMatrix);
+            this.drawJustifyContent(containerWidth - crossStart - crossSize, mainStart,
+              containerWidth - crossStart, top);
+            mainStart = bottom;
             break;
         }
       }
+
+      // Draw the last justify-content area after the last flex item.
+      switch (this.axes) {
+        case "horizontal-lr vertical-tb":
+        case "horizontal-rl vertical-bt":
+          this.drawJustifyContent(mainStart, crossStart, containerWidth,
+            crossStart + crossSize);
+          break;
+        case "horizontal-lr vertical-bt":
+        case "horizontal-rl vertical-tb":
+          this.drawJustifyContent(0, crossStart, mainStart, crossStart + crossSize);
+          break;
+        case "vertical-tb horizontal-lr":
+        case "vertical-bt horizontal-rl":
+          this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize,
+            containerHeight);
+          break;
+        case "vertical-bt horizontal-lr":
+        case "vertical-tb horizontal-rl":
+          this.drawJustifyContent(containerWidth - crossStart - crossSize, mainStart,
+            containerWidth - crossStart, containerHeight);
+          break;
+      }
     }
   }
 
   _update() {
     setIgnoreLayoutChanges(true);
 
     const root = this.getElement("root");