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

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

Issue 264046: Update browser actions api to be like new design doc. (Closed)
Patch Set: rebase Created 11 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
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 browserActionWidth = 27;
7 var browserActionHeight = 23; 7 var browserActionHeight = 23;
8 var canvasContext; 8 var canvasContext;
9 var gmail = "http://mail.google.com/"; 9 var gmail = "http://mail.google.com/";
10 var gmailAtomRef = "http://mail.google.com/mail/feed/atom"; 10 var gmailAtomRef = "http://mail.google.com/mail/feed/atom";
11 var gmailIconName = 'gmail_logged_in.png'; 11 var loggedInImage;
12 var gmailImage; 12 var loggedOutImage;
13 var pollInterval = 1000 * 10; // 10 seconds 13 var pollInterval = 1000 * 10; // 10 seconds
14 var requestTimeout = 1000 * 2; // 5 seconds 14 var requestTimeout = 1000 * 2; // 5 seconds
15 var rotation = 0; 15 var rotation = 0;
16 var unreadCount = 0; 16 var unreadCount = 0;
17 17
18 18
19 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) { 19 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
20 if (changeInfo.url && changeInfo.url.indexOf(gmail) == 0) { 20 if (changeInfo.url && changeInfo.url.indexOf(gmail) == 0) {
21 console.log("saw gmail! updating..."); 21 console.log("saw gmail! updating...");
22 getInboxCount(function(count) { 22 getInboxCount(function(count) {
23 updateUnreadCount(count); 23 updateUnreadCount(count);
24 }); 24 });
25 } 25 }
26 }); 26 });
27 27
28 function init() { 28 function init() {
29 chrome.browserAction.setBadgeBackgroundColor([230, 190, 190, 190]); 29 var canvas = document.getElementById('canvas');
30 chrome.browserAction.setBadgeText("?"); 30 loggedInImage = document.getElementById('logged_in');
31 31 loggedOutImage = document.getElementById('logged_out');
32 var canvas = document.getElementById('canvas');
33 canvasContext = canvas.getContext('2d'); 32 canvasContext = canvas.getContext('2d');
34 gmailImage = new Image(); 33 startRequest();
35 gmailImage.onload = function() {
36 window.setTimeout(startRequest, 0);
37 }
38 gmailImage.src = gmailIconName;
39 } 34 }
40 35
41 function scheduleRequest() { 36 function scheduleRequest() {
42 window.setTimeout(startRequest, pollInterval); 37 window.setTimeout(startRequest, pollInterval);
43 } 38 }
44 39
45 // ajax stuff 40 // ajax stuff
46 function startRequest() { 41 function startRequest() {
47 getInboxCount( 42 getInboxCount(
48 function(count) { 43 function(count) {
49 updateUnreadCount(count); 44 updateUnreadCount(count);
50 scheduleRequest(); 45 scheduleRequest();
51 }, 46 },
52 function() { 47 function() {
48 showLoggedOut();
53 scheduleRequest(); 49 scheduleRequest();
54 } 50 }
55 ); 51 );
56 } 52 }
57 53
58 function getInboxCount(onSuccess, onError) { 54 function getInboxCount(onSuccess, onError) {
59 var xhr = new XMLHttpRequest(); 55 var xhr = new XMLHttpRequest();
60 var abortTimerId = window.setTimeout(function() { 56 var abortTimerId = window.setTimeout(function() {
61 xhr.abort(); 57 xhr.abort();
62 onError(); 58 onError();
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after
135 131
136 function animateFlip() { 132 function animateFlip() {
137 rotation += 1/animationFrames; 133 rotation += 1/animationFrames;
138 drawIconAtRotation(); 134 drawIconAtRotation();
139 135
140 if (rotation <= 1) { 136 if (rotation <= 1) {
141 setTimeout("animateFlip()", animationSpeed); 137 setTimeout("animateFlip()", animationSpeed);
142 } else { 138 } else {
143 rotation = 0; 139 rotation = 0;
144 drawIconAtRotation(); 140 drawIconAtRotation();
145 chrome.browserAction.setBadgeText(unreadCount); 141 chrome.browserAction.setBadgeText({text:unreadCount});
146 chrome.browserAction.setBadgeBackgroundColor([255, 208, 0, 24]); 142 chrome.browserAction.setBadgeBackgroundColor({color:[255, 208, 0, 24]});
147 chrome.browserAction.setName(unreadCount + " unread emails"); 143 chrome.browserAction.setTitle({title:unreadCount + " unread emails"});
148 } 144 }
149 } 145 }
150 146
147 function showLoggedOut() {
148 canvasContext.save();
149 canvasContext.clearRect(0, 0, browserActionWidth, browserActionHeight);
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:[230, 190, 190, 190]});
158 chrome.browserAction.setBadgeText({text:"?"});
159 }
160
151 function drawIconAtRotation() { 161 function drawIconAtRotation() {
152 canvasContext.save(); 162 canvasContext.save();
153 canvasContext.clearRect(0, 0, browserActionWidth, browserActionHeight); 163 canvasContext.clearRect(0, 0, browserActionWidth, browserActionHeight);
154 canvasContext.translate(browserActionWidth/2, browserActionHeight/2); 164 canvasContext.translate(browserActionWidth/2, browserActionHeight/2);
155 canvasContext.rotate(2*Math.PI*ease(rotation)); 165 canvasContext.rotate(2*Math.PI*ease(rotation));
156 canvasContext.drawImage(gmailImage, -gmailImage.width/2, 166 canvasContext.drawImage(loggedInImage,
157 -gmailImage.height/2); 167 -loggedInImage.width/2 - 1, -loggedInImage.height/2);
158 canvasContext.restore(); 168 canvasContext.restore();
159 169
160 chrome.browserAction.setIcon(canvasContext.getImageData(0, 0, 170 chrome.browserAction.setIcon({imageData:canvasContext.getImageData(0, 0,
161 browserActionWidth,browserActionHeight)); 171 browserActionWidth,browserActionHeight)});
162 } 172 }
163 173
164 function goToInbox() { 174 function goToInbox() {
165 chrome.tabs.create({url: gmail}); 175 chrome.tabs.create({url: gmail});
166 } 176 }
167 177
168 // Called when the user clicks on the browser action. 178 // Called when the user clicks on the browser action.
169 chrome.browserAction.onClicked.addListener(function(windowId) { 179 chrome.browserAction.onClicked.addListener(function(tab) {
170 goToInbox(); 180 goToInbox();
171 }); 181 });
172 182
173 </script> 183 </script>
174 </head> 184 </head>
175 <body onload="init()"> 185 <body onload="init()">
186 <img id="logged_in" src="gmail_logged_in.png">
187 <img id="logged_out" src="gmail_not_logged_in.png">
176 <canvas id="canvas" width="27" height="23"> 188 <canvas id="canvas" width="27" height="23">
177 </body> 189 </body>
178 </html> 190 </html>
179 191
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698