[Modern Media Controls] Adhere to tight padding on iOS
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 28 Feb 2017 02:18:17 +0000 (02:18 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 28 Feb 2017 02:18:17 +0000 (02:18 +0000)
https://bugs.webkit.org/show_bug.cgi?id=168949
<rdar://problem/30746164>

Reviewed by Jon Lee.

Source/WebCore:

We used to only support custom margins on macOS, to support this on iOS as
well, we promote the notification when the layoutTraits property is set to
MediaControls and expose a new protected method layoutTraitsDidChange() for
subclasses to implement. IOSInlineMediaControls now implements that method
and will use tighter margins for the TightPadding layout trait.

Test: media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html

* Modules/modern-media-controls/controls/ios-inline-media-controls.js:
(IOSInlineMediaControls.prototype.layoutTraitsDidChange):
(IOSInlineMediaControls):
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.get layoutTraits): Deleted.
(MacOSInlineMediaControls.prototype.set layoutTraits): Deleted.
(MacOSInlineMediaControls.prototype._matchLayoutTraits): Deleted.
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.prototype.get layoutTraits):
(MediaControls.prototype.set layoutTraits):
(MediaControls.prototype.layoutTraitsDidChange):

LayoutTests:

Adding a new test for the TightPadding layout trait on iOS.

* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt: Added.
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/media-controls.js

index 3f08726..224e0a3 100644 (file)
@@ -1,3 +1,16 @@
+2017-02-27  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Adhere to tight padding on iOS
+        https://bugs.webkit.org/show_bug.cgi?id=168949
+        <rdar://problem/30746164>
+
+        Reviewed by Jon Lee.
+
+        Adding a new test for the TightPadding layout trait on iOS.
+
+        * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt: Added.
+        * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html: Added.
+
 2017-02-27  Ryan Haddad  <ryanhaddad@apple.com>
 
         Mark compositing/video/video-poster.html as flaky on macOS release.
diff --git a/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt b/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding-expected.txt
new file mode 100644 (file)
index 0000000..c115674
--- /dev/null
@@ -0,0 +1,16 @@
+Testing IOSInlineMediaControls with tight padding.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.leftContainer.leftMargin is 12
+PASS mediaControls.leftContainer.rightMargin is 12
+PASS mediaControls.leftContainer.buttonMargin is 12
+PASS mediaControls.rightContainer.leftMargin is 12
+PASS mediaControls.rightContainer.rightMargin is 12
+PASS mediaControls.rightContainer.buttonMargin  is 12
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html b/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html
new file mode 100644 (file)
index 0000000..a04e450
--- /dev/null
@@ -0,0 +1,22 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing <code>IOSInlineMediaControls</code> with tight padding.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 400 });
+mediaControls.layoutTraits = LayoutTraits.iOS | LayoutTraits.TightPadding;
+
+shouldBe("mediaControls.leftContainer.leftMargin", "12");
+shouldBe("mediaControls.leftContainer.rightMargin", "12");
+shouldBe("mediaControls.leftContainer.buttonMargin", "12");
+shouldBe("mediaControls.rightContainer.leftMargin", "12");
+shouldBe("mediaControls.rightContainer.rightMargin", "12");
+shouldBe("mediaControls.rightContainer.buttonMargin ", "12");
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index f1568a8..db2d0c6 100644 (file)
@@ -1,3 +1,31 @@
+2017-02-27  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Adhere to tight padding on iOS
+        https://bugs.webkit.org/show_bug.cgi?id=168949
+        <rdar://problem/30746164>
+
+        Reviewed by Jon Lee.
+
+        We used to only support custom margins on macOS, to support this on iOS as
+        well, we promote the notification when the layoutTraits property is set to
+        MediaControls and expose a new protected method layoutTraitsDidChange() for
+        subclasses to implement. IOSInlineMediaControls now implements that method
+        and will use tighter margins for the TightPadding layout trait.
+
+        Test: media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-tight-padding.html
+
+        * Modules/modern-media-controls/controls/ios-inline-media-controls.js:
+        (IOSInlineMediaControls.prototype.layoutTraitsDidChange):
+        (IOSInlineMediaControls):
+        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+        (MacOSInlineMediaControls.prototype.get layoutTraits): Deleted.
+        (MacOSInlineMediaControls.prototype.set layoutTraits): Deleted.
+        (MacOSInlineMediaControls.prototype._matchLayoutTraits): Deleted.
+        * Modules/modern-media-controls/controls/media-controls.js:
+        (MediaControls.prototype.get layoutTraits):
+        (MediaControls.prototype.set layoutTraits):
+        (MediaControls.prototype.layoutTraitsDidChange):
+
 2017-02-27  Youenn Fablet  <youenn@apple.com>
 
         [WebRTC] Support modern RTCStatsReport
index eb26ca7..116e306 100644 (file)
@@ -47,6 +47,8 @@ class IOSInlineMediaControls extends MediaControls
             cssClassName: "right"
         });
 
+        this.layoutTraitsDidChange();
+
         this.controlsBar.children = [this.leftContainer, this.rightContainer];
 
         this._pinchGestureRecognizer = new PinchGestureRecognizer(this.element, this);
@@ -66,7 +68,7 @@ class IOSInlineMediaControls extends MediaControls
             this.delegate.iOSInlineMediaControlsRecognizedPinchInGesture();
     }
 
-    // Public
+    // Protected
 
     layout()
     {
@@ -76,6 +78,20 @@ class IOSInlineMediaControls extends MediaControls
             this.controlsBar.children = this._inlineLayoutSupport.childrenAfterPerformingLayout();
     }
 
+    layoutTraitsDidChange()
+    {
+        if (!this.leftContainer || !this.rightContainer)
+            return;
+
+        const margin = (this.layoutTraits & LayoutTraits.TightPadding) ? 12 : 24;
+        this.leftContainer.leftMargin = margin;
+        this.leftContainer.rightMargin = margin;
+        this.leftContainer.buttonMargin = margin;
+        this.rightContainer.leftMargin = margin;
+        this.rightContainer.rightMargin = margin;
+        this.rightContainer.buttonMargin = margin;
+    }
+
 }
 
 IOSInlineMediaControls.MinimumScaleToEnterFullscreen = 1.5;
index 2b31c51..82ea2e2 100644 (file)
@@ -43,7 +43,7 @@ class MacOSInlineMediaControls extends MacOSMediaControls
             cssClassName: "right"
         });
 
-        this._matchLayoutTraits();
+        this.layoutTraitsDidChange();
 
         this._backgroundTint = new BackgroundTint;
 
@@ -62,20 +62,6 @@ class MacOSInlineMediaControls extends MacOSMediaControls
 
     // Public
 
-    get layoutTraits()
-    {
-        return this._layoutTraits;
-    }
-
-    set layoutTraits(layoutTraits)
-    {
-        if (this._layoutTraits === layoutTraits)
-            return;
-
-        this._layoutTraits = layoutTraits;
-        this._matchLayoutTraits();
-    }
-
     layout()
     {
         super.layout();
@@ -116,9 +102,7 @@ class MacOSInlineMediaControls extends MacOSMediaControls
             this.layout();
     }
 
-    // Private
-
-    _matchLayoutTraits()
+    layoutTraitsDidChange()
     {
         if (!this.leftContainer || !this.rightContainer)
             return;
@@ -164,4 +148,5 @@ class MacOSInlineMediaControls extends MacOSMediaControls
 
         this.element.classList.toggle("compact", layoutTraits & LayoutTraits.Compact);
     }
+
 }
index 50be4fa..b3b32b3 100644 (file)
@@ -59,6 +59,20 @@ class MediaControls extends LayoutNode
 
     // Public
 
+    get layoutTraits()
+    {
+        return this._layoutTraits;
+    }
+
+    set layoutTraits(layoutTraits)
+    {
+        if (this._layoutTraits === layoutTraits)
+            return;
+
+        this._layoutTraits = layoutTraits;
+        this.layoutTraitsDidChange();
+    }
+
     get showsStartButton()
     {
         return !!this._showsStartButton;
@@ -156,6 +170,11 @@ class MediaControls extends LayoutNode
         // Implemented by subclasses as needed.
     }
 
+    layoutTraitsDidChange()
+    {
+        // Implemented by subclasses as needed.
+    }
+
     // Private
 
     _invalidateChildren()