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 |