From 9c9f27b5a454bfe763d07c4847235e531c3df200 Mon Sep 17 00:00:00 2001 From: jamiewalch Date: Mon, 27 Apr 2015 15:43:00 -0700 Subject: 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} --- remoting/app_remoting_webapp_build.gypi | 20 +++++++++++ remoting/app_remoting_webapp_files.gypi | 7 ++++ .../apps/sample_app/loading_splash.png | Bin 0 -> 45741 bytes .../webapp/app_remoting/html/loading_window.css | 40 +++++++++++++++++++++ .../app_remoting/html/template_loading_window.html | 31 ++++++++++++++++ remoting/webapp/app_remoting/js/loading_window.js | 21 ++++++----- remoting/webapp/base/html/message_window.css | 4 --- remoting/webapp/base/js/base.js | 23 +++++++++--- remoting/webapp/base/js/message_window.js | 2 +- remoting/webapp/base/js/message_window_helper.js | 40 ++++++--------------- 10 files changed, 139 insertions(+), 49 deletions(-) create mode 100644 remoting/webapp/app_remoting/apps/sample_app/loading_splash.png create mode 100644 remoting/webapp/app_remoting/html/loading_window.css create mode 100644 remoting/webapp/app_remoting/html/template_loading_window.html 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 Binary files /dev/null and b/remoting/webapp/app_remoting/apps/sample_app/loading_splash.png differ 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 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 @@ + + + + + + + + + + + + + + + + +
+ +

+
+ + + +
+
+ + 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. -- cgit v1.1