Use flexbox to center the plugin.

This allows us to use CSS instead of JS to do the centering, and means that
there's no need for "position: absolute", and so will which make measuring the
DOM easier when we come to implement scrolling for apps v2.

NOTRY=true

Review URL: https://codereview.chromium.org/114473003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@241338 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 39 insertions, 4 deletions

diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index ee11918..851208f 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -18,12 +18,15 @@ tfoot, thead, tr, th, td, button {
   vertical-align: baseline;
 }
 
+.inset {
+  padding: 20px 20px 0 20px;
+}
+
 body {
   font-family: "Arial", "Helvetica", sans-serif;
   color: #222;
   font-size: 13px;
   margin: 0;
-  padding: 20px 20px 0 20px;
   direction: __MSG_@@bidi_dir__;
 }
 
@@ -282,7 +285,6 @@ header {
 html {
   -webkit-user-select: none;
   cursor: default;
-  height: 100%; /* Remove phantom pixels at the bottom of the body. */
 }
 
 section {
@@ -666,8 +668,7 @@ html.apps-v2.scrollable {
   width: 315px;
 }
 
-#session-mode {
-  position: absolute;
+#session-client-plugin {
   box-shadow: 0 0 8px 0 black;
   -webkit-user-select: none;
 }
@@ -704,3 +705,37 @@ html.apps-v2.scrollable {
 [hidden] {
   display: none !important;
 }
+
+.full-height {
+  height: 100%;
+}
+
+.horizontally-centered {
+  display: -webkit-flex;
+}
+
+.vertically-centered {
+  display: -webkit-flex;
+  flex-direction: column;
+  height: 100%
+}
+
+.horizontally-centered::before,
+.horizontally-centered::after,
+.vertically-centered::before,
+.vertically-centered::after {
+  content: "";
+  -webkit-flex: 1;
+}
+
+/* Bump-scrolling is currently implemented by adjusting the margins, which is
+ * easier to implement with "position: fixed". In full-screen mode there are
+ * no scroll-bars, so the advantages of flex-box layout to achieve centering
+ * (ie, the DOM is easier to measure to determine when scroll-bars are needed)
+ * don't apply */
+.full-screen #session-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}