[webkit-changes] [181899] trunk/Source/WebCore

Tue, 24 Mar 2015 12:54:00 -0700

Title: [181899] trunk/Source/WebCore
Revision
181899
Author
[email protected]
Date
2015-03-24 12:53:17 -0700 (Tue, 24 Mar 2015)

Log 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.

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (181898 => 181899)


--- trunk/Source/WebCore/ChangeLog	2015-03-24 19:13:06 UTC (rev 181898)
+++ trunk/Source/WebCore/ChangeLog	2015-03-24 19:53:17 UTC (rev 181899)
@@ -1,3 +1,22 @@
+2015-03-24  Dean Jackson  <[email protected]>
+
+        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  <[email protected]>
 
         Improve the offsetWidth/Height layout optimization

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (181898 => 181899)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css	2015-03-24 19:13:06 UTC (rev 181898)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css	2015-03-24 19:53:17 UTC (rev 181899)
@@ -361,6 +361,7 @@
     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,

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (181898 => 181899)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js	2015-03-24 19:13:06 UTC (rev 181898)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js	2015-03-24 19:53:17 UTC (rev 181899)
@@ -247,31 +247,31 @@
 
         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();
     },
 

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to