OLD | NEW |
1 // Copyright 2013 The Chromium Authors. All rights reserved. | 1 // Copyright 2013 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 * ButterBar class that is used to show the butter bar with various | 7 * ButterBar class that is used to show a butter bar with deprecation messages. |
8 * notifications. | 8 * Each message is displayed for at most one week. |
9 */ | 9 */ |
10 | 10 |
11 'use strict'; | 11 'use strict'; |
12 | 12 |
13 /** @suppress {duplicate} */ | 13 /** @suppress {duplicate} */ |
14 var remoting = remoting || {}; | 14 var remoting = remoting || {}; |
15 | 15 |
16 /** | 16 /** |
17 * @constructor | 17 * @constructor |
18 */ | 18 */ |
19 remoting.ButterBar = function() { | 19 remoting.ButterBar = function() { |
20 this.storageKey_ = ''; | 20 /** @private @const */ |
| 21 this.messages_ = [ |
| 22 {id: /*i18n-content*/'WEBSITE_INVITE_BETA', dismissable: true}, |
| 23 {id: /*i18n-content*/'WEBSITE_INVITE_STABLE', dismissable: true}, |
| 24 {id: /*i18n-content*/'WEBSITE_INVITE_DEPRECATION_1', dismissable: true}, |
| 25 {id: /*i18n-content*/'WEBSITE_INVITE_DEPRECATION_2', dismissable: false}, |
| 26 ]; |
| 27 // TODO(jamiewalch): Read the message index using metricsPrivate. |
| 28 this.currentMessage_ = -1; |
| 29 /** @private {!Element} */ |
| 30 this.root_ = document.getElementById(remoting.ButterBar.kId_); |
| 31 /** @private {!Element} */ |
| 32 this.message_ = document.getElementById(remoting.ButterBar.kMessageId_); |
| 33 /** @private {!Element} */ |
| 34 this.dismiss_ = document.getElementById(remoting.ButterBar.kDismissId_); |
| 35 } |
21 | 36 |
22 chrome.storage.sync.get( | 37 remoting.ButterBar.prototype.init = function() { |
23 [remoting.ButterBar.kSurveyStorageKey_], | 38 var result = new base.Deferred(); |
24 this.onStateLoaded_.bind(this)); | 39 if (this.currentMessage_ > -1) { |
| 40 chrome.storage.sync.get( |
| 41 [remoting.ButterBar.kStorageKey_], |
| 42 (syncValues) => { |
| 43 this.onStateLoaded_(syncValues); |
| 44 result.resolve(); |
| 45 }); |
| 46 } else { |
| 47 result.resolve(); |
| 48 } |
| 49 return result.promise(); |
25 } | 50 } |
26 | 51 |
27 /** | 52 /** |
28 * Shows butter bar with the specified |message| and updates |storageKey| after | 53 * Shows butter bar with the current message. |
29 * the bar is dismissed. | |
30 * | 54 * |
31 * @param {string} messageId | 55 * @param {string} messageId |
32 * @param {string|Array} substitutions | 56 * @param {string|Array} substitutions |
33 * @param {string} storageKey | 57 * @param {boolean} dismissable |
34 * @private | 58 * @private |
35 */ | 59 */ |
36 remoting.ButterBar.prototype.show_ = | 60 remoting.ButterBar.prototype.show_ = function() { |
37 function(messageId, substitutions, storageKey) { | 61 var messageId = this.messages_[this.currentMessage_].id; |
38 this.storageKey_ = storageKey; | 62 var substitutions = ['<a href="https://example.com" target="_blank">', '</a>']
; |
39 | 63 var dismissable = this.messages_[this.currentMessage_].dismissable; |
40 var messageElement = document.getElementById(remoting.ButterBar.kMessageId_); | 64 l10n.localizeElementFromTag(this.message_, messageId, substitutions, true); |
41 l10n.localizeElementFromTag(messageElement, messageId, substitutions, true); | 65 if (dismissable) { |
42 var acceptLink = | 66 this.dismiss_.addEventListener('click', this.dismiss.bind(this), false); |
43 /** @type{Element} */ (messageElement.getElementsByTagName('a')[0]); | 67 } else { |
44 acceptLink.addEventListener( | 68 this.dismiss_.hidden = true; |
45 'click', this.dismiss.bind(this, true), false); | 69 this.root_.classList.add('red'); |
46 | 70 } |
47 document.getElementById(remoting.ButterBar.kDismissId_).addEventListener( | 71 this.root_.hidden = false; |
48 'click', this.dismiss.bind(this, false), false); | |
49 | |
50 document.getElementById(remoting.ButterBar.kId_).hidden = false; | |
51 } | 72 } |
52 | 73 |
53 /** | 74 /** |
54 * @param {Object} syncValues | 75 * @param {Object} syncValues |
55 * @private | 76 * @private |
56 */ | 77 */ |
57 remoting.ButterBar.prototype.onStateLoaded_ = function(syncValues) { | 78 remoting.ButterBar.prototype.onStateLoaded_ = function(syncValues) { |
58 /** @type {boolean} */ | 79 /** @type {!Object|undefined} */ |
59 var surveyDismissed = !!syncValues[remoting.ButterBar.kSurveyStorageKey_]; | 80 var messageState = syncValues[remoting.ButterBar.kStorageKey_]; |
| 81 if (!messageState) { |
| 82 messageState = { |
| 83 index: -1, |
| 84 timestamp: new Date().getTime(), |
| 85 hidden: false, |
| 86 } |
| 87 } |
60 | 88 |
61 if (!surveyDismissed) { | 89 // Show the current message unless it was explicitly dismissed or if it was |
62 this.show_(/*i18n-content*/'SURVEY_INVITATION', | 90 // first shown more than a week ago. If it is marked as not dismissable, show |
63 ['<a href="http://goo.gl/njH2q" target="_blank">', '</a>'], | 91 // it unconditionally. |
64 remoting.ButterBar.kSurveyStorageKey_); | 92 var elapsed = new Date() - messageState.timestamp; |
| 93 var show = |
| 94 this.currentMessage_ > messageState.index || |
| 95 !this.messages_[this.currentMessage_].dismissable || |
| 96 (!messageState.hidden && elapsed <= remoting.ButterBar.kTimeout_); |
| 97 |
| 98 if (show) { |
| 99 this.show_(); |
| 100 // If this is the first time this message is being displayed, update the |
| 101 // saved state. |
| 102 if (this.currentMessage_ > messageState.index) { |
| 103 var value = {}; |
| 104 value[remoting.ButterBar.kStorageKey_] = { |
| 105 index: this.currentMessage_, |
| 106 timestamp: new Date().getTime(), |
| 107 hidden: false |
| 108 }; |
| 109 chrome.storage.sync.set(value); |
| 110 } |
65 } | 111 } |
66 }; | 112 }; |
67 | 113 |
| 114 /** |
| 115 * Hide the butter bar request and record the message that was being displayed. |
| 116 */ |
| 117 remoting.ButterBar.prototype.dismiss = function() { |
| 118 var value = {}; |
| 119 value[remoting.ButterBar.kStorageKey_] = { |
| 120 index: this.currentMessage_, |
| 121 timestamp: new Date().getTime(), |
| 122 hidden: true |
| 123 }; |
| 124 chrome.storage.sync.set(value); |
| 125 |
| 126 this.root_.hidden = true; |
| 127 }; |
| 128 |
68 /** @const @private */ | 129 /** @const @private */ |
69 remoting.ButterBar.kId_ = 'butter-bar'; | 130 remoting.ButterBar.kId_ = 'butter-bar'; |
70 | 131 |
71 /** @const @private */ | 132 /** @const @private */ |
72 remoting.ButterBar.kMessageId_ = 'butter-bar-message'; | 133 remoting.ButterBar.kMessageId_ = 'butter-bar-message'; |
73 /** @const @private */ | 134 /** @const @private */ |
74 remoting.ButterBar.kDismissId_ = 'butter-bar-dismiss'; | 135 remoting.ButterBar.kDismissId_ = 'butter-bar-dismiss'; |
75 | 136 |
76 /** @const @private */ | 137 /** @const @private */ |
77 remoting.ButterBar.kSurveyStorageKey_ = 'feedback-survey-dismissed'; | 138 remoting.ButterBar.kStorageKey_ = 'message-state'; |
78 | 139 |
79 /** | 140 /** @const @private */ |
80 * Hide the butter bar request and record some basic information about the | 141 remoting.ButterBar.kTimeout_ = 7 * 24 * 60 * 60 * 1000; // 1 week |
81 * current state of the world in synced storage. This may be useful in the | |
82 * future if we want to show the request again. At the moment, the data itself | |
83 * is ignored; only its presence or absence is important. | |
84 * | |
85 * @param {boolean} accepted True if the user clicked the "accept" link; | |
86 * false if they clicked the close icon. | |
87 */ | |
88 remoting.ButterBar.prototype.dismiss = function(accepted) { | |
89 var value = {}; | |
90 value[this.storageKey_] = { | |
91 optIn: accepted, | |
92 date: new Date(), | |
93 version: chrome.runtime.getManifest().version | |
94 }; | |
95 chrome.storage.sync.set(value); | |
96 | |
97 document.getElementById(remoting.ButterBar.kId_).hidden = true; | |
98 }; | |
OLD | NEW |