Convert RenderFullScreen to use the non-deprecated flexbox
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Jan 2013 20:16:39 +0000 (20:16 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Jan 2013 20:16:39 +0000 (20:16 +0000)
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: https://svn.webkit.org/repository/webkit/trunk@140705 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/css/fullscreen.css
Source/WebCore/css/fullscreenQuickTime.css
Source/WebCore/css/mediaControlsBlackBerryFullscreen.css
Source/WebCore/css/mediaControlsQtFullscreen.css
Source/WebCore/rendering/RenderFullScreen.cpp
Source/WebCore/rendering/RenderFullScreen.h

index ecefb31..07cb29a 100644 (file)
@@ -1,3 +1,48 @@
+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
index b91f6bc..127670b 100644 (file)
@@ -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;
 }
 
index afd8ba4..bb7a3b4 100644 (file)
@@ -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;
index 9c1f9cd..918a118 100644 (file)
@@ -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%;
 }
index 35cbf75..7aa43ce 100644 (file)
@@ -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;
index f13c302..2044bc4 100644 (file)
@@ -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));
index ef5e1c4..976ebce 100644 (file)
 
 #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*);