diff options
| -rw-r--r-- | remoting/remoting.gyp | 3 | ||||
| -rw-r--r-- | remoting/resources/tick.png | bin | 0 -> 328 bytes | |||
| -rw-r--r-- | remoting/webapp/_locales/en/messages.json | 20 | ||||
| -rw-r--r-- | remoting/webapp/client_session.js | 56 | ||||
| -rw-r--r-- | remoting/webapp/event_handlers.js | 1 | ||||
| -rw-r--r-- | remoting/webapp/jscompiler_hacks.js | 19 | ||||
| -rw-r--r-- | remoting/webapp/main.css | 9 | ||||
| -rw-r--r-- | remoting/webapp/main.html | 17 | ||||
| -rw-r--r-- | remoting/webapp/menu_button.css | 66 | ||||
| -rw-r--r-- | remoting/webapp/menu_button.js | 91 | ||||
| -rw-r--r-- | remoting/webapp/remoting.js | 2 | ||||
| -rw-r--r-- | remoting/webapp/toolbar.css | 1 |
12 files changed, 261 insertions, 24 deletions
diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp index 897d1f8..9b0387e 100644 --- a/remoting/remoting.gyp +++ b/remoting/remoting.gyp @@ -145,6 +145,8 @@ 'webapp/main.css', 'webapp/main.html', 'webapp/manifest.json', + 'webapp/menu_button.css', + 'webapp/menu_button.js', 'webapp/oauth2.js', 'webapp/oauth2_callback.html', 'webapp/plugin_settings.js', @@ -164,6 +166,7 @@ 'resources/chromoting128.png', 'resources/disclosure_arrow_down.png', 'resources/disclosure_arrow_right.png', + 'resources/tick.png', ], }, diff --git a/remoting/resources/tick.png b/remoting/resources/tick.png Binary files differnew file mode 100644 index 0000000..d049b55 --- /dev/null +++ b/remoting/resources/tick.png diff --git a/remoting/webapp/_locales/en/messages.json b/remoting/webapp/_locales/en/messages.json index 4ba42e6..b309742 100644 --- a/remoting/webapp/_locales/en/messages.json +++ b/remoting/webapp/_locales/en/messages.json @@ -182,6 +182,10 @@ "message": "waiting for connection\u2026", "description": "Footer text displayed at the host after an access code has been generated, but before a client connects." }, + "FULL_SCREEN": { + "message": "Full screen", + "description": "Menu option for toggle full-screen mode. Equivalent to using the Wrench menu to do the same thing." + }, "HELP": { "message": "Help", "description": "Help link, displayed in the top-left (assuming ltr layout) corner of the main screen. Clicking this takes the user to our FAQ." @@ -286,6 +290,10 @@ } } }, + "ORIGINAL_SIZE": { + "message": "Original size", + "description": "Menu option for disabling shrink-to-fit. When clicked, the remote desktop will be displayed at 1:1 scale." + }, "OUTGOING_CONNECTIONS": { "message": "From this computer", "description": "In the connection history dialog, clicking this button shows only recent connections from this computer." @@ -320,6 +328,14 @@ "message": "Retry", "description": "Label for button to retry connecting to a Me2Me host, after failing to connect to that host. This button appears on the 'session-finished' page." }, + "SCREEN_OPTIONS": { + "message": "Screen options", + "description": "Tool-bar button used to access the Full-screen and shrink-to-fit features ('screen' in this context refers to the fact that the options are related to how the remote screen is displayed)." + }, + "SHRINK_TO_FIT": { + "message": "Shrink to fit", + "description": "Menu option for enabling shrink-to-fit. When clicked, the remote desktop will be scaled down so that it fits in the browser window." + }, "SIGN_OUT_BUTTON": { "message": "Sign out", "description": "Sign out button, visible if the user has authenticated. Clicking this clears authentication credentials and returns the web-app to the initial 'unauthenticated' state." @@ -346,10 +362,6 @@ "message": "Disable remote connections to this computer", "description": "The tool-tip shown when the user hovers over the 'delete host' button. Clicking this button removes the host from the list and disables connections to it." }, - "TOOLTIP_SCALING": { - "message": "Scale to fit", - "description": "The tool-tip shown when the user hovers over the scale to fit button. Clicking this button toggles between scaling down the remote desktop to fit it inside the Chromium browser window and displaying it at 1:1 scale." - }, "TOOLTIP_RENAME": { "message": "Edit computer name", "description": "The tool-tip shown when the user hovers over the 'rename host' button. Clicking this button allows the host name to be edited in-place." diff --git a/remoting/webapp/client_session.js b/remoting/webapp/client_session.js index 4b5c45a..ae73bc8 100644 --- a/remoting/webapp/client_session.js +++ b/remoting/webapp/client_session.js @@ -64,6 +64,26 @@ remoting.ClientSession = function(hostJid, hostPublicKey, sharedSecret, this.callPluginLostFocus_ = function() { that.pluginLostFocus_(); }; /** @type {function():void} @private */ this.callPluginGotFocus_ = function() { that.pluginGotFocus_(); }; + /** @type {function():void} @private */ + this.callEnableShrink_ = function() { that.setScaleToFit(true); }; + /** @type {function():void} @private */ + this.callDisableShrink_ = function() { that.setScaleToFit(false); }; + /** @type {function():void} @private */ + this.callToggleFullScreen_ = function() { that.toggleFullScreen_(); }; + /** @type {remoting.MenuButton} @private */ + this.screenOptionsMenu_ = new remoting.MenuButton( + document.getElementById('screen-options-menu'), + function() { that.onShowOptionsMenu_(); } + ); + /** @type {HTMLElement} @private */ + this.shrinkToFit_ = document.getElementById('enable-shrink-to-fit'); + /** @type {HTMLElement} @private */ + this.originalSize_ = document.getElementById('disable-shrink-to-fit'); + /** @type {HTMLElement} @private */ + this.fullScreen_ = document.getElementById('toggle-full-screen'); + this.shrinkToFit_.addEventListener('click', this.callEnableShrink_, false); + this.originalSize_.addEventListener('click', this.callDisableShrink_, false); + this.fullScreen_.addEventListener('click', this.callToggleFullScreen_, false); }; // Note that the positive values in both of these enums are copied directly @@ -299,6 +319,11 @@ remoting.ClientSession.prototype.removePlugin = function() { this.plugin.cleanup(); this.plugin = null; } + this.shrinkToFit_.removeEventListener('click', this.callEnableShrink_, false); + this.originalSize_.removeEventListener('click', this.callDisableShrink_, + false); + this.fullScreen_.removeEventListener('click', this.callToggleFullScreen_, + false); }; /** @@ -341,12 +366,6 @@ remoting.ClientSession.prototype.disconnect = function() { remoting.ClientSession.prototype.setScaleToFit = function(scaleToFit) { this.scaleToFit = scaleToFit; this.updateDimensions(); - var button = document.getElementById('toggle-scaling'); - if (scaleToFit) { - button.classList.add('toggle-button-active'); - } else { - button.classList.remove('toggle-button-active'); - } } /** @@ -538,3 +557,28 @@ remoting.ClientSession.prototype.getPerfStats = function() { remoting.ClientSession.prototype.logStatistics = function(stats) { this.logToServer.logStatistics(stats, this.mode); }; + +/** + * Toggles between full-screen and windowed mode. + * @return {void} Nothing. + * @private + */ +remoting.ClientSession.prototype.toggleFullScreen_ = function() { + if (document.webkitIsFullScreen) { + document.webkitCancelFullScreen(); + } else { + document.body.webkitRequestFullScreen(); + } +}; + +/** + * Updates the options menu to reflect the current scale-to-fit and full-screen + * settings. + * @return {void} Nothing. + * @private + */ +remoting.ClientSession.prototype.onShowOptionsMenu_ = function() { + remoting.MenuButton.select(this.shrinkToFit_, this.scaleToFit); + remoting.MenuButton.select(this.originalSize_, !this.scaleToFit); + remoting.MenuButton.select(this.fullScreen_, document.webkitIsFullScreen); +}; diff --git a/remoting/webapp/event_handlers.js b/remoting/webapp/event_handlers.js index d1b1d75..6df8f0f 100644 --- a/remoting/webapp/event_handlers.js +++ b/remoting/webapp/event_handlers.js @@ -48,7 +48,6 @@ function onLoad() { var actions = [ { event: 'click', id: 'clear-oauth', fn: remoting.clearOAuth2 }, { event: 'click', id: 'toolbar-disconnect', fn: remoting.disconnect }, - { event: 'click', id: 'toggle-scaling', fn: remoting.toggleScaleToFit }, { event: 'click', id: 'auth-button', fn: doAuthRedirect }, { event: 'click', id: 'share-button', fn: remoting.tryShare }, { event: 'click', id: 'access-mode-button', fn: goEnterAccessCode }, diff --git a/remoting/webapp/jscompiler_hacks.js b/remoting/webapp/jscompiler_hacks.js new file mode 100644 index 0000000..1d3bc3e --- /dev/null +++ b/remoting/webapp/jscompiler_hacks.js @@ -0,0 +1,19 @@ +// Copyright (c) 2012 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. + +// This file contains various hacks needed to inform JSCompiler of various +// WebKit-specific properties and methods. It is used only with JSCompiler +// to verify the type-correctness of our code. + +/** @type Array.<HTMLElement> */ +Document.prototype.all; + +/** @return {void} Nothing. */ +Document.prototype.webkitCancelFullScreen = function() {}; + +/** @type {boolean} */ +Document.prototype.webkitIsFullScreen; + +/** @return {void} Nothing. */ +Element.prototype.webkitRequestFullScreen = function() {}; diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css index 04ead06..b5db83f 100644 --- a/remoting/webapp/main.css +++ b/remoting/webapp/main.css @@ -198,7 +198,7 @@ Component: Modal Dialog -webkit-transition: all 0.218s; } -button:active, .toggle-button-active { +button:active:not([disabled]) { background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc); color: #333; -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2); @@ -499,13 +499,6 @@ button { display: block; } -#toggle-scaling { - margin: 1px 0 0 0; - padding: 1px; - min-width: 0; - line-height: 0; -} - #top-secondary { margin-top: 10px } diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html index 402795e..9bc8950 100644 --- a/remoting/webapp/main.html +++ b/remoting/webapp/main.html @@ -14,6 +14,7 @@ found in the LICENSE file. <link rel="stylesheet" href="connection_stats.css"> <link rel="stylesheet" href="connection_history.css"> <link rel="stylesheet" href="main.css"> + <link rel="stylesheet" href="menu_button.css"> <link rel="stylesheet" href="toolbar.css"> <script src="ask_pin_dialog.js"></script> <script src="client_plugin_async.js"></script> @@ -32,6 +33,7 @@ found in the LICENSE file. <script src="host_table_entry.js"></script> <script src="l10n.js"></script> <script src="log_to_server.js"></script> + <script src="menu_button.js"></script> <script src="oauth2.js"></script> <script src="plugin_settings.js"></script> <script src="remoting.js"></script> @@ -428,10 +430,19 @@ found in the LICENSE file. type="button" i18n-content="DISCONNECT_MYSELF_BUTTON"> </button> - <span class="end-align"> - <button id="toggle-scaling"> - <img src="scale-to-fit.png"> + <div class="box-spacer"></div> + <span class="menu-button" id="screen-options-menu"> + <button> + <span i18n-content="SCREEN_OPTIONS"></span> + <img src="disclosure_arrow_down.png" + class="kd-disclosureindicator"> </button> + <ul> + <li id="enable-shrink-to-fit" i18n-content="SHRINK_TO_FIT"></li> + <li id="disable-shrink-to-fit" i18n-content="ORIGINAL_SIZE"></li> + <li class="menu-separator"></li> + <li id="toggle-full-screen" i18n-content="FULL_SCREEN"></li> + </ul> </span> </div> <div class="toolbar-stub" id="toolbar-stub"> diff --git a/remoting/webapp/menu_button.css b/remoting/webapp/menu_button.css new file mode 100644 index 0000000..7f7c01c --- /dev/null +++ b/remoting/webapp/menu_button.css @@ -0,0 +1,66 @@ +/* Copyright (c) 2012 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. + */ + +.menu-button { + position: relative; +} + +.menu-button button + ul { + visibility: hidden; + position: absolute; + top: 22px; + left: 1px; +} + +.menu-button button.active + ul { + visibility: visible; +} + +.menu-button button.active { + background-color: #EEE; + background-image: -webkit-gradient(linear, left top, left bottom, + from(#EEE), to(#E0E0E0)); + -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1); + border: 1px solid #CCC; + color: #333; +} + +.menu-button button .kd-disclosureindicator { + vertical-align: middle; + margin-left: 7px; + opacity: .8; +} + +.menu-button ul { + padding: 0; + margin: 0; + list-style-type: none; + background: white; + outline: 1px solid rgba(0, 0, 0, 0.2); + padding: 0 0 6px; + -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); +} + +.menu-button li { + padding: 6px 44px 6px 30px; + white-space: nowrap; +} + +.menu-button li:hover { + background-color: #EEE; +} + +.menu-button li.menu-separator { + border-top: 1px solid #EBEBEB; + margin-top: 9px; + margin-bottom: 10px; + padding: 0; +} + +.menu-button li.selected { + background-image: url('tick.png'); + background-position: left center; + background-repeat: no-repeat; +}
\ No newline at end of file diff --git a/remoting/webapp/menu_button.js b/remoting/webapp/menu_button.js new file mode 100644 index 0000000..03ad39e --- /dev/null +++ b/remoting/webapp/menu_button.js @@ -0,0 +1,91 @@ +// Copyright (c) 2012 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. + +/** + * @fileoverview + * Class representing a menu button and its associated menu items. + */ + +'use strict'; + +/** @suppress {duplicate} */ +var remoting = remoting || {}; + +/** + * @constructor + * @param {Element} container The element containing the <button> and <ul> + * elements comprising the menu. It should have the "menu-button" class. + * @param {function():void=} opt_onShow Optional callback invoked before the + * menu is shown. + */ +remoting.MenuButton = function(container, opt_onShow) { + /** + * @type {HTMLElement} + * @private + */ + this.button_ = /** @type {HTMLElement} */ (container.querySelector('button')); + + /** + * @type {undefined|function():void} + * @private + */ + this.onShow_ = opt_onShow; + + /** @type {remoting.MenuButton} */ + var that = this; + + // Create event handlers to show and hide the menu, attached to the button + // and the document <html> tag, respectively. These handlers are added and + // removed depending on the state of the menu. To prevent both triggering + // for one click, they are added by a timer. + /** + * @type {function(Event):void} + * @private + */ + this.onClick_ = function(event) { + if (that.onShow_) { + that.onShow_(); + } + that.button_.classList.add(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); + that.button_.removeEventListener('click', that.onClick_, false); + window.setTimeout( + function() { + document.all[0].addEventListener('click', that.closeHandler_, true); + }, + 100); + }; + + /** + * @type {function(Event):void} + * @private + */ + this.closeHandler_ = function(event) { + that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_); + document.all[0].removeEventListener('click', that.closeHandler_, true); + window.setTimeout( + function() { + that.button_.addEventListener('click', that.onClick_, false); + }, + 100); + }; + + this.button_.addEventListener('click', this.onClick_, false); +}; + +/** + * Set or unset the selected state of an <li> menu item. + * @param {HTMLElement} item The menu item to update. + * @param {boolean} selected True to select the item, false to deselect it. + * @return {void} Nothing. + */ +remoting.MenuButton.select = function(item, selected) { + if (selected) { + item.classList.add('selected'); + } else { + item.classList.remove('selected'); + } +} + +/** @const @private */ +remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active'; diff --git a/remoting/webapp/remoting.js b/remoting/webapp/remoting.js index 5a4db9c..4122b09 100644 --- a/remoting/webapp/remoting.js +++ b/remoting/webapp/remoting.js @@ -33,8 +33,6 @@ remoting.Error = { remoting.init = function() { remoting.logExtensionInfoAsync_(); l10n.localize(); - var button = document.getElementById('toggle-scaling'); - button.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_SCALING'); // Create global objects. remoting.oauth2 = new remoting.OAuth2(); remoting.stats = new remoting.ConnectionStats( diff --git a/remoting/webapp/toolbar.css b/remoting/webapp/toolbar.css index 1e2fc84..056bfcd 100644 --- a/remoting/webapp/toolbar.css +++ b/remoting/webapp/toolbar.css @@ -49,6 +49,7 @@ background-color: #e9e9e9; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); pointer-events: all; + display: -webkit-box; } /* Ensure that the 'connected to' string doesn't make the tool-bar overflow */ |
