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

Side by Side Diff: chrome/test/data/extensions/samples/gmail_browser_action/background.html

Issue 338013: Polish to the gmail checker sample. (Closed)
Patch Set: Remove dead code Created 11 years, 1 month 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
« no previous file with comments | « no previous file | chrome/test/data/extensions/samples/gmail_browser_action/gmail_logged_in.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
OLDNEW
« no previous file with comments | « no previous file | chrome/test/data/extensions/samples/gmail_browser_action/gmail_logged_in.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698