MediaControls: Scrubber and Time displays have the incorrect blending

https://bugs.webkit.org/show_bug.cgi?id=143011
<rdar://problem/20245251>

Reviewed by Eric Carlson.

The scrubber in media controls should use plus-darker blending. Then
the scrubber itself should use a slightly transparent black (55% opacity)
when drawing.

* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-timeline): Add the blend mode.
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS.prototype.drawTimelineBackground): Start drawing with
transparency. I changed the order of rendering to make it
more clear we draw the three parts in left to right order.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@181899 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index eb0b74d..2012e0d 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,22 @@
+2015-03-24  Dean Jackson  <dino@apple.com>
+
+        MediaControls: Scrubber and Time displays have the incorrect blending
+        https://bugs.webkit.org/show_bug.cgi?id=143011
+        <rdar://problem/20245251>
+
+        Reviewed by Eric Carlson.
+
+        The scrubber in media controls should use plus-darker blending. Then
+        the scrubber itself should use a slightly transparent black (55% opacity)
+        when drawing.
+
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (audio::-webkit-media-controls-timeline): Add the blend mode.
+        * Modules/mediacontrols/mediaControlsiOS.js:
+        (ControllerIOS.prototype.drawTimelineBackground): Start drawing with
+        transparency. I changed the order of rendering to make it
+        more clear we draw the three parts in left to right order.
+
 2015-03-24  David Hyatt  <hyatt@apple.com>
 
         Improve the offsetWidth/Height layout optimization

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css b/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
index 50e572a..f46a85e 100644 (file)
--- a/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
+++ b/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
@@ -361,6 +361,7 @@ audio::-webkit-media-controls-timeline {
     border-radius: 0 !important;
     box-sizing: content-box !important;
     -webkit-transform: translate3d(0, 0, 0);
+    mix-blend-mode: plus-darker;
 }
 
 audio::-webkit-media-controls-timeline::-webkit-slider-runnable-track,

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js b/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js
index 30e0b28..e9c8d7d 100644 (file)
--- a/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js
+++ b/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js
@@ -247,31 +247,31 @@ ControllerIOS.prototype = {
 
         var midY = height / 2;
 
-        // 1. Draw the outline with a clip path that subtracts the
-        // middle of a lozenge. This produces a better result than
-        // stroking when we come to filling the parts below.
+        // 1. Draw the buffered part and played parts, using
+        // solid rectangles that are clipped to the outside of
+        // the lozenge.
         ctx.save();
         ctx.beginPath();
         this.addRoundedRect(ctx, 1, midY - 3, width - 2, 6, 3);
-        this.addRoundedRect(ctx, 2, midY - 2, width - 4, 4, 2);
         ctx.closePath();
-        ctx.clip("evenodd");
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, width, height);
+        ctx.clip();
+        ctx.fillStyle = "white";
+        ctx.fillRect(0, 0, Math.round(width * played) + 2, height);
+        ctx.fillStyle = "rgba(0, 0, 0, 0.55)";
+        ctx.fillRect(Math.round(width * played) + 2, 0, Math.round(width * (buffered - played)) + 2, height);
         ctx.restore();
 
-        // 2. Draw the buffered part and played parts, using
-        // solid rectangles that are clipped to the outside of
-        // the lozenge.
+        // 2. Draw the outline with a clip path that subtracts the
+        // middle of a lozenge. This produces a better result than
+        // stroking.
         ctx.save();
         ctx.beginPath();
         this.addRoundedRect(ctx, 1, midY - 3, width - 2, 6, 3);
+        this.addRoundedRect(ctx, 2, midY - 2, width - 4, 4, 2);
         ctx.closePath();
-        ctx.clip();
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, Math.round(width * buffered) + 2, height);
-        ctx.fillStyle = "white";
-        ctx.fillRect(0, 0, Math.round(width * played) + 2, height);
+        ctx.clip("evenodd");
+        ctx.fillStyle = "rgba(0, 0, 0, 0.55)";
+        ctx.fillRect(Math.round(width * buffered) + 2, 0, width, height);
         ctx.restore();
     },