| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @fileoverview | 6 * @fileoverview |
| 7 * Apps v2 custom title bar implementation | 7 * Apps v2 custom title bar implementation |
| 8 */ | 8 */ |
| 9 | 9 |
| 10 'use strict'; | 10 'use strict'; |
| 11 | 11 |
| 12 /** @suppress {duplicate} */ | 12 /** @suppress {duplicate} */ |
| 13 var remoting = remoting || {}; | 13 var remoting = remoting || {}; |
| 14 | 14 |
| 15 /** | 15 /** |
| 16 * @param {HTMLElement} titleBar The root node of the title-bar DOM hierarchy. | 16 * @param {HTMLElement} titleBar The root node of the title-bar DOM hierarchy. |
| 17 * @constructor | 17 * @constructor |
| 18 */ | 18 */ |
| 19 remoting.WindowFrame = function(titleBar) { | 19 remoting.WindowFrame = function(titleBar) { |
| 20 /** | 20 /** |
| 21 * @type {boolean} | 21 * @type {remoting.ClientSession} |
| 22 * @private | 22 * @private |
| 23 */ | 23 */ |
| 24 this.isConnected_ = false; | 24 this.clientSession_ = null; |
| 25 | 25 |
| 26 /** | 26 /** |
| 27 * @type {HTMLElement} | 27 * @type {HTMLElement} |
| 28 * @private | 28 * @private |
| 29 */ | 29 */ |
| 30 this.titleBar_ = titleBar; | 30 this.titleBar_ = titleBar; |
| 31 | 31 |
| 32 /** | 32 /** |
| 33 * @type {HTMLElement} | 33 * @type {HTMLElement} |
| 34 * @private | 34 * @private |
| 35 */ | 35 */ |
| 36 this.hoverTarget_ = /** @type {HTMLElement} */ | 36 this.hoverTarget_ = /** @type {HTMLElement} */ |
| 37 (titleBar.querySelector('.window-controls-hover-target')); | 37 (titleBar.querySelector('.window-controls-hover-target')); |
| 38 base.debug.assert(this.hoverTarget_ != null); | 38 base.debug.assert(this.hoverTarget_ != null); |
| 39 | 39 |
| 40 /** | 40 /** |
| 41 * @type {remoting.OptionsMenu} |
| 42 * @private |
| 43 */ |
| 44 this.optionsMenu_ = new remoting.OptionsMenu( |
| 45 titleBar.querySelector('.menu-send-ctrl-alt-del'), |
| 46 titleBar.querySelector('.menu-send-print-screen'), |
| 47 titleBar.querySelector('.menu-resize-to-client'), |
| 48 titleBar.querySelector('.menu-shrink-to-fit'), |
| 49 null); |
| 50 |
| 51 /** |
| 41 * @type {HTMLElement} | 52 * @type {HTMLElement} |
| 42 * @private | 53 * @private |
| 43 */ | 54 */ |
| 55 this.title_ = /** @type {HTMLElement} */ |
| 56 (titleBar.querySelector('.window-title')); |
| 57 base.debug.assert(this.title_ != null); |
| 58 |
| 59 /** |
| 60 * @type {HTMLElement} |
| 61 * @private |
| 62 */ |
| 44 this.maximizeRestoreControl_ = /** @type {HTMLElement} */ | 63 this.maximizeRestoreControl_ = /** @type {HTMLElement} */ |
| 45 (titleBar.querySelector('.window-maximize-restore')); | 64 (titleBar.querySelector('.window-maximize-restore')); |
| 46 base.debug.assert(this.maximizeRestoreControl_ != null); | 65 base.debug.assert(this.maximizeRestoreControl_ != null); |
| 47 | 66 |
| 48 /** | 67 /** |
| 68 * @type {HTMLElement} |
| 69 * @private |
| 70 */ |
| 71 this.resizeToClientMenuEntry_ = /** @type {HTMLElement} */ |
| 72 (titleBar.querySelector('.menu-resize-to-client')); |
| 73 base.debug.assert(this.resizeToClientMenuEntry_ != null); |
| 74 |
| 75 /** |
| 76 * @type {HTMLElement} |
| 77 * @private |
| 78 */ |
| 79 this.shrinkToFitMenuEntry_ = /** @type {HTMLElement} */ |
| 80 (titleBar.querySelector('.menu-shrink-to-fit')); |
| 81 base.debug.assert(this.shrinkToFitMenuEntry_ != null); |
| 82 |
| 83 var optionsButton = titleBar.querySelector('.window-options'); |
| 84 base.debug.assert(optionsButton != null); |
| 85 this.optionMenuButton_ = new remoting.MenuButton( |
| 86 optionsButton, |
| 87 this.optionsMenu_.onShow.bind(this.optionsMenu_)); |
| 88 |
| 89 /** |
| 49 * @type {Array.<{cls:string, fn: function()}>} | 90 * @type {Array.<{cls:string, fn: function()}>} |
| 50 */ | 91 */ |
| 51 var handlers = [ | 92 var handlers = [ |
| 52 { cls: 'window-disconnect', fn: this.disconnectSession_.bind(this) }, | 93 { cls: 'window-disconnect', fn: this.disconnectSession_.bind(this) }, |
| 53 { cls: 'window-maximize-restore', | 94 { cls: 'window-maximize-restore', |
| 54 fn: this.maximizeOrRestoreWindow_.bind(this) }, | 95 fn: this.maximizeOrRestoreWindow_.bind(this) }, |
| 55 { cls: 'window-minimize', fn: this.minimizeWindow_.bind(this) }, | 96 { cls: 'window-minimize', fn: this.minimizeWindow_.bind(this) }, |
| 56 { cls: 'window-close', fn: window.close.bind(window) }, | 97 { cls: 'window-close', fn: window.close.bind(window) }, |
| 57 { cls: 'window-controls-stub', fn: this.toggleWindowControls_.bind(this) } | 98 { cls: 'window-controls-stub', fn: this.toggleWindowControls_.bind(this) } |
| 58 ]; | 99 ]; |
| 59 for (var i = 0; i < handlers.length; ++i) { | 100 for (var i = 0; i < handlers.length; ++i) { |
| 60 var element = titleBar.querySelector('.' + handlers[i].cls); | 101 var element = titleBar.querySelector('.' + handlers[i].cls); |
| 61 base.debug.assert(element != null); | 102 base.debug.assert(element != null); |
| 62 element.addEventListener('click', handlers[i].fn, false); | 103 element.addEventListener('click', handlers[i].fn, false); |
| 63 } | 104 } |
| 64 | 105 |
| 65 // Ensure that tool-tips are always correct. | 106 // Ensure that tool-tips are always correct. |
| 66 this.updateMaximizeOrRestoreIconTitle_(); | 107 this.updateMaximizeOrRestoreIconTitle_(); |
| 67 chrome.app.window.current().onMaximized.addListener( | 108 chrome.app.window.current().onMaximized.addListener( |
| 68 this.updateMaximizeOrRestoreIconTitle_.bind(this)); | 109 this.updateMaximizeOrRestoreIconTitle_.bind(this)); |
| 69 chrome.app.window.current().onRestored.addListener( | 110 chrome.app.window.current().onRestored.addListener( |
| 70 this.updateMaximizeOrRestoreIconTitle_.bind(this)); | 111 this.updateMaximizeOrRestoreIconTitle_.bind(this)); |
| 71 chrome.app.window.current().onFullscreened.addListener( | 112 chrome.app.window.current().onFullscreened.addListener( |
| 72 this.updateMaximizeOrRestoreIconTitle_.bind(this)); | 113 this.updateMaximizeOrRestoreIconTitle_.bind(this)); |
| 73 }; | 114 }; |
| 74 | 115 |
| 75 /** | 116 /** |
| 76 * @param {boolean} isConnected True if there is a connection active. | 117 * @param {remoting.ClientSession} clientSession The client session, or null if |
| 118 * there is no connection. |
| 77 */ | 119 */ |
| 78 remoting.WindowFrame.prototype.setConnected = function(isConnected) { | 120 remoting.WindowFrame.prototype.setClientSession = function(clientSession) { |
| 79 this.isConnected_ = isConnected; | 121 this.optionsMenu_.setClientSession(clientSession); |
| 80 if (this.isConnected_) { | 122 this.clientSession_ = clientSession; |
| 123 var windowTitle = document.head.querySelector('title'); |
| 124 if (this.clientSession_) { |
| 81 document.body.classList.add('connected'); | 125 document.body.classList.add('connected'); |
| 126 this.title_.innerText = clientSession.getHostDisplayName(); |
| 127 windowTitle.innerText = clientSession.getHostDisplayName() + ' - ' + |
| 128 chrome.i18n.getMessage(/*i18n-content*/'PRODUCT_NAME'); |
| 82 } else { | 129 } else { |
| 83 document.body.classList.remove('connected'); | 130 document.body.classList.remove('connected'); |
| 131 this.title_.innerHTML = ' '; |
| 132 windowTitle.innerText = |
| 133 chrome.i18n.getMessage(/*i18n-content*/'PRODUCT_NAME'); |
| 84 } | 134 } |
| 85 this.updateMaximizeOrRestoreIconTitle_(); | 135 this.updateMaximizeOrRestoreIconTitle_(); |
| 86 }; | 136 }; |
| 87 | 137 |
| 88 /** | 138 /** |
| 89 * @return {{width: number, height: number}} The size of the window, ignoring | 139 * @return {{width: number, height: number}} The size of the window, ignoring |
| 90 * the title-bar and window borders, if visible. | 140 * the title-bar and window borders, if visible. |
| 91 */ | 141 */ |
| 92 remoting.WindowFrame.prototype.getClientArea = function() { | 142 remoting.WindowFrame.prototype.getClientArea = function() { |
| 93 if (chrome.app.window.current().isFullscreen()) { | 143 if (chrome.app.window.current().isFullscreen()) { |
| (...skipping 30 matching lines...) Expand all Loading... |
| 124 /** @type {boolean} */ | 174 /** @type {boolean} */ |
| 125 var restore = | 175 var restore = |
| 126 chrome.app.window.current().isFullscreen() || | 176 chrome.app.window.current().isFullscreen() || |
| 127 chrome.app.window.current().isMaximized(); | 177 chrome.app.window.current().isMaximized(); |
| 128 if (restore) { | 178 if (restore) { |
| 129 // Restore twice: once to exit full-screen and once to exit maximized. | 179 // Restore twice: once to exit full-screen and once to exit maximized. |
| 130 // If the app is not full-screen, or went full-screen without first | 180 // If the app is not full-screen, or went full-screen without first |
| 131 // being maximized, then the second restore has no effect. | 181 // being maximized, then the second restore has no effect. |
| 132 chrome.app.window.current().restore(); | 182 chrome.app.window.current().restore(); |
| 133 chrome.app.window.current().restore(); | 183 chrome.app.window.current().restore(); |
| 134 } else if (this.isConnected_) { | 184 } else if (this.clientSession_) { |
| 135 chrome.app.window.current().fullscreen(); | 185 chrome.app.window.current().fullscreen(); |
| 136 } else { | 186 } else { |
| 137 chrome.app.window.current().maximize(); | 187 chrome.app.window.current().maximize(); |
| 138 } | 188 } |
| 139 }; | 189 }; |
| 140 | 190 |
| 141 /** | 191 /** |
| 142 * @private | 192 * @private |
| 143 */ | 193 */ |
| 144 remoting.WindowFrame.prototype.minimizeWindow_ = function() { | 194 remoting.WindowFrame.prototype.minimizeWindow_ = function() { |
| (...skipping 13 matching lines...) Expand all Loading... |
| 158 * | 208 * |
| 159 * @private | 209 * @private |
| 160 */ | 210 */ |
| 161 remoting.WindowFrame.prototype.updateMaximizeOrRestoreIconTitle_ = function() { | 211 remoting.WindowFrame.prototype.updateMaximizeOrRestoreIconTitle_ = function() { |
| 162 /** @type {string} */ | 212 /** @type {string} */ |
| 163 var tag = ''; | 213 var tag = ''; |
| 164 if (chrome.app.window.current().isFullscreen()) { | 214 if (chrome.app.window.current().isFullscreen()) { |
| 165 tag = /*i18n-content*/'EXIT_FULL_SCREEN'; | 215 tag = /*i18n-content*/'EXIT_FULL_SCREEN'; |
| 166 } else if (chrome.app.window.current().isMaximized()) { | 216 } else if (chrome.app.window.current().isMaximized()) { |
| 167 tag = /*i18n-content*/'RESTORE_WINDOW'; | 217 tag = /*i18n-content*/'RESTORE_WINDOW'; |
| 168 } else if (this.isConnected_) { | 218 } else if (this.clientSession_) { |
| 169 tag = /*i18n-content*/'FULL_SCREEN'; | 219 tag = /*i18n-content*/'FULL_SCREEN'; |
| 170 } else { | 220 } else { |
| 171 tag = /*i18n-content*/'MAXIMIZE_WINDOW'; | 221 tag = /*i18n-content*/'MAXIMIZE_WINDOW'; |
| 172 } | 222 } |
| 173 this.maximizeRestoreControl_.title = l10n.getTranslationOrError(tag); | 223 this.maximizeRestoreControl_.title = l10n.getTranslationOrError(tag); |
| 174 }; | 224 }; |
| 175 | 225 |
| 176 /** @type {remoting.WindowFrame} */ | 226 /** @type {remoting.WindowFrame} */ |
| 177 remoting.windowFrame = null; | 227 remoting.windowFrame = null; |
| OLD | NEW |