From 1bf1084f2b10c3b47fd1a588d85d21ed0eb41d0c Mon Sep 17 00:00:00 2001
From: Lorry Tar Creator <lorry-tar-importer@lorry>
Date: Tue, 27 Jun 2017 06:07:23 +0000
Subject: webkitgtk-2.16.5

---
 .../controls/airplay-button.css                    |  29 ++
 .../controls/airplay-button.js                     |  38 +++
 .../controls/airplay-placard.js                    |  39 +++
 .../controls/background-tint.css                   |  48 ++++
 .../controls/background-tint.js                    |  34 +++
 .../modern-media-controls/controls/button.css      |  34 +++
 .../modern-media-controls/controls/button.js       |  83 ++++++
 .../controls/buttons-container.css                 |  29 ++
 .../controls/buttons-container.js                  |  78 ++++++
 .../controls/controls-bar.css                      |  35 +++
 .../modern-media-controls/controls/controls-bar.js | 248 +++++++++++++++++
 .../controls/forward-button.js                     |  38 +++
 .../controls/fullscreen-button.js                  |  39 +++
 .../modern-media-controls/controls/icon-button.css |  33 +++
 .../modern-media-controls/controls/icon-button.js  | 134 +++++++++
 .../modern-media-controls/controls/icon-service.js | 102 +++++++
 .../controls/invalid-placard.js                    |  37 +++
 .../controls/ios-inline-media-controls.css         | 132 +++++++++
 .../controls/ios-inline-media-controls.js          | 109 ++++++++
 .../modern-media-controls/controls/layout-item.js  |  53 ++++
 .../modern-media-controls/controls/layout-node.js  | 307 +++++++++++++++++++++
 .../macos-compact-inline-media-controls.css        |  71 +++++
 .../controls/macos-fullscreen-media-controls.css   | 119 ++++++++
 .../controls/macos-fullscreen-media-controls.js    | 173 ++++++++++++
 .../controls/macos-inline-media-controls.css       | 118 ++++++++
 .../controls/macos-inline-media-controls.js        | 202 ++++++++++++++
 .../controls/macos-media-controls.css              |  51 ++++
 .../controls/macos-media-controls.js               |  81 ++++++
 .../controls/media-controls.css                    |  77 ++++++
 .../controls/media-controls.js                     | 148 ++++++++++
 .../modern-media-controls/controls/mute-button.js  |  53 ++++
 .../modern-media-controls/controls/pip-button.js   |  38 +++
 .../modern-media-controls/controls/pip-placard.js  |  38 +++
 .../modern-media-controls/controls/placard.css     |  70 +++++
 .../modern-media-controls/controls/placard.js      |  48 ++++
 .../controls/play-pause-button.js                  |  53 ++++
 .../controls/rewind-button.js                      |  38 +++
 .../modern-media-controls/controls/scheduler.js    |  66 +++++
 .../modern-media-controls/controls/scrubber.js     | 156 +++++++++++
 .../modern-media-controls/controls/seek-button.js  |  73 +++++
 .../controls/skip-back-button.js                   |  38 +++
 .../modern-media-controls/controls/slider.css      |  47 ++++
 .../modern-media-controls/controls/slider.js       | 152 ++++++++++
 .../controls/start-button.css                      |  58 ++++
 .../modern-media-controls/controls/start-button.js |  42 +++
 .../controls/status-label.css                      |  37 +++
 .../modern-media-controls/controls/status-label.js |  85 ++++++
 .../modern-media-controls/controls/text-tracks.css |  82 ++++++
 .../modern-media-controls/controls/time-control.js |  93 +++++++
 .../modern-media-controls/controls/time-label.css  |  33 +++
 .../modern-media-controls/controls/time-label.js   |  80 ++++++
 .../controls/tracks-button.js                      |  38 +++
 .../controls/tracks-panel.css                      | 105 +++++++
 .../modern-media-controls/controls/tracks-panel.js | 305 ++++++++++++++++++++
 .../controls/volume-down-button.js                 |  38 +++
 .../controls/volume-slider.css                     |  30 ++
 .../controls/volume-slider.js                      | 120 ++++++++
 .../controls/volume-up-button.js                   |  38 +++
 58 files changed, 4773 insertions(+)
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/background-tint.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/background-tint.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/button.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/controls-bar.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/forward-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/icon-button.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/icon-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/icon-service.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/invalid-placard.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/layout-item.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/layout-node.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/media-controls.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/media-controls.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/mute-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/pip-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/placard.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/placard.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/rewind-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/scheduler.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/scrubber.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/seek-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/slider.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/slider.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/start-button.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/start-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/status-label.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/status-label.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/time-control.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/time-label.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/time-label.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/volume-down-button.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js
 create mode 100644 Source/WebCore/Modules/modern-media-controls/controls/volume-up-button.js

(limited to 'Source/WebCore/Modules/modern-media-controls/controls')

diff --git a/Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css b/Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css
new file mode 100644
index 000000000..3856c8db6
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css
@@ -0,0 +1,29 @@
+/*
+ * 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.airplay.on {
+    background-color: -apple-wireless-playback-target-active !important;
+    mix-blend-mode: normal !important;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js b/Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js
new file mode 100644
index 000000000..3b6c9ed30
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js
@@ -0,0 +1,38 @@
+/*
+ * 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 AirplayButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "airplay",
+            iconName: Icons.Airplay,
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js b/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js
new file mode 100644
index 000000000..f167f48e7
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js
@@ -0,0 +1,39 @@
+/*
+ * 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 AirplayPlacard extends Placard
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            iconName: Icons.AirplayPlacard,
+            title: UIString("AirPlay"),
+            description: UIString("This video is playing on your Apple TV"),
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/background-tint.css b/Source/WebCore/Modules/modern-media-controls/controls/background-tint.css
new file mode 100644
index 000000000..7de98049f
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/background-tint.css
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2017 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.
+ */
+
+.background-tint {
+    pointer-events: none;
+}
+
+.background-tint,
+.background-tint > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.background-tint > .blur {
+    /* FIXME: we want to use the real System Dark treatment here, see <rdar://problem/19993961> */
+    background-color: rgba(30, 30, 30, 0.45);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+.background-tint > .tint {
+    background-color: rgb(41, 41, 41);
+    mix-blend-mode: lighten;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/background-tint.js b/Source/WebCore/Modules/modern-media-controls/controls/background-tint.js
new file mode 100644
index 000000000..29df8eeb7
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/background-tint.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2017 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 BackgroundTint extends LayoutNode
+{
+
+    constructor()
+    {
+        super(`<div class="background-tint"><div class="blur"></div><div class="tint"></div></div>`);
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/button.css b/Source/WebCore/Modules/modern-media-controls/controls/button.css
new file mode 100644
index 000000000..bf16ceff2
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/button.css
@@ -0,0 +1,34 @@
+/*
+ * 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 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 0;
+    -webkit-appearance: none;
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/button.js b/Source/WebCore/Modules/modern-media-controls/controls/button.js
new file mode 100644
index 000000000..6df091699
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/button.js
@@ -0,0 +1,83 @@
+/*
+ * 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 Button extends LayoutItem
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            element: "<button />",
+            layoutDelegate
+        });
+
+        this._enabled = true;
+
+        if (GestureRecognizer.SupportsTouches)
+            this._tapGestureRecognizer = new TapGestureRecognizer(this.element, this);
+        else
+            this.element.addEventListener("click", this);
+    }
+
+    // Public
+
+    get enabled()
+    {
+        return this._enabled;
+    }
+
+    set enabled(flag)
+    {
+        if (this._enabled === flag)
+            return;
+
+        this._enabled = flag;
+        if (this.layoutDelegate && typeof this.layoutDelegate.layout === "function")
+            this.layoutDelegate.layout();
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        if (event.type === "click" && event.currentTarget === this.element)
+            this._notifyDelegateOfActivation();
+    }
+
+    gestureRecognizerStateDidChange(recognizer)
+    {
+        if (this._tapGestureRecognizer === recognizer && recognizer.state === GestureRecognizer.States.Recognized)
+            this._notifyDelegateOfActivation();
+    }
+
+    // Private
+
+    _notifyDelegateOfActivation()
+    {
+        if (this._enabled && this.uiDelegate && typeof this.uiDelegate.buttonWasPressed === "function")
+            this.uiDelegate.buttonWasPressed(this);
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css b/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css
new file mode 100644
index 000000000..23469b8f3
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css
@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+.buttons-container {
+    position: absolute;
+    height: 100%;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js b/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js
new file mode 100644
index 000000000..0af2602ef
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js
@@ -0,0 +1,78 @@
+/*
+ * 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 ButtonsContainer extends LayoutNode
+{
+
+    constructor({ buttons = [], leftMargin = 24, rightMargin = 24, buttonMargin = 24, cssClassName = "" } = {})
+    {
+        super(`<div class="buttons-container ${cssClassName}"></div>`);
+
+        this.buttons = buttons;
+        this.leftMargin = leftMargin;
+        this.rightMargin = rightMargin;
+        this.buttonMargin = buttonMargin;
+    }
+
+    // Public
+
+    get buttons()
+    {
+        return this._buttons;
+    }
+
+    set buttons(buttons)
+    {
+        if (!Array.isArray(buttons))
+            return;
+
+        this._buttons = buttons;
+        this.needsLayout = true;
+    }
+
+    layout()
+    {
+        super.layout();
+
+        const children = [];
+        let x = this.leftMargin;
+
+        this._buttons.forEach(button => {
+            if (!button.enabled || button.dropped)
+                return;
+            button.x = x;
+            x += button.width + this.buttonMargin;
+            children.push(button);
+        });
+
+        if (children.length)
+            this.width = x - this.buttonMargin + this.rightMargin;
+        else
+            this.width = this.buttonMargin + this.rightMargin;
+
+        this.children = children;
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.css b/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.css
new file mode 100644
index 000000000..e72aea9cc
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.css
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+.controls-bar {
+    position: absolute;
+    transition: opacity 0.1s linear;
+}
+
+.controls-bar.faded {
+    opacity: 0;
+    pointer-events: none;
+    transition-duration: 0.25s;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js b/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js
new file mode 100644
index 000000000..25146b833
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js
@@ -0,0 +1,248 @@
+/*
+ * 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 ControlsBar extends LayoutNode
+{
+
+    constructor(mediaControls)
+    {
+        super(`<div class="controls-bar"></div>`);
+
+        this._translation = new DOMPoint;
+        this._mediaControls = mediaControls;
+
+        if (GestureRecognizer.SupportsTouches)
+            this._tapGestureRecognizer = new TapGestureRecognizer(this._mediaControls.element, this);
+
+        this.autoHideDelay = ControlsBar.DefaultAutoHideDelay;
+
+        this.fadesWhileIdle = false;
+        this.userInteractionEnabled = true;
+    }
+
+    // Public
+
+    get translation()
+    {
+        return new DOMPoint(this._translation.x, this._translation.y);
+    }
+
+    set translation(point)
+    {
+        if (this._translation.x === point.x && this._translation.y === point.y)
+            return;
+
+        this._translation = new DOMPoint(point.x, point.y);
+        this.markDirtyProperty("translation");
+    }
+
+    get userInteractionEnabled()
+    {
+        return this._userInteractionEnabled;
+    }
+
+    set userInteractionEnabled(flag)
+    {
+        if (this._userInteractionEnabled === flag)
+            return;
+
+        this._userInteractionEnabled = flag;
+        this.markDirtyProperty("userInteractionEnabled");
+    }
+
+    get fadesWhileIdle()
+    {
+        return this._fadesWhileIdle;
+    }
+
+    set fadesWhileIdle(flag)
+    {
+        if (this._fadesWhileIdle == flag)
+            return;
+
+        this._fadesWhileIdle = flag;
+
+        if (GestureRecognizer.SupportsTouches)
+            this._tapGestureRecognizer.enabled = flag;
+        else {
+            if (flag) {
+                this._mediaControls.element.addEventListener("mousemove", this);
+                this._mediaControls.element.addEventListener("mouseleave", this);
+                this.element.addEventListener("mouseenter", this);
+                this.element.addEventListener("mouseleave", this);
+            } else {
+                this._mediaControls.element.removeEventListener("mousemove", this);
+                this._mediaControls.element.removeEventListener("mouseleave", this);
+                this.element.removeEventListener("mouseenter", this);
+                this.element.removeEventListener("mouseleave", this);
+            }
+        }
+
+        if (flag && !this.faded)
+            this._resetAutoHideTimer(false);
+        else if (!flag)
+            this.faded = false;
+    }
+
+    get visible()
+    {
+        return super.visible;
+    }
+
+    set visible(flag)
+    {
+        if (this.visible === flag)
+            return;
+
+        // If we just got made visible again, let's fade the controls in.
+        if (flag && !this.visible)
+            this.faded = false;
+        else if (!flag)
+            this._cancelNonEnforcedAutoHideTimer();
+
+        super.visible = flag;
+
+        this._mediaControls.controlsBarVisibilityDidChange(this);
+    }
+
+    get faded()
+    {
+        return !!this._faded;
+    }
+
+    set faded(flag)
+    {
+        if (this._faded === flag)
+            return;
+
+        this._faded = flag;
+        if (!flag)
+            this._resetAutoHideTimer(true);
+        else
+            delete this._enforceAutoHideTimer;
+
+        this.markDirtyProperty("faded");
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        if (event.currentTarget === this._mediaControls.element) {
+            if (event.type === "mousemove") {
+                this.faded = false;
+                this._resetAutoHideTimer(true);
+            } else if (event.type === "mouseleave" && this._fadesWhileIdle && !this._enforceAutoHideTimer)
+                this.faded = true;
+        } else if (event.currentTarget === this.element) {
+            if (event.type === "mouseenter") {
+                this._disableAutoHiding = true;
+                this._cancelNonEnforcedAutoHideTimer();
+            } else if (event.type === "mouseleave") {
+                delete this._disableAutoHiding;
+                this._resetAutoHideTimer(true);
+            } else if (event.type === "focus")
+                this.faded = false;
+        }
+    }
+
+    gestureRecognizerStateDidChange(recognizer)
+    {
+        if (this._tapGestureRecognizer !== recognizer || recognizer.state !== GestureRecognizer.States.Recognized)
+            return;
+
+        if (this.faded)
+            this.faded = false;
+        else {
+            let ancestor = this.element.parentNode;
+            while (ancestor && !(ancestor instanceof ShadowRoot))
+                ancestor = ancestor.parentNode;
+
+            const shadowRoot = ancestor;
+            if (!shadowRoot)
+                return;
+
+            const tapLocation = recognizer.locationInClient();
+            const tappedElement = shadowRoot.elementFromPoint(tapLocation.x, tapLocation.y);
+            if (!this.element.contains(tappedElement))
+                this.faded = true;
+        }
+    }
+
+    commitProperty(propertyName)
+    {
+        if (propertyName === "translation")
+            this.element.style.transform = `translate(${this._translation.x}px, ${this._translation.y}px)`;
+        else if (propertyName === "faded")
+            this.element.classList.toggle("faded", this.faded);
+        else if (propertyName === "userInteractionEnabled")
+            this.element.style.pointerEvents = this._userInteractionEnabled ? "all" : "none";
+        else
+            super.commitProperty(propertyName);
+    }
+
+    // Private
+
+    _cancelNonEnforcedAutoHideTimer()
+    {
+        if (!this._enforceAutoHideTimer)
+            this._cancelAutoHideTimer();
+
+    }
+
+    _cancelAutoHideTimer()
+    {
+        window.clearTimeout(this._autoHideTimer);
+        delete this._autoHideTimer;
+    }
+
+    _resetAutoHideTimer(cancelable)
+    {
+        if (cancelable && this._enforceAutoHideTimer)
+            return;
+
+        this._cancelAutoHideTimer();
+
+        if (cancelable)
+            delete this._enforceAutoHideTimer;
+        else
+            this._enforceAutoHideTimer = true;
+
+        this._autoHideTimer = window.setTimeout(this._autoHideTimerFired.bind(this), this.autoHideDelay);
+    }
+
+    _autoHideTimerFired()
+    {
+        delete this._enforceAutoHideTimer;
+        if (this._disableAutoHiding)
+            return;
+
+        this._cancelAutoHideTimer();
+        this.faded = this._fadesWhileIdle;
+    }
+
+}
+
+ControlsBar.DefaultAutoHideDelay = 4000;
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/forward-button.js b/Source/WebCore/Modules/modern-media-controls/controls/forward-button.js
new file mode 100644
index 000000000..5a21221d2
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/forward-button.js
@@ -0,0 +1,38 @@
+/*
+ * 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 ForwardButton extends SeekButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "forward",
+            iconName: Icons.Forward,
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js b/Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js
new file mode 100644
index 000000000..9c7bfd792
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js
@@ -0,0 +1,39 @@
+/*
+ * 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 FullscreenButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "fullscreen",
+            layoutDelegate
+        });
+
+        this.iconName = this.layoutTraits & LayoutTraits.Fullscreen ? Icons.ExitFullscreen : Icons.EnterFullscreen;
+    }
+
+}
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
index 000000000..465f5d367
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/icon-button.css
@@ -0,0 +1,33 @@
+/*
+ * 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,
+button.icon.on {
+    background-color: white !important;
+}
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
index 000000000..53e8c3b73
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js
@@ -0,0 +1,134 @@
+/*
+ * 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 = null, cssClassName = "", iconName = "" } = {})
+    {
+        super(layoutDelegate);
+
+        this.element.classList.add("icon");
+        if (!!cssClassName)
+            this.element.classList.add(cssClassName);
+
+        this._image = null;
+        this._iconName = "";
+        this._iconLayoutTraits = LayoutTraits.Unknown;
+
+        if (!!iconName)
+            this.iconName = iconName;
+    }
+
+    // Public
+
+    get iconName()
+    {
+        return this._iconName;
+    }
+
+    set iconName(iconName)
+    {
+        if (this._iconName === iconName)
+            return;
+
+        this._loadImage(iconName);
+    }
+
+    get on()
+    {
+        return this.element.classList.contains("on");
+    }
+
+    set on(flag) {
+        this.element.classList.toggle("on", flag);
+    }
+
+    layoutTraitsDidChange()
+    {
+        if (this._iconLayoutTraits !== this.layoutTraits)
+            this._loadImage(this._iconName);
+    }
+
+    // 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
+
+    _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);
+        this._updateImage();
+    }
+
+    _updateImage()
+    {
+        this.needsLayout = true;
+
+        const width = this._image.width / window.devicePixelRatio;
+        const height = this._image.height / window.devicePixelRatio;
+
+        if (this.width === width && this.height === height)
+            return;
+
+        this.width = width;
+        this.height = height;
+
+        if (this.layoutDelegate)
+            this.layoutDelegate.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
index 000000000..417e9f51d
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js
@@ -0,0 +1,102 @@
+/*
+ * 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 = {
+    Airplay         : "airplay",
+    AirplayPlacard  : "airplay-placard",
+    EnterFullscreen : "enter-fullscreen",
+    EnterPiP        : "pip-in",
+    ExitFullscreen  : "exit-fullscreen",
+    Forward         : "forward",
+    InvalidPlacard  : "invalid-placard",
+    Pause           : "pause",
+    PiPPlacard      : "pip-placard",
+    Play            : "play",
+    Rewind          : "rewind",
+    ScaleToFill     : "scale-to-fill",
+    ScaleToFit      : "scale-to-fit",
+    SkipBack        : "interval-skip-back",
+    Start           : "start",
+    Tracks          : "media-selection",
+    Volume          : "volume",
+    VolumeDown      : "volume-down",
+    VolumeMuted     : "volume-mute",
+    VolumeUp        : "volume-up"
+};
+
+const IconsWithFullscreenVariants = [Icons.Airplay, Icons.Tracks, Icons.Pause, Icons.EnterPiP, Icons.Play, Icons.VolumeDown, Icons.VolumeUp];
+const IconsWithCompactVariants = [Icons.Play, Icons.Pause, Icons.SkipBack, Icons.Volume, Icons.VolumeMuted, Icons.EnterFullscreen];
+
+const iconService = new class IconService {
+
+    constructor()
+    {
+        this.images = {};
+    }
+
+    // Public
+
+    imageForIconNameAndLayoutTraits(iconName, layoutTraits)
+    {
+        const [fileName, platform] = this._fileNameAndPlatformForIconNameAndLayoutTraits(iconName, layoutTraits);
+        const path = `${platform}/${fileName}.png`;
+
+        let image = this.images[path];
+        if (image)
+            return image;
+
+        image = this.images[path] = new Image;
+
+        if (this.mediaControlsHost)
+            image.src = "data:image/png;base64," + this.mediaControlsHost.base64StringForIconAndPlatform(fileName, platform);
+        else
+            image.src = `${this.directoryPath}/${path}`;
+
+        return image;
+    }
+
+    // Private
+
+    _fileNameAndPlatformForIconNameAndLayoutTraits(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";
+        else if (layoutTraits & LayoutTraits.Compact && IconsWithCompactVariants.includes(iconName))
+            iconName += "-compact";
+
+        const fileName = `${iconName}@${window.devicePixelRatio}x`;
+
+        return [fileName, platform];
+    }
+
+};
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/invalid-placard.js b/Source/WebCore/Modules/modern-media-controls/controls/invalid-placard.js
new file mode 100644
index 000000000..18d3af29b
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/invalid-placard.js
@@ -0,0 +1,37 @@
+/*
+ * 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 InvalidPlacard extends Placard
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            iconName: Icons.InvalidPlacard,
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css b/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css
new file mode 100644
index 000000000..ba683a9d3
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css
@@ -0,0 +1,132 @@
+/*
+ * 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.
+ */
+
+/* Controls bar */
+
+.media-controls.ios.inline > .controls-bar {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 50px;
+}
+
+.media-controls.ios.inline > .controls-bar:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    -webkit-appearance: media-controls-light-bar-background;
+    will-change: transform;
+}
+
+:host(audio) .media-controls.ios.inline > .controls-bar:before {
+    -webkit-appearance: none;
+    background-color: rgb(212, 212, 212);
+}
+
+.media-controls.ios.inline .time-control {
+    position: absolute;
+}
+
+/* Buttons */
+
+.media-controls.ios.inline button {
+    background-color: black;
+}
+
+.media-controls.ios.inline button:active {
+    background-color: white;
+}
+
+.media-controls.ios.inline > .controls-bar button {
+    height: 100% !important;
+}
+
+/* Make right container flush to the right */
+
+.media-controls.ios.inline .buttons-container.right {
+    right: 0;
+}
+
+/* Buttons placement */
+
+.media-controls.ios.inline button.play-pause {
+    -webkit-mask-position-y: 12px;
+}
+
+.media-controls.ios.inline button.skip-back {
+    -webkit-mask-position-y: 10px;
+}
+
+.media-controls.ios.inline button.airplay {
+    -webkit-mask-position-y: 13px;
+}
+
+.media-controls.ios.inline button.pip {
+    -webkit-mask-position-y: 13px;
+}
+
+.media-controls.ios.inline button.fullscreen {
+    -webkit-mask-position-y: 13px;
+}
+
+/* Time labels */
+
+.media-controls.ios.inline .time-label {
+    top: 14.5px;
+    color: black;
+}
+
+/* Scrubber */
+
+.media-controls.ios.inline .scrubber.slider {
+    top: 13px;
+}
+
+.media-controls.ios.inline .scrubber.slider > div {
+    position: absolute;
+    top: 10px;
+    left: 2px;
+    right: 2px;
+    height: 3px;
+    border-radius: 1.5px;
+    background-color: rgba(0, 0, 0, 0.55);
+    mix-blend-mode: plus-darker;
+}
+
+.media-controls.ios.inline .scrubber.slider > input::-webkit-slider-thumb {
+    width: 15px;
+    height: 50px;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAiCAYAAABIiGl0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iUGl4ZWxtYXRvciAyLjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTkwQ0UwODdBQTcxMTFFNEE5QTZGQTVGMjFBNkUxN0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTkwQ0UwODhBQTcxMTFFNEE5QTZGQTVGMjFBNkUxN0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1OTBDRTA4NUFBNzExMUU0QTlBNkZBNUYyMUE2RTE3RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1OTBDRTA4NkFBNzExMUU0QTlBNkZBNUYyMUE2RTE3RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pofoz4wAAAJGSURBVHjaxJfNTsJAEMfbLmoNaKIhIE18A+LReOXmi/gQnnwSLz6Fnjh4Id4kHElI5EDwpIkgImWdf/Nfs5ISCrR1kkmg7c5vZz/mw3WSy66oL7ojqqiQkPotOhGdaq1XGnMTvC+KlprN5kW9Xr8sFotnhUKhCsUHs9lsCB2NRu1Op3PfaDRa8vhDdCSqnQ0E3lX7/f6NGH7RCQXfYgzG0sZacthut6/G4/Gj3lAwFjZgKyn0qNfrXYdh+Ka3FNiALdhc6Sk+1CkL4Us997E0aXga5zmX3Y87vdVt9jTJnvPA/blJJZxEnbHwtJds8Mk6V2ZTAQMsAD1EJAQHpdSpk7GAARaYAPuISE5OQpYfeYwwmBeYrMhjZeJuHkKWAtj7B7DnJchQaQsylgvwHGktL6qwXsH0TE7NETw091gjiecFFtYzmNFSo3LICyysBzBxsI5xoWUJWllHL8lSfTnViFyTyGO4PhgMbrP2lgxNpnPAdBXkkBYDsg48lqbRDLrd7t18Pn9P21PYhG3zl8yoXsY+1zCjDEufgIxjMqPCHMm5wpdBBsVeQK2QpUzZs8dKsGY+SrG8DSxvj8j6DdOKHUPZhkO3KOiDBWiZDGW3MC4f7FPVYvKQyuE8YQvzFJMUcJg+qfit3YVKc4clqB8H3zAThWzmJmzstGN1fI511LVJXYzl7hZQ00F+2dA4sH3P7Am4a0zAeDklEODZYueoVgz+DS4rWk5tTdj2cmqt4tr9sccJFqyG3N4CGxrSu3AZ0MiPAAMAZrLkuVVmRJsAAAAASUVORK5CYII=");
+    background-repeat: no-repeat;
+    background-size: 15px 17px;
+    background-position: 0px 18px;
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+    -webkit-appearance: none !important;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js b/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js
new file mode 100644
index 000000000..963e22b01
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js
@@ -0,0 +1,109 @@
+/*
+ * 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 IOSInlineMediaControls extends MediaControls
+{
+
+    constructor(options = {})
+    {
+        options.layoutTraits = LayoutTraits.iOS;
+
+        super(options);
+
+        this.element.classList.add("ios");
+        this.element.classList.add("inline");
+
+        this._leftContainer = new ButtonsContainer({
+            buttons: [this.playPauseButton, this.skipBackButton],
+            cssClassName: "left"
+        });
+
+        this._rightContainer = new ButtonsContainer({
+            buttons: [this.airplayButton, this.pipButton, this.fullscreenButton],
+            cssClassName: "right"
+        });
+
+        this.controlsBar.children = [this._leftContainer, this._rightContainer];
+
+        this._pinchGestureRecognizer = new PinchGestureRecognizer(this.element, this);
+    }
+
+    // Protected
+
+    gestureRecognizerStateDidChange(recognizer)
+    {
+        if (this._pinchGestureRecognizer !== recognizer)
+            return;
+
+        if (recognizer.state !== GestureRecognizer.States.Ended && recognizer.state !== GestureRecognizer.States.Changed)
+            return;
+
+        if (recognizer.scale > IOSInlineMediaControls.MinimumScaleToEnterFullscreen && this.delegate && typeof this.delegate.iOSInlineMediaControlsRecognizedPinchInGesture === "function")
+            this.delegate.iOSInlineMediaControlsRecognizedPinchInGesture();
+    }
+
+    // Public
+
+    layout()
+    {
+        super.layout();
+
+        // Reset dropped buttons.
+        for (let button of this._rightContainer.buttons)
+            delete button.dropped;
+
+        this._leftContainer.layout();
+        this._rightContainer.layout();
+
+        this.timeControl.width = this.width - this._leftContainer.width - this._rightContainer.width;
+
+        if (this.timeControl.isSufficientlyWide) {
+            this.controlsBar.insertBefore(this.timeControl, this._rightContainer);
+            this.timeControl.x = this._leftContainer.width;
+        } else {
+            this.timeControl.remove();
+            // Since we don't have enough space to display the scrubber, we may also not have
+            // enough space to display all buttons in the left and right containers, so gradually drop them.
+            for (let control of [this.airplayButton, this.pipButton, this.skipBackButton, this.fullscreenButton]) {
+                // Nothing left to do if the combined container widths is shorter than the available width.
+                if (this._leftContainer.width + this._rightContainer.width < this.width)
+                    break;
+
+                // If the control was already not participating in layout, we can skip it.
+                if (!control.visible)
+                    continue;
+
+                // This control must now be dropped.
+                control.dropped = true;
+
+                this._leftContainer.layout();
+                this._rightContainer.layout();
+            }
+        }
+    }
+
+}
+
+IOSInlineMediaControls.MinimumScaleToEnterFullscreen = 1.5;
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js b/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js
new file mode 100644
index 000000000..a8d188a32
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js
@@ -0,0 +1,53 @@
+/*
+ * 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 LayoutTraits = {
+    Unknown        : 0,
+    macOS          : 1 << 0,
+    iOS            : 1 << 1,
+    Fullscreen     : 1 << 2,
+    Compact        : 1 << 3,
+    ReducedPadding : 1 << 4,
+    TightPadding   : 1 << 5
+};
+
+class LayoutItem extends LayoutNode
+{
+
+    constructor({ element = null, layoutDelegate = null } = {})
+    {
+        super(element);
+
+        this.layoutDelegate = layoutDelegate;
+    }
+
+    // Public
+
+    get layoutTraits()
+    {
+        return (this.layoutDelegate && this.layoutDelegate.layoutTraits) || LayoutTraits.Unknown;
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js b/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js
new file mode 100644
index 000000000..2a87f27d6
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js
@@ -0,0 +1,307 @@
+
+const dirtyNodes = new Set;
+const nodesRequiringChildrenUpdate = new Set;
+
+class LayoutNode
+{
+
+    constructor(stringOrElement)
+    {
+
+        if (!stringOrElement)
+            this.element = document.createElement("div");
+        else if (stringOrElement instanceof Element)
+            this.element = stringOrElement;
+        else if (typeof stringOrElement === "string" || stringOrElement instanceof String)
+            this.element = elementFromString(stringOrElement);
+
+        this._parent = null;
+        this._children = [];
+
+        this._x = 0;
+        this._y = 0;
+        this._width = 0;
+        this._height = 0;
+        this._visible = true;
+
+        this._needsLayout = false;
+        this._dirtyProperties = new Set;
+
+        this._pendingDOMManipulation = LayoutNode.DOMManipulation.None;
+    }
+
+    get x()
+    {
+        return this._x;
+    }
+
+    set x(x)
+    {
+        if (x === this._x)
+            return;
+
+        this._x = x;
+        this.markDirtyProperty("x");
+    }
+
+    get y()
+    {
+        return this._y;
+    }
+
+    set y(y)
+    {
+        if (y === this._y)
+            return;
+
+        this._y = y;
+        this.markDirtyProperty("y");
+    }
+
+    get width()
+    {
+        return this._width;
+    }
+
+    set width(width)
+    {
+        if (width === this._width)
+            return;
+
+        this._width = width;
+        this.markDirtyProperty("width");
+    }
+
+    get height()
+    {
+        return this._height;
+    }
+
+    set height(height)
+    {
+        if (height === this._height)
+            return;
+
+        this._height = height;
+        this.markDirtyProperty("height");
+    }
+
+    get visible()
+    {
+        return this._visible;
+    }
+
+    set visible(flag)
+    {
+        if (flag === this._visible)
+            return;
+
+        this._visible = flag;
+        this.markDirtyProperty("visible");
+    }
+
+    get needsLayout()
+    {
+        return this._needsLayout || this._pendingDOMManipulation !== LayoutNode.DOMManipulation.None || this._dirtyProperties.size > 0;
+    }
+
+    set needsLayout(flag)
+    {
+        if (this.needsLayout === flag)
+            return;
+
+        this._needsLayout = flag;
+        this._updateDirtyState();
+    }
+
+    get parent()
+    {
+        return this._parent;
+    }
+
+    get children()
+    {
+        return this._children;
+    }
+
+    set children(children)
+    {
+        while (this._children.length)
+            this.removeChild(this._children[0]);
+
+        for (let child of children)
+            this.addChild(child);
+    }
+
+    parentOfType(type)
+    {
+        let node = this;
+        while (node = node._parent) {
+            if (node instanceof type)
+                return node;
+        }
+        return null;
+    }
+
+    addChild(child, index)
+    {
+        child.remove();
+
+        if (index === undefined || index < 0 || index > this._children.length)
+            index = this._children.length;
+
+        this._children.splice(index, 0, child);
+        child._parent = this;
+
+        child._markNodeManipulation(LayoutNode.DOMManipulation.Addition);
+
+        return child;
+    }
+
+    insertBefore(newSibling, referenceSibling)
+    {
+        return this.addChild(newSibling, this._children.indexOf(referenceSibling));
+    }
+
+    insertAfter(newSibling, referenceSibling)
+    {
+        const index = this._children.indexOf(referenceSibling);
+        return this.addChild(newSibling, index + 1);
+    }
+
+    removeChild(child)
+    {
+        if (child._parent !== this)
+            return;
+
+        const index = this._children.indexOf(child);
+        if (index === -1)
+            return;
+
+        this._children.splice(index, 1);
+        child._parent = null;
+
+        child._markNodeManipulation(LayoutNode.DOMManipulation.Removal);
+
+        return child;
+    }
+
+    remove()
+    {
+        if (this._parent instanceof LayoutNode)
+            return this._parent.removeChild(this);
+    }
+
+    markDirtyProperty(propertyName)
+    {
+        const hadProperty = this._dirtyProperties.has(propertyName);
+        this._dirtyProperties.add(propertyName);
+
+        if (!hadProperty)
+            this._updateDirtyState();
+    }
+
+    commitProperty(propertyName)
+    {
+        const style = this.element.style;
+
+        switch (propertyName) {
+        case "x":
+            style.left = `${this._x}px`;
+            break;
+        case "y":
+            style.top = `${this._y}px`;
+            break;
+        case "width":
+            style.width = `${this._width}px`;
+            break;
+        case "height":
+            style.height = `${this._height}px`;
+            break;
+        case "visible":
+            style.display = this._visible ? "inherit" : "none";
+            break;
+        }
+    }
+
+    layout()
+    {
+        if (this._pendingDOMManipulation === LayoutNode.DOMManipulation.Removal) {
+            const parent = this.element.parentNode;
+            if (parent)
+                parent.removeChild(this.element);
+        }
+    
+        for (let propertyName of this._dirtyProperties)
+            this.commitProperty(propertyName);
+
+        this._dirtyProperties.clear();
+
+        if (this._pendingDOMManipulation === LayoutNode.DOMManipulation.Addition)
+            nodesRequiringChildrenUpdate.add(this.parent);
+    }
+
+    // Private
+
+    _markNodeManipulation(manipulation)
+    {
+        this._pendingDOMManipulation = manipulation;
+        this._updateDirtyState();
+    }
+
+    _updateDirtyState()
+    {
+        if (this.needsLayout) {
+            dirtyNodes.add(this);
+            scheduler.scheduleLayout(performScheduledLayout);
+        } else {
+            dirtyNodes.delete(this);
+            if (dirtyNodes.size === 0)
+                scheduler.unscheduleLayout(performScheduledLayout);
+        }
+    }
+
+    _updateChildren()
+    {
+        let nextChildElement = null;
+        const element = this.element;
+        for (let i = this.children.length - 1; i >= 0; --i) {
+            let child = this.children[i];
+            let childElement = child.element;
+
+            if (child._pendingDOMManipulation === LayoutNode.DOMManipulation.Addition) {
+                element.insertBefore(childElement, nextChildElement);
+                child._pendingDOMManipulation = LayoutNode.DOMManipulation.None;
+            }
+
+            nextChildElement = childElement;
+        }
+    }
+
+}
+
+LayoutNode.DOMManipulation = {
+    None:     0,
+    Removal:  1,
+    Addition: 2
+};
+
+function performScheduledLayout()
+{
+    const previousDirtyNodes = Array.from(dirtyNodes);
+    dirtyNodes.clear();
+    previousDirtyNodes.forEach(node => {
+        node._needsLayout = false;
+        node.layout();
+    });
+
+    nodesRequiringChildrenUpdate.forEach(node => node._updateChildren());
+    nodesRequiringChildrenUpdate.clear();
+}
+
+function elementFromString(elementString)
+{
+    const element = document.createElement("div");
+    element.innerHTML = elementString;
+    return element.firstElementChild;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css b/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css
new file mode 100644
index 000000000..456d78957
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css
@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+
+/* Controls bar */
+
+.media-controls.mac.inline.compact > .controls-bar {
+    height: 25px;
+}
+
+/* Controls placement */
+
+.media-controls.mac.inline.compact button.play-pause {
+    -webkit-mask-position-y: 6px;
+}
+
+.media-controls.mac.inline.compact button.skip-back {
+    -webkit-mask-position-y: 6px;
+}
+
+.media-controls.mac.inline.compact .scrubber.slider {
+    top: 12px;
+}
+
+.media-controls.mac.inline.compact button.mute {
+    -webkit-mask-position-y: 6px;
+}
+
+.media-controls.mac.inline.compact button.fullscreen {
+    -webkit-mask-position-y: 6.5px;
+}
+
+/* Labels */
+
+.media-controls.mac.inline.compact .time-label,
+.media-controls.mac.inline.compact .status-label {
+    top: 5px;
+    font-size: 12px;
+}
+
+/* Volume slider */
+
+.media-controls.mac.inline.compact .volume-slider-container {
+    height: 21px;
+    transform: rotate(-90deg) translate(5px, -33px);
+}
+
+.media-controls.mac.inline.compact .volume.slider {
+    top: 5px;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css b/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css
new file mode 100644
index 000000000..2d7c9766b
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css
@@ -0,0 +1,119 @@
+/*
+ * 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.
+ */
+
+/* Controls bar */
+
+.media-controls.mac.fullscreen {
+    --controls-bar-width: 468px;
+    --tracks-panel-right-margin: 40px;
+
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.media-controls.mac.fullscreen > .controls-bar {
+    left: calc((100% - var(--controls-bar-width)) / 2);
+    bottom: 25px;
+    width: var(--controls-bar-width);
+    height: 75px;
+    overflow: hidden;
+}
+
+.media-controls.mac.fullscreen > .controls-bar > .background-tint > div {
+    border-radius: 8px;
+}
+
+/* Volume slider */
+
+.media-controls.mac.fullscreen .volume.slider {
+    left: 31px;
+    top: 19px;
+}
+
+.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider {
+    transform: scaleX(-1);
+}
+
+.media-controls.mac.fullscreen button.volume-down {
+    -webkit-mask-position-y: 18px;
+}
+
+.media-controls.mac.fullscreen button.volume-up {
+    -webkit-mask-position-y: 17px;
+}
+
+/* Button containers */
+
+.media-controls.mac.fullscreen .buttons-container {
+    height: 44px;
+}
+
+.media-controls.mac.fullscreen .buttons-container.center {
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+}
+
+/* Buttons placement for center container */
+
+.media-controls.mac.fullscreen button.rewind {
+    -webkit-mask-position-y: 17px;
+}
+
+.media-controls.mac.fullscreen button.play-pause {
+    -webkit-mask-position-y: 12px;
+}
+
+.media-controls.mac.fullscreen button.forward {
+    -webkit-mask-position-y: 17px;
+}
+
+/* Make right container flush to the right */
+
+.media-controls.mac.fullscreen .buttons-container.right {
+    right: 0;
+}
+
+/* Buttons placement for right container */
+
+.media-controls.mac.fullscreen .buttons-container.right button {
+    -webkit-mask-position-y: 18px;
+}
+
+/* Scrubber */
+
+.media-controls.mac.fullscreen .time-control {
+    position: absolute;
+    left: 10px;
+    top: 48px;
+}
+
+.media-controls.mac.fullscreen .time-label {
+    font-size: 12px;
+}
+
+.media-controls.mac.fullscreen .scrubber {
+    top: -3px;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js b/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js
new file mode 100644
index 000000000..2bebd171c
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js
@@ -0,0 +1,173 @@
+/*
+ * 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 ButtonMarginForThreeButtonsOrLess = 24;
+const ButtonMarginForFourButtons = 16;
+const ButtonMarginForFiveButtons = 12;
+const FullscreenTimeControlWidth = 457;
+
+class MacOSFullscreenMediaControls extends MacOSMediaControls
+{
+
+    constructor(options = {})
+    {
+        options.layoutTraits = LayoutTraits.macOS | LayoutTraits.Fullscreen;
+
+        super(options);
+
+        this.element.classList.add("fullscreen");
+
+        // Set up fullscreen-specific buttons.
+        this.volumeDownButton = new VolumeDownButton(this);
+        this.volumeUpButton = new VolumeUpButton(this);
+        this.rewindButton = new RewindButton(this);
+        this.forwardButton = new ForwardButton(this);
+        this.fullscreenButton.isFullscreen = true;
+
+        this.volumeSlider.width = 60;
+
+        this._leftContainer = new ButtonsContainer({
+            buttons: [this.volumeDownButton, this.volumeSlider, this.volumeUpButton],
+            cssClassName: "left",
+            leftMargin: 12,
+            rightMargin: 0,
+            buttonMargin: 6
+        });
+
+        this._centerContainer = new ButtonsContainer({
+            buttons: [this.rewindButton, this.playPauseButton, this.forwardButton],
+            cssClassName: "center",
+            leftMargin: 27,
+            rightMargin: 27,
+            buttonMargin: 27
+        });
+
+        this._rightContainer = new ButtonsContainer({
+            buttons: [this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
+            cssClassName: "right",
+            leftMargin: 12,
+            rightMargin: 12
+        });
+
+        this.controlsBar.children = [new BackgroundTint, this._leftContainer, this._centerContainer, this._rightContainer, this.timeControl];
+
+        this.element.addEventListener("mousedown", this);
+    }
+
+    // Public
+
+    showTracksPanel()
+    {
+        super.showTracksPanel();
+
+        const tracksButtonBounds = this.tracksButton.element.getBoundingClientRect();
+        this.tracksPanel.rightX = window.innerWidth - tracksButtonBounds.right;
+        this.tracksPanel.bottomY = window.innerHeight - tracksButtonBounds.top + 1;
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousedown":
+            this._handleMousedown(event);
+            break;
+        case "mousemove":
+            this._handleMousemove(event);
+            break;
+        case "mouseup":
+            this._handleMouseup(event);
+            break;
+        }
+    }
+
+    layout()
+    {
+        super.layout();
+
+        const numberOfEnabledButtons = this._rightContainer.buttons.filter(button => button.enabled).length;
+
+        let buttonMargin = ButtonMarginForFiveButtons;
+        if (numberOfEnabledButtons === 4)
+            buttonMargin = ButtonMarginForFourButtons;
+        else if (numberOfEnabledButtons <= 3)
+            buttonMargin = ButtonMarginForThreeButtonsOrLess;
+
+        this._rightContainer.buttonMargin = buttonMargin;
+
+        this._centerContainer.layout();
+        this._rightContainer.layout();
+
+        this.timeControl.width = FullscreenTimeControlWidth;
+    }
+
+    // Private
+
+    _handleMousedown(event)
+    {
+        super.handleEvent(event);
+
+        if (event.target !== this.controlsBar.element)
+            return;
+
+        event.preventDefault();
+
+        this._lastDragPoint = this._pointForEvent(event);
+
+        this.element.addEventListener("mousemove", this, true);
+        this.element.addEventListener("mouseup", this, true);
+    }
+
+    _handleMousemove(event)
+    {
+        event.preventDefault();
+
+        const currentDragPoint = this._pointForEvent(event);
+
+        this.controlsBar.translation = new DOMPoint(
+            this.controlsBar.translation.x + currentDragPoint.x - this._lastDragPoint.x,
+            this.controlsBar.translation.y + currentDragPoint.y - this._lastDragPoint.y
+        );
+
+        this._lastDragPoint = currentDragPoint;
+    }
+
+    _handleMouseup(event)
+    {
+        event.preventDefault();
+
+        delete this._lastDragPoint;
+
+        this.element.removeEventListener("mousemove", this, true);
+        this.element.removeEventListener("mouseup", this, true);
+    }
+
+    _pointForEvent(event)
+    {
+        return new DOMPoint(event.clientX, event.clientY);
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css b/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css
new file mode 100644
index 000000000..1c5892dc9
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css
@@ -0,0 +1,118 @@
+/*
+ * 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.
+ */
+
+/* Controls bar */
+
+.media-controls.mac.inline > .controls-bar {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+}
+
+.media-controls.mac.inline > .controls-bar > * {
+    position: absolute;
+}
+
+/* Start button blur */
+
+.media-controls.mac.inline > button.start > div {
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+/* Controls placement */
+
+.media-controls.mac.inline button.play-pause {
+    -webkit-mask-position-y: 12px;
+}
+
+.media-controls.mac.inline button.skip-back {
+    -webkit-mask-position-y: 10px;
+}
+
+.media-controls.mac.inline .scrubber.slider {
+    top: 13px;
+}
+
+.media-controls.mac.inline button.mute {
+    -webkit-mask-position-y: 10px;
+}
+
+.media-controls.mac.inline button.airplay {
+    -webkit-mask-position-y: 13px;
+}
+
+.media-controls.mac.inline button.pip {
+    -webkit-mask-position-y: 13px;
+}
+
+.media-controls.mac.inline button.tracks {
+    -webkit-mask-position-y: 15px;
+}
+
+.media-controls.mac.inline button.fullscreen {
+    -webkit-mask-position-y: 13px;
+}
+
+/* Labels */
+
+.media-controls.mac.inline .time-label,
+.media-controls.mac.inline .status-label {
+    top: 14.5px;
+}
+
+/* Volume slider */
+
+.media-controls.mac.inline .volume-slider-container {
+    position: absolute;
+
+    bottom: 50px;
+    width: 81px;
+    height: 31px;
+    transform: rotate(-90deg) translate(25px, -25px);
+}
+
+.media-controls.mac.inline .volume-slider-container > .background-tint {
+    top: 0;
+    left: 1px;
+    right: 0;
+    bottom: 0px;
+    width: auto;
+}
+
+.media-controls.mac.inline .volume-slider-container > .background-tint > div {
+    border-radius: 0 4px 4px 0;
+}
+
+.media-controls.mac.inline .volume.slider {
+    left: 11px;
+    top: 10px;
+}
+
+/* Tracks Panel */
+
+.media-controls.mac.inline .tracks-panel {
+    bottom: 51px;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js b/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
new file mode 100644
index 000000000..29e69705a
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
@@ -0,0 +1,202 @@
+/*
+ * 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 MacOSInlineMediaControls extends MacOSMediaControls
+{
+
+    constructor(options)
+    {
+        super(options);
+
+        this.element.classList.add("inline");
+
+        this.leftContainer = new ButtonsContainer({
+            buttons: [this.playPauseButton, this.skipBackButton],
+            cssClassName: "left"
+        });
+
+        this.rightContainer = new ButtonsContainer({
+            cssClassName: "right"
+        });
+
+        this._matchLayoutTraits();
+
+        this._backgroundTint = new BackgroundTint;
+
+        this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);
+        this._volumeSliderContainer.children = [new BackgroundTint, this.volumeSlider];
+        this._volumeSliderContainer.visible = false;
+        this.volumeSlider.width = 60;
+
+        // Wire up events to display the volume slider.
+        this.muteButton.element.addEventListener("mouseenter", this);
+        this.muteButton.element.addEventListener("mouseleave", this);
+        this._volumeSliderContainer.element.addEventListener("mouseleave", this);
+
+        this.controlsBar.children = [this._backgroundTint, this.leftContainer, this.rightContainer, this._volumeSliderContainer];
+    }
+
+    // Public
+
+    get layoutTraits()
+    {
+        return this._layoutTraits;
+    }
+
+    set layoutTraits(layoutTraits)
+    {
+        if (this._layoutTraits === layoutTraits)
+            return;
+
+        this._layoutTraits = layoutTraits;
+        this._matchLayoutTraits();
+    }
+
+    layout()
+    {
+        super.layout();
+
+        if (!this.controlsBar.visible)
+            return;
+
+        // Reset dropped buttons.
+        this.rightContainer.buttons.concat(this.leftContainer.buttons).forEach(button => delete button.dropped);
+
+        this.leftContainer.layout();
+        this.rightContainer.layout();
+
+        const middleContainer = this.statusLabel.enabled ? this.statusLabel : this.timeControl;
+        this.controlsBar.children = [this._backgroundTint, this.leftContainer, middleContainer, this.rightContainer, this._volumeSliderContainer];
+
+        if (middleContainer === this.timeControl)
+            this.timeControl.width = this.width - this.leftContainer.width - this.rightContainer.width;
+
+        if (middleContainer === this.timeControl && this.timeControl.isSufficientlyWide)
+            this.timeControl.x = this.leftContainer.width;
+        else {
+            this.timeControl.remove();
+
+            let droppedControls = false;
+
+            // Since we don't have enough space to display the scrubber, we may also not have
+            // enough space to display all buttons in the left and right containers, so gradually drop them.
+            for (let button of [this.airplayButton, this.pipButton, this.tracksButton, this.muteButton, this.skipBackButton, this.fullscreenButton]) {
+                // Nothing left to do if the combined container widths is shorter than the available width.
+                if (this.leftContainer.width + this.rightContainer.width < this.width)
+                    break;
+
+                droppedControls = true;
+
+                // If the button was already not participating in layout, we can skip it.
+                if (!button.visible)
+                    continue;
+
+                // This button must now be dropped.
+                button.dropped = true;
+
+                this.leftContainer.layout();
+                this.rightContainer.layout();
+            }
+
+            // We didn't need to drop controls and we have status text to show.
+            if (!droppedControls && middleContainer === this.statusLabel) {
+                this.statusLabel.x = this.leftContainer.width;
+                this.statusLabel.width = this.width - this.leftContainer.width - this.rightContainer.width;
+            }
+        }
+
+        this.rightContainer.x = this.width - this.rightContainer.width;
+        this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
+    }
+
+    showTracksPanel()
+    {
+        super.showTracksPanel();
+        this.tracksPanel.rightX = this.rightContainer.width - this.tracksButton.x - this.tracksButton.width;
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        super.handleEvent(event);
+        this._volumeSliderContainer.visible = event.type === "mouseenter" || event.relatedTarget === this._volumeSliderContainer.element;
+    }
+
+    controlsBarVisibilityDidChange(controlsBar)
+    {
+        if (controlsBar.visible)
+            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);
+    }
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css b/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css
new file mode 100644
index 000000000..bb16d9f9d
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2017 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.
+ */
+
+/* Buttons in controls bar */
+
+.media-controls.mac button:active {
+    background-color: white;
+}
+
+.media-controls.mac > .controls-bar button {
+    height: 100% !important;
+    background-color: rgba(255, 255, 255, 0.45);
+    mix-blend-mode: plus-lighter;
+}
+
+.media-controls.mac > .controls-bar .time-label {
+    color: rgba(255, 255, 255, 0.45);
+    mix-blend-mode: plus-lighter;
+}
+
+.media-controls.mac > .controls-bar .slider > canvas {
+    mix-blend-mode: plus-lighter;
+}
+
+.media-controls.mac > .controls-bar .slider > input::-webkit-slider-thumb {
+    width: 3px !important;
+    height: 100% !important;
+    -webkit-appearance: none !important;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js b/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js
new file mode 100644
index 000000000..85cb875a6
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js
@@ -0,0 +1,81 @@
+/*
+ * 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 MacOSMediaControls extends MediaControls
+{
+
+    constructor({ width, height, layoutTraits = LayoutTraits.macOS } = {})
+    {
+        super({ width, height, layoutTraits });
+
+        this.element.classList.add("mac");
+
+        this.muteButton = new MuteButton(this);
+        this.tracksButton = new TracksButton(this);
+        this.tracksPanel = new TracksPanel;
+        this.volumeSlider = new VolumeSlider;
+
+        this.element.addEventListener("mousedown", this);
+        this.element.addEventListener("click", this);
+    }
+
+    // Public
+
+    showTracksPanel()
+    {
+        this.tracksButton.on = true;
+        this.tracksButton.element.blur();
+        this.controlsBar.userInteractionEnabled = false;
+        this.tracksPanel.presentInParent(this);
+    }
+
+    hideTracksPanel()
+    {
+        this.tracksButton.on = false;
+        this.tracksButton.element.focus();
+        this.controlsBar.userInteractionEnabled = true;
+        this.tracksPanel.hide();
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        if (event.currentTarget !== this.element)
+            return;
+
+        // Only notify that the background was clicked when the "mousedown" event
+        // was also received, which wouldn't happen if the "mousedown" event caused
+        // the tracks panel to be hidden.
+        if (event.type === "mousedown")
+            this._receivedMousedown = true;
+        else if (event.type === "click") {
+            if (this._receivedMousedown && event.target === this.element && this.delegate && typeof this.delegate.macOSControlsBackgroundWasClicked === "function")
+                this.delegate.macOSControlsBackgroundWasClicked();
+            delete this._receivedMousedown
+        }
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css b/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css
new file mode 100644
index 000000000..d5d02595c
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css
@@ -0,0 +1,77 @@
+/*
+ * 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.
+ */
+
+:host(audio) {
+    width: 200px;
+    height: 50px;
+}
+
+/* We need to use relative positioning due to webkit.org/b/163603 */
+.media-controls-container {
+    position: relative;
+}
+
+.media-controls-container,
+.media-controls-container > * {
+    left: 0;
+    top: 0;
+    width: 100%;
+}
+
+.media-controls-container,
+.media-controls-container * {
+    -webkit-text-zoom: reset;
+    -webkit-text-size-adjust: auto;
+}
+
+.media-controls-container > * {
+    position: absolute;
+}
+
+.media-controls {
+    height: 100%;
+    font-family: -apple-system;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    cursor: default;
+}
+
+:host(:-webkit-animating-full-screen-transition) .media-controls {
+    display: none;
+}
+
+.media-controls > .controls-bar {
+    position: absolute;
+}
+
+.media-controls.fade-in {
+    animation-name: fade-in;
+    animation-duration: 350ms;
+}
+
+@keyframes fade-in {
+    from { opacity: 0 }
+    to   { opacity: 1 }
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js b/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js
new file mode 100644
index 000000000..30687c5ea
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js
@@ -0,0 +1,148 @@
+/*
+ * 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 MediaControls extends LayoutNode
+{
+
+    constructor({ width = 300, height = 150, layoutTraits = LayoutTraits.Unknown } = {})
+    {
+        super(`<div class="media-controls"></div>`);
+
+        this._scaleFactor = 1;
+
+        this.width = width;
+        this.height = height;
+        this.layoutTraits = layoutTraits;
+
+        this.startButton = new StartButton(this);
+
+        this.playPauseButton = new PlayPauseButton(this);
+        this.skipBackButton = new SkipBackButton(this);
+        this.airplayButton = new AirplayButton(this);
+        this.pipButton = new PiPButton(this);
+        this.fullscreenButton = new FullscreenButton(this);
+
+        this.statusLabel = new StatusLabel(this);
+        this.timeControl = new TimeControl(this);
+
+        this.controlsBar = new ControlsBar(this);
+
+        this.airplayPlacard = new AirplayPlacard(this);
+        this.invalidPlacard = new InvalidPlacard(this);
+        this.pipPlacard = new PiPPlacard(this);
+
+        this.showsStartButton = false;
+    }
+
+    // Public
+
+    get showsStartButton()
+    {
+        return !!this._showsStartButton;
+    }
+
+    set showsStartButton(flag)
+    {
+        if (this._showsStartButton === flag)
+            return;
+
+        this._showsStartButton = flag;
+        this._invalidateChildren();
+    }
+
+    get usesLTRUserInterfaceLayoutDirection()
+    {
+        return this.element.classList.contains("uses-ltr-user-interface-layout-direction");
+    }
+
+    set usesLTRUserInterfaceLayoutDirection(flag)
+    {
+        this.element.classList.toggle("uses-ltr-user-interface-layout-direction", flag);
+    }
+
+    get scaleFactor()
+    {
+        return this._scaleFactor;
+    }
+
+    set scaleFactor(scaleFactor)
+    {
+        if (this._scaleFactor === scaleFactor)
+            return;
+
+        this._scaleFactor = scaleFactor;
+        this.markDirtyProperty("scaleFactor");
+    }
+
+    get showsPlacard()
+    {
+        return this.children[0] instanceof Placard;
+    }
+
+    showPlacard(placard)
+    {
+        const children = [placard];
+        if (placard === this.airplayPlacard)
+            children.push(this.controlsBar);
+
+        this.children = children;
+    }
+
+    hidePlacard()
+    {
+        if (this.showsPlacard)
+            this.children[0].remove();
+        this._invalidateChildren();
+    }
+
+    fadeIn()
+    {
+        this.element.classList.add("fade-in");
+    }
+
+    // Protected
+
+    commitProperty(propertyName)
+    {
+        if (propertyName === "scaleFactor")
+            this.element.style.zoom = 1 / this._scaleFactor;
+        else
+            super.commitProperty(propertyName);
+    }
+
+    controlsBarVisibilityDidChange(controlsBar)
+    {
+        // Implemented by subclasses as needed.
+    }
+
+    // Private
+
+    _invalidateChildren()
+    {
+        if (!this.showsPlacard)
+            this.children = [this._showsStartButton ? this.startButton : this.controlsBar];
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/mute-button.js b/Source/WebCore/Modules/modern-media-controls/controls/mute-button.js
new file mode 100644
index 000000000..a879a4ff1
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/mute-button.js
@@ -0,0 +1,53 @@
+/*
+ * 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 MuteButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "mute",
+            iconName: Icons.Volume,
+            layoutDelegate
+        });
+    }
+
+    // Public
+
+    get muted()
+    {
+        return this.iconName === Icons.VolumeMuted;
+    }
+
+    set muted(flag)
+    {
+        if (this.muted === flag)
+            return;
+
+        this.iconName = flag ? Icons.VolumeMuted : Icons.Volume;
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/pip-button.js b/Source/WebCore/Modules/modern-media-controls/controls/pip-button.js
new file mode 100644
index 000000000..fe0780921
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/pip-button.js
@@ -0,0 +1,38 @@
+/*
+ * 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 PiPButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "pip",
+            iconName: Icons.EnterPiP,
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js b/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js
new file mode 100644
index 000000000..1ee8bb82a
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js
@@ -0,0 +1,38 @@
+/*
+ * 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 PiPPlacard extends Placard
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            iconName: Icons.PiPPlacard,
+            description: UIString("This video is playing in Picture in Picture"),
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/placard.css b/Source/WebCore/Modules/modern-media-controls/controls/placard.css
new file mode 100644
index 000000000..a8415a69c
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/placard.css
@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+.placard {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+
+    background-color: black;
+    color: rgb(164, 164, 164);
+}
+
+.placard .container {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    max-width: 402px;
+
+    transform: translate(-50%, -50%);
+}
+
+.placard .icon {
+    position: relative;
+    left: 50%;
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgb(164, 164, 164) !important;
+
+    margin-bottom: 10px;
+
+    transform: translateX(-50%);
+
+    pointer-events: none;
+}
+
+.placard .title,
+.placard .description {
+    text-align: center;
+}
+
+.placard .title {
+    font-size: 20px;
+}
+
+.placard .description {
+    font-size: 13px;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/placard.js b/Source/WebCore/Modules/modern-media-controls/controls/placard.js
new file mode 100644
index 000000000..73ad5e10f
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/placard.js
@@ -0,0 +1,48 @@
+/*
+ * 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 Placard extends LayoutItem
+{
+
+    constructor({ iconName = null, title = "", description = "", layoutDelegate = null } = {})
+    {
+        super({
+            element: `<div class="placard"></div>`,
+            layoutDelegate
+        });
+
+        const container = this.addChild(new LayoutNode(`<div class="container"></div>`));
+        
+        if (iconName)
+            container.addChild(new IconButton(this)).iconName = iconName;
+
+        if (!!title)
+            container.addChild(new LayoutNode(`<div class="title">${title}</div>`));
+
+        if (!!description)
+            container.addChild(new LayoutNode(`<div class="description">${description}</div>`));
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js b/Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js
new file mode 100644
index 000000000..4b9314939
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js
@@ -0,0 +1,53 @@
+/*
+ * 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 PlayPauseButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "play-pause",
+            iconName: Icons.Play,
+            layoutDelegate
+        });
+    }
+
+    // Public
+
+    get playing()
+    {
+        return this.iconName === Icons.Pause;
+    }
+
+    set playing(flag)
+    {
+        if (this.playing === flag)
+            return;
+
+        this.iconName = flag ? Icons.Pause : Icons.Play;
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/rewind-button.js b/Source/WebCore/Modules/modern-media-controls/controls/rewind-button.js
new file mode 100644
index 000000000..9f2bab5f3
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/rewind-button.js
@@ -0,0 +1,38 @@
+/*
+ * 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 RewindButton extends SeekButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "rewind",
+            iconName: Icons.Rewind,
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/scheduler.js b/Source/WebCore/Modules/modern-media-controls/controls/scheduler.js
new file mode 100644
index 000000000..f85beb037
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/scheduler.js
@@ -0,0 +1,66 @@
+
+const scheduler = new class
+{
+
+    constructor()
+    {
+        this._frameID = -1;
+        this._layoutCallbacks = new Set;
+    }
+
+    // Public
+
+    get hasScheduledLayoutCallbacks()
+    {
+        return this._frameID !== -1 || this._layoutCallbacks.size > 0;
+    }
+
+    scheduleLayout(callback)
+    {
+        if (typeof callback !== "function")
+            return;
+
+        this._layoutCallbacks.add(callback);
+        this._requestFrameIfNeeded();
+    }
+
+    unscheduleLayout(callback)
+    {
+        if (typeof callback !== "function")
+            return;
+
+        this._layoutCallbacks.delete(callback);
+    }
+
+    // Private
+
+    _requestFrameIfNeeded()
+    {
+        if (this._frameID === -1 && this._layoutCallbacks.size > 0)
+            this._frameID = window.requestAnimationFrame(this._frameDidFire.bind(this));
+    }
+
+    _frameDidFire()
+    {
+        if (typeof scheduler.frameWillFire === "function")
+            scheduler.frameWillFire();
+
+        this._layout();
+        this._frameID = -1;
+        this._requestFrameIfNeeded();
+
+        if (typeof scheduler.frameDidFire === "function")
+            scheduler.frameDidFire();
+    }
+
+    _layout()
+    {
+        // Layouts are not re-entrant.
+        const layoutCallbacks = this._layoutCallbacks;
+        this._layoutCallbacks = new Set;
+
+        for (let callback of layoutCallbacks)
+            callback();
+    }
+
+};
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js b/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js
new file mode 100644
index 000000000..499399636
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js
@@ -0,0 +1,156 @@
+/*
+ * 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 Scrubber extends Slider
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "scrubber",
+            layoutDelegate
+        });
+
+         this.height = 23;
+
+        // Add the element used to draw the track on iOS.
+        if (this.layoutTraits & LayoutTraits.iOS)
+            this.addChild(new LayoutNode(`<div></div>`), 0);
+
+        this._buffered = 0;
+    }
+
+    // Public
+
+    get buffered()
+    {
+        return this._buffered;
+    }
+
+    set buffered(buffered)
+    {
+        if (this._buffered === buffered)
+            return;
+
+        this._buffered = buffered;
+        this.needsLayout = true;
+    }
+
+    // Protected
+
+    draw(ctx)
+    {
+        const width = this.width;
+        const height = this.height;
+
+        if (!this.width || !this.height)
+            return;
+
+        const dpr = window.devicePixelRatio;
+
+        ctx.save();
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, width, height);
+
+        const layoutTraits = this.layoutTraits;
+        if (layoutTraits & LayoutTraits.macOS)
+            this._drawMacOS(ctx, width, height);
+        else if (layoutTraits & LayoutTraits.iOS)
+            this._drawiOS(ctx, width, height);
+
+        ctx.restore();
+    }
+
+    _drawMacOS(ctx, width, height)
+    {
+        const trackHeight = 3;
+        const trackY = (height - trackHeight) / 2;
+        const scrubberWidth = 4;
+        const scrubberHeight = height;
+        const borderSize = 2;
+        const scrubberPosition = Math.max(0, Math.min(width - scrubberWidth, Math.round(width * this.value)));
+
+        // Draw background.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, 0, trackY, width, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(20, 20, 20)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+
+        // Buffered.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, 0, trackY, width, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(39, 39, 39)";
+        ctx.fillRect(0, 0, width * this._buffered, height);
+        ctx.restore();
+
+        // Draw played section.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, 0, trackY, width, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(84, 84, 84)";
+        ctx.fillRect(0, 0, width * this.value, height);
+        ctx.restore();
+
+        // Draw the scrubber.
+        ctx.save();
+        ctx.clearRect(scrubberPosition - 1, 0, scrubberWidth + borderSize, height, 0);
+        ctx.beginPath();
+        addRoundedRect(ctx, scrubberPosition, 0, scrubberWidth, scrubberHeight, 1);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(138, 138, 138)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+    }
+
+    _drawiOS(ctx, width, height)
+    {
+        const trackHeight = 3;
+        const trackY = (height - trackHeight) / 2;
+        const scrubberWidth = 15;
+        const leftPadding = 2;
+        const rightPadding = 2;
+        const trackWidth = this.width - leftPadding - rightPadding - scrubberWidth;
+
+        // Draw played section.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, leftPadding, trackY, scrubberWidth / 2 + trackWidth * this.value, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.fillStyle = "white";
+        ctx.fill();
+        ctx.restore();
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/seek-button.js b/Source/WebCore/Modules/modern-media-controls/controls/seek-button.js
new file mode 100644
index 000000000..c72c1f165
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/seek-button.js
@@ -0,0 +1,73 @@
+/*
+ * 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 SeekButton extends IconButton
+{
+
+    constructor(options)
+    {
+        super(options);
+
+        this.element.addEventListener("mousedown", this);
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        if (event.type === "mousedown" && event.currentTarget === this.element)
+            this._didStartPressing();
+        else if (event.type === "mouseup")
+            this._didStopPressing();
+        else
+            super.handleEvent(event);
+    }
+
+    // Private
+
+    _didStartPressing()
+    {
+        const mediaControls = this.parentOfType(MediaControls);
+        if (!mediaControls)
+            return;
+
+        this._mouseupTarget = mediaControls.element;
+        this._mouseupTarget.addEventListener("mouseup", this, true);
+        this._notifyDelegateOfPressingState(true);
+    }
+
+    _didStopPressing()
+    {
+        this._mouseupTarget.removeEventListener("mouseup", this, true);
+        this._notifyDelegateOfPressingState(false);
+    }
+
+    _notifyDelegateOfPressingState(isPressed)
+    {
+        if (this._enabled && this.uiDelegate && typeof this.uiDelegate.buttonPressedStateDidChange === "function")
+            this.uiDelegate.buttonPressedStateDidChange(this, isPressed);
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js b/Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js
new file mode 100644
index 000000000..c5c2d0c2a
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js
@@ -0,0 +1,38 @@
+/*
+ * 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 SkipBackButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "skip-back",
+            iconName: Icons.SkipBack,
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/slider.css b/Source/WebCore/Modules/modern-media-controls/controls/slider.css
new file mode 100644
index 000000000..cb5ab15b7
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/slider.css
@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+.slider {
+    position: absolute;
+}
+
+.slider > canvas,
+.slider > input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.slider > canvas {
+    pointer-events: none;
+}
+
+.slider > input {
+    margin: 0;
+    background-color: transparent;
+    -webkit-appearance: none !important;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/slider.js b/Source/WebCore/Modules/modern-media-controls/controls/slider.js
new file mode 100644
index 000000000..c32d662b8
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/slider.js
@@ -0,0 +1,152 @@
+/*
+ * 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 Slider extends LayoutItem
+{
+
+    constructor({ layoutDelegate = null, cssClassName = "" } = {})
+    {
+        super({
+            element: `<div class="slider ${cssClassName}"></div>`,
+            layoutDelegate
+        });
+
+        this._canvas = new LayoutNode(`<canvas></canvas>`);
+
+        this._input = new LayoutNode(`<input type="range" min="0" max="1" step="0.001" />`);
+        this._input.element.addEventListener("change", this);
+        this._input.element.addEventListener("input", this);
+
+        this.value = 0;
+
+        this.children = [this._canvas, this._input];
+    }
+
+    // Public
+
+    get value()
+    {
+        if (this._value !== undefined)
+            return this._value;
+        return parseFloat(this._input.element.value);
+    }
+
+    set value(value)
+    {
+        if (this._valueIsChanging)
+            return;
+
+        this._value = value;
+        this.markDirtyProperty("value");
+        this.needsLayout = true;
+    }
+
+    get width()
+    {
+        return super.width;
+    }
+
+    set width(width)
+    {
+        super.width = width;
+        this.needsLayout = true;
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "input":
+            this._handleInputEvent();
+            break;
+        case "change":
+            this._handleChangeEvent();
+            break;
+        }
+    }
+
+    commitProperty(propertyName)
+    {
+        switch (propertyName) {
+        case "value":
+            this._input.element.value = this._value;
+            delete this._value;
+            break;
+        case "width":
+            this._canvas.element.width = this.width * window.devicePixelRatio;
+        case "height":
+            this._canvas.element.height = this.height * window.devicePixelRatio;
+        default :
+            super.commitProperty(propertyName);
+            break;
+        }
+    }
+
+    layout()
+    {
+        super.layout();
+        this.draw(this._canvas.element.getContext("2d"));
+    }
+
+    draw(ctx)
+    {
+        // Implemented by subclasses.
+    }
+
+    // Private
+
+    _handleInputEvent()
+    {
+        if (!this._valueIsChanging && this.uiDelegate && typeof this.uiDelegate.controlValueWillStartChanging === "function")
+            this.uiDelegate.controlValueWillStartChanging(this);
+        this._valueIsChanging = true;
+        if (this.uiDelegate && typeof this.uiDelegate.controlValueDidChange === "function")
+            this.uiDelegate.controlValueDidChange(this);
+
+        this.needsLayout = true;
+    }
+
+    _handleChangeEvent()
+    {
+        delete this._valueIsChanging;
+        if (this.uiDelegate && typeof this.uiDelegate.controlValueDidStopChanging === "function")
+            this.uiDelegate.controlValueDidStopChanging(this);
+
+        this.needsLayout = true;
+    }
+
+}
+
+function addRoundedRect(ctx, x, y, width, height, radius) {
+    ctx.moveTo(x + radius, y);
+    ctx.arcTo(x + width, y, x + width, y + radius, radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+    ctx.lineTo(x + radius, y + height);
+    ctx.arcTo(x, y + height, x, y + height - radius, radius);
+    ctx.lineTo(x, y + radius);
+    ctx.arcTo(x, y, x + radius, y, radius);
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/start-button.css b/Source/WebCore/Modules/modern-media-controls/controls/start-button.css
new file mode 100644
index 000000000..82e172dc4
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/start-button.css
@@ -0,0 +1,58 @@
+/*
+ * 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.start {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 70px;
+    height: 70px;
+
+    background-color: transparent !important;
+
+    transform: translate3d(-50%, -50%, 0);
+}
+
+button.start > * {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+button.start > div {
+    -webkit-appearance: media-controls-light-bar-background;
+    -webkit-clip-path: circle(50%);
+    will-change: transform;
+}
+
+button.start > img {
+    opacity: 0.6;
+}
+
+button.start:active > img {
+    opacity: 1;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/start-button.js b/Source/WebCore/Modules/modern-media-controls/controls/start-button.js
new file mode 100644
index 000000000..9860c7e79
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/start-button.js
@@ -0,0 +1,42 @@
+/*
+ * 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 StartButton extends Button
+{
+
+    constructor(layoutDelegate)
+    {
+        super(layoutDelegate);
+
+        this.element.classList.add("start");
+
+        const background = this.element.appendChild(document.createElement("div"));
+        background.className = "background";
+
+        const image = this.element.appendChild(new Image);
+        image.src = iconService.imageForIconNameAndLayoutTraits(Icons.Start, this.layoutTraits).src;
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/status-label.css b/Source/WebCore/Modules/modern-media-controls/controls/status-label.css
new file mode 100644
index 000000000..a05b80bc7
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/status-label.css
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+.status-label {
+    position: absolute;
+
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    font-size: 14px;
+
+    color: rgba(255, 255, 255, 0.572);
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/status-label.js b/Source/WebCore/Modules/modern-media-controls/controls/status-label.js
new file mode 100644
index 000000000..b39cc79dc
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/status-label.js
@@ -0,0 +1,85 @@
+/*
+ * 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 StatusLabel extends LayoutItem
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            element: `<div class="status-label"></div>`,
+            layoutDelegate
+        });
+
+        this._text = "";
+        this._enabled = false;
+    }
+
+    // Public
+
+    get text()
+    {
+        return this._text;
+    }
+
+    set text(text)
+    {
+        if (text === this._text)
+            return;
+
+        this._text = text;
+        this.markDirtyProperty("text");
+
+        if (this.layoutDelegate)
+            this.layoutDelegate.needsLayout = true;
+    }
+
+    get enabled()
+    {
+        return this._enabled;
+    }
+
+    set enabled(enabled)
+    {
+        if (enabled === this._enabled)
+            return;
+
+        this._enabled = enabled;
+
+        if (this.layoutDelegate)
+            this.layoutDelegate.needsLayout = true;
+    }
+
+    // Protected
+
+    commitProperty(propertyName)
+    {
+        if (propertyName === "text")
+            this.element.textContent = this._text;
+        else
+            super.commitProperty(propertyName);
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css b/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css
new file mode 100644
index 000000000..ab65e22c2
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css
@@ -0,0 +1,82 @@
+/*
+ * 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.
+ */
+
+video::-webkit-media-text-track-container {
+    bottom: 50px;
+    overflow: hidden;
+    padding-bottom: 5px;
+    z-index: 0;
+
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0;
+    text-decoration: none;
+    pointer-events: none;
+    -webkit-user-select: none;
+
+    -webkit-flex: 1 1 auto;
+
+    -webkit-line-box-contain: block inline-box replaced;
+}
+
+video::cue {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+video::-webkit-media-text-track-display {
+    position: absolute;
+    overflow: hidden;
+    white-space: pre-wrap;
+    -webkit-box-sizing: border-box;
+    font: 22px sans-serif;
+}
+
+video::-webkit-media-text-track-display-backdrop {
+    display: inline-block;
+}
+
+video::cue(:future) {
+    color: gray;
+}
+
+video::-webkit-media-text-track-container b {
+    font-weight: bold;
+}
+
+video::-webkit-media-text-track-container u {
+    text-decoration: underline;
+}
+
+video::-webkit-media-text-track-container i {
+    font-style: italic;
+}
+
+video::-webkit-media-text-track-container .hidden {
+    display: none;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/time-control.js b/Source/WebCore/Modules/modern-media-controls/controls/time-control.js
new file mode 100644
index 000000000..8a78ccd16
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/time-control.js
@@ -0,0 +1,93 @@
+/*
+ * 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 MinimumScrubberWidth = 168;
+const ElapsedTimeLabelLeftMargin = -2;
+const ElapsedTimeLabelWidth = 40;
+const RemainingTimeLabelWidth = 49;
+const AdditionalTimeLabelWidthOverAnHour = 22;
+const ScrubberMargin = 5;
+
+class TimeControl extends LayoutItem
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            element: `<div class="time-control"></div>`,
+            layoutDelegate
+        });
+
+        this.elapsedTimeLabel = new TimeLabel;
+        this.scrubber = new Scrubber(layoutDelegate);
+        this.remainingTimeLabel = new TimeLabel;
+
+        this.children = [this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
+
+        this._labelsMayDisplayTimesOverAnHour = false;
+    }
+
+    // Public
+
+    get labelsMayDisplayTimesOverAnHour()
+    {
+        return this._labelsMayDisplayTimesOverAnHour;
+    }
+
+    set labelsMayDisplayTimesOverAnHour(flag)
+    {
+        if (this._labelsMayDisplayTimesOverAnHour === flag)
+            return;
+
+        this._labelsMayDisplayTimesOverAnHour = flag;
+        this.layout();
+    }
+
+    get width()
+    {
+        return super.width;
+    }
+
+    set width(width)
+    {
+        super.width = width;
+
+        const extraWidth = this._labelsMayDisplayTimesOverAnHour ? AdditionalTimeLabelWidthOverAnHour : 0;
+        const elapsedTimeLabelWidth = ElapsedTimeLabelWidth + extraWidth;
+        const remainingTimeLabelWidth = RemainingTimeLabelWidth + extraWidth;
+
+        this.elapsedTimeLabel.x = ElapsedTimeLabelLeftMargin;
+        this.elapsedTimeLabel.width = elapsedTimeLabelWidth;
+        this.scrubber.x = this.elapsedTimeLabel.x + elapsedTimeLabelWidth + ScrubberMargin;
+        this.scrubber.width = this._width - elapsedTimeLabelWidth - ScrubberMargin - remainingTimeLabelWidth;
+        this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
+    }
+
+    get isSufficientlyWide()
+    {
+        return this.scrubber.width >= MinimumScrubberWidth;
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/time-label.css b/Source/WebCore/Modules/modern-media-controls/controls/time-label.css
new file mode 100644
index 000000000..76d2e91ee
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/time-label.css
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+.time-label {
+    position: absolute;
+
+    font-family: -apple-system-monospaced-numbers;
+    font-size: 14px;
+
+    text-align: right;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/time-label.js b/Source/WebCore/Modules/modern-media-controls/controls/time-label.js
new file mode 100644
index 000000000..cd0e753ab
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/time-label.js
@@ -0,0 +1,80 @@
+/*
+ * 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 TimeLabel extends LayoutNode
+{
+
+    constructor()
+    {
+        super(`<div class="time-label"></div>`);
+
+        this.value = 0;
+    }
+
+    // Public
+
+    get value()
+    {
+        return this._value;
+    }
+
+    set value(value)
+    {
+        if (value === this._value)
+            return;
+
+        this._value = value;
+        this.markDirtyProperty("value");
+    }
+
+    // Protected
+
+    commitProperty(propertyName)
+    {
+        if (propertyName === "value")
+            this.element.textContent = this._formattedTime();
+        else
+            super.commitProperty(propertyName);
+    }
+
+    // Private
+
+    _formattedTime()
+    {
+        const time = this._value || 0;
+        const absTime = Math.abs(time);
+        const intSeconds = Math.floor(absTime % 60).toFixed(0);
+        const intMinutes = Math.floor((absTime / 60) % 60).toFixed(0);
+        const intHours = Math.floor(absTime / (60 * 60)).toFixed(0);
+
+        const timeStrings = [intMinutes, intSeconds];
+        if (intHours > 0)
+            timeStrings.unshift(intHours);
+
+        const sign = time < 0 ? "-" : "";
+        return sign + timeStrings.map(x => `00${x}`.slice(-2)).join(":");
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js b/Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js
new file mode 100644
index 000000000..5505f2c0b
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js
@@ -0,0 +1,38 @@
+/*
+ * 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 TracksButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "tracks",
+            iconName: Icons.Tracks,
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css b/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css
new file mode 100644
index 000000000..b0717483f
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css
@@ -0,0 +1,105 @@
+/*
+ * 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.
+ */
+
+.tracks-panel {
+    position: absolute;
+    display: inline-block;
+}
+
+.tracks-panel > .background-tint > div {
+    border-radius: 7px;
+}
+
+.tracks-panel * {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.tracks-panel.fade-out {
+    transition-property: opacity;
+    transition-duration: 265ms;
+    opacity: 0;
+}
+
+.tracks-panel > section {
+    border-top: 2px solid rgb(104, 104, 104);
+    will-change: transform;
+}
+
+.tracks-panel > section:first-of-type {
+    border-top: 0;
+}
+
+.tracks-panel > section > h3 {
+    color: rgb(150, 150, 150);
+    padding: 5px 20px 1px 21px;
+    margin: 0;
+}
+
+.tracks-panel > section > ul {
+    list-style-type: none;
+    margin-top: 0;
+    padding: 0;
+}
+
+.tracks-panel > section > ul > li {
+    position: relative;
+    padding: 1px 20px 1px 33px;
+    color: white;
+}
+
+.tracks-panel > section > ul > li:focus {
+    background-color: rgba(26, 68, 243, 0.6);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    outline: none;
+}
+
+.tracks-panel > section > ul > li.selected:before {
+    position: absolute;
+    top: 3px;
+    left: 12px;
+    width: 12px;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
+}
+
+.tracks-panel > section > ul > li.animated {
+    animation-name: tracks-panel-item-selection;
+    animation-duration: 150ms;
+    animation-timing-function: step-end;
+    animation-fill-mode: forwards;
+}
+
+@keyframes tracks-panel-item-selection {
+    0%, 55.55% {
+        background-color: rgba(26, 68, 243, 0.6);
+        -webkit-backdrop-filter: saturate(180%) blur(20px);
+    }
+
+    22.22% {
+        background: none;
+        -webkit-backdrop-filter: none;
+    }
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js b/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js
new file mode 100644
index 000000000..4a69bb6e2
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js
@@ -0,0 +1,305 @@
+
+class TracksPanel extends LayoutNode
+{
+
+    constructor()
+    {
+        super(`<div class="tracks-panel"></div>`);
+        this._backgroundTint = new BackgroundTint;
+        this._rightX = 0;
+        this._bottomY = 0;
+    }
+
+    // Public
+
+    get presented()
+    {
+        return !!this.parent;
+    }
+
+    presentInParent(node)
+    {
+        if (this.parent === node)
+            return;
+
+        this.children = this._childrenFromDataSource();
+
+        node.addChild(this);
+
+        this.element.removeEventListener("transitionend", this);
+        this.element.classList.remove("fade-out");
+
+        this._mousedownTarget().addEventListener("mousedown", this, true);
+        window.addEventListener("keydown", this, true);
+
+        this._focusedTrackNode = null;
+    }
+
+    hide()
+    {
+        if (!this.presented)
+            return;
+
+        this._mousedownTarget().removeEventListener("mousedown", this, true);
+        window.removeEventListener("keydown", this, true);
+
+        this.element.addEventListener("transitionend", this);
+
+        // Ensure a transition will indeed happen by starting it only on the next frame.
+        window.requestAnimationFrame(() => { this.element.classList.add("fade-out"); });
+    }
+
+    get bottomY()
+    {
+        return this._bottomY;
+    }
+
+    set bottomY(bottomY)
+    {
+        if (this._bottomY === bottomY)
+            return;
+
+        this._bottomY = bottomY;
+        this.markDirtyProperty("bottomY");
+    }
+
+    get rightX()
+    {
+        return this._rightX;
+    }
+
+    set rightX(x)
+    {
+        if (this._rightX === x)
+            return;
+
+        this._rightX = x;
+        this.markDirtyProperty("rightX");
+    }
+
+    // Protected
+
+    trackNodeSelectionAnimationDidEnd(trackNode)
+    {
+        if (this.uiDelegate && typeof this.uiDelegate.tracksPanelSelectionDidChange === "function")
+            this.uiDelegate.tracksPanelSelectionDidChange(trackNode.index, trackNode.sectionIndex);
+    }
+
+    mouseMovedOverTrackNode(trackNode)
+    {
+        this._focusTrackNode(trackNode);
+    }
+
+    mouseExitedTrackNode(trackNode)
+    {
+        this._focusedTrackNode.element.blur();
+        delete this._focusedTrackNode;
+    }
+
+    commitProperty(propertyName)
+    {
+        if (propertyName === "rightX")
+            this.element.style.right = `${this._rightX}px`;
+        else if (propertyName === "bottomY")
+            this.element.style.bottom = `${this._bottomY}px`;
+        else
+            super.commitProperty(propertyName);
+    }
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousedown":
+            this._handleMousedown(event);
+            break;
+        case "keydown":
+            this._handleKeydown(event);
+            break;
+        case "transitionend":
+            this.remove();
+            break;
+        }
+    }
+
+    // Private
+
+    _mousedownTarget()
+    {
+        const mediaControls = this.parentOfType(MacOSFullscreenMediaControls);
+        if (mediaControls)
+            return mediaControls.element;
+        return window;
+    }
+
+    _childrenFromDataSource()
+    {
+        const children = [this._backgroundTint];
+
+        this._trackNodes = [];
+
+        const dataSource = this.dataSource;
+        if (!dataSource)
+            return children;
+
+        const numberOfSections = dataSource.tracksPanelNumberOfSections();
+        if (numberOfSections === 0)
+            return children;
+
+        for (let sectionIndex = 0; sectionIndex < numberOfSections; ++sectionIndex) {
+            let sectionNode = new LayoutNode(`<section></section>`);
+            sectionNode.addChild(new LayoutNode(`<h3>${dataSource.tracksPanelTitleForSection(sectionIndex)}</h3>`));
+
+            let tracksListNode = sectionNode.addChild(new LayoutNode(`<ul></ul>`));
+            let numberOfTracks = dataSource.tracksPanelNumberOfTracksInSection(sectionIndex);
+            for (let trackIndex = 0; trackIndex < numberOfTracks; ++trackIndex) {
+                let trackTitle = dataSource.tracksPanelTitleForTrackInSection(trackIndex, sectionIndex);
+                let trackSelected = dataSource.tracksPanelIsTrackInSectionSelected(trackIndex, sectionIndex);
+                let trackNode = tracksListNode.addChild(new TrackNode(trackIndex, sectionIndex, trackTitle, trackSelected, this));
+                this._trackNodes.push(trackNode);
+            }
+            children.push(sectionNode);
+        }
+
+        return children;
+    }
+
+    _handleMousedown(event)
+    {
+        if (this.element.contains(event.target))
+            return;
+
+        this._dismiss();
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleKeydown(event)
+    {
+        switch (event.key) {
+        case "Home":
+        case "PageUp":
+            this._focusFirstTrackNode();
+            break;
+        case "End":
+        case "PageDown":
+            this._focusLastTrackNode();
+            break;
+        case "ArrowDown":
+            if (event.altKey || event.metaKey)
+                this._focusLastTrackNode();
+            else
+                this._focusNextTrackNode();
+            break;
+        case "ArrowUp":
+            if (event.altKey || event.metaKey)
+                this._focusFirstTrackNode();
+            else
+                this._focusPreviousTrackNode();
+            break;
+        case " ":
+        case "Enter":
+            if (this._focusedTrackNode)
+                this._focusedTrackNode.activate();
+            break;
+        case "Escape":
+            this._dismiss();
+            break;
+        }
+    }
+
+    _dismiss()
+    {
+        if (this.parent && typeof this.parent.hideTracksPanel === "function")
+            this.parent.hideTracksPanel();
+    }
+
+    _focusTrackNode(trackNode)
+    {
+        if (!trackNode || trackNode === this._focusedTrackNode)
+            return;
+
+        trackNode.element.focus();
+        this._focusedTrackNode = trackNode;
+    }
+
+    _focusPreviousTrackNode()
+    {
+        const previousIndex = this._focusedTrackNode ? this._trackNodes.indexOf(this._focusedTrackNode) - 1 : this._trackNodes.length - 1;
+        this._focusTrackNode(this._trackNodes[previousIndex]);
+    }
+
+    _focusNextTrackNode()
+    {
+        this._focusTrackNode(this._trackNodes[this._trackNodes.indexOf(this._focusedTrackNode) + 1]);
+    }
+
+    _focusFirstTrackNode()
+    {
+        this._focusTrackNode(this._trackNodes[0]);
+    }
+
+    _focusLastTrackNode()
+    {
+        this._focusTrackNode(this._trackNodes[this._trackNodes.length - 1]);
+    }
+
+}
+
+class TrackNode extends LayoutNode
+{
+
+    constructor(index, sectionIndex, title, selected, panel)
+    {
+        super(`<li tabindex="0">${title}</li>`);
+
+        this.index = index;
+        this.sectionIndex = sectionIndex;
+        this._panel = panel;
+        this._selected = selected;
+
+        if (selected)
+            this.element.classList.add("selected");
+
+        this.element.addEventListener("mousemove", this);
+        this.element.addEventListener("mouseleave", this);
+        this.element.addEventListener("click", this);
+    }
+
+    // Public
+
+    activate()
+    {
+        this.element.addEventListener("animationend", this);
+        this.element.classList.add("animated");
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousemove":
+            this._panel.mouseMovedOverTrackNode(this);
+            break;
+        case "mouseleave":
+            this._panel.mouseExitedTrackNode(this);
+            break;
+        case "click":
+            this.activate();
+            break;
+        case "animationend":
+            this._animationDidEnd();
+            break;
+        }
+    }
+
+    // Private
+
+    _animationDidEnd()
+    {
+        this.element.removeEventListener("animationend", this);
+        this._panel.trackNodeSelectionAnimationDidEnd(this);
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/volume-down-button.js b/Source/WebCore/Modules/modern-media-controls/controls/volume-down-button.js
new file mode 100644
index 000000000..b5c9d1daf
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/volume-down-button.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2017 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 VolumeDownButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "volume-down",
+            iconName: Icons.VolumeDown,
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css b/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css
new file mode 100644
index 000000000..42b904bd6
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+.volume.slider > input::-webkit-slider-thumb {
+    width: 11px;
+    height: 11px;
+    border-radius: 5.5px;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js b/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js
new file mode 100644
index 000000000..993eb16f1
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js
@@ -0,0 +1,120 @@
+/*
+ * 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 VolumeSlider extends Slider
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "volume",
+            layoutDelegate
+        });
+
+        this.height = 11;
+        this.enabled = true;
+
+        this._active = false;
+        this.element.addEventListener("mousedown", this);
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        super.handleEvent(event);
+
+        if (event instanceof MouseEvent) {
+            this._active = event.type === "mousedown";
+            if (event.type === "mousedown")
+                window.addEventListener("mouseup", this, true);
+            else
+                window.removeEventListener("mouseup", this, true);
+        }
+    }
+
+    draw(ctx)
+    {
+        const width = this.width;
+        const height = this.height;
+
+        if (!this.width || !this.height)
+            return;
+
+        const dpr = window.devicePixelRatio;
+
+        ctx.save();
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, width, height);
+
+        const trackHeight = 3;
+        const knobRadius = 5.5;
+        const knobDiameter = 2 * knobRadius;
+        const borderSize = 2;
+        const knobX = Math.round(this.value * (width - knobDiameter - borderSize));
+
+        // Draw portion of volume under slider thumb.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, 0, 4, knobX + 2, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(84, 84, 84)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+
+        // Draw portion of volume above slider thumb.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, knobX, 4, width - knobX, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(39, 39, 39)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+
+        // Clear a hole in the slider for the scrubber.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, knobX, 0, knobDiameter + borderSize, height, (knobDiameter + borderSize) / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.clearRect(0, 0, width, height);
+        ctx.restore();
+
+        // Draw scrubber.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, knobX + 1, 0, knobDiameter, knobDiameter, knobRadius);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = this._active ? "white" : "rgb(138, 138, 138)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+
+        ctx.restore();
+    }    
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/volume-up-button.js b/Source/WebCore/Modules/modern-media-controls/controls/volume-up-button.js
new file mode 100644
index 000000000..8d9432436
--- /dev/null
+++ b/Source/WebCore/Modules/modern-media-controls/controls/volume-up-button.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2017 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 VolumeUpButton extends IconButton
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            cssClassName: "volume-up",
+            iconName: Icons.VolumeUp,
+            layoutDelegate
+        });
+    }
+
+}
-- 
cgit v1.2.1