Changeset 272375 in webkit


Ignore:
Timestamp:
Feb 4, 2021 10:01:36 AM (18 months ago)
Author:
Devin Rousso
Message:

Add intermediate volume icon states between "mute" and "max"
​https://bugs.webkit.org/show_bug.cgi?id=221371

Reviewed by Eric Carlson.

Source/WebCore:

  • Modules/modern-media-controls/controls/mute-button.js:

(MuteButton):
(MuteButton.prototype.get volume): Added.
(MuteButton.prototype.set volume): Added.
(MuteButton.prototype.set usesLTRUserInterfaceLayoutDirection): Added.
(MuteButton.prototype.layout):
(MuteButton.prototype.set usesRTLIconVariant): Removed.
Keep track of the volume in addition to muted so that the icon can change more granularly:

  • muted (VolumeMuted.svg and VolumeMuted-RTL.svg)
  • 0% < 25% (Volume0.svg and Volume0-RTL.svg)
  • 25% < 50% (Volume1.svg and Volume1-RTL.svg)
  • 50% < 75% (Volume2.svg and Volume2-RTL.svg)
  • 75% <= 100% (Volume3.svg and Volume3-RTL.svg)

Drive-by: rename set usesRTLIconVariant to set usesLTRUserInterfaceLayoutDirection so

that it matches MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection.

  • Modules/modern-media-controls/controls/media-controls.js:

(MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection):

  • Modules/modern-media-controls/controls/inline-media-controls.js:

(InlineMediaControls.prototype.layout):
(InlineMediaControls.prototype._addTopRightBarWithMuteButtonToChildren):
Propagate usesLTRUserInterfaceLayoutDirection to volumeButton whenever it's changed.

  • Modules/modern-media-controls/media/mute-support.js:

(MuteSupport.prototype.syncControl):
Also pass along the volume.

  • Modules/modern-media-controls/media/volume-support.js:

(VolumeSupport.prototype.controlValueWillStartChanging):
Don't unmute in controlValueWillStartChanging (from "pointerdown") as the user hasn't
actually changed the volume yet.

  • Modules/modern-media-controls/js-files:
  • Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:

(MacOSFullscreenMediaControls.prototype._volumeControlsForCurrentDirection):

  • Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:

(.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider): Added.
(.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) :is(.volume-down, .volume.slider, .volume-up)): Deleted.

  • Modules/modern-media-controls/controls/volume-down-button.js: Removed.
  • Modules/modern-media-controls/controls/volume-up-button.js: Removed.
  • Modules/modern-media-controls/media/media-controller.js:

(MediaController.prototype._supportingObjectClasses):

  • Modules/modern-media-controls/media/volume-down-support.js: Removed.
  • Modules/modern-media-controls/media/volume-up-support.js: Removed.

Use the same MuteButton in fullscreen instead of VolumeDownButton and VolumeUpButton.

  • Modules/modern-media-controls/controls/icon-service.js:
  • Modules/modern-media-controls/images/iOS/Mute-RTL.svg: Removed.
  • Modules/modern-media-controls/images/iOS/Mute.svg: Removed.
  • Modules/modern-media-controls/images/iOS/Volume0-RTL.svg: Added.
  • Modules/modern-media-controls/images/iOS/Volume0.svg: Added.
  • Modules/modern-media-controls/images/iOS/Volume1-RTL.svg: Added.
  • Modules/modern-media-controls/images/iOS/Volume1.svg: Added.
  • Modules/modern-media-controls/images/iOS/Volume2-RTL.svg: Added.
  • Modules/modern-media-controls/images/iOS/Volume2.svg: Added.
  • Modules/modern-media-controls/images/iOS/Volume3-RTL.svg: Copied from Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg.
  • Modules/modern-media-controls/images/iOS/Volume3.svg: Copied from Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi.svg.
  • Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg: Removed.
  • Modules/modern-media-controls/images/iOS/VolumeHi.svg: Removed.
  • Modules/modern-media-controls/images/iOS/VolumeMuted-RTL.svg: Copied from Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg.
  • Modules/modern-media-controls/images/iOS/VolumeMuted.svg: Copied from Source/WebCore/Modules/modern-media-controls/images/macOS/Mute.svg.
  • Modules/modern-media-controls/images/macOS/Volume0-RTL.svg: Added.
  • Modules/modern-media-controls/images/macOS/Volume0.svg: Added.
  • Modules/modern-media-controls/images/macOS/Volume1-RTL.svg: Added.
  • Modules/modern-media-controls/images/macOS/Volume1.svg: Added.
  • Modules/modern-media-controls/images/macOS/Volume2-RTL.svg: Added.
  • Modules/modern-media-controls/images/macOS/Volume2.svg: Added.
  • Modules/modern-media-controls/images/macOS/Volume3-RTL.svg: Renamed from Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg.
  • Modules/modern-media-controls/images/macOS/Volume3.svg: Renamed from Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi.svg.
  • Modules/modern-media-controls/images/macOS/VolumeLo.svg: Removed.
  • Modules/modern-media-controls/images/macOS/VolumeMuted-RTL.svg: Renamed from Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg.
  • Modules/modern-media-controls/images/macOS/VolumeMuted.svg: Renamed from Source/WebCore/Modules/modern-media-controls/images/macOS/Mute.svg.
  • Configurations/Base.xcconfig:
  • Configurations/DebugRelease.xcconfig:
  • html/HTMLMediaElement.cpp:

(WebCore::HTMLMediaElement::ensureMediaControlsInjectedScript):
Add an ENGINEERING_BUILD compile flag so that the media controls JS/CSS is also available
in Web Inspector for engineering builds (in addition to debug builds).

LayoutTests:

  • media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html:
  • media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt:
  • media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html:
  • media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt:
  • media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html:
  • media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button-expected.txt:
  • media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html:
  • media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles-expected.txt:
  • media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html:
  • media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt:
  • media/modern-media-controls/mute-button/mute-button.html:
  • media/modern-media-controls/mute-button/mute-button-expected.txt:
  • platform/ios/TestExpectations:
  • platform/mac/TestExpectations:
  • media/modern-media-controls/volume-down-support/volume-down-support.html: Removed.
  • media/modern-media-controls/volume-down-support/volume-down-support-expected.txt: Removed.
  • media/modern-media-controls/volume-up-support/volume-up-support.html: Removed.
  • media/modern-media-controls/volume-up-support/volume-up-support-expected.txt: Removed.
Location:
trunk
Files:
12 added
11 deleted
29 edited
4 copied
4 moved

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r272373 r272375  
     12021-02-04  Devin Rousso  <drousso@apple.com>
     2
     3        Add intermediate volume icon states between "mute" and "max"
     4        https://bugs.webkit.org/show_bug.cgi?id=221371
     5
     6        Reviewed by Eric Carlson.
     7
     8        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html:
     9        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt:
     10        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html:
     11        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt:
     12        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html:
     13        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button-expected.txt:
     14        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html:
     15        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles-expected.txt:
     16        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html:
     17        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt:
     18        * media/modern-media-controls/mute-button/mute-button.html:
     19        * media/modern-media-controls/mute-button/mute-button-expected.txt:
     20
     21        * platform/ios/TestExpectations:
     22        * platform/mac/TestExpectations:
     23        * media/modern-media-controls/volume-down-support/volume-down-support.html: Removed.
     24        * media/modern-media-controls/volume-down-support/volume-down-support-expected.txt: Removed.
     25        * media/modern-media-controls/volume-up-support/volume-up-support.html: Removed.
     26        * media/modern-media-controls/volume-up-support/volume-up-support-expected.txt: Removed.
     27
    1282021-02-04  Devin Rousso  <drousso@apple.com>
    229

  • trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt

    r265709 r272375  
    1515
    1616Left container
    17 PASS mediaControls.bottomControlsBar.children[1].children is [mediaControls.volumeUpButton, mediaControls.volumeSlider, mediaControls.volumeDownButton]
     17PASS mediaControls.bottomControlsBar.children[1].children is [mediaControls.volumeSlider, mediaControls.muteButton]
    1818PASS mediaControls.bottomControlsBar.children[1].element.className is "buttons-container left"
    1919PASS mediaControls.bottomControlsBar.children[1].leftMargin is 12

  • trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html

    r265709 r272375  
    2121debug("");
    2222debug("Left container");
    23 shouldBe("mediaControls.bottomControlsBar.children[1].children", "[mediaControls.volumeUpButton, mediaControls.volumeSlider, mediaControls.volumeDownButton]");
     23shouldBe("mediaControls.bottomControlsBar.children[1].children", "[mediaControls.volumeSlider, mediaControls.muteButton]");
    2424shouldBeEqualToString("mediaControls.bottomControlsBar.children[1].element.className", "buttons-container left");
    2525shouldBe("mediaControls.bottomControlsBar.children[1].leftMargin", "12");

  • trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-expected.txt

    r261493 r272375  
    66PASS media.webkitDisplayingFullscreen became true
    77PASS !!mediaControls.querySelector('.buttons-container.left') became true
    8 PASS mediaControls.querySelector('.buttons-container.left').style.width became "118px"
     8PASS mediaControls.querySelector('.buttons-container.left').style.width became "100px"
    99PASS mediaControls.querySelector('.controls-bar').style.transform is "translate(-50px, -100px)"
    1010PASS successfullyParsed is true

  • trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button-expected.txt

    r261493 r272375  
    66PASS media.webkitDisplayingFullscreen became true
    77PASS !!mediaControls.querySelector('.buttons-container.left') became true
    8 PASS mediaControls.querySelector('.buttons-container.left').style.width became "118px"
     8PASS mediaControls.querySelector('.buttons-container.left').style.width became "100px"
    99PASS mediaControls.querySelector('.controls-bar').style.transform is ""
    1010PASS successfullyParsed is true

  • trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag-is-prevented-over-button.html

    r261493 r272375  
    2121        mediaControls = shadowRoot.lastChild;
    2222        shouldBecomeEqual("!!mediaControls.querySelector('.buttons-container.left')", "true", () => {
    23             shouldBecomeEqualToString("mediaControls.querySelector('.buttons-container.left').style.width", "118px", () => {
     23            shouldBecomeEqualToString("mediaControls.querySelector('.buttons-container.left').style.width", "100px", () => {
    2424                const bounds = mediaControls.querySelector(".controls-bar").getBoundingClientRect();
    2525                eventSender.mouseMoveTo(bounds.left + 68, bounds.top + 20);

  • trunk/LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-drag.html

    r261493 r272375  
    2121        mediaControls = shadowRoot.lastChild;
    2222        shouldBecomeEqual("!!mediaControls.querySelector('.buttons-container.left')", "true", () => {
    23             shouldBecomeEqualToString("mediaControls.querySelector('.buttons-container.left').style.width", "118px", () => {
     23            shouldBecomeEqualToString("mediaControls.querySelector('.buttons-container.left').style.width", "100px", () => {
    2424                const bounds = mediaControls.querySelector(".controls-bar").getBoundingClientRect();
    2525                eventSender.mouseMoveTo(bounds.left + 210, bounds.top + 25);

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

    r227968 r272375  
    44
    55
    6 PASS window.getComputedStyle(mediaControls.volumeSlider.element).left became "30px"
     6PASS window.getComputedStyle(mediaControls.volumeSlider.element).left became "40px"
    77PASS window.getComputedStyle(mediaControls.volumeSlider.element).top is "0px"
    88PASS window.getComputedStyle(mediaControls.volumeSlider.element).width is "60px"

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

    r265709 r272375  
    1414document.body.appendChild(mediaControls.element);
    1515
    16 shouldBecomeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).left", "30px", () => {
     16shouldBecomeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).left", "40px", () => {
    1717    shouldBeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).top", "0px");
    1818    shouldBeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).width", "60px");

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

    r266475 r272375  
    55
    66width = 600
    7 muted = false
     7muted = true
    88usesLTRUserInterfaceLayoutDirection = true
    9 PASS mediaControls.muteButton.iconName became Icons.Volume
     9PASS mediaControls.muteButton.iconName became Icons.VolumeMuted
    1010PASS mediaControls.topLeftControlsBar.children[1].children became [mediaControls.fullscreenButton, mediaControls.pipButton]
    1111PASS getComputedStyle(mediaControls.topLeftControlsBar.element).left became "6px"
    1212
    1313width = 600
    14 muted = false
     14muted = true
    1515usesLTRUserInterfaceLayoutDirection = false
    16 PASS mediaControls.muteButton.iconName became Icons.VolumeRTL
    17 PASS mediaControls.topLeftControlsBar.children[1].children became [mediaControls.pipButton, mediaControls.fullscreenButton]
    18 PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
    19 
    20 width = 250
    21 muted = false
    22 usesLTRUserInterfaceLayoutDirection = false
    23 PASS mediaControls.muteButton.iconName became Icons.VolumeRTL
     16PASS mediaControls.muteButton.iconName became Icons.VolumeMutedRTL
    2417PASS mediaControls.topLeftControlsBar.children[1].children became [mediaControls.pipButton, mediaControls.fullscreenButton]
    2518PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
    … …  
    3326
    3427width = 250
    35 muted = true
     28muted = false
     29usesLTRUserInterfaceLayoutDirection = false
     30PASS mediaControls.muteButton.iconName became Icons.Volume3RTL
     31PASS mediaControls.topLeftControlsBar.children[1].children became [mediaControls.pipButton, mediaControls.fullscreenButton]
     32PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
     33
     34width = 250
     35muted = false
    3636usesLTRUserInterfaceLayoutDirection = true
    37 PASS mediaControls.muteButton.iconName became Icons.VolumeMuted
     37PASS mediaControls.muteButton.iconName became Icons.Volume3
    3838PASS mediaControls.topLeftControlsBar.children[1].children became [mediaControls.fullscreenButton, mediaControls.pipButton]
    3939PASS getComputedStyle(mediaControls.topLeftControlsBar.element).left became "6px"

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

    r266475 r272375  
    1919{
    2020    debug("width = 600");
    21     debug("muted = false");
     21    debug("muted = true");
    2222    debug("usesLTRUserInterfaceLayoutDirection = true");
    2323    mediaControls.usesLTRUserInterfaceLayoutDirection = true;
    24     shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume", () => {
     24    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMuted", () => {
    2525        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
    2626            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", step2);
    … …  
    3333    debug("");
    3434    debug("width = 600");
    35     debug("muted = false");
     35    debug("muted = true");
    3636    debug("usesLTRUserInterfaceLayoutDirection = false");
    3737    mediaControls.usesLTRUserInterfaceLayoutDirection = false;
    38     shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeRTL", () => {
     38    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
    3939        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
    4040            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step3);
    … …  
    4747    debug("");
    4848    debug("width = 250");
    49     debug("muted = false");
     49    debug("muted = true");
    5050    debug("usesLTRUserInterfaceLayoutDirection = false");
    5151    mediaControls.width = 250;
    52     shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeRTL", () => {
     52    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
    5353        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
    5454            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step4);
    … …  
    6161    debug("");
    6262    debug("width = 250");
    63     debug("muted = true");
     63    debug("muted = false");
    6464    debug("usesLTRUserInterfaceLayoutDirection = false");
    65     mediaControls.muteButton.muted = true;
    66     shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
     65    mediaControls.muteButton.muted = false;
     66    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume3RTL", () => {
    6767        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
    6868            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step5);
    … …  
    7575    debug("");
    7676    debug("width = 250");
    77     debug("muted = true");
     77    debug("muted = false");
    7878    debug("usesLTRUserInterfaceLayoutDirection = true");
    7979    mediaControls.usesLTRUserInterfaceLayoutDirection = true;
    80     shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMuted", () => {
     80    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume3", () => {
    8181        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].children", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
    8282            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", done);

  • trunk/LayoutTests/media/modern-media-controls/mute-button/mute-button-expected.txt

    r218991 r272375  
    66PASS muteButton.element.localName is "button"
    77PASS muteButton.element.classList.contains("mute") is true
    8 PASS muteButton.iconName is Icons.Volume
     8PASS muteButton.iconName is Icons.VolumeMutedRTL
     9PASS muteButton.muted is true
     10PASS muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeMuted-RTL.svg") became true
     11Unmuting...
    912PASS muteButton.muted is false
    10 PASS mutedButton.muted is true
    11 PASS mutedButton.iconName became Icons.VolumeMuted
    12 PASS muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeHi.svg") became true
    13 PASS mutedButton.image.element.style.webkitMaskImage.includes("macOS/Mute.svg") became true
     13PASS muteButton.iconName became Icons.Volume3RTL
     14PASS muteButton.image.element.style.webkitMaskImage.includes("macOS/Volume3-RTL.svg") became true
    1415PASS successfullyParsed is true
    1516

  • trunk/LayoutTests/media/modern-media-controls/mute-button/mute-button.html

    r218991 r272375  
    1313shouldBeEqualToString("muteButton.element.localName", "button");
    1414shouldBeTrue('muteButton.element.classList.contains("mute")');
    15 shouldBe("muteButton.iconName", "Icons.Volume");
    16 shouldBeFalse("muteButton.muted");
    17 
    18 const mutedButton = new MuteButton({ layoutTraits: LayoutTraits.macOS });
    19 mutedButton.muted = true;
    20 shouldBeTrue("mutedButton.muted");
    21 shouldBecomeEqual("mutedButton.iconName", "Icons.VolumeMuted", () => {
    22     shouldBecomeEqual('muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeHi.svg")', "true", () => {
    23         shouldBecomeEqual('mutedButton.image.element.style.webkitMaskImage.includes("macOS/Mute.svg")', "true", finishJSTest);
     15shouldBe("muteButton.iconName", "Icons.VolumeMutedRTL");
     16shouldBeTrue("muteButton.muted");
     17shouldBecomeEqual('muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeMuted-RTL.svg")', "true", () => {
     18    debug("Unmuting...");
     19    muteButton.muted = false;
     20    shouldBeFalse("muteButton.muted");
     21    shouldBecomeEqual("muteButton.iconName", "Icons.Volume3RTL", () => {
     22        shouldBecomeEqual('muteButton.image.element.style.webkitMaskImage.includes("macOS/Volume3-RTL.svg")', "true", finishJSTest);
    2423    });
    2524});
     25
    2626
    2727</script>

  • trunk/LayoutTests/platform/ios/TestExpectations

    r272244 r272375  
    29052905media/modern-media-controls/start-support/start-support-disable-controls-and-re-enable-post-play.html [ Skip ]
    29062906media/modern-media-controls/start-support/start-support-lowPowerMode.html [ Skip ]
    2907 media/modern-media-controls/volume-down-support [ Skip ]
    2908 media/modern-media-controls/volume-up-support [ Skip ]
    29092907
    29102908# There is no focus state for on iOS

  • trunk/LayoutTests/platform/mac/TestExpectations

    r272244 r272375  
    21412141webkit.org/b/215515 imported/w3c/web-platform-tests/user-timing/measure_navigation_timing.html [ Pass Failure ]
    21422142
    2143 webkit.org/b/215576 media/modern-media-controls/volume-up-support/volume-up-support.html [ Pass Timeout ]
    2144 
    21452143webkit.org/b/215583 media/track/track-in-band-style.html [ Pass Failure Timeout ]
    2146 
    2147 webkit.org/b/215587 media/modern-media-controls/volume-down-support/volume-down-support.html [ Pass Timeout ]
    21482144
    21492145webkit.org/b/215723 fast/repaint/list-item-equal-style-change-no-repaint.html [ Pass Failure ]

  • trunk/Source/WebCore/ChangeLog

    r272374 r272375  
     12021-02-04  Devin Rousso  <drousso@apple.com>
     2
     3        Add intermediate volume icon states between "mute" and "max"
     4        https://bugs.webkit.org/show_bug.cgi?id=221371
     5
     6        Reviewed by Eric Carlson.
     7
     8        * Modules/modern-media-controls/controls/mute-button.js:
     9        (MuteButton):
     10        (MuteButton.prototype.get volume): Added.
     11        (MuteButton.prototype.set volume): Added.
     12        (MuteButton.prototype.set usesLTRUserInterfaceLayoutDirection): Added.
     13        (MuteButton.prototype.layout):
     14        (MuteButton.prototype.set usesRTLIconVariant): Removed.
     15        Keep track of the `volume` in addition to `muted` so that the icon can change more granularly:
     16         - muted (`VolumeMuted.svg` and `VolumeMuted-RTL.svg`)
     17         - 0% < 25% (`Volume0.svg` and `Volume0-RTL.svg`)
     18         - 25% < 50% (`Volume1.svg` and `Volume1-RTL.svg`)
     19         - 50% < 75% (`Volume2.svg` and `Volume2-RTL.svg`)
     20         - 75% <= 100% (`Volume3.svg` and `Volume3-RTL.svg`)
     21        Drive-by: rename `set usesRTLIconVariant` to `set usesLTRUserInterfaceLayoutDirection` so
     22                  that it matches `MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection`.
     23
     24        * Modules/modern-media-controls/controls/media-controls.js:
     25        (MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection):
     26        * Modules/modern-media-controls/controls/inline-media-controls.js:
     27        (InlineMediaControls.prototype.layout):
     28        (InlineMediaControls.prototype._addTopRightBarWithMuteButtonToChildren):
     29        Propagate `usesLTRUserInterfaceLayoutDirection` to `volumeButton` whenever it's changed.
     30
     31        * Modules/modern-media-controls/media/mute-support.js:
     32        (MuteSupport.prototype.syncControl):
     33        Also pass along the `volume`.
     34
     35        * Modules/modern-media-controls/media/volume-support.js:
     36        (VolumeSupport.prototype.controlValueWillStartChanging):
     37        Don't unmute in `controlValueWillStartChanging` (from `"pointerdown"`) as the user hasn't
     38        actually changed the volume yet.
     39
     40        * Modules/modern-media-controls/js-files:
     41        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
     42        (MacOSFullscreenMediaControls.prototype._volumeControlsForCurrentDirection):
     43        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
     44        (.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider): Added.
     45        (.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) :is(.volume-down, .volume.slider, .volume-up)): Deleted.
     46        * Modules/modern-media-controls/controls/volume-down-button.js: Removed.
     47        * Modules/modern-media-controls/controls/volume-up-button.js: Removed.
     48        * Modules/modern-media-controls/media/media-controller.js:
     49        (MediaController.prototype._supportingObjectClasses):
     50        * Modules/modern-media-controls/media/volume-down-support.js: Removed.
     51        * Modules/modern-media-controls/media/volume-up-support.js: Removed.
     52        Use the same `MuteButton` in fullscreen instead of `VolumeDownButton` and `VolumeUpButton`.
     53
     54        * Modules/modern-media-controls/controls/icon-service.js:
     55        * Modules/modern-media-controls/images/iOS/Mute-RTL.svg: Removed.
     56        * Modules/modern-media-controls/images/iOS/Mute.svg: Removed.
     57        * Modules/modern-media-controls/images/iOS/Volume0-RTL.svg: Added.
     58        * Modules/modern-media-controls/images/iOS/Volume0.svg: Added.
     59        * Modules/modern-media-controls/images/iOS/Volume1-RTL.svg: Added.
     60        * Modules/modern-media-controls/images/iOS/Volume1.svg: Added.
     61        * Modules/modern-media-controls/images/iOS/Volume2-RTL.svg: Added.
     62        * Modules/modern-media-controls/images/iOS/Volume2.svg: Added.
     63        * Modules/modern-media-controls/images/iOS/Volume3-RTL.svg: Copied from Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg.
     64        * Modules/modern-media-controls/images/iOS/Volume3.svg: Copied from Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi.svg.
     65        * Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg: Removed.
     66        * Modules/modern-media-controls/images/iOS/VolumeHi.svg: Removed.
     67        * Modules/modern-media-controls/images/iOS/VolumeMuted-RTL.svg: Copied from Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg.
     68        * Modules/modern-media-controls/images/iOS/VolumeMuted.svg: Copied from Source/WebCore/Modules/modern-media-controls/images/macOS/Mute.svg.
     69        * Modules/modern-media-controls/images/macOS/Volume0-RTL.svg: Added.
     70        * Modules/modern-media-controls/images/macOS/Volume0.svg: Added.
     71        * Modules/modern-media-controls/images/macOS/Volume1-RTL.svg: Added.
     72        * Modules/modern-media-controls/images/macOS/Volume1.svg: Added.
     73        * Modules/modern-media-controls/images/macOS/Volume2-RTL.svg: Added.
     74        * Modules/modern-media-controls/images/macOS/Volume2.svg: Added.
     75        * Modules/modern-media-controls/images/macOS/Volume3-RTL.svg: Renamed from Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg.
     76        * Modules/modern-media-controls/images/macOS/Volume3.svg: Renamed from Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi.svg.
     77        * Modules/modern-media-controls/images/macOS/VolumeLo.svg: Removed.
     78        * Modules/modern-media-controls/images/macOS/VolumeMuted-RTL.svg: Renamed from Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg.
     79        * Modules/modern-media-controls/images/macOS/VolumeMuted.svg: Renamed from Source/WebCore/Modules/modern-media-controls/images/macOS/Mute.svg.
     80
     81        * Configurations/Base.xcconfig:
     82        * Configurations/DebugRelease.xcconfig:
     83        * html/HTMLMediaElement.cpp:
     84        (WebCore::HTMLMediaElement::ensureMediaControlsInjectedScript):
     85        Add an `ENGINEERING_BUILD` compile flag so that the media controls JS/CSS is also available
     86        in Web Inspector for engineering builds (in addition to debug builds).
     87
    1882021-02-04  Philippe Normand  <pnormand@igalia.com>
    289

  • trunk/Source/WebCore/Configurations/Base.xcconfig

    r269380 r272375  
    7171GCC_OBJC_CALL_CXX_CDTORS = YES;
    7272GCC_PRECOMPILE_PREFIX_HEADER = YES;
     73GCC_PREPROCESSOR_DEFINITIONS = $(inherited) $(ENGINEERING_BUILD_DEFINES);
    7374GCC_SYMBOLS_PRIVATE_EXTERN = YES;
    7475GCC_THREADSAFE_STATICS = NO;
    … …  
    9293GCC_WARN_UNUSED_VARIABLE = YES;
    9394WARNING_CFLAGS = -Wall -Wextra -Wcast-qual -Wchar-subscripts -Wconditional-uninitialized -Wextra-tokens -Wformat=2 -Winit-self -Wmissing-format-attribute -Wmissing-noreturn -Wpacked -Wpointer-arith -Wredundant-decls -Wundef -Wwrite-strings -Wexit-time-destructors -Wglobal-constructors -Wtautological-compare -Wimplicit-fallthrough -Wvla -Wno-unknown-warning-option -Wliteral-conversion;
     95
     96ENGINEERING_BUILD_DEFINES = $(ENGINEERING_BUILD_DEFINES_$(ENGINEERING_BUILD));
     97ENGINEERING_BUILD_DEFINES_1 = ENGINEERING_BUILD=1;
    9498
    9599TARGET_MACOS_LEGACY_VERSION_IDENTIFIER = $(TARGET_MACOS_LEGACY_VERSION_IDENTIFIER_$(MACOSX_DEPLOYMENT_TARGET:base))

  • trunk/Source/WebCore/Configurations/DebugRelease.xcconfig

    r268420 r272375  
    5050MACOSX_DEPLOYMENT_TARGET_120000 = 12.0;
    5151
     52ENGINEERING_BUILD = 1;
     53
    5254GCC_WARN_ABOUT_DEPRECATED_FUNCTIONS = YES;
    5355DEBUG_INFORMATION_FORMAT = dwarf;

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js

    r230894 r272375  
    4242    SpinnerCompact  : { name: "ActivityIndicatorSpriteCompact", type: "png", label: UIString("Loading…") },
    4343    Tracks          : { name: "MediaSelector", type: "svg", label: UIString("Media Selection") },
    44     Volume          : { name: "VolumeHi", type: "svg", label: UIString("Mute") },
    45     VolumeRTL       : { name: "VolumeHi-RTL", type: "svg", label: UIString("Mute") },
    46     VolumeDown      : { name: "VolumeLo", type: "svg", label: UIString("Volume Down") },
    47     VolumeMuted     : { name: "Mute", type: "svg", label: UIString("Unmute") },
    48     VolumeMutedRTL  : { name: "Mute-RTL", type: "svg", label: UIString("Unmute") },
    49     VolumeUp        : { name: "VolumeHi", type: "svg", label: UIString("Volume Up") }
     44    Volume0         : { name: "Volume0", type: "svg", label: UIString("Mute") },
     45    Volume0RTL      : { name: "Volume0-RTL", type: "svg", label: UIString("Mute") },
     46    Volume1         : { name: "Volume1", type: "svg", label: UIString("Mute") },
     47    Volume1RTL      : { name: "Volume1-RTL", type: "svg", label: UIString("Mute") },
     48    Volume2         : { name: "Volume2", type: "svg", label: UIString("Mute") },
     49    Volume2RTL      : { name: "Volume2-RTL", type: "svg", label: UIString("Mute") },
     50    Volume3         : { name: "Volume3", type: "svg", label: UIString("Mute") },
     51    Volume3RTL      : { name: "Volume3-RTL", type: "svg", label: UIString("Mute") },
     52    VolumeMuted     : { name: "VolumeMuted", type: "svg", label: UIString("Unmute") },
     53    VolumeMutedRTL  : { name: "VolumeMuted-RTL", type: "svg", label: UIString("Unmute") },
    5054};
    5155

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

    r265709 r272375  
    167167        this.rightContainer.children.concat(this.leftContainer.children).forEach(button => delete button.dropped);
    168168        this.muteButton.style = this.preferredMuteButtonStyle;
    169         this.muteButton.usesRTLIconVariant = !this.usesLTRUserInterfaceLayoutDirection;
    170169
    171170        for (let button of this._droppableButtons()) {
    … …  
    287286        delete this.muteButton.dropped;
    288287        this.muteButton.style = Button.Styles.Bar;
    289         this.muteButton.usesRTLIconVariant = !this.usesLTRUserInterfaceLayoutDirection;
    290288        this._topRightControlsBarContainer.children = [this.muteButton];
    291289        this._topRightControlsBarContainer.layout();

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css

    r265709 r272375  
    4343/* Volume controls */
    4444
    45 .media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) :is(.volume-down, .volume.slider, .volume-up) {
     45.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider {
    4646    transform: scaleX(-1);
    4747}

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js

    r272352 r272375  
    4242
    4343        // Set up fullscreen-specific buttons.
    44         this.volumeDownButton = new VolumeDownButton(this);
    45         this.volumeUpButton = new VolumeUpButton(this);
    4644        this.rewindButton = new RewindButton(this);
    4745        this.forwardButton = new ForwardButton(this);
    … …  
    148146    _volumeControlsForCurrentDirection()
    149147    {
    150         return this.usesLTRUserInterfaceLayoutDirection ? [this.volumeDownButton, this.volumeSlider, this.volumeUpButton] : [this.volumeUpButton, this.volumeSlider, this.volumeDownButton];
     148        return this.usesLTRUserInterfaceLayoutDirection ? [this.muteButton, this.volumeSlider] : [this.volumeSlider, this.muteButton];
    151149    }
    152150

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

    r226796 r272375  
    119119        this.needsLayout = this.usesLTRUserInterfaceLayoutDirection !== flag;
    120120        this.element.classList.toggle("uses-ltr-user-interface-layout-direction", flag);
     121
     122        this.muteButton.usesLTRUserInterfaceLayoutDirection = this.usesLTRUserInterfaceLayoutDirection;
    121123    }
    122124

  • trunk/Source/WebCore/Modules/modern-media-controls/controls/mute-button.js

    r218991 r272375  
    3131        super({
    3232            cssClassName: "mute",
    33             iconName: Icons.Volume,
     33            iconName: Icons.VolumeMutedRTL,
    3434            layoutDelegate
    3535        });
    3636
    37         this._muted = false;
    38         this._usesRTLIconVariant = false;
     37        this._volume = 1;
     38        this._muted = true;
     39
     40        this._usesLTRUserInterfaceLayoutDirection = undefined;
    3941    }
    4042
    4143    // Public
     44
     45    get volume()
     46    {
     47        return this._volume;
     48    }
     49
     50    set volume(volume)
     51    {
     52        if (this._volume === volume)
     53            return;
     54
     55        this._volume = volume;
     56        this.needsLayout = true;
     57    }
    4258
    4359    get muted()
    … …  
    5571    }
    5672
    57     set usesRTLIconVariant(flag)
     73    set usesLTRUserInterfaceLayoutDirection(usesLTRUserInterfaceLayoutDirection)
    5874    {
    59         if (this._usesRTLIconVariant === flag)
     75        if (usesLTRUserInterfaceLayoutDirection === this._usesLTRUserInterfaceLayoutDirection)
    6076            return;
    6177
    62         this._usesRTLIconVariant = flag;
     78        this._usesLTRUserInterfaceLayoutDirection = usesLTRUserInterfaceLayoutDirection;
     79
    6380        this.needsLayout = true;
    6481    }
    … …  
    6885    layout()
    6986    {
    70         if (this._usesRTLIconVariant)
    71             this.iconName = this._muted ? Icons.VolumeMutedRTL : Icons.VolumeRTL;
     87        if (this._muted || this._volume < 0)
     88            this.iconName = this._usesLTRUserInterfaceLayoutDirection ? Icons.VolumeMuted : Icons.VolumeMutedRTL;
     89        else if (this._volume < 0.25)
     90            this.iconName = this._usesLTRUserInterfaceLayoutDirection ? Icons.Volume0 : Icons.Volume0RTL;
     91        else if (this._volume < 0.5)
     92            this.iconName = this._usesLTRUserInterfaceLayoutDirection ? Icons.Volume1 : Icons.Volume1RTL;
     93        else if (this._volume < 0.75)
     94            this.iconName = this._usesLTRUserInterfaceLayoutDirection ? Icons.Volume2 : Icons.Volume2RTL;
    7295        else
    73             this.iconName = this._muted ? Icons.VolumeMuted : Icons.Volume;
     96            this.iconName = this._usesLTRUserInterfaceLayoutDirection ? Icons.Volume3 : Icons.Volume3RTL;
    7497    }
    75 
    7698}

  • trunk/Source/WebCore/Modules/modern-media-controls/js-files

    r230895 r272375  
    2323controls/rewind-button.js
    2424controls/forward-button.js
    25 controls/volume-down-button.js
    26 controls/volume-up-button.js
    2725controls/buttons-container.js
    2826controls/status-label.js
    … …  
    6159media/time-control-support.js
    6260media/tracks-support.js
    63 media/volume-down-support.js
    6461media/volume-support.js
    65 media/volume-up-support.js
    6662media/media-document-controller.js
    6763media/compact-media-controls-support.js

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

    r264684 r272375  
    187187            return [CompactMediaControlsSupport];
    188188
    189         return [AirplaySupport, AudioSupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, SkipForwardSupport, StartSupport, StatusSupport, TimeControlSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport];
     189        return [AirplaySupport, AudioSupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, SkipForwardSupport, StartSupport, StatusSupport, TimeControlSupport, TracksSupport, VolumeSupport];
    190190    }
    191191

  • trunk/Source/WebCore/Modules/modern-media-controls/media/mute-support.js

    r209451 r272375  
    4747    syncControl()
    4848    {
     49        this.control.volume = this.mediaController.media.volume;
    4950        this.control.muted = this.mediaController.media.muted;
    5051    }

  • trunk/Source/WebCore/Modules/modern-media-controls/media/volume-support.js

    r213848 r272375  
    4242    {
    4343        this._volumeBeforeChange = this.mediaController.media.volume;
    44         this.mediaController.media.muted = false;
    4544    }
    4645

  • trunk/Source/WebCore/html/HTMLMediaElement.cpp

    r272313 r272375  
    71437143            return true;
    71447144
    7145 #ifndef NDEBUG
     7145#if ENGINEERING_BUILD || !defined(NDEBUG)
    71467146        // Setting a scriptURL allows the source to be debuggable in the inspector.
    71477147        URL scriptURL = URL({ }, "mediaControlsScript"_s);
Note: See TracChangeset for help on using the changeset viewer.