From 5288096dedf34b58becdbc44bdf368c12f0c66dc Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Mon, 26 Oct 2020 23:17:50 +0000
Subject: [PATCH] Bug 1673287 - Draw range progress and track pieces with the
 same rounded rect but different rectangular clips. r=spohl

This feels a bit nicer but the difference isn't visible to the user.
But it demonstrates how we can fix progress bars.

Differential Revision: https://phabricator.services.mozilla.com/D94699
---
 widget/nsNativeBasicTheme.cpp | 53 +++++++++++++++++------------------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/widget/nsNativeBasicTheme.cpp b/widget/nsNativeBasicTheme.cpp
index fbb84502e490..c6c9412b2e1b 100644
--- a/widget/nsNativeBasicTheme.cpp
+++ b/widget/nsNativeBasicTheme.cpp
@@ -664,44 +664,41 @@ void nsNativeBasicTheme::PaintRangeTrackBackground(
   }
 
   double progress = rangeFrame->GetValueAsFractionOfRange();
-  Rect progressRect(rect);
-  Rect trackRect(rect);
+  Rect progressClipRect(aRect);
+  Rect trackClipRect(aRect);
   if (aHorizontal) {
-    progressRect.width = rect.width * progress;
+    progressClipRect.width = aRect.width * progress;
     if (IsFrameRTL(aFrame)) {
-      progressRect.x += rect.width - progressRect.width;
+      progressClipRect.x += aRect.width - progressClipRect.width;
     } else {
-      trackRect.x += progressRect.width;
+      trackClipRect.x += progressClipRect.width;
     }
-    trackRect.width -= progressRect.width;
+    trackClipRect.width -= progressClipRect.width;
   } else {
-    progressRect.height = rect.height * progress;
-    progressRect.y += rect.height - progressRect.height;
-    trackRect.height -= progressRect.height;
+    progressClipRect.height = aRect.height * progress;
+    progressClipRect.y += aRect.height - progressClipRect.height;
+    trackClipRect.height -= progressClipRect.height;
   }
 
   const CSSCoord borderWidth = 1.0f;
   const CSSCoord radius = 2.0f;
 
-  // Avoid artifacts between thumb and track when progress is approaching
-  // 0.0f or 1.0f.
-  if ((aHorizontal && ((progressRect.width > (radius * 2.0f)))) ||
-      (!aHorizontal && ((progressRect.height > radius * 2.0f)))) {
-    sRGBColor progressColor, progressBorderColor;
-    std::tie(progressColor, progressBorderColor) =
-        ComputeRangeProgressColors(aState);
-    PaintRoundedRectWithRadius(aDrawTarget, progressRect, progressColor,
-                               progressBorderColor, borderWidth, radius,
-                               aDpiRatio);
-  }
-  if ((aHorizontal && ((trackRect.width > (radius * 2.0f)))) ||
-      (!aHorizontal && (trackRect.height > (radius * 2.0f)))) {
-    sRGBColor trackColor, trackBorderColor;
-    std::tie(trackColor, trackBorderColor) = ComputeRangeTrackColors(aState);
-    PaintRoundedRectWithRadius(aDrawTarget, trackRect, trackColor,
-                               trackBorderColor, borderWidth, radius,
-                               aDpiRatio);
-  }
+  sRGBColor progressColor, progressBorderColor;
+  std::tie(progressColor, progressBorderColor) =
+      ComputeRangeProgressColors(aState);
+  sRGBColor trackColor, trackBorderColor;
+  std::tie(trackColor, trackBorderColor) = ComputeRangeTrackColors(aState);
+
+  aDrawTarget->PushClipRect(progressClipRect);
+  PaintRoundedRectWithRadius(aDrawTarget, rect, progressColor,
+                             progressBorderColor, borderWidth, radius,
+                             aDpiRatio);
+  aDrawTarget->PopClip();
+
+  aDrawTarget->PushClipRect(trackClipRect);
+  PaintRoundedRectWithRadius(aDrawTarget, rect, trackColor, trackBorderColor,
+                             borderWidth, radius, aDpiRatio);
+  aDrawTarget->PopClip();
 
   if (aState.HasState(NS_EVENT_STATE_FOCUS)) {
     PaintRoundedFocusRect(aDrawTarget, aRect, aDpiRatio, radius, 3.0f);