Permalink
Browse files

Bug 790328: Use `addon` in widget/panel documents of library detector.

  • Loading branch information...
1 parent 9f77a34 commit cacbeff84afcaeff0037e092c07e84957edddea0 @ochameau ochameau committed Sep 12, 2012
@@ -0,0 +1,16 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Library detector</title>
+ <script type="text/javascript">
+ addon.on('message', function (libraryInfo) {
+ document.body.innerHTML = libraryInfo;
+ });
+ </script>
+</head>
+<body></body>
+</html>
@@ -0,0 +1,50 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<html>
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Library detector</title>
+ <style type="text/css" media="all">
+ img {
+ display: inline;
+ width: 16px;
+ height: 16px;
+ }
+ </style>
+ <script type="text/javascript">
+ var icons = {
+ 'jQuery' : 'jquery.ico',
+ 'jQuery UI' : 'jquery_ui.ico',
+ 'MooTools' : 'mootools.png',
+ 'YUI' : 'yui.ico',
+ 'Closure' : 'closure.ico',
+ 'Modernizr': 'modernizr.ico',
+ };
+
+ // Listen for mouse events over icons, in order to send a message up to
+ // the panel and update its content with library name and version
+ window.addEventListener('mouseover', function (event) {
+ if (event.target.tagName == 'IMG') {
+ addon.port.emit('setLibraryInfo', event.target.title);
+ }
+ }, false);
+
+ addon.port.on('update', function (libraries) {
+ // Cleanup previous content
+ document.body.innerHTML = '';
+
+ // Create new updated list of icons
+ libraries.forEach(function(library) {
+ var img = document.createElement('img');
+ img.setAttribute('src', 'icons/' + icons[library.name]);
+ img.setAttribute('title', library.name + "<br>Version: " +
+ library.version);
+ document.body.appendChild(img);
+ });
+ });
+ </script>
+</head>
+<body></body>
+</html>
@@ -1,14 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-
-function setLibraryInfo(element) {
- self.port.emit('setLibraryInfo', element.target.title);
-}
-
-var elements = document.getElementsByTagName('img');
-
-for (var i = 0; i < elements.length; i++) {
- elements[i].addEventListener('mouseover', setLibraryInfo, false);
-}
@@ -8,66 +8,26 @@ const data = require('self').data;
const pageMod = require('page-mod');
const panel = require('panel');
-const htmlContentPreamble =
- '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"' +
- ' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' +
- ' <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">' +
- ' <head>' +
- ' <style type="text/css" media="all">' +
- ' img {display: inline;}' +
- ' </style>' +
- ' </head>' +
- ' <body>'
-
-const htmlContentPostamble =
- ' </body>' +
- '</html>'
-
-const icons = {
- 'jQuery' : 'jquery.ico',
- 'jQuery UI' : 'jquery_ui.ico',
- 'MooTools' : 'mootools.png',
- 'YUI' : 'yui.ico',
- 'Closure' : 'closure.ico',
- 'Modernizr': 'modernizr.ico',
-}
-
-const ICON_WIDTH = 32;
-
-function buildIconHtml(imageName, libraryInfo) {
- return '<img src="' + data.url("icons/" + imageName) + '" title="' + libraryInfo + '">';
-}
-
-function buildWidgetViewContent(libraryList) {
- widgetContent = htmlContentPreamble;
- libraryList.forEach(function(library) {
- widgetContent += buildIconHtml(icons[library.name], library.name + "<br>Version: " + library.version);
- });
- widgetContent += htmlContentPostamble;
- return widgetContent;
-}
+const ICON_WIDTH = 16;
function updateWidgetView(tab) {
let widgetView = widget.getView(tab.window);
if (!tab.libraries) {
tab.libraries = [];
}
- widgetView.content = buildWidgetViewContent(tab.libraries);
+ widgetView.port.emit("update", tab.libraries);
widgetView.width = tab.libraries.length * ICON_WIDTH;
}
var widget = widgets.Widget({
id: "library-detector",
label: "Library Detector",
- content: "<html></html>",
- contentScriptFile: data.url("widget.js"),
+ contentURL: data.url("widget.html"),
panel: panel.Panel({
width: 240,
height: 60,
- contentScript: 'self.on("message", function(libraryInfo) {' +
- ' window.document.body.innerHTML = libraryInfo;' +
- '});'
- }),
+ contentURL: data.url("panel.html")
+ })
});
widget.port.on('setLibraryInfo', function(libraryInfo) {

0 comments on commit cacbeff

Please sign in to comment.