| 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 |
|---|
Chromium Code Reviews
Issue 338013:
Polish to the gmail checker sample. (Closed)
