Diff
Modified: trunk/LayoutTests/ChangeLog (213979 => 213980)
--- trunk/LayoutTests/ChangeLog 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/LayoutTests/ChangeLog 2017-03-15 12:42:38 UTC (rev 213980)
@@ -1,5 +1,23 @@
2017-03-15 Antoine Quint <[email protected]>
+ [Modern Media Controls] Always use six digits to display time when overall media duration is an hour or more
+ https://bugs.webkit.org/show_bug.cgi?id=169668
+ <rdar://problem/31059699>
+
+ Reviewed by Dean Jackson.
+
+ Rebase some tests due to the rename of the labelsMayDisplayTimesOverAnHour property to
+ useSixDigitsForTimeLabels. We also add an assertion in long-time.html to check that
+ we currently use six digits to display a time that is under an hour but where the
+ media duration is over an hour.
+
+ * http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt:
+ * http/tests/media/modern-media-controls/time-labels-support/long-time.html:
+ * media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels-expected.txt: Renamed from LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt.
+ * media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels.html: Renamed from LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html.
+
+2017-03-15 Antoine Quint <[email protected]>
+
[mac-wk1 debug] LayoutTest media/modern-media-controls/airplay-placard/airplay-placard-text-section.html is a flaky timeout
https://bugs.webkit.org/show_bug.cgi?id=169654
<rdar://problem/31059092>
Modified: trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt (213979 => 213980)
--- trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time-expected.txt 2017-03-15 12:42:38 UTC (rev 213980)
@@ -3,7 +3,8 @@
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-PASS mediaController.controls.timeControl.labelsMayDisplayTimesOverAnHour is true
+PASS mediaController.controls.timeControl.useSixDigitsForTimeLabels is true
+PASS mediaController.controls.timeControl.elapsedTimeLabel.element.textContent became "00:00:05"
PASS successfullyParsed is true
Modified: trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time.html (213979 => 213980)
--- trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time.html 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/LayoutTests/http/tests/media/modern-media-controls/time-labels-support/long-time.html 2017-03-15 12:42:38 UTC (rev 213980)
@@ -14,11 +14,14 @@
const mediaController = createControls(shadowRoot, media, null);
media.addEventListener("durationchange", function() {
- shouldBeTrue("mediaController.controls.timeControl.labelsMayDisplayTimesOverAnHour");
- debug("");
- shadowRoot.host.remove();
- media.remove();
- finishJSTest();
+ media.currentTime = 5;
+ shouldBeTrue("mediaController.controls.timeControl.useSixDigitsForTimeLabels");
+ shouldBecomeEqualToString("mediaController.controls.timeControl.elapsedTimeLabel.element.textContent", "00:00:05", () => {
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+ });
});
</script>
Deleted: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt (213979 => 213980)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt 2017-03-15 12:42:38 UTC (rev 213980)
@@ -1,20 +0,0 @@
-Testing the TimeControl class property labelsMayDisplayTimesOverAnHour.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-Testing default value
-PASS timeControl.labelsMayDisplayTimesOverAnHour is false
-
-Setting timeControl.labelsMayDisplayTimesOverAnHour = true
-PASS timeControl.labelsMayDisplayTimesOverAnHour is true
-
-PASS timeControl.elapsedTimeLabel.x is -2
-PASS timeControl.scrubber.x is 65
-PASS timeControl.scrubber.width is 362
-PASS timeControl.remainingTimeLabel.x is 432
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
Deleted: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html (213979 => 213980)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html 2017-03-15 12:42:38 UTC (rev 213980)
@@ -1,30 +0,0 @@
-<script src=""
-<script src="" type="text/_javascript_"></script>
-<script src="" type="text/_javascript_"></script>
-<body>
-<script type="text/_javascript_">
-
-description("Testing the <code>TimeControl</code> class property labelsMayDisplayTimesOverAnHour.");
-
-const timeControl = new TimeControl;
-
-debug("Testing default value");
-shouldBeFalse("timeControl.labelsMayDisplayTimesOverAnHour");
-
-debug("");
-debug("Setting timeControl.labelsMayDisplayTimesOverAnHour = true");
-timeControl.labelsMayDisplayTimesOverAnHour = true;
-shouldBeTrue("timeControl.labelsMayDisplayTimesOverAnHour");
-
-timeControl.width = 500;
-debug("");
-shouldBe("timeControl.elapsedTimeLabel.x", "-2");
-shouldBe("timeControl.scrubber.x", "65");
-shouldBe("timeControl.scrubber.width", "362");
-shouldBe("timeControl.remainingTimeLabel.x", "432");
-
-debug("");
-
-</script>
-<script src=""
-</body>
Copied: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels-expected.txt (from rev 213979, trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour-expected.txt) (0 => 213980)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels-expected.txt 2017-03-15 12:42:38 UTC (rev 213980)
@@ -0,0 +1,20 @@
+Testing the TimeControl class property useSixDigitsForTimeLabels.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Testing default value
+PASS timeControl.useSixDigitsForTimeLabels is false
+
+Setting timeControl.useSixDigitsForTimeLabels = true
+PASS timeControl.useSixDigitsForTimeLabels is true
+
+PASS timeControl.elapsedTimeLabel.x is -2
+PASS timeControl.scrubber.x is 65
+PASS timeControl.scrubber.width is 362
+PASS timeControl.remainingTimeLabel.x is 432
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Copied: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels.html (from rev 213979, trunk/LayoutTests/media/modern-media-controls/time-control/time-control-labels-may-display-times-over-an-hour.html) (0 => 213980)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels.html 2017-03-15 12:42:38 UTC (rev 213980)
@@ -0,0 +1,30 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>TimeControl</code> class property useSixDigitsForTimeLabels.");
+
+const timeControl = new TimeControl;
+
+debug("Testing default value");
+shouldBeFalse("timeControl.useSixDigitsForTimeLabels");
+
+debug("");
+debug("Setting timeControl.useSixDigitsForTimeLabels = true");
+timeControl.useSixDigitsForTimeLabels = true;
+shouldBeTrue("timeControl.useSixDigitsForTimeLabels");
+
+timeControl.width = 500;
+debug("");
+shouldBe("timeControl.elapsedTimeLabel.x", "-2");
+shouldBe("timeControl.scrubber.x", "65");
+shouldBe("timeControl.scrubber.width", "362");
+shouldBe("timeControl.remainingTimeLabel.x", "432");
+
+debug("");
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (213979 => 213980)
--- trunk/Source/WebCore/ChangeLog 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/Source/WebCore/ChangeLog 2017-03-15 12:42:38 UTC (rev 213980)
@@ -1,3 +1,31 @@
+2017-03-15 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Always use six digits to display time when overall media duration is an hour or more
+ https://bugs.webkit.org/show_bug.cgi?id=169668
+ <rdar://problem/31059699>
+
+ Reviewed by Dean Jackson.
+
+ Always use six digits to display times when the overall media duration is an hour or more. This
+ ensures that we don't display too much white space around labels when we know we will eventually
+ need six digits to display the full time, but the current time to display is under an hour.
+
+ Test: media/modern-media-controls/time-control/time-control-use-six-digits-for-time-labels.html
+
+ * Modules/modern-media-controls/controls/time-control.js:
+ (TimeControl.prototype.get useSixDigitsForTimeLabels):
+ (TimeControl.prototype.set useSixDigitsForTimeLabels):
+ (TimeControl.prototype.set width):
+ (TimeControl.prototype.get isSufficientlyWide):
+ (TimeControl.prototype._availableWidthHasChanged):
+ (TimeControl.prototype.get labelsMayDisplayTimesOverAnHour): Deleted.
+ (TimeControl.prototype.set labelsMayDisplayTimesOverAnHour): Deleted.
+ * Modules/modern-media-controls/controls/time-label.js:
+ (TimeLabel.prototype._formattedTime):
+ * Modules/modern-media-controls/media/time-labels-support.js:
+ (TimeLabelsSupport.prototype.syncControl):
+ (TimeLabelsSupport):
+
2017-03-15 Dean Jackson <[email protected]>
Sort Xcode project files
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (213979 => 213980)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2017-03-15 12:42:38 UTC (rev 213980)
@@ -41,29 +41,29 @@
layoutDelegate
});
- this.elapsedTimeLabel = new TimeLabel;
+ this._useSixDigitsForTimeLabels = false;
+
+ this.elapsedTimeLabel = new TimeLabel(this);
this.scrubber = new Scrubber(layoutDelegate);
- this.remainingTimeLabel = new TimeLabel;
+ this.remainingTimeLabel = new TimeLabel(this);
this.children = [this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
-
- this._labelsMayDisplayTimesOverAnHour = false;
}
// Public
- get labelsMayDisplayTimesOverAnHour()
+ get useSixDigitsForTimeLabels()
{
- return this._labelsMayDisplayTimesOverAnHour;
+ return this._useSixDigitsForTimeLabels;
}
- set labelsMayDisplayTimesOverAnHour(flag)
+ set useSixDigitsForTimeLabels(flag)
{
- if (this._labelsMayDisplayTimesOverAnHour === flag)
+ if (this._useSixDigitsForTimeLabels === flag)
return;
- this._labelsMayDisplayTimesOverAnHour = flag;
- this.layout();
+ this._useSixDigitsForTimeLabels = flag;
+ this._availableWidthHasChanged();
}
get width()
@@ -74,8 +74,19 @@
set width(width)
{
super.width = width;
+ this._availableWidthHasChanged();
+ }
- const extraWidth = this._labelsMayDisplayTimesOverAnHour ? AdditionalTimeLabelWidthOverAnHour : 0;
+ get isSufficientlyWide()
+ {
+ return this.scrubber.width >= ((this.layoutTraits & LayoutTraits.Compact) ? MinimumScrubberWidthCompact : MinimumScrubberWidthDefault);
+ }
+
+ // Protected
+
+ _availableWidthHasChanged()
+ {
+ const extraWidth = this._useSixDigitsForTimeLabels ? AdditionalTimeLabelWidthOverAnHour : 0;
const elapsedTimeLabelWidth = ElapsedTimeLabelWidth + extraWidth;
const remainingTimeLabelWidth = RemainingTimeLabelWidth + extraWidth;
@@ -82,13 +93,8 @@
this.elapsedTimeLabel.x = ElapsedTimeLabelLeftMargin;
this.elapsedTimeLabel.width = elapsedTimeLabelWidth;
this.scrubber.x = this.elapsedTimeLabel.x + elapsedTimeLabelWidth + ScrubberMargin;
- this.scrubber.width = this._width - elapsedTimeLabelWidth - ScrubberMargin - remainingTimeLabelWidth;
+ this.scrubber.width = this.width - elapsedTimeLabelWidth - ScrubberMargin - remainingTimeLabelWidth;
this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
}
- get isSufficientlyWide()
- {
- return this.scrubber.width >= ((this.layoutTraits & LayoutTraits.Compact) ? MinimumScrubberWidthCompact : MinimumScrubberWidthDefault);
- }
-
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js (213979 => 213980)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js 2017-03-15 12:42:38 UTC (rev 213980)
@@ -26,11 +26,12 @@
class TimeLabel extends LayoutNode
{
- constructor()
+ constructor(timeControl)
{
super(`<div class="time-label"></div>`);
this.value = 0;
+ this._timeControl = timeControl;
}
// Public
@@ -70,7 +71,7 @@
const intHours = Math.floor(absTime / (60 * 60)).toFixed(0);
const timeStrings = [intMinutes, intSeconds];
- if (intHours > 0)
+ if (intHours > 0 || (this._timeControl && this._timeControl.useSixDigitsForTimeLabels))
timeStrings.unshift(intHours);
const sign = time < 0 ? "-" : "";
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js (213979 => 213980)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js 2017-03-15 10:19:04 UTC (rev 213979)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/time-labels-support.js 2017-03-15 12:42:38 UTC (rev 213980)
@@ -45,7 +45,7 @@
this.control.elapsedTimeLabel.value = shouldShowZeroDurations ? 0 : media.currentTime;
this.control.remainingTimeLabel.value = shouldShowZeroDurations ? 0 : (media.currentTime - media.duration);
- this.control.labelsMayDisplayTimesOverAnHour = !shouldShowZeroDurations && media.duration >= (60 * 60);
+ this.control.useSixDigitsForTimeLabels = !shouldShowZeroDurations && media.duration >= (60 * 60);
}
}
