Convert RenderFullScreen to use the non-deprecated flexbox

https://bugs.webkit.org/show_bug.cgi?id=107746

Patch by Christian Biesinger <cbiesinger@chromium.org> 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

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@140705 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 1dc0d10b
2013-01-24 Christian Biesinger <cbiesinger@chromium.org>
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 <jer.noble@apple.com>
Mac: Video appears in wrong place during pinch operations
......@@ -27,7 +27,7 @@ video:-webkit-full-screen, audio:-webkit-full-screen {
margin: 0 !important;
height: 100% !important;
width: 100% !important;
-webkit-box-flex: 1 !important;
-webkit-flex: 1 !important;
display: block !important;
}
......
......@@ -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-rewind-button {
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-seek-back-button {
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-return-to-realtime-button {
video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
width: 23px;
height: 16px;
left: 262px;
......
......@@ -36,9 +36,9 @@ video:-webkit-full-screen::-webkit-media-controls-embedded-panel {
}
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-panel {
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-time-display-container {
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-play-button {
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-timeline-container {
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-current-time-display {
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-time-remaining-display {
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-timeline {
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-volume-slider {
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%;
}
......@@ -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-mute-button {
}
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;
......
......@@ -57,7 +57,7 @@ void RenderFullScreenPlaceholder::willBeDestroyed()
}
RenderFullScreen::RenderFullScreen()
: RenderDeprecatedFlexibleBox(0)
: RenderFlexibleBox(0)
, m_placeholder(0)
{
setReplaced(false);
......@@ -84,7 +84,7 @@ void RenderFullScreen::willBeDestroyed()
if (document() && document()->fullScreenRenderer() == this)
document()->fullScreenRendererDestroyed();
RenderDeprecatedFlexibleBox::willBeDestroyed();
RenderFlexibleBox::willBeDestroyed();
}
static PassRefPtr<RenderStyle> createFullScreenStyle()
......@@ -97,10 +97,10 @@ static PassRefPtr<RenderStyle> createFullScreenStyle()
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));
......
......@@ -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*);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment