From 2d5d458e533de1cc8183268e26a856f5ece25596 Mon Sep 17 00:00:00 2001 From: "dino@apple.com" Date: Tue, 24 Mar 2015 19:53:17 +0000 Subject: [PATCH] MediaControls: Scrubber and Time displays have the incorrect blending https://bugs.webkit.org/show_bug.cgi?id=143011 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 --- Source/WebCore/ChangeLog | 19 ++++++++++++++ .../Modules/mediacontrols/mediaControlsiOS.css | 1 + .../Modules/mediacontrols/mediaControlsiOS.js | 30 +++++++++++----------- 3 files changed, 35 insertions(+), 15 deletions(-) diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog index eb0b74d..2012e0d 100644 --- a/Source/WebCore/ChangeLog +++ b/Source/WebCore/ChangeLog @@ -1,3 +1,22 @@ +2015-03-24 Dean Jackson + + MediaControls: Scrubber and Time displays have the incorrect blending + https://bugs.webkit.org/show_bug.cgi?id=143011 + + + 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 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 --- 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 --- 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(); }, -- 1.8.3.1