[Modern Media Controls] Add a MediaControlsHost API to retrieve image…

…s as base64 https://bugs.webkit.org/show_bug.cgi?id=163502 <rdar://problem/28792017> Patch by Antoine Quint <graouts@apple.com> on 2016-10-17 Reviewed by Darin Adler. Add a new `base64StringForIconAndPlatform()` method to MediaControlsHost such that we may load images from the modern-media-controls directory in the WebCore.framework bundle. We use this new method in the iconService singleton when a `mediaControlsHost` is set, which will be set in a later patch. * Modules/mediacontrols/MediaControlsHost.cpp: (WebCore::MediaControlsHost::base64StringForIconAndPlatform): * Modules/mediacontrols/MediaControlsHost.h: * Modules/mediacontrols/MediaControlsHost.idl: * Modules/modern-media-controls/controls/icon-service.js: (const.iconService.new.IconService.prototype.urlForIconNameAndLayoutTraits): (const.iconService.new.IconService): * rendering/RenderTheme.h: (WebCore::RenderTheme::mediaControlsBase64StringForIconAndPlatform): (WebCore::RenderTheme::mediaControlsScript): Deleted. * rendering/RenderThemeMac.h: * rendering/RenderThemeMac.mm: (WebCore::RenderThemeMac::mediaControlsBase64StringForIconAndPlatform): Canonical link: https://commits.webkit.org/181341@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@207423 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Oct 17, 2016 · 92ebfc2 · 92ebfc2
1 parent 398906f
commit 92ebfc2
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 12 deletions.
diff --git a/LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt b/LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt
@@ -4,9 +4,9 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 Checking path to images is computed according to traits
-PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS).includes("macOS/pause") is true
-PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.iOS).includes("iOS/pause") is true
-PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS | LayoutTraits.Fullscreen).includes("macOS/pause-fullscreen") is true
+PASS iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS).src.includes("macOS/pause@") is true
+PASS iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.iOS).src.includes("iOS/pause@") is true
+PASS iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS | LayoutTraits.Fullscreen).src.includes("macOS/pause-fullscreen@") is true
 
 Checking requested images are cached
 PASS iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS) === iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS) is true

diff --git a/LayoutTests/media/modern-media-controls/icon-service/icon-service.html b/LayoutTests/media/modern-media-controls/icon-service/icon-service.html
@@ -10,9 +10,9 @@
 iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
 
 debug("Checking path to images is computed according to traits");
-shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS).includes("macOS/pause")');
-shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.iOS).includes("iOS/pause")');
-shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS | LayoutTraits.Fullscreen).includes("macOS/pause-fullscreen")');
+shouldBeTrue('iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS).src.includes("macOS/pause@")');
+shouldBeTrue('iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.iOS).src.includes("iOS/pause@")');
+shouldBeTrue('iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS | LayoutTraits.Fullscreen).src.includes("macOS/pause-fullscreen@")');
 
 debug("");
 debug("Checking requested images are cached");

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,30 @@
+2016-10-17  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Add a MediaControlsHost API to retrieve images as base64
+        https://bugs.webkit.org/show_bug.cgi?id=163502
+        <rdar://problem/28792017>
+
+        Reviewed by Darin Adler.
+
+        Add a new `base64StringForIconAndPlatform()` method to MediaControlsHost such that we
+        may load images from the modern-media-controls directory in the WebCore.framework bundle.
+        We use this new method in the iconService singleton when a `mediaControlsHost` is set,
+        which will be set in a later patch.
+
+        * Modules/mediacontrols/MediaControlsHost.cpp:
+        (WebCore::MediaControlsHost::base64StringForIconAndPlatform):
+        * Modules/mediacontrols/MediaControlsHost.h:
+        * Modules/mediacontrols/MediaControlsHost.idl:
+        * Modules/modern-media-controls/controls/icon-service.js:
+        (const.iconService.new.IconService.prototype.urlForIconNameAndLayoutTraits):
+        (const.iconService.new.IconService):
+        * rendering/RenderTheme.h:
+        (WebCore::RenderTheme::mediaControlsBase64StringForIconAndPlatform):
+        (WebCore::RenderTheme::mediaControlsScript): Deleted.
+        * rendering/RenderThemeMac.h:
+        * rendering/RenderThemeMac.mm:
+        (WebCore::RenderThemeMac::mediaControlsBase64StringForIconAndPlatform):
+
 2016-10-17  Antoine Quint  <graouts@apple.com>
 
         [Modern Media Controls] Add a MediaControlsHost API to retrieve the shadow root CSS

diff --git a/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp b/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp
@@ -292,6 +292,14 @@ String MediaControlsHost::shadowRootCSSText() const
     return RenderTheme::themeForPage(page)->mediaControlsStyleSheet();
 }
 
+String MediaControlsHost::base64StringForIconAndPlatform(const String& iconName, const String& platform) const
+{
+    Page* page = m_mediaElement->document().page();
+    if (!page)
+        return emptyString();
+    return RenderTheme::themeForPage(page)->mediaControlsBase64StringForIconAndPlatform(iconName, platform);
+}
+
 }
 
 #endif
diff --git a/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h b/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h
@@ -83,6 +83,7 @@ class MediaControlsHost : public RefCounted<MediaControlsHost> {
     String generateUUID() const;
 
     String shadowRootCSSText() const;
+    String base64StringForIconAndPlatform(const String& iconName, const String& platform) const;
 
 private:
     MediaControlsHost(HTMLMediaElement*);

diff --git a/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl b/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl
@@ -61,4 +61,5 @@ enum DeviceType {
     DOMString generateUUID();
 
     [EnabledAtRuntime=ModernMediaControls] readonly attribute DOMString shadowRootCSSText;
+    [EnabledAtRuntime=ModernMediaControls] DOMString base64StringForIconAndPlatform(DOMString iconName, DOMString platform);
 };
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js b/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js
@@ -52,20 +52,30 @@ const iconService = new class IconService {
         this.images = {};
     }
 
+    // Public
+
     imageForIconNameAndLayoutTraits(iconName, layoutTraits)
     {
-        const path = this.urlForIconNameAndLayoutTraits(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;
-        image.src = path;
+
+        if (this.mediaControlsHost)
+            image.src = "data:image/png;base64," + this.mediaControlsHost.base64StringForIconAndPlatform(fileName, platform);
+        else
+            image.src = `${this.directoryPath}/${path}`;
+
         return image;
     }
 
-    urlForIconNameAndLayoutTraits(iconName, layoutTraits)
+    // Private
+
+    _fileNameAndPlatformForIconNameAndLayoutTraits(iconName, layoutTraits)
     {
         let platform;
         if (layoutTraits & LayoutTraits.macOS)
@@ -78,7 +88,9 @@ const iconService = new class IconService {
         if (layoutTraits & LayoutTraits.Fullscreen && IconsWithFullScreenVariants.includes(iconName))
             iconName += "-fullscreen";
 
-        return `${this.directoryPath}/${platform}/${iconName}@${window.devicePixelRatio}x.png`;
+        const fileName = `${iconName}@${window.devicePixelRatio}x`;
+
+        return [fileName, platform];
     }
 
 };
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/start-button.js b/Source/WebCore/Modules/modern-media-controls/controls/start-button.js
@@ -36,7 +36,7 @@ class StartButton extends Button
         background.className = "background";
 
         const image = this.element.appendChild(new Image);
-        image.src = iconService.urlForIconNameAndLayoutTraits(Icons.Start, this.layoutTraits);
+        image.src = iconService.imageForIconNameAndLayoutTraits(Icons.Start, this.layoutTraits).src;
     }
 
 }
diff --git a/Source/WebCore/rendering/RenderTheme.h b/Source/WebCore/rendering/RenderTheme.h
@@ -101,6 +101,7 @@ class RenderTheme : public RefCounted<RenderTheme> {
     virtual String mediaControlsStyleSheet() { return String(); }
     virtual String extraMediaControlsStyleSheet() { return String(); }
     virtual String mediaControlsScript() { return String(); }
+    virtual String mediaControlsBase64StringForIconAndPlatform(const String&, const String&) { return String(); }
 #endif
 #if ENABLE(FULLSCREEN_API)
     virtual String extraFullScreenStyleSheet() { return String(); }

diff --git a/Source/WebCore/rendering/RenderThemeMac.h b/Source/WebCore/rendering/RenderThemeMac.h
@@ -108,6 +108,7 @@ class RenderThemeMac final : public RenderThemeCocoa {
     // Media controls
     String mediaControlsStyleSheet() override;
     String mediaControlsScript() override;
+    String mediaControlsBase64StringForIconAndPlatform(const String&, const String&) override;
 #endif
 
 #if ENABLE(SERVICE_CONTROLS)

diff --git a/Source/WebCore/rendering/RenderThemeMac.mm b/Source/WebCore/rendering/RenderThemeMac.mm
@@ -272,6 +272,20 @@ @interface NSSearchFieldCell()
 #endif
 }
 
+String RenderThemeMac::mediaControlsBase64StringForIconAndPlatform(const String& iconName, const String& platform)
+{
+#if ENABLE(MEDIA_CONTROLS_SCRIPT)
+    if (!RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled())
+        return emptyString();
+
+    String directory = "modern-media-controls/images/" + platform;
+    NSBundle *bundle = [NSBundle bundleForClass:[WebCoreRenderThemeBundle class]];
+    return [[NSData dataWithContentsOfFile:[bundle pathForResource:iconName ofType:@"png" inDirectory:directory]] base64EncodedStringWithOptions:0];
+#else
+    return emptyString();
+#endif
+}
+
 #endif // ENABLE(VIDEO)