Modified: trunk/Source/WebCore/ChangeLog (173789 => 173790)
--- trunk/Source/WebCore/ChangeLog 2014-09-20 05:46:09 UTC (rev 173789)
+++ trunk/Source/WebCore/ChangeLog 2014-09-20 06:02:25 UTC (rev 173790)
@@ -1,3 +1,19 @@
+2014-09-19 Jer Noble <[email protected]>
+
+ [Media][Mac] Buffered range slides around as you resize a window
+ https://bugs.webkit.org/show_bug.cgi?id=136960
+
+ Reviewed by Dean Jackson.
+
+ Rather than using a canvas as the background image for the timeline slider, use a generated SVG image
+ to represent the buffered ranges.
+
+ * Modules/mediacontrols/mediaControlsApple.css:
+ (audio::-webkit-media-controls-timeline):
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.createControls):
+ (Controller.prototype.updateProgress):
+
2014-09-19 Gyuyoung Kim <[email protected]>
[CoordinatedGraphics][EFL] window.scrollTo(x, y) doesn't work when fixed layout is enabled
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (173789 => 173790)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2014-09-20 05:46:09 UTC (rev 173789)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2014-09-20 06:02:25 UTC (rev 173790)
@@ -420,6 +420,7 @@
-webkit-flex: 1 1 0;
height: 9px;
margin: 0;
+ background-size: 100% 9px;
border-radius: 4.5px;
background-color: rgb(74, 74, 74);
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (173789 => 173790)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2014-09-20 05:46:09 UTC (rev 173789)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2014-09-20 06:02:25 UTC (rev 173790)
@@ -39,9 +39,6 @@
Controller.PlayAfterSeeking = 0;
Controller.PauseAfterSeeking = 1;
-/* Globals */
-Controller.gLastTimelineId = 0;
-
Controller.prototype = {
/* Constants */
@@ -333,10 +330,8 @@
currentTime.setAttribute('role', 'timer');
var timeline = this.controls.timeline = document.createElement('input');
- this.timelineID = ++Controller.gLastTimelineId;
timeline.setAttribute('pseudo', '-webkit-media-controls-timeline');
timeline.setAttribute('aria-label', this.UIString('Duration'));
- timeline.style.backgroundImage = '-webkit-canvas(timeline-' + this.timelineID + ')';
timeline.type = 'range';
this.listenFor(timeline, 'input', this.handleTimelineChange);
this.listenFor(timeline, 'mouseover', this.handleTimelineMouseOver);
@@ -948,24 +943,21 @@
{
this.updateTimelineMetricsIfNeeded();
- var width = this.timelineWidth;
- var height = this.timelineHeight;
+ var background = ''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)">'
- var context = document.getCSSCanvasContext('2d', 'timeline-' + this.timelineID, width, height);
- context.clearRect(0, 0, width, height);
-
- context.fillStyle = this.progressFillStyle(context);
-
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);
- var startX = width * startTime / duration;
- var endX = width * endTime / duration;
- context.fillRect(startX, 0, endX - startX, height);
+ 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;
},
formatTime: function(time)
