Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(139)

Side by Side Diff: remoting/webapp/window_frame.js

Issue 339613003: Remove the blue tool-bar for apps v2. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Added New Connection to options menu. Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 titleBar.querySelector('.menu-new-connection'),
50 null);
51
52 /**
41 * @type {HTMLElement} 53 * @type {HTMLElement}
42 * @private 54 * @private
43 */ 55 */
56 this.title_ = /** @type {HTMLElement} */
57 (titleBar.querySelector('.window-title'));
58 base.debug.assert(this.title_ != null);
59
60 /**
61 * @type {HTMLElement}
62 * @private
63 */
44 this.maximizeRestoreControl_ = /** @type {HTMLElement} */ 64 this.maximizeRestoreControl_ = /** @type {HTMLElement} */
45 (titleBar.querySelector('.window-maximize-restore')); 65 (titleBar.querySelector('.window-maximize-restore'));
46 base.debug.assert(this.maximizeRestoreControl_ != null); 66 base.debug.assert(this.maximizeRestoreControl_ != null);
47 67
68 var optionsButton = titleBar.querySelector('.window-options');
69 base.debug.assert(optionsButton != null);
70 this.optionMenuButton_ = new remoting.MenuButton(
71 optionsButton,
72 this.onShowOptionsMenu_.bind(this),
73 this.onHideOptionsMenu_.bind(this));
74
48 /** 75 /**
49 * @type {Array.<{cls:string, fn: function()}>} 76 * @type {Array.<{cls:string, fn: function()}>}
50 */ 77 */
51 var handlers = [ 78 var handlers = [
52 { cls: 'window-disconnect', fn: this.disconnectSession_.bind(this) }, 79 { cls: 'window-disconnect', fn: this.disconnectSession_.bind(this) },
53 { cls: 'window-maximize-restore', 80 { cls: 'window-maximize-restore',
54 fn: this.maximizeOrRestoreWindow_.bind(this) }, 81 fn: this.maximizeOrRestoreWindow_.bind(this) },
55 { cls: 'window-minimize', fn: this.minimizeWindow_.bind(this) }, 82 { cls: 'window-minimize', fn: this.minimizeWindow_.bind(this) },
56 { cls: 'window-close', fn: window.close.bind(window) }, 83 { cls: 'window-close', fn: window.close.bind(window) },
57 { cls: 'window-controls-stub', fn: this.toggleWindowControls_.bind(this) } 84 { cls: 'window-controls-stub', fn: this.toggleWindowControls_.bind(this) }
58 ]; 85 ];
59 for (var i = 0; i < handlers.length; ++i) { 86 for (var i = 0; i < handlers.length; ++i) {
60 var element = titleBar.querySelector('.' + handlers[i].cls); 87 var element = titleBar.querySelector('.' + handlers[i].cls);
61 base.debug.assert(element != null); 88 base.debug.assert(element != null);
62 element.addEventListener('click', handlers[i].fn, false); 89 element.addEventListener('click', handlers[i].fn, false);
63 } 90 }
64 91
65 // Ensure that tool-tips are always correct. 92 // Ensure that tool-tips are always correct.
66 this.updateMaximizeOrRestoreIconTitle_(); 93 this.updateMaximizeOrRestoreIconTitle_();
67 chrome.app.window.current().onMaximized.addListener( 94 chrome.app.window.current().onMaximized.addListener(
68 this.updateMaximizeOrRestoreIconTitle_.bind(this)); 95 this.updateMaximizeOrRestoreIconTitle_.bind(this));
69 chrome.app.window.current().onRestored.addListener( 96 chrome.app.window.current().onRestored.addListener(
70 this.updateMaximizeOrRestoreIconTitle_.bind(this)); 97 this.updateMaximizeOrRestoreIconTitle_.bind(this));
71 chrome.app.window.current().onFullscreened.addListener( 98 chrome.app.window.current().onFullscreened.addListener(
72 this.updateMaximizeOrRestoreIconTitle_.bind(this)); 99 this.updateMaximizeOrRestoreIconTitle_.bind(this));
73 }; 100 };
74 101
75 /** 102 /**
76 * @param {boolean} isConnected True if there is a connection active. 103 * @param {remoting.ClientSession} clientSession The client session, or null if
104 * there is no connection.
77 */ 105 */
78 remoting.WindowFrame.prototype.setConnected = function(isConnected) { 106 remoting.WindowFrame.prototype.setClientSession = function(clientSession) {
79 this.isConnected_ = isConnected; 107 this.optionsMenu_.setClientSession(clientSession);
80 if (this.isConnected_) { 108 this.clientSession_ = clientSession;
kelvinp 2014/07/23 18:49:08 It seems like clientSession_ is only used as a boo
Jamie 2014/07/23 20:00:38 We need a ClientSession in order to set the window
109 var windowTitle = document.head.querySelector('title');
110 if (this.clientSession_) {
81 document.body.classList.add('connected'); 111 document.body.classList.add('connected');
112 this.title_.innerText = clientSession.getHostDisplayName();
113 windowTitle.innerText = clientSession.getHostDisplayName() + ' - ' +
114 chrome.i18n.getMessage(/*i18n-content*/'PRODUCT_NAME');
82 } else { 115 } else {
83 document.body.classList.remove('connected'); 116 document.body.classList.remove('connected');
117 this.title_.innerHTML = '&nbsp;';
118 windowTitle.innerText =
119 chrome.i18n.getMessage(/*i18n-content*/'PRODUCT_NAME');
84 } 120 }
85 this.updateMaximizeOrRestoreIconTitle_(); 121 this.updateMaximizeOrRestoreIconTitle_();
86 }; 122 };
87 123
88 /** 124 /**
89 * @return {{width: number, height: number}} The size of the window, ignoring 125 * @return {{width: number, height: number}} The size of the window, ignoring
90 * the title-bar and window borders, if visible. 126 * the title-bar and window borders, if visible.
91 */ 127 */
92 remoting.WindowFrame.prototype.getClientArea = function() { 128 remoting.WindowFrame.prototype.getClientArea = function() {
93 if (chrome.app.window.current().isFullscreen()) { 129 if (chrome.app.window.current().isFullscreen()) {
(...skipping 28 matching lines...) Expand all
122 remoting.WindowFrame.prototype.maximizeOrRestoreWindow_ = function() { 158 remoting.WindowFrame.prototype.maximizeOrRestoreWindow_ = function() {
123 /** @type {boolean} */ 159 /** @type {boolean} */
124 var restore = 160 var restore =
125 chrome.app.window.current().isFullscreen() || 161 chrome.app.window.current().isFullscreen() ||
126 chrome.app.window.current().isMaximized(); 162 chrome.app.window.current().isMaximized();
127 if (restore) { 163 if (restore) {
128 // Restore twice: once to exit full-screen and once to exit maximized. 164 // Restore twice: once to exit full-screen and once to exit maximized.
129 // If the app is not full-screen, or went full-screen without first 165 // If the app is not full-screen, or went full-screen without first
130 // being maximized, then the second restore has no effect. 166 // being maximized, then the second restore has no effect.
131 chrome.app.window.current().restore(); 167 chrome.app.window.current().restore();
132 } else if (this.isConnected_) { 168 chrome.app.window.current().restore();
169 } else if (this.clientSession_) {
133 chrome.app.window.current().fullscreen(); 170 chrome.app.window.current().fullscreen();
134 } else { 171 } else {
135 chrome.app.window.current().maximize(); 172 chrome.app.window.current().maximize();
136 } 173 }
137 }; 174 };
138 175
139 /** 176 /**
140 * @private 177 * @private
141 */ 178 */
142 remoting.WindowFrame.prototype.minimizeWindow_ = function() { 179 remoting.WindowFrame.prototype.minimizeWindow_ = function() {
(...skipping 13 matching lines...) Expand all
156 * 193 *
157 * @private 194 * @private
158 */ 195 */
159 remoting.WindowFrame.prototype.updateMaximizeOrRestoreIconTitle_ = function() { 196 remoting.WindowFrame.prototype.updateMaximizeOrRestoreIconTitle_ = function() {
160 /** @type {string} */ 197 /** @type {string} */
161 var tag = ''; 198 var tag = '';
162 if (chrome.app.window.current().isFullscreen()) { 199 if (chrome.app.window.current().isFullscreen()) {
163 tag = /*i18n-content*/'EXIT_FULL_SCREEN'; 200 tag = /*i18n-content*/'EXIT_FULL_SCREEN';
164 } else if (chrome.app.window.current().isMaximized()) { 201 } else if (chrome.app.window.current().isMaximized()) {
165 tag = /*i18n-content*/'RESTORE_WINDOW'; 202 tag = /*i18n-content*/'RESTORE_WINDOW';
166 } else if (this.isConnected_) { 203 } else if (this.clientSession_) {
167 tag = /*i18n-content*/'FULL_SCREEN'; 204 tag = /*i18n-content*/'FULL_SCREEN';
168 } else { 205 } else {
169 tag = /*i18n-content*/'MAXIMIZE_WINDOW'; 206 tag = /*i18n-content*/'MAXIMIZE_WINDOW';
170 } 207 }
171 this.maximizeRestoreControl_.title = l10n.getTranslationOrError(tag); 208 this.maximizeRestoreControl_.title = l10n.getTranslationOrError(tag);
172 }; 209 };
173 210
211 /**
212 * Callback invoked when the options menu is shown.
213 * @private
214 */
215 remoting.WindowFrame.prototype.onShowOptionsMenu_ = function() {
216 this.optionsMenu_.onShow();
217 this.hoverTarget_.classList.add('menu-opened');
218 };
219
220 /**
221 * Callback invoked when the options menu is shown.
222 * @private
223 */
224 remoting.WindowFrame.prototype.onHideOptionsMenu_ = function() {
225 this.hoverTarget_.classList.remove('menu-opened');
226 };
227
228
174 /** @type {remoting.WindowFrame} */ 229 /** @type {remoting.WindowFrame} */
175 remoting.windowFrame = null; 230 remoting.windowFrame = null;
OLDNEW
« remoting/webapp/unittests/menu_button_unittest.js ('K') | « remoting/webapp/window_frame.css ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698