Move NAT message inside host dialog.

BUG=115350
TEST=Manual

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

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

3 files changed, 69 insertions, 64 deletions

diff --git a/remoting/webapp/host_screen.js b/remoting/webapp/host_screen.js
index 01571ac..d602dbc 100644
--- a/remoting/webapp/host_screen.js
+++ b/remoting/webapp/host_screen.js
@@ -267,6 +267,9 @@ function updateAccessCodeTimeoutElement_() {
  * @return {void} Nothing.
  */
 function onNatTraversalPolicyChanged_(enabled) {
-  var container = document.getElementById('nat-box-container');
-  container.hidden = enabled;
+  if (enabled) {
+    addClass(document.getElementById('nat-box'), 'traversal-enabled');
+  } else {
+    removeClass(document.getElementById('nat-box'), 'traversal-enabled');
+  }
 }
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index 6212769..c276b8e 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -4812,8 +4812,8 @@ td {
   margin-__MSG_@@bidi_end_edge__: 0.5ex;
 }
 
-#host-dialog-and-nat {
-  width: 504px;
+#host-dialog {
+  width: 500px;
 }
 
 #host-plugin-container {
@@ -4830,8 +4830,15 @@ td {
   margin-__MSG_@@bidi_start_edge__: 40px;
 }
 
-#nat-box-container {
-  margin-top: 40px;
+#nat-box {
+  margin-top: 30px;
+}
+
+/* The NAT traversal state is independent of the app mode, and both need
+ * to be combined to determine the visibility of the butter bar. We use
+ * a style for the former and the 'hidden' property for the latter. */
+#nat-box.traversal-enabled {
+  display: none;
 }
 
 #session-mode {
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index c709efb..74fb645 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -197,75 +197,70 @@ found in the LICENSE file.
         </form>
       </div>
 
-      <div id="host-dialog-and-nat" data-ui-mode="home.host" hidden>
-
-        <div id="host-dialog" class="kd-modaldialog visible">
-
-          <div data-ui-mode="home.host.waiting-for-code" class="message"
-               i18n-content="MESSAGE_GENERATING">
-          </div> <!-- host.waiting-for-code -->
-
-          <div data-ui-mode="home.host.waiting-for-connection">
-            <div i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div>
-            <div id="access-code-display" dir="ltr" class="selectable"></div>
-            <div id="access-code-countdown-container">
-              <div id="access-code-countdown" class="expiring" hidden>
-                <span id="seconds-remaining"
-                      i18n-content="ACCESS_CODE_TIMER"></span>
-              </div>
+      <div id="host-dialog" class="kd-modaldialog visible">
+
+        <div data-ui-mode="home.host.waiting-for-code" class="message"
+             i18n-content="MESSAGE_GENERATING">
+        </div> <!-- host.waiting-for-code -->
+
+        <div data-ui-mode="home.host.waiting-for-connection">
+          <div i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div>
+          <div id="access-code-display" dir="ltr" class="selectable"></div>
+          <div id="access-code-countdown-container">
+            <div id="access-code-countdown" class="expiring" hidden>
+              <span id="seconds-remaining"
+                    i18n-content="ACCESS_CODE_TIMER"></span>
             </div>
-            <div i18n-content="INSTRUCTIONS_SHARE_BELOW"></div>
-          </div> <!-- host.waiting-for-connection -->
-
-          <div data-ui-mode="home.host.shared">
-            <div id="host-shared-message" class="message"
-                 i18n-content="MESSAGE_SHARED"></div>
-            <div class="centered-button">
-              <button id="stop-sharing-button"
-                      type="button"
-                      class="kd-button"
-                      i18n-content="STOP_SHARING_BUTTON">
-              </button>
-            </div>
-          </div> <!-- host.shared -->
-
-          <div data-ui-mode="home.host.share-failed" class="message">
-            <span id="host-plugin-error" class="error-state"></span>
-          </div> <!-- host.share-failed -->
-
-          <div data-ui-mode="home.host.share-finished" class="message"
-               i18n-content="MESSAGE_SESSION_FINISHED">
-          </div> <!-- host.share-finished -->
-
-          <div class="centered-button"
-               data-ui-mode="home.host.share-failed home.host.share-finished">
-            <button id="host-finished-button"
+          </div>
+          <div i18n-content="INSTRUCTIONS_SHARE_BELOW"></div>
+        </div> <!-- host.waiting-for-connection -->
+
+        <div data-ui-mode="home.host.shared">
+          <div id="host-shared-message" class="message"
+               i18n-content="MESSAGE_SHARED"></div>
+          <div class="centered-button">
+            <button id="stop-sharing-button"
                     type="button"
                     class="kd-button"
-                    autofocus="autofocus"
-                    i18n-content="OK">
+                    i18n-content="STOP_SHARING_BUTTON">
             </button>
           </div>
+        </div> <!-- host.shared -->
 
-          <div data-ui-mode="home.host.waiting-for-connection home.host.waiting-for-code"
-               class="waiting-container">
-            <span class="waiting" i18n-content="FOOTER_WAITING"></span>
-            <button id="cancel-share-button"
-                    class="kd-button"
-                    i18n-content="CANCEL">
-            </button>
-          </div>
+        <div data-ui-mode="home.host.share-failed" class="message">
+          <span id="host-plugin-error" class="error-state"></span>
+        </div> <!-- host.share-failed -->
 
-          <div id="host-plugin-container"></div>
+        <div data-ui-mode="home.host.share-finished" class="message"
+             i18n-content="MESSAGE_SESSION_FINISHED">
+        </div> <!-- host.share-finished -->
 
+        <div class="centered-button"
+             data-ui-mode="home.host.share-failed home.host.share-finished">
+          <button id="host-finished-button"
+                  type="button"
+                  class="kd-button"
+                  autofocus="autofocus"
+                  i18n-content="OK">
+          </button>
         </div>
 
-        <div id="nat-box-container"
+        <div id="nat-box"
              class="information-box"
-             data-ui-mode="home.host.waiting-for-code home.host.waiting-for-connection"
-             i18n-content="WARNING_NAT_DISABLED"
-             hidden>
-        </div> <!-- nat-box-container -->
+             data-ui-mode="home.host.waiting-for-connection"
+             i18n-content="WARNING_NAT_DISABLED">
+        </div> <!-- nat-box -->
+
+        <div data-ui-mode="home.host.waiting-for-connection home.host.waiting-for-code"
+             class="waiting-container">
+          <span class="waiting" i18n-content="FOOTER_WAITING"></span>
+          <button id="cancel-share-button"
+                  class="kd-button"
+                  i18n-content="CANCEL">
+          </button>
+        </div>
+
+        <div id="host-plugin-container"></div>
 
       </div> <!-- host dialog -->