Permalink
Browse files

updating the way that the toolbar button is updated

  • Loading branch information...
1 parent 54b545e commit 0abf59787cb97141a076f59d91a7a68c972e04d6 @erikvold erikvold committed Aug 19, 2012
Showing with 107 additions and 60 deletions.
  1. +20 −17 data/cheevo.html
  2. +9 −0 data/icon-generator.html
  3. +31 −0 data/icon-generator.js
  4. +17 −0 lib/icon-generator.js
  5. +9 −43 lib/main.js
  6. +21 −0 test/test-main.js
View
37 data/cheevo.html
@@ -1,20 +1,23 @@
<!DOCTYPE html>
<head>
-<link rel="stylesheet" id="cheevo-stylesheet" />
-<link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADP0lEQVR42oWSe0hTYRjG14WSyn0nNSu6QP1TZIVJRhej5i1Mc4na1NlNh4qVucqypBsWlgujUcustbI2ijK1YQgbXcw27eIls5qEZdbZzjYvy53j2dx8OydcFHT54wcfPO/zfO/3vS9nVtC4nygyMR7DNYZahiYGnGXkXDui8X71cOQZWABDMUPblQzseneretD6scFpt3S43LQV3IME2E2tLnOHxtn1QjnI1jC1jxnUDAmc0nTszPs6BTnY3+2+e3SF+dvnR24HUQd0932gPiiAfCcF8u1ZIN9IwPr8sPtyhg9uNUiG8JYDDsUOfyNHloY1k+Ymlyp/kfmiyBfHX5U6nV0qoAwXf5gGmo/At+d7wa7Lhk/qJKd0G/ZEKZ5pNtwIpW8XzDVzSjZjdzp1MrqyKMpanIquvX1wkKINUrC3noCBl/lg0++C/joR2B6mQosinJKkIsXl7GmmTlWYSybyNXKOCFCc8lCwhXhX45SmTzM+uZJiI1uYWxv3QH99FvQ92go9tZvAWs0HjSTIdkqI5G3qSKp6/5z+wmSUx/7k+EMJSKyVxdnatFJSvifAbNPthIGnIujVpIBFHQeWivXwpTwUZFnTiRppYJ++JJA6LkBXGe9ENmBU4AovLD8endGXC+01F/h97cpox4BWAETlBsBVEUCU86DhxGJHmXi2uU25ii5KnmzM4XPZcY72zHPMtijvhQXxmOarPtdRnje/p7cyGkw3w+DLpRD4fG4ZXMqaYf1QG04XCf1MObHcRMYzlvX+ukhj9/HR6frzIXZJ+kzi6clACpethO6SYNDmzaNyN6BbjaVrqGOCKcb48Elcj++3Tdy+jrsgJwZJkiO8NxYm+xMdRUHDLIUpUwlhhHdsbgwqy4jihrDP/mPASFteonVo2e5o7PXr00td7+XhLvYcunqCD6t5Wv9bAGdXFLZkX5yf8dndGLKrgj/89UHScFVpok0c62dktEi25p8BWZHYuWf3EqkefSZYtELo1YmA6pJBu66MZjTVfwPSwjBp/XU+iWuShqBTDGAsAIvh8FB7fTGdJ5hnYvSp/wzYtIa7XLgWybfwUENaKIazbOVhzZt5qCppLeJ7PtDDd6JR1S9cWTApAAAAAElFTkSuQmCC" />
-<title></title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <link rel="stylesheet" id="cheevo-stylesheet" />
+ <link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADP0lEQVR42oWSe0hTYRjG14WSyn0nNSu6QP1TZIVJRhej5i1Mc4na1NlNh4qVucqypBsWlgujUcustbI2ijK1YQgbXcw27eIls5qEZdbZzjYvy53j2dx8OydcFHT54wcfPO/zfO/3vS9nVtC4nygyMR7DNYZahiYGnGXkXDui8X71cOQZWABDMUPblQzseneretD6scFpt3S43LQV3IME2E2tLnOHxtn1QjnI1jC1jxnUDAmc0nTszPs6BTnY3+2+e3SF+dvnR24HUQd0932gPiiAfCcF8u1ZIN9IwPr8sPtyhg9uNUiG8JYDDsUOfyNHloY1k+Ymlyp/kfmiyBfHX5U6nV0qoAwXf5gGmo/At+d7wa7Lhk/qJKd0G/ZEKZ5pNtwIpW8XzDVzSjZjdzp1MrqyKMpanIquvX1wkKINUrC3noCBl/lg0++C/joR2B6mQosinJKkIsXl7GmmTlWYSybyNXKOCFCc8lCwhXhX45SmTzM+uZJiI1uYWxv3QH99FvQ92go9tZvAWs0HjSTIdkqI5G3qSKp6/5z+wmSUx/7k+EMJSKyVxdnatFJSvifAbNPthIGnIujVpIBFHQeWivXwpTwUZFnTiRppYJ++JJA6LkBXGe9ENmBU4AovLD8endGXC+01F/h97cpox4BWAETlBsBVEUCU86DhxGJHmXi2uU25ii5KnmzM4XPZcY72zHPMtijvhQXxmOarPtdRnje/p7cyGkw3w+DLpRD4fG4ZXMqaYf1QG04XCf1MObHcRMYzlvX+ukhj9/HR6frzIXZJ+kzi6clACpethO6SYNDmzaNyN6BbjaVrqGOCKcb48Elcj++3Tdy+jrsgJwZJkiO8NxYm+xMdRUHDLIUpUwlhhHdsbgwqy4jihrDP/mPASFteonVo2e5o7PXr00td7+XhLvYcunqCD6t5Wv9bAGdXFLZkX5yf8dndGLKrgj/89UHScFVpok0c62dktEi25p8BWZHYuWf3EqkefSZYtELo1YmA6pJBu66MZjTVfwPSwjBp/XU+iWuShqBTDGAsAIvh8FB7fTGdJ5hnYvSp/wzYtIa7XLgWybfwUENaKIazbOVhzZt5qCppLeJ7PtDDd6JR1S9cWTApAAAAAElFTkSuQmCC" />
+ <title></title>
+</head>
<body>
-<div id="wrapper">
- <header>
- <h1 id="cheevo-h1"></h1>
- <h2 id="cheevo-h2"></h2>
- <p id="cheevo-message"></p>
- <a href="https://twitter.com/share" id="twitterLink" class="twitter-share-button" data-url="http://msuja.ws/cheevos" data-text="" data-count="none" data-via="weinjared">Tweet</a><script type="text/javascript" id="twitterScript"></script>
- </header>
- <ul id="cheevo-blocks"></ul>
-</div>
-<footer>
- <a href="http://msuja.ws/cheevos" id="addOnHomepageLink"></a>
- <a href="https://github.com/msujaws/Cheevos/issues" id="supportLink"></a>
- <a href="http://msuja.ws/" id="authorHomepageLink"></a>
-</footer>
+ <div id="wrapper">
+ <header>
+ <h1 id="cheevo-h1"></h1>
+ <h2 id="cheevo-h2"></h2>
+ <p id="cheevo-message"></p>
+ <a href="https://twitter.com/share" id="twitterLink" class="twitter-share-button" data-url="http://msuja.ws/cheevos" data-text="" data-count="none" data-via="weinjared">Tweet</a><script type="text/javascript" id="twitterScript"></script>
+ </header>
+ <ul id="cheevo-blocks"></ul>
+ </div>
+ <footer>
+ <a href="http://msuja.ws/cheevos" id="addOnHomepageLink"></a>
+ <a href="https://github.com/msujaws/Cheevos/issues" id="supportLink"></a>
+ <a href="http://msuja.ws/" id="authorHomepageLink"></a>
+ </footer>
+</body>
View
9 data/icon-generator.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ </head>
+ <body>
+ <img id="icon" src="coins.png"/>
+ </body>
+</html>
View
31 data/icon-generator.js
@@ -0,0 +1,31 @@
+'use strict';
+
+self.port.on('icon', function(details) {
+ generateIcon(details.text);
+});
+
+function generateIcon(aOverlayText) {
+ let img = document.getElementById('icon');
+ let canvas = document.createElement('canvas');
+ canvas.setAttribute("width", 16);
+ canvas.setAttribute("height", 16);
+ let ctx = canvas.getContext("2d");
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(img, 0, 0);
+
+ if (aOverlayText) {
+ ctx.textBaseline = "top";
+ ctx.textAlign = "center";
+ ctx.font = "9px sans-serif";
+ let height = 9;
+ let y = canvas.height - height - 1; // 1 = bottom padding
+ ctx.fillStyle = "#000";
+ ctx.strokeStyle = "#F5DEB3";
+ ctx.lineWidth = 4;
+ ctx.strokeText(aOverlayText, canvas.width / 2, y);
+ ctx.fillText(aOverlayText, canvas.width / 2, y);
+ }
+
+ self.port.emit('icon', {icon: canvas.toDataURL("image/png")});
+}
View
17 lib/icon-generator.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const {data} = require('self');
+
+exports.generate = function(options) {
+ let text = options.text || "";
+ let callback = options.onReady;
+
+ let port = require("page-worker").Page({
+ contentScriptFile: data.url('icon-generator.js'),
+ contentURL: data.url('icon-generator.html')
+ }).port;
+ port.on('icon', function(details) {
+ callback({icon: details.icon});
+ });
+ port.emit('icon', {text: text});
+}
View
52 lib/main.js
@@ -9,7 +9,6 @@
panelFactory = require("panel"),
ss = require("simple-storage").storage,
tabs = require("tabs"),
- tbb = require("toolbarbutton"),
{unload} = require("unload+"),
urlFactory = require("url"),
winUtils = require("window-utils"),
@@ -377,7 +376,7 @@
addObs(cheevos.pmLoginAdded.obs, onPMLoginAdded, this);
tabs.on('ready', onDOMContentLoaded);
- let toolbarbutton = tbb.ToolbarButton({
+ let toolbarbutton = require('toolbarbutton').ToolbarButton({
id: "cheevos-toolbarbutton",
label: _("points", acquiredPoints.toString()),
title: _("addOnShortName"),
@@ -512,48 +511,15 @@
function updateToolbarButtonLabel(aPoints) {
let text = _("points", aPoints.toString());
- for each (var win in winUtils.windowIterator()) {
- if ("chrome://browser/content/browser.xul" != win.location) return;
-
- let doc = win.document;
- let $ = function (id) doc.getElementById(id);
- let t = $("cheevos-toolbarbutton");
- if (t) {
- t.setAttribute("label", text);
- t.setAttribute("tooltiptext", text);
- _generateNewIcon(t, aPoints.toString());
- }
- }
- }
- function _generateNewIcon(t, aOverlayText) {
- let XHTML_NS = 'http://www.w3.org/1999/xhtml';
- let doc = t.ownerDocument;
- let canvas = doc.createElementNS(XHTML_NS, 'canvas');
- canvas.setAttribute("width", 16);
- canvas.setAttribute("height", 16);
- let ctx = canvas.getContext("2d");
-
- let img = doc.createElementNS(XHTML_NS, 'img');
- img.onload = function() {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.drawImage(img, 0, 0);
-
- if (aOverlayText) {
- ctx.textBaseline = "top";
- ctx.textAlign = "center";
- ctx.font = "9px sans-serif";
- let height = 9;
- let y = canvas.height - height - 1; // 1 = bottom padding
- ctx.fillStyle = "#000";
- ctx.strokeStyle = "#F5DEB3";
- ctx.lineWidth = 4;
- ctx.strokeText(aOverlayText, canvas.width / 2, y);
- ctx.fillText(aOverlayText, canvas.width / 2, y);
- t.setAttribute("image", canvas.toDataURL("image/png"));
- }
- };
- img.src = t.getAttribute("image");
+ toolbarbutton.label = text;
+ toolbarbutton.tooltiptext = text;
+ require('./icon-generator').generate({
+ onReady: function({icon}) {
+ toolbarbutton.image = icon;
+ },
+ text: aPoints.toString()
+ });
}
function onObservation(cheevo, shouldShow, specificAward) {
View
21 test/test-main.js
@@ -3,6 +3,9 @@
const { Loader } = require('test-harness/loader');
const { data } = require('self');
const tabs = require('tabs');
+const windowUtils = require("window-utils");
+
+function $(id) windowUtils.activeBrowserWindow.document.getElementById(id);
exports.testStylesheetIsRegistered = function(test) {
let loader = Loader(module);
@@ -31,3 +34,21 @@ exports.testAboutCheevos = function(test) {
}
});
};
+
+exports.testIconGenerator = function(test) {
+ test.waitUntilDone();
+ let loader = Loader(module);
+ loader.require('main');
+ let {generate} = loader.require('icon-generator');
+ generate({
+ onReady: function({icon}) {
+ test.assertEqual($('cheevos-toolbarbutton').image, icon, 'the image is correct');
+
+ loader.unload();
+
+ // end test
+ test.done();
+ },
+ text: '5'
+ });
+};

0 comments on commit 0abf597

Please sign in to comment.