<!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>[202679] trunk</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/202679">202679</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-06-30 08:09:35 -0700 (Thu, 30 Jun 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[iOS] Media controls are too cramped with small video
https://bugs.webkit.org/show_bug.cgi?id=158815
<rdar://problem/26824238>
Patch by Antoine Quint <graouts@apple.com> on 2016-06-30
Reviewed by Eric Carlson.
Source/WebCore:
In updateLayoutForDisplayedWidth(), we try to ensure a minimum width is guaranteed
for the progress indicator. However, we were not accounting for the width used by
the current and remaining time labels on either side of it, so we would incorrectly
conclude that we were guaranteeing the minimum time and yield incorrect layouts since
we were trying to fit more buttons than we had room for.
In order to correctly compute the available width for the progress indicator, we now
have clones of the current and remaining time labels, hidden from video and VoiceOver,
that we update along with the originals. The same styles apply to both clones and
originals, so we may measure the clones to determine the space used by the time labels.
The reason we need to use clones is that if the time labels had previously been hidden
from view, precisely because there was not enough space to display them along with the
progress indicator, then trying to obtain metrics from them would yield 0 since they had
"display: none" styles applied. In order to avoid extra layouts and possible flashing, we
use the clones so that we never have to toggle the "display" property of the originals
just to obtain their measurements.
As a result of this change, we adjust the constant used to set the minimum required
width available to display the progress indicator after all other essential controls
and labels have been measured. That constant used to account for the width of the
time labels, and this is no longer correct.
Test: media/video-controls-drop-and-restore-timeline.html
* Modules/mediacontrols/mediaControlsApple.css:
(::-webkit-media-controls-time-remaining-display.clone):
* Modules/mediacontrols/mediaControlsApple.js:
(Controller):
(Controller.prototype.createTimeClones):
(Controller.prototype.removeTimeClass):
(Controller.prototype.addTimeClass):
(Controller.prototype.updateDuration):
(Controller.prototype.updateLayoutForDisplayedWidth):
(Controller.prototype.updateTime):
(Controller.prototype.updateControlsWhileScrubbing):
* Modules/mediacontrols/mediaControlsiOS.css:
(::-webkit-media-controls-time-remaining-display.clone):
* Modules/mediacontrols/mediaControlsiOS.js:
LayoutTests:
Adjust the output of this test to account for the time label clones and add a new test.
* media/video-controls-drop-and-restore-timeline-expected.txt: Added.
* media/video-controls-drop-and-restore-timeline.html: Added.
* platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt:
* platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsplatformmachttptestsmediahlsvideocontrolslivestreamexpectedtxt">trunk/LayoutTests/platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt</a></li>
<li><a href="#trunkLayoutTestsplatformmacyosemitehttptestsmediahlsvideocontrolslivestreamexpectedtxt">trunk/LayoutTests/platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt</a></li>
<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="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs">trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediavideocontrolsdropandrestoretimelineexpectedtxt">trunk/LayoutTests/media/video-controls-drop-and-restore-timeline-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediavideocontrolsdropandrestoretimelinehtml">trunk/LayoutTests/media/video-controls-drop-and-restore-timeline.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (202678 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-06-30 14:26:14 UTC (rev 202678)
+++ trunk/LayoutTests/ChangeLog 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2016-06-30 Antoine Quint <graouts@apple.com>
+
+ [iOS] Media controls are too cramped with small video
+ https://bugs.webkit.org/show_bug.cgi?id=158815
+ <rdar://problem/26824238>
+
+ Reviewed by Eric Carlson.
+
+ Adjust the output of this test to account for the time label clones and add a new test.
+
+ * media/video-controls-drop-and-restore-timeline-expected.txt: Added.
+ * media/video-controls-drop-and-restore-timeline.html: Added.
+ * platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt:
+ * platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt:
+
</ins><span class="cx"> 2016-06-29 Benjamin Poulain <bpoulain@apple.com>
</span><span class="cx">
</span><span class="cx"> Attempt to fix constructor-length.html
</span></span></pre></div>
<a id="trunkLayoutTestsmediavideocontrolsdropandrestoretimelineexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/video-controls-drop-and-restore-timeline-expected.txt (0 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/video-controls-drop-and-restore-timeline-expected.txt (rev 0)
+++ trunk/LayoutTests/media/video-controls-drop-and-restore-timeline-expected.txt 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+
+Tests that the scrubber is dropped when a video is too narrow and restored when made wider.
+
+EXPECTED (video.controls != 'null') OK
+EVENT(canplaythrough)
+EXPECTED (shadowRoot = internals.shadowRoot(video) != 'null') OK
+EXPECTED (timelineContainer = mediaControlsElement(shadowRoot.firstChild, "-webkit-media-controls-timeline-container") != 'null') OK
+Initital test at width = 200px
+EXPECTED (video.offsetWidth == '200') OK
+EXPECTED (timelineChildrenAreDropped() == 'true') OK
+EXPECTED (timelineChildrenAreNotDisplayed() == 'true') OK
+Second test at width = 500px
+EXPECTED (video.offsetWidth == '500') OK
+EXPECTED (timelineChildrenAreDropped() == 'false') OK
+EXPECTED (timelineChildrenAreNotDisplayed() == 'false') OK
+END OF TEST
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediavideocontrolsdropandrestoretimelinehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/video-controls-drop-and-restore-timeline.html (0 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/video-controls-drop-and-restore-timeline.html (rev 0)
+++ trunk/LayoutTests/media/video-controls-drop-and-restore-timeline.html 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -0,0 +1,62 @@
</span><ins>+<html>
+<head>
+ <title>Tests that the scrubber is dropped when a video is too narrow and restored when made wider</title>
+ <script src="media-file.js"></script>
+ <script src="media-controls.js"></script>
+</head>
+<body>
+ <video controls style="width: 200px"></video>
+ <p>Tests that the scrubber is dropped when a video is too narrow and restored when made wider.</p>
+ <script src="video-test.js"></script>
+ <script>
+
+ var timelineContainer;
+
+ function timelineChildrenAreDropped() {
+ return Array.prototype.every.call(timelineContainer.children, function(child) {
+ return child.classList.contains("dropped");
+ });
+ }
+
+ function timelineChildrenAreNotDisplayed() {
+ return Array.prototype.every.call(timelineContainer.children, function(child) {
+ return child.ownerDocument.defaultView.getComputedStyle(child).display === "none";
+ });
+ }
+
+ testExpected("video.controls", null, "!=");
+
+ waitForEvent("canplaythrough", function() {
+ if (!window.internals) {
+ logResult(false, "window.internals == undefined");
+ endTest();
+ return;
+ }
+
+ testExpected("shadowRoot = internals.shadowRoot(video)", null, "!=");
+ testExpected(`timelineContainer = mediaControlsElement(shadowRoot.firstChild, "-webkit-media-controls-timeline-container")`, null, "!=");
+
+ consoleWrite("Initital test at width = 200px");
+ testExpected("video.offsetWidth", 200, "==");
+ testExpected("timelineChildrenAreDropped()", true, "==");
+ testExpected("timelineChildrenAreNotDisplayed()", true, "==");
+
+ consoleWrite("Second test at width = 500px");
+ video.style.width = "500px";
+ testExpected("video.offsetWidth", 500, "==");
+
+ // Using a timeout here since the resize event that will be dispatched
+ // to the video controls to allow them to update their size needs to have
+ // time to propagate asynchronously.
+ setTimeout(function() {
+ testExpected("timelineChildrenAreDropped()", false, "==");
+ testExpected("timelineChildrenAreNotDisplayed()", false, "==");
+ endTest();
+ });
+ });
+
+ video.src = findMediaFile("video", "content/test");
+
+ </script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformmachttptestsmediahlsvideocontrolslivestreamexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt (202678 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt 2016-06-30 14:26:14 UTC (rev 202678)
+++ trunk/LayoutTests/platform/mac/http/tests/media/hls/video-controls-live-stream-expected.txt 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -4,6 +4,8 @@
</span><span class="cx"> EXPECTED (video.duration == 'Infinity') OK
</span><span class="cx"> -webkit-media-text-track-container: classes: [hidden]
</span><span class="cx"> -webkit-media-show-controls: classes: []
</span><ins>+-webkit-media-controls-current-time-display: classes: [clone six-digit-time]
+-webkit-media-controls-time-remaining-display: classes: [clone six-digit-time]
</ins><span class="cx"> -webkit-media-controls-wireless-playback-status: classes: [hidden]
</span><span class="cx"> -webkit-media-controls-wireless-playback-text: classes: []
</span><span class="cx"> -webkit-media-controls-wireless-playback-text-top: classes: []
</span></span></pre></div>
<a id="trunkLayoutTestsplatformmacyosemitehttptestsmediahlsvideocontrolslivestreamexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt (202678 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt 2016-06-30 14:26:14 UTC (rev 202678)
+++ trunk/LayoutTests/platform/mac-yosemite/http/tests/media/hls/video-controls-live-stream-expected.txt 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -4,6 +4,8 @@
</span><span class="cx"> EXPECTED (video.duration == 'Infinity') OK
</span><span class="cx"> -webkit-media-text-track-container: classes: [hidden]
</span><span class="cx"> -webkit-media-show-controls: classes: []
</span><ins>+-webkit-media-controls-current-time-display: classes: [clone six-digit-time]
+-webkit-media-controls-time-remaining-display: classes: [clone six-digit-time]
</ins><span class="cx"> -webkit-media-controls-wireless-playback-status: classes: [hidden]
</span><span class="cx"> -webkit-media-controls-wireless-playback-text: classes: []
</span><span class="cx"> -webkit-media-controls-wireless-playback-text-top: classes: []
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (202678 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-06-30 14:26:14 UTC (rev 202678)
+++ trunk/Source/WebCore/ChangeLog 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -1,3 +1,50 @@
</span><ins>+2016-06-30 Antoine Quint <graouts@apple.com>
+
+ [iOS] Media controls are too cramped with small video
+ https://bugs.webkit.org/show_bug.cgi?id=158815
+ <rdar://problem/26824238>
+
+ Reviewed by Eric Carlson.
+
+ In updateLayoutForDisplayedWidth(), we try to ensure a minimum width is guaranteed
+ for the progress indicator. However, we were not accounting for the width used by
+ the current and remaining time labels on either side of it, so we would incorrectly
+ conclude that we were guaranteeing the minimum time and yield incorrect layouts since
+ we were trying to fit more buttons than we had room for.
+
+ In order to correctly compute the available width for the progress indicator, we now
+ have clones of the current and remaining time labels, hidden from video and VoiceOver,
+ that we update along with the originals. The same styles apply to both clones and
+ originals, so we may measure the clones to determine the space used by the time labels.
+ The reason we need to use clones is that if the time labels had previously been hidden
+ from view, precisely because there was not enough space to display them along with the
+ progress indicator, then trying to obtain metrics from them would yield 0 since they had
+ "display: none" styles applied. In order to avoid extra layouts and possible flashing, we
+ use the clones so that we never have to toggle the "display" property of the originals
+ just to obtain their measurements.
+
+ As a result of this change, we adjust the constant used to set the minimum required
+ width available to display the progress indicator after all other essential controls
+ and labels have been measured. That constant used to account for the width of the
+ time labels, and this is no longer correct.
+
+ Test: media/video-controls-drop-and-restore-timeline.html
+
+ * Modules/mediacontrols/mediaControlsApple.css:
+ (::-webkit-media-controls-time-remaining-display.clone):
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller):
+ (Controller.prototype.createTimeClones):
+ (Controller.prototype.removeTimeClass):
+ (Controller.prototype.addTimeClass):
+ (Controller.prototype.updateDuration):
+ (Controller.prototype.updateLayoutForDisplayedWidth):
+ (Controller.prototype.updateTime):
+ (Controller.prototype.updateControlsWhileScrubbing):
+ * Modules/mediacontrols/mediaControlsiOS.css:
+ (::-webkit-media-controls-time-remaining-display.clone):
+ * Modules/mediacontrols/mediaControlsiOS.js:
+
</ins><span class="cx"> 2016-06-30 Eric Carlson <eric.carlson@apple.com>
</span><span class="cx">
</span><span class="cx"> [Mac] Crash registering AVFoundation media engine
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (202678 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2016-06-30 14:26:14 UTC (rev 202678)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -1142,3 +1142,12 @@
</span><span class="cx"> margin-right: 24px;
</span><span class="cx"> margin-left: 0px;
</span><span class="cx"> }
</span><ins>+
+/* Time display clones that we use in updateLayoutForDisplayedWidth(). */
+::-webkit-media-controls-current-time-display.clone,
+::-webkit-media-controls-time-remaining-display.clone {
+ position: absolute;
+ display: inline;
+ top: 100%;
+ mix-blend-mode: normal;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (202678 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2016-06-30 14:26:14 UTC (rev 202678)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -25,6 +25,7 @@
</span><span class="cx"> this.addVideoListeners();
</span><span class="cx"> this.createBase();
</span><span class="cx"> this.createControls();
</span><ins>+ this.createTimeClones();
</ins><span class="cx"> this.updateBase();
</span><span class="cx"> this.updateControls();
</span><span class="cx"> this.updateDuration();
</span><span class="lines">@@ -132,7 +133,7 @@
</span><span class="cx"> right: 39,
</span><span class="cx"> down: 40
</span><span class="cx"> },
</span><del>- MinimumTimelineWidth: 150,
</del><ins>+ MinimumTimelineWidth: 100,
</ins><span class="cx"> ButtonWidth: 32,
</span><span class="cx">
</span><span class="cx"> extend: function(child)
</span><span class="lines">@@ -530,6 +531,21 @@
</span><span class="cx"> wirelessTargetPicker.classList.add(this.ClassNames.hidden);
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ createTimeClones: function()
+ {
+ var currentTimeClone = this.currentTimeClone = document.createElement('div');
+ currentTimeClone.setAttribute('pseudo', '-webkit-media-controls-current-time-display');
+ currentTimeClone.setAttribute('aria-hidden', 'true');
+ currentTimeClone.classList.add('clone');
+ this.base.appendChild(currentTimeClone);
+
+ var remainingTimeClone = this.remainingTimeClone = document.createElement('div');
+ remainingTimeClone.setAttribute('pseudo', '-webkit-media-controls-time-remaining-display');
+ remainingTimeClone.setAttribute('aria-hidden', 'true');
+ remainingTimeClone.classList.add('clone');
+ this.base.appendChild(remainingTimeClone);
+ },
+
</ins><span class="cx"> setControlsType: function(type)
</span><span class="cx"> {
</span><span class="cx"> if (type === this.controlsType)
</span><span class="lines">@@ -1278,29 +1294,32 @@
</span><span class="cx">
</span><span class="cx"> this.setIsLive(duration === Number.POSITIVE_INFINITY);
</span><span class="cx">
</span><ins>+ var timeControls = [this.controls.currentTime, this.controls.remainingTime, this.currentTimeClone, this.remainingTimeClone];
+
+ function removeTimeClass(className) {
+ for (let element of timeControls)
+ element.classList.remove(className);
+ }
+
+ function addTimeClass(className) {
+ for (let element of timeControls)
+ element.classList.add(className);
+ }
+
</ins><span class="cx"> // Reset existing style.
</span><del>- this.controls.currentTime.classList.remove(this.ClassNames.threeDigitTime);
- this.controls.currentTime.classList.remove(this.ClassNames.fourDigitTime);
- this.controls.currentTime.classList.remove(this.ClassNames.fiveDigitTime);
- this.controls.currentTime.classList.remove(this.ClassNames.sixDigitTime);
- this.controls.remainingTime.classList.remove(this.ClassNames.threeDigitTime);
- this.controls.remainingTime.classList.remove(this.ClassNames.fourDigitTime);
- this.controls.remainingTime.classList.remove(this.ClassNames.fiveDigitTime);
- this.controls.remainingTime.classList.remove(this.ClassNames.sixDigitTime);
</del><ins>+ removeTimeClass(this.ClassNames.threeDigitTime);
+ removeTimeClass(this.ClassNames.fourDigitTime);
+ removeTimeClass(this.ClassNames.fiveDigitTime);
+ removeTimeClass(this.ClassNames.sixDigitTime);
</ins><span class="cx">
</span><del>- if (duration >= 60*60*10) {
- this.controls.currentTime.classList.add(this.ClassNames.sixDigitTime);
- this.controls.remainingTime.classList.add(this.ClassNames.sixDigitTime);
- } else if (duration >= 60*60) {
- this.controls.currentTime.classList.add(this.ClassNames.fiveDigitTime);
- this.controls.remainingTime.classList.add(this.ClassNames.fiveDigitTime);
- } else if (duration >= 60*10) {
- this.controls.currentTime.classList.add(this.ClassNames.fourDigitTime);
- this.controls.remainingTime.classList.add(this.ClassNames.fourDigitTime);
- } else {
- this.controls.currentTime.classList.add(this.ClassNames.threeDigitTime);
- this.controls.remainingTime.classList.add(this.ClassNames.threeDigitTime);
- }
</del><ins>+ if (duration >= 60*60*10)
+ addTimeClass(this.ClassNames.sixDigitTime);
+ else if (duration >= 60*60)
+ addTimeClass(this.ClassNames.fiveDigitTime);
+ else if (duration >= 60*10)
+ addTimeClass(this.ClassNames.fourDigitTime);
+ else
+ addTimeClass(this.ClassNames.threeDigitTime);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> progressFillStyle: function(context)
</span><span class="lines">@@ -1626,8 +1645,11 @@
</span><span class="cx"> // This tells us how much room we need in order to display every visible button.
</span><span class="cx"> var visibleButtonWidth = this.ButtonWidth * visibleButtons.length;
</span><span class="cx">
</span><ins>+ var currentTimeWidth = this.currentTimeClone.getBoundingClientRect().width;
+ var remainingTimeWidth = this.remainingTimeClone.getBoundingClientRect().width;
+
</ins><span class="cx"> // Check if there is enough room for the scrubber.
</span><del>- var shouldDropTimeline = (visibleWidth - visibleButtonWidth) < this.MinimumTimelineWidth;
</del><ins>+ var shouldDropTimeline = (visibleWidth - visibleButtonWidth - currentTimeWidth - remainingTimeWidth) < this.MinimumTimelineWidth;
</ins><span class="cx"> this.controls.timeline.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
</span><span class="cx"> this.controls.currentTime.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
</span><span class="cx"> this.controls.thumbnailTrack.classList.toggle(this.ClassNames.dropped, shouldDropTimeline);
</span><span class="lines">@@ -1681,9 +1703,9 @@
</span><span class="cx"> {
</span><span class="cx"> var currentTime = this.video.currentTime;
</span><span class="cx"> var timeRemaining = currentTime - this.video.duration;
</span><del>- this.controls.currentTime.innerText = this.formatTime(currentTime);
</del><ins>+ this.currentTimeClone.innerText = this.controls.currentTime.innerText = this.formatTime(currentTime);
</ins><span class="cx"> this.controls.timeline.value = this.video.currentTime;
</span><del>- this.controls.remainingTime.innerText = this.formatTime(timeRemaining);
</del><ins>+ this.remainingTimeClone.innerText = this.controls.remainingTime.innerText = this.formatTime(timeRemaining);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> updateControlsWhileScrubbing: function()
</span><span class="lines">@@ -1693,8 +1715,8 @@
</span><span class="cx">
</span><span class="cx"> var currentTime = (this.controls.timeline.value / this.controls.timeline.max) * this.video.duration;
</span><span class="cx"> var timeRemaining = currentTime - this.video.duration;
</span><del>- this.controls.currentTime.innerText = this.formatTime(currentTime);
- this.controls.remainingTime.innerText = this.formatTime(timeRemaining);
</del><ins>+ this.currentTimeClone.innerText = this.controls.currentTime.innerText = this.formatTime(currentTime);
+ this.remainingTimeClone.innerText = this.controls.remainingTime.innerText = this.formatTime(timeRemaining);
</ins><span class="cx"> this.drawTimelineBackground();
</span><span class="cx"> },
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOScss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (202678 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2016-06-30 14:26:14 UTC (rev 202678)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -723,3 +723,11 @@
</span><span class="cx"> pointer-events: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+/* Time display clones that we use in updateLayoutForDisplayedWidth(). */
+::-webkit-media-controls-current-time-display.clone,
+::-webkit-media-controls-time-remaining-display.clone {
+ position: absolute;
+ display: inline;
+ top: 100%;
+ mix-blend-mode: normal;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmediacontrolsmediaControlsiOSjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (202678 => 202679)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2016-06-30 14:26:14 UTC (rev 202678)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js 2016-06-30 15:09:35 UTC (rev 202679)
</span><span class="lines">@@ -27,7 +27,7 @@
</span><span class="cx">
</span><span class="cx"> ControllerIOS.prototype = {
</span><span class="cx"> /* Constants */
</span><del>- MinimumTimelineWidth: 200,
</del><ins>+ MinimumTimelineWidth: 150,
</ins><span class="cx"> ButtonWidth: 42,
</span><span class="cx">
</span><span class="cx"> get idiom()
</span></span></pre>
</div>
</div>
</body>
</html>