Fix scroll-bar behaviour.

For apps v2, the default, "no scroll-bar" behaviour is overridden until a connection to the host is made.

For both apps v1 and apps v2, the in-session behaviour is corrected to work-around crbug.com/240772

BUG=252796,240772

Review URL: https://chromiumcodereview.appspot.com/22006002

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

5 files changed, 48 insertions, 14 deletions

diff --git a/remoting/webapp/client_screen.js b/remoting/webapp/client_screen.js
index 3698186..e3fe30f 100644
--- a/remoting/webapp/client_screen.js
+++ b/remoting/webapp/client_screen.js
@@ -334,7 +334,6 @@ remoting.connectMe2MeHostVersionAcknowledged_ = function(host) {
 remoting.onConnected = function(clientSession) {
   remoting.clientSession = clientSession;
   remoting.clientSession.setOnStateChange(onClientStateChange_);
-  remoting.clientSession.setScrollbarVisibility();
   setConnectionInterruptedButtonsText_();
   var connectedTo = document.getElementById('connected-to');
   connectedTo.innerText = clientSession.hostDisplayName;
diff --git a/remoting/webapp/client_session.js b/remoting/webapp/client_session.js
index 51b72a7..2fa4b49 100644
--- a/remoting/webapp/client_session.js
+++ b/remoting/webapp/client_session.js
@@ -154,18 +154,40 @@ remoting.ClientSession.prototype.setOnStateChange = function(onStateChange) {
 };
 
 /**
- * Called when the connection has been established to set the initial scroll-
- * bar visibility correctly.
+ * Called when the window or desktop size or the scaling settings change,
+ * to set the scroll-bar visibility.
  *
  * TODO(jamiewalch): crbug.com/252796: Remove this once crbug.com/240772 is
  * fixed.
  */
-remoting.ClientSession.prototype.setScrollbarVisibility = function() {
+remoting.ClientSession.prototype.updateScrollbarVisibility = function() {
+  var needsVerticalScroll = false;
+  var needsHorizontalScroll = false;
+  if (!this.shrinkToFit_) {
+    // Determine whether or not horizontal or vertical scrollbars are
+    // required, taking into account their width.
+    needsVerticalScroll = window.innerHeight < this.plugin.desktopHeight;
+    needsHorizontalScroll = window.innerWidth < this.plugin.desktopWidth;
+    var kScrollBarWidth = 16;
+    if (needsHorizontalScroll && !needsVerticalScroll) {
+      needsVerticalScroll =
+          window.innerHeight - kScrollBarWidth < this.plugin.desktopHeight;
+    } else if (!needsHorizontalScroll && needsVerticalScroll) {
+      needsHorizontalScroll =
+          window.innerWidth - kScrollBarWidth < this.plugin.desktopWidth;
+    }
+  }
+
   var htmlNode = /** @type {HTMLElement} */ (document.body.parentNode);
-  if (this.shrinkToFit_) {
-    htmlNode.classList.add('no-scroll');
+  if (needsHorizontalScroll) {
+    htmlNode.classList.remove('no-horizontal-scroll');
   } else {
-    htmlNode.classList.remove('no-scroll');
+    htmlNode.classList.add('no-horizontal-scroll');
+  }
+  if (needsVerticalScroll) {
+    htmlNode.classList.remove('no-vertical-scroll');
+  } else {
+    htmlNode.classList.add('no-vertical-scroll');
   }
 };
 
@@ -661,7 +683,7 @@ remoting.ClientSession.prototype.setScreenMode_ =
 
   this.shrinkToFit_ = shrinkToFit;
   this.resizeToClient_ = resizeToClient;
-  this.setScrollbarVisibility();
+  this.updateScrollbarVisibility();
 
   if (this.hostId != '') {
     var options = {};
@@ -930,6 +952,8 @@ remoting.ClientSession.prototype.onResize = function() {
   // If bump-scrolling is enabled, adjust the plugin margins to fully utilize
   // the new window area.
   this.scroll_(0, 0);
+
+  this.updateScrollbarVisibility();
 };
 
 /**
@@ -970,6 +994,7 @@ remoting.ClientSession.prototype.onDesktopSizeChanged_ = function() {
               this.plugin.desktopXDpi + 'x' +
               this.plugin.desktopYDpi + ' DPI');
   this.updateDimensions();
+  this.updateScrollbarVisibility();
 };
 
 /**
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index e515809..43028fe 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -28,7 +28,7 @@ body {
 }
 
 /*
-* The "app-v2" class is added to the <body> node by remoting.init if it's
+* The "app-v2" class is added to the <html> node by remoting.init if it's
 * running as a V2 app.
 */
 body.apps-v2 .apps-v1-only {
@@ -612,12 +612,21 @@ button {
   opacity: 0.75;
 }
 
-/* TODO(jamiewalch): crbug.com/252796: Remove this once crbug.com/240772
+/* TODO(jamiewalch): crbug.com/252796: Remove these once crbug.com/240772
  * is fixed. */
-.no-scroll {
-  overflow: hidden;
+.no-horizontal-scroll {
+  overflow-x: hidden !important;
+}
+
+.no-vertical-scroll {
+  overflow-y: hidden !important;
 }
 
+html.apps-v2.scrollable {
+  overflow: scroll;
+}
+
+
 /* TODO(jamiewalch): Reinstate this if we're able to get translations for
  *     "Why is this safe?" that don't overflow in any language.
 #host-setup-dialog {
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index a67458a..15a0a7b 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>
+<html class="scrollable">
   <head>
     <meta charset="utf-8">
     <link rel="icon" type="image/png" href="chromoting16.webp">
diff --git a/remoting/webapp/remoting.js b/remoting/webapp/remoting.js
index 3805f6f..5be27ef 100644
--- a/remoting/webapp/remoting.js
+++ b/remoting/webapp/remoting.js
@@ -45,7 +45,8 @@ remoting.init = function() {
   var manifest = chrome.runtime.getManifest();
   if (manifest && manifest.app && manifest.app.background) {
     remoting.isAppsV2 = true;
-    document.body.classList.add('apps-v2');
+    var htmlNode = /** @type {HTMLElement} */ (document.body.parentNode);
+    htmlNode.classList.add('apps-v2');
   }
 
   if (!remoting.isAppsV2) {