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

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: Use classes for help and feedback elements. 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 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 = '&nbsp;';
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
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
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;
OLDNEW
« remoting/webapp/menu_button.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