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

Side by Side Diff: chrome/browser/resources/ntp4/apps_page.js

Issue 8208014: Update the notification bubble. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: Created 9 years, 2 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 | Annotate | Revision Log
OLDNEW
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2011 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 cr.define('ntp4', function() { 5 cr.define('ntp4', function() {
6 'use strict'; 6 'use strict';
7 7
8 var localStrings = new LocalStrings; 8 var localStrings = new LocalStrings;
9 9
10 var APP_LAUNCH = { 10 var APP_LAUNCH = {
(...skipping 266 matching lines...) Expand 10 before | Expand all | Expand 10 after
277 */ 277 */
278 loadIcon: function() { 278 loadIcon: function() {
279 if (this.appImgSrc_) { 279 if (this.appImgSrc_) {
280 this.appImg_.src = this.appImgSrc_; 280 this.appImg_.src = this.appImgSrc_;
281 this.appImg_.classList.remove('invisible'); 281 this.appImg_.classList.remove('invisible');
282 this.appImgSrc_ = null; 282 this.appImgSrc_ = null;
283 } 283 }
284 this.classList.remove('icon-loading'); 284 this.classList.remove('icon-loading');
285 }, 285 },
286 286
287 // Shows a notification text below the app icon and stuffs the attributes 287 /*
arv (Not doing code reviews) 2011/10/14 22:20:55 Missing * /**
288 // necessary to show the bubble when the user clicks on the notification 288 * Creates a bubble node.
289 // text. 289 * @param {Object} notification The notification to show in the bubble.
290 setupNotification_: function(notification) { 290 * @param {boolean} full Whether we want the headline or just the content.
arv (Not doing code reviews) 2011/10/14 22:20:55 @private
291 // Remove the old notification from this node (if any). 291 */
292 if (this.appNotification_) 292 createBubbleNode_: function(notification, full) {
293 this.appNotification_.parentNode.removeChild(this.appNotification_); 293 if (!full) {
294 var titleItem = this.ownerDocument.createElement('span');
295 titleItem.textContent = notification['title'];
296 return titleItem;
297 } else {
298 var container = this.ownerDocument.createElement('div');
294 299
295 if (notification) { 300 var messageItem = this.ownerDocument.createElement('div');
296 // Add a new notification to this node. 301 messageItem.textContent = notification['body'];
297 var appNotification = this.ownerDocument.createElement('span'); 302 container.appendChild(messageItem);
298 appNotification.className = 'app-notification'; 303
299 appNotification.textContent = notification['title']; 304 if (notification['linkUrl'] && notification['linkText']) {
300 appNotification.addEventListener('click', 305 var anchor = this.ownerDocument.createElement('a');
301 this.onNotificationClick_.bind(this)); 306 anchor.href = notification['linkUrl'];
302 appNotification.notificationTitle = notification['title']; 307 anchor.textContent = notification['linkText'];
303 appNotification.notificationMessage = notification['body']; 308 container.appendChild(anchor);
304 if (typeof notification['linkUrl'] != 'undefined' &&
305 typeof notification['linkText'] != 'undefined') {
306 appNotification.notificationLink = notification['linkUrl'];
307 appNotification.notificationLinkText = notification['linkText'];
308 } 309 }
309 this.appNotification_ = appNotification; 310
310 this.appendChild(appNotification); 311 return container;
311 } 312 }
312 }, 313 },
313 314
315 /*
arv (Not doing code reviews) 2011/10/14 22:20:55 Fix comment format here too
316 * Sets up a notification for the app icon.
317 * @param {Object} notification The notification to show in the bubble.
318 */
319 setupNotification_: function(notification) {
320 if (notification) {
321 var infoBubble;
322 if (!this.infoBubbleShowing_) {
323 // Create a new bubble.
324 infoBubble = new cr.ui.ExpandableBubble;
325 infoBubble.anchorNode = this;
326 infoBubble.dismissOnBlur = false;
327 } else {
328 // Reuse the old bubble instead of popping up a new bubble over
329 // the old one.
330 infoBubble = this.infoBubbleShowing_;
331 infoBubble.collapseBubble_();
332 }
333 infoBubble.contentTitle = this.createBubbleNode_(notification, false);
334 infoBubble.content = this.createBubbleNode_(notification, true);
335 infoBubble.show();
336
337 this.infoBubbleShowing_ = infoBubble;
Evan Stade 2011/10/14 18:22:59 can you document this? Also currentlyShowingInfoBu
338 }
339 },
340
314 /** 341 /**
315 * Creates the apps-promo section of the app (should only be called for the 342 * Creates the apps-promo section of the app (should only be called for the
316 * webstore app). 343 * webstore app).
317 * @private 344 * @private
318 */ 345 */
319 createAppsPromoExtras_: function() { 346 createAppsPromoExtras_: function() {
320 this.classList.add('webstore'); 347 this.classList.add('webstore');
321 348
322 this.appsPromoExtras_ = $('apps-promo-extras-template').cloneNode(true); 349 this.appsPromoExtras_ = $('apps-promo-extras-template').cloneNode(true);
323 this.appsPromoExtras_.id = ''; 350 this.appsPromoExtras_.id = '';
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after
392 onClick_: function(e) { 419 onClick_: function(e) {
393 chrome.send('launchApp', 420 chrome.send('launchApp',
394 [this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED, 421 [this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED,
395 e.altKey, e.ctrlKey, e.metaKey, e.shiftKey, e.button]); 422 e.altKey, e.ctrlKey, e.metaKey, e.shiftKey, e.button]);
396 423
397 // Don't allow the click to trigger a link or anything 424 // Don't allow the click to trigger a link or anything
398 e.preventDefault(); 425 e.preventDefault();
399 }, 426 },
400 427
401 /** 428 /**
402 * Invoked when an app notification is clicked. This will show the
403 * notification bubble, containing the details of the notification.
404 * @param {Event} e The click event.
405 * @private
406 */
407 onNotificationClick_: function(e) {
408 var title = this.appNotification_.notificationTitle;
409 var message = this.appNotification_.notificationMessage;
410 var link = this.appNotification_.notificationLink;
411 var linkMessage = this.appNotification_.notificationLinkText;
412
413 if (!title || !message)
414 return;
415
416 var container = this.ownerDocument.createElement('div');
417 var titleItem = this.ownerDocument.createElement('strong');
418 titleItem.textContent = title;
419 container.appendChild(titleItem);
420 var messageDiv = this.ownerDocument.createElement('div');
421 messageDiv.textContent = message;
422 container.appendChild(messageDiv);
423 if (link && linkMessage) {
424 var anchor = this.ownerDocument.createElement('a');
425 anchor.href = link;
426 anchor.textContent = linkMessage;
427 container.appendChild(anchor);
428 }
429
430 var infoBubble = new cr.ui.Bubble;
431 infoBubble.anchorNode = e.target;
432 infoBubble.content = container;
433 infoBubble.show();
434 },
435
436 /**
437 * Adds a node to the list of targets that will launch the app. This list 429 * Adds a node to the list of targets that will launch the app. This list
438 * is also used in onMousedown to determine whether the app contents should 430 * is also used in onMousedown to determine whether the app contents should
439 * be shown as active (if we don't do this, then clicking anywhere in 431 * be shown as active (if we don't do this, then clicking anywhere in
440 * appContents, even a part that is outside the ideally clickable region, 432 * appContents, even a part that is outside the ideally clickable region,
441 * will cause the app icon to look active). 433 * will cause the app icon to look active).
442 * @param {HTMLElement} node The node that should be clickable. 434 * @param {HTMLElement} node The node that should be clickable.
443 */ 435 */
444 addLaunchClickTarget_: function(node) { 436 addLaunchClickTarget_: function(node) {
445 node.classList.add('launch-click-target'); 437 node.classList.add('launch-click-target');
446 node.addEventListener('click', this.onClick_.bind(this)); 438 node.addEventListener('click', this.onClick_.bind(this));
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after
509 }, 501 },
510 502
511 /** 503 /**
512 * Uninstalls the app after it's been dropped on the trash. 504 * Uninstalls the app after it's been dropped on the trash.
513 */ 505 */
514 removeFromChrome: function() { 506 removeFromChrome: function() {
515 chrome.send('uninstallApp', [this.appData_.id, true]); 507 chrome.send('uninstallApp', [this.appData_.id, true]);
516 508
517 this.tile.tilePage.cleanupDrag(); 509 this.tile.tilePage.cleanupDrag();
518 this.tile.parentNode.removeChild(this.tile); 510 this.tile.parentNode.removeChild(this.tile);
511
512 if (this.infoBubbleShowing_)
513 infoBubbleShowing_.hide();
519 }, 514 },
520 515
521 /** 516 /**
522 * Called when a drag is starting on the tile. Updates dataTransfer with 517 * Called when a drag is starting on the tile. Updates dataTransfer with
523 * data for this tile. 518 * data for this tile.
524 */ 519 */
525 setDragData: function(dataTransfer) { 520 setDragData: function(dataTransfer) {
526 dataTransfer.setData('Text', this.appData_.title); 521 dataTransfer.setData('Text', this.appData_.title);
527 dataTransfer.setData('URL', this.appData_.url); 522 dataTransfer.setData('URL', this.appData_.url);
528 }, 523 },
(...skipping 212 matching lines...) Expand 10 before | Expand all | Expand 10 after
741 appNotificationChanged: appNotificationChanged, 736 appNotificationChanged: appNotificationChanged,
742 AppsPage: AppsPage, 737 AppsPage: AppsPage,
743 launchAppAfterEnable: launchAppAfterEnable, 738 launchAppAfterEnable: launchAppAfterEnable,
744 }; 739 };
745 }); 740 });
746 741
747 // TODO(estade): update the content handlers to use ntp namespace instead of 742 // TODO(estade): update the content handlers to use ntp namespace instead of
748 // making these global. 743 // making these global.
749 var appNotificationChanged = ntp4.appNotificationChanged; 744 var appNotificationChanged = ntp4.appNotificationChanged;
750 var launchAppAfterEnable = ntp4.launchAppAfterEnable; 745 var launchAppAfterEnable = ntp4.launchAppAfterEnable;
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/resources/ntp4/new_tab.html » ('j') | chrome/browser/resources/shared/css/expandable_bubble.css » ('J')

Powered by Google App Engine
This is Rietveld 408576698