Skip to content

GitLab

T
tangled
Commit 9c9f27b5 authored by jamiewalch's avatar jamiewalch Committed by Commit bot
Browse files
Options

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}
parent 63b2a20d
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 49 deletions
remoting/app_remoting_webapp_build.gypi
View file @ 9c9f27b5
...@@ -37,8 +37,10 @@ ...@@ -37,8 +37,10 @@
'>(ar_app_path)/icon16.png', '>(ar_app_path)/icon16.png',
'>(ar_app_path)/icon48.png', '>(ar_app_path)/icon48.png',
'>(ar_app_path)/icon128.png', '>(ar_app_path)/icon128.png',
'>(ar_app_path)/loading_splash.png',
], ],
'ar_generated_html_files': [ 'ar_generated_html_files': [
'<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/loading_window.html',
'<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/main.html', '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/main.html',
'<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/message_window.html', '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/message_window.html',
'<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/wcs_sandbox.html', '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/wcs_sandbox.html',
...@@ -176,6 +178,24 @@ ...@@ -176,6 +178,24 @@
'<@(remoting_webapp_wcs_sandbox_html_all_js_files)', '<@(remoting_webapp_wcs_sandbox_html_all_js_files)',
], ],
}, },
{
'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', 'action_name': 'Build ">(ar_app_name)" message_window.html',
'inputs': [ 'inputs': [
......
remoting/app_remoting_webapp_files.gypi
View file @ 9c9f27b5
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
'webapp/app_remoting/html/ar_dialog.css', 'webapp/app_remoting/html/ar_dialog.css',
'webapp/app_remoting/html/ar_main.css', 'webapp/app_remoting/html/ar_main.css',
'webapp/app_remoting/html/feedback_consent.css', 'webapp/app_remoting/html/feedback_consent.css',
'webapp/app_remoting/html/loading_window.css',
'webapp/app_remoting/html/context_menu.css', 'webapp/app_remoting/html/context_menu.css',
'resources/drag.webp', 'resources/drag.webp',
'<@(remoting_webapp_resource_files)', '<@(remoting_webapp_resource_files)',
...@@ -35,6 +36,11 @@ ...@@ -35,6 +36,11 @@
'webapp/crd/js/xhr.js', '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. # Variables for main.html.
# These template files are used to construct the webapp html files. # These template files are used to construct the webapp html files.
'ar_main_template': 'ar_main_template':
...@@ -95,6 +101,7 @@ ...@@ -95,6 +101,7 @@
'<(ar_main_template)', '<(ar_main_template)',
'<@(ar_main_template_files)', '<@(ar_main_template_files)',
'<(ar_feedback_consent_template)', '<(ar_feedback_consent_template)',
'<(ar_loading_window_template)',
'<(remoting_webapp_template_message_window)', '<(remoting_webapp_template_message_window)',
'<(remoting_webapp_template_wcs_sandbox)', '<(remoting_webapp_template_wcs_sandbox)',
'<@(ar_all_js_files)', '<@(ar_all_js_files)',
......
remoting/webapp/app_remoting/html/loading_window.css 0 → 100644
View file @ 9c9f27b5
/* 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;
}
remoting/webapp/app_remoting/html/template_loading_window.html 0 → 100644
View file @ 9c9f27b5
<!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>
remoting/webapp/app_remoting/js/loading_window.js
View file @ 9c9f27b5
...@@ -42,19 +42,22 @@ remoting.LoadingWindow.show = function() { ...@@ -42,19 +42,22 @@ remoting.LoadingWindow.show = function() {
// Timeout is currently 15min to handle when we need to spin up a new VM. // Timeout is currently 15min to handle when we need to spin up a new VM.
var kConnectionTimeout = 15 * 60 * 1000; 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 = ''; var transparencyWarning = '';
if (remoting.platformIsMac()) { if (remoting.platformIsMac()) {
transparencyWarning = options.infoBox =
chrome.i18n.getMessage(/*i18n-content*/'NO_TRANSPARENCY_WARNING'); chrome.i18n.getMessage(/*i18n-content*/'NO_TRANSPARENCY_WARNING');
} }
remoting.loadingWindow_ = remoting.MessageWindow.showTimedMessageWindow( remoting.loadingWindow_ = new remoting.MessageWindow(options);
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/webapp/base/html/message_window.css
View file @ 9c9f27b5
...@@ -11,7 +11,3 @@ body { ...@@ -11,7 +11,3 @@ body {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.insetList {
list-style-position: inside;
}
\ No newline at end of file
remoting/webapp/base/js/base.js
View file @ 9c9f27b5
...@@ -783,14 +783,27 @@ base.timestamp = function() { ...@@ -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 appWindow = chrome.app.window.current();
var outerBounds = appWindow.outerBounds; var outerBounds = appWindow.outerBounds;
var borderX = outerBounds.width - appWindow.innerBounds.width;
var borderY = outerBounds.height - appWindow.innerBounds.height; 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), // Sometimes, resizing the window causes its position to be reset to (0, 0),
// so restore it explicitly. // so restore it explicitly, even if it doesn't need to be centered.
appWindow.moveTo(outerBounds.left, outerBounds.top); appWindow.moveTo(left, top);
}; };
remoting/webapp/base/js/message_window.js
View file @ 9c9f27b5
...@@ -144,7 +144,7 @@ MessageWindowImpl.prototype.onMessage_ = function(event) { ...@@ -144,7 +144,7 @@ MessageWindowImpl.prototype.onMessage_ = function(event) {
var messageDiv = document.getElementById('message'); var messageDiv = document.getElementById('message');
messageDiv.innerText = message; messageDiv.innerText = message;
base.resizeWindowToContent(); base.resizeWindowToContent(true);
break; break;
default: default:
......
remoting/webapp/base/js/message_window_helper.js
View file @ 9c9f27b5
...@@ -32,6 +32,12 @@ remoting.MessageWindowOptions = function() { ...@@ -32,6 +32,12 @@ remoting.MessageWindowOptions = function() {
/** @type {?function():void} */ /** @type {?function():void} */
this.onTimeout = function() {}; this.onTimeout = function() {};
/** @type {string} */
this.htmlFile = '';
/** @type {string} */
this.frame = '';
}; };
/** /**
...@@ -93,7 +99,8 @@ remoting.MessageWindow = function(options) { ...@@ -93,7 +99,8 @@ remoting.MessageWindow = function(options) {
width: 400, width: 400,
height: 100 height: 100
}, },
resizable: false resizable: false,
frame: options.frame || 'chrome'
}; };
/** @type {remoting.MessageWindow} */ /** @type {remoting.MessageWindow} */
...@@ -108,7 +115,8 @@ remoting.MessageWindow = function(options) { ...@@ -108,7 +115,8 @@ remoting.MessageWindow = function(options) {
appWindow.contentWindow.addEventListener('load', onLoad, false); 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) { if (duration != 0) {
this.timer_ = window.setTimeout(this.onTimeoutHandler_.bind(this), this.timer_ = window.setTimeout(this.onTimeoutHandler_.bind(this),
...@@ -257,34 +265,6 @@ remoting.MessageWindow.showErrorMessage = function(title, message) { ...@@ -257,34 +265,6 @@ remoting.MessageWindow.showErrorMessage = function(title, message) {
return new remoting.MessageWindow(options); return new remoting.MessageWindow(options);
}; };
/**
* 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. * Cancel the current connection and close all app windows.
* *
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment