- Revision
- 140705
- Author
- [email protected]
- Date
- 2013-01-24 12:16:39 -0800 (Thu, 24 Jan 2013)
Log Message
Convert RenderFullScreen to use the non-deprecated flexbox
https://bugs.webkit.org/show_bug.cgi?id=107746
Patch by Christian Biesinger <[email protected]> on 2013-01-24
Reviewed by Ojan Vafai.
Tests: covered by existing tests in fullscreen/.
* rendering/RenderFullScreen.h:
* rendering/RenderFullScreen.cpp:
(RenderFullScreen::RenderFullScreen):
(RenderFullScreen::willBeDestroyed):
Inherit from RenderFlexibleBox
(createFullScreenStyle):
Use the new-style CSS properties (justify-content, etc)
* css/fullscreen.css:
(video:-webkit-full-screen, audio:-webkit-full-screen):
* css/fullscreenQuickTime.css:
(video:-webkit-full-screen::-webkit-media-controls-panel):
(video:-webkit-full-screen::-webkit-media-controls-seek-back-button):
(video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button):
(video:-webkit-full-screen::-webkit-media-controls-seek-forward-button):
* css/mediaControlsBlackBerryFullscreen.css:
(video:-webkit-full-screen::-webkit-media-controls-panel):
(video:-webkit-full-screen::-webkit-media-controls-button-group-container):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-time-display-container):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-play-button):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-timeline-container):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-current-time-display):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-time-remaining-display):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-timeline):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-fullscreen-button):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-divider):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-container, video:-webkit-full-screen::-webkit-media-controls-play-button-container):
(video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-container):
(video:-webkit-full-screen::-webkit-media-controls-play-button-container):
(video:-webkit-full-screen::-webkit-media-controls-placeholder):
* css/mediaControlsQtFullscreen.css:
(video::-webkit-media-controls-panel):
(video::-webkit-media-controls-play-button):
Update fullscreen-related CSS to use the new flexbox
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (140704 => 140705)
--- trunk/Source/WebCore/ChangeLog 2013-01-24 20:14:58 UTC (rev 140704)
+++ trunk/Source/WebCore/ChangeLog 2013-01-24 20:16:39 UTC (rev 140705)
@@ -1,3 +1,48 @@
+2013-01-24 Christian Biesinger <[email protected]>
+
+ Convert RenderFullScreen to use the non-deprecated flexbox
+ https://bugs.webkit.org/show_bug.cgi?id=107746
+
+ Reviewed by Ojan Vafai.
+
+ Tests: covered by existing tests in fullscreen/.
+
+ * rendering/RenderFullScreen.h:
+ * rendering/RenderFullScreen.cpp:
+ (RenderFullScreen::RenderFullScreen):
+ (RenderFullScreen::willBeDestroyed):
+ Inherit from RenderFlexibleBox
+
+ (createFullScreenStyle):
+ Use the new-style CSS properties (justify-content, etc)
+
+ * css/fullscreen.css:
+ (video:-webkit-full-screen, audio:-webkit-full-screen):
+ * css/fullscreenQuickTime.css:
+ (video:-webkit-full-screen::-webkit-media-controls-panel):
+ (video:-webkit-full-screen::-webkit-media-controls-seek-back-button):
+ (video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button):
+ (video:-webkit-full-screen::-webkit-media-controls-seek-forward-button):
+ * css/mediaControlsBlackBerryFullscreen.css:
+ (video:-webkit-full-screen::-webkit-media-controls-panel):
+ (video:-webkit-full-screen::-webkit-media-controls-button-group-container):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-time-display-container):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-play-button):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-timeline-container):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-current-time-display):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-time-remaining-display):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-timeline):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-fullscreen-button):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-divider):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-container, video:-webkit-full-screen::-webkit-media-controls-play-button-container):
+ (video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-container):
+ (video:-webkit-full-screen::-webkit-media-controls-play-button-container):
+ (video:-webkit-full-screen::-webkit-media-controls-placeholder):
+ * css/mediaControlsQtFullscreen.css:
+ (video::-webkit-media-controls-panel):
+ (video::-webkit-media-controls-play-button):
+ Update fullscreen-related CSS to use the new flexbox
+
2013-01-23 Jer Noble <[email protected]>
Mac: Video appears in wrong place during pinch operations
Modified: trunk/Source/WebCore/css/fullscreen.css (140704 => 140705)
--- trunk/Source/WebCore/css/fullscreen.css 2013-01-24 20:14:58 UTC (rev 140704)
+++ trunk/Source/WebCore/css/fullscreen.css 2013-01-24 20:16:39 UTC (rev 140705)
@@ -27,7 +27,7 @@
margin: 0 !important;
height: 100% !important;
width: 100% !important;
- -webkit-box-flex: 1 !important;
+ -webkit-flex: 1 !important;
display: block !important;
}
Modified: trunk/Source/WebCore/css/fullscreenQuickTime.css (140704 => 140705)
--- trunk/Source/WebCore/css/fullscreenQuickTime.css 2013-01-24 20:14:58 UTC (rev 140704)
+++ trunk/Source/WebCore/css/fullscreenQuickTime.css 2013-01-24 20:16:39 UTC (rev 140705)
@@ -25,8 +25,8 @@
/* alternate media controls - Extend fullscreen.css */
video:-webkit-full-screen::-webkit-media-controls-panel {
- -webkit-box-align: start !important;
- -webkit-box-pack: end !important;
+ -webkit-align-items: flex-start !important;
+ -webkit-justify-content: flex-end !important;
-webkit-appearance: none !important;
padding: 12px 0 0 10px !important;
@@ -125,7 +125,7 @@
video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
position: absolute;
- display: -webkit-box;
+ display: -webkit-flex;
width: 23px;
height: 16px;
left: 162px;
@@ -134,7 +134,7 @@
video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
position: absolute;
- display: -webkit-box;
+ display: -webkit-flex;
width: 29px;
height: 16px;
left: 262px;
@@ -143,7 +143,7 @@
video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
position: absolute;
- display: -webkit-box;
+ display: -webkit-flex;
width: 23px;
height: 16px;
left: 262px;
Modified: trunk/Source/WebCore/css/mediaControlsBlackBerryFullscreen.css (140704 => 140705)
--- trunk/Source/WebCore/css/mediaControlsBlackBerryFullscreen.css 2013-01-24 20:14:58 UTC (rev 140704)
+++ trunk/Source/WebCore/css/mediaControlsBlackBerryFullscreen.css 2013-01-24 20:16:39 UTC (rev 140705)
@@ -36,9 +36,9 @@
}
video:-webkit-full-screen::-webkit-media-controls-panel {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-box-align: stretch;
+ display: -webkit-flex;
+ -webkit-flex-direction: column;
+ -webkit-align-items: stretch;
position: absolute;
bottom: 0px;
width: 100%;
@@ -49,21 +49,21 @@
video:-webkit-full-screen::-webkit-media-controls-button-group-container {
-webkit-appearance: media-controls-background;
- display: -webkit-box;
- -webkit-box-orient: horizontal;
- -webkit-box-align: center;
- -webkit-box-pack: justify;
- -webkit-box-flex: 1;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-justify-content: space-between;
+ -webkit-flex: 1;
background-color: rgb(0, 0, 0);
}
video:-webkit-full-screen::-webkit-media-controls-fullscreen-time-display-container {
-webkit-appearance: media-controls-background;
- display: -webkit-box;
- -webkit-box-orient: horizontal;
- -webkit-box-align: center;
- -webkit-box-pack: justify;
- -webkit-box-flex: 1;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-justify-content: space-between;
+ -webkit-flex: 1;
}
video:-webkit-full-screen::-webkit-media-controls-time-display-container {
@@ -72,7 +72,7 @@
video:-webkit-full-screen::-webkit-media-controls-fullscreen-play-button {
-webkit-appearance: media-play-button;
- display: -webkit-box;
+ display: -webkit-flex;
}
video:-webkit-full-screen::-webkit-media-controls-play-button {
@@ -81,11 +81,11 @@
video:-webkit-full-screen::-webkit-media-controls-fullscreen-timeline-container {
-webkit-appearance: media-controls-background;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-box-align: stretch;
- -webkit-box-pack: center;
- -webkit-box-flex: 1;
+ display: -webkit-flex;
+ -webkit-flex-direction: column;
+ -webkit-align-items: stretch;
+ -webkit-justify-content: center;
+ -webkit-flex: 1;
height: auto;
width: 100%;
}
@@ -96,11 +96,11 @@
video:-webkit-full-screen::-webkit-media-controls-fullscreen-current-time-display {
-webkit-appearance: media-current-time-display;
- display: -webkit-box;
- -webkit-box-orient: horizontal;
- -webkit-box-align: center;
- -webkit-box-pack: end;
- -webkit-box-flex: 0;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-justify-content: flex-end;
+ -webkit-flex: 0;
}
video:-webkit-full-screen::-webkit-media-controls-current-time-display {
@@ -109,11 +109,11 @@
video:-webkit-full-screen::-webkit-media-controls-fullscreen-time-remaining-display {
-webkit-appearance: media-time-remaining-display;
- display: -webkit-box;
- -webkit-box-orient: horizontal;
- -webkit-box-align: center;
- -webkit-box-pack: end;
- -webkit-box-flex: 0;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-justify-content: flex-end;
+ -webkit-flex: 0;
color: rgb(125, 125, 125);
}
@@ -123,8 +123,8 @@
video:-webkit-full-screen::-webkit-media-controls-fullscreen-timeline {
-webkit-appearance: media-slider;
- display: -webkit-box;
- -webkit-box-flex: 1;
+ display: -webkit-flex;
+ -webkit-flex: 1;
}
video:-webkit-full-screen::-webkit-media-controls-timeline {
@@ -133,7 +133,7 @@
video:-webkit-full-screen::-webkit-media-controls-fullscreen-fullscreen-button {
-webkit-appearance: media-exit-fullscreen-button;
- display: -webkit-box;
+ display: -webkit-flex;
}
video:-webkit-full-screen::-webkit-media-controls-fullscreen-button {
@@ -154,29 +154,29 @@
video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-divider {
-webkit-appearance: media-rewind-button;
- display: -webkit-box;
+ display: -webkit-flex;
}
video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-container, video:-webkit-full-screen::-webkit-media-controls-play-button-container {
-webkit-appearance: media-controls-background;
- display: -webkit-box;
- -webkit-box-orient: horizontal;
- -webkit-box-align: center;
- -webkit-box-flex: 1;
+ display: -webkit-flex;
+ -webkit-flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-flex: 1;
min-width: 100%;
}
video:-webkit-full-screen::-webkit-media-controls-fullscreen-button-container {
- -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
}
video:-webkit-full-screen::-webkit-media-controls-play-button-container {
- -webkit-box-pack: center;
+ -webkit-justify-content: center;
}
video:-webkit-full-screen::-webkit-media-controls-placeholder {
-webkit-appearance: media-controls-background;
- display: -webkit-box;
- -webkit-box-flex: 1;
+ display: -webkit-flex;
+ -webkit-flex: 1;
min-width: 100%;
}
Modified: trunk/Source/WebCore/css/mediaControlsQtFullscreen.css (140704 => 140705)
--- trunk/Source/WebCore/css/mediaControlsQtFullscreen.css 2013-01-24 20:14:58 UTC (rev 140704)
+++ trunk/Source/WebCore/css/mediaControlsQtFullscreen.css 2013-01-24 20:16:39 UTC (rev 140705)
@@ -23,9 +23,9 @@
*/
video::-webkit-media-controls-panel {
/* The control panel is only play button for full screen */
- display: -webkit-box;
- -webkit-box-align: center;
- -webkit-box-pack: center;
+ display: -webkit-flex;
+ -webkit-align-items: center;
+ -webkit-justify-content: center;
width: 100%;
height: 100%;
}
@@ -39,9 +39,9 @@
}
video::-webkit-media-controls-play-button {
- display: -webkit-box;
- -webkit-box-align: center;
- -webkit-box-pack: center;
+ display: -webkit-flex;
+ -webkit-align-items: center;
+ -webkit-justify-content: center;
width: 50px;
height: 50px;
padding: 20px;
Modified: trunk/Source/WebCore/rendering/RenderFullScreen.cpp (140704 => 140705)
--- trunk/Source/WebCore/rendering/RenderFullScreen.cpp 2013-01-24 20:14:58 UTC (rev 140704)
+++ trunk/Source/WebCore/rendering/RenderFullScreen.cpp 2013-01-24 20:16:39 UTC (rev 140705)
@@ -57,7 +57,7 @@
}
RenderFullScreen::RenderFullScreen()
- : RenderDeprecatedFlexibleBox(0)
+ : RenderFlexibleBox(0)
, m_placeholder(0)
{
setReplaced(false);
@@ -84,7 +84,7 @@
if (document() && document()->fullScreenRenderer() == this)
document()->fullScreenRendererDestroyed();
- RenderDeprecatedFlexibleBox::willBeDestroyed();
+ RenderFlexibleBox::willBeDestroyed();
}
static PassRefPtr<RenderStyle> createFullScreenStyle()
@@ -97,10 +97,10 @@
fullscreenStyle->setFontDescription(FontDescription());
fullscreenStyle->font().update(0);
- fullscreenStyle->setDisplay(BOX);
- fullscreenStyle->setBoxPack(Center);
- fullscreenStyle->setBoxAlign(BCENTER);
- fullscreenStyle->setBoxOrient(VERTICAL);
+ fullscreenStyle->setDisplay(FLEX);
+ fullscreenStyle->setJustifyContent(JustifyCenter);
+ fullscreenStyle->setAlignItems(AlignCenter);
+ fullscreenStyle->setFlexDirection(FlowColumn);
fullscreenStyle->setPosition(FixedPosition);
fullscreenStyle->setWidth(Length(100.0, Percent));
Modified: trunk/Source/WebCore/rendering/RenderFullScreen.h (140704 => 140705)
--- trunk/Source/WebCore/rendering/RenderFullScreen.h 2013-01-24 20:14:58 UTC (rev 140704)
+++ trunk/Source/WebCore/rendering/RenderFullScreen.h 2013-01-24 20:16:39 UTC (rev 140705)
@@ -27,12 +27,12 @@
#if ENABLE(FULLSCREEN_API)
-#include "RenderDeprecatedFlexibleBox.h"
+#include "RenderFlexibleBox.h"
#include "StyleInheritedData.h"
namespace WebCore {
-class RenderFullScreen : public RenderDeprecatedFlexibleBox {
+class RenderFullScreen : public RenderFlexibleBox {
public:
static RenderFullScreen* createAnonymous(Document*);
