diff --git a/packages/addon-kit/docs/widget.md b/packages/addon-kit/docs/widget.md index aea05e50c..098acf5ca 100644 --- a/packages/addon-kit/docs/widget.md +++ b/packages/addon-kit/docs/widget.md @@ -61,28 +61,20 @@ Widgets emit the following types of [events](#guide/events). ### click ### -This event is emitted when the widget is clicked. Listeners are passed an event -object that has a single property named `emitter` whose value is the widget that -was clicked. +This event is emitted when the widget is clicked. ### message ### This event is emitted when the widget's content scripts post a message. -Listeners are passed an event object that has two properties named `emitter` and -`data`. `emitter` is the widget that was clicked. `data` is the message posted -by the content script. +Listeners are passed the message as their first argument. ### mouseover ### -This event is emitted when the user moves the mouse over the widget. Listeners -are passed an event object that has a single property named `emitter` whose -value is the widget that was clicked. +This event is emitted when the user moves the mouse over the widget. ### mouseout ### This event is emitted when the user moves the mouse away from the widget. -Listeners are passed an event object that has a single property named `emitter` -whose value is the widget that was clicked. ## Examples ## @@ -98,7 +90,7 @@ create your content scripts in separate files and pass their URLs using the widgets.Widget({ label: "Widget with an image and a click handler", contentURL: "http://www.google.com/favicon.ico", - onClick: function(event) { + onClick: function() { require("tabs").activeTab.url = "http://www.google.com/"; } }); @@ -107,10 +99,10 @@ create your content scripts in separate files and pass their URLs using the widgets.Widget({ label: "Widget with changing image on mouseover", contentURL: "http://www.yahoo.com/favicon.ico", - onMouseover: function(event) { + onMouseover: function() { this.contentURL = "http://www.bing.com/favicon.ico"; }, - onMouseout: function(event) { + onMouseout: function() { this.contentURL = "http://www.yahoo.com/favicon.ico"; } }); @@ -134,11 +126,10 @@ create your content scripts in separate files and pass their URLs using the 'setTimeout(function() {' + ' document.location = "http://www.flickr.com/explore/";' + '}, 5 * 60 * 1000);', - onMessage: function(event) { - var imgSrc = event.data; + onMessage: function(imgSrc) { this.contentURL = imgSrc; }, - onClick: function(event) { + onClick: function() { require("tabs").activeTab.url = this.contentURL; } }); diff --git a/packages/addon-kit/lib/widget.js b/packages/addon-kit/lib/widget.js index ec2ad524f..7e3b14e4f 100644 --- a/packages/addon-kit/lib/widget.js +++ b/packages/addon-kit/lib/widget.js @@ -154,9 +154,9 @@ const Widget = Trait.compose(Loader, Trait.compose({ console.exception(e) }, - _onEvent: function Widget__onEvent(type, target, eventObj, domNode) { + _onEvent: function Widget__onEvent(type, target, eventData, domNode) { if (target === this._public) { - this._emitEventObject(type, eventObj); + this._emit(type, eventData); // Special case for click events: if the widget doesn't have a click // handler, but it does have a panel, display the panel. @@ -512,7 +512,7 @@ BrowserWindow.prototype = { allow: item.widget.allow, onMessage: function(message) { require("timer").setTimeout(function() { - eventBus._emit("event", "message", item.widget, { data: message }); + eventBus._emit("event", "message", item.widget, message); }, 0); } }); @@ -536,7 +536,7 @@ BrowserWindow.prototype = { // Proxy event to the widget require("timer").setTimeout(function() { - eventBus._emit("event", EVENTS[e.type], item.widget, {}, item.node); + eventBus._emit("event", EVENTS[e.type], item.widget, null, item.node); }, 0); }; diff --git a/packages/addon-kit/tests/test-widget.js b/packages/addon-kit/tests/test-widget.js index c36b5da15..f1e339970 100644 --- a/packages/addon-kit/tests/test-widget.js +++ b/packages/addon-kit/tests/test-widget.js @@ -108,9 +108,9 @@ exports.testConstructor = function(test) { content: "oh yeah", contentScript: "postMessage(document.body.innerHTML);", contentScriptWhen: "ready", - onMessage: function ({ emitter: widget, data: message }) { - test.assertEqual(widget.content, message, "content matches"); - widget.destroy(); + onMessage: function (message) { + test.assertEqual(this.content, message, "content matches"); + this.destroy(); doneTest(); } })); @@ -121,9 +121,9 @@ exports.testConstructor = function(test) { content: "
oh yeah
", contentScript: "postMessage(document.body.innerHTML);", contentScriptWhen: "ready", - onMessage: function ({ emitter: widget, data: message }) { - test.assertEqual(widget.content, message, "content matches"); - widget.destroy(); + onMessage: function (message) { + test.assertEqual(this.content, message, "content matches"); + this.destroy(); doneTest(); } })); @@ -136,11 +136,11 @@ exports.testConstructor = function(test) { "tag: document.body.firstElementChild.tagName, " + "content: document.body.firstElementChild.innerHTML});", contentScriptWhen: "ready", - onMessage: function ({ emitter: widget, data: message }) { + onMessage: function (message) { test.assertEqual(message.title, "foo", "title matches"); test.assertEqual(message.tag, "P", "element matches"); test.assertEqual(message.content, "bar", "element content matches"); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -153,11 +153,11 @@ exports.testConstructor = function(test) { "tag: document.body.firstElementChild.tagName, " + "content: document.body.firstElementChild.innerHTML});", contentScriptWhen: "ready", - onMessage: function ({ emitter: widget, data: message }) { + onMessage: function (message) { test.assertEqual(message.title, "foo", "title matches"); test.assertEqual(message.tag, "P", "element matches"); test.assertEqual(message.content, "bar", "element content matches"); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -170,9 +170,9 @@ exports.testConstructor = function(test) { "evt.initEvent('click', true, true ); " + "document.getElementById('me').dispatchEvent(evt);", contentScriptWhen: "ready", - onClick: function({ emitter: widget }) { + onClick: function() { test.pass("onClick called"); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -185,9 +185,9 @@ exports.testConstructor = function(test) { "evt.initEvent('mouseover', true, true ); " + "document.getElementById('me').dispatchEvent(evt);", contentScriptWhen: "ready", - onMouseover: function({ emitter: widget }) { + onMouseover: function() { test.pass("onMouseover called"); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -200,9 +200,9 @@ exports.testConstructor = function(test) { "evt.initEvent('mouseout', true, true ); " + "document.getElementById('me').dispatchEvent(evt);", contentScriptWhen: "ready", - onMouseout: function({ emitter: widget }) { + onMouseout: function() { test.pass("onMouseout called"); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -215,9 +215,9 @@ exports.testConstructor = function(test) { "evt.initEvent('click', true, true ); " + "document.body.firstElementChild.dispatchEvent(evt);", contentScriptWhen: "ready", - onClick: function({ emitter: widget }) { + onClick: function() { test.pass("onClick called"); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -230,9 +230,9 @@ exports.testConstructor = function(test) { "evt.initEvent('mouseover', true, true ); " + "document.body.firstElementChild.dispatchEvent(evt);", contentScriptWhen: "ready", - onMouseover: function({ emitter: widget }) { + onMouseover: function() { test.pass("onMouseover called"); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -245,9 +245,9 @@ exports.testConstructor = function(test) { "evt.initEvent('mouseout', true, true ); " + "document.body.firstElementChild.dispatchEvent(evt);", contentScriptWhen: "ready", - onMouseout: function({ emitter: widget }) { + onMouseout: function() { test.pass("onMouseout called"); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -270,14 +270,14 @@ exports.testConstructor = function(test) { content: "
foo
", contentScript: "document.addEventListener('DOMContentLoaded', function() postMessage(1), false);", contentScriptWhen: "ready", - onMessage: function({ emitter: widget, data: message }) { - if (!widget.flag) { - widget.content = "
bar
"; - widget.flag = 1; + onMessage: function(message) { + if (!this.flag) { + this.content = "
bar
"; + this.flag = 1; } else { - test.assertEqual(widget.content, "
bar
"); - widget.destroy(); + test.assertEqual(this.content, "
bar
"); + this.destroy(); doneTest(); } } @@ -291,17 +291,17 @@ exports.testConstructor = function(test) { contentURL: url1, contentScript: "postMessage(document.location.href);", contentScriptWhen: "ready", - onMessage: function({ emitter: widget, data: message }) { - if (!widget.flag) { - test.assertEqual(widget.contentURL.toString(), url1); + onMessage: function(message) { + if (!this.flag) { + test.assertEqual(this.contentURL.toString(), url1); test.assertEqual(message, url1); - widget.contentURL = url2; - widget.flag = 1; + this.contentURL = url2; + this.flag = 1; } else { - test.assertEqual(widget.contentURL.toString(), url2); + test.assertEqual(this.contentURL.toString(), url2); test.assertEqual(message, url2); - widget.destroy(); + this.destroy(); doneTest(); } } @@ -314,9 +314,9 @@ exports.testConstructor = function(test) { tooltip: "foo", contentScript: "document.addEventListener('DOMContentLoaded', function() postMessage(1), false);", contentScriptWhen: "start", - onMessage: function({ emitter: widget, data: message }) { - test.assertEqual(widget.tooltip, "foo", "tooltip matches"); - widget.destroy(); + onMessage: function(message) { + test.assertEqual(this.tooltip, "foo", "tooltip matches"); + this.destroy(); doneTest(); } })); @@ -327,9 +327,9 @@ exports.testConstructor = function(test) { content: "oh yeah", contentScript: "document.addEventListener('DOMContentLoaded', function() postMessage(1), false);", contentScriptWhen: "start", - onMessage: function({ emitter: widget, data: message }) { - test.assertEqual(widget.tooltip, widget.label, "tooltip fallbacks to label"); - widget.destroy(); + onMessage: function(message) { + test.assertEqual(this.tooltip, this.label, "tooltip fallbacks to label"); + this.destroy(); doneTest(); } })); @@ -342,10 +342,10 @@ exports.testConstructor = function(test) { content: "
foo
", contentScript: "document.addEventListener('DOMContentLoaded', function() postMessage(1), false);", contentScriptWhen: "start", - onMessage: function({ emitter: widget, data: message }) { - widget.tooltip = "bar"; - test.assertEqual(widget.tooltip, "bar", "tooltip gets updated"); - widget.destroy(); + onMessage: function(message) { + this.tooltip = "bar"; + test.assertEqual(this.tooltip, "bar", "tooltip gets updated"); + this.destroy(); doneTest(); } })); @@ -411,17 +411,17 @@ exports.testConstructor = function(test) { width: 200, contentScript: "document.addEventListener('DOMContentLoaded', function() postMessage(1), false);", contentScriptWhen: "ready", - onMessage: function({ emitter: widget, data: message }) { - test.assertEqual(widget.width, 200); + onMessage: function(message) { + test.assertEqual(this.width, 200); let node = widgetNode(0); - test.assertEqual(widget.width, node.style.minWidth.replace("px", "")); - test.assertEqual(widget.width, node.firstElementChild.style.width.replace("px", "")); - widget.width = 300; - test.assertEqual(widget.width, node.style.minWidth.replace("px", "")); - test.assertEqual(widget.width, node.firstElementChild.style.width.replace("px", "")); + test.assertEqual(this.width, node.style.minWidth.replace("px", "")); + test.assertEqual(this.width, node.firstElementChild.style.width.replace("px", "")); + this.width = 300; + test.assertEqual(this.width, node.style.minWidth.replace("px", "")); + test.assertEqual(this.width, node.firstElementChild.style.width.replace("px", "")); - widget.destroy(); + this.destroy(); doneTest(); } })); @@ -476,9 +476,9 @@ exports.testPanelWidget3 = function testPanelWidget3(test) { "evt.initEvent('click', true, true ); " + "document.body.firstElementChild.dispatchEvent(evt);", contentScriptWhen: "ready", - onClick: function({ emitter: widget }) { + onClick: function() { onClickCalled = true; - widget.panel.show(); + this.panel.show(); }, panel: require("panel").Panel({ contentURL: "data:text/html,Look ma, a panel!", diff --git a/python-lib/cuddlefish/templates.py b/python-lib/cuddlefish/templates.py index 0ad7102ea..3a0ee7fe4 100644 --- a/python-lib/cuddlefish/templates.py +++ b/python-lib/cuddlefish/templates.py @@ -6,7 +6,7 @@ var widget = widgets.Widget({ label: "Mozilla website", contentURL: "http://www.mozilla.org/favicon.ico", - onClick: function(event) { + onClick: function() { tabs.open("http://www.mozilla.org/"); } }); diff --git a/static-files/md/dev-guide/events.md b/static-files/md/dev-guide/events.md index 93feebbb1..14e0c66c3 100644 --- a/static-files/md/dev-guide/events.md +++ b/static-files/md/dev-guide/events.md @@ -59,9 +59,7 @@ you can assign a listener function to this property as an alternative to calling the object's `on()` method. For example: the [`widget`](#modules/addon-kit/widget) object emits an event -when the widget is clicked. The widget supplies a single argument to the -listener, an event object with a property named `emitter` whose value is the -widget itself. +when the widget is clicked. The following add-on creates a widget and assigns a listener to the `onClick` property of the `options` object supplied to the widget's @@ -73,7 +71,7 @@ constructor. The listener loads the Google home page: widgets.Widget({ label: "Widget with an image and a click handler", contentURL: "http://www.google.com/favicon.ico", - onClick: function(event) { + onClick: function() { tabs.open("http://www.google.com/"); } }); @@ -89,7 +87,7 @@ widget's `on()` method: contentURL: "http://www.google.com/favicon.ico" }); - widget.on("click", function(event) { + widget.on("click", function() { tabs.open("http://www.google.com/"); });