<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[180898] trunk/Source/WebCore</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/180898">180898</a></dd>
<dt>Author</dt> <dd>roger_fong@apple.com</dd>
<dt>Date</dt> <dd>2015-03-02 14:54:50 -0800 (Mon, 02 Mar 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Update backgrounds of sliders for inline media controls on OS X.
https://bugs.webkit.org/show_bug.cgi?id=142188.
<rdar://problem/20012413>
Reviewed by Dean Jackson.
Don’t use CSS to draw volume and timeline slider backgrounds.
* Modules/mediacontrols/mediaControlsApple.css:
(video::-webkit-media-controls-volume-slider):
(audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
(audio::-webkit-media-controls-timeline):
(audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
(audio::-webkit-media-controls-panel .thumbnail-track):
(audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb): Deleted.
(audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb,): Deleted.
Draw volume and timeline slider backgrounds using 2d canvases.
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.createControls):
(Controller.prototype.handleVolumeSliderInput):
(Controller.prototype.addRoundedRect):
(Controller.prototype.drawTimelineBackground):
(Controller.prototype.drawVolumeBackground):
(Controller.prototype.showControls):
* Modules/mediacontrols/mediaControlsiOS.js:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (180897 => 180898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-03-02 22:52:56 UTC (rev 180897)
+++ trunk/Source/WebCore/ChangeLog 2015-03-02 22:54:50 UTC (rev 180898)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2015-03-02 Roger Fong <roger_fong@apple.com>
+
+ Update backgrounds of sliders for inline media controls on OS X.
+ https://bugs.webkit.org/show_bug.cgi?id=142188.
+ <rdar://problem/20012413>
+
+ Reviewed by Dean Jackson.
+
+ Don’t use CSS to draw volume and timeline slider backgrounds.
+ * Modules/mediacontrols/mediaControlsApple.css:
+ (video::-webkit-media-controls-volume-slider):
+ (audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-timeline):
+ (audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
+ (audio::-webkit-media-controls-panel .thumbnail-track):
+ (audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb): Deleted.
+ (audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb,): Deleted.
+
+ Draw volume and timeline slider backgrounds using 2d canvases.
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.createControls):
+ (Controller.prototype.handleVolumeSliderInput):
+ (Controller.prototype.addRoundedRect):
+ (Controller.prototype.drawTimelineBackground):
+ (Controller.prototype.drawVolumeBackground):
+ (Controller.prototype.showControls):
+ * Modules/mediacontrols/mediaControlsiOS.js:
+ (ControllerIOS.prototype.addRoundedRect): Deleted.
+
</ins><span class="cx"> 2015-03-01 Roger Fong <roger_fong@apple.com>
</span><span class="cx">
</span><span class="cx"> Update inline media element controls appearance Part 1.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (180897 => 180898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-03-02 22:52:56 UTC (rev 180897)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2015-03-02 22:54:50 UTC (rev 180898)
</span><span class="lines">@@ -206,44 +206,17 @@
</span><span class="cx"> margin-right: 10px !important;
</span><span class="cx">
</span><span class="cx"> background-color: transparent !important;
</span><del>- background-image: -webkit-linear-gradient(
- top,
- rgba(15, 15, 15, .85) 0,
- rgba(23, 23, 23, .85) 50%,
- rgba(15, 15, 15, .85) 100%
- ) !important;
- border: 1px solid rgba(0, 0, 0, 0.875) !important;
</del><ins>+ background-size: 100% 100%;
+ background-repeat: no-repeat;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
</span><span class="cx"> -webkit-appearance: none !important;
</span><del>- width: 8px !important;
- height: 8px !important;
- border-radius: 4px !important;
- background-color: transparent !important;
-
- /* rotateZ() forces the layer into compositing mode.
- Slider thumbs are small, so forcing a compositing layer is inexpensive,
- and it keeps the slider from having to repaint while sliding. */
- -webkit-transform: rotateZ(0) !important;
- background-image: -webkit-linear-gradient(
- left,
- rgba(99, 99, 99, 1),
- rgba(144, 144, 144, 1)
- ) !important;
- box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 0 1px rgba(255, 255, 255, .14) !important;
</del><ins>+ width: 7px !important;
+ height: 7px !important;
+ visibility: hidden;
</ins><span class="cx"> }
</span><del>-video::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active,
-video::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb,
-audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active,
-audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb {
- background-image: -webkit-linear-gradient(
- right top,
- rgba(160, 160, 160, 1),
- rgba(221, 221, 221, 1)
- ) !important;
-}
</del><span class="cx">
</span><span class="cx"> video::-webkit-media-controls-mute-button.muted,
</span><span class="cx"> audio::-webkit-media-controls-mute-button.muted,
</span><span class="lines">@@ -395,47 +368,20 @@
</span><span class="cx"> audio::-webkit-media-controls-timeline {
</span><span class="cx"> -webkit-appearance: none !important;
</span><span class="cx"> -webkit-flex: 1 1 0 !important;
</span><del>- height: 9px !important;
</del><ins>+ height: 17px !important;
</ins><span class="cx"> margin: 0 !important;
</span><del>- background-size: 100% 9px !important;
</del><ins>+ background-size: 100% 100% !important;
+ background-repeat: no-repeat;
+ background-color: transparent;
</ins><span class="cx">
</span><del>- border-radius: 4.5px !important;
- background-color: rgb(74, 74, 74) !important;
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08) !important;
</del><span class="cx"> }
</span><span class="cx"> video::-webkit-media-controls-timeline::-webkit-slider-thumb,
</span><span class="cx"> audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
</span><span class="cx"> -webkit-appearance: none !important;
</span><del>- width:6px !important;
- height: 6px !important;
- background-color: white !important;
-
- /* rotateZ() forces the layer into compositing mode.
- Slider thumbs are small, so forcing a compositing layer is inexpensive,
- and it keeps the slider from having to repaint while sliding. */
- -webkit-transform: translateY(1px) rotateZ(-45deg) !important;
-
- background-image: -webkit-gradient(
- linear,
- left bottom,
- right top,
- color-stop(0, rgba(99, 99, 99, 1)),
- color-stop(1, rgba(144, 144, 144, 1))
- ) !important;
</del><ins>+ width:3px !important;
+ height: 15px !important;
</ins><span class="cx"> }
</span><del>-video::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
-video::-webkit-media-controls-timeline:active::-webkit-slider-thumb,
-audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
-audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb,
- {
- background-image: -webkit-gradient(
- linear,
- left bottom,
- right top,
- color-stop(0, rgba(160, 160, 160, 1)),
- color-stop(1, rgba(221, 221, 221, 1))
- ) !important;
-}
</del><ins>+
</ins><span class="cx"> video::-webkit-media-controls-current-time-display,
</span><span class="cx"> video::-webkit-media-controls-time-remaining-display,
</span><span class="cx"> audio::-webkit-media-controls-current-time-display,
</span><span class="lines">@@ -489,7 +435,7 @@
</span><span class="cx"> audio::-webkit-media-controls-panel .thumbnail-track {
</span><span class="cx"> position: relative;
</span><span class="cx"> -webkit-flex: 1 1 0;
</span><del>- height: 9px;
</del><ins>+ height: 17 px;
</ins><span class="cx"> margin: 0 2px;
</span><span class="cx"> display: -webkit-flex;
</span><span class="cx"> -webkit-align-items: stretch;
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (180897 => 180898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-03-02 22:52:56 UTC (rev 180897)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2015-03-02 22:54:50 UTC (rev 180898)
</span><span class="lines">@@ -39,6 +39,7 @@
</span><span class="cx">
</span><span class="cx"> Controller.PlayAfterSeeking = 0;
</span><span class="cx"> Controller.PauseAfterSeeking = 1;
</span><ins>+Controller.gLastTimelineId = 0;
</ins><span class="cx">
</span><span class="cx"> Controller.prototype = {
</span><span class="cx">
</span><span class="lines">@@ -344,6 +345,9 @@
</span><span class="cx"> this.listenFor(timeline, 'mouseup', this.handleTimelineMouseUp);
</span><span class="cx"> timeline.step = .01;
</span><span class="cx">
</span><ins>+ this.timelineContextName = "_webkit-media-controls-timeline-" + Controller.gLastTimelineId;
+ timeline.style.backgroundImage = '-webkit-canvas(' + this.timelineContextName + ')';
+
</ins><span class="cx"> var thumbnailTrack = this.controls.thumbnailTrack = document.createElement('div');
</span><span class="cx"> thumbnailTrack.classList.add(this.ClassNames.thumbnailTrack);
</span><span class="cx">
</span><span class="lines">@@ -389,6 +393,10 @@
</span><span class="cx"> volume.step = .01;
</span><span class="cx"> this.listenFor(volume, 'input', this.handleVolumeSliderInput);
</span><span class="cx">
</span><ins>+ this.volumeContextName = "_webkit-media-controls-volume-" + Controller.gLastTimelineId;
+ volume.style.backgroundImage = '-webkit-canvas(' + this.volumeContextName + ')';
+ Controller.gLastTimelineId++;
+
</ins><span class="cx"> var captionButton = this.controls.captionButton = document.createElement('button');
</span><span class="cx"> captionButton.setAttribute('pseudo', '-webkit-media-controls-toggle-closed-captions-button');
</span><span class="cx"> captionButton.setAttribute('aria-label', this.UIString('Captions'));
</span><span class="lines">@@ -853,6 +861,7 @@
</span><span class="cx"> this.controls.muteButton.setAttribute('aria-label', this.UIString('Mute'));
</span><span class="cx"> }
</span><span class="cx"> this.video.volume = this.controls.volume.value;
</span><ins>+ this.drawVolumeBackground();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> handleCaptionButtonClicked: function(event)
</span><span class="lines">@@ -978,24 +987,149 @@
</span><span class="cx"> this.drawTimelineBackground();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ addRoundedRect: function(ctx, x, y, width, height, radius) {
+ ctx.moveTo(x + radius, y);
+ ctx.arcTo(x + width, y, x + width, y + radius, radius);
+ ctx.lineTo(x + width, y + height - radius);
+ ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+ ctx.lineTo(x + radius, y + height);
+ ctx.arcTo(x, y + height, x, y + height - radius, radius);
+ ctx.lineTo(x, y + radius);
+ ctx.arcTo(x, y, x + radius, y, radius);
+ },
+
</ins><span class="cx"> drawTimelineBackground: function() {
</span><del>- var background = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(2, 2, 2)"/><stop offset="1" stop-color="rgb(23, 23, 23)"/></linearGradient><g style="fill:url(#gradient)">'
</del><ins>+ var dpr = window.devicePixelRatio;
+ var width = this.controls.timeline.offsetWidth * dpr;
+ var height = this.controls.timeline.offsetHeight * dpr;
+
+ if (!width || !height)
+ return;
+
+ var played = this.video.currentTime / this.video.duration;
+ var buffered = 0;
+ for (var i = 0, end = this.video.buffered.length; i < end; ++i)
+ buffered = Math.max(this.video.buffered.end(i), buffered);
+
+ buffered /= this.video.duration;
+
+ var ctx = document.getCSSCanvasContext('2d', this.timelineContextName, width, height);
+
+ width /= dpr;
+ height /= dpr;
+
+ ctx.save();
+ ctx.scale(dpr, dpr);
+ ctx.clearRect(0, 0, width, height);
+
+ var timelineHeight = 3;
+ var trackHeight = 1;
+ var scrubberWidth = 3;
+ var scrubberHeight = 15;
+ var borderSize = 2;
+ var scrubberPosition = Math.max(0, Math.min(width - scrubberWidth, Math.round(width * played)));
+
+ // Draw buffered section.
+ ctx.save();
+ ctx.fillStyle = "rgb(100, 100, 100)";
+ ctx.fillRect(1, 8, Math.round(width * buffered) - borderSize, trackHeight);
+ ctx.restore();
+
+ // Draw timeline border.
+ ctx.save();
+ ctx.beginPath();
+ this.addRoundedRect(ctx, scrubberPosition, 7, width - scrubberPosition, timelineHeight, timelineHeight / 2.0);
+ this.addRoundedRect(ctx, scrubberPosition + 1, 8, width - scrubberPosition - borderSize , trackHeight, trackHeight / 2.0);
+ ctx.closePath();
+ ctx.clip("evenodd");
+ ctx.fillStyle = "rgb(30, 30, 30)";
+ ctx.fillRect(0, 0, width, height);
+ ctx.restore();
+
+ // Draw played section.
+ ctx.save();
+ ctx.beginPath();
+ this.addRoundedRect(ctx, 0, 7, width, timelineHeight, timelineHeight / 2.0);
+ ctx.closePath();
+ ctx.clip();
+ ctx.fillStyle = "rgb(75, 75, 75)";
+ ctx.fillRect(0, 0, width * played, height);
+ ctx.restore();
+
+ // Draw the scrubber.
+ ctx.save();
+ ctx.clearRect(scrubberPosition - 1, 0, scrubberWidth + borderSize, height, 0);
+ ctx.beginPath();
+ this.addRoundedRect(ctx, scrubberPosition, 1, scrubberWidth, scrubberHeight, 1);
+ ctx.closePath();
+ ctx.clip();
+ ctx.fillStyle = "rgb(140, 140, 140)";
+ ctx.fillRect(0, 0, width, height);
+ ctx.restore();
+
+ ctx.restore();
+ },
</ins><span class="cx">
</span><del>- var duration = this.video.duration;
- var buffered = this.video.buffered;
- for (var i = 0, end = buffered.length; i < end; ++i) {
- var startTime = buffered.start(i);
- var endTime = buffered.end(i);
</del><ins>+ drawVolumeBackground: function() {
+ var dpr = window.devicePixelRatio;
+ var width = this.controls.volume.offsetWidth * dpr;
+ var height = this.controls.volume.offsetHeight * dpr;
</ins><span class="cx">
</span><del>- var startX = startTime / duration;
- var widthX = (endTime - startTime) / duration;
- background += '<rect x="' + startX + '" y="0" width="' + widthX + '" height="1"/>';
- }
-
- background += '</g></svg>\')'
- this.controls.timeline.style.backgroundImage = background;
</del><ins>+ if (!width || !height)
+ return;
+
+ var ctx = document.getCSSCanvasContext('2d', this.volumeContextName, width, height);
+
+ width /= dpr;
+ height /= dpr;
+
+ ctx.save();
+ ctx.scale(dpr, dpr);
+ ctx.clearRect(0, 0, width, height);
+
+ var seekerPosition = this.controls.volume.value;
+ var trackHeight = 1;
+ var timelineHeight = 3;
+ var scrubberRadius = 3.5;
+ var scrubberDiameter = 2 * scrubberRadius;
+ var borderSize = 2;
+
+ var scrubberPosition = Math.round(seekerPosition * (width - scrubberDiameter - borderSize));
+
+ // Draw volume track border.
+ ctx.save();
+ ctx.beginPath();
+ this.addRoundedRect(ctx, 0, 3, width, timelineHeight, timelineHeight / 2.0);
+ this.addRoundedRect(ctx, 1, 4, width - borderSize, trackHeight, trackHeight / 2.0);
+ ctx.closePath();
+ ctx.clip("evenodd");
+ ctx.fillStyle = "rgb(30, 30, 30)";
+ ctx.fillRect(0, 0, width, height);
+ ctx.restore();
+
+ // Clear a hole in the slider for the scrubber.
+ ctx.save();
+ ctx.beginPath();
+ this.addRoundedRect(ctx, scrubberPosition, 0, scrubberDiameter + borderSize, height, (scrubberDiameter + borderSize) / 2.0);
+ ctx.closePath();
+ ctx.clip();
+ ctx.clearRect(0, 0, width, height);
+ ctx.restore();
+
+ // Draw scrubber.
+ ctx.save();
+ ctx.beginPath();
+ this.addRoundedRect(ctx, scrubberPosition + 1, 1, scrubberDiameter, scrubberDiameter, scrubberRadius);
+ ctx.closePath();
+ ctx.clip();
+ ctx.fillStyle = "rgb(140, 140, 140)";
+ ctx.fillRect(0, 0, width, height);
+ ctx.restore();
+
+ ctx.restore();
+
</ins><span class="cx"> },
</span><del>-
</del><ins>+
</ins><span class="cx"> formatTime: function(time)
</span><span class="cx"> {
</span><span class="cx"> if (isNaN(time))
</span><span class="lines">@@ -1041,6 +1175,7 @@
</span><span class="cx">
</span><span class="cx"> this.updateTime();
</span><span class="cx"> this.updateProgress(true);
</span><ins>+ this.drawVolumeBackground();
</ins><span class="cx">
</span><span class="cx"> this.controls.panel.classList.add(this.ClassNames.show);
</span><span class="cx"> this.controls.panel.classList.remove(this.ClassNames.hidden);
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (180897 => 180898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2015-03-02 22:52:56 UTC (rev 180897)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2015-03-02 22:54:50 UTC (rev 180898)
</span><span class="lines">@@ -292,17 +292,6 @@
</span><span class="cx"> this.updateProgress();
</span><span class="cx"> },
</span><span class="cx">
</span><del>- addRoundedRect: function(ctx, x, y, width, height, radius) {
- ctx.moveTo(x + radius, y);
- ctx.arcTo(x + width, y, x + width, y + radius, radius);
- ctx.lineTo(x + width, y + height - radius);
- ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
- ctx.lineTo(x + radius, y + height);
- ctx.arcTo(x, y + height, x, y + height - radius, radius);
- ctx.lineTo(x, y + radius);
- ctx.arcTo(x, y, x + radius, y, radius);
- },
-
</del><span class="cx"> drawTimelineBackground: function() {
</span><span class="cx"> var width = this.timelineWidth * window.devicePixelRatio;
</span><span class="cx"> var height = this.timelineHeight * window.devicePixelRatio;
</span></span></pre>
</div>
</div>
</body>
</html>