Fix a couple of scroll-related issues:

* It was possible to click behind the dialog screen by scrolling it out of the way.
* When connecting to a host, scroll-bars appeared, regardless of the window size.

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

Cr-Commit-Position: refs/heads/master@{#291714}

remoting/webapp/client_session.js

@@ -602,6 +602,7 @@ remoting.ClientSession.prototype.removePlugin = function() {
   } else {
     remoting.toolbar.setClientSession(null);
   }
+  document.body.classList.remove('connected');
 
   // Remove mediasource-rendering class from the container - this will also
   // hide the <video> element.
@@ -989,6 +990,7 @@ remoting.ClientSession.prototype.onConnectionStatusUpdate_ =
     } else {
       remoting.toolbar.setClientSession(this);
     }
+    document.body.classList.add('connected');
 
     this.container_.addEventListener('mousemove',
                                      this.updateMouseCursorPosition_,

remoting/webapp/html/template_main.html

@@ -37,6 +37,10 @@ found in the LICENSE file.
 
     <iframe id="wcs-sandbox" src="wcs_sandbox.html" hidden></iframe>
 
+    <div class="dialog-screen"
+         data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-setup home.token-refresh-failed home.manage-pairings home.host-setup home.host-install"
+         hidden></div>
+
     <div id="scroller">
       <div class="inset home-screen" data-ui-mode="home" hidden>
 
@@ -49,10 +53,6 @@ found in the LICENSE file.
 
       <meta-include src="webapp/html/dialog_auth.html"/>
 
-      <div class="dialog-screen"
-           data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-setup home.token-refresh-failed home.manage-pairings home.host-setup home.host-install"
-           hidden></div>
-
       <div class="dialog-container"
            data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-install home.host-setup home.token-refresh-failed home.manage-pairings"
            hidden>

remoting/webapp/main.css

@@ -619,6 +619,7 @@ button {
   top: 200px;
   left: 0;
   width: 100%;
+  z-index: 2;
 }
 
 .dialog-screen {
@@ -629,6 +630,15 @@ button {
   height: 100%;
   background-color: #fff;
   opacity: 0.75;
+  z-index: 1;
+}
+
+/* For apps v2, don't cover the 1px window border. */
+html.apps-v2 .dialog-screen {
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+  top: 1px;
+  left: 1px;
 }
 
 /* TODO(jamiewalch): crbug.com/252796: Remove these once crbug.com/240772
@@ -747,6 +757,12 @@ html.apps-v2.scrollable {
   width: 100%;
 }
 
+/* Override full-height class until connected, otherwise it takes up 100% of
+ * the window height in addition to the home-screen UI. */
+body:not(.connected) #session-mode {
+  height: auto;
+}
+
 /* video-container needs relative position so that mediasource-video-output can
  * be positioned relative to the parent with position:absolute. */
 #video-container {

remoting/webapp/window_frame.js

@@ -111,12 +111,10 @@ remoting.WindowFrame.prototype.setClientSession = function(clientSession) {
   this.clientSession_ = clientSession;
   var windowTitle = document.head.querySelector('title');
   if (this.clientSession_) {
-    document.body.classList.add('connected');
     this.title_.innerText = clientSession.getHostDisplayName();
     windowTitle.innerText = clientSession.getHostDisplayName() + ' - ' +
         chrome.i18n.getMessage(/*i18n-content*/'PRODUCT_NAME');
   } else {
-    document.body.classList.remove('connected');
     this.title_.innerHTML = ' ';
     windowTitle.innerText =
         chrome.i18n.getMessage(/*i18n-content*/'PRODUCT_NAME');