OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <script> | 3 <script> |
4 var animationFrames = 36; | 4 var animationFrames = 36; |
5 var animationSpeed = 10; // ms | 5 var animationSpeed = 10; // ms |
6 var browserActionWidth = 27; | 6 var canvas; |
7 var browserActionHeight = 23; | |
8 var canvasContext; | 7 var canvasContext; |
9 var gmail = "http://mail.google.com/"; | 8 var gmail = "http://mail.google.com/"; |
10 var gmailAtomRef = "http://mail.google.com/mail/feed/atom"; | 9 var gmailAtomRef = "http://mail.google.com/mail/feed/atom"; |
11 var loggedInImage; | 10 var loggedInImage; |
12 var loggedOutImage; | |
13 var pollInterval = 1000 * 10; // 10 seconds | 11 var pollInterval = 1000 * 10; // 10 seconds |
14 var requestTimeout = 1000 * 2; // 5 seconds | 12 var requestTimeout = 1000 * 2; // 5 seconds |
15 var rotation = 0; | 13 var rotation = 0; |
16 var unreadCount = 0; | 14 var unreadCount = -1; |
| 15 var loadingAnimation = new LoadingAnimation(); |
| 16 |
| 17 |
| 18 // A "loading" animation displayed while we wait for the first response from |
| 19 // Gmail. This animates the badge text with a dot that cycles from left to |
| 20 // right. |
| 21 function LoadingAnimation() { |
| 22 this.timerId_ = 0; |
| 23 this.maxCount_ = 8; // Total number of states in animation |
| 24 this.current_ = 0; // Current state |
| 25 this.maxDot_ = 4; // Max number of dots in animation |
| 26 } |
| 27 |
| 28 LoadingAnimation.prototype.paintFrame = function() { |
| 29 var text = ""; |
| 30 for (var i = 0; i < this.maxDot_; i++) { |
| 31 text += (i == this.current_) ? "." : " "; |
| 32 } |
| 33 if (this.current_ >= this.maxDot_) |
| 34 text += ""; |
| 35 |
| 36 chrome.browserAction.setBadgeText({text:text}); |
| 37 this.current_++; |
| 38 if (this.current_ == this.maxCount_) |
| 39 this.current_ = 0; |
| 40 } |
| 41 |
| 42 LoadingAnimation.prototype.start = function() { |
| 43 if (this.timerId_) |
| 44 return; |
| 45 |
| 46 var self = this; |
| 47 this.timerId_ = window.setInterval(function() { |
| 48 self.paintFrame(); |
| 49 }, 100); |
| 50 } |
| 51 |
| 52 LoadingAnimation.prototype.stop = function() { |
| 53 if (!this.timerId_) |
| 54 return; |
| 55 |
| 56 window.clearInterval(this.timerId_); |
| 57 this.timerId_ = 0; |
| 58 } |
17 | 59 |
18 | 60 |
19 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) { | 61 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) { |
20 if (changeInfo.url && changeInfo.url.indexOf(gmail) == 0) { | 62 if (changeInfo.url && changeInfo.url.indexOf(gmail) == 0) { |
21 console.log("saw gmail! updating..."); | 63 console.log("saw gmail! updating..."); |
22 getInboxCount(function(count) { | 64 getInboxCount(function(count) { |
23 updateUnreadCount(count); | 65 updateUnreadCount(count); |
24 }); | 66 }); |
25 } | 67 } |
26 }); | 68 }); |
27 | 69 |
| 70 |
28 function init() { | 71 function init() { |
29 var canvas = document.getElementById('canvas'); | 72 canvas = document.getElementById('canvas'); |
30 loggedInImage = document.getElementById('logged_in'); | 73 loggedInImage = document.getElementById('logged_in'); |
31 loggedOutImage = document.getElementById('logged_out'); | |
32 canvasContext = canvas.getContext('2d'); | 74 canvasContext = canvas.getContext('2d'); |
| 75 |
| 76 chrome.browserAction.setIcon({path: "gmail_logged_in.png"}); |
| 77 loadingAnimation.start(); |
| 78 |
33 startRequest(); | 79 startRequest(); |
34 } | 80 } |
35 | 81 |
36 function scheduleRequest() { | 82 function scheduleRequest() { |
37 window.setTimeout(startRequest, pollInterval); | 83 window.setTimeout(startRequest, pollInterval); |
38 } | 84 } |
39 | 85 |
40 // ajax stuff | 86 // ajax stuff |
41 function startRequest() { | 87 function startRequest() { |
42 getInboxCount( | 88 getInboxCount( |
43 function(count) { | 89 function(count) { |
| 90 loadingAnimation.stop(); |
44 updateUnreadCount(count); | 91 updateUnreadCount(count); |
45 scheduleRequest(); | 92 scheduleRequest(); |
46 }, | 93 }, |
47 function() { | 94 function() { |
| 95 loadingAnimation.stop(); |
48 showLoggedOut(); | 96 showLoggedOut(); |
49 scheduleRequest(); | 97 scheduleRequest(); |
50 } | 98 } |
51 ); | 99 ); |
52 } | 100 } |
53 | 101 |
54 function getInboxCount(onSuccess, onError) { | 102 function getInboxCount(onSuccess, onError) { |
55 var xhr = new XMLHttpRequest(); | 103 var xhr = new XMLHttpRequest(); |
56 var abortTimerId = window.setTimeout(function() { | 104 var abortTimerId = window.setTimeout(function() { |
57 xhr.abort(); | 105 xhr.abort(); |
(...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
133 rotation += 1/animationFrames; | 181 rotation += 1/animationFrames; |
134 drawIconAtRotation(); | 182 drawIconAtRotation(); |
135 | 183 |
136 if (rotation <= 1) { | 184 if (rotation <= 1) { |
137 setTimeout("animateFlip()", animationSpeed); | 185 setTimeout("animateFlip()", animationSpeed); |
138 } else { | 186 } else { |
139 rotation = 0; | 187 rotation = 0; |
140 drawIconAtRotation(); | 188 drawIconAtRotation(); |
141 chrome.browserAction.setBadgeText({text:unreadCount}); | 189 chrome.browserAction.setBadgeText({text:unreadCount}); |
142 chrome.browserAction.setBadgeBackgroundColor({color:[208, 0, 24, 255]}); | 190 chrome.browserAction.setBadgeBackgroundColor({color:[208, 0, 24, 255]}); |
143 chrome.browserAction.setTitle({title:unreadCount + " unread emails"}); | |
144 } | 191 } |
145 } | 192 } |
146 | 193 |
147 function showLoggedOut() { | 194 function showLoggedOut() { |
148 canvasContext.save(); | 195 unreadCount = -1; |
149 canvasContext.clearRect(0, 0, browserActionWidth, browserActionHeight); | 196 chrome.browserAction.setIcon({path:"gmail_not_logged_in.png"}); |
150 canvasContext.translate(browserActionWidth/2, browserActionHeight/2); | |
151 canvasContext.drawImage(loggedOutImage, | |
152 -loggedOutImage.width/2 - 1, -loggedOutImage.height/2); | |
153 canvasContext.restore(); | |
154 | |
155 chrome.browserAction.setIcon({imageData:canvasContext.getImageData(0, 0, | |
156 browserActionWidth,browserActionHeight)}); | |
157 chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]}); | 197 chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]}); |
158 chrome.browserAction.setBadgeText({text:"?"}); | 198 chrome.browserAction.setBadgeText({text:"?"}); |
159 } | 199 } |
160 | 200 |
161 function drawIconAtRotation() { | 201 function drawIconAtRotation() { |
162 canvasContext.save(); | 202 canvasContext.save(); |
163 canvasContext.clearRect(0, 0, browserActionWidth, browserActionHeight); | 203 canvasContext.clearRect(0, 0, canvas.width, canvas.height); |
164 canvasContext.translate(browserActionWidth/2, browserActionHeight/2); | 204 canvasContext.translate( |
| 205 Math.ceil(canvas.width/2), |
| 206 Math.ceil(canvas.height/2)); |
165 canvasContext.rotate(2*Math.PI*ease(rotation)); | 207 canvasContext.rotate(2*Math.PI*ease(rotation)); |
166 canvasContext.drawImage(loggedInImage, | 208 canvasContext.drawImage(loggedInImage, |
167 -loggedInImage.width/2 - 1, -loggedInImage.height/2); | 209 -Math.ceil(canvas.width/2), |
| 210 -Math.ceil(canvas.height/2)); |
168 canvasContext.restore(); | 211 canvasContext.restore(); |
169 | 212 |
170 chrome.browserAction.setIcon({imageData:canvasContext.getImageData(0, 0, | 213 chrome.browserAction.setIcon({imageData:canvasContext.getImageData(0, 0, |
171 browserActionWidth,browserActionHeight)}); | 214 canvas.width,canvas.height)}); |
172 } | 215 } |
173 | 216 |
174 function goToInbox() { | 217 function goToInbox() { |
175 chrome.tabs.create({url: gmail}); | 218 chrome.tabs.create({url: gmail}); |
176 } | 219 } |
177 | 220 |
178 // Called when the user clicks on the browser action. | 221 // Called when the user clicks on the browser action. |
179 chrome.browserAction.onClicked.addListener(function(tab) { | 222 chrome.browserAction.onClicked.addListener(function(tab) { |
180 goToInbox(); | 223 goToInbox(); |
181 }); | 224 }); |
182 | 225 |
183 </script> | 226 </script> |
184 </head> | 227 </head> |
185 <body onload="init()"> | 228 <body onload="init()"> |
186 <img id="logged_in" src="gmail_logged_in.png"> | 229 <img id="logged_in" src="gmail_logged_in.png"> |
187 <img id="logged_out" src="gmail_not_logged_in.png"> | 230 <canvas id="canvas" width="19" height="19"> |
188 <canvas id="canvas" width="27" height="23"> | |
189 </body> | 231 </body> |
190 </html> | 232 </html> |
191 | 233 |
OLD | NEW |