[Modern Media Controls] Implement reduced and tight padding modes
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 8 Feb 2017 22:57:38 +0000 (22:57 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 8 Feb 2017 22:57:38 +0000 (22:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=167933
<rdar://problem/30396994>

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

Source/WebCore:

The design specs for modern media controls mandate the following for inline media controls:

    - controls at or below 300pt width use a 12pt left margin for the left buttons container,
    and a 12pt right margin for the right buttons container, and 16pth button margin inside
    both containers ("reduced padding mode").

    - when dropping at or below 120pt width, controls use an 8pt left margin for
    the left buttons container, and an 8pt right margin for the right buttons container, and
    12pt button margin inside both containers and a shorter bar (25pt) ("compact mode").

    - in the case of audio controls, at 400pt or less, controls switch to 12pt margins and
    button margins for both buttons containers ("tight padding mode").

The "compact" mode was already implemented as a dedicated MacOSInlineMediaControls subclass.
Since we now have a more generic need to vary the metrics used for inline media controls on
macOS, we add new features to MacOSInlineMediaControls to support varying metrics based on
the controls' "layoutTraits" property.

So MediaController is changed such that it knows to use the new TightPadding and ReducedPadding
layout traits based on the conditions defined above, and _updateControlsIfNeeded() is changed
to set the "layoutTraits" property on the controls whenever called, which in our case is most
relevantly a "resize" event on the shadow root or a TrackEvent on the video tracks (to determine
when we're possibly changing between a video and audio file).

As a result, the "layoutTraits" setter is called on MacOSInlineMediaControls, which updates
the metrics for the various buttons containers, but also notifies the buttons contained
within that layout traits may have changed, since some buttons support a "compact" appearance
that is shorter and require a different image file. To that end, IconButton has been updated
so that it may be notified of a layout traits change through a new layoutTraitsDidChange()
method, that checks whether the current layout traits differ from those last used when loading
the icon.

Tests: media/modern-media-controls/icon-button/icon-button-change-layout-traits.html
       media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html
       media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html
       media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html
       media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html
       media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html
       media/modern-media-controls/media-controller/media-controller-compact.html
       media/modern-media-controls/media-controller/media-controller-reduced-padding.html
       media/modern-media-controls/media-controller/media-controller-tight-padding.html

* Modules/modern-media-controls/controls/icon-button.js:
(IconButton.prototype.set iconName):
(IconButton.prototype.layoutTraitsDidChange):
(IconButton.prototype._loadImage):
* Modules/modern-media-controls/controls/layout-item.js:
* Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js: Removed.
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.get layoutTraits):
(MacOSInlineMediaControls.prototype.set layoutTraits):
(MacOSInlineMediaControls.prototype._matchLayoutTraits):
* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
(MediaController.prototype.get layoutTraits):
(MediaController.prototype.handleEvent):
(MediaController.prototype._updateControlsIfNeeded):
(MediaController.prototype._controlsClassForLayoutTraits):
(MediaController.prototype._shouldFadeBetweenControls): Deleted.
(MediaController.prototype._controlsClass): Deleted.
* WebCore.xcodeproj/project.pbxproj:

LayoutTests:

We rewrite the previously-written tests for "compact" mode and add some new tests for
"reduced padding" and "tight padding" modes as well as new support in IconButton to
update the icon based on a change of layout traits.

* media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt: Added.
* media/modern-media-controls/icon-button/icon-button-change-layout-traits.html: Added.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt: Removed.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt: Removed.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html: Removed.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt: Removed.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html: Removed.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt: Removed.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html: Removed.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt: Removed.
* media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html: Removed.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html: Added.
* media/modern-media-controls/media-controller/media-controller-compact-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-compact.html: Added.
* media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-reduced-padding.html: Added.
* media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-tight-padding.html: Added.
* platform/ios-simulator/TestExpectations:

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

37 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt [deleted file]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt [deleted file]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html [deleted file]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt [deleted file]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html [deleted file]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt [deleted file]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html [deleted file]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt [deleted file]
LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html [deleted file]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html [moved from LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html with 80% similarity]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/icon-button.js
Source/WebCore/Modules/modern-media-controls/controls/layout-item.js
Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js [deleted file]
Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
Source/WebCore/Modules/modern-media-controls/js-files
Source/WebCore/Modules/modern-media-controls/media/media-controller.js
Source/WebCore/WebCore.xcodeproj/project.pbxproj

index 9189465..6002342 100644 (file)
@@ -1,3 +1,44 @@
+2017-02-08  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Implement reduced and tight padding modes
+        https://bugs.webkit.org/show_bug.cgi?id=167933
+        <rdar://problem/30396994>
+
+        Reviewed by Dean Jackson.
+
+        We rewrite the previously-written tests for "compact" mode and add some new tests for
+        "reduced padding" and "tight padding" modes as well as new support in IconButton to
+        update the icon based on a change of layout traits.
+
+        * media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt: Added.
+        * media/modern-media-controls/icon-button/icon-button-change-layout-traits.html: Added.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt: Removed.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt: Removed.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html: Removed.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt: Removed.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html: Removed.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt: Removed.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html: Removed.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt: Removed.
+        * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html: Removed.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt: Added.
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html: Added.
+        * media/modern-media-controls/media-controller/media-controller-compact-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-compact.html: Added.
+        * media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-reduced-padding.html: Added.
+        * media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-tight-padding.html: Added.
+        * platform/ios-simulator/TestExpectations:
+
 2017-02-08  Youenn Fablet  <youenn@apple.com>
 
         RTCPeerConnection constructor can take null as input
diff --git a/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt b/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt
new file mode 100644 (file)
index 0000000..35d7b95
--- /dev/null
@@ -0,0 +1,21 @@
+Testing IconButton while changing layout traits.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Setting macOS inline layout traits and setting play icon
+PASS iconButton.element.style.webkitMaskImage.includes("macOS/pause") is true
+PASS iconButton.element.style.width is "22px"
+PASS iconButton.element.style.height is "24px"
+PASS iconButton.element.style.webkitMaskSize is "22px 24px"
+
+Setting macOS inline and compact layout traits and notifying of a layout traits change
+PASS iconButton.element.style.webkitMaskImage.includes("macOS/pause-compact") is true
+PASS iconButton.element.style.width is "11px"
+PASS iconButton.element.style.height is "13px"
+PASS iconButton.element.style.webkitMaskSize is "11px 13px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits.html b/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits.html
new file mode 100644 (file)
index 0000000..00f2f70
--- /dev/null
@@ -0,0 +1,48 @@
+<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">
+
+window.jsTestIsAsync = true;
+
+description("Testing <code>IconButton</code> while changing layout traits.");
+
+const layoutDelegate = {};
+
+const iconButton = new IconButton({ layoutDelegate });
+
+debug("");
+debug("Setting macOS inline layout traits and setting play icon");
+layoutDelegate.layoutTraits = LayoutTraits.macOS;
+iconButton.iconName = Icons.Pause;
+
+let numberOfFrames = 0;
+
+scheduler.frameDidFire = function()
+{
+    numberOfFrames++;
+
+    if (numberOfFrames === 1) {
+        shouldBeTrue('iconButton.element.style.webkitMaskImage.includes("macOS/pause")');
+        shouldBeEqualToString("iconButton.element.style.width", "22px");
+        shouldBeEqualToString("iconButton.element.style.height", "24px");
+        shouldBeEqualToString("iconButton.element.style.webkitMaskSize", "22px 24px");
+
+        debug("");
+        debug("Setting macOS inline and compact layout traits and notifying of a layout traits change");
+        layoutDelegate.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
+        iconButton.layoutTraitsDidChange();
+    } else if (numberOfFrames === 2) {
+        shouldBeTrue('iconButton.element.style.webkitMaskImage.includes("macOS/pause-compact")');
+        shouldBeEqualToString("iconButton.element.style.width", "11px");
+        shouldBeEqualToString("iconButton.element.style.height", "13px");
+        shouldBeEqualToString("iconButton.element.style.webkitMaskSize", "11px 13px");
+
+        finishMediaControlsTest();
+    } 
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt
deleted file mode 100644 (file)
index 138a19e..0000000
+++ /dev/null
@@ -1,41 +0,0 @@
-Testing the MacOSCompactInlineMediaControls computed styles.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PlayPauseButton
-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
-PASS style.height is "25px"
-PASS style.webkitMaskPositionY is "6px"
-
-SkipBackButton
-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
-PASS style.height is "25px"
-PASS style.webkitMaskPositionY is "6px"
-
-MuteButton
-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
-PASS style.height is "25px"
-PASS style.webkitMaskPositionY is "6px"
-
-FullscreenButton
-PASS rgba(style.backgroundColor).r is 255
-PASS rgba(style.backgroundColor).g is 255
-PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
-PASS style.height is "25px"
-PASS style.webkitMaskPositionY is "6.5px"
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt
deleted file mode 100644 (file)
index b09479d..0000000
+++ /dev/null
@@ -1,39 +0,0 @@
-Testing the MacOSCompactInlineMediaControls constructor.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS mediaControls.element.localName is "div"
-PASS mediaControls.element.className is "media-controls mac inline compact"
-PASS mediaControls.layoutTraits is LayoutTraits.macOS | LayoutTraits.Compact
-
-Controls bar
-PASS mediaControls.controlsBar.children.length is 3
-PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
-PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
-PASS mediaControls.controlsBar.children[2] instanceof LayoutNode is true
-
-Left container
-PASS mediaControls.controlsBar.children[0].buttons is [mediaControls.playPauseButton, mediaControls.skipBackButton]
-PASS mediaControls.controlsBar.children[0].element.className is "buttons-container left"
-PASS mediaControls.controlsBar.children[0].leftMargin is 8
-PASS mediaControls.controlsBar.children[0].rightMargin is 12
-PASS mediaControls.controlsBar.children[0].buttonMargin is 12
-
-Right container
-PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.muteButton, mediaControls.fullscreenButton]
-PASS mediaControls.controlsBar.children[1].element.className is "buttons-container right"
-PASS mediaControls.controlsBar.children[1].leftMargin is 12
-PASS mediaControls.controlsBar.children[1].rightMargin is 8
-PASS mediaControls.controlsBar.children[1].buttonMargin is 12
-
-Volume slider
-PASS mediaControls.controlsBar.children[2].element.className is "volume-slider-container"
-PASS mediaControls.controlsBar.children[2].children is [mediaControls.volumeSlider]
-PASS mediaControls.controlsBar.children[2].visible is false
-PASS mediaControls.volumeSlider.width is 60
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html
deleted file mode 100644 (file)
index 828c16d..0000000
+++ /dev/null
@@ -1,48 +0,0 @@
-<script src="../../../resources/js-test-pre.js"></script>
-<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
-<body>
-<script type="text/javascript">
-
-description("Testing the <code>MacOSCompactInlineMediaControls</code> constructor.");
-
-const mediaControls = new MacOSCompactInlineMediaControls;
-
-shouldBeEqualToString("mediaControls.element.localName", "div");
-shouldBeEqualToString("mediaControls.element.className", "media-controls mac inline compact");
-shouldBe("mediaControls.layoutTraits", "LayoutTraits.macOS | LayoutTraits.Compact");
-
-debug("");
-debug("Controls bar");
-shouldBe("mediaControls.controlsBar.children.length", "3");
-shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
-shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
-shouldBeTrue("mediaControls.controlsBar.children[2] instanceof LayoutNode");
-
-debug("");
-debug("Left container");
-shouldBe("mediaControls.controlsBar.children[0].buttons", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
-shouldBeEqualToString("mediaControls.controlsBar.children[0].element.className", "buttons-container left");
-shouldBe("mediaControls.controlsBar.children[0].leftMargin", "8");
-shouldBe("mediaControls.controlsBar.children[0].rightMargin", "12");
-shouldBe("mediaControls.controlsBar.children[0].buttonMargin", "12");
-
-debug("");
-debug("Right container");
-shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.muteButton, mediaControls.fullscreenButton]");
-shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container right");
-shouldBe("mediaControls.controlsBar.children[1].leftMargin", "12");
-shouldBe("mediaControls.controlsBar.children[1].rightMargin", "8");
-shouldBe("mediaControls.controlsBar.children[1].buttonMargin", "12");
-
-debug("");
-debug("Volume slider");
-shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "volume-slider-container");
-shouldBe("mediaControls.controlsBar.children[2].children", "[mediaControls.volumeSlider]");
-shouldBeFalse("mediaControls.controlsBar.children[2].visible");
-shouldBe("mediaControls.volumeSlider.width", "60");
-
-debug("");
-
-</script>
-<script src="../../../resources/js-test-post.js"></script>
-</body>
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt
deleted file mode 100644 (file)
index 001b9f4..0000000
+++ /dev/null
@@ -1,23 +0,0 @@
-Testing the MacOSCompactInlineMediaControls computed styles.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS style.left is "0px"
-PASS style.bottom is "0px"
-PASS style.width is "680px"
-PASS style.height is "25px"
-PASS bounds.left is 0
-PASS bounds.top is 275
-PASS bounds.width is 680
-PASS bounds.height is 25
-PASS rgba(style.backgroundColor).r is 30
-PASS rgba(style.backgroundColor).g is 30
-PASS rgba(style.backgroundColor).b is 30
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.webkitBackdropFilter is "saturate(1.8) blur(20px)"
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html
deleted file mode 100644 (file)
index 8ba5aa6..0000000
+++ /dev/null
@@ -1,51 +0,0 @@
-<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>
-<style type="text/css" media="screen">
-    
-.media-controls {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-    
-</style>
-<script type="text/javascript">
-
-description("Testing the <code>MacOSCompactInlineMediaControls</code> computed styles.");
-
-window.jsTestIsAsync = true;
-
-const mediaControls = new MacOSCompactInlineMediaControls({ width: 680, height: 300 });
-
-let style, bounds;
-scheduler.frameDidFire = function()
-{
-    document.body.appendChild(mediaControls.element);
-
-    style = window.getComputedStyle(mediaControls.controlsBar.element);
-    bounds = mediaControls.controlsBar.element.getBoundingClientRect();
-    
-    shouldBeEqualToString("style.left", "0px");
-    shouldBeEqualToString("style.bottom", "0px");
-    shouldBeEqualToString("style.width", "680px");
-    shouldBeEqualToString("style.height", "25px");
-
-    shouldBe("bounds.left", "0");
-    shouldBe("bounds.top", "275");
-    shouldBe("bounds.width", "680");
-    shouldBe("bounds.height", "25");
-
-    shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(30, 30, 30, 0.45)");
-    shouldBeEqualToString("style.webkitBackdropFilter", "saturate(1.8) blur(20px)");
-
-    mediaControls.element.remove();
-
-    debug("");
-    finishMediaControlsTest();
-};
-
-</script>
-<script src="../../../resources/js-test-post.js"></script>
-</body>
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt
deleted file mode 100644 (file)
index b8378d2..0000000
+++ /dev/null
@@ -1,13 +0,0 @@
-Testing the MacOSCompactInlineMediaControls layout.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
-PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
-PASS mediaControls.controlsBar.children[0].children is [mediaControls.playPauseButton, mediaControls.skipBackButton]
-PASS mediaControls.controlsBar.children[1].children is [mediaControls.muteButton, mediaControls.fullscreenButton]
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html
deleted file mode 100644 (file)
index 41ed6f2..0000000
+++ /dev/null
@@ -1,41 +0,0 @@
-<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 the <code>MacOSCompactInlineMediaControls</code> layout.");
-
-window.jsTestIsAsync = true;
-
-const mediaControls = new MacOSCompactInlineMediaControls({ width: 240, height: 25 });
-
-const iconButtons = [
-    mediaControls.playPauseButton,
-    mediaControls.skipBackButton,
-    mediaControls.muteButton,
-    mediaControls.fullscreenButton
-];
-
-// There is a 4-pixel difference in metrics between 1x and 2x due to the volume button having a different width.
-const is1x = window.devicePixelRatio == 1;
-const expectedTimeControlWidth = is1x ? 286 : 290;
-const expectedVolumeSliderContainerX = is1x ? 428 : 432;
-
-scheduler.frameDidFire = function()
-{
-    if (iconButtons.some(button => button.width == 0))
-        return;
-
-    shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
-    shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
-
-    shouldBe("mediaControls.controlsBar.children[0].children", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
-    shouldBe("mediaControls.controlsBar.children[1].children", "[mediaControls.muteButton, mediaControls.fullscreenButton]");
-
-    finishMediaControlsTest();
-};
-
-</script>
-<script src="../../../resources/js-test-post.js"></script>
-</body>
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt
deleted file mode 100644 (file)
index 50a47dc..0000000
+++ /dev/null
@@ -1,18 +0,0 @@
-Testing the MacOSCompactInlineMediaControls computed styles.
-
-On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-
-
-PASS volumeSliderContainerStyle.position is "absolute"
-PASS volumeSliderContainerStyle.top is "0px"
-PASS volumeSliderContainerStyle.width is "21px"
-PASS volumeSliderContainerStyle.height is "81px"
-PASS volumeSliderContainerStyle.transform is "matrix(1, 0, 0, 1, -2, -81)"
-PASS volumeSliderStyle.transform is "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)"
-PASS volumeSliderStyle.left is "-19.5px"
-PASS volumeSliderStyle.top is "40px"
-
-PASS successfullyParsed is true
-
-TEST COMPLETE
-
diff --git a/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html b/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html
deleted file mode 100644 (file)
index 520d4f2..0000000
+++ /dev/null
@@ -1,39 +0,0 @@
-<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 the <code>MacOSCompactInlineMediaControls</code> computed styles.");
-
-window.jsTestIsAsync = true;
-
-const mediaControls = new MacOSCompactInlineMediaControls({ width: 240, height: 300 });
-mediaControls.volumeSlider.parent.visible = true;
-
-let volumeSliderContainerStyle, volumeSliderStyle;
-scheduler.frameDidFire = function()
-{
-    document.body.appendChild(mediaControls.element);
-
-    volumeSliderContainerStyle = window.getComputedStyle(mediaControls.volumeSlider.parent.element);
-    shouldBeEqualToString("volumeSliderContainerStyle.position", "absolute");
-    shouldBeEqualToString("volumeSliderContainerStyle.top", "0px");
-    shouldBeEqualToString("volumeSliderContainerStyle.width", "21px");
-    shouldBeEqualToString("volumeSliderContainerStyle.height", "81px");
-    shouldBeEqualToString("volumeSliderContainerStyle.transform", "matrix(1, 0, 0, 1, -2, -81)");
-
-    volumeSliderStyle = window.getComputedStyle(mediaControls.volumeSlider.element);
-    shouldBeEqualToString("volumeSliderStyle.transform", "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)");
-    shouldBeEqualToString("volumeSliderStyle.left", "-19.5px");
-    shouldBeEqualToString("volumeSliderStyle.top", "40px");
-
-    mediaControls.element.remove();
-
-    debug("");
-    finishMediaControlsTest();
-};
-
-</script>
-<script src="../../../resources/js-test-post.js"></script>
-</body>
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt
new file mode 100644 (file)
index 0000000..520848c
--- /dev/null
@@ -0,0 +1,25 @@
+Testing the MacOSInlineMediaControls computed styles in compact mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PlayPauseButton
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+SkipBackButton
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+MuteButton
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+FullscreenButton
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6.5px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
@@ -4,11 +4,12 @@
 <body>
 <script type="text/javascript">
 
-description("Testing the <code>MacOSCompactInlineMediaControls</code> computed styles.");
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles in compact mode.");
 
 window.jsTestIsAsync = true;
 
-const mediaControls = new MacOSCompactInlineMediaControls({ width: 240, height: 300 });
+const mediaControls = new MacOSInlineMediaControls({ width: 240 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
 
 const buttonPositions = [
     [mediaControls.playPauseButton, 6],
@@ -28,7 +29,6 @@ scheduler.frameDidFire = function()
     for (let [button, y] of buttonPositions) {
         style = window.getComputedStyle(button.element);
         debug(button.constructor.name);
-        shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(255, 255, 255, 0.572)");
         shouldBeEqualToString("style.height", "25px");
         shouldBeEqualToString("style.webkitMaskPositionY", `${y}px`);
         debug("");
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt
new file mode 100644 (file)
index 0000000..5406170
--- /dev/null
@@ -0,0 +1,11 @@
+Testing the MacOSInlineMediaControls computed styles in compact mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.controlsBar.element.getBoundingClientRect().height is 25
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html
new file mode 100644 (file)
index 0000000..e1142f5
--- /dev/null
@@ -0,0 +1,38 @@
+<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>
+<style type="text/css" media="screen">
+    
+.media-controls {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+    
+</style>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles in compact mode.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSInlineMediaControls({ width: 240 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
+
+let bounds;
+scheduler.frameDidFire = function()
+{
+    document.body.appendChild(mediaControls.element);
+
+    shouldBe("mediaControls.controlsBar.element.getBoundingClientRect().height", "25");
+
+    mediaControls.element.remove();
+
+    debug("");
+    finishMediaControlsTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt
new file mode 100644 (file)
index 0000000..092a4ca
--- /dev/null
@@ -0,0 +1,18 @@
+Testing MacOSInlineMediaControls in compact mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.element.classList.contains('compact') is true
+PASS mediaControls.rightContainer.buttons is [mediaControls.muteButton, mediaControls.fullscreenButton]
+PASS mediaControls.leftContainer.leftMargin is 8
+PASS mediaControls.leftContainer.rightMargin is 12
+PASS mediaControls.leftContainer.buttonMargin is 12
+PASS mediaControls.rightContainer.leftMargin is 12
+PASS mediaControls.rightContainer.rightMargin is 8
+PASS mediaControls.rightContainer.buttonMargin is 12
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html
new file mode 100644 (file)
index 0000000..159a730
--- /dev/null
@@ -0,0 +1,24 @@
+<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>MacOSInlineMediaControls</code> in compact mode.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 240 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
+
+shouldBeTrue("mediaControls.element.classList.contains('compact')");
+shouldBe("mediaControls.rightContainer.buttons", "[mediaControls.muteButton, mediaControls.fullscreenButton]");
+shouldBe("mediaControls.leftContainer.leftMargin", "8");
+shouldBe("mediaControls.leftContainer.rightMargin", "12");
+shouldBe("mediaControls.leftContainer.buttonMargin", "12");
+shouldBe("mediaControls.rightContainer.leftMargin", "12");
+shouldBe("mediaControls.rightContainer.rightMargin", "8");
+shouldBe("mediaControls.rightContainer.buttonMargin", "12");
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt
new file mode 100644 (file)
index 0000000..4945ecf
--- /dev/null
@@ -0,0 +1,16 @@
+Testing MacOSInlineMediaControls with reduced 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 16
+PASS mediaControls.leftContainer.buttonMargin is 16
+PASS mediaControls.rightContainer.leftMargin  is 0
+PASS mediaControls.rightContainer.rightMargin is 12
+PASS mediaControls.rightContainer.buttonMargin  is 16
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html
new file mode 100644 (file)
index 0000000..bea085b
--- /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>MacOSInlineMediaControls</code> with reduced padding.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 300 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.ReducedPadding;
+
+shouldBe("mediaControls.leftContainer.leftMargin", "12");
+shouldBe("mediaControls.leftContainer.rightMargin ", "16");
+shouldBe("mediaControls.leftContainer.buttonMargin", "16");
+shouldBe("mediaControls.rightContainer.leftMargin ", "0");
+shouldBe("mediaControls.rightContainer.rightMargin", "12");
+shouldBe("mediaControls.rightContainer.buttonMargin ", "16");
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt
new file mode 100644 (file)
index 0000000..768e9d4
--- /dev/null
@@ -0,0 +1,16 @@
+Testing MacOSInlineMediaControls 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/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html
new file mode 100644 (file)
index 0000000..5a3b9d5
--- /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>MacOSInlineMediaControls</code> with tight padding.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 400 });
+mediaControls.layoutTraits = LayoutTraits.macOS | 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>
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt
new file mode 100644 (file)
index 0000000..de70f1f
--- /dev/null
@@ -0,0 +1,11 @@
+Testing the MediaController sizing behavior with compact mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS !!(mediaController.controls.layoutTraits & LayoutTraits.Compact) became true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html
new file mode 100644 (file)
index 0000000..42ed907
--- /dev/null
@@ -0,0 +1,20 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 240px;" controls autoplay></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>MediaController</code> sizing behavior with compact mode.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBecomeEqual("!!(mediaController.controls.layoutTraits & LayoutTraits.Compact)", "true", finishJSTest);
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt
new file mode 100644 (file)
index 0000000..aa9bf7a
--- /dev/null
@@ -0,0 +1,11 @@
+Testing the MediaController sizing behavior with reduced padding mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS !!(mediaController.controls.layoutTraits & LayoutTraits.ReducedPadding) became true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html
new file mode 100644 (file)
index 0000000..e67d8dd
--- /dev/null
@@ -0,0 +1,20 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 300px;" controls autoplay></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>MediaController</code> sizing behavior with reduced padding mode.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBecomeEqual("!!(mediaController.controls.layoutTraits & LayoutTraits.ReducedPadding)", "true", finishJSTest);
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt
new file mode 100644 (file)
index 0000000..a87d2bd
--- /dev/null
@@ -0,0 +1,11 @@
+Testing the MediaController sizing behavior with tight padding mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS !!(mediaController.controls.layoutTraits & LayoutTraits.TightPadding) became true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html
new file mode 100644 (file)
index 0000000..185963f
--- /dev/null
@@ -0,0 +1,20 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<audio src="../../content/test.mp4" style="width: 400px;" controls autoplay></audio>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>MediaController</code> sizing behavior with tight padding mode.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBecomeEqual("!!(mediaController.controls.layoutTraits & LayoutTraits.TightPadding)", "true", finishJSTest);
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index b3ff3fb..045b87d 100644 (file)
@@ -2835,7 +2835,16 @@ webkit.org/b/166062 media/modern-media-controls/airplay-support/airplay-support.
 webkit.org/b/166062 media/modern-media-controls/placard-support/placard-support-airplay.html [ Skip ]
 webkit.org/b/166062 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]
 
-# There is no compact mode on iOS
+# There is no compact, reduced padding or tight padding mode on iOS.
+media/modern-media-controls/icon-button/icon-button-change-layout-traits.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-compact.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-reduced-padding.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
 media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html [ Skip ]
 
 # New Encrypted Media API not enabled on iOS
index 94eb639..bf2c1df 100644 (file)
@@ -1,3 +1,74 @@
+2017-02-08  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Implement reduced and tight padding modes
+        https://bugs.webkit.org/show_bug.cgi?id=167933
+        <rdar://problem/30396994>
+
+        Reviewed by Dean Jackson.
+
+        The design specs for modern media controls mandate the following for inline media controls:
+
+            - controls at or below 300pt width use a 12pt left margin for the left buttons container,
+            and a 12pt right margin for the right buttons container, and 16pth button margin inside
+            both containers ("reduced padding mode").
+
+            - when dropping at or below 120pt width, controls use an 8pt left margin for
+            the left buttons container, and an 8pt right margin for the right buttons container, and
+            12pt button margin inside both containers and a shorter bar (25pt) ("compact mode").
+
+            - in the case of audio controls, at 400pt or less, controls switch to 12pt margins and
+            button margins for both buttons containers ("tight padding mode").
+
+        The "compact" mode was already implemented as a dedicated MacOSInlineMediaControls subclass.
+        Since we now have a more generic need to vary the metrics used for inline media controls on
+        macOS, we add new features to MacOSInlineMediaControls to support varying metrics based on
+        the controls' "layoutTraits" property.
+
+        So MediaController is changed such that it knows to use the new TightPadding and ReducedPadding
+        layout traits based on the conditions defined above, and _updateControlsIfNeeded() is changed
+        to set the "layoutTraits" property on the controls whenever called, which in our case is most
+        relevantly a "resize" event on the shadow root or a TrackEvent on the video tracks (to determine
+        when we're possibly changing between a video and audio file).
+
+        As a result, the "layoutTraits" setter is called on MacOSInlineMediaControls, which updates
+        the metrics for the various buttons containers, but also notifies the buttons contained
+        within that layout traits may have changed, since some buttons support a "compact" appearance
+        that is shorter and require a different image file. To that end, IconButton has been updated
+        so that it may be notified of a layout traits change through a new layoutTraitsDidChange()
+        method, that checks whether the current layout traits differ from those last used when loading
+        the icon.
+
+        Tests: media/modern-media-controls/icon-button/icon-button-change-layout-traits.html
+               media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html
+               media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html
+               media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html
+               media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html
+               media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html
+               media/modern-media-controls/media-controller/media-controller-compact.html
+               media/modern-media-controls/media-controller/media-controller-reduced-padding.html
+               media/modern-media-controls/media-controller/media-controller-tight-padding.html
+
+        * Modules/modern-media-controls/controls/icon-button.js:
+        (IconButton.prototype.set iconName):
+        (IconButton.prototype.layoutTraitsDidChange):
+        (IconButton.prototype._loadImage):
+        * Modules/modern-media-controls/controls/layout-item.js:
+        * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js: Removed.
+        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+        (MacOSInlineMediaControls.prototype.get layoutTraits):
+        (MacOSInlineMediaControls.prototype.set layoutTraits):
+        (MacOSInlineMediaControls.prototype._matchLayoutTraits):
+        * Modules/modern-media-controls/js-files:
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController):
+        (MediaController.prototype.get layoutTraits):
+        (MediaController.prototype.handleEvent):
+        (MediaController.prototype._updateControlsIfNeeded):
+        (MediaController.prototype._controlsClassForLayoutTraits):
+        (MediaController.prototype._shouldFadeBetweenControls): Deleted.
+        (MediaController.prototype._controlsClass): Deleted.
+        * WebCore.xcodeproj/project.pbxproj:
+
 2017-02-08  Aakash Jain  <aakash_jain@apple.com>
 
         Move private methods from WKGraphics.h to a separate header file
index 6388cb8..53e8c3b 100644 (file)
@@ -36,6 +36,7 @@ class IconButton extends Button
 
         this._image = null;
         this._iconName = "";
+        this._iconLayoutTraits = LayoutTraits.Unknown;
 
         if (!!iconName)
             this.iconName = iconName;
@@ -53,17 +54,7 @@ class IconButton extends Button
         if (this._iconName === iconName)
             return;
 
-        if (this._image)
-            this._image.removeEventListener("load", this);
-
-        this._image = iconService.imageForIconNameAndLayoutTraits(iconName, this.layoutTraits);
-
-        this._iconName = iconName;
-
-        if (this._image.complete)
-            this._updateImage();
-        else
-            this._image.addEventListener("load", this);
+        this._loadImage(iconName);
     }
 
     get on()
@@ -75,6 +66,12 @@ class IconButton extends Button
         this.element.classList.toggle("on", flag);
     }
 
+    layoutTraitsDidChange()
+    {
+        if (this._iconLayoutTraits !== this.layoutTraits)
+            this._loadImage(this._iconName);
+    }
+
     // Protected
 
     handleEvent(event)
@@ -95,6 +92,22 @@ class IconButton extends Button
 
     // Private
 
+    _loadImage(iconName)
+    {
+        if (this._image)
+            this._image.removeEventListener("load", this);
+
+        this._iconLayoutTraits = this.layoutTraits;
+        this._image = iconService.imageForIconNameAndLayoutTraits(iconName, this._iconLayoutTraits);
+
+        this._iconName = iconName;
+
+        if (this._image.complete)
+            this._updateImage();
+        else
+            this._image.addEventListener("load", this);
+    }
+
     _imageDidLoad()
     {
         this._image.removeEventListener("load", this);
index 69706f8..a8d188a 100644 (file)
  */
 
 const LayoutTraits = {
-    Unknown     : 0,
-    macOS       : 1 << 0,
-    iOS         : 1 << 1,
-    Fullscreen  : 1 << 2,
-    Compact     : 1 << 3
+    Unknown        : 0,
+    macOS          : 1 << 0,
+    iOS            : 1 << 1,
+    Fullscreen     : 1 << 2,
+    Compact        : 1 << 3,
+    ReducedPadding : 1 << 4,
+    TightPadding   : 1 << 5
 };
 
 class LayoutItem extends LayoutNode
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js b/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js
deleted file mode 100644 (file)
index 6307b37..0000000
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright (C) 2016 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-class MacOSCompactInlineMediaControls extends MacOSInlineMediaControls
-{
-
-    constructor(options = {})
-    {
-        options.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
-
-        super(options);
-
-        this.element.classList.add("compact");
-
-        this.leftContainer.leftMargin = 8;
-        this.leftContainer.rightMargin = 12;
-        this.leftContainer.buttonMargin = 12;
-
-        this.rightContainer.buttons = [this.muteButton, this.fullscreenButton];
-        this.rightContainer.leftMargin = 12;
-        this.rightContainer.rightMargin = 8;
-        this.rightContainer.buttonMargin = 12;
-    }
-
-}
index 74dcb7b..346b421 100644 (file)
@@ -38,10 +38,11 @@ class MacOSInlineMediaControls extends MacOSMediaControls
         });
 
         this.rightContainer = new ButtonsContainer({
-            buttons: [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
             cssClassName: "right"
         });
 
+        this._matchLayoutTraits();
+
         this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container">`);
         this._volumeSliderContainer.children = [this.volumeSlider];
         this._volumeSliderContainer.visible = false;
@@ -57,6 +58,20 @@ 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();
@@ -133,4 +148,52 @@ class MacOSInlineMediaControls extends MacOSMediaControls
             this.layout();
     }
 
+    // Private
+
+    _matchLayoutTraits()
+    {
+        if (!this.leftContainer || !this.rightContainer)
+            return;
+
+        const layoutTraits = this.layoutTraits;
+        if (layoutTraits & LayoutTraits.Compact) {
+            this.leftContainer.leftMargin = 8;
+            this.leftContainer.rightMargin = 12;
+            this.leftContainer.buttonMargin = 12;
+            this.rightContainer.leftMargin = 12;
+            this.rightContainer.rightMargin = 8;
+            this.rightContainer.buttonMargin = 12;
+        } else if (layoutTraits & LayoutTraits.TightPadding) {
+            this.leftContainer.leftMargin = 12;
+            this.leftContainer.rightMargin = 12;
+            this.leftContainer.buttonMargin = 12;
+            this.rightContainer.leftMargin = 12;
+            this.rightContainer.rightMargin = 12;
+            this.rightContainer.buttonMargin = 12;
+        } else if (layoutTraits & LayoutTraits.ReducedPadding) {
+            this.leftContainer.leftMargin = 12;
+            this.leftContainer.rightMargin = 16;
+            this.leftContainer.buttonMargin = 16;
+            this.rightContainer.leftMargin = 0;
+            this.rightContainer.rightMargin = 12;
+            this.rightContainer.buttonMargin = 16;
+        } else {
+            this.leftContainer.leftMargin = 24;
+            this.leftContainer.rightMargin = 24;
+            this.leftContainer.buttonMargin = 24;
+            this.rightContainer.leftMargin = 24;
+            this.rightContainer.rightMargin = 24;
+            this.rightContainer.buttonMargin = 24;
+        }
+
+        if (layoutTraits & LayoutTraits.Compact)
+            this.rightContainer.buttons = [this.muteButton, this.fullscreenButton];
+        else
+            this.rightContainer.buttons = [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton];
+
+        this.leftContainer.buttons.forEach(button => button.layoutTraitsDidChange());
+        this.rightContainer.buttons.forEach(button => button.layoutTraitsDidChange());
+
+        this.element.classList.toggle("compact", layoutTraits & LayoutTraits.Compact);
+    }
 }
index 60424c4..c136250 100644 (file)
@@ -33,7 +33,6 @@ controls/media-controls.js
 controls/ios-inline-media-controls.js
 controls/macos-media-controls.js
 controls/macos-inline-media-controls.js
-controls/macos-compact-inline-media-controls.js
 controls/macos-fullscreen-media-controls.js
 controls/placard.js
 controls/airplay-placard.js
index 53bd7a2..c70c6f3 100644 (file)
@@ -24,6 +24,8 @@
  */
 
 const CompactModeMaxWidth = 241;
+const ReducedPaddingMaxWidth = 300;
+const AudioTightPaddingMaxWidth = 400;
 
 class MediaController
 {
@@ -47,6 +49,9 @@ class MediaController
 
         shadowRoot.addEventListener("resize", this);
 
+        media.videoTracks.addEventListener("addtrack", this);
+        media.videoTracks.addEventListener("removetrack", this);
+
         if (media.webkitSupportsPresentationMode)
             media.addEventListener("webkitpresentationmodechanged", this);
         else
@@ -62,9 +67,17 @@ class MediaController
         } else if (this.media.webkitDisplayingFullscreen)
             return traits | LayoutTraits.Fullscreen;
 
-        if (this._controlsWidth() <= CompactModeMaxWidth)
+        const controlsWidth = this._controlsWidth();
+        if (controlsWidth <= CompactModeMaxWidth)
             return traits | LayoutTraits.Compact;
 
+        const isAudio = this.media instanceof HTMLAudioElement || this.media.videoTracks.length === 0;
+        if (isAudio && controlsWidth <= AudioTightPaddingMaxWidth)
+            return traits | LayoutTraits.TightPadding;
+
+        if (!isAudio && controlsWidth <= ReducedPaddingMaxWidth)
+            return traits | LayoutTraits.ReducedPadding;
+
         return traits;
     }
 
@@ -83,10 +96,11 @@ class MediaController
 
     handleEvent(event)
     {
-        if (event.type === "resize" && event.currentTarget === this.shadowRoot) {
-            this._updateControlsSize();
+        if (event instanceof TrackEvent && event.currentTarget === this.media.videoTracks)
+            this._updateControlsIfNeeded();
+        else if (event.type === "resize" && event.currentTarget === this.shadowRoot)
             this._updateControlsIfNeeded();
-        else if (event.type === "click" && event.currentTarget === this.container)
+        else if (event.type === "click" && event.currentTarget === this.container)
             this._containerWasClicked(event);
         else if (event.currentTarget === this.media) {
             this._updateControlsIfNeeded();
@@ -106,10 +120,14 @@ class MediaController
 
     _updateControlsIfNeeded()
     {
+        const layoutTraits = this.layoutTraits;
         const previousControls = this.controls;
-        const ControlsClass = this._controlsClass();
-        if (previousControls && previousControls.constructor === ControlsClass)
+        const ControlsClass = this._controlsClassForLayoutTraits(layoutTraits);
+        if (previousControls && previousControls.constructor === ControlsClass) {
+            this.controls.layoutTraits = layoutTraits;
+            this._updateControlsSize();
             return;
+        }
 
         // Before we reset the .controls property, we need to destroy the previous
         // supporting objects so we don't leak.
@@ -124,13 +142,13 @@ class MediaController
             this.controls.controlsBar.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
 
         if (previousControls) {
-            if (this._shouldFadeBetweenControls(previousControls, this.controls))
-                this.controls.fadeIn();
+            this.controls.fadeIn();
             this.container.replaceChild(this.controls.element, previousControls.element);
             this.controls.usesLTRUserInterfaceLayoutDirection = previousControls.usesLTRUserInterfaceLayoutDirection;
         } else
             this.container.appendChild(this.controls.element);        
 
+        this.controls.layoutTraits = layoutTraits;
         this._updateControlsSize();
 
         this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, StartSupport, StatusSupport, TimeLabelsSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => {
@@ -138,14 +156,6 @@ class MediaController
         }, this);
     }
 
-    _shouldFadeBetweenControls(previousControls, newControls)
-    {
-        // We don't fade when toggling between the various macOS inline modes.
-        if (previousControls instanceof MacOSInlineMediaControls && newControls instanceof MacOSInlineMediaControls)
-            return false;
-        return true;
-    }
-
     _updateControlsSize()
     {
         this.controls.width = this._controlsWidth();
@@ -163,15 +173,12 @@ class MediaController
             window.requestAnimationFrame(() => this.host.setPreparedToReturnVideoLayerToInline(this.media.webkitPresentationMode !== PiPMode));
     }
 
-    _controlsClass()
+    _controlsClassForLayoutTraits(layoutTraits)
     {
-        const layoutTraits = this.layoutTraits;
         if (layoutTraits & LayoutTraits.iOS)
             return IOSInlineMediaControls;
         if (layoutTraits & LayoutTraits.Fullscreen)
             return MacOSFullscreenMediaControls;
-        if (layoutTraits & LayoutTraits.Compact)
-            return MacOSCompactInlineMediaControls;
         return MacOSInlineMediaControls;
     }
 
index 2bd9e07..8e3b06d 100644 (file)
                7177E2481DB80D2F00919A0B /* start-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "start-support.js"; sourceTree = "<group>"; };
                717F618B1E43D61A00F37024 /* controls-bar.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "controls-bar.css"; sourceTree = "<group>"; };
                717F618C1E43D61A00F37024 /* macos-compact-inline-media-controls.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "macos-compact-inline-media-controls.css"; sourceTree = "<group>"; };
-               717F618D1E43D61A00F37024 /* macos-compact-inline-media-controls.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "macos-compact-inline-media-controls.js"; sourceTree = "<group>"; };
                717F618E1E43D61A00F37024 /* text-tracks.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "text-tracks.css"; sourceTree = "<group>"; };
                717F618F1E43D66500F37024 /* enter-fullscreen-compact@1x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "enter-fullscreen-compact@1x.png"; sourceTree = "<group>"; };
                717F61901E43D66500F37024 /* enter-fullscreen-compact@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "enter-fullscreen-compact@2x.png"; sourceTree = "<group>"; };
                                716FA0E51DB26591007323CC /* layout-item.js */,
                                716FA0E61DB26591007323CC /* layout-node.js */,
                                717F618C1E43D61A00F37024 /* macos-compact-inline-media-controls.css */,
-                               717F618D1E43D61A00F37024 /* macos-compact-inline-media-controls.js */,
                                712157C01DCCCA0700AA7A92 /* macos-fullscreen-media-controls.css */,
                                712157C11DCCCA0700AA7A92 /* macos-fullscreen-media-controls.js */,
                                716FA0E71DB26591007323CC /* macos-inline-media-controls.css */,