[webkit-changes] [184611] trunk/Source/WebCore

Tue, 19 May 2015 20:34:58 -0700

Title: [184611] trunk/Source/WebCore
Revision
184611
Author
[email protected]
Date
2015-05-19 20:34:35 -0700 (Tue, 19 May 2015)

Log Message

[iOS] Optimized fullscreen placeholder is incorrectly sized
https://bugs.webkit.org/show_bug.cgi?id=145196
rdar://problem/21031188

Reviewed by Dean Jackson.

Add a new media part UI for the placeholder text when entering optimized fullscreen,
and use it as part of the title text in the placeholder. Now the wireless playback status
div serves as a multi-purpose placeholder.

* Modules/mediacontrols/MediaControlsHost.cpp:
(WebCore::MediaControlsHost::mediaUIImageData): Return the placeholder text.
* Modules/mediacontrols/MediaControlsHost.idl: Add a new UI part for placeholder text.
* Modules/mediacontrols/mediaControlsApple.js: Add a new "optimized" ClassName when
the presentation mode is set to optimized.

* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-controls-wireless-playback-status): The text should be at
medium weight, not light weight.
(audio::-webkit-media-controls-wireless-playback-text-top): The title text should be
white for both wireless playback and optimized fullscreen. It matches the style
when taking a video fullscreen.

Add new CSS rules when the placard is used for optimized fullscreen.
(audio::-webkit-media-controls-wireless-playback-status.optimized): Accommodate the
size of the graphic, and position appropriately.
(audio::-webkit-media-controls-wireless-playback-text-top.optimized): One line is
needed, so use this one, and place it where the bottom one is since more room is
needed to accommodate the graphic.
(audio::-webkit-media-controls-wireless-playback-text-bottom.optimized): One line is
needed, so hide this one.
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS.prototype.createControls): Several of the container divs are already
created in Controller.prototype.createControls(). Fly-by fix to avoid creation of
those divs. Only the panelContainer is new for the iOS controls. Fly-by fix of a
missing semicolon.
(ControllerIOS.prototype.handlePresentationModeChange): When the presentation mode
changes do several things:
    1- Update the background image. Clear the inline background image when going back
       to inline or in wireless playback.
    2- Add the "optimized" ClassName to the placeholder container, and the two text
       divs when entering optimized fullscreen. Remove them in other cases.
    3- Set -webkit-media-controls-wireless-playback-text-top to the placeholder text.
       This is better than embedding it inside the graphic. Clear the -bottom text.
* platform/ios/WebCoreSystemInterfaceIOS.h: Add a new enum to obtain the placeholder
text.

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (184610 => 184611)


--- trunk/Source/WebCore/ChangeLog	2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/ChangeLog	2015-05-20 03:34:35 UTC (rev 184611)
@@ -1,3 +1,52 @@
+2015-05-19  Jon Lee  <[email protected]>
+
+        [iOS] Optimized fullscreen placeholder is incorrectly sized
+        https://bugs.webkit.org/show_bug.cgi?id=145196
+        rdar://problem/21031188
+
+        Reviewed by Dean Jackson.
+
+        Add a new media part UI for the placeholder text when entering optimized fullscreen,
+        and use it as part of the title text in the placeholder. Now the wireless playback status
+        div serves as a multi-purpose placeholder.
+
+        * Modules/mediacontrols/MediaControlsHost.cpp:
+        (WebCore::MediaControlsHost::mediaUIImageData): Return the placeholder text.
+        * Modules/mediacontrols/MediaControlsHost.idl: Add a new UI part for placeholder text.
+        * Modules/mediacontrols/mediaControlsApple.js: Add a new "optimized" ClassName when
+        the presentation mode is set to optimized.
+
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (audio::-webkit-media-controls-wireless-playback-status): The text should be at
+        medium weight, not light weight.
+        (audio::-webkit-media-controls-wireless-playback-text-top): The title text should be
+        white for both wireless playback and optimized fullscreen. It matches the style
+        when taking a video fullscreen.
+
+        Add new CSS rules when the placard is used for optimized fullscreen.
+        (audio::-webkit-media-controls-wireless-playback-status.optimized): Accommodate the
+        size of the graphic, and position appropriately.
+        (audio::-webkit-media-controls-wireless-playback-text-top.optimized): One line is
+        needed, so use this one, and place it where the bottom one is since more room is
+        needed to accommodate the graphic.
+        (audio::-webkit-media-controls-wireless-playback-text-bottom.optimized): One line is
+        needed, so hide this one.
+        * Modules/mediacontrols/mediaControlsiOS.js:
+        (ControllerIOS.prototype.createControls): Several of the container divs are already
+        created in Controller.prototype.createControls(). Fly-by fix to avoid creation of
+        those divs. Only the panelContainer is new for the iOS controls. Fly-by fix of a
+        missing semicolon.
+        (ControllerIOS.prototype.handlePresentationModeChange): When the presentation mode
+        changes do several things:
+            1- Update the background image. Clear the inline background image when going back
+               to inline or in wireless playback.
+            2- Add the "optimized" ClassName to the placeholder container, and the two text
+               divs when entering optimized fullscreen. Remove them in other cases.
+            3- Set -webkit-media-controls-wireless-playback-text-top to the placeholder text.
+               This is better than embedding it inside the graphic. Clear the -bottom text.
+        * platform/ios/WebCoreSystemInterfaceIOS.h: Add a new enum to obtain the placeholder
+        text.
+
 2015-05-19  Ryuan Choi  <[email protected]>
 
         [EFL] Use GSimpleProxyResolver instead of custom SoupProxyResolver

Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp (184610 => 184611)


--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp	2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp	2015-05-20 03:34:35 UTC (rev 184611)
@@ -286,6 +286,9 @@
 
     if (partID == "optimized-fullscreen-placeholder")
         return wkGetMediaUIImageData(wkMediaUIPartOptimizedFullscreenPlaceholder);
+
+    if (partID == "optimized-fullscreen-placeholder-text")
+        return wkGetMediaUIImageData(wkMediaUIPartOptimizedFullscreenPlaceholderText);
 #else
     UNUSED_PARAM(partID);
 #endif

Modified: trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl (184610 => 184611)


--- trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl	2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl	2015-05-20 03:34:35 UTC (rev 184611)
@@ -31,7 +31,8 @@
 
 enum MediaUIPartID {
     "optimized-fullscreen-button",
-    "optimized-fullscreen-placeholder"
+    "optimized-fullscreen-placeholder",
+    "optimized-fullscreen-placeholder-text"
 };
 
 [

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (184610 => 184611)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js	2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js	2015-05-20 03:34:35 UTC (rev 184611)
@@ -99,6 +99,7 @@
         list: 'list',
         muteBox: 'mute-box',
         muted: 'muted',
+        optimized: 'optimized',
         paused: 'paused',
         playing: 'playing',
         selected: 'selected',

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css (184610 => 184611)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css	2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css	2015-05-20 03:34:35 UTC (rev 184611)
@@ -575,6 +575,7 @@
     background-size: 131px auto;
     color: rgb(145,145,145);
     font: -apple-system;
+    font-weight: 400;
     vertical-align: text-bottom;
 }
 
@@ -599,6 +600,7 @@
     font-size: 12pt;
     text-align: center;
     margin: 0px;
+    color: rgb(255,255,255);
 }
 
 video::-webkit-media-controls-wireless-playback-text-bottom,
@@ -634,7 +636,26 @@
     display: none;
 }
 
+video::-webkit-media-controls-wireless-playback-status.optimized,
+audio::-webkit-media-controls-wireless-playback-status.optimized
+{
+    background-size: 304px auto;
+    background-position: 50% calc(.5 * (100% - 25px));
+}
+
+video::-webkit-media-controls-wireless-playback-text-top.optimized,
+audio::-webkit-media-controls-wireless-playback-text-top.optimized {
+    top: initial;
+    bottom: 0;
+}
+
+video::-webkit-media-controls-wireless-playback-text-bottom.optimized,
+audio::-webkit-media-controls-wireless-playback-text-bottom.optimized {
+    display: none;
+}
+
 video::-webkit-media-controls-wireless-playback-status.hidden,
 audio::-webkit-media-controls-wireless-playback-status.hidden {
     display: none;
 }
+

Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js (184610 => 184611)


--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js	2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js	2015-05-20 03:34:35 UTC (rev 184611)
@@ -108,19 +108,7 @@
         var panelContainer = this.controls.panelContainer = document.createElement('div');
         panelContainer.setAttribute('pseudo', '-webkit-media-controls-panel-container');
 
-        var panelBackground = this.controls.panelBackground = document.createElement('div');
-        panelBackground.setAttribute('pseudo', '-webkit-media-controls-panel-background');
-
-        var inlinePlaybackPlaceholderText = this.controls.inlinePlaybackPlaceholderText = document.createElement('div');
-        inlinePlaybackPlaceholderText.setAttribute('pseudo', '-webkit-media-controls-wireless-playback-text');
-
-        var inlinePlaybackPlaceholderTextTop = this.controls.inlinePlaybackPlaceholderTextTop = document.createElement('p');
-        inlinePlaybackPlaceholderTextTop.setAttribute('pseudo', '-webkit-media-controls-wireless-playback-text-top');
-
-        var inlinePlaybackPlaceholderTextBottom = this.controls.inlinePlaybackPlaceholderTextBottom = document.createElement('p');
-        inlinePlaybackPlaceholderTextBottom.setAttribute('pseudo', '-webkit-media-controls-wireless-playback-text-bottom');
-
-        var wirelessTargetPicker = this.controls.wirelessTargetPicker
+        var wirelessTargetPicker = this.controls.wirelessTargetPicker;
         this.listenFor(wirelessTargetPicker, 'touchstart', this.handleWirelessPickerButtonTouchStart);
         this.listenFor(wirelessTargetPicker, 'touchend', this.handleWirelessPickerButtonTouchEnd);
         this.listenFor(wirelessTargetPicker, 'touchcancel', this.handleWirelessPickerButtonTouchCancel);
@@ -549,14 +537,30 @@
 
         switch (presentationMode) {
             case 'inline':
+                this.controls.inlinePlaybackPlaceholder.style.backgroundImage = "";
                 this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.hidden);
+                this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.optimized);
+                this.controls.inlinePlaybackPlaceholderTextTop.classList.remove(this.ClassNames.optimized);
+                this.controls.inlinePlaybackPlaceholderTextBottom.classList.remove(this.ClassNames.optimized);
                 break;
             case 'optimized':
                 var backgroundImage = "url('" + this.host.mediaUIImageData("optimized-fullscreen-placeholder") + "')";
                 this.controls.inlinePlaybackPlaceholder.style.backgroundImage = backgroundImage;
                 this.controls.inlinePlaybackPlaceholder.setAttribute('aria-label', "video playback placeholder");
+                this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.optimized);
                 this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.hidden);
+
+                this.controls.inlinePlaybackPlaceholderTextTop.innerText = this.host.mediaUIImageData("optimized-fullscreen-placeholder-text");
+                this.controls.inlinePlaybackPlaceholderTextTop.classList.add(this.ClassNames.optimized);
+                this.controls.inlinePlaybackPlaceholderTextBottom.innerText = "";
+                this.controls.inlinePlaybackPlaceholderTextBottom.classList.add(this.ClassNames.optimized);
                 break;
+            default:
+                this.controls.inlinePlaybackPlaceholder.style.backgroundImage = "";
+                this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.optimized);
+                this.controls.inlinePlaybackPlaceholderTextTop.classList.remove(this.ClassNames.optimized);
+                this.controls.inlinePlaybackPlaceholderTextBottom.classList.remove(this.ClassNames.optimized);
+                break;
         }
 
         this.updateControls();

Modified: trunk/Source/WebCore/platform/ios/WebCoreSystemInterfaceIOS.h (184610 => 184611)


--- trunk/Source/WebCore/platform/ios/WebCoreSystemInterfaceIOS.h	2015-05-20 02:46:43 UTC (rev 184610)
+++ trunk/Source/WebCore/platform/ios/WebCoreSystemInterfaceIOS.h	2015-05-20 03:34:35 UTC (rev 184611)
@@ -80,7 +80,8 @@
 
 typedef enum {
     wkMediaUIPartOptimizedFullscreenButton = 0,
-    wkMediaUIPartOptimizedFullscreenPlaceholder
+    wkMediaUIPartOptimizedFullscreenPlaceholder,
+    wkMediaUIPartOptimizedFullscreenPlaceholderText
 } wkMediaUIPart;
 extern CFStringRef (*wkGetMediaUIImageData)(int wkMediaUIPart);
 

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to