Changeset 272373 in webkit


Ignore:
Timestamp:
Feb 4, 2021 9:39:28 AM (18 months ago)
Author:
Devin Rousso
Message:

[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.

Source/WebCore:

  • 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".

LayoutTests:

  • 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:
Location:
trunk
Files:
17 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r272371 r272373  
     12021-02-04  Devin Rousso  <drousso@apple.com>
     2
     3        [macOS] Default to showing the total duration, only switching to time remaining when clicked
     4        https://bugs.webkit.org/show_bug.cgi?id=221364
     5
     6        Reviewed by Eric Carlson.
     7
     8        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html:
     9        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt:
     10        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html:
     11        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt:
     12        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html:
     13        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt:
     14        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt:
     15        * media/modern-media-controls/time-label/ios-time-label.html:
     16        * media/modern-media-controls/time-label/ios-time-label-expected.txt:
     17        * media/modern-media-controls/time-label/time-label.html:
     18        * media/modern-media-controls/time-label/time-label-expected.txt:
     19        * media/modern-media-controls/time-labels-support/remaining-time.html:
     20
    1212021-02-04  Nikita Vasilyev  <nvasilyev@apple.com>
    222

  • trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt

    r227968 r272373  
    99PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "0px"
    1010PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).fontSize is "12px"
    11 PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).fontSize is "12px"
     11PASS window.getComputedStyle(mediaControls.timeControl.durationTimeLabel.element).fontSize is "12px"
    1212
    1313PASS successfullyParsed is true

  • trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html

    r227968 r272373  
    1717    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "0px");
    1818    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).fontSize", "12px");
    19     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).fontSize", "12px");
     19    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.durationTimeLabel.element).fontSize", "12px");
    2020    debug("");
    2121

  • trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt

    r227953 r272373  
    2525PASS mediaControls.timeControl.children[0] is mediaControls.timeControl.elapsedTimeLabel
    2626PASS mediaControls.timeControl.children[1] is mediaControls.timeControl.scrubber
    27 PASS mediaControls.timeControl.children[2] is mediaControls.timeControl.remainingTimeLabel
     27PASS mediaControls.timeControl.children[2] is mediaControls.timeControl.durationTimeLabel
    2828PASS mediaControls.rightContainer.children.length is 3
    2929PASS mediaControls.rightContainer.children[0] is mediaControls.muteButton

  • trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html

    r227953 r272373  
    5151    shouldBe("mediaControls.timeControl.children[0]", "mediaControls.timeControl.elapsedTimeLabel");
    5252    shouldBe("mediaControls.timeControl.children[1]", "mediaControls.timeControl.scrubber");
    53     shouldBe("mediaControls.timeControl.children[2]", "mediaControls.timeControl.remainingTimeLabel");
     53    shouldBe("mediaControls.timeControl.children[2]", "mediaControls.timeControl.durationTimeLabel");
    5454
    5555    shouldBe("mediaControls.rightContainer.children.length", "3");

  • trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt

    r227953 r272373  
    66PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "0px"
    77PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top is "8px"
    8 PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top is "8px"
     8PASS window.getComputedStyle(mediaControls.timeControl.durationTimeLabel.element).top is "8px"
    99
    1010PASS successfullyParsed is true

  • trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html

    r227953 r272373  
    1717    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "0px");
    1818    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top", "8px");
    19     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top", "8px");
     19    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.durationTimeLabel.element).top", "8px");
    2020    debug("");
    2121

  • trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt

    r227953 r272373  
    66PASS ready() became true
    77
    8 SkipForwardButton was dropped at 488.
    9 SkipBackButton was dropped at 459.
    10 AirplayButton was dropped at 430.
    11 TracksButton was dropped at 398.
    12 PiPButton was dropped at 366.
    13 FullscreenButton was dropped at 331.
    14 MuteButton was dropped at 300.
     8SkipForwardButton was dropped at 482.
     9SkipBackButton was dropped at 453.
     10AirplayButton was dropped at 424.
     11TracksButton was dropped at 392.
     12PiPButton was dropped at 360.
     13FullscreenButton was dropped at 325.
     14MuteButton was dropped at 294.
    1515
    1616PASS successfullyParsed is true

  • trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt

    r219983 r272373  
    1515PASS elaspedLabel is "Elapsed"
    1616PASS remainingLabel is "Remaining"
     17PASS durationLabel is "Duration"
    1718
    1819elapsedTimeLabels[3].element.textContent = 0:01
    … …  
    2021remainingTimeLabels[3].element.textContent = -0:01
    2122remainingTimeLabels[3].width = 33
     23durationTimeLabels[3].element.textContent = 0:01
     24durationTimeLabels[3].width = 27
    2225
    2326elapsedTimeLabels[4].element.textContent = 00:01
    … …  
    2528remainingTimeLabels[4].element.textContent = -00:01
    2629remainingTimeLabels[4].width = 40
     30durationTimeLabels[4].element.textContent = 00:01
     31durationTimeLabels[4].width = 35
    2732
    2833elapsedTimeLabels[5].element.textContent = 0:00:01
    … …  
    3035remainingTimeLabels[5].element.textContent = -0:00:01
    3136remainingTimeLabels[5].width = 52
     37durationTimeLabels[5].element.textContent = 0:00:01
     38durationTimeLabels[5].width = 46
    3239
    3340elapsedTimeLabels[6].element.textContent = 00:00:01
    … …  
    3542remainingTimeLabels[6].element.textContent = -00:00:01
    3643remainingTimeLabels[6].width = 59
     44durationTimeLabels[6].element.textContent = 00:00:01
     45durationTimeLabels[6].width = 54
    3746
    3847PASS successfullyParsed is true

  • trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html

    r219983 r272373  
    2323let elapsedTimeLabels = new Map;
    2424let remainingTimeLabels = new Map;
     25let durationTimeLabels = new Map;
    2526for (let numberOfDigits of digits) {
    26     elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Elapsed);
     27    elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Elapsed);
    2728    elapsedTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
    28     remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Remaining);
     29    remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Remaining);
    2930    remainingTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
     31    durationTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Duration);
     32    durationTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
    3033}
    3134
    32 const remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
     35const durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
     36durationTimeLabel.element.id = "duration";
     37durationTimeLabel.setValueWithNumberOfDigits(0, 4);
     38
     39const remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
    3340remainingTimeLabel.element.id = "remaining";
    3441remainingTimeLabel.setValueWithNumberOfDigits(0, 4);
    3542
    36 const elaspedTimeLabel = new TimeLabel(TimeLabel.Types.Elasped);
     43const elaspedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
    3744elaspedTimeLabel.element.id = "elasped";
    3845elaspedTimeLabel.setValueWithNumberOfDigits(0, 4);
    … …  
    4148let elaspedLabel;
    4249let remainingLabel;
     50let durationLabel;
    4351scheduler.frameDidFire = function()
    4452{
    4553    document.body.appendChild(timeLabel.element);
     54    document.body.appendChild(durationTimeLabel.element);
    4655    document.body.appendChild(remainingTimeLabel.element);
    4756    document.body.appendChild(elaspedTimeLabel.element);
    … …  
    6069    elaspedLabel = elaspedTimeLabel.element.getAttribute("aria-label").split(":")[0];
    6170    remainingLabel = remainingTimeLabel.element.getAttribute("aria-label").split(":")[0];
     71    durationLabel = durationTimeLabel.element.getAttribute("aria-label").split(":")[0];
    6272    shouldBeEqualToString("elaspedLabel", "Elapsed");
    6373    shouldBeEqualToString("remainingLabel", "Remaining");
     74    shouldBeEqualToString("durationLabel", "Duration");
    6475
    6576    timeLabel.element.remove();
     77    durationTimeLabel.element.remove();
    6678    remainingTimeLabel.element.remove();
    6779    elaspedTimeLabel.element.remove();
    … …  
    7385        debug(`remainingTimeLabels[${numberOfDigits}].element.textContent = ${remainingTimeLabels[numberOfDigits].element.textContent}`);
    7486        debug(`remainingTimeLabels[${numberOfDigits}].width = ${remainingTimeLabels[numberOfDigits].width}`);
     87        debug(`durationTimeLabels[${numberOfDigits}].element.textContent = ${durationTimeLabels[numberOfDigits].element.textContent}`);
     88        debug(`durationTimeLabels[${numberOfDigits}].width = ${durationTimeLabels[numberOfDigits].width}`);
    7589    }
    7690

  • trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt

    r219983 r272373  
    1515PASS elaspedLabel is "Elapsed"
    1616PASS remainingLabel is "Remaining"
     17PASS durationLabel is "Duration"
     18PASS accessibilityController.accessibleElementById('duration').role is "AXRole: AXStaticText"
    1719PASS accessibilityController.accessibleElementById('remaining').role is "AXRole: AXStaticText"
    1820PASS accessibilityController.accessibleElementById('elasped').role is "AXRole: AXStaticText"
    … …  
    2224remainingTimeLabels[3].element.textContent = -0:01
    2325remainingTimeLabels[3].width = 33
     26durationTimeLabels[3].element.textContent = 0:01
     27durationTimeLabels[3].width = 27
    2428
    2529elapsedTimeLabels[4].element.textContent = 00:01
    … …  
    2731remainingTimeLabels[4].element.textContent = -00:01
    2832remainingTimeLabels[4].width = 40
     33durationTimeLabels[4].element.textContent = 00:01
     34durationTimeLabels[4].width = 35
    2935
    3036elapsedTimeLabels[5].element.textContent = 0:00:01
    … …  
    3238remainingTimeLabels[5].element.textContent = -0:00:01
    3339remainingTimeLabels[5].width = 52
     40durationTimeLabels[5].element.textContent = 0:00:01
     41durationTimeLabels[5].width = 46
    3442
    3543elapsedTimeLabels[6].element.textContent = 00:00:01
    … …  
    3745remainingTimeLabels[6].element.textContent = -00:00:01
    3846remainingTimeLabels[6].width = 59
     47durationTimeLabels[6].element.textContent = 00:00:01
     48durationTimeLabels[6].width = 54
    3949
    4050PASS successfullyParsed is true

  • trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html

    r219983 r272373  
    1515shouldBeEqualToString("timeLabel.element.className", "time-label");
    1616
    17 timeLabel.element.id = "elasped";
    18 
    1917const NaNTimeLabel = new TimeLabel;
    2018NaNTimeLabel.setValueWithNumberOfDigits(NaN, 4);
    … …  
    2321let elapsedTimeLabels = new Map;
    2422let remainingTimeLabels = new Map;
     23let durationTimeLabels = new Map;
    2524for (let numberOfDigits of digits) {
    26     elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Elapsed);
     25    elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Elapsed);
    2726    elapsedTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
    28     remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Remaining);
     27    remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Remaining);
    2928    remainingTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
     29    durationTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Duration);
     30    durationTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
    3031}
    3132
    32 const remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
     33const durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
     34durationTimeLabel.element.id = "duration";
     35durationTimeLabel.setValueWithNumberOfDigits(0, 4);
     36
     37const remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
    3338remainingTimeLabel.element.id = "remaining";
    3439remainingTimeLabel.setValueWithNumberOfDigits(0, 4);
    3540
    36 const elaspedTimeLabel = new TimeLabel(TimeLabel.Types.Elasped);
     41const elaspedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
    3742elaspedTimeLabel.element.id = "elasped";
    3843elaspedTimeLabel.setValueWithNumberOfDigits(0, 4);
    … …  
    4146let elaspedLabel;
    4247let remainingLabel;
     48let durationLabel;
    4349scheduler.frameDidFire = function()
    4450{
    4551    document.body.appendChild(timeLabel.element);
     52    document.body.appendChild(durationTimeLabel.element);
    4653    document.body.appendChild(remainingTimeLabel.element);
    4754    document.body.appendChild(elaspedTimeLabel.element);
    … …  
    6067    elaspedLabel = elaspedTimeLabel.element.getAttribute("aria-label").split(":")[0];
    6168    remainingLabel = remainingTimeLabel.element.getAttribute("aria-label").split(":")[0];
     69    durationLabel = durationTimeLabel.element.getAttribute("aria-label").split(":")[0];
    6270    shouldBeEqualToString("elaspedLabel", "Elapsed");
    6371    shouldBeEqualToString("remainingLabel", "Remaining");
     72    shouldBeEqualToString("durationLabel", "Duration");
     73    shouldBeEqualToString("accessibilityController.accessibleElementById('duration').role", "AXRole: AXStaticText");
    6474    shouldBeEqualToString("accessibilityController.accessibleElementById('remaining').role", "AXRole: AXStaticText");
    6575    shouldBeEqualToString("accessibilityController.accessibleElementById('elasped').role", "AXRole: AXStaticText");
    6676    timeLabel.element.remove();
     77    durationTimeLabel.element.remove();
    6778    remainingTimeLabel.element.remove();
    6879    elaspedTimeLabel.element.remove();
    … …  
    7485        debug(`remainingTimeLabels[${numberOfDigits}].element.textContent = ${remainingTimeLabels[numberOfDigits].element.textContent}`);
    7586        debug(`remainingTimeLabels[${numberOfDigits}].width = ${remainingTimeLabels[numberOfDigits].width}`);
     87        debug(`durationTimeLabels[${numberOfDigits}].element.textContent = ${durationTimeLabels[numberOfDigits].element.textContent}`);
     88        debug(`durationTimeLabels[${numberOfDigits}].width = ${durationTimeLabels[numberOfDigits].width}`);
    7689    }
    7790

  • trunk/LayoutTests/media/modern-media-controls/time-labels-support/remaining-time.html

    r228445 r272373  
    1313const media = document.querySelector("video");
    1414const mediaController = createControls(shadowRoot, media, null);
     15
     16mediaController.controls.timeControl.durationTimeLabel?.element.click();
    1517
    1618media.addEventListener("timeupdate", (event) => {

  • trunk/Source/WebCore/ChangeLog

    r272370 r272373  
     12021-02-04  Devin Rousso  <drousso@apple.com>
     2
     3        [macOS] Default to showing the total duration, only switching to time remaining when clicked
     4        https://bugs.webkit.org/show_bug.cgi?id=221364
     5
     6        Reviewed by Eric Carlson.
     7
     8        * Modules/modern-media-controls/controls/time-label.js:
     9        (TimeLabel.prototype.setValueWithNumberOfDigits):
     10        (TimeLabel.prototype.commitProperty):
     11        (TimeLabel.prototype._formattedTime):
     12        Add `TimeLabel.Type.Duration`.
     13        Drive-by: rename `Types` to `Type` as most enums are singular.
     14
     15        * Modules/modern-media-controls/controls/time-control.js:
     16        (TimeControl):
     17        (TimeControl.prototype.get minimumWidth):
     18        (TimeControl.prototype.get idealMinimumWidth):
     19        (TimeControl.prototype.layout):
     20        (TimeControl.prototype.handleEvent): Added.
     21        (TimeControl.prototype._durationOrRemainingTimeLabel): Added.
     22        (TimeControl.prototype._performIdealLayout):
     23        Add another `TimeLabel` with the new `TimeLabel.Type.Duration` that is used instead of the
     24        existing `TimeLabel.Type.Remaining` after the latter has been clicked (and the former has
     25        not also been clicked to switch back).
     26
     27        * en.lproj/modern-media-controls-localized-strings.js:
     28        Add `"Duration"`.
     29
    1302021-02-04  Antti Koivisto  <antti@apple.com>
    231

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js

    r272352 r272373  
    4040        });
    4141
    42         this.elapsedTimeLabel = new TimeLabel(TimeLabel.Types.Elapsed);
     42        this.elapsedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
    4343        this.scrubber = new Slider("scrubber", this.layoutTraits & LayoutTraits.macOS ? Slider.KnobStyle.Bar : Slider.KnobStyle.Circle);
    44         this.remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
     44        if (this.layoutTraits & LayoutTraits.macOS)
     45            this.durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
     46        this.remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
    4547
    4648        this.activityIndicator = new LayoutNode(`<div class="activity-indicator"></div>`);
    … …  
    5355        this._currentTime = 0;
    5456        this._loading = false;
     57
     58        this._showDurationTimeLabel = this.layoutTraits & LayoutTraits.macOS;
     59        if (this._showDurationTimeLabel) {
     60            this.durationTimeLabel.element.addEventListener("click", this);
     61            this.remainingTimeLabel.element.addEventListener("click", this);
     62        }
    5563    }
    5664
    … …  
    93101    {
    94102        this._performIdealLayout();
    95         return MinimumScrubberWidth + ScrubberMargin + this.remainingTimeLabel.width;
     103        return MinimumScrubberWidth + ScrubberMargin + this._durationOrRemainingTimeLabel().width;
    96104    }
    97105
    … …  
    99107    {
    100108        this._performIdealLayout();
    101         return this.elapsedTimeLabel.width + ScrubberMargin + MinimumScrubberWidth + ScrubberMargin + this.remainingTimeLabel.width;
     109        return this.elapsedTimeLabel.width + ScrubberMargin + MinimumScrubberWidth + ScrubberMargin + this._durationOrRemainingTimeLabel().width;
    102110    }
    103111
    … …  
    116124            return;
    117125        }
     126
     127        let durationOrRemainingTimeLabel = this._durationOrRemainingTimeLabel();
    118128
    119129        // We drop the elapsed time label if width is constrained and we can't guarantee
    120130        // the scrubber minimum size otherwise.
    121131        this.scrubber.x = 0;
    122         this.scrubber.width = this.width - ScrubberMargin - this.remainingTimeLabel.width;
    123         this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
     132        this.scrubber.width = this.width - ScrubberMargin - durationOrRemainingTimeLabel.width;
     133        durationOrRemainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
    124134        this.elapsedTimeLabel.visible = false;
    125135    }
    126136
     137    handleEvent(event)
     138    {
     139        switch (event.type) {
     140        case "click":
     141            switch (event.target) {
     142            case this.durationTimeLabel.element:
     143                this._showDurationTimeLabel = false;
     144                this.needsLayout = true;
     145                break;
     146
     147            case this.remainingTimeLabel.element:
     148                this._showDurationTimeLabel = true;
     149                this.needsLayout = true;
     150                break;
     151            }
     152        }
     153    }
     154
    127155    // Private
    128156
     157    _durationOrRemainingTimeLabel()
     158    {
     159        return this._showDurationTimeLabel ? this.durationTimeLabel : this.remainingTimeLabel;
     160    }
     161
    129162    _performIdealLayout()
    130163    {
    131164        if (this._loading)
    132             this.remainingTimeLabel.setValueWithNumberOfDigits(NaN, 4);
     165            this._durationOrRemainingTimeLabel().setValueWithNumberOfDigits(NaN, 4);
    133166        else {
    134167            const shouldShowZeroDurations = isNaN(this._duration) || this._duration === Number.POSITIVE_INFINITY;
    … …  
    145178
    146179            this.elapsedTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._currentTime, numberOfDigitsForTimeLabels);
    147             this.remainingTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : (this._currentTime - this._duration), numberOfDigitsForTimeLabels);
     180            if (this._showDurationTimeLabel)
     181                this.durationTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._duration, numberOfDigitsForTimeLabels);
     182            else
     183                this.remainingTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._currentTime - this._duration, numberOfDigitsForTimeLabels);
    148184        }
    149185
    … …  
    151187            this.scrubber.value = this._currentTime / this._duration;
    152188
     189        let durationOrRemainingTimeLabel = this._durationOrRemainingTimeLabel();
     190
    153191        this.scrubber.x = (this._loading ? this.activityIndicator.width : this.elapsedTimeLabel.width) + ScrubberMargin;
    154         this.scrubber.width = this.width - this.scrubber.x - ScrubberMargin - this.remainingTimeLabel.width;
    155         this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
    156 
    157         this.children = [this._loading ? this.activityIndicator : this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
     192        this.scrubber.width = this.width - this.scrubber.x - ScrubberMargin - durationOrRemainingTimeLabel.width;
     193        durationOrRemainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
     194
     195        this.children = [this._loading ? this.activityIndicator : this.elapsedTimeLabel, this.scrubber, durationOrRemainingTimeLabel];
    158196    }
    159197

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js

    r219983 r272373  
    6060        this._value = value;
    6161        this._numberOfDigits = numberOfDigits;
    62         this.width = WidthsForDigits[this._numberOfDigits] + (this._type === TimeLabel.Types.Remaining && !isNaN(this._value) ? MinusSignWidthsForDigits[this._numberOfDigits] : 0);
     62        this.width = WidthsForDigits[this._numberOfDigits] + (this._type === TimeLabel.Type.Remaining && !isNaN(this._value) ? MinusSignWidthsForDigits[this._numberOfDigits] : 0);
    6363        this.markDirtyProperty("value");
    6464    }
    … …  
    7070        if (propertyName === "value") {
    7171            this.element.textContent = this._formattedTime();
     72
    7273            const timeAsString = formattedStringForDuration(this.value);
    73             const ariaLabel = (this._type === TimeLabel.Types.Remaining) ? UIString("Remaining") : UIString("Elapsed");
    74             this.element.setAttribute("aria-label", `${ariaLabel}: ${timeAsString}`);
     74            switch (this._type) {
     75            case TimeLabel.Type.Elapsed:
     76                this.element.setAttribute("aria-label", `${UIString("Elapsed")}: ${timeAsString}`);
     77                break;
     78
     79            case TimeLabel.Type.Remaining:
     80                this.element.setAttribute("aria-label", `${UIString("Remaining")}: ${timeAsString}`);
     81                break;
     82
     83            case TimeLabel.Type.Duration:
     84                this.element.setAttribute("aria-label", `${UIString("Duration")}: ${timeAsString}`);
     85                break;
     86            }
     87
    7588            if (this.parent instanceof TimeControl)
    7689                this.parent.updateScrubberLabel();
    … …  
    99112            timeComponents = [doubleDigits(time.hours), doubleDigits(time.minutes), doubleDigits(time.seconds)];
    100113
    101         return (this._type === TimeLabel.Types.Remaining ? "-" : "") + timeComponents.join(":");
     114        return (this._type === TimeLabel.Type.Remaining ? "-" : "") + timeComponents.join(":");
    102115    }
    103116
    … …  
    111124}
    112125
    113 TimeLabel.Types = {
     126TimeLabel.Type = {
    114127    Elapsed: 0,
    115     Remaining: 1
     128    Remaining: 1,
     129    Duration: 2,
    116130};

  • trunk/Source/WebCore/en.lproj/modern-media-controls-localized-strings.js

    r238307 r272373  
    44    "Audio": "Audio",
    55    "Audio Controls": "Audio Controls",
     6    "Duration": "Duration",
    67    "Enter Full Screen": "Enter Full Screen",
    78    "Enter Picture in Picture": "Enter Picture in Picture",
Note: See TracChangeset for help on using the changeset viewer.