<!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>[207295] 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/207295">207295</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-10-13 11:45:10 -0700 (Thu, 13 Oct 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] TimeControl and TimeLabel
https://bugs.webkit.org/show_bug.cgi?id=163356
<rdar://problem/28741376>
Patch by Antoine Quint <graouts@apple.com> on 2016-10-13
Reviewed by Dean Jackson.
Source/WebCore:
We introduce the TimeControl and TimeLabel classes. A TimeControl object
provides two TimeLabels, one for the elapsed time, one for the remaining
time, and a Scrubber in between them. Depending on a TimeControl's width,
it will adjust its layout such that the scrubber takes all the available
space between the labels, and can indicate whether it's large enough to
meet the minimal required width to show the scrubber, such that a container
node may decide not to show the TimeControl at all.
TimeLabel nodes simply show an integer time value in miliseconds in a
nicely formatted way.
Tests: media/modern-media-controls/time-control/time-control.html
media/modern-media-controls/time-label/time-label.html
* Modules/modern-media-controls/controls/time-control.js: Added.
(TimeControl.prototype.get width):
(TimeControl.prototype.set width):
(TimeControl.prototype.get isSufficientlyWide):
* Modules/modern-media-controls/controls/time-label.css: Added.
(.time-label):
* Modules/modern-media-controls/controls/time-label.js: Added.
(TimeLabel.prototype.get value):
(TimeLabel.prototype.set value):
(TimeLabel.prototype.commitProperty):
(TimeLabel.prototype._formattedTime):
LayoutTests:
Adding tests for the new TimeControl and TimeLabel classes.
* media/modern-media-controls/time-control/time-control-expected.txt: Added.
* media/modern-media-controls/time-control/time-control.html: Added.
* media/modern-media-controls/time-label/time-label-expected.txt: Added.
* media/modern-media-controls/time-label/time-label.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/LayoutTests/media/modern-media-controls/time-control/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimecontroltimecontrolexpectedtxt">trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimecontroltimecontrolhtml">trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/time-label/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimelabeltimelabelexpectedtxt">trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstimelabeltimelabelhtml">trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstimecontroljs">trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstimelabelcss">trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstimelabeljs">trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (207294 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-10-13 18:13:19 UTC (rev 207294)
+++ trunk/LayoutTests/ChangeLog 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2016-10-13 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] TimeControl and TimeLabel
+ https://bugs.webkit.org/show_bug.cgi?id=163356
+ <rdar://problem/28741376>
+
+ Reviewed by Dean Jackson.
+
+ Adding tests for the new TimeControl and TimeLabel classes.
+
+ * media/modern-media-controls/time-control/time-control-expected.txt: Added.
+ * media/modern-media-controls/time-control/time-control.html: Added.
+ * media/modern-media-controls/time-label/time-label-expected.txt: Added.
+ * media/modern-media-controls/time-label/time-label.html: Added.
+
</ins><span class="cx"> 2016-10-13 Jer Noble <jer.noble@apple.com>
</span><span class="cx">
</span><span class="cx"> CRASH at WebCore::SourceBuffer::removeCodedFrames + 37
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimecontroltimecontrolexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt (0 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -0,0 +1,31 @@
</span><ins>+Testing the TimeControl class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS timeControl.element.localName is "div"
+PASS timeControl.element.className is "time-control"
+
+PASS timeControl.elapsedTimeLabel instanceof TimeLabel is true
+PASS timeControl.scrubber instanceof Scrubber is true
+PASS timeControl.remainingTimeLabel instanceof TimeLabel is true
+
+PASS timeControl.children.length is 3
+PASS timeControl.children[0] is timeControl.elapsedTimeLabel
+PASS timeControl.children[1] is timeControl.scrubber
+PASS timeControl.children[2] is timeControl.remainingTimeLabel
+
+timeControl.width = 500;
+PASS timeControl.elapsedTimeLabel.x is -2
+PASS timeControl.scrubber.x is 43
+PASS timeControl.scrubber.width is 406
+PASS timeControl.remainingTimeLabel.x is 454
+PASS timeControl.isSufficientlyWide is true
+
+timeControl.width = 261;
+PASS timeControl.isSufficientlyWide is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimecontroltimecontrolhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html (0 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>TimeControl</code> class.");
+
+const timeControl = new TimeControl;
+
+shouldBeEqualToString("timeControl.element.localName", "div");
+shouldBeEqualToString("timeControl.element.className", "time-control");
+
+debug("");
+shouldBeTrue("timeControl.elapsedTimeLabel instanceof TimeLabel");
+shouldBeTrue("timeControl.scrubber instanceof Scrubber");
+shouldBeTrue("timeControl.remainingTimeLabel instanceof TimeLabel");
+
+debug("");
+shouldBe("timeControl.children.length", "3");
+shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
+shouldBe("timeControl.children[1]", "timeControl.scrubber");
+shouldBe("timeControl.children[2]", "timeControl.remainingTimeLabel");
+
+debug("");
+debug("timeControl.width = 500;");
+timeControl.width = 500;
+shouldBe("timeControl.elapsedTimeLabel.x", "-2");
+shouldBe("timeControl.scrubber.x", "43");
+shouldBe("timeControl.scrubber.width", "406");
+shouldBe("timeControl.remainingTimeLabel.x", "454");
+shouldBeTrue("timeControl.isSufficientlyWide");
+
+debug("");
+debug("timeControl.width = 261;");
+timeControl.width = 261;
+shouldBeFalse("timeControl.isSufficientlyWide");
+
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimelabeltimelabelexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt (0 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+Testing the TimeLabel class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS timeLabel.value is 0
+PASS timeLabel.element.localName is "div"
+PASS timeLabel.element.className is "time-label"
+PASS style.position is "absolute"
+PASS style.fontFamily is "-apple-system-monospaced-numbers"
+PASS style.fontSize is "14px"
+PASS rgba(style.color).r is 255
+PASS rgba(style.color).g is 255
+PASS rgba(style.color).b is 255
+PASS rgba(style.color).a is within 0.001 of 0.572
+PASS timeLabel.element.textContent is "00:01"
+PASS timeLabelWithNegativeValue.element.textContent is "-01:01"
+PASS timeLabelWithHours.element.textContent is "01:01:01"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstimelabeltimelabelhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html (0 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>TimeLabel</code> class.");
+
+const timeLabel = new TimeLabel;
+
+shouldBe("timeLabel.value", "0");
+shouldBeEqualToString("timeLabel.element.localName", "div");
+shouldBeEqualToString("timeLabel.element.className", "time-label");
+
+timeLabel.value = 1;
+
+const timeLabelWithNegativeValue = new TimeLabel;
+timeLabelWithNegativeValue.value = -61;
+
+const timeLabelWithHours = new TimeLabel;
+timeLabelWithHours.value = 3661;
+
+let style;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(timeLabel.element);
+ style = window.getComputedStyle(timeLabel.element);
+
+ shouldBeEqualToString("style.position", "absolute");
+ shouldBeEqualToString("style.fontFamily", "-apple-system-monospaced-numbers");
+ shouldBeEqualToString("style.fontSize", "14px");
+ shouldBeEqualToRGBAColor("style.color", "rgba(255, 255, 255, 0.572)");
+
+ timeLabel.element.remove();
+
+ shouldBeEqualToString("timeLabel.element.textContent", "00:01");
+ shouldBeEqualToString("timeLabelWithNegativeValue.element.textContent", "-01:01");
+ shouldBeEqualToString("timeLabelWithHours.element.textContent", "01:01:01");
+
+ finishJSTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (207294 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-10-13 18:13:19 UTC (rev 207294)
+++ trunk/Source/WebCore/ChangeLog 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -1,3 +1,37 @@
</span><ins>+2016-10-13 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] TimeControl and TimeLabel
+ https://bugs.webkit.org/show_bug.cgi?id=163356
+ <rdar://problem/28741376>
+
+ Reviewed by Dean Jackson.
+
+ We introduce the TimeControl and TimeLabel classes. A TimeControl object
+ provides two TimeLabels, one for the elapsed time, one for the remaining
+ time, and a Scrubber in between them. Depending on a TimeControl's width,
+ it will adjust its layout such that the scrubber takes all the available
+ space between the labels, and can indicate whether it's large enough to
+ meet the minimal required width to show the scrubber, such that a container
+ node may decide not to show the TimeControl at all.
+
+ TimeLabel nodes simply show an integer time value in miliseconds in a
+ nicely formatted way.
+
+ Tests: media/modern-media-controls/time-control/time-control.html
+ media/modern-media-controls/time-label/time-label.html
+
+ * Modules/modern-media-controls/controls/time-control.js: Added.
+ (TimeControl.prototype.get width):
+ (TimeControl.prototype.set width):
+ (TimeControl.prototype.get isSufficientlyWide):
+ * Modules/modern-media-controls/controls/time-label.css: Added.
+ (.time-label):
+ * Modules/modern-media-controls/controls/time-label.js: Added.
+ (TimeLabel.prototype.get value):
+ (TimeLabel.prototype.set value):
+ (TimeLabel.prototype.commitProperty):
+ (TimeLabel.prototype._formattedTime):
+
</ins><span class="cx"> 2016-10-13 Jer Noble <jer.noble@apple.com>
</span><span class="cx">
</span><span class="cx"> CRASH at WebCore::SourceBuffer::removeCodedFrames + 37
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstimecontroljs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (0 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -0,0 +1,70 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+const MinimumScrubberWidth = 168;
+const ElapsedTimeLabelLeftMargin = -2;
+const ElapsedTimeLabelWidth = 45;
+const RemainingTimeLabelWidth = 49;
+const RemainingTimeLabelLeftMargin = 5;
+
+class TimeControl extends LayoutItem
+{
+
+ constructor()
+ {
+ super({
+ element: `<div class="time-control">`
+ });
+
+ this.elapsedTimeLabel = new TimeLabel;
+ this.scrubber = new Scrubber;
+ this.remainingTimeLabel = new TimeLabel;
+
+ this.children = [this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
+ }
+
+ // Public
+
+ get width()
+ {
+ return super.width;
+ }
+
+ set width(width)
+ {
+ super.width = width;
+
+ this.elapsedTimeLabel.x = ElapsedTimeLabelLeftMargin;
+ this.scrubber.x = this.elapsedTimeLabel.x + ElapsedTimeLabelWidth;
+ this.scrubber.width = this._width - ElapsedTimeLabelWidth - RemainingTimeLabelWidth;
+ this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + RemainingTimeLabelLeftMargin;
+ }
+
+ get isSufficientlyWide()
+ {
+ return this.scrubber.width >= MinimumScrubberWidth;
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstimelabelcss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css (0 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.time-label {
+ position: absolute;
+
+ font-family: -apple-system-monospaced-numbers;
+ font-size: 14px;
+
+ color: rgba(255, 255, 255, 0.572);
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstimelabeljs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js (0 => 207295)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js 2016-10-13 18:45:10 UTC (rev 207295)
</span><span class="lines">@@ -0,0 +1,80 @@
</span><ins>+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class TimeLabel extends LayoutNode
+{
+
+ constructor()
+ {
+ super(`<div class="time-label">`);
+
+ this.value = 0;
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._value;
+ }
+
+ set value(value)
+ {
+ if (value === this._value)
+ return;
+
+ this._value = value;
+ this.markDirtyProperty("value");
+ }
+
+ // Protected
+
+ commitProperty(propertyName)
+ {
+ if (propertyName === "value")
+ this.element.textContent = this._formattedTime();
+ else
+ super.commitProperty(propertyName);
+ }
+
+ // Private
+
+ _formattedTime()
+ {
+ const time = this._value || 0;
+ const absTime = Math.abs(time);
+ const intSeconds = Math.floor(absTime % 60).toFixed(0);
+ const intMinutes = Math.floor((absTime / 60) % 60).toFixed(0);
+ const intHours = Math.floor(absTime / (60 * 60)).toFixed(0);
+
+ const timeStrings = [intMinutes, intSeconds];
+ if (intHours > 0)
+ timeStrings.unshift(intHours);
+
+ const sign = time < 0 ? "-" : "";
+ return sign + timeStrings.map(x => `00${x}`.slice(-2)).join(":");
+ }
+
+}
</ins></span></pre>
</div>
</div>
</body>
</html>