Top controls bars should invert with right-to-left user interface layout direction...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 30 Jun 2017 07:48:37 +0000 (07:48 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 30 Jun 2017 07:48:37 +0000 (07:48 +0000)
https://bugs.webkit.org/show_bug.cgi?id=173989
<rdar://problem/32863552>

Patch by Antoine Quint <graouts@apple.com> on 2017-06-30
Reviewed by Dean Jackson.

Source/WebCore:

When the user interface layout direction is set by the locale to be right-to-left, we now:

    - invert the two top controls bars
    - invert the layout order for the fullscreen / PiP controls bar
    - orient the volume button the opposite direction when presented in a top controls bar

Test: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html

* Modules/modern-media-controls/controls/icon-service.js: Add new RTL variants for the mute and unmute icons.
* Modules/modern-media-controls/controls/inline-media-controls.css: Invert the position of the two top controls
bars when we switch user interface layout direction.
(.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-left,):
(.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-right,):
(.media-controls.inline > .controls-bar.top-left): Deleted.
(.media-controls.inline > .controls-bar.top-right): Deleted.
* Modules/modern-media-controls/controls/inline-media-controls.js:
(InlineMediaControls.prototype.layout): Default to using the LTR variant for the mute button icon since
it should only use the RTL variant in case the locale requires it *and* we display the mute button in a
top controls bar rather than the bottom controls bar (ie. when width becomes constrained).
(InlineMediaControls.prototype._topLeftContainerButtons): Invert the order of the fullscreen and PiP
buttons based on the user interface layout direction.
(InlineMediaControls.prototype._addTopRightBarWithMuteButtonToChildren):
(InlineMediaControls):
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection): Schedule a layout when the user interface
layout direction changes.
* Modules/modern-media-controls/controls/mute-button.js: Add a new "usesRTLIconVariant" property, false by
default, to indicate we want to use the RTL variant of the button's icon.
(MuteButton):
(MuteButton.prototype.get muted):
(MuteButton.prototype.set muted):
(MuteButton.prototype.set usesRTLIconVariant):
(MuteButton.prototype.layout):
* Modules/modern-media-controls/images/iOS/Mute-RTL.svg: Added.
* Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg: Added.
* Modules/modern-media-controls/images/macOS/Mute-RTL.svg: Added.
* Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg: Added.
* Modules/modern-media-controls/media/media-controller.js: Use an ivar to track when it's worth notifying the
media controls that the user interface layout direction has changed. This means we won't need to schedule a
layout in case it's set to the current value.
(MediaController):
(MediaController.prototype.set usesLTRUserInterfaceLayoutDirection):

LayoutTests:

Add a new test to check we correctly layout the top controls bars in RTL and rebaseline a
test that now requires an asynchronous assertion.

* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html: Added.
* media/modern-media-controls/mute-button/mute-button-expected.txt:
* media/modern-media-controls/mute-button/mute-button.html:
* platform/mac/TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@218991 268f45cc-cd09-0410-ab3c-d52691b4dbfc

17 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/mute-button/mute-button-expected.txt
LayoutTests/media/modern-media-controls/mute-button/mute-button.html
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/icon-service.js
Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/mute-button.js
Source/WebCore/Modules/modern-media-controls/images/iOS/Mute-RTL.svg [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/media/media-controller.js

index ecde04a..3320a6c 100644 (file)
@@ -1,3 +1,20 @@
+2017-06-30  Antoine Quint  <graouts@apple.com>
+
+        Top controls bars should invert with right-to-left user interface layout direction locale
+        https://bugs.webkit.org/show_bug.cgi?id=173989
+        <rdar://problem/32863552>
+
+        Reviewed by Dean Jackson.
+
+        Add a new test to check we correctly layout the top controls bars in RTL and rebaseline a
+        test that now requires an asynchronous assertion.
+
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html: Added.
+        * media/modern-media-controls/mute-button/mute-button-expected.txt:
+        * media/modern-media-controls/mute-button/mute-button.html:
+        * platform/mac/TestExpectations:
+
 2017-06-30  Dean Jackson  <dino@apple.com>
 
         REGRESSION (High Sierra): Gradient LayoutTests are failing
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt
new file mode 100644 (file)
index 0000000..afd1db4
--- /dev/null
@@ -0,0 +1,44 @@
+Testing that control bars and the mute button respect the user interface layout direction.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+width = 600
+muted = false
+usesLTRUserInterfaceLayoutDirection = true
+PASS mediaControls.muteButton.iconName became Icons.Volume
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.fullscreenButton, mediaControls.pipButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).left became "6px"
+
+width = 600
+muted = false
+usesLTRUserInterfaceLayoutDirection = false
+PASS mediaControls.muteButton.iconName became Icons.Volume
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.pipButton, mediaControls.fullscreenButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
+
+width = 250
+muted = false
+usesLTRUserInterfaceLayoutDirection = false
+PASS mediaControls.muteButton.iconName became Icons.VolumeRTL
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.pipButton, mediaControls.fullscreenButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
+
+width = 250
+muted = true
+usesLTRUserInterfaceLayoutDirection = false
+PASS mediaControls.muteButton.iconName became Icons.VolumeMutedRTL
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.pipButton, mediaControls.fullscreenButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
+
+width = 250
+muted = true
+usesLTRUserInterfaceLayoutDirection = true
+PASS mediaControls.muteButton.iconName became Icons.VolumeMuted
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.fullscreenButton, mediaControls.pipButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).left became "6px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html
new file mode 100644 (file)
index 0000000..2b9e17e
--- /dev/null
@@ -0,0 +1,106 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing that control bars and the mute button respect the user interface layout direction.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 250 });
+mediaControls.usesLTRUserInterfaceLayoutDirection = true;
+
+mediaControls.element.style.position = "relative";
+document.body.appendChild(mediaControls.element);
+
+step1();
+
+function step1()
+{
+    debug("width = 600");
+    debug("muted = false");
+    debug("usesLTRUserInterfaceLayoutDirection = true");
+    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume", () => {
+        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
+            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", step2);
+        });
+    });
+}
+
+function step2()
+{
+    debug("");
+    debug("width = 600");
+    debug("muted = false");
+    debug("usesLTRUserInterfaceLayoutDirection = false");
+    mediaControls.usesLTRUserInterfaceLayoutDirection = false;
+    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume", () => {
+        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
+            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step3);
+        });
+    });
+}
+
+function step3()
+{
+    debug("");
+    debug("width = 250");
+    debug("muted = false");
+    debug("usesLTRUserInterfaceLayoutDirection = false");
+    mediaControls.width = 250;
+    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeRTL", () => {
+        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
+            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step4);
+        });
+    });
+}
+
+function step4()
+{
+    debug("");
+    debug("width = 250");
+    debug("muted = true");
+    debug("usesLTRUserInterfaceLayoutDirection = false");
+    mediaControls.muteButton.muted = true;
+    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
+        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
+            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step5);
+        });
+    });
+}
+
+function step5()
+{
+    debug("");
+    debug("width = 250");
+    debug("muted = true");
+    debug("usesLTRUserInterfaceLayoutDirection = true");
+    mediaControls.usesLTRUserInterfaceLayoutDirection = true;
+    shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMuted", () => {
+        shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
+            shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", done);
+        });
+    });
+}
+
+function done()
+{
+    debug("");
+    mediaControls.element.remove();
+    finishJSTest();
+}
+
+// debug("Mute button is enabled");
+// shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
+// shouldBe("mediaControls.topRightControlsBar.parent", "mediaControls");
+//
+// debug("")
+// debug("Mute button is disabled");
+// mediaControls.muteButton.enabled = false;
+// shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
+// shouldBeNull("mediaControls.topRightControlsBar.parent");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index 878f2b5..114c947 100644 (file)
@@ -8,7 +8,7 @@ PASS muteButton.element.classList.contains("mute") is true
 PASS muteButton.iconName is Icons.Volume
 PASS muteButton.muted is false
 PASS mutedButton.muted is true
-PASS mutedButton.iconName is Icons.VolumeMuted
+PASS mutedButton.iconName became Icons.VolumeMuted
 PASS muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeHi.svg") became true
 PASS mutedButton.image.element.style.webkitMaskImage.includes("macOS/Mute.svg") became true
 PASS successfullyParsed is true
index b075a3f..7fcfa9d 100644 (file)
@@ -18,10 +18,10 @@ shouldBeFalse("muteButton.muted");
 const mutedButton = new MuteButton({ layoutTraits: LayoutTraits.macOS });
 mutedButton.muted = true;
 shouldBeTrue("mutedButton.muted");
-shouldBe("mutedButton.iconName", "Icons.VolumeMuted");
-
-shouldBecomeEqual('muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeHi.svg")', "true", () => {
-    shouldBecomeEqual('mutedButton.image.element.style.webkitMaskImage.includes("macOS/Mute.svg")', "true", finishJSTest);
+shouldBecomeEqual("mutedButton.iconName", "Icons.VolumeMuted", () => {
+    shouldBecomeEqual('muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeHi.svg")', "true", () => {
+        shouldBecomeEqual('mutedButton.image.element.style.webkitMaskImage.includes("macOS/Mute.svg")', "true", finishJSTest);
+    });
 });
 
 </script>
index 56a9798..43a1162 100644 (file)
@@ -1558,6 +1558,7 @@ media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-med
 media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-controls-hidden-when-mute-button-disabled.html [ Pass ]
 media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html [ Pass ]
 media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-top-right-controls-bar-hidden-when-mute-button-disabled.html [ Pass ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html [ Pass ]
 media/modern-media-controls/media-documents [ Pass ]
 media/modern-media-controls/mute-button [ Pass ]
 media/modern-media-controls/mute-support [ Pass ]
index 7e9fe53..3b6d5a0 100644 (file)
@@ -1,3 +1,54 @@
+2017-06-30  Antoine Quint  <graouts@apple.com>
+
+        Top controls bars should invert with right-to-left user interface layout direction locale
+        https://bugs.webkit.org/show_bug.cgi?id=173989
+        <rdar://problem/32863552>
+
+        Reviewed by Dean Jackson.
+
+        When the user interface layout direction is set by the locale to be right-to-left, we now:
+
+            - invert the two top controls bars
+            - invert the layout order for the fullscreen / PiP controls bar
+            - orient the volume button the opposite direction when presented in a top controls bar
+
+        Test: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html
+
+        * Modules/modern-media-controls/controls/icon-service.js: Add new RTL variants for the mute and unmute icons.
+        * Modules/modern-media-controls/controls/inline-media-controls.css: Invert the position of the two top controls
+        bars when we switch user interface layout direction.
+        (.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-left,):
+        (.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-right,):
+        (.media-controls.inline > .controls-bar.top-left): Deleted.
+        (.media-controls.inline > .controls-bar.top-right): Deleted.
+        * Modules/modern-media-controls/controls/inline-media-controls.js:
+        (InlineMediaControls.prototype.layout): Default to using the LTR variant for the mute button icon since
+        it should only use the RTL variant in case the locale requires it *and* we display the mute button in a
+        top controls bar rather than the bottom controls bar (ie. when width becomes constrained).
+        (InlineMediaControls.prototype._topLeftContainerButtons): Invert the order of the fullscreen and PiP
+        buttons based on the user interface layout direction.
+        (InlineMediaControls.prototype._addTopRightBarWithMuteButtonToChildren):
+        (InlineMediaControls):
+        * Modules/modern-media-controls/controls/media-controls.js:
+        (MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection): Schedule a layout when the user interface
+        layout direction changes.
+        * Modules/modern-media-controls/controls/mute-button.js: Add a new "usesRTLIconVariant" property, false by
+        default, to indicate we want to use the RTL variant of the button's icon.
+        (MuteButton):
+        (MuteButton.prototype.get muted):
+        (MuteButton.prototype.set muted):
+        (MuteButton.prototype.set usesRTLIconVariant):
+        (MuteButton.prototype.layout):
+        * Modules/modern-media-controls/images/iOS/Mute-RTL.svg: Added.
+        * Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg: Added.
+        * Modules/modern-media-controls/images/macOS/Mute-RTL.svg: Added.
+        * Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg: Added.
+        * Modules/modern-media-controls/media/media-controller.js: Use an ivar to track when it's worth notifying the
+        media controls that the user interface layout direction has changed. This means we won't need to schedule a
+        layout in case it's set to the current value.
+        (MediaController):
+        (MediaController.prototype.set usesLTRUserInterfaceLayoutDirection):
+
 2017-06-29  Zalan Bujtas  <zalan@apple.com>
 
         BreakingContext::handleReplaced() should use replacedBox instead of m_current.renderer().
index 8c61640..2a5052f 100644 (file)
@@ -39,8 +39,10 @@ const Icons = {
     SkipForward     : { name: "SkipForward15", type: "svg", label: UIString("Skip Forward 15 seconds") },
     Tracks          : { name: "MediaSelector", type: "svg", label: UIString("Media Selection") },
     Volume          : { name: "VolumeHi", type: "svg", label: UIString("Mute") },
+    VolumeRTL       : { name: "VolumeHi-RTL", type: "svg", label: UIString("Mute") },
     VolumeDown      : { name: "VolumeLo", type: "svg", label: UIString("Volume Down") },
     VolumeMuted     : { name: "Mute", type: "svg", label: UIString("Unmute") },
+    VolumeMutedRTL  : { name: "Mute-RTL", type: "svg", label: UIString("Unmute") },
     VolumeUp        : { name: "VolumeHi", type: "svg", label: UIString("Volume Up") }
 };
 
index abb0d8d..a73f183 100644 (file)
     height: var(--inline-controls-bar-height);
 }
 
-.media-controls.inline > .controls-bar.top-left {
+.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-left,
+.media-controls.inline:not(.uses-ltr-user-interface-layout-direction) > .controls-bar.top-right {
     top: var(--inline-controls-inside-margin);
 }
 
-.media-controls.inline > .controls-bar.top-right {
+.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-right,
+.media-controls.inline:not(.uses-ltr-user-interface-layout-direction) > .controls-bar.top-left {
     left: auto;
     right: var(--inline-controls-inside-margin);
     top: var(--inline-controls-inside-margin);
index 69d343e..24d02b4 100644 (file)
@@ -164,6 +164,7 @@ class InlineMediaControls extends MediaControls
         this.rightContainer.buttons = this._rightContainerButtons();
         this.rightContainer.buttons.concat(this.leftContainer.buttons).forEach(button => delete button.dropped);
         this.muteButton.style = this.preferredMuteButtonStyle;
+        this.muteButton.usesRTLIconVariant = false;
 
         for (let button of this._droppableButtons()) {
             // If the button is not enabled, we can skip it.
@@ -239,7 +240,9 @@ class InlineMediaControls extends MediaControls
     {
         if (this._shouldUseSingleBarLayout)
             return [];
-        return [this.fullscreenButton, this.pipButton];
+        if (this.usesLTRUserInterfaceLayoutDirection)
+            return [this.fullscreenButton, this.pipButton];
+        return [this.pipButton, this.fullscreenButton];
     }
 
     _leftContainerButtons()
@@ -280,6 +283,7 @@ class InlineMediaControls extends MediaControls
 
         delete this.muteButton.dropped;
         this.muteButton.style = Button.Styles.Bar;
+        this.muteButton.usesRTLIconVariant = !this.usesLTRUserInterfaceLayoutDirection;
         this._topRightControlsBarContainer.buttons = [this.muteButton];
         this._topRightControlsBarContainer.layout();
         this.topRightControlsBar.width = this._topRightControlsBarContainer.width;
index 95bcc4f..4b500ab 100644 (file)
@@ -113,6 +113,7 @@ class MediaControls extends LayoutNode
 
     set usesLTRUserInterfaceLayoutDirection(flag)
     {
+        this.needsLayout = this.usesLTRUserInterfaceLayoutDirection !== flag;
         this.element.classList.toggle("uses-ltr-user-interface-layout-direction", flag);
     }
 
index 193ae97..9698d87 100644 (file)
@@ -33,21 +33,44 @@ class MuteButton extends Button
             iconName: Icons.Volume,
             layoutDelegate
         });
+
+        this._muted = false;
+        this._usesRTLIconVariant = false;
     }
 
     // Public
 
     get muted()
     {
-        return this.iconName === Icons.VolumeMuted;
+        return this._muted;
     }
 
     set muted(flag)
     {
-        if (this.muted === flag)
+        if (this._muted === flag)
+            return;
+
+        this._muted = flag;
+        this.needsLayout = true;
+    }
+
+    set usesRTLIconVariant(flag)
+    {
+        if (this._usesRTLIconVariant === flag)
             return;
 
-        this.iconName = flag ? Icons.VolumeMuted : Icons.Volume;
+        this._usesRTLIconVariant = flag;
+        this.needsLayout = true;
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (this._usesRTLIconVariant)
+            this.iconName = this._muted ? Icons.VolumeMutedRTL : Icons.VolumeRTL;
+        else
+            this.iconName = this._muted ? Icons.VolumeMuted : Icons.Volume;
     }
 
 }
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/Mute-RTL.svg b/Source/WebCore/Modules/modern-media-controls/images/iOS/Mute-RTL.svg
new file mode 100644 (file)
index 0000000..9f555e0
--- /dev/null
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>_Assets/Both/Mute RTL</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Media-Control-Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="_Assets/Both/Mute-RTL" fill="#000000">
+            <path d="M15.0384401,12.4336332 L14.7151198,12.7445465 C14.3273368,13.1174489 14,12.9886171 14,12.44141 L14,11.8340896 L15.0384401,12.4336332 Z M14,7.79263767 L14,2.56259782 C14,2.02224368 14.328475,1.87372699 14.7336617,2.24618642 L17.7297388,5.00026821 C17.7787854,5 17.8276579,5 17.877,5 L20.123,5 C20.195,5 20.266,5 20.338,5.00083333 C20.398,5.00083333 20.459,5.00166667 20.519,5.0025 C20.651,5.00583333 20.783,5.01166667 20.913,5.03166667 C21.045,5.05166667 21.168,5.08333333 21.288,5.13416667 C21.406,5.18416667 21.514,5.25 21.607,5.3275 C21.701,5.40583333 21.779,5.495 21.839,5.59333333 C21.9,5.69333333 21.939,5.79583333 21.962,5.90583333 C21.986,6.01416667 21.993,6.125 21.997,6.23416667 C21.999,6.28416667 21.999,6.335 21.999,6.385 C22,6.445 22,6.50416667 22,6.56416667 L22,8.43583333 C22,8.49583333 22,8.55583333 21.999,8.615 C21.999,8.66583333 21.999,8.71583333 21.997,8.76583333 C21.993,8.87583333 21.986,8.98583333 21.962,9.09416667 C21.939,9.20416667 21.9,9.30666667 21.839,9.40666667 C21.779,9.505 21.701,9.595 21.607,9.6725 C21.514,9.75083333 21.406,9.81583333 21.288,9.86583333 C21.168,9.91666667 21.045,9.94916667 20.913,9.96833333 C20.783,9.98833333 20.651,9.99416667 20.519,9.9975 C20.459,9.99916667 20.398,9.99916667 20.338,10 L20.123,10 L17.877,10 L17.8232637,10 L14,7.79263767 Z M12.0984016,10.7362012 C12.0719556,10.7963525 12.0306958,10.8516898 11.975,10.8969802 C11.786,11.0514833 11.502,11.0295606 11.34,10.848959 C11.0688063,10.5458841 10.8359472,10.228546 10.6440423,9.89652647 L12.0984016,10.7362012 Z M10.3551781,5.68829877 C10.5818609,5.1395229 10.9135304,4.62764579 11.34,4.15104101 C11.502,3.97043942 11.786,3.94851668 11.975,4.10301978 C12.165,4.25752287 12.187,4.52894723 12.026,4.70954882 C11.6287256,5.15341338 11.3293676,5.62791235 11.1397237,6.1412564 L10.3551781,5.68829877 Z M6.00498141,7.21816342 L6.90494133,7.73775552 C6.9605099,9.41225607 7.60202565,11.0012512 8.725,12.307171 C8.882,12.4897218 8.852,12.7568441 8.659,12.90536 C8.466,13.0528445 8.182,13.0249978 8.025,12.842447 C6.719,11.3242845 6,9.45649073 6,7.5 C6,7.40583933 6.00166538,7.31188411 6.00498141,7.21816342 Z M6.95104701,3.72292276 C7.24532664,3.17072984 7.60477673,2.64604244 8.025,2.15755298 C8.182,1.97500219 8.466,1.94715546 8.659,2.09464 C8.852,2.2431559 8.882,2.51027825 8.725,2.69282905 C8.32972705,3.15249651 7.99410451,3.64723565 7.72268909,4.16843052 L6.95104701,3.72292276 Z M2.26185384,5.05706771 L3.08281215,5.53104821 C2.96197404,6.16994634 2.901,6.82684524 2.901,7.5 C2.901,10.0310229 3.763,12.3322339 5.428,14.3108837 C5.583,14.4953516 5.551,14.7622632 5.355,14.9075703 C5.161,15.0539079 4.877,15.0229915 4.722,14.8395542 C2.929,12.7083835 2,10.2247657 2,7.5 C2,6.66178829 2.08791538,5.84639747 2.26185384,5.05706771 Z M3.57096454,1.77143124 C3.90321848,1.21476886 4.28720592,0.677244684 4.722,0.160445787 C4.877,-0.0229915406 5.161,-0.0539079442 5.355,0.0924296995 C5.551,0.237736796 5.583,0.504648414 5.428,0.689116289 C5.01602607,1.17869716 4.6532138,1.68802602 4.34045694,2.21569788 L3.57096454,1.77143124 Z M0.348205106,1.99951896 C0.555310106,1.64080257 1.00825831,1.51457545 1.37243073,1.7248305 L21.3782047,13.2751695 C21.7367591,13.4821809 21.8609811,13.9382988 21.6524304,14.2995191 C21.4453254,14.6582355 20.9923772,14.7844627 20.6282047,14.5742076 L0.622430735,3.0238686 C0.263876405,2.81685716 0.139654415,2.36073935 0.348205106,1.99951896 Z" id="iOS/Fullscreen/Mute" style="mix-blend-mode: normal;"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg b/Source/WebCore/Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg
new file mode 100644 (file)
index 0000000..98146fb
--- /dev/null
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>_Assets/Both/VolumeHi RTL</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Media-Control-Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="_Assets/Both/VolumeHi-RTL" fill="#000000" transform="translate(2, 0)">
+            <path d="M15.5701763,9.99904876 L12.7151198,12.7445465 C12.3273368,13.1174489 12,12.9886171 12,12.44141 L12,2.56259782 C12,2.02224368 12.328475,1.87372699 12.7336617,2.24618642 L15.7297388,5.00026821 C15.7787854,5 15.8276579,5 15.877,5 L18.123,5 C18.195,5 18.266,5 18.338,5.00083333 C18.398,5.00083333 18.459,5.00166667 18.519,5.0025 C18.651,5.00583333 18.783,5.01166667 18.913,5.03166667 C19.045,5.05166667 19.168,5.08333333 19.288,5.13416667 C19.406,5.18416667 19.514,5.25 19.607,5.3275 C19.701,5.40583333 19.779,5.495 19.839,5.59333333 C19.9,5.69333333 19.939,5.79583333 19.962,5.90583333 C19.986,6.01416667 19.993,6.125 19.997,6.23416667 C19.999,6.28416667 19.999,6.335 19.999,6.385 C20,6.445 20,6.50416667 20,6.56416667 L20,8.43583333 C20,8.49583333 20,8.55583333 19.999,8.615 C19.999,8.66583333 19.999,8.71583333 19.997,8.76583333 C19.993,8.87583333 19.986,8.98583333 19.962,9.09416667 C19.939,9.20416667 19.9,9.30666667 19.839,9.40666667 C19.779,9.505 19.701,9.595 19.607,9.6725 C19.514,9.75083333 19.406,9.81583333 19.288,9.86583333 C19.168,9.91666667 19.045,9.94916667 18.913,9.96833333 C18.783,9.98833333 18.651,9.99416667 18.519,9.9975 C18.459,9.99916667 18.398,9.99916667 18.338,10 L18.123,10 L15.877,10 L15.662,10 C15.6315624,9.99957726 15.6008675,9.99936897 15.5701763,9.99904876 Z M10.026,10.2904512 C10.187,10.4710528 10.165,10.7424771 9.975,10.8969802 C9.786,11.0514833 9.502,11.0295606 9.34,10.848959 C8.475,9.8822707 8,8.77047478 8,7.5 C8,6.22952522 8.475,5.1177293 9.34,4.15104101 C9.502,3.97043942 9.786,3.94851668 9.975,4.10301978 C10.165,4.25752287 10.187,4.52894723 10.026,4.70954882 C9.3,5.52069007 8.901,6.43413743 8.901,7.5 C8.901,8.56586257 9.3,9.47930993 10.026,10.2904512 Z M6.725,12.307171 C6.882,12.4897218 6.852,12.7568441 6.659,12.90536 C6.466,13.0528445 6.182,13.0249978 6.025,12.842447 C4.719,11.3242845 4,9.45649073 4,7.5 C4,5.54350927 4.719,3.67571553 6.025,2.15755298 C6.182,1.97500219 6.466,1.94715546 6.659,2.09464 C6.852,2.2431559 6.882,2.51027825 6.725,2.69282905 C5.549,4.06041297 4.901,5.73843639 4.901,7.5 C4.901,9.26156361 5.549,10.939587 6.725,12.307171 Z M3.428,14.3108837 C3.583,14.4953516 3.551,14.7622632 3.355,14.9075703 C3.161,15.0539079 2.877,15.0229915 2.722,14.8395542 C0.929,12.7083835 8.8817842e-16,10.2247657 8.8817842e-16,7.5 C8.8817842e-16,4.7752343 0.929,2.29161654 2.722,0.160445787 C2.877,-0.0229915406 3.161,-0.0539079442 3.355,0.0924296995 C3.551,0.237736796 3.583,0.504648414 3.428,0.689116289 C1.763,2.66776612 0.901,4.96897709 0.901,7.5 C0.901,10.0310229 1.763,12.3322339 3.428,14.3108837 Z" id="iOS/Fullscreen/Mute" style="mix-blend-mode: normal;"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg b/Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg
new file mode 100644 (file)
index 0000000..9f555e0
--- /dev/null
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>_Assets/Both/Mute RTL</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Media-Control-Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="_Assets/Both/Mute-RTL" fill="#000000">
+            <path d="M15.0384401,12.4336332 L14.7151198,12.7445465 C14.3273368,13.1174489 14,12.9886171 14,12.44141 L14,11.8340896 L15.0384401,12.4336332 Z M14,7.79263767 L14,2.56259782 C14,2.02224368 14.328475,1.87372699 14.7336617,2.24618642 L17.7297388,5.00026821 C17.7787854,5 17.8276579,5 17.877,5 L20.123,5 C20.195,5 20.266,5 20.338,5.00083333 C20.398,5.00083333 20.459,5.00166667 20.519,5.0025 C20.651,5.00583333 20.783,5.01166667 20.913,5.03166667 C21.045,5.05166667 21.168,5.08333333 21.288,5.13416667 C21.406,5.18416667 21.514,5.25 21.607,5.3275 C21.701,5.40583333 21.779,5.495 21.839,5.59333333 C21.9,5.69333333 21.939,5.79583333 21.962,5.90583333 C21.986,6.01416667 21.993,6.125 21.997,6.23416667 C21.999,6.28416667 21.999,6.335 21.999,6.385 C22,6.445 22,6.50416667 22,6.56416667 L22,8.43583333 C22,8.49583333 22,8.55583333 21.999,8.615 C21.999,8.66583333 21.999,8.71583333 21.997,8.76583333 C21.993,8.87583333 21.986,8.98583333 21.962,9.09416667 C21.939,9.20416667 21.9,9.30666667 21.839,9.40666667 C21.779,9.505 21.701,9.595 21.607,9.6725 C21.514,9.75083333 21.406,9.81583333 21.288,9.86583333 C21.168,9.91666667 21.045,9.94916667 20.913,9.96833333 C20.783,9.98833333 20.651,9.99416667 20.519,9.9975 C20.459,9.99916667 20.398,9.99916667 20.338,10 L20.123,10 L17.877,10 L17.8232637,10 L14,7.79263767 Z M12.0984016,10.7362012 C12.0719556,10.7963525 12.0306958,10.8516898 11.975,10.8969802 C11.786,11.0514833 11.502,11.0295606 11.34,10.848959 C11.0688063,10.5458841 10.8359472,10.228546 10.6440423,9.89652647 L12.0984016,10.7362012 Z M10.3551781,5.68829877 C10.5818609,5.1395229 10.9135304,4.62764579 11.34,4.15104101 C11.502,3.97043942 11.786,3.94851668 11.975,4.10301978 C12.165,4.25752287 12.187,4.52894723 12.026,4.70954882 C11.6287256,5.15341338 11.3293676,5.62791235 11.1397237,6.1412564 L10.3551781,5.68829877 Z M6.00498141,7.21816342 L6.90494133,7.73775552 C6.9605099,9.41225607 7.60202565,11.0012512 8.725,12.307171 C8.882,12.4897218 8.852,12.7568441 8.659,12.90536 C8.466,13.0528445 8.182,13.0249978 8.025,12.842447 C6.719,11.3242845 6,9.45649073 6,7.5 C6,7.40583933 6.00166538,7.31188411 6.00498141,7.21816342 Z M6.95104701,3.72292276 C7.24532664,3.17072984 7.60477673,2.64604244 8.025,2.15755298 C8.182,1.97500219 8.466,1.94715546 8.659,2.09464 C8.852,2.2431559 8.882,2.51027825 8.725,2.69282905 C8.32972705,3.15249651 7.99410451,3.64723565 7.72268909,4.16843052 L6.95104701,3.72292276 Z M2.26185384,5.05706771 L3.08281215,5.53104821 C2.96197404,6.16994634 2.901,6.82684524 2.901,7.5 C2.901,10.0310229 3.763,12.3322339 5.428,14.3108837 C5.583,14.4953516 5.551,14.7622632 5.355,14.9075703 C5.161,15.0539079 4.877,15.0229915 4.722,14.8395542 C2.929,12.7083835 2,10.2247657 2,7.5 C2,6.66178829 2.08791538,5.84639747 2.26185384,5.05706771 Z M3.57096454,1.77143124 C3.90321848,1.21476886 4.28720592,0.677244684 4.722,0.160445787 C4.877,-0.0229915406 5.161,-0.0539079442 5.355,0.0924296995 C5.551,0.237736796 5.583,0.504648414 5.428,0.689116289 C5.01602607,1.17869716 4.6532138,1.68802602 4.34045694,2.21569788 L3.57096454,1.77143124 Z M0.348205106,1.99951896 C0.555310106,1.64080257 1.00825831,1.51457545 1.37243073,1.7248305 L21.3782047,13.2751695 C21.7367591,13.4821809 21.8609811,13.9382988 21.6524304,14.2995191 C21.4453254,14.6582355 20.9923772,14.7844627 20.6282047,14.5742076 L0.622430735,3.0238686 C0.263876405,2.81685716 0.139654415,2.36073935 0.348205106,1.99951896 Z" id="iOS/Fullscreen/Mute" style="mix-blend-mode: normal;"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg b/Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg
new file mode 100644 (file)
index 0000000..98146fb
--- /dev/null
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>_Assets/Both/VolumeHi RTL</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Media-Control-Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="_Assets/Both/VolumeHi-RTL" fill="#000000" transform="translate(2, 0)">
+            <path d="M15.5701763,9.99904876 L12.7151198,12.7445465 C12.3273368,13.1174489 12,12.9886171 12,12.44141 L12,2.56259782 C12,2.02224368 12.328475,1.87372699 12.7336617,2.24618642 L15.7297388,5.00026821 C15.7787854,5 15.8276579,5 15.877,5 L18.123,5 C18.195,5 18.266,5 18.338,5.00083333 C18.398,5.00083333 18.459,5.00166667 18.519,5.0025 C18.651,5.00583333 18.783,5.01166667 18.913,5.03166667 C19.045,5.05166667 19.168,5.08333333 19.288,5.13416667 C19.406,5.18416667 19.514,5.25 19.607,5.3275 C19.701,5.40583333 19.779,5.495 19.839,5.59333333 C19.9,5.69333333 19.939,5.79583333 19.962,5.90583333 C19.986,6.01416667 19.993,6.125 19.997,6.23416667 C19.999,6.28416667 19.999,6.335 19.999,6.385 C20,6.445 20,6.50416667 20,6.56416667 L20,8.43583333 C20,8.49583333 20,8.55583333 19.999,8.615 C19.999,8.66583333 19.999,8.71583333 19.997,8.76583333 C19.993,8.87583333 19.986,8.98583333 19.962,9.09416667 C19.939,9.20416667 19.9,9.30666667 19.839,9.40666667 C19.779,9.505 19.701,9.595 19.607,9.6725 C19.514,9.75083333 19.406,9.81583333 19.288,9.86583333 C19.168,9.91666667 19.045,9.94916667 18.913,9.96833333 C18.783,9.98833333 18.651,9.99416667 18.519,9.9975 C18.459,9.99916667 18.398,9.99916667 18.338,10 L18.123,10 L15.877,10 L15.662,10 C15.6315624,9.99957726 15.6008675,9.99936897 15.5701763,9.99904876 Z M10.026,10.2904512 C10.187,10.4710528 10.165,10.7424771 9.975,10.8969802 C9.786,11.0514833 9.502,11.0295606 9.34,10.848959 C8.475,9.8822707 8,8.77047478 8,7.5 C8,6.22952522 8.475,5.1177293 9.34,4.15104101 C9.502,3.97043942 9.786,3.94851668 9.975,4.10301978 C10.165,4.25752287 10.187,4.52894723 10.026,4.70954882 C9.3,5.52069007 8.901,6.43413743 8.901,7.5 C8.901,8.56586257 9.3,9.47930993 10.026,10.2904512 Z M6.725,12.307171 C6.882,12.4897218 6.852,12.7568441 6.659,12.90536 C6.466,13.0528445 6.182,13.0249978 6.025,12.842447 C4.719,11.3242845 4,9.45649073 4,7.5 C4,5.54350927 4.719,3.67571553 6.025,2.15755298 C6.182,1.97500219 6.466,1.94715546 6.659,2.09464 C6.852,2.2431559 6.882,2.51027825 6.725,2.69282905 C5.549,4.06041297 4.901,5.73843639 4.901,7.5 C4.901,9.26156361 5.549,10.939587 6.725,12.307171 Z M3.428,14.3108837 C3.583,14.4953516 3.551,14.7622632 3.355,14.9075703 C3.161,15.0539079 2.877,15.0229915 2.722,14.8395542 C0.929,12.7083835 8.8817842e-16,10.2247657 8.8817842e-16,7.5 C8.8817842e-16,4.7752343 0.929,2.29161654 2.722,0.160445787 C2.877,-0.0229915406 3.161,-0.0539079442 3.355,0.0924296995 C3.551,0.237736796 3.583,0.504648414 3.428,0.689116289 C1.763,2.66776612 0.901,4.96897709 0.901,7.5 C0.901,10.0310229 1.763,12.3322339 3.428,14.3108837 Z" id="iOS/Fullscreen/Mute" style="mix-blend-mode: normal;"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
index 2107685..543bda2 100644 (file)
@@ -38,6 +38,7 @@ class MediaController
         this.container.className = "media-controls-container";
 
         this._updateControlsIfNeeded();
+        this._usesLTRUserInterfaceLayoutDirection = false;
 
         if (host) {
             host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS;
@@ -115,6 +116,10 @@ class MediaController
 
     set usesLTRUserInterfaceLayoutDirection(flag)
     {
+        if (this._usesLTRUserInterfaceLayoutDirection === flag)
+            return;
+
+        this._usesLTRUserInterfaceLayoutDirection = flag;
         this.controls.usesLTRUserInterfaceLayoutDirection = flag;
     }