Make loading dialog prettier.

Since the width of this dialog is no longer fixed, this CL also updates base.resizeWindowToContent to set the width as well as the height, and adds support for centering.

BUG=b/19796166

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

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

10 files changed, 139 insertions, 49 deletions

diff --git a/remoting/app_remoting_webapp_build.gypi b/remoting/app_remoting_webapp_build.gypi
index aae7f99..9f7572cb 100644
--- a/remoting/app_remoting_webapp_build.gypi
+++ b/remoting/app_remoting_webapp_build.gypi
@@ -37,8 +37,10 @@
         '>(ar_app_path)/icon16.png',
         '>(ar_app_path)/icon48.png',
         '>(ar_app_path)/icon128.png',
+        '>(ar_app_path)/loading_splash.png',
       ],
       'ar_generated_html_files': [
+        '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/loading_window.html',
         '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/main.html',
         '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/message_window.html',
         '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/wcs_sandbox.html',
@@ -177,6 +179,24 @@
         ],
       },
       {
+        'action_name': 'Build ">(ar_app_name)" loading_window.html',
+        'inputs': [
+          '<(DEPTH)/remoting/webapp/build-html.py',
+          '<(ar_loading_window_template)',
+        ],
+        'outputs': [
+          '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/loading_window.html',
+        ],
+        'action': [
+          'python', '<(DEPTH)/remoting/webapp/build-html.py',
+          '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/loading_window.html',
+          '<(ar_loading_window_template)',
+          # The loading window is just a reskin of the message window--all
+          # JS code is shared.
+          '--js', '<@(remoting_webapp_message_window_html_all_js_files)',
+        ],
+      },
+      {
         'action_name': 'Build ">(ar_app_name)" message_window.html',
         'inputs': [
           '<(DEPTH)/remoting/webapp/build-html.py',
diff --git a/remoting/app_remoting_webapp_files.gypi b/remoting/app_remoting_webapp_files.gypi
index 203ffdd..003b2e1 100644
--- a/remoting/app_remoting_webapp_files.gypi
+++ b/remoting/app_remoting_webapp_files.gypi
@@ -8,6 +8,7 @@
       'webapp/app_remoting/html/ar_dialog.css',
       'webapp/app_remoting/html/ar_main.css',
       'webapp/app_remoting/html/feedback_consent.css',
+      'webapp/app_remoting/html/loading_window.css',
       'webapp/app_remoting/html/context_menu.css',
       'resources/drag.webp',
       '<@(remoting_webapp_resource_files)',
@@ -35,6 +36,11 @@
       'webapp/crd/js/xhr.js',
     ],
 
+    # Variables for loading_window.html. Note that the JS files are the same as
+    # for message_window.html, and are not duplicated here.
+    'ar_loading_window_template':
+      '<(DEPTH)/remoting/webapp/app_remoting/html/template_loading_window.html',
+
     # Variables for main.html.
     # These template files are used to construct the webapp html files.
     'ar_main_template':
@@ -95,6 +101,7 @@
       '<(ar_main_template)',
       '<@(ar_main_template_files)',
       '<(ar_feedback_consent_template)',
+      '<(ar_loading_window_template)',
       '<(remoting_webapp_template_message_window)',
       '<(remoting_webapp_template_wcs_sandbox)',
       '<@(ar_all_js_files)',
diff --git a/remoting/webapp/app_remoting/apps/sample_app/loading_splash.png b/remoting/webapp/app_remoting/apps/sample_app/loading_splash.png
new file mode 100644
index 0000000..047e486
--- /dev/null
+++ b/remoting/webapp/app_remoting/apps/sample_app/loading_splash.png
diff --git a/remoting/webapp/app_remoting/html/loading_window.css b/remoting/webapp/app_remoting/html/loading_window.css
new file mode 100644
index 0000000..9d3ac43
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/loading_window.css
@@ -0,0 +1,40 @@
+/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+body {
+  /*
+   * Ensure that the scrollWidth of the <html> element takes into account
+   * content outside the window borders. Without this, resizeWindowToContent
+   * cannot set the required window width.
+   */
+  overflow: visible;
+
+  /* Eliminate the gap between the background image and the message. */
+  line-height: 0;
+}
+
+.message-container {
+  padding: 20px;
+  line-height: 16px;
+}
+
+body .message-container {
+  padding: 12px;
+}
+
+body .button-row {
+  margin-top: 0;
+}
+
+#splash-image {
+  -webkit-app-region: drag;
+}
+
+#infobox {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  position: fixed;
+  top: 0;
+}
diff --git a/remoting/webapp/app_remoting/html/template_loading_window.html b/remoting/webapp/app_remoting/html/template_loading_window.html
new file mode 100644
index 0000000..b69432e
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/template_loading_window.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<!--
+Copyright 2014 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="open_sans.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="loading_window.css">
+
+    <meta-include type="javascript"/>
+
+    <title></title>
+  </head>
+  <body>
+    <img src="loading_splash.png" id="splash-image">
+    <div class="message-container">
+      <div id="title" hidden></div>
+      <p id="infobox" class="information-box"></p>
+      <div class="button-row">
+        <span id="message"></span>
+        <button id="button-primary" autofocus="autofocus"></button>
+        <button id="button-secondary"></button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/remoting/webapp/app_remoting/js/loading_window.js b/remoting/webapp/app_remoting/js/loading_window.js
index b14f19d..e70c35e 100644
--- a/remoting/webapp/app_remoting/js/loading_window.js
+++ b/remoting/webapp/app_remoting/js/loading_window.js
@@ -42,19 +42,22 @@ remoting.LoadingWindow.show = function() {
   // Timeout is currently 15min to handle when we need to spin up a new VM.
   var kConnectionTimeout = 15 * 60 * 1000;
 
+  var options = /** @type {remoting.MessageWindowOptions} */ ({
+    title: remoting.app.getApplicationName(),
+    message: chrome.i18n.getMessage(/*i18n-content*/'FOOTER_CONNECTING'),
+    buttonLabel: chrome.i18n.getMessage(/*i18n-content*/'CANCEL'),
+    onResult: remoting.MessageWindow.quitApp,
+    duration: kConnectionTimeout,
+    onTimeout: remoting.LoadingWindow.onTimeout_,
+    htmlFile: 'loading_window.html',
+    frame: 'none'
+  });
   var transparencyWarning = '';
   if (remoting.platformIsMac()) {
-    transparencyWarning =
+    options.infoBox =
         chrome.i18n.getMessage(/*i18n-content*/'NO_TRANSPARENCY_WARNING');
   }
-  remoting.loadingWindow_ = remoting.MessageWindow.showTimedMessageWindow(
-      remoting.app.getApplicationName(),
-      chrome.i18n.getMessage(/*i18n-content*/'FOOTER_CONNECTING'),
-      transparencyWarning,
-      chrome.i18n.getMessage(/*i18n-content*/'CANCEL'),
-      remoting.MessageWindow.quitApp,
-      kConnectionTimeout,
-      remoting.LoadingWindow.onTimeout_);
+  remoting.loadingWindow_ = new remoting.MessageWindow(options);
 };
 
 /**
diff --git a/remoting/webapp/base/html/message_window.css b/remoting/webapp/base/html/message_window.css
index a053df3..2c16db1 100644
--- a/remoting/webapp/base/html/message_window.css
+++ b/remoting/webapp/base/html/message_window.css
@@ -11,7 +11,3 @@ body {
   margin-top: 10px;
   margin-bottom: 10px;
 }
-
-.insetList {
-  list-style-position: inside;
-}
\ No newline at end of file
diff --git a/remoting/webapp/base/js/base.js b/remoting/webapp/base/js/base.js
index 3be8c8f..48e2a84 100644
--- a/remoting/webapp/base/js/base.js
+++ b/remoting/webapp/base/js/base.js
@@ -783,14 +783,27 @@ base.timestamp = function() {
 };
 
 /**
- * Size the current window to fit its content vertically.
+ * Size the current window to fit its content.
+ * @param {boolean=} opt_centerWindow If true, position the window in the
+ *     center of the screen after resizing it.
  */
-base.resizeWindowToContent = function() {
+base.resizeWindowToContent = function(opt_centerWindow) {
   var appWindow = chrome.app.window.current();
   var outerBounds = appWindow.outerBounds;
+  var borderX = outerBounds.width - appWindow.innerBounds.width;
   var borderY = outerBounds.height - appWindow.innerBounds.height;
-  appWindow.resizeTo(outerBounds.width, document.body.clientHeight + borderY);
+  var newWidth = document.documentElement.scrollWidth + borderX;
+  var newHeight = document.documentElement.scrollHeight + borderY;
+  appWindow.resizeTo(newWidth, newHeight);
+  var left = outerBounds.left;
+  var top = outerBounds.top;
+  if (opt_centerWindow) {
+    var screenWidth = screen.availWidth;
+    var screenHeight = screen.availHeight;
+    left = (screenWidth - newWidth) / 2;
+    top = (screenHeight - newHeight) / 2;
+  }
   // Sometimes, resizing the window causes its position to be reset to (0, 0),
-  // so restore it explicitly.
-  appWindow.moveTo(outerBounds.left, outerBounds.top);
+  // so restore it explicitly, even if it doesn't need to be centered.
+  appWindow.moveTo(left, top);
 };
diff --git a/remoting/webapp/base/js/message_window.js b/remoting/webapp/base/js/message_window.js
index 452b95e..f110e6f 100644
--- a/remoting/webapp/base/js/message_window.js
+++ b/remoting/webapp/base/js/message_window.js
@@ -144,7 +144,7 @@ MessageWindowImpl.prototype.onMessage_ = function(event) {
       var messageDiv = document.getElementById('message');
       messageDiv.innerText = message;
 
-      base.resizeWindowToContent();
+      base.resizeWindowToContent(true);
       break;
 
     default:
diff --git a/remoting/webapp/base/js/message_window_helper.js b/remoting/webapp/base/js/message_window_helper.js
index a4d564d..90267ad 100644
--- a/remoting/webapp/base/js/message_window_helper.js
+++ b/remoting/webapp/base/js/message_window_helper.js
@@ -32,6 +32,12 @@ remoting.MessageWindowOptions = function() {
 
   /** @type {?function():void} */
   this.onTimeout = function() {};
+
+  /** @type {string} */
+  this.htmlFile = '';
+
+  /** @type {string} */
+  this.frame = '';
 };
 
 /**
@@ -93,7 +99,8 @@ remoting.MessageWindow = function(options) {
       width: 400,
       height: 100
     },
-    resizable: false
+    resizable: false,
+    frame: options.frame || 'chrome'
   };
 
   /** @type {remoting.MessageWindow} */
@@ -108,7 +115,8 @@ remoting.MessageWindow = function(options) {
     appWindow.contentWindow.addEventListener('load', onLoad, false);
   };
 
-  chrome.app.window.create('message_window.html', windowAttributes, onCreate);
+  var htmlFile = options.htmlFile || 'message_window.html';
+  chrome.app.window.create(htmlFile, windowAttributes, onCreate);
 
   if (duration != 0) {
     this.timer_ = window.setTimeout(this.onTimeoutHandler_.bind(this),
@@ -258,34 +266,6 @@ remoting.MessageWindow.showErrorMessage = function(title, message) {
 };
 
 /**
- * Static method to create and show a timed message box.
- *
- * @param {string} title The title of the message box.
- * @param {string} message The message.
- * @param {string} infobox Additional information to be displayed in an infobox,
- *     or the empty string if there is no additional information.
- * @param {string} buttonLabel The text for the primary button.
- * @param {function(number):void} onResult The callback to invoke when the
- *     user closes the message window.
- * @param {number} duration Time for wait before calling onTime
- * @param {?function():void} onTimeout Callback function.
- * @return {remoting.MessageWindow}
- */
-remoting.MessageWindow.showTimedMessageWindow = function(
-    title, message, infobox, buttonLabel, onResult, duration, onTimeout) {
-  var options = /** @type {remoting.MessageWindowOptions} */ ({
-    title: title,
-    message: message,
-    infobox: infobox,
-    buttonLabel: buttonLabel,
-    onResult: onResult,
-    duration: duration,
-    onTimeout: onTimeout
-  });
-  return new remoting.MessageWindow(options);
-};
-
-/**
  * Cancel the current connection and close all app windows.
  *
  * @param {number} result The dialog result.