Changeset 181899 in webkit

Timestamp:

Mar 24, 2015, 12:53:17 PM (11 years ago)

Author:

dino@apple.com

Message:

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.

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• Modules/mediacontrols/mediaControlsiOS.css (modified) (1 diff)
• Modules/mediacontrols/mediaControlsiOS.js (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css

@@ -362 +362 @@
     box-sizing: content-box !important;
     -webkit-transform: translate3d(0, 0, 0);
+    mix-blend-mode: plus-darker;
 }
 

trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

@@ -248 +248 @@
         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.
-        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.restore();
-
-        // 2. Draw the buffered part and played parts, using
+        // 1. Draw the buffered part and played parts, using
         // solid rectangles that are clipped to the outside of
         // the lozenge.
@@ -269 +256 @@
         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.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 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("evenodd");
+        ctx.fillStyle = "rgba(0, 0, 0, 0.55)";
+        ctx.fillRect(Math.round(width * buffered) + 2, 0, width, height);
         ctx.restore();
     },