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

4 files changed, 61 insertions, 25 deletions

diff --git a/remoting/webapp/client_screen.js b/remoting/webapp/client_screen.js
index 17c1188..bee7a928 100644
--- a/remoting/webapp/client_screen.js
+++ b/remoting/webapp/client_screen.js
@@ -30,7 +30,7 @@ remoting.clientSession = null;
 remoting.connectIT2Me = function() {
   if (!remoting.connector) {
     remoting.connector = new remoting.SessionConnector(
-        document.getElementById('session-mode'),
+        document.getElementById('client-plugin-container'),
         remoting.onConnected,
         showConnectError_);
   }
@@ -248,7 +248,7 @@ remoting.connectMe2Me = function(hostId) {
 remoting.connectMe2MeHostVersionAcknowledged_ = function(host) {
   if (!remoting.connector) {
     remoting.connector = new remoting.SessionConnector(
-        document.getElementById('session-mode'),
+        document.getElementById('client-plugin-container'),
         remoting.onConnected,
         showConnectError_);
   }
diff --git a/remoting/webapp/client_session.js b/remoting/webapp/client_session.js
index 3630871..a6bc3bd 100644
--- a/remoting/webapp/client_session.js
+++ b/remoting/webapp/client_session.js
@@ -1101,18 +1101,6 @@ remoting.ClientSession.prototype.updateDimensions = function() {
   var clientHeight = document.documentElement.clientHeight;
   var parentNode = this.plugin_.element().parentNode;
 
-  if (pluginWidth < clientWidth) {
-    parentNode.style.left = (clientWidth - pluginWidth) / 2 + 'px';
-  } else {
-    parentNode.style.left = '0';
-  }
-
-  if (pluginHeight < clientHeight) {
-    parentNode.style.top = (clientHeight - pluginHeight) / 2 + 'px';
-  } else {
-    parentNode.style.top = '0';
-  }
-
   console.log('plugin dimensions: ' +
               parentNode.style.left + ',' +
               parentNode.style.top + '-' +
@@ -1168,15 +1156,18 @@ remoting.ClientSession.prototype.requestPairing = function(clientName, onDone) {
  * @private
  */
 remoting.ClientSession.prototype.toggleFullScreen_ = function() {
+  var htmlNode = /** @type {HTMLElement} */ (document.body.parentNode);
   if (document.webkitIsFullScreen) {
     document.webkitCancelFullScreen();
     this.enableBumpScroll_(false);
+    htmlNode.classList.remove('full-screen');
   } else {
     document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
     // Don't enable bump scrolling immediately because it can result in
     // onMouseMove firing before the webkitIsFullScreen property can be
     // read safely (crbug.com/132180).
     window.setTimeout(this.enableBumpScroll_.bind(this, true), 0);
+    htmlNode.classList.add('full-screen');
   }
 };
 
@@ -1328,4 +1319,3 @@ remoting.ClientSession.prototype.sendClipboardItem = function(mimeType, item) {
     return;
   this.plugin_.sendClipboardItem(mimeType, item)
 };
-
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%;
+}
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index 636fe5e..9688755 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -5,7 +5,7 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 
-<html class="scrollable">
+<html class="scrollable full-height">
   <head>
     <meta charset="utf-8">
     <link rel="icon" type="image/png" href="chromoting16.webp">
@@ -57,7 +57,7 @@ found in the LICENSE file.
     <title i18n-content="PRODUCT_NAME"></title>
   </head>
 
-  <body>
+  <body class="full-height">
 
     <!-- loading-mode is initially visible, but becomes hidden as soon as an
          AppMode is selected by remoting.init. All other divs are initially
@@ -71,7 +71,9 @@ found in the LICENSE file.
 
     <iframe id="wcs-sandbox" src="wcs_sandbox.html" hidden></iframe>
 
-    <header data-ui-mode="home" hidden>
+    <div class="inset" data-ui-mode="home" hidden>
+
+    <header>
       <div>
         <img src="chromoting48.webp">
         <h1 class="icon-label" i18n-content="PRODUCT_NAME"></h1>
@@ -102,7 +104,7 @@ found in the LICENSE file.
       </div>
     </div>
 
-    <div data-ui-mode="home" hidden>
+    <div>
 
       <section>
         <h2 i18n-content="MODE_IT2ME"></h2>
@@ -247,7 +249,8 @@ found in the LICENSE file.
           </div>
         </div> <!-- me2me-content -->
       </section> <!-- host-list-div -->
-    </div> <!-- home -->
+    </div>
+    </div> <!-- inset -->
 
     <div id="auth-dialog" hidden>
       <div class="dialog-screen"></div>
@@ -733,7 +736,10 @@ found in the LICENSE file.
 
     </div> <!-- dialog-container -->
 
-    <div id="session-mode" data-ui-mode="in-session home.client" hidden>
+    <div id="session-mode"
+         data-ui-mode="in-session home.client"
+         class="full-height"
+         hidden>
       <div id="session-toolbar"
            data-ui-mode="in-session"
            class="toolbar-container"
@@ -780,6 +786,11 @@ found in the LICENSE file.
           <div class="arrow-down"></div>
         </div>
       </div> <!-- session-toolbar -->
+      <div class="vertically-centered">
+        <div class="horizontally-centered">
+          <div id="client-plugin-container"></div>
+        </div>
+      </div>
     </div> <!-- session-mode -->
 
     <div id="statistics" dir="ltr" class="selectable" hidden>