Diff
Modified: trunk/LayoutTests/ChangeLog (272372 => 272373)
--- trunk/LayoutTests/ChangeLog 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/ChangeLog 2021-02-04 17:39:28 UTC (rev 272373)
@@ -1,3 +1,23 @@
+2021-02-04 Devin Rousso <drou...@apple.com>
+
+ [macOS] Default to showing the total duration, only switching to time remaining when clicked
+ https://bugs.webkit.org/show_bug.cgi?id=221364
+
+ Reviewed by Eric Carlson.
+
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html:
+ * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt:
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt:
+ * media/modern-media-controls/time-label/ios-time-label.html:
+ * media/modern-media-controls/time-label/ios-time-label-expected.txt:
+ * media/modern-media-controls/time-label/time-label.html:
+ * media/modern-media-controls/time-label/time-label-expected.txt:
+ * media/modern-media-controls/time-labels-support/remaining-time.html:
+
2021-02-04 Nikita Vasilyev <nvasil...@apple.com>
Web Inspector: Collapse blackboxed call frames in Sources
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt 2021-02-04 17:39:28 UTC (rev 272373)
@@ -8,7 +8,7 @@
PASS window.getComputedStyle(mediaControls.timeControl.element).top is "49px"
PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "0px"
PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).fontSize is "12px"
-PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).fontSize is "12px"
+PASS window.getComputedStyle(mediaControls.timeControl.durationTimeLabel.element).fontSize is "12px"
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html 2021-02-04 17:39:28 UTC (rev 272373)
@@ -16,7 +16,7 @@
shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.element).top", "49px");
shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "0px");
shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).fontSize", "12px");
- shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).fontSize", "12px");
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.durationTimeLabel.element).fontSize", "12px");
debug("");
mediaControls.element.remove();
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt 2021-02-04 17:39:28 UTC (rev 272373)
@@ -24,7 +24,7 @@
PASS mediaControls.timeControl.children.length is 3
PASS mediaControls.timeControl.children[0] is mediaControls.timeControl.elapsedTimeLabel
PASS mediaControls.timeControl.children[1] is mediaControls.timeControl.scrubber
-PASS mediaControls.timeControl.children[2] is mediaControls.timeControl.remainingTimeLabel
+PASS mediaControls.timeControl.children[2] is mediaControls.timeControl.durationTimeLabel
PASS mediaControls.rightContainer.children.length is 3
PASS mediaControls.rightContainer.children[0] is mediaControls.muteButton
PASS mediaControls.rightContainer.children[1] is mediaControls.airplayButton
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html 2021-02-04 17:39:28 UTC (rev 272373)
@@ -50,7 +50,7 @@
shouldBe("mediaControls.timeControl.children.length", "3");
shouldBe("mediaControls.timeControl.children[0]", "mediaControls.timeControl.elapsedTimeLabel");
shouldBe("mediaControls.timeControl.children[1]", "mediaControls.timeControl.scrubber");
- shouldBe("mediaControls.timeControl.children[2]", "mediaControls.timeControl.remainingTimeLabel");
+ shouldBe("mediaControls.timeControl.children[2]", "mediaControls.timeControl.durationTimeLabel");
shouldBe("mediaControls.rightContainer.children.length", "3");
shouldBe("mediaControls.rightContainer.children[0]", "mediaControls.muteButton");
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt 2021-02-04 17:39:28 UTC (rev 272373)
@@ -5,7 +5,7 @@
PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "0px"
PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top is "8px"
-PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top is "8px"
+PASS window.getComputedStyle(mediaControls.timeControl.durationTimeLabel.element).top is "8px"
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html 2021-02-04 17:39:28 UTC (rev 272373)
@@ -16,7 +16,7 @@
shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "0px");
shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top", "8px");
- shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top", "8px");
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.durationTimeLabel.element).top", "8px");
debug("");
mediaControls.element.remove();
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt 2021-02-04 17:39:28 UTC (rev 272373)
@@ -5,13 +5,13 @@
PASS ready() became true
-SkipForwardButton was dropped at 488.
-SkipBackButton was dropped at 459.
-AirplayButton was dropped at 430.
-TracksButton was dropped at 398.
-PiPButton was dropped at 366.
-FullscreenButton was dropped at 331.
-MuteButton was dropped at 300.
+SkipForwardButton was dropped at 482.
+SkipBackButton was dropped at 453.
+AirplayButton was dropped at 424.
+TracksButton was dropped at 392.
+PiPButton was dropped at 360.
+FullscreenButton was dropped at 325.
+MuteButton was dropped at 294.
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt 2021-02-04 17:39:28 UTC (rev 272373)
@@ -14,26 +14,35 @@
PASS elaspedLabel is "Elapsed"
PASS remainingLabel is "Remaining"
+PASS durationLabel is "Duration"
elapsedTimeLabels[3].element.textContent = 0:01
elapsedTimeLabels[3].width = 27
remainingTimeLabels[3].element.textContent = -0:01
remainingTimeLabels[3].width = 33
+durationTimeLabels[3].element.textContent = 0:01
+durationTimeLabels[3].width = 27
elapsedTimeLabels[4].element.textContent = 00:01
elapsedTimeLabels[4].width = 35
remainingTimeLabels[4].element.textContent = -00:01
remainingTimeLabels[4].width = 40
+durationTimeLabels[4].element.textContent = 00:01
+durationTimeLabels[4].width = 35
elapsedTimeLabels[5].element.textContent = 0:00:01
elapsedTimeLabels[5].width = 46
remainingTimeLabels[5].element.textContent = -0:00:01
remainingTimeLabels[5].width = 52
+durationTimeLabels[5].element.textContent = 0:00:01
+durationTimeLabels[5].width = 46
elapsedTimeLabels[6].element.textContent = 00:00:01
elapsedTimeLabels[6].width = 54
remainingTimeLabels[6].element.textContent = -00:00:01
remainingTimeLabels[6].width = 59
+durationTimeLabels[6].element.textContent = 00:00:01
+durationTimeLabels[6].width = 54
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html 2021-02-04 17:39:28 UTC (rev 272373)
@@ -22,18 +22,25 @@
const digits = [3, 4, 5, 6];
let elapsedTimeLabels = new Map;
let remainingTimeLabels = new Map;
+let durationTimeLabels = new Map;
for (let numberOfDigits of digits) {
- elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Elapsed);
+ elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Elapsed);
elapsedTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
- remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Remaining);
+ remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Remaining);
remainingTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
+ durationTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Duration);
+ durationTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
}
-const remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
+const durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
+durationTimeLabel.element.id = "duration";
+durationTimeLabel.setValueWithNumberOfDigits(0, 4);
+
+const remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
remainingTimeLabel.element.id = "remaining";
remainingTimeLabel.setValueWithNumberOfDigits(0, 4);
-const elaspedTimeLabel = new TimeLabel(TimeLabel.Types.Elasped);
+const elaspedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
elaspedTimeLabel.element.id = "elasped";
elaspedTimeLabel.setValueWithNumberOfDigits(0, 4);
@@ -40,9 +47,11 @@
let style;
let elaspedLabel;
let remainingLabel;
+let durationLabel;
scheduler.frameDidFire = function()
{
document.body.appendChild(timeLabel.element);
+ document.body.appendChild(durationTimeLabel.element);
document.body.appendChild(remainingTimeLabel.element);
document.body.appendChild(elaspedTimeLabel.element);
@@ -59,10 +68,13 @@
elaspedLabel = elaspedTimeLabel.element.getAttribute("aria-label").split(":")[0];
remainingLabel = remainingTimeLabel.element.getAttribute("aria-label").split(":")[0];
+ durationLabel = durationTimeLabel.element.getAttribute("aria-label").split(":")[0];
shouldBeEqualToString("elaspedLabel", "Elapsed");
shouldBeEqualToString("remainingLabel", "Remaining");
+ shouldBeEqualToString("durationLabel", "Duration");
timeLabel.element.remove();
+ durationTimeLabel.element.remove();
remainingTimeLabel.element.remove();
elaspedTimeLabel.element.remove();
@@ -72,6 +84,8 @@
debug(`elapsedTimeLabels[${numberOfDigits}].width = ${elapsedTimeLabels[numberOfDigits].width}`);
debug(`remainingTimeLabels[${numberOfDigits}].element.textContent = ${remainingTimeLabels[numberOfDigits].element.textContent}`);
debug(`remainingTimeLabels[${numberOfDigits}].width = ${remainingTimeLabels[numberOfDigits].width}`);
+ debug(`durationTimeLabels[${numberOfDigits}].element.textContent = ${durationTimeLabels[numberOfDigits].element.textContent}`);
+ debug(`durationTimeLabels[${numberOfDigits}].width = ${durationTimeLabels[numberOfDigits].width}`);
}
debug("");
Modified: trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt 2021-02-04 17:39:28 UTC (rev 272373)
@@ -14,6 +14,8 @@
PASS elaspedLabel is "Elapsed"
PASS remainingLabel is "Remaining"
+PASS durationLabel is "Duration"
+PASS accessibilityController.accessibleElementById('duration').role is "AXRole: AXStaticText"
PASS accessibilityController.accessibleElementById('remaining').role is "AXRole: AXStaticText"
PASS accessibilityController.accessibleElementById('elasped').role is "AXRole: AXStaticText"
@@ -21,21 +23,29 @@
elapsedTimeLabels[3].width = 27
remainingTimeLabels[3].element.textContent = -0:01
remainingTimeLabels[3].width = 33
+durationTimeLabels[3].element.textContent = 0:01
+durationTimeLabels[3].width = 27
elapsedTimeLabels[4].element.textContent = 00:01
elapsedTimeLabels[4].width = 35
remainingTimeLabels[4].element.textContent = -00:01
remainingTimeLabels[4].width = 40
+durationTimeLabels[4].element.textContent = 00:01
+durationTimeLabels[4].width = 35
elapsedTimeLabels[5].element.textContent = 0:00:01
elapsedTimeLabels[5].width = 46
remainingTimeLabels[5].element.textContent = -0:00:01
remainingTimeLabels[5].width = 52
+durationTimeLabels[5].element.textContent = 0:00:01
+durationTimeLabels[5].width = 46
elapsedTimeLabels[6].element.textContent = 00:00:01
elapsedTimeLabels[6].width = 54
remainingTimeLabels[6].element.textContent = -00:00:01
remainingTimeLabels[6].width = 59
+durationTimeLabels[6].element.textContent = 00:00:01
+durationTimeLabels[6].width = 54
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html 2021-02-04 17:39:28 UTC (rev 272373)
@@ -14,8 +14,6 @@
shouldBeEqualToString("timeLabel.element.localName", "div");
shouldBeEqualToString("timeLabel.element.className", "time-label");
-timeLabel.element.id = "elasped";
-
const NaNTimeLabel = new TimeLabel;
NaNTimeLabel.setValueWithNumberOfDigits(NaN, 4);
@@ -22,18 +20,25 @@
const digits = [3, 4, 5, 6];
let elapsedTimeLabels = new Map;
let remainingTimeLabels = new Map;
+let durationTimeLabels = new Map;
for (let numberOfDigits of digits) {
- elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Elapsed);
+ elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Elapsed);
elapsedTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
- remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Remaining);
+ remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Remaining);
remainingTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
+ durationTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Duration);
+ durationTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
}
-const remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
+const durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
+durationTimeLabel.element.id = "duration";
+durationTimeLabel.setValueWithNumberOfDigits(0, 4);
+
+const remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
remainingTimeLabel.element.id = "remaining";
remainingTimeLabel.setValueWithNumberOfDigits(0, 4);
-const elaspedTimeLabel = new TimeLabel(TimeLabel.Types.Elasped);
+const elaspedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
elaspedTimeLabel.element.id = "elasped";
elaspedTimeLabel.setValueWithNumberOfDigits(0, 4);
@@ -40,9 +45,11 @@
let style;
let elaspedLabel;
let remainingLabel;
+let durationLabel;
scheduler.frameDidFire = function()
{
document.body.appendChild(timeLabel.element);
+ document.body.appendChild(durationTimeLabel.element);
document.body.appendChild(remainingTimeLabel.element);
document.body.appendChild(elaspedTimeLabel.element);
@@ -59,11 +66,15 @@
elaspedLabel = elaspedTimeLabel.element.getAttribute("aria-label").split(":")[0];
remainingLabel = remainingTimeLabel.element.getAttribute("aria-label").split(":")[0];
+ durationLabel = durationTimeLabel.element.getAttribute("aria-label").split(":")[0];
shouldBeEqualToString("elaspedLabel", "Elapsed");
shouldBeEqualToString("remainingLabel", "Remaining");
+ shouldBeEqualToString("durationLabel", "Duration");
+ shouldBeEqualToString("accessibilityController.accessibleElementById('duration').role", "AXRole: AXStaticText");
shouldBeEqualToString("accessibilityController.accessibleElementById('remaining').role", "AXRole: AXStaticText");
shouldBeEqualToString("accessibilityController.accessibleElementById('elasped').role", "AXRole: AXStaticText");
timeLabel.element.remove();
+ durationTimeLabel.element.remove();
remainingTimeLabel.element.remove();
elaspedTimeLabel.element.remove();
@@ -73,6 +84,8 @@
debug(`elapsedTimeLabels[${numberOfDigits}].width = ${elapsedTimeLabels[numberOfDigits].width}`);
debug(`remainingTimeLabels[${numberOfDigits}].element.textContent = ${remainingTimeLabels[numberOfDigits].element.textContent}`);
debug(`remainingTimeLabels[${numberOfDigits}].width = ${remainingTimeLabels[numberOfDigits].width}`);
+ debug(`durationTimeLabels[${numberOfDigits}].element.textContent = ${durationTimeLabels[numberOfDigits].element.textContent}`);
+ debug(`durationTimeLabels[${numberOfDigits}].width = ${durationTimeLabels[numberOfDigits].width}`);
}
debug("");
Modified: trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html (272372 => 272373)
--- trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html 2021-02-04 17:39:28 UTC (rev 272373)
@@ -13,6 +13,8 @@
const media = document.querySelector("video");
const mediaController = createControls(shadowRoot, media, null);
+mediaController.controls.timeControl.durationTimeLabel?.element.click();
+
media.addEventListener("timeupdate", (event) => {
debug("");
debug("timeupdate event was dispatched");
Modified: trunk/Source/WebCore/ChangeLog (272372 => 272373)
--- trunk/Source/WebCore/ChangeLog 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/Source/WebCore/ChangeLog 2021-02-04 17:39:28 UTC (rev 272373)
@@ -1,3 +1,32 @@
+2021-02-04 Devin Rousso <drou...@apple.com>
+
+ [macOS] Default to showing the total duration, only switching to time remaining when clicked
+ https://bugs.webkit.org/show_bug.cgi?id=221364
+
+ Reviewed by Eric Carlson.
+
+ * Modules/modern-media-controls/controls/time-label.js:
+ (TimeLabel.prototype.setValueWithNumberOfDigits):
+ (TimeLabel.prototype.commitProperty):
+ (TimeLabel.prototype._formattedTime):
+ Add `TimeLabel.Type.Duration`.
+ Drive-by: rename `Types` to `Type` as most enums are singular.
+
+ * Modules/modern-media-controls/controls/time-control.js:
+ (TimeControl):
+ (TimeControl.prototype.get minimumWidth):
+ (TimeControl.prototype.get idealMinimumWidth):
+ (TimeControl.prototype.layout):
+ (TimeControl.prototype.handleEvent): Added.
+ (TimeControl.prototype._durationOrRemainingTimeLabel): Added.
+ (TimeControl.prototype._performIdealLayout):
+ Add another `TimeLabel` with the new `TimeLabel.Type.Duration` that is used instead of the
+ existing `TimeLabel.Type.Remaining` after the latter has been clicked (and the former has
+ not also been clicked to switch back).
+
+ * en.lproj/modern-media-controls-localized-strings.js:
+ Add `"Duration"`.
+
2021-02-04 Antti Koivisto <an...@apple.com>
Remove the Timer from Style::Scope
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (272372 => 272373)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2021-02-04 17:39:28 UTC (rev 272373)
@@ -39,9 +39,11 @@
layoutDelegate
});
- this.elapsedTimeLabel = new TimeLabel(TimeLabel.Types.Elapsed);
+ this.elapsedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
this.scrubber = new Slider("scrubber", this.layoutTraits & LayoutTraits.macOS ? Slider.KnobStyle.Bar : Slider.KnobStyle.Circle);
- this.remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
+ if (this.layoutTraits & LayoutTraits.macOS)
+ this.durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
+ this.remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
this.activityIndicator = new LayoutNode(`<div class="activity-indicator"></div>`);
this.activityIndicator.width = 14;
@@ -52,6 +54,12 @@
this._duration = 0;
this._currentTime = 0;
this._loading = false;
+
+ this._showDurationTimeLabel = this.layoutTraits & LayoutTraits.macOS;
+ if (this._showDurationTimeLabel) {
+ this.durationTimeLabel.element.addEventListener("click", this);
+ this.remainingTimeLabel.element.addEventListener("click", this);
+ }
}
// Public
@@ -92,13 +100,13 @@
get minimumWidth()
{
this._performIdealLayout();
- return MinimumScrubberWidth + ScrubberMargin + this.remainingTimeLabel.width;
+ return MinimumScrubberWidth + ScrubberMargin + this._durationOrRemainingTimeLabel().width;
}
get idealMinimumWidth()
{
this._performIdealLayout();
- return this.elapsedTimeLabel.width + ScrubberMargin + MinimumScrubberWidth + ScrubberMargin + this.remainingTimeLabel.width;
+ return this.elapsedTimeLabel.width + ScrubberMargin + MinimumScrubberWidth + ScrubberMargin + this._durationOrRemainingTimeLabel().width;
}
// Protected
@@ -116,20 +124,45 @@
return;
}
+ let durationOrRemainingTimeLabel = this._durationOrRemainingTimeLabel();
+
// We drop the elapsed time label if width is constrained and we can't guarantee
// the scrubber minimum size otherwise.
this.scrubber.x = 0;
- this.scrubber.width = this.width - ScrubberMargin - this.remainingTimeLabel.width;
- this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
+ this.scrubber.width = this.width - ScrubberMargin - durationOrRemainingTimeLabel.width;
+ durationOrRemainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
this.elapsedTimeLabel.visible = false;
}
+ handleEvent(event)
+ {
+ switch (event.type) {
+ case "click":
+ switch (event.target) {
+ case this.durationTimeLabel.element:
+ this._showDurationTimeLabel = false;
+ this.needsLayout = true;
+ break;
+
+ case this.remainingTimeLabel.element:
+ this._showDurationTimeLabel = true;
+ this.needsLayout = true;
+ break;
+ }
+ }
+ }
+
// Private
+ _durationOrRemainingTimeLabel()
+ {
+ return this._showDurationTimeLabel ? this.durationTimeLabel : this.remainingTimeLabel;
+ }
+
_performIdealLayout()
{
if (this._loading)
- this.remainingTimeLabel.setValueWithNumberOfDigits(NaN, 4);
+ this._durationOrRemainingTimeLabel().setValueWithNumberOfDigits(NaN, 4);
else {
const shouldShowZeroDurations = isNaN(this._duration) || this._duration === Number.POSITIVE_INFINITY;
@@ -144,17 +177,22 @@
numberOfDigitsForTimeLabels = 6;
this.elapsedTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._currentTime, numberOfDigitsForTimeLabels);
- this.remainingTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : (this._currentTime - this._duration), numberOfDigitsForTimeLabels);
+ if (this._showDurationTimeLabel)
+ this.durationTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._duration, numberOfDigitsForTimeLabels);
+ else
+ this.remainingTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._currentTime - this._duration, numberOfDigitsForTimeLabels);
}
if (this._duration)
this.scrubber.value = this._currentTime / this._duration;
+ let durationOrRemainingTimeLabel = this._durationOrRemainingTimeLabel();
+
this.scrubber.x = (this._loading ? this.activityIndicator.width : this.elapsedTimeLabel.width) + ScrubberMargin;
- this.scrubber.width = this.width - this.scrubber.x - ScrubberMargin - this.remainingTimeLabel.width;
- this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
+ this.scrubber.width = this.width - this.scrubber.x - ScrubberMargin - durationOrRemainingTimeLabel.width;
+ durationOrRemainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
- this.children = [this._loading ? this.activityIndicator : this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
+ this.children = [this._loading ? this.activityIndicator : this.elapsedTimeLabel, this.scrubber, durationOrRemainingTimeLabel];
}
updateScrubberLabel()
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js (272372 => 272373)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js 2021-02-04 17:39:28 UTC (rev 272373)
@@ -59,7 +59,7 @@
{
this._value = value;
this._numberOfDigits = numberOfDigits;
- this.width = WidthsForDigits[this._numberOfDigits] + (this._type === TimeLabel.Types.Remaining && !isNaN(this._value) ? MinusSignWidthsForDigits[this._numberOfDigits] : 0);
+ this.width = WidthsForDigits[this._numberOfDigits] + (this._type === TimeLabel.Type.Remaining && !isNaN(this._value) ? MinusSignWidthsForDigits[this._numberOfDigits] : 0);
this.markDirtyProperty("value");
}
@@ -69,9 +69,22 @@
{
if (propertyName === "value") {
this.element.textContent = this._formattedTime();
+
const timeAsString = formattedStringForDuration(this.value);
- const ariaLabel = (this._type === TimeLabel.Types.Remaining) ? UIString("Remaining") : UIString("Elapsed");
- this.element.setAttribute("aria-label", `${ariaLabel}: ${timeAsString}`);
+ switch (this._type) {
+ case TimeLabel.Type.Elapsed:
+ this.element.setAttribute("aria-label", `${UIString("Elapsed")}: ${timeAsString}`);
+ break;
+
+ case TimeLabel.Type.Remaining:
+ this.element.setAttribute("aria-label", `${UIString("Remaining")}: ${timeAsString}`);
+ break;
+
+ case TimeLabel.Type.Duration:
+ this.element.setAttribute("aria-label", `${UIString("Duration")}: ${timeAsString}`);
+ break;
+ }
+
if (this.parent instanceof TimeControl)
this.parent.updateScrubberLabel();
}
@@ -98,7 +111,7 @@
else if (this._numberOfDigits == 6)
timeComponents = [doubleDigits(time.hours), doubleDigits(time.minutes), doubleDigits(time.seconds)];
- return (this._type === TimeLabel.Types.Remaining ? "-" : "") + timeComponents.join(":");
+ return (this._type === TimeLabel.Type.Remaining ? "-" : "") + timeComponents.join(":");
}
}
@@ -110,7 +123,8 @@
return `${x}`;
}
-TimeLabel.Types = {
+TimeLabel.Type = {
Elapsed: 0,
- Remaining: 1
+ Remaining: 1,
+ Duration: 2,
};
Modified: trunk/Source/WebCore/en.lproj/modern-media-controls-localized-strings.js (272372 => 272373)
--- trunk/Source/WebCore/en.lproj/modern-media-controls-localized-strings.js 2021-02-04 17:34:56 UTC (rev 272372)
+++ trunk/Source/WebCore/en.lproj/modern-media-controls-localized-strings.js 2021-02-04 17:39:28 UTC (rev 272373)
@@ -3,6 +3,7 @@
"Apple TV": "Apple TV",
"Audio": "Audio",
"Audio Controls": "Audio Controls",
+ "Duration": "Duration",
"Enter Full Screen": "Enter Full Screen",
"Enter Picture in Picture": "Enter Picture in Picture",
"Elapsed": "Elapsed",
