Modified: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt (280241 => 280242)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt 2021-07-23 11:03:48 UTC (rev 280241)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt 2021-07-23 11:39:35 UTC (rev 280242)
@@ -8,6 +8,7 @@
PASS timeControl.elapsedTimeLabel is an instance of TimeLabel
PASS timeControl.scrubber is an instance of Slider
+PASS timeControl.durationTimeLabel is an instance of TimeLabel
PASS timeControl.remainingTimeLabel is an instance of TimeLabel
timeControl.width = 500;
@@ -14,12 +15,56 @@
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.durationTimeLabel
+PASS timeControl.elapsedTimeLabel.x is 0
+PASS timeControl.elapsedTimeLabel.visible is true
+PASS timeControl.scrubber.x is 32
+PASS timeControl.scrubber.width is 436
+PASS timeControl.durationTimeLabel.x is 473
+
+timeControl.width = 100;
+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
+PASS timeControl.elapsedTimeLabel.visible is false
+PASS timeControl.scrubber.x is 0
+PASS timeControl.scrubber.width is 62
+PASS timeControl.remainingTimeLabel.x is 67
+
+timeControl.width = 200;
+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.durationTimeLabel
PASS timeControl.elapsedTimeLabel.x is 0
+PASS timeControl.elapsedTimeLabel.visible is true
PASS timeControl.scrubber.x is 32
-PASS timeControl.scrubber.width is 430
-PASS timeControl.remainingTimeLabel.x is 467
+PASS timeControl.scrubber.width is 136
+PASS timeControl.durationTimeLabel.x is 173
+timeControl.durationTimeLabel.element.click();
+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
+PASS timeControl.elapsedTimeLabel.x is 0
+PASS timeControl.elapsedTimeLabel.visible is true
+PASS timeControl.scrubber.x is 32
+PASS timeControl.scrubber.width is 130
+PASS timeControl.remainingTimeLabel.x is 167
+
+timeControl.remainingTimeLabel.element.click();
+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.durationTimeLabel
+PASS timeControl.elapsedTimeLabel.x is 0
+PASS timeControl.elapsedTimeLabel.visible is true
+PASS timeControl.scrubber.x is 32
+PASS timeControl.scrubber.width is 136
+PASS timeControl.durationTimeLabel.x is 173
+
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html (280241 => 280242)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html 2021-07-23 11:03:48 UTC (rev 280241)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html 2021-07-23 11:39:35 UTC (rev 280242)
@@ -5,7 +5,7 @@
description("Testing the <code>TimeControl</code> class.");
-const timeControl = new TimeControl({ layoutTraits: new IOSLayoutTraits(LayoutTraits.Mode.Inline) });
+const timeControl = new TimeControl({ layoutTraits: new MacOSLayoutTraits(LayoutTraits.Mode.Inline) });
shouldBeEqualToString("timeControl.element.localName", "div");
shouldBeEqualToString("timeControl.element.className", "time-control");
@@ -13,22 +13,80 @@
debug("");
shouldBeType("timeControl.elapsedTimeLabel", "TimeLabel");
shouldBeType("timeControl.scrubber", "Slider");
+shouldBeType("timeControl.durationTimeLabel", "TimeLabel");
shouldBeType("timeControl.remainingTimeLabel", "TimeLabel");
debug("");
debug("timeControl.width = 500;");
timeControl.width = 500;
+scheduler.flushScheduledLayoutCallbacks();
shouldBe("timeControl.children.length", "3");
shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
shouldBe("timeControl.children[1]", "timeControl.scrubber");
+shouldBe("timeControl.children[2]", "timeControl.durationTimeLabel");
+shouldBe("timeControl.elapsedTimeLabel.x", "0");
+shouldBe("timeControl.elapsedTimeLabel.visible", "true");
+shouldBe("timeControl.scrubber.x", "32");
+shouldBe("timeControl.scrubber.width", "436");
+shouldBe("timeControl.durationTimeLabel.x", "473");
+
+debug("");
+debug("timeControl.width = 100;");
+timeControl.width = 100;
+scheduler.flushScheduledLayoutCallbacks();
+shouldBe("timeControl.children.length", "3");
+shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
+shouldBe("timeControl.children[1]", "timeControl.scrubber");
shouldBe("timeControl.children[2]", "timeControl.remainingTimeLabel");
+shouldBe("timeControl.elapsedTimeLabel.visible", "false");
+shouldBe("timeControl.scrubber.x", "0");
+shouldBe("timeControl.scrubber.width", "62");
+shouldBe("timeControl.remainingTimeLabel.x", "67");
+
+debug("");
+debug("timeControl.width = 200;");
+timeControl.width = 200;
+scheduler.flushScheduledLayoutCallbacks();
+shouldBe("timeControl.children.length", "3");
+shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
+shouldBe("timeControl.children[1]", "timeControl.scrubber");
+shouldBe("timeControl.children[2]", "timeControl.durationTimeLabel");
shouldBe("timeControl.elapsedTimeLabel.x", "0");
+shouldBe("timeControl.elapsedTimeLabel.visible", "true");
shouldBe("timeControl.scrubber.x", "32");
-shouldBe("timeControl.scrubber.width", "430");
-shouldBe("timeControl.remainingTimeLabel.x", "467");
+shouldBe("timeControl.scrubber.width", "136");
+shouldBe("timeControl.durationTimeLabel.x", "173");
debug("");
+debug("timeControl.durationTimeLabel.element.click();");
+timeControl.durationTimeLabel.element.click()
+scheduler.flushScheduledLayoutCallbacks();
+shouldBe("timeControl.children.length", "3");
+shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
+shouldBe("timeControl.children[1]", "timeControl.scrubber");
+shouldBe("timeControl.children[2]", "timeControl.remainingTimeLabel");
+shouldBe("timeControl.elapsedTimeLabel.x", "0");
+shouldBe("timeControl.elapsedTimeLabel.visible", "true");
+shouldBe("timeControl.scrubber.x", "32");
+shouldBe("timeControl.scrubber.width", "130");
+shouldBe("timeControl.remainingTimeLabel.x", "167");
+debug("");
+debug("timeControl.remainingTimeLabel.element.click();");
+timeControl.remainingTimeLabel.element.click();
+scheduler.flushScheduledLayoutCallbacks();
+shouldBe("timeControl.children.length", "3");
+shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
+shouldBe("timeControl.children[1]", "timeControl.scrubber");
+shouldBe("timeControl.children[2]", "timeControl.durationTimeLabel");
+shouldBe("timeControl.elapsedTimeLabel.x", "0");
+shouldBe("timeControl.elapsedTimeLabel.visible", "true");
+shouldBe("timeControl.scrubber.x", "32");
+shouldBe("timeControl.scrubber.width", "136");
+shouldBe("timeControl.durationTimeLabel.x", "173");
+
+debug("");
+
</script>
<script src=""
</body>
Modified: trunk/Source/WebCore/ChangeLog (280241 => 280242)
--- trunk/Source/WebCore/ChangeLog 2021-07-23 11:03:48 UTC (rev 280241)
+++ trunk/Source/WebCore/ChangeLog 2021-07-23 11:39:35 UTC (rev 280242)
@@ -1,3 +1,30 @@
+2021-07-23 Devin Rousso <[email protected]>
+
+ [Modern Media Controls] [macOS] Only show total duration when the elapsed time is visible
+ https://bugs.webkit.org/show_bug.cgi?id=228191
+ <rdar://problem/80529918>
+
+ Reviewed by Eric Carlson.
+
+ When a `<video>` is narrow (~250px) WebKit will drop the elapsed time, meaning that only the
+ scrubber and duration are visible. It's not very helpful to show just the duration because
+ it never changes, requiring the user to do the mental math of dividing the scrubber width
+ by the total duration to figure out how much time is left (and has elapsed). Showing the
+ remaining time is better because it at least helps the user not have to figure out how much
+ longer the `<video>` will play (which is more useful/actionable than knowing the duration).
+
+ Test: media/modern-media-controls/time-control/time-control.html
+
+ * Modules/modern-media-controls/controls/time-control.js:
+ (TimeControl):
+ (TimeControl.prototype.handleEvent):
+ (TimeControl.prototype.get _canShowDurationTimeLabel): Added.
+ (TimeControl.prototype._durationOrRemainingTimeLabel):
+ (TimeControl.prototype._performIdealLayout):
+ Rename `_showDurationTimeLabel` to `_shouldShowDurationTimeLabel` and add another private
+ getter `_canShowDurationTimeLabel` that only is true when `this.elapsedTimeLabel.visible`.
+ Use both to decide whether duration or remaining is shown/updated/etc..
+
2021-07-23 Philippe Normand <[email protected]>
[GLib] Remove libportal dependency
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (280241 => 280242)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2021-07-23 11:03:48 UTC (rev 280241)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2021-07-23 11:39:35 UTC (rev 280242)
@@ -39,9 +39,11 @@
layoutDelegate
});
+ this._shouldShowDurationTimeLabel = this.layoutTraits.supportsDurationTimeLabel();
+
this.elapsedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
this.scrubber = new Slider("scrubber", this.layoutTraits.knobStyleForScrubber());
- if (this.layoutTraits.supportsDurationTimeLabel())
+ if (this._shouldShowDurationTimeLabel)
this.durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
this.remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
@@ -55,8 +57,7 @@
this._currentTime = 0;
this._loading = false;
- this._showDurationTimeLabel = this.layoutTraits.supportsDurationTimeLabel();
- if (this._showDurationTimeLabel) {
+ if (this._shouldShowDurationTimeLabel) {
this.durationTimeLabel.element.addEventListener("click", this);
this.remainingTimeLabel.element.addEventListener("click", this);
}
@@ -140,13 +141,15 @@
case "click":
switch (event.target) {
case this.durationTimeLabel.element:
- this._showDurationTimeLabel = false;
+ this._shouldShowDurationTimeLabel = false;
this.needsLayout = true;
break;
case this.remainingTimeLabel.element:
- this._showDurationTimeLabel = true;
- this.needsLayout = true;
+ if (this._canShowDurationTimeLabel) {
+ this._shouldShowDurationTimeLabel = true;
+ this.needsLayout = true;
+ }
break;
}
}
@@ -154,9 +157,14 @@
// Private
+ get _canShowDurationTimeLabel()
+ {
+ return this.elapsedTimeLabel.visible;
+ }
+
_durationOrRemainingTimeLabel()
{
- return this._showDurationTimeLabel ? this.durationTimeLabel : this.remainingTimeLabel;
+ return (this._canShowDurationTimeLabel && this._shouldShowDurationTimeLabel) ? this.durationTimeLabel : this.remainingTimeLabel;
}
_performIdealLayout()
@@ -177,7 +185,7 @@
numberOfDigitsForTimeLabels = 6;
this.elapsedTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._currentTime, numberOfDigitsForTimeLabels);
- if (this._showDurationTimeLabel)
+ if (this._canShowDurationTimeLabel && this._shouldShowDurationTimeLabel)
this.durationTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._duration, numberOfDigitsForTimeLabels);
else
this.remainingTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._currentTime - this._duration, numberOfDigitsForTimeLabels);
