[Modern Media Controls] Icon service and the IconButton class
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 6 Oct 2016 13:30:51 +0000 (13:30 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 6 Oct 2016 13:30:51 +0000 (13:30 +0000)
https://bugs.webkit.org/show_bug.cgi?id=162970
<rdar://problem/28631803>

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

Source/WebCore:

We introduce the new IconButton class to display buttons that show an icon
in modern media controls. An IconButton uses a CSS mask-image to display the icon
such that we may set the actual button color to any value by setting the element's
background-color property.

Icons are obtained through the `iconService` singleton which knows how to load the
right icon for the current layout traits and resolution. Icons loaded through the
icon service are cached. In a later patch, we will be introducing functionality,
through the MediaControlsHost, to load the icon from the WebCore bundle.

Tests: media/modern-media-controls/icon-button/icon-button-active-state.html
       media/modern-media-controls/icon-button/icon-button.html
       media/modern-media-controls/icon-service/icon-service.html

* Modules/modern-media-controls/controls/button.css:
(button):
* Modules/modern-media-controls/controls/icon-button.css: Copied from Source/WebCore/Modules/modern-media-controls/controls/button.css.
(button.icon):
(button.icon:active):
* Modules/modern-media-controls/controls/icon-button.js: Added.
(IconButton):
(IconButton.prototype.get iconName):
(IconButton.prototype.set iconName):
(IconButton.prototype.handleEvent):
(IconButton.prototype.layout):
(IconButton.prototype._imageDidLoad):
(IconButton.prototype._updateImage):
* Modules/modern-media-controls/controls/icon-service.js: Copied from Source/WebCore/Modules/modern-media-controls/controls/layout-item.js.
(const.iconService.new.IconService):
(const.iconService.new.IconService.prototype.imageForIconNameAndLayoutTraits):
(const.iconService.new.IconService.prototype.urlForIconNameAndLayoutTraits):
* Modules/modern-media-controls/controls/layout-item.js:
* Modules/modern-media-controls/images/iOS/pause@2x.png: Added.
* Modules/modern-media-controls/images/iOS/pause@3x.png: Added.
* Modules/modern-media-controls/images/iOS/start@2x.png: Added.
* Modules/modern-media-controls/images/iOS/start@3x.png: Added.
* Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png: Added.
* Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png: Added.
* Modules/modern-media-controls/images/macOS/pause@1x.png: Added.
* Modules/modern-media-controls/images/macOS/pause@2x.png: Added.
* Modules/modern-media-controls/images/macOS/start@1x.png: Added.
* Modules/modern-media-controls/images/macOS/start@2x.png: Added.

LayoutTests:

Testing all public properties and methods of the iconService singleton and IconButton class.

* media/modern-media-controls/icon-button/icon-button-active-state-expected.txt: Added.
* media/modern-media-controls/icon-button/icon-button-active-state.html: Added.
* media/modern-media-controls/icon-button/icon-button-expected.txt: Added.
* media/modern-media-controls/icon-button/icon-button.html: Added.
* media/modern-media-controls/icon-service/icon-service-expected.txt: Added.
* media/modern-media-controls/icon-service/icon-service.html: Added.
* media/modern-media-controls/layout-item/layout-item-expected.txt:
* media/modern-media-controls/layout-item/layout-item.html:
* platform/ios-simulator/TestExpectations:

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

26 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/icon-button/icon-button-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/icon-button/icon-button.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/icon-service/icon-service.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/layout-item/layout-item-expected.txt
LayoutTests/media/modern-media-controls/layout-item/layout-item.html
LayoutTests/platform/ios-simulator/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/button.css
Source/WebCore/Modules/modern-media-controls/controls/icon-button.css [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/icon-button.js [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/icon-service.js [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/layout-item.js
Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png [new file with mode: 0644]

index dd5c53b..f85d7be 100644 (file)
@@ -1,3 +1,23 @@
+2016-10-06  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Icon service and the IconButton class
+        https://bugs.webkit.org/show_bug.cgi?id=162970
+        <rdar://problem/28631803>
+
+        Reviewed by Dean Jackson.
+
+        Testing all public properties and methods of the iconService singleton and IconButton class.
+
+        * media/modern-media-controls/icon-button/icon-button-active-state-expected.txt: Added.
+        * media/modern-media-controls/icon-button/icon-button-active-state.html: Added.
+        * media/modern-media-controls/icon-button/icon-button-expected.txt: Added.
+        * media/modern-media-controls/icon-button/icon-button.html: Added.
+        * media/modern-media-controls/icon-service/icon-service-expected.txt: Added.
+        * media/modern-media-controls/icon-service/icon-service.html: Added.
+        * media/modern-media-controls/layout-item/layout-item-expected.txt:
+        * media/modern-media-controls/layout-item/layout-item.html:
+        * platform/ios-simulator/TestExpectations:
+
 2016-10-06  Youenn Fablet  <youenn@apple.com>
 
         Refresh WPT tests up to c875b42
diff --git a/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state-expected.txt b/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state-expected.txt
new file mode 100644 (file)
index 0000000..781f480
--- /dev/null
@@ -0,0 +1,10 @@
+Testing an IconButton has a white background-color when pressed.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.getComputedStyle(iconButton.element).backgroundColor is "rgb(255, 255, 255)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state.html b/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state.html
new file mode 100644 (file)
index 0000000..3318e7e
--- /dev/null
@@ -0,0 +1,50 @@
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing an <code>IconButton</code> has a white background-color when pressed.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const iconButton = new IconButton({ layoutTraits: LayoutTraits.macOS });
+iconButton.iconName = Icons.Pause;
+document.body.appendChild(iconButton.element);
+
+function checkBackgroundColor()
+{
+    shouldBeEqualToString("window.getComputedStyle(iconButton.element).backgroundColor", "rgb(255, 255, 255)");
+    finishJSTest();
+}
+
+if ("testRunner" in window) {
+    const bounds = iconButton.element.getBoundingClientRect();
+    const x = bounds.left + 1;
+    const y = bounds.top + 1;
+    if ("createTouch" in document) {
+        testRunner.runUIScript(`
+        (function() {
+            uiController.touchDownAtPoint(${x}, ${y}, 1, function() {
+                uiController.uiScriptComplete("Done");
+            });
+        })();`, checkBackgroundColor);
+    } else {
+        eventSender.mouseMoveTo(x, y);
+        eventSender.mouseDown();
+        checkBackgroundColor();
+    }
+} else
+    debug("This test is designed to run in DRT.");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/icon-button/icon-button-expected.txt b/LayoutTests/media/modern-media-controls/icon-button/icon-button-expected.txt
new file mode 100644 (file)
index 0000000..8c74d31
--- /dev/null
@@ -0,0 +1,30 @@
+Testing the IconButton class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS iconButton.element.localName is "button"
+PASS iconButton.element.className is "icon"
+
+There should be no iconName by default
+PASS iconButton.iconName is ""
+
+Setting an iconName with invalid layout traits should throw
+PASS function () { iconButton.iconName = Icons.Pause } threw exception Could not identify icon's platform from layout traits..
+PASS iconButton.iconName is ""
+
+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 start icon
+PASS iconButton.element.style.webkitMaskImage.includes("macOS/start") is true
+PASS iconButton.element.style.width is "70px"
+PASS iconButton.element.style.height is "70px"
+PASS iconButton.element.style.webkitMaskSize is "70px 70px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/icon-button/icon-button.html b/LayoutTests/media/modern-media-controls/icon-button/icon-button.html
new file mode 100644 (file)
index 0000000..c8d1288
--- /dev/null
@@ -0,0 +1,67 @@
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>IconButton</code> class.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const layoutDelegate = {};
+
+const iconButton = new IconButton(layoutDelegate);
+
+shouldBeEqualToString("iconButton.element.localName", "button");
+shouldBeEqualToString("iconButton.element.className", "icon");
+
+debug("");
+debug("There should be no iconName by default");
+shouldBeEqualToString("iconButton.iconName", "");
+
+debug("");
+debug("Setting an iconName with invalid layout traits should throw");
+shouldThrow(function() { iconButton.iconName = Icons.Pause });
+shouldBeEqualToString("iconButton.iconName", "");
+
+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 start icon");
+        iconButton.iconName = Icons.Start;
+    } else if (numberOfFrames === 2) {
+        shouldBeTrue('iconButton.element.style.webkitMaskImage.includes("macOS/start")');
+        shouldBeEqualToString("iconButton.element.style.width", "70px");
+        shouldBeEqualToString("iconButton.element.style.height", "70px");
+        shouldBeEqualToString("iconButton.element.style.webkitMaskSize", "70px 70px");
+
+        finishJSTest();
+    } 
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt b/LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt
new file mode 100644 (file)
index 0000000..36359eb
--- /dev/null
@@ -0,0 +1,16 @@
+Testing the iconService singleton.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Checking path to images is computed according to traits
+PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS).includes("macOS/pause") is true
+PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.iOS).includes("iOS/pause") is true
+PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS | LayoutTraits.Fullscreen).includes("macOS/pause-fullscreen") is true
+
+Checking requested images are cached
+PASS iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS) === iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS) is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/icon-service/icon-service.html b/LayoutTests/media/modern-media-controls/icon-service/icon-service.html
new file mode 100644 (file)
index 0000000..38a7a29
--- /dev/null
@@ -0,0 +1,23 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>iconService</code> singleton.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+debug("Checking path to images is computed according to traits");
+shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS).includes("macOS/pause")');
+shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.iOS).includes("iOS/pause")');
+shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS | LayoutTraits.Fullscreen).includes("macOS/pause-fullscreen")');
+
+debug("");
+debug("Checking requested images are cached");
+shouldBeTrue('iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS) === iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS)');
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index f26d33b..805cc7c 100644 (file)
@@ -5,11 +5,11 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 Creating a LayoutItem and setting a layout delegate after construction.
 PASS itemWithNoParameter.layoutTraits === LayoutTraits.Unknown is true
-PASS !!(itemWithNoParameter.layoutTraits | LayoutTraits.Mac) is true
+PASS !!(itemWithNoParameter.layoutTraits | LayoutTraits.macOS) is true
 PASS !!(itemWithNoParameter.layoutTraits | LayoutTraits.Fullscreen) is true
 
 Creating a LayoutItem with a layout delegate set at construction.
-PASS !!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.Mac) is true
+PASS !!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.macOS) is true
 PASS !!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.Fullscreen) is true
 PASS successfullyParsed is true
 
index ae6421d..c01830d 100644 (file)
@@ -10,7 +10,7 @@ const layoutDelegate = new class
 {
     get layoutTraits()
     {
-        return LayoutTraits.Mac | LayoutTraits.Fullscreen;
+        return LayoutTraits.macOS | LayoutTraits.Fullscreen;
     }
 };
 
@@ -19,13 +19,13 @@ const itemWithNoParameter = new LayoutItem;
 shouldBeTrue("itemWithNoParameter.layoutTraits === LayoutTraits.Unknown");
 
 itemWithNoParameter.layoutDelegate = layoutDelegate;
-shouldBeTrue("!!(itemWithNoParameter.layoutTraits | LayoutTraits.Mac)");
+shouldBeTrue("!!(itemWithNoParameter.layoutTraits | LayoutTraits.macOS)");
 shouldBeTrue("!!(itemWithNoParameter.layoutTraits | LayoutTraits.Fullscreen)");
 
 debug("");
 debug("Creating a LayoutItem with a layout delegate set at construction.");
 const itemWithLayoutDelegate = new LayoutItem({ layoutDelegate });
-shouldBeTrue("!!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.Mac)");
+shouldBeTrue("!!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.macOS)");
 shouldBeTrue("!!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.Fullscreen)");
 
 </script>
index 9272e2f..bfc0b91 100644 (file)
@@ -2670,3 +2670,5 @@ webkit.org/b/130972 transitions/3d/interrupted-transition.html [ Pass Timeout ]
 fast/text/letterpress-different.html [ Pass ]
 
 webkit.org/b/162739 fast/images/gif-loop-count.html [ Pass ImageOnlyFailure ]
+
+webkit.org/b/163009 media/modern-media-controls/icon-button/icon-button-active-state.html [ Failure ]
index 00b78aa..318d9db 100644 (file)
@@ -1,3 +1,54 @@
+2016-10-06  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Icon service and the IconButton class
+        https://bugs.webkit.org/show_bug.cgi?id=162970
+        <rdar://problem/28631803>
+
+        Reviewed by Dean Jackson.
+
+        We introduce the new IconButton class to display buttons that show an icon
+        in modern media controls. An IconButton uses a CSS mask-image to display the icon
+        such that we may set the actual button color to any value by setting the element's
+        background-color property.
+
+        Icons are obtained through the `iconService` singleton which knows how to load the
+        right icon for the current layout traits and resolution. Icons loaded through the
+        icon service are cached. In a later patch, we will be introducing functionality,
+        through the MediaControlsHost, to load the icon from the WebCore bundle.
+
+        Tests: media/modern-media-controls/icon-button/icon-button-active-state.html
+               media/modern-media-controls/icon-button/icon-button.html
+               media/modern-media-controls/icon-service/icon-service.html
+
+        * Modules/modern-media-controls/controls/button.css:
+        (button):
+        * Modules/modern-media-controls/controls/icon-button.css: Copied from Source/WebCore/Modules/modern-media-controls/controls/button.css.
+        (button.icon):
+        (button.icon:active):
+        * Modules/modern-media-controls/controls/icon-button.js: Added.
+        (IconButton):
+        (IconButton.prototype.get iconName):
+        (IconButton.prototype.set iconName):
+        (IconButton.prototype.handleEvent):
+        (IconButton.prototype.layout):
+        (IconButton.prototype._imageDidLoad):
+        (IconButton.prototype._updateImage):
+        * Modules/modern-media-controls/controls/icon-service.js: Copied from Source/WebCore/Modules/modern-media-controls/controls/layout-item.js.
+        (const.iconService.new.IconService):
+        (const.iconService.new.IconService.prototype.imageForIconNameAndLayoutTraits):
+        (const.iconService.new.IconService.prototype.urlForIconNameAndLayoutTraits):
+        * Modules/modern-media-controls/controls/layout-item.js:
+        * Modules/modern-media-controls/images/iOS/pause@2x.png: Added.
+        * Modules/modern-media-controls/images/iOS/pause@3x.png: Added.
+        * Modules/modern-media-controls/images/iOS/start@2x.png: Added.
+        * Modules/modern-media-controls/images/iOS/start@3x.png: Added.
+        * Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png: Added.
+        * Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png: Added.
+        * Modules/modern-media-controls/images/macOS/pause@1x.png: Added.
+        * Modules/modern-media-controls/images/macOS/pause@2x.png: Added.
+        * Modules/modern-media-controls/images/macOS/start@1x.png: Added.
+        * Modules/modern-media-controls/images/macOS/start@2x.png: Added.
+
 2016-10-06  Miguel Gomez  <magomez@igalia.com>
 
         [GTK] Fix build with GSTREAMER_GL enabled and ACCELERATED_2D_CANVAS disabled
index 1f0f22c..b54295e 100644 (file)
@@ -25,6 +25,8 @@
 
 button {
     position: absolute;
+    top: 0;
+    left: 0;
     border: 0;
     -webkit-appearance: none;
 }
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/icon-button.css b/Source/WebCore/Modules/modern-media-controls/controls/icon-button.css
new file mode 100644 (file)
index 0000000..dc10fb4
--- /dev/null
@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+button.icon {
+    -webkit-mask-repeat: no-repeat;
+}
+
+button.icon:active {
+    background-color: white;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js b/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js
new file mode 100644 (file)
index 0000000..e1c6500
--- /dev/null
@@ -0,0 +1,100 @@
+/*
+ * 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 IconButton extends Button
+{
+
+    constructor(layoutDelegate)
+    {
+        super(layoutDelegate);
+
+        this.element.classList.add("icon");
+
+        this._image = null;
+        this._iconName = "";
+
+        this.size = { width: 0, height: 0 };
+    }
+
+    // Public
+
+    get iconName()
+    {
+        return this._iconName;
+    }
+
+    set iconName(iconName)
+    {
+        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);
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        if (event.type === "load" && event.target === this._image)
+            this._imageDidLoad();
+        else
+            super.handleEvent(event);
+    }
+
+    layout()
+    {
+        super.layout();
+
+        this.element.style.webkitMaskImage = `url(${this._image.src})`;
+        this.element.style.webkitMaskSize = `${this.width}px ${this.height}px`;
+    }
+
+    // Private
+
+    _imageDidLoad()
+    {
+        this._image.removeEventListener("load", this);
+        this._updateImage();
+    }
+
+    _updateImage()
+    {
+        this.width = this._image.width / window.devicePixelRatio;
+        this.height = this._image.height / window.devicePixelRatio;
+
+        this.needsLayout = true;
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js b/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js
new file mode 100644 (file)
index 0000000..55f8d84
--- /dev/null
@@ -0,0 +1,69 @@
+/*
+ * 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.
+ */
+
+const Icons = {
+    Pause   : "pause",
+    Start   : "start"
+};
+
+const IconsWithFullScreenVariants = [Icons.Pause];
+
+const iconService = new class IconService {
+
+    constructor()
+    {
+        this.images = {};
+    }
+
+    imageForIconNameAndLayoutTraits(iconName, layoutTraits)
+    {
+        const path = this.urlForIconNameAndLayoutTraits(iconName, layoutTraits);
+        
+        let image = this.images[path];
+        if (image)
+            return image;
+
+        image = this.images[path] = new Image;
+        image.src = path;
+        return image;
+    }
+
+    urlForIconNameAndLayoutTraits(iconName, layoutTraits)
+    {
+        let platform;
+        if (layoutTraits & LayoutTraits.macOS)
+            platform = "macOS";
+        else if (layoutTraits & LayoutTraits.iOS)
+            platform = "iOS";
+        else
+            throw "Could not identify icon's platform from layout traits.";
+
+        if (layoutTraits & LayoutTraits.Fullscreen && IconsWithFullScreenVariants.includes(iconName))
+            iconName += "-fullscreen";
+
+        return `${this.directoryPath}/${platform}/${iconName}@${window.devicePixelRatio}x.png`;
+    }
+
+};
index 6540b09..4e76ae4 100644 (file)
@@ -25,7 +25,7 @@
 
 const LayoutTraits = {
     Unknown     : 0,
-    Mac         : 1 << 0,
+    macOS       : 1 << 0,
     iOS         : 1 << 1,
     Fullscreen  : 1 << 2
 };
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png
new file mode 100644 (file)
index 0000000..c3226a1
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png
new file mode 100644 (file)
index 0000000..cf391a6
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png
new file mode 100644 (file)
index 0000000..b1264e8
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png
new file mode 100644 (file)
index 0000000..a520a18
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png
new file mode 100644 (file)
index 0000000..ee41eb7
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png
new file mode 100644 (file)
index 0000000..dd49890
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png
new file mode 100644 (file)
index 0000000..873b930
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png
new file mode 100644 (file)
index 0000000..b93a5e5
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png
new file mode 100644 (file)
index 0000000..e746737
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png
new file mode 100644 (file)
index 0000000..b1264e8
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png differ