Click anywhere within this panel to send a test message to the chrome scope.
13 |
14 |
15 |
--------------------------------------------------------------------------------
/DomInspector/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dominspector",
3 | "title": "DOM Inspector",
4 | "id": "dominspector@getfirebug.com",
5 | "description": "An example add-on showing how to send DOM node over RDP",
6 | "author": "Jan Odvarko",
7 | "license": "MPL 2.0",
8 | "version": "0.1.0",
9 | "main": "lib/main"
10 | }
11 |
--------------------------------------------------------------------------------
/GlobalActor/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "globalactor",
3 | "title": "GlobalActor",
4 | "id": "globalactor@getfirebug.com",
5 | "description": "This extension shows how to register custom global actor",
6 | "author": "Jan Odvarko",
7 | "license": "MPL 2.0",
8 | "version": "0.1.0",
9 | "main": "lib/main"
10 | }
11 |
--------------------------------------------------------------------------------
/HelloReact/data/app/index.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require) {
4 |
5 | // Application modules
6 | var { renderTabbedBox } = require("app/tabs");
7 | var { renderDropdownButton } = require("app/dropdown");
8 |
9 | // Rendering
10 | renderDropdownButton();
11 | renderTabbedBox();
12 |
13 | });
14 |
--------------------------------------------------------------------------------
/TitleManager/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "titlemanager",
3 | "title": "TitleManager",
4 | "id": "titlemanager@getfirebug.com",
5 | "description": "This example extension allows to get/set window title",
6 | "author": "Jan Odvarko",
7 | "license": "MPL 2.0",
8 | "version": "0.1.0",
9 | "main": "lib/main"
10 | }
11 |
--------------------------------------------------------------------------------
/MessageManager/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "messagemanager",
3 | "title": "MessageManager",
4 | "id": "messagemanager@getfirebug.com",
5 | "description": "How to send messages between chrome and content scope",
6 | "author": "Jan Odvarko",
7 | "license": "New BSD",
8 | "version": "0.1.0",
9 | "main": "lib/main"
10 | }
11 |
--------------------------------------------------------------------------------
/CustomActor/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cu, Ci } = require("chrome");
6 | const { MyPanel } = require("./myPanel.js");
7 |
8 | function main(options, callbacks) {
9 | }
10 |
11 | function onUnload(reason) {
12 | }
13 |
14 | exports.main = main;
15 | exports.onUnload = onUnload;
16 |
--------------------------------------------------------------------------------
/CustomActor/test/test-main.js:
--------------------------------------------------------------------------------
1 | var main = require("./main");
2 |
3 | exports["test main"] = function(assert) {
4 | assert.pass("Unit test running!");
5 | };
6 |
7 | exports["test main async"] = function(assert, done) {
8 | assert.pass("async Unit test running!");
9 | done();
10 | };
11 |
12 | require("sdk/test").run(exports);
13 |
--------------------------------------------------------------------------------
/CustomTheme/test/test-main.js:
--------------------------------------------------------------------------------
1 | var main = require("./main");
2 |
3 | exports["test main"] = function(assert) {
4 | assert.pass("Unit test running!");
5 | };
6 |
7 | exports["test main async"] = function(assert, done) {
8 | assert.pass("async Unit test running!");
9 | done();
10 | };
11 |
12 | require("sdk/test").run(exports);
13 |
--------------------------------------------------------------------------------
/DomInspector/test/test-main.js:
--------------------------------------------------------------------------------
1 | var main = require("./main");
2 |
3 | exports["test main"] = function(assert) {
4 | assert.pass("Unit test running!");
5 | };
6 |
7 | exports["test main async"] = function(assert, done) {
8 | assert.pass("async Unit test running!");
9 | done();
10 | };
11 |
12 | require("sdk/test").run(exports);
13 |
--------------------------------------------------------------------------------
/HelloReact/test/test-main.js:
--------------------------------------------------------------------------------
1 | var main = require("./main");
2 |
3 | exports["test main"] = function(assert) {
4 | assert.pass("Unit test running!");
5 | };
6 |
7 | exports["test main async"] = function(assert, done) {
8 | assert.pass("async Unit test running!");
9 | done();
10 | };
11 |
12 | require("sdk/test").run(exports);
13 |
--------------------------------------------------------------------------------
/HelloWorld/test/test-main.js:
--------------------------------------------------------------------------------
1 | var main = require("./main");
2 |
3 | exports["test main"] = function(assert) {
4 | assert.pass("Unit test running!");
5 | };
6 |
7 | exports["test main async"] = function(assert, done) {
8 | assert.pass("async Unit test running!");
9 | done();
10 | };
11 |
12 | require("sdk/test").run(exports);
13 |
--------------------------------------------------------------------------------
/SimpleMVC/test/test-main.js:
--------------------------------------------------------------------------------
1 | var main = require("./main");
2 |
3 | exports["test main"] = function(assert) {
4 | assert.pass("Unit test running!");
5 | };
6 |
7 | exports["test main async"] = function(assert, done) {
8 | assert.pass("async Unit test running!");
9 | done();
10 | };
11 |
12 | require("sdk/test").run(exports);
13 |
--------------------------------------------------------------------------------
/ConsoleListener/test/test-main.js:
--------------------------------------------------------------------------------
1 | var main = require("./main");
2 |
3 | exports["test main"] = function(assert) {
4 | assert.pass("Unit test running!");
5 | };
6 |
7 | exports["test main async"] = function(assert, done) {
8 | assert.pass("async Unit test running!");
9 | done();
10 | };
11 |
12 | require("sdk/test").run(exports);
13 |
--------------------------------------------------------------------------------
/MessageManager/test/test-main.js:
--------------------------------------------------------------------------------
1 | var main = require("./main");
2 |
3 | exports["test main"] = function(assert) {
4 | assert.pass("Unit test running!");
5 | };
6 |
7 | exports["test main async"] = function(assert, done) {
8 | assert.pass("async Unit test running!");
9 | done();
10 | };
11 |
12 | require("sdk/test").run(exports);
13 |
--------------------------------------------------------------------------------
/NetAnalysis/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "netanalysis",
3 | "title": "Net Analysis",
4 | "id": "netanalysis@janodvarko.cz",
5 | "version": "0.0.1",
6 | "description": "How to get HAR object from the Network panel and perform custom analysis",
7 | "main": "lib/main.js",
8 | "author": "Jan Odvarko",
9 | "license": "New BSD License"
10 | }
11 |
--------------------------------------------------------------------------------
/ConsoleListener/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "consolelistener",
3 | "title": "ConsoleListener",
4 | "id": "consolelistener@getfirebug.com",
5 | "description": "An example showing how to intercept and modify logs in the Console panel",
6 | "author": "Jan Odvarko",
7 | "license": "MPL 2.0",
8 | "version": "0.1.0",
9 | "main": "lib/main"
10 | }
11 |
--------------------------------------------------------------------------------
/TodoMVC/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "todomvc",
3 | "title": "Todo MVC",
4 | "id": "todomvc@getfirebug.com",
5 | "description": "How to use Redux to build developer tools extensions",
6 | "author": "Jan Odvarko",
7 | "license": "BSD",
8 | "version": "0.5.0",
9 | "main": "lib/main",
10 | "dependencies": {
11 | "firebug.sdk": "0.x"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/HelloReact/data/css/styles.css:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | body {
4 | padding: 10px;
5 | background-color: #F7FBFE;
6 | }
7 |
8 | .tab-content {
9 | padding: 25px;
10 | background-color: white;
11 | border-bottom: 1px solid #DDD;
12 | border-left: 1px solid #DDD;
13 | border-right: 1px solid #DDD;
14 | }
15 |
16 | a:focus {
17 | outline: none;
18 | }
19 |
--------------------------------------------------------------------------------
/SimpleMVC/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "simplemvc",
3 | "title": "SimpleMVC",
4 | "id": "simplemvc@getfirebug.com",
5 | "description": "This example extension shows how to use Model View Controller (MVC) pattern in context of an extension for Firefox DevTools",
6 | "author": "Jan Odvarko",
7 | "license": "MPL 2.0",
8 | "version": "0.1.0",
9 | "main": "lib/main"
10 | }
11 |
--------------------------------------------------------------------------------
/TodoMVC/data/todo-view.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/HelloReact/data/app/config.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | // RequireJS configuration
4 | require.config({
5 | baseUrl: ".",
6 | paths: {
7 | "jquery": "lib/jquery/jquery",
8 | "react": "lib/react/react",
9 | "bootstrap": "lib/bootstrap/js/bootstrap",
10 | "react-bootstrap": "lib/react-bootstrap/react-bootstrap",
11 | }
12 | });
13 |
14 | // Load the main application module
15 | requirejs(["app/index"]);
16 |
--------------------------------------------------------------------------------
/TodoMVC/data/constants/action-types.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // Exports from this module
8 | exports.ADD_TODO = "ADD_TODO";
9 | exports.DELETE_TODO = "DELETE_TODO";
10 | exports.EDIT_TODO = "EDIT_TODO";
11 | exports.COMPLETE_TODO = "COMPLETE_TODO";
12 | exports.COMLETE_ALL = "COMPLETE_ALL";
13 | exports.CLEAR_COMPLETED = "CLEAR_COMPLETED";
14 | });
15 |
16 |
--------------------------------------------------------------------------------
/TodoMVC/data/reducers/index.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // React & Redux
8 | const React = require("react");
9 | const { combineReducers } = require("redux");
10 | const { todos } = require("./todos");
11 |
12 | const rootReducer = combineReducers({
13 | todos
14 | });
15 |
16 | // Exports from this module
17 | exports.rootReducer = rootReducer;
18 | });
19 |
--------------------------------------------------------------------------------
/MessageManager/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { MyPanel } = require("./myPanel.js");
6 |
7 | /**
8 | * Application entry point. Read MDN to learn more about Add-on SDK:
9 | * https://developer.mozilla.org/en-US/Add-ons/SDK
10 | */
11 | function main(options, callbacks) {
12 | }
13 |
14 | function onUnload(reason) {
15 | }
16 |
17 | // Exports from this module
18 | exports.main = main;
19 | exports.onUnload = onUnload;
20 |
--------------------------------------------------------------------------------
/SimpleMVC/data/myView.css:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | body {
4 | background-color: white;
5 | font-size: 12px;
6 | font-family: Lucida Grande, Tahoma, sans-serif;
7 | line-height: 15px;
8 | }
9 |
10 | code {
11 | font-family: monospace;
12 | background: rgb(249, 249, 249);
13 | padding: 1px;
14 | border: 1px solid lightgray;
15 | border-radius: 2px;
16 | }
17 |
18 | #content {
19 | padding-top: 7px;
20 | }
21 |
22 | .time {
23 | color: green;
24 | }
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Accordion.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var PanelGroup = require('./PanelGroup');
3 |
4 | var Accordion = React.createClass({displayName: 'Accordion',
5 | render: function () {
6 | return (
7 | React.createElement(PanelGroup, React.__spread({}, this.props, {accordion: true}),
8 | this.props.children
9 | )
10 | );
11 | }
12 | });
13 |
14 | module.exports = Accordion;
15 | });
16 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-bootstrap",
3 | "version": "0.13.0",
4 | "homepage": "http://react-bootstrap.github.io/",
5 | "author": "Stephen J. Collings ",
6 | "license": "MIT",
7 | "main": [
8 | "react-bootstrap.js"
9 | ],
10 | "keywords": [
11 | "react",
12 | "react-component",
13 | "boostrap"
14 | ],
15 | "ignore": [
16 | "**/.*"
17 | ],
18 | "dependencies": {
19 | "react": ">= 0.12.0"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/NetAnalysis/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # Junk that could exist anywhere:
3 | .DS_Store
4 | *.swp
5 | *.tmp
6 | .*.gz
7 | *.patch
8 | *~
9 |
10 | # Temporary files created by Eclipse
11 | .tmp*
12 |
13 | # Editor junk
14 | *.project
15 | /.pydevproject
16 | /.settings/
17 | /.settings.xml
18 | /.settings.xml.old
19 | /.idea/
20 | *.iws
21 | *.ids
22 | *.iml
23 | *.ipr
24 |
25 | # Build Files
26 | /build/
27 | /release/
28 | *.graphml
29 | *.xpi
30 |
31 | # Files from NPM
32 | /node_modules/
33 |
34 | # Bash
35 | *.sh
36 | *.bat
37 |
--------------------------------------------------------------------------------
/NetAnalysis/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cc, Ci, components } = require("chrome");
6 |
7 | // The only responsibility of the 'main' module is loading
8 | // 'toolbox-overlay' that is responsible for the Network
9 | // panel customization.
10 | require("./my-toolbox-overlay.js");
11 |
12 | function onLoad(options, callbacks) {
13 | };
14 |
15 | function onUnload(reason) {
16 | };
17 |
18 | // Exports from this module
19 | exports.main = onLoad;
20 | exports.onUnload = onUnload;
21 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Jumbotron.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 |
4 | var Jumbotron = React.createClass({displayName: 'Jumbotron',
5 |
6 | render: function () {
7 | return (
8 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, 'jumbotron')}),
9 | this.props.children
10 | )
11 | );
12 | }
13 | });
14 |
15 | module.exports = Jumbotron;
16 | });
17 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/bootstrap/js/npm.js:
--------------------------------------------------------------------------------
1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
2 | require('../../js/transition.js')
3 | require('../../js/alert.js')
4 | require('../../js/button.js')
5 | require('../../js/carousel.js')
6 | require('../../js/collapse.js')
7 | require('../../js/dropdown.js')
8 | require('../../js/modal.js')
9 | require('../../js/tooltip.js')
10 | require('../../js/popover.js')
11 | require('../../js/scrollspy.js')
12 | require('../../js/tab.js')
13 | require('../../js/affix.js')
--------------------------------------------------------------------------------
/TodoMVC/data/config.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | /* globals requirejs */
4 |
5 | // RequireJS configuration
6 | require.config({
7 | baseUrl: ".",
8 | scriptType: "application/javascript;version=1.8",
9 | paths: {
10 | "react": "./lib/react/react",
11 | "redux": "./lib/redux/redux",
12 | "react-redux": "./lib/redux/react-redux",
13 | "reps": "../node_modules/firebug.sdk/lib/reps",
14 | "firebug.sdk": "../node_modules/firebug.sdk"
15 | }
16 | });
17 |
18 | // Load the main panel module
19 | requirejs(["todo-view"]);
20 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/PageHeader.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 |
4 | var PageHeader = React.createClass({displayName: 'PageHeader',
5 |
6 | render: function () {
7 | return (
8 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, 'page-header')}),
9 | React.createElement("h1", null, this.props.children)
10 | )
11 | );
12 | }
13 | });
14 |
15 | module.exports = PageHeader;
16 | });
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # Junk that could exist anywhere:
3 | .DS_Store
4 | *.swp
5 | *.tmp
6 | .*.gz
7 | *.patch
8 | *~
9 |
10 | # Temporary files created by Eclipse
11 | .tmp*
12 |
13 | # Editor junk
14 | *.project
15 | /.pydevproject
16 | /.settings/
17 | /.settings.xml
18 | /.settings.xml.old
19 | /.idea/
20 | *.iws
21 | *.ids
22 | *.iml
23 | *.ipr
24 |
25 | # Build Files
26 | /build/
27 | /release/
28 | *.graphml
29 | *.xpi
30 |
31 | # Files from NPM
32 | node_modules/
33 |
34 | # Extensions
35 | /firebug@software.joehewitt.com
36 |
37 | bootstrap.js
38 | install.rdf
39 |
40 | # Bash
41 | *.sh
42 | *.bat
43 |
--------------------------------------------------------------------------------
/HelloReact/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { MyExtension } = require("./myExtension.js");
6 | const { MyPanel } = require("./myPanel.js");
7 |
8 | /**
9 | * Application entry point. Read MDN to learn more about Add-on SDK:
10 | * https://developer.mozilla.org/en-US/Add-ons/SDK
11 | */
12 | function main(options, callbacks) {
13 | // Initialize extension object (singleton).
14 | MyExtension.initialize(options);
15 | }
16 |
17 | function onUnload(reason) {
18 | MyExtension.shutdown(reason);
19 | }
20 |
21 | // Exports from this module
22 | exports.main = main;
23 | exports.onUnload = onUnload;
24 |
--------------------------------------------------------------------------------
/HelloWorld/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { MyExtension } = require("./myExtension.js");
6 | const { MyPanel } = require("./myPanel.js");
7 |
8 | /**
9 | * Application entry point. Read MDN to learn more about Add-on SDK:
10 | * https://developer.mozilla.org/en-US/Add-ons/SDK
11 | */
12 | function main(options, callbacks) {
13 | // Initialize extension object (singleton).
14 | MyExtension.initialize(options);
15 | }
16 |
17 | function onUnload(reason) {
18 | MyExtension.shutdown(reason);
19 | }
20 |
21 | // Exports from this module
22 | exports.main = main;
23 | exports.onUnload = onUnload;
24 |
--------------------------------------------------------------------------------
/SimpleMVC/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { MyExtension } = require("./myExtension.js");
6 | const { MyPanel } = require("./myPanel.js");
7 |
8 | /**
9 | * Application entry point. Read MDN to learn more about Add-on SDK:
10 | * https://developer.mozilla.org/en-US/Add-ons/SDK
11 | */
12 | function main(options, callbacks) {
13 | // Initialize extension object (singleton).
14 | MyExtension.initialize(options);
15 | }
16 |
17 | function onUnload(reason) {
18 | MyExtension.shutdown(reason);
19 | }
20 |
21 | // Exports from this module
22 | exports.main = main;
23 | exports.onUnload = onUnload;
24 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/README.md:
--------------------------------------------------------------------------------
1 | # react-bootstrap-bower
2 |
3 | [Bootstrap 3](http://getbootstrap.com) components built with [React](http://facebook.github.io/react/)
4 |
5 | This repo contains built AMD modules and standalone browser globals.
6 |
7 | There is a separate [source repo](https://github.com/react-bootstrap/react-bootstrap).
8 |
9 | A [docs site](http://react-bootstrap.github.io) with live editable examples is a work in progress.
10 |
11 |
12 | [](https://travis-ci.org/react-bootstrap/react-bootstrap) [](http://badge.fury.io/bo/react-bootstrap)
--------------------------------------------------------------------------------
/HelloReact/data/myPanel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/HelloWorld/README.md:
--------------------------------------------------------------------------------
1 | Hello World
2 | ===========
3 | An example extension showing how to create a new panel for Firefox native
4 | developer tools toolbox.
5 |
6 | Instructions
7 | ------------
8 | 1. Install the extension
9 | 2. Open developer tools toolbox (F12 or Menu -> Developer -> Toogle Tools)
10 | 3. See the `My Panel` panel
11 |
12 | Further Resources
13 | -----------------
14 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
15 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
16 | * Coding Style: https://github.com/mozilla/addon-sdk/wiki/Coding-style-guide
17 | * DevTools Extension Examples: https://github.com/firebug/devtools-extension-examples
18 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
19 |
--------------------------------------------------------------------------------
/CustomActor/data/myPanel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | My Panel
6 |
7 |
8 |
14 |
15 |
16 |
17 |
18 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Row.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 |
4 | var Row = React.createClass({displayName: 'Row',
5 | propTypes: {
6 | componentClass: React.PropTypes.node.isRequired
7 | },
8 |
9 | getDefaultProps: function () {
10 | return {
11 | componentClass: 'div'
12 | };
13 | },
14 |
15 | render: function () {
16 | var ComponentClass = this.props.componentClass;
17 |
18 | return (
19 | React.createElement(ComponentClass, React.__spread({}, this.props, {className: joinClasses(this.props.className, 'row')}),
20 | this.props.children
21 | )
22 | );
23 | }
24 | });
25 |
26 | module.exports = Row;
27 | });
28 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Affix.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var AffixMixin = require('./AffixMixin');
4 | var domUtils = require('./utils/domUtils');
5 |
6 | var Affix = React.createClass({displayName: 'Affix',
7 | statics: {
8 | domUtils: domUtils
9 | },
10 |
11 | mixins: [AffixMixin],
12 |
13 | render: function () {
14 | var holderStyle = {top: this.state.affixPositionTop};
15 | return (
16 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, this.state.affixClass), style: holderStyle}),
17 | this.props.children
18 | )
19 | );
20 | }
21 | });
22 |
23 | module.exports = Affix;
24 | });
25 |
--------------------------------------------------------------------------------
/TodoMVC/data/store/configure-store.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports, module) {
4 |
5 | "use strict";
6 |
7 | // Redux
8 | const { createStore } = require("redux");
9 |
10 | // TodoMVC
11 | const { rootReducer } = require("../reducers/index");
12 |
13 | function configureStore(initialState) {
14 | const store = createStore(rootReducer, initialState);
15 |
16 | // Enable Webpack hot module replacement for reducers
17 | /*if (module.hot) {
18 | module.hot.accept("../reducers/index", () => {
19 | const nextReducer = require("../reducers/index");
20 | store.replaceReducer(nextReducer);
21 | });
22 | }*/
23 |
24 | return store;
25 | }
26 |
27 | // Exports from this module
28 | exports.configureStore = configureStore;
29 | });
30 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/utils/createChainedFunction.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {/**
2 | * Safe chained function
3 | *
4 | * Will only create a new function if needed,
5 | * otherwise will pass back existing functions or null.
6 | *
7 | * @param {function} one
8 | * @param {function} two
9 | * @returns {function|null}
10 | */
11 | function createChainedFunction(one, two) {
12 | var hasOne = typeof one === 'function';
13 | var hasTwo = typeof two === 'function';
14 |
15 | if (!hasOne && !hasTwo) { return null; }
16 | if (!hasOne) { return two; }
17 | if (!hasTwo) { return one; }
18 |
19 | return function chainedFunction() {
20 | one.apply(this, arguments);
21 | two.apply(this, arguments);
22 | };
23 | }
24 |
25 | module.exports = createChainedFunction;
26 | });
27 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Well.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 |
6 | var Well = React.createClass({displayName: 'Well',
7 | mixins: [BootstrapMixin],
8 |
9 | getDefaultProps: function () {
10 | return {
11 | bsClass: 'well'
12 | };
13 | },
14 |
15 | render: function () {
16 | var classes = this.getBsClassSet();
17 |
18 | return (
19 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
20 | this.props.children
21 | )
22 | );
23 | }
24 | });
25 |
26 | module.exports = Well;
27 | });
28 |
--------------------------------------------------------------------------------
/CustomTheme/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cu, Ci } = require("chrome");
6 | const { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
7 |
8 | var self = require("sdk/self");
9 |
10 | function main(options, callbacks) {
11 | let styleUrl = self.data.url("theme.css");
12 |
13 | // Register new developer tools theme.
14 | gDevTools.registerTheme({
15 | id: "custom-theme",
16 | label: "Custom theme",
17 | stylesheets: [
18 | "chrome://browser/skin/devtools/light-theme.css",
19 | styleUrl
20 | ],
21 | classList: ["theme-light", "custom-theme"],
22 | });
23 | }
24 |
25 | function onUnload(reason) {
26 | gDevTools.unregisterTheme("custom-theme");
27 | }
28 |
29 | exports.main = main;
30 | exports.onUnload = onUnload;
31 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/.bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-bootstrap",
3 | "version": "0.13.0",
4 | "homepage": "http://react-bootstrap.github.io/",
5 | "author": "Stephen J. Collings ",
6 | "license": "MIT",
7 | "main": [
8 | "react-bootstrap.js"
9 | ],
10 | "keywords": [
11 | "react",
12 | "react-component",
13 | "boostrap"
14 | ],
15 | "ignore": [
16 | "**/.*"
17 | ],
18 | "dependencies": {
19 | "react": ">= 0.12.0"
20 | },
21 | "_release": "0.13.0",
22 | "_resolution": {
23 | "type": "version",
24 | "tag": "v0.13.0",
25 | "commit": "56230617a6ee68f02fcab7de6d2f69167c70541b"
26 | },
27 | "_source": "git://github.com/react-bootstrap/react-bootstrap-bower.git",
28 | "_target": "~0.13.0",
29 | "_originalSource": "react-bootstrap",
30 | "_direct": true
31 | }
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Label.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 |
6 | var Label = React.createClass({displayName: 'Label',
7 | mixins: [BootstrapMixin],
8 |
9 | getDefaultProps: function () {
10 | return {
11 | bsClass: 'label',
12 | bsStyle: 'default'
13 | };
14 | },
15 |
16 | render: function () {
17 | var classes = this.getBsClassSet();
18 |
19 | return (
20 | React.createElement("span", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
21 | this.props.children
22 | )
23 | );
24 | }
25 | });
26 |
27 | module.exports = Label;
28 | });
29 |
--------------------------------------------------------------------------------
/HelloReact/lib/myPanel.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const self = require("sdk/self");
6 |
7 | const { Cu, Ci } = require("chrome");
8 | const { Panel } = require("dev/panel.js");
9 | const { Class } = require("sdk/core/heritage");
10 | const { Tool } = require("dev/toolbox");
11 |
12 | /**
13 | * This object represents a new {@Toolbox} panel
14 | */
15 | const MyPanel = Class(
16 | /** @lends MyPanel */
17 | {
18 | extends: Panel,
19 |
20 | label: "Hello React",
21 | tooltip: "My panel tooltip",
22 | icon: "./img/icon-16.png",
23 | url: "./myPanel.html",
24 |
25 | initialize: function(options) {
26 | },
27 |
28 | dispose: function() {
29 | },
30 |
31 | setup: function(options) {
32 | },
33 | });
34 |
35 | const myTool = new Tool({
36 | name: "MyTool",
37 | panels: {
38 | myPanel: MyPanel
39 | }
40 | });
41 |
--------------------------------------------------------------------------------
/TodoMVC/README.md:
--------------------------------------------------------------------------------
1 | TodoMVC
2 | =======
3 | This extension is built on top of existing TodoMVC app from Redux
4 | documentation. It mainly servers as an example for web developers using
5 | ReactJS and Redux showing how to use standard web technologies to
6 | build Firefox developer tools extensions.
7 |
8 | Instructions
9 | ------------
10 | 1. Install the extension
11 | 3. Open a browser tab and developer tools toolbox on it (F12)
12 | 4. Select the `Todo` toolbox panel
13 | 6. Follow instructions in the panel
14 |
15 | Further Resources
16 | -----------------
17 | * http://rackt.github.io/redux/docs/introduction/index.html
18 | * http://facebook.github.io/react/docs/tutorial.html
19 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
20 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
21 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
22 |
--------------------------------------------------------------------------------
/ConsoleListener/README.md:
--------------------------------------------------------------------------------
1 | Console Listener
2 | ================
3 | An example extension showing how to intercept and modify logs in the Console panel
4 |
5 | Instructions
6 | ------------
7 | 1. Install the extension
8 | 2. Open developer tools toolbox (F12 or Menu -> Developer -> Toogle Tools)
9 | 3. Select the Console panel
10 | 4. Load: https://getfirebug.com/tests/manual/console/joes-original/test.html
11 | 5. Check out the Console panel, logs have different background color.
12 |
13 | Further Resources
14 | -----------------
15 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
16 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
17 | * Coding Style: https://github.com/mozilla/addon-sdk/wiki/Coding-style-guide
18 | * DevTools Extension Examples: https://github.com/firebug/devtools-extension-examples
19 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
20 |
--------------------------------------------------------------------------------
/HelloReact/README.md:
--------------------------------------------------------------------------------
1 | Hello React
2 | ===========
3 | An example extension showing how to integrate standard web technologies
4 | with an extension.
5 |
6 | Instructions
7 | ------------
8 | 1. Install the extension
9 | 2. Open developer tools toolbox (F12 or Menu -> Developer -> Toogle Tools)
10 | 3. See the `Hello React` panel
11 |
12 | Further Resources
13 | -----------------
14 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
15 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
16 | * Coding Style: https://github.com/mozilla/addon-sdk/wiki/Coding-style-guide
17 | * DevTools Extension Examples: https://github.com/firebug/devtools-extension-examples
18 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
19 | * Bootstrap: http://getbootstrap.com/
20 | * React: http://facebook.github.io/react/
21 | * React Bootstrap: http://react-bootstrap.github.io/components.html
22 |
--------------------------------------------------------------------------------
/GlobalActor/README.md:
--------------------------------------------------------------------------------
1 | GlobalActor
2 | ===========
3 | An example extension showing how to register custom Global actor.
4 | If multiprocess support is activated it runs within the parent
5 | process.
6 |
7 | Instructions
8 | ------------
9 | 1. Install the extension
10 | 2. Open browser Console (Menu -> Developer -> Browser Console)
11 | 3. Open a browser tab and developer tools toolbox on it (F12)
12 | 4. There should be a message in the browser Console saying:
13 | "Response from the actor: Hello from a global actor!"
14 |
15 | Further Resources
16 | -----------------
17 | * Tab Actor: https://github.com/firebug/devtools-extension-examples/tree/master/TabActor
18 | * RDP: https://wiki.mozilla.org/Remote_Debugging_Protocol
19 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
20 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
21 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
22 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Grid.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 |
4 | var Grid = React.createClass({displayName: 'Grid',
5 | propTypes: {
6 | fluid: React.PropTypes.bool,
7 | componentClass: React.PropTypes.node.isRequired
8 | },
9 |
10 | getDefaultProps: function () {
11 | return {
12 | componentClass: 'div'
13 | };
14 | },
15 |
16 | render: function () {
17 | var ComponentClass = this.props.componentClass;
18 | var className = this.props.fluid ? 'container-fluid' : 'container';
19 |
20 | return (
21 | React.createElement(ComponentClass, React.__spread({},
22 | this.props,
23 | {className: joinClasses(this.props.className, className)}),
24 | this.props.children
25 | )
26 | );
27 | }
28 | });
29 |
30 | module.exports = Grid;
31 | });
32 |
--------------------------------------------------------------------------------
/CustomActor/README.md:
--------------------------------------------------------------------------------
1 | CustomActor
2 | ===========
3 | An example extension showing how to implement new remotable feature
4 | and register custom tab actor (based on RDP protocol, see link below)
5 | This example also shows how to communicate between chrome and content
6 | scope through MessageChannel.
7 |
8 | Instructions
9 | ------------
10 | 1. Install the extension
11 | 2. Open developer tools toolbox (F12 or Menu -> Developer -> Toogle Tools)
12 | 3. Select the 'My Panel' panel
13 | 4. Click on 'Register Actor' button in the Panel.
14 | 6. You should see the following messages: 'registered', 'attached' and
15 | 'Hello from the backend!'
16 |
17 | Further Resources
18 | -----------------
19 | * RDP: https://wiki.mozilla.org/Remote_Debugging_Protocol
20 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
21 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
22 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
23 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/ButtonToolbar.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 | var Button = require('./Button');
6 |
7 | var ButtonToolbar = React.createClass({displayName: 'ButtonToolbar',
8 | mixins: [BootstrapMixin],
9 |
10 | getDefaultProps: function () {
11 | return {
12 | bsClass: 'button-toolbar'
13 | };
14 | },
15 |
16 | render: function () {
17 | var classes = this.getBsClassSet();
18 |
19 | return (
20 | React.createElement("div", React.__spread({},
21 | this.props,
22 | {role: "toolbar",
23 | className: joinClasses(this.props.className, classSet(classes))}),
24 | this.props.children
25 | )
26 | );
27 | }
28 | });
29 |
30 | module.exports = ButtonToolbar;
31 | });
32 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Badge.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var ValidComponentChildren = require('./utils/ValidComponentChildren');
4 | var classSet = require('./utils/classSet');
5 |
6 | var Badge = React.createClass({displayName: 'Badge',
7 | propTypes: {
8 | pullRight: React.PropTypes.bool
9 | },
10 |
11 | render: function () {
12 | var classes = {
13 | 'pull-right': this.props.pullRight,
14 | 'badge': (ValidComponentChildren.hasValidComponent(this.props.children)
15 | || (typeof this.props.children === 'string'))
16 | };
17 | return (
18 | React.createElement("span", React.__spread({},
19 | this.props,
20 | {className: joinClasses(this.props.className, classSet(classes))}),
21 | this.props.children
22 | )
23 | );
24 | }
25 | });
26 |
27 | module.exports = Badge;
28 |
29 | });
30 |
--------------------------------------------------------------------------------
/TabActor/README.md:
--------------------------------------------------------------------------------
1 | TabActor
2 | ========
3 | An example extension showing how to register custom Tab actor.
4 | Instance of a tab actor is created for every browser tab.
5 | If multiprocess support is activated it runs within the child
6 | process.
7 |
8 | Instructions
9 | ------------
10 | 1. Install the extension
11 | 2. Open browser Console (Menu -> Developer -> Browser Console)
12 | 3. Open a browser tab and developer tools toolbox on it (F12)
13 | 4. There should be a message in the browser Console saying:
14 | "Response from the actor: Hello from a tab actor!"
15 |
16 | Further Resources
17 | -----------------
18 | * Global Actor: https://github.com/firebug/devtools-extension-examples/tree/master/GlobalActor
19 | * RDP: https://wiki.mozilla.org/Remote_Debugging_Protocol
20 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
21 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
22 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
23 |
--------------------------------------------------------------------------------
/DomInspector/README.md:
--------------------------------------------------------------------------------
1 | DOM Inspector
2 | =============
3 | An example extension showing how to send DOM nodex over RDP
4 |
5 | Blocked by the platform: [Bug 1146889](https://bugzilla.mozilla.org/show_bug.cgi?id=1146889) - TypeError: v is undefined (protocol.js)
6 |
7 | Instructions
8 | ------------
9 | 1. Install the extension
10 | 2. Open developer tools toolbox (F12 or Menu -> Developer -> Toogle Tools)
11 | 3. Open Browser Console (Menu -> Developer -> Browser Console)
12 | 4. Click into the page content. You should see the following message:
13 | "Click event from the backend!" + an object that represents the clicked
14 | target element (aka Front object).
15 |
16 | Further Resources
17 | -----------------
18 | * RDP: https://wiki.mozilla.org/Remote_Debugging_Protocol
19 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
20 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
21 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
22 |
--------------------------------------------------------------------------------
/TitleManager/README.md:
--------------------------------------------------------------------------------
1 | TitleManager
2 | ============
3 | An example extension showing how to access 'window' global
4 | in the web page and also register new Console command-line
5 | commands.
6 |
7 | This extension registers a new command line commands that
8 | allows to get/set window title.
9 |
10 | Instructions
11 | ------------
12 | 1. Install the extension
13 | 3. Open a browser tab and developer tools toolbox on it (F12)
14 | 4. Switch to the Console panel
15 | 5. Click `Get Title` button in the Toolbar. The title should be
16 | logged in the Console panel.
17 | 6. Type `getTitle()` or `setTitle('New window title')` in the
18 | command line to get/set title of the window/tab.
19 |
20 | Further Resources
21 | -----------------
22 | * RDP: https://wiki.mozilla.org/Remote_Debugging_Protocol
23 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
24 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
25 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
26 |
--------------------------------------------------------------------------------
/TodoMVC/data/actions/todos.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // Firebug.SDK
8 | const types = require("../constants/action-types");
9 |
10 | function addTodo(text) {
11 | return { type: types.ADD_TODO, text };
12 | }
13 |
14 | function deleteTodo(id) {
15 | return { type: types.DELETE_TODO, id };
16 | }
17 |
18 | function editTodo(id, text) {
19 | return { type: types.EDIT_TODO, id, text };
20 | }
21 |
22 | function completeTodo(id) {
23 | return { type: types.COMPLETE_TODO, id };
24 | }
25 |
26 | function completeAll() {
27 | return { type: types.COMPLETE_ALL };
28 | }
29 |
30 | function clearCompleted() {
31 | return { type: types.CLEAR_COMPLETED };
32 | }
33 |
34 | // Exports from this module
35 | exports.addTodo = addTodo;
36 | exports.deleteTodo = deleteTodo;
37 | exports.editTodo = editTodo;
38 | exports.completeTodo = completeTodo;
39 | exports.clearCcompleted = clearCompleted;
40 | });
41 |
42 |
--------------------------------------------------------------------------------
/CustomTheme/README.md:
--------------------------------------------------------------------------------
1 | CustomTheme
2 | ===========
3 | An example extension showing how to create a new theme for developer tools.
4 | (based on SDK API)
5 |
6 | Instructions
7 | ------------
8 | 1. Install the extension
9 | 2. Open developer tools toolbox (F12 or Menu -> Developer -> Toogle Tools)
10 | 3. Select the Options panel (a little gear icon on the right side
11 | of the toolbox toolbar).
12 | 4. You should see three themes: `Dark theme`, `Light theme` and `Custom theme`.
13 | The last one is coming from this extension.
14 | 5. Click the `Custom theme` option. The theme box background color should
15 | turn to red!
16 |
17 | Further Resources
18 | -----------------
19 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
20 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
21 | * Coding Style: https://github.com/mozilla/addon-sdk/wiki/Coding-style-guide
22 | * DevTools Extension Examples: https://github.com/firebug/devtools-extension-examples
23 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
24 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Glyphicon.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 | var constants = require('./constants');
6 |
7 | var Glyphicon = React.createClass({displayName: 'Glyphicon',
8 | mixins: [BootstrapMixin],
9 |
10 | propTypes: {
11 | glyph: React.PropTypes.oneOf(constants.GLYPHS).isRequired
12 | },
13 |
14 | getDefaultProps: function () {
15 | return {
16 | bsClass: 'glyphicon'
17 | };
18 | },
19 |
20 | render: function () {
21 | var classes = this.getBsClassSet();
22 |
23 | classes['glyphicon-' + this.props.glyph] = true;
24 |
25 | return (
26 | React.createElement("span", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
27 | this.props.children
28 | )
29 | );
30 | }
31 | });
32 |
33 | module.exports = Glyphicon;
34 | });
35 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/ListGroup.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var classSet = require('./utils/classSet');
3 | var cloneWithProps = require('./utils/cloneWithProps');
4 |
5 | var ValidComponentChildren = require('./utils/ValidComponentChildren');
6 | var createChainedFunction = require('./utils/createChainedFunction');
7 |
8 | var ListGroup = React.createClass({displayName: 'ListGroup',
9 | propTypes: {
10 | onClick: React.PropTypes.func
11 | },
12 |
13 | render: function () {
14 | return (
15 | React.createElement("div", {className: "list-group"},
16 | ValidComponentChildren.map(this.props.children, this.renderListItem)
17 | )
18 | );
19 | },
20 |
21 | renderListItem: function (child, index) {
22 | return cloneWithProps(child, {
23 | onClick: createChainedFunction(child.props.onClick, this.props.onClick),
24 | ref: child.ref,
25 | key: child.key ? child.key : index
26 | });
27 | }
28 | });
29 |
30 | module.exports = ListGroup;
31 |
32 | });
33 |
--------------------------------------------------------------------------------
/MessageManager/README.md:
--------------------------------------------------------------------------------
1 | Message Manager
2 | ===============
3 | An example extension showing how to communicate between a chrome scope
4 | (extension) and content scope (panel iframe with type="content")
5 |
6 | Instructions
7 | ------------
8 | 1. Install the extension
9 | 2. Open developer tools Toolbox (F12 or Menu -> Developer -> Toogle Tools)
10 | 3. Open Browser Console (Menu -> Developer -> Browser Console))
11 | 4. Select the `My Panel` panel
12 | 5. You should see "Message from chrome: Hello from chrome scope!" in the console
13 | 6. Click anywhere in the panel content
14 | 7. You should see "Message from content: Hello from content scope!" in the console
15 |
16 | Further Resources
17 | -----------------
18 | * Firebug.next: https://github.com/firebug/firebug.next
19 | * DevTools Extension Examples: https://github.com/firebug/devtools-extension-examples
20 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
21 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
22 | * Coding Style: https://github.com/mozilla/addon-sdk/wiki/Coding-style-guide
23 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
24 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/BootstrapMixin.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var constants = require('./constants');
3 |
4 | var BootstrapMixin = {
5 | propTypes: {
6 | bsClass: React.PropTypes.oneOf(Object.keys(constants.CLASSES)),
7 | bsStyle: React.PropTypes.oneOf(Object.keys(constants.STYLES)),
8 | bsSize: React.PropTypes.oneOf(Object.keys(constants.SIZES))
9 | },
10 |
11 | getBsClassSet: function () {
12 | var classes = {};
13 |
14 | var bsClass = this.props.bsClass && constants.CLASSES[this.props.bsClass];
15 | if (bsClass) {
16 | classes[bsClass] = true;
17 |
18 | var prefix = bsClass + '-';
19 |
20 | var bsSize = this.props.bsSize && constants.SIZES[this.props.bsSize];
21 | if (bsSize) {
22 | classes[prefix + bsSize] = true;
23 | }
24 |
25 | var bsStyle = this.props.bsStyle && constants.STYLES[this.props.bsStyle];
26 | if (this.props.bsStyle) {
27 | classes[prefix + bsStyle] = true;
28 | }
29 | }
30 |
31 | return classes;
32 | }
33 | };
34 |
35 | module.exports = BootstrapMixin;
36 | });
37 |
--------------------------------------------------------------------------------
/SimpleMVC/README.md:
--------------------------------------------------------------------------------
1 | SimpleMVC
2 | =========
3 | This example extension shows how to use Model View Controller (MVC) pattern
4 | in context of an extension for Firefox DevTools.
5 |
6 | This example is based on [Hello World](https://github.com/firebug/devtools-extension-examples/tree/master/HelloWorld)
7 | example and appends communication channels between various pars of the extension
8 | (running in different scopes).
9 |
10 | There are two scopes:
11 | Chrome scope: Controller, Model
12 | Content scope: View
13 |
14 | Instructions
15 | ------------
16 | 1. Install the extension
17 | 2. Open developer tools toolbox (F12 or Menu -> Developer -> Toogle Tools)
18 | 3. See the `My Panel` panel
19 | 4. Follow instructions in the panel
20 |
21 | Further Resources
22 | -----------------
23 | * Add-on SDK: https://developer.mozilla.org/en-US/Add-ons/SDK
24 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
25 | * Coding Style: https://github.com/mozilla/addon-sdk/wiki/Coding-style-guide
26 | * DevTools Extension Examples: https://github.com/firebug/devtools-extension-examples
27 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
28 |
--------------------------------------------------------------------------------
/DomInspector/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | // Add-on SDK
6 | const { Cu, Ci } = require("chrome");
7 |
8 | // DevTools
9 | const { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
10 |
11 | // DOM Inspector
12 | const { MyToolboxOverlay } = require("./my-toolbox-overlay");
13 |
14 | /**
15 | * Initialization
16 | */
17 | function main(options, callbacks) {
18 | gDevTools.on("toolbox-ready", onToolboxReady);
19 | gDevTools.on("toolbox-destroy", onToolboxDestroy);
20 | }
21 |
22 | function onUnload(reason) {
23 | gDevTools.off("toolbox-ready", onToolboxReady);
24 | gDevTools.off("toolbox-destroy", onToolboxDestroy);
25 | }
26 |
27 | /**
28 | * Toolbox Overlay
29 | */
30 | var overlays = new Map();
31 |
32 | function onToolboxReady(eventId, toolbox) {
33 | let overlay = new MyToolboxOverlay(toolbox);
34 | overlays.set(toolbox.target, overlay);
35 | }
36 |
37 | function onToolboxDestroy(eventId, target) {
38 | let overlay = overlays.get(target);
39 | overlay.destroy();
40 | overlays.delete(target);
41 | }
42 |
43 | exports.main = main;
44 | exports.onUnload = onUnload;
45 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Pager.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var cloneWithProps = require('./utils/cloneWithProps');
4 |
5 | var ValidComponentChildren = require('./utils/ValidComponentChildren');
6 | var createChainedFunction = require('./utils/createChainedFunction');
7 |
8 | var Pager = React.createClass({displayName: 'Pager',
9 |
10 | propTypes: {
11 | onSelect: React.PropTypes.func
12 | },
13 |
14 | render: function () {
15 | return (
16 | React.createElement("ul", React.__spread({},
17 | this.props,
18 | {className: joinClasses(this.props.className, 'pager')}),
19 | ValidComponentChildren.map(this.props.children, this.renderPageItem)
20 | )
21 | );
22 | },
23 |
24 | renderPageItem: function (child, index) {
25 | return cloneWithProps(
26 | child,
27 | {
28 | onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
29 | ref: child.ref,
30 | key: child.key ? child.key : index
31 | }
32 | );
33 | }
34 | });
35 |
36 | module.exports = Pager;
37 | });
38 |
--------------------------------------------------------------------------------
/HelloReact/data/app/dropdown.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports, module) {
4 |
5 | // Require external modules
6 | var $ = require("jquery");
7 | var React = require("react");
8 | var ReactBootstrap = require("react-bootstrap");
9 |
10 | // Shortcuts
11 | var DropdownButton = React.createFactory(ReactBootstrap.DropdownButton);
12 | var MenuItem = React.createFactory(ReactBootstrap.MenuItem);
13 |
14 | // React component
15 | var DropdownBox = React.createClass({
16 | render: function() {
17 | return (
18 | DropdownButton({eventKey: 3, title: "Dropdown"},
19 | MenuItem({eventKey: 1}, "Action"),
20 | MenuItem({eventKey: 2}, "Another action"),
21 | MenuItem({eventKey: 3}, "Something else"),
22 | MenuItem({divider: "true"}),
23 | MenuItem({eventKey: 4}, "Separated Link")
24 | )
25 | )
26 | }
27 | });
28 |
29 | var dropdownBox = React.createFactory(DropdownBox);
30 |
31 | // Rendering
32 | function renderDropdownButton() {
33 | React.render(
34 | dropdownBox(),
35 | document.getElementById("dropdown")
36 | );
37 | }
38 |
39 | exports.renderDropdownButton = renderDropdownButton;
40 |
41 | });
42 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/ButtonGroup.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 | var Button = require('./Button');
6 |
7 | var ButtonGroup = React.createClass({displayName: 'ButtonGroup',
8 | mixins: [BootstrapMixin],
9 |
10 | propTypes: {
11 | vertical: React.PropTypes.bool,
12 | justified: React.PropTypes.bool
13 | },
14 |
15 | getDefaultProps: function () {
16 | return {
17 | bsClass: 'button-group'
18 | };
19 | },
20 |
21 | render: function () {
22 | var classes = this.getBsClassSet();
23 | classes['btn-group'] = !this.props.vertical;
24 | classes['btn-group-vertical'] = this.props.vertical;
25 | classes['btn-group-justified'] = this.props.justified;
26 |
27 | return (
28 | React.createElement("div", React.__spread({},
29 | this.props,
30 | {className: joinClasses(this.props.className, classSet(classes))}),
31 | this.props.children
32 | )
33 | );
34 | }
35 | });
36 |
37 | module.exports = ButtonGroup;
38 | });
39 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Table.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 |
5 | var Table = React.createClass({displayName: 'Table',
6 | propTypes: {
7 | striped: React.PropTypes.bool,
8 | bordered: React.PropTypes.bool,
9 | condensed: React.PropTypes.bool,
10 | hover: React.PropTypes.bool,
11 | responsive: React.PropTypes.bool
12 | },
13 |
14 | render: function () {
15 | var classes = {
16 | 'table': true,
17 | 'table-striped': this.props.striped,
18 | 'table-bordered': this.props.bordered,
19 | 'table-condensed': this.props.condensed,
20 | 'table-hover': this.props.hover
21 | };
22 | var table = (
23 | React.createElement("table", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
24 | this.props.children
25 | )
26 | );
27 |
28 | return this.props.responsive ? (
29 | React.createElement("div", {className: "table-responsive"},
30 | table
31 | )
32 | ) : table;
33 | }
34 | });
35 |
36 | module.exports = Table;
37 | });
38 |
--------------------------------------------------------------------------------
/TodoMVC/data/components/header.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // Firebug.SDK
8 | const { createFactories } = require("reps/rep-utils");
9 |
10 | // React
11 | const React = require("react");
12 |
13 | // TodoMVC
14 | const { TodoTextInput } = createFactories(require("./todo-text-input"));
15 |
16 | // Shortcuts
17 | const { header, h1 } = React.DOM;
18 | const { PropTypes } = React;
19 |
20 | /**
21 | * TODO: docs
22 | */
23 | var Header = React.createClass(
24 | /** @lends Header */
25 | {
26 | displayName: "Header",
27 |
28 | handleSave: function(text) {
29 | if (text.length !== 0) {
30 | this.props.addTodo(text);
31 | }
32 | },
33 |
34 | render: function() {
35 | return (
36 | header({className: "header"},
37 | h1({}, "Todos"),
38 | TodoTextInput({newTodo: true,
39 | onSave: this.handleSave.bind(this),
40 | placeholder: "What needs to be done?"
41 | })
42 | )
43 | );
44 | }
45 | });
46 |
47 | Header.propTypes = {
48 | addTodo: PropTypes.func.isRequired
49 | };
50 |
51 | // Exports from this module
52 | exports.Header = Header;
53 | });
54 |
--------------------------------------------------------------------------------
/TodoMVC/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | // Firebug SDK
6 | const { ToolboxChrome } = require("firebug.sdk/lib/toolbox-chrome.js");
7 | const { Locale } = require("firebug.sdk/lib/core/locale.js");
8 |
9 | // Localization files. All strings in the UI should be loaded from these
10 | // files, so the entire extension can be localized into other languages.
11 | Locale.registerStringBundle("chrome://todomvc/locale/todomvc.properties");
12 | Locale.registerStringBundle("chrome://todomvc-firebug.sdk/locale/reps.properties");
13 |
14 | // WebSocket Monitor
15 | const { TodoPanel } = require("./todo-panel.js");
16 | const { TodoToolboxOverlay } = require("./todo-toolbox-overlay.js");
17 |
18 | /**
19 | * Application entry point
20 | */
21 | function main(options, callbacks) {
22 | ToolboxChrome.initialize(options);
23 | ToolboxChrome.registerToolboxOverlay(TodoToolboxOverlay);
24 | }
25 |
26 | /**
27 | * Called at shutdown (uninstall, disable, Firefox shutdown)
28 | */
29 | function onUnload(reason) {
30 | ToolboxChrome.unregisterToolboxOverlay(TodoToolboxOverlay);
31 | ToolboxChrome.shutdown(reason);
32 | }
33 |
34 | // Exports from this module
35 | exports.main = main;
36 | exports.onUnload = onUnload;
37 |
--------------------------------------------------------------------------------
/MessageManager/data/frame-script.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | (function({content, addMessageListener, sendAsyncMessage, removeMessageListener}) {
6 |
7 | const document = content.document;
8 | const window = content;
9 |
10 | /**
11 | * Listener for message from the inspector panel (chrome scope).
12 | */
13 | function messageListener(message) {
14 | const { type, data } = message.data;
15 |
16 | console.log("Message from chrome: " + data);
17 | };
18 |
19 | addMessageListener("message/from/chrome", messageListener);
20 |
21 | /**
22 | * Clean up
23 | */
24 | window.addEventListener("unload", event => {
25 | removeMessageListener("message/from/chrome", messageListener);
26 | })
27 |
28 | /**
29 | * Send a message back to the parent panel (chrome scope).
30 | */
31 | function postChromeMessage(type, data) {
32 | sendAsyncMessage("message/from/content", {
33 | type: type,
34 | data: data,
35 | });
36 | }
37 |
38 | /**
39 | * TEST: Send a test message to the chrome scope when
40 | * the user clicks within the frame.
41 | */
42 | window.addEventListener("click", event => {
43 | postChromeMessage("click", "Hello from content scope!");
44 | })
45 |
46 | })(this);
47 |
--------------------------------------------------------------------------------
/HelloReact/data/app/tabs.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports, module) {
4 |
5 | // Require external modules
6 | var $ = require("jquery");
7 | var React = require("react");
8 | var ReactBootstrap = require("react-bootstrap");
9 |
10 | // Shortcuts
11 | var TabbedArea = React.createFactory(ReactBootstrap.TabbedArea);
12 | var TabPane = React.createFactory(ReactBootstrap.TabPane);
13 |
14 | var key = 1;
15 |
16 | function handleSelect(selectedKey) {
17 | key = selectedKey;
18 | renderTabbedBox();
19 | }
20 |
21 | var TabbedBox = React.createClass({
22 | render: function() {
23 | return (
24 | TabbedArea({activeKey: key, onSelect: handleSelect},
25 | TabPane({eventKey: 1, tab: "Editor"},
26 | "TabPane 1 content"
27 | ),
28 | TabPane({eventKey: 2, tab: "Preview"},
29 | "TabPane 2 content"
30 | )
31 | )
32 | )
33 | }
34 | });
35 |
36 | var tabbedBox = React.createFactory(TabbedBox);
37 |
38 | // Rendering
39 | function renderTabbedBox () {
40 | React.render(
41 | tabbedBox(),
42 | document.getElementById("tabs")
43 | );
44 | }
45 |
46 | renderTabbedBox();
47 |
48 | // Exports from this module
49 | exports.renderTabbedBox = renderTabbedBox;
50 |
51 | });
52 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/utils/joinClasses.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {/**
2 | * Copyright 2013-2014, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This file contains an unmodified version of:
6 | * https://github.com/facebook/react/blob/v0.12.0/src/utils/joinClasses.js
7 | *
8 | * This source code is licensed under the BSD-style license found here:
9 | * https://github.com/facebook/react/blob/v0.12.0/LICENSE
10 | * An additional grant of patent rights can be found here:
11 | * https://github.com/facebook/react/blob/v0.12.0/PATENTS
12 | */
13 |
14 | "use strict";
15 |
16 | /**
17 | * Combines multiple className strings into one.
18 | * http://jsperf.com/joinclasses-args-vs-array
19 | *
20 | * @param {...?string} classes
21 | * @return {string}
22 | */
23 | function joinClasses(className/*, ... */) {
24 | if (!className) {
25 | className = '';
26 | }
27 | var nextClass;
28 | var argLength = arguments.length;
29 | if (argLength > 1) {
30 | for (var ii = 1; ii < argLength; ii++) {
31 | nextClass = arguments[ii];
32 | if (nextClass) {
33 | className = (className ? className + ' ' : '') + nextClass;
34 | }
35 | }
36 | }
37 | return className;
38 | }
39 |
40 | module.exports = joinClasses;
41 |
42 | });
43 |
--------------------------------------------------------------------------------
/TodoMVC/lib/todo-toolbox-overlay.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | module.metadata = {
6 | "stability": "stable"
7 | };
8 |
9 | // Add-on SDK
10 | const options = require("@loader/options");
11 | const { Cu, Ci } = require("chrome");
12 | const { Class } = require("sdk/core/heritage");
13 |
14 | // Firebug SDK
15 | const { ToolboxOverlay } = require("firebug.sdk/lib/toolbox-overlay.js");
16 |
17 | /**
18 | * This object represents a toolbox overlay. The life cycle of this
19 | * object follows life cycle of the toolbox, which allows to execute
20 | * any initialization and clean up logic related to our extension.
21 | *
22 | * There is one instance of this object created per developer Toolbox.
23 | */
24 | const TodoToolboxOverlay = Class(
25 | /** @lends TodoToolboxOverlay */
26 | {
27 | extends: ToolboxOverlay,
28 |
29 | overlayId: "TodoToolboxOverlay",
30 |
31 | // Initialization
32 |
33 | initialize: function(options) {
34 | ToolboxOverlay.prototype.initialize.apply(this, arguments);
35 | },
36 |
37 | destroy: function() {
38 | ToolboxOverlay.prototype.destroy.apply(this, arguments);
39 | },
40 |
41 | // Events
42 |
43 | onReady: function(options) {
44 | ToolboxOverlay.prototype.onReady.apply(this, arguments);
45 | },
46 | });
47 |
48 | // Exports from this module
49 | exports.TodoToolboxOverlay = TodoToolboxOverlay;
50 |
--------------------------------------------------------------------------------
/SimpleMVC/data/myView.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | /* The following implementation serves as a View (the V in MVC pattern) */
4 |
5 | /**
6 | * Button click handler
7 | */
8 | function onClick() {
9 | postChromeMessage("format-time", {
10 | time: Date.now()
11 | })
12 | }
13 |
14 | /**
15 | * Listen for 'update-view' event that is sent as a response
16 | * to 'format-time'.
17 | */
18 | addEventListener("update-view", function(event) {
19 | console.log("myView.js: update-view", event);
20 |
21 | var content = document.getElementById("content");
22 | var node = document.createElement("div");
23 | node.textContent = event.data;
24 | node.className = "time";
25 | content.appendChild(node);
26 | });
27 |
28 | /**
29 | * Post events to the frameScript.js scope, it's consequently
30 | * forwarded to the chrome scope through message manager and
31 | * handled by myPanel.js (Controller, chrome scope).
32 | *
33 | * @param type {String} Type of the message.
34 | * @param data {Object} Message data, must be serializable to JSON.
35 | */
36 | function postChromeMessage(id, data) {
37 | console.log("myView.js: postChromeMessage; " + id, data);
38 |
39 | // Generate custom DOM event.
40 | const event = new MessageEvent("my-extension/event", {
41 | data: {
42 | type: id,
43 | args: data,
44 | }
45 | });
46 |
47 | dispatchEvent(event);
48 | }
49 |
--------------------------------------------------------------------------------
/SimpleMVC/data/myView.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
This example extension shows how to use Model View Controller (MVC) pattern
10 | in context of an extension for Firefox DevTools. It also demonstrates how to
11 | connect all components of the pattern together through events.
12 |
Use case:
13 |
14 |
Clicking on the button below generates standard click event handled
15 | by this View (myView.html).
16 |
The event is forwarded throug a message manager to Controller
17 | living in the chrome scope (myPanel.js) together with current time [ms] as a payload.
18 |
When the time arrives to the Controller it's further passed to Model
19 | (myExtension.js, also living in the chrome scope) to nicely format it.
20 |
The formatted string is sent back to this View (through
21 | message manager to the content scope and finally as DOM event to the View)
22 |
23 |
24 | Checkout the Browser Console for logs.
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/TodoMVC/data/todo-view.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | /* The following implementation serves as a View (the V in MVC pattern) */
4 |
5 | define(function(require/*, exports, module*/) {
6 |
7 | "use strict";
8 |
9 | // Firebug.SDK
10 | const { createFactories } = require("reps/rep-utils");
11 | const { PanelView, createView } = require("firebug.sdk/lib/panel-view");
12 |
13 | // ReactJS & Redux
14 | const React = require("react");
15 | const { Provider } = createFactories(require("react-redux"));
16 |
17 | // TodoMVC
18 | const { App } = createFactories(require("./containers/app"));
19 | const { configureStore } = require("./store/configure-store");
20 |
21 | var store = configureStore();
22 |
23 | /**
24 | * This object represents a view that is responsible for rendering
25 | * Toolbox panel's content. The view is running inside panel's frame
26 | * and so, within content scope with no extra privileges.
27 | *
28 | * Rendering is done through standard web technologies like e.g.
29 | * React and Redux.
30 | */
31 | var TodoView = createView(PanelView,
32 | /** @lends TodoView */
33 | {
34 | /**
35 | * Render the top level application component.
36 | */
37 | initialize: function() {
38 | var content = document.getElementById("content");
39 | var theApp = React.render(Provider({store: store},
40 | () => App({})
41 | ), content);
42 | }
43 | });
44 |
45 | // End of main.js
46 | });
47 |
--------------------------------------------------------------------------------
/TodoMVC/data/containers/app.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // Firebug.SDK
8 | const { createFactories } = require("reps/rep-utils");
9 |
10 | // React & Redux
11 | const React = require("react");
12 | const { bindActionCreators } = require("redux");
13 | const { connect } = require("react-redux");
14 |
15 | // TodoMVC
16 | const { Header } = createFactories(require("../components/header"));
17 | const { MainSection } = createFactories(require("../components/main-section"));
18 | const TodoActions = require("../actions/todos");
19 |
20 | // Shortcuts
21 | const { div } = React.DOM;
22 | const { PropTypes } = React;
23 |
24 | /**
25 | * TODO: docs
26 | */
27 | var App = React.createClass(
28 | /** @lends App */
29 | {
30 | displayName: "App",
31 |
32 | render: function() {
33 | const { todos, dispatch } = this.props;
34 | const actions = bindActionCreators(TodoActions, dispatch);
35 |
36 | return (
37 | div({},
38 | Header({addTodo: actions.addTodo}),
39 | MainSection({todos: todos, actions: actions})
40 | )
41 | );
42 | }
43 | });
44 |
45 | App.propTypes = {
46 | todos: PropTypes.array.isRequired,
47 | dispatch: PropTypes.func.isRequired
48 | };
49 |
50 | function mapStateToProps(state) {
51 | return {
52 | todos: state.todos
53 | };
54 | }
55 |
56 | // Exports from this module
57 | exports.App = connect(mapStateToProps)(App);
58 | });
59 |
--------------------------------------------------------------------------------
/ConsoleListener/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cu, Ci } = require("chrome");
6 | const { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
7 |
8 | /**
9 | * Application entry point
10 | */
11 | function main(options, callbacks) {
12 | // Wait for Console panel initialization
13 | gDevTools.on("webconsole-init", onConsoleInit);
14 | }
15 |
16 | function onUnload(reason) {
17 | }
18 |
19 | /**
20 | * Console panel customization.
21 | *
22 | * @param eventId ID of the event
23 | * @param toolbox Parent toolbox object
24 | * @param panelFrame Panel iframe
25 | */
26 | function onConsoleInit(eventId, toolbox, panelFrame) {
27 | // Use the toolbox object and wait till the Console panel
28 | // is fully ready (panel frame loaded).
29 | toolbox.once("webconsole-ready", (eventId, panel) => {
30 | panel.hud.ui.on("new-messages", onNewMessages);
31 | });
32 | }
33 |
34 | function onNewMessages(topic, messages) {
35 | messages.forEach(msg => {
36 | onNewMessage(msg);
37 | });
38 | }
39 |
40 | function onNewMessage(msg) {
41 | // Get DOM node associated with the message
42 | let node = msg.node;
43 | let category = node.getAttribute("category");
44 |
45 | // If category of the node is 'console' change the background.
46 | if (category == "console") {
47 | msg.node.setAttribute("style", "background-color: rgb(236, 183, 159)");
48 | }
49 | }
50 |
51 | // Exports from this module
52 | exports.main = main;
53 | exports.onUnload = onUnload;
54 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/PageItem.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 |
5 | var PageItem = React.createClass({displayName: 'PageItem',
6 |
7 | propTypes: {
8 | disabled: React.PropTypes.bool,
9 | previous: React.PropTypes.bool,
10 | next: React.PropTypes.bool,
11 | onSelect: React.PropTypes.func,
12 | eventKey: React.PropTypes.any
13 | },
14 |
15 | getDefaultProps: function () {
16 | return {
17 | href: '#'
18 | };
19 | },
20 |
21 | render: function () {
22 | var classes = {
23 | 'disabled': this.props.disabled,
24 | 'previous': this.props.previous,
25 | 'next': this.props.next
26 | };
27 |
28 | return (
29 | React.createElement("li", React.__spread({},
30 | this.props,
31 | {className: joinClasses(this.props.className, classSet(classes))}),
32 | React.createElement("a", {
33 | href: this.props.href,
34 | title: this.props.title,
35 | onClick: this.handleSelect,
36 | ref: "anchor"},
37 | this.props.children
38 | )
39 | )
40 | );
41 | },
42 |
43 | handleSelect: function (e) {
44 | if (this.props.onSelect) {
45 | e.preventDefault();
46 |
47 | if (!this.props.disabled) {
48 | this.props.onSelect(this.props.eventKey, this.props.href);
49 | }
50 | }
51 | }
52 | });
53 |
54 | module.exports = PageItem;
55 | });
56 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/ModalTrigger.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var OverlayMixin = require('./OverlayMixin');
3 | var cloneWithProps = require('./utils/cloneWithProps');
4 |
5 | var createChainedFunction = require('./utils/createChainedFunction');
6 |
7 | var ModalTrigger = React.createClass({displayName: 'ModalTrigger',
8 | mixins: [OverlayMixin],
9 |
10 | propTypes: {
11 | modal: React.PropTypes.node.isRequired
12 | },
13 |
14 | getInitialState: function () {
15 | return {
16 | isOverlayShown: false
17 | };
18 | },
19 |
20 | show: function () {
21 | this.setState({
22 | isOverlayShown: true
23 | });
24 | },
25 |
26 | hide: function () {
27 | this.setState({
28 | isOverlayShown: false
29 | });
30 | },
31 |
32 | toggle: function () {
33 | this.setState({
34 | isOverlayShown: !this.state.isOverlayShown
35 | });
36 | },
37 |
38 | renderOverlay: function () {
39 | if (!this.state.isOverlayShown) {
40 | return React.createElement("span", null);
41 | }
42 |
43 | return cloneWithProps(
44 | this.props.modal,
45 | {
46 | onRequestHide: this.hide
47 | }
48 | );
49 | },
50 |
51 | render: function () {
52 | var child = React.Children.only(this.props.children);
53 | return cloneWithProps(
54 | child,
55 | {
56 | onClick: createChainedFunction(child.props.onClick, this.toggle)
57 | }
58 | );
59 | }
60 | });
61 |
62 | module.exports = ModalTrigger;
63 | });
64 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/DropdownMenu.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var cloneWithProps = require('./utils/cloneWithProps');
5 |
6 | var createChainedFunction = require('./utils/createChainedFunction');
7 | var ValidComponentChildren = require('./utils/ValidComponentChildren');
8 |
9 | var DropdownMenu = React.createClass({displayName: 'DropdownMenu',
10 | propTypes: {
11 | pullRight: React.PropTypes.bool,
12 | onSelect: React.PropTypes.func
13 | },
14 |
15 | render: function () {
16 | var classes = {
17 | 'dropdown-menu': true,
18 | 'dropdown-menu-right': this.props.pullRight
19 | };
20 |
21 | return (
22 | React.createElement("ul", React.__spread({},
23 | this.props,
24 | {className: joinClasses(this.props.className, classSet(classes)),
25 | role: "menu"}),
26 | ValidComponentChildren.map(this.props.children, this.renderMenuItem)
27 | )
28 | );
29 | },
30 |
31 | renderMenuItem: function (child, index) {
32 | return cloneWithProps(
33 | child,
34 | {
35 | // Capture onSelect events
36 | onSelect: createChainedFunction(child.props.onSelect, this.props.onSelect),
37 |
38 | // Force special props to be transferred
39 | key: child.key ? child.key : index,
40 | ref: child.ref
41 | }
42 | );
43 | }
44 | });
45 |
46 | module.exports = DropdownMenu;
47 | });
48 |
--------------------------------------------------------------------------------
/HelloWorld/lib/myPanel.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const self = require("sdk/self");
6 |
7 | const { Cu, Ci } = require("chrome");
8 | const { Panel } = require("dev/panel.js");
9 | const { Class } = require("sdk/core/heritage");
10 | const { Tool } = require("dev/toolbox");
11 |
12 | /**
13 | * This object represents a new {@Toolbox} panel
14 | */
15 | const MyPanel = Class(
16 | /** @lends MyPanel */
17 | {
18 | extends: Panel,
19 |
20 | label: "My Panel",
21 | tooltip: "My panel tooltip",
22 | icon: "./icon-16.png",
23 | url: "./myPanel.html",
24 |
25 | /**
26 | * Executed by the framework when an instance of this panel is created.
27 | * There is one instance of this panel per {@Toolbox}. The panel is
28 | * instantiated when selected in the toolbox for the first time.
29 | */
30 | initialize: function(options) {
31 | },
32 |
33 | /**
34 | * Executed by the framework when the panel is destroyed.
35 | */
36 | dispose: function() {
37 | },
38 |
39 | /**
40 | * Executed by the framework when the panel content iframe is
41 | * constructed. Allows e.g to connect the backend through
42 | * `debuggee` object
43 | */
44 | setup: function(options) {
45 | console.log("MyPanel.setup" + options.debuggee);
46 |
47 | this.debuggee = options.debuggee;
48 |
49 | // TODO: connect to backend using options.debuggee
50 | },
51 |
52 | onReady: function() {
53 | console.log("MyPanel.onReady " + this.debuggee);
54 | }
55 | });
56 |
57 | const myTool = new Tool({
58 | name: "MyTool",
59 | panels: {
60 | myPanel: MyPanel
61 | }
62 | });
63 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/utils/Object.assign.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {/**
2 | * Copyright 2014, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This file contains an unmodified version of:
6 | * https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/Object.assign.js
7 | *
8 | * This source code is licensed under the BSD-style license found here:
9 | * https://github.com/facebook/react/blob/v0.12.0/LICENSE
10 | * An additional grant of patent rights can be found here:
11 | * https://github.com/facebook/react/blob/v0.12.0/PATENTS
12 | */
13 |
14 | // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign
15 |
16 | function assign(target, sources) {
17 | if (target == null) {
18 | throw new TypeError('Object.assign target cannot be null or undefined');
19 | }
20 |
21 | var to = Object(target);
22 | var hasOwnProperty = Object.prototype.hasOwnProperty;
23 |
24 | for (var nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
25 | var nextSource = arguments[nextIndex];
26 | if (nextSource == null) {
27 | continue;
28 | }
29 |
30 | var from = Object(nextSource);
31 |
32 | // We don't currently support accessors nor proxies. Therefore this
33 | // copy cannot throw. If we ever supported this then we must handle
34 | // exceptions and side-effects. We don't support symbols so they won't
35 | // be transferred.
36 |
37 | for (var key in from) {
38 | if (hasOwnProperty.call(from, key)) {
39 | to[key] = from[key];
40 | }
41 | }
42 | }
43 |
44 | return to;
45 | };
46 |
47 | module.exports = assign;
48 |
49 | });
50 |
--------------------------------------------------------------------------------
/NetAnalysis/README.md:
--------------------------------------------------------------------------------
1 | NetAnalysis
2 | ===========
3 | An example showing how to perform custom analysis of data collected by
4 | the Network panel. Check out how to get all data as HAR object.
5 | See also: http://www.softwareishard.com/blog/har-12-spec/
6 |
7 | Instructions
8 | ------------
9 | 1. Install the extension
10 | 2. Open developer tools toolbox (F12 or Menu -> Developer -> Toogle Tools)
11 | 3. Select the 'Network' panel
12 | 4. You should see a 'HAR' button in the upper right corner of the panel.
13 | 5. Click the button and check Browser Console (Ctrl+Shift+J or Menu -> Developer -> Browser Console),
14 | to see the HAR object.
15 | 6. Check the source code, it shows how to get all data collected by the Network panel as HAR object.
16 |
17 | Further Resources
18 | -----------------
19 | * HAR Spec: http://www.softwareishard.com/blog/har-12-spec/
20 | * HAR Exporter: https://github.com/mozilla/gecko-dev/blob/master/browser/devtools/netmonitor/har/har-exporter.js
21 | * HAR Builder: https://github.com/mozilla/gecko-dev/blob/master/browser/devtools/netmonitor/har/har-builder.js
22 | * DevTools API: https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
23 | * DevTools/Hacking: https://wiki.mozilla.org/DevTools/Hacking
24 |
25 |
26 | Screenshot
27 | ----------
28 | The following screenshot shows the additional button that can perform
29 | analysis similarly to what e.g. the well known YSlow extension does.
30 | The screenshot is taken from Firefox native DevTools with Firebug
31 | theme activated.
32 |
33 | 
34 |
--------------------------------------------------------------------------------
/TodoMVC/data/reducers/todos.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // React & Redux
8 | const React = require("react");
9 |
10 | const { ADD_TODO, DELETE_TODO, EDIT_TODO, COMPLETE_TODO, COMPLETE_ALL,
11 | CLEAR_COMPLETED } = require("../constants/action-types");
12 |
13 | const initialState = [{
14 | text: "Use Redux",
15 | completed: false,
16 | id: 0
17 | }];
18 |
19 | function todos(state = initialState, action) {
20 | switch (action.type) {
21 | case ADD_TODO:
22 | return [{
23 | id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
24 | completed: false,
25 | text: action.text
26 | }, ...state];
27 |
28 | case DELETE_TODO:
29 | return state.filter(todo =>
30 | todo.id !== action.id
31 | );
32 |
33 | case EDIT_TODO:
34 | return state.map(todo =>
35 | todo.id === action.id ?
36 | Object.assign({}, todo, { text: action.text }) :
37 | todo
38 | );
39 |
40 | case COMPLETE_TODO:
41 | return state.map(todo =>
42 | todo.id === action.id ?
43 | Object.assign({}, todo, { completed: !todo.completed }) :
44 | todo
45 | );
46 |
47 | case COMPLETE_ALL:
48 | const areAllMarked = state.every(todo => todo.completed);
49 | return state.map(todo => Object.assign({}, todo, {
50 | completed: !areAllMarked
51 | }));
52 |
53 | case CLEAR_COMPLETED:
54 | return state.filter(todo => todo.completed === false);
55 |
56 | default:
57 | return state;
58 | }
59 | }
60 |
61 | // Exports from this module
62 | exports.todos = todos;
63 | });
64 |
--------------------------------------------------------------------------------
/SimpleMVC/data/frameScript.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | (function({
6 | content,
7 | addMessageListener,
8 | sendAsyncMessage,
9 | removeMessageListener,
10 | addEventListener}) {
11 |
12 | const Cu = Components.utils;
13 | const Cc = Components.classes;
14 | const Ci = Components.interfaces;
15 |
16 | const document = content.document;
17 | const window = content;
18 |
19 | /**
20 | * Register a listener for messages from myPanel.js (Controller, chrome scope).
21 | * A message from chrome scope comes through a message manager.
22 | * It's further distributed as DOM event, so it can be handled by
23 | * myView.js (View, content scope).
24 | */
25 | addMessageListener("my-extension/message", message => {
26 | const { type, data } = message.data;
27 | const event = new window.MessageEvent(type, {
28 | data: data,
29 | });
30 |
31 | window.dispatchEvent(event);
32 | });
33 |
34 | /**
35 | * Send a message to the parent myPanel.js (Controller, chrome scope).
36 | */
37 | function postChromeMessage(id, args) {
38 | const event = {
39 | type: id,
40 | args: args,
41 | };
42 |
43 | sendAsyncMessage("message", event);
44 | }
45 |
46 | /**
47 | * Register a listener for DOM events from myView.js (View, content scope).
48 | * It's further distributed as a message through message manager to
49 | * myPanel.js (Controller, chrome scope).
50 | */
51 | window.addEventListener("my-extension/event", function (event) {
52 | const data = event.data;
53 | postChromeMessage(data.type, data.args);
54 | }, true);
55 |
56 | // End of scope
57 | })(this);
58 |
--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
1 | Software License Agreement (BSD License)
2 |
3 | Copyright (c) 2009, Mozilla Foundation
4 | All rights reserved.
5 |
6 | Redistribution and use of this software in source and binary forms, with or without modification,
7 | are permitted provided that the following conditions are met:
8 |
9 | * Redistributions of source code must retain the above
10 | copyright notice, this list of conditions and the
11 | following disclaimer.
12 |
13 | * Redistributions in binary form must reproduce the above
14 | copyright notice, this list of conditions and the
15 | following disclaimer in the documentation and/or other
16 | materials provided with the distribution.
17 |
18 | * Neither the name of Mozilla Foundation nor the names of its
19 | contributors may be used to endorse or promote products
20 | derived from this software without specific prior
21 | written permission of Mozilla Foundation.
22 |
23 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
24 | IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
25 | FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
26 | CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
27 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
28 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
29 | IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
30 | OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
31 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Alert.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 |
6 |
7 | var Alert = React.createClass({displayName: 'Alert',
8 | mixins: [BootstrapMixin],
9 |
10 | propTypes: {
11 | onDismiss: React.PropTypes.func,
12 | dismissAfter: React.PropTypes.number
13 | },
14 |
15 | getDefaultProps: function () {
16 | return {
17 | bsClass: 'alert',
18 | bsStyle: 'info'
19 | };
20 | },
21 |
22 | renderDismissButton: function () {
23 | return (
24 | React.createElement("button", {
25 | type: "button",
26 | className: "close",
27 | onClick: this.props.onDismiss,
28 | 'aria-hidden': "true"},
29 | "×"
30 | )
31 | );
32 | },
33 |
34 | render: function () {
35 | var classes = this.getBsClassSet();
36 | var isDismissable = !!this.props.onDismiss;
37 |
38 | classes['alert-dismissable'] = isDismissable;
39 |
40 | return (
41 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
42 | isDismissable ? this.renderDismissButton() : null,
43 | this.props.children
44 | )
45 | );
46 | },
47 |
48 | componentDidMount: function() {
49 | if (this.props.dismissAfter && this.props.onDismiss) {
50 | this.dismissTimer = setTimeout(this.props.onDismiss, this.props.dismissAfter);
51 | }
52 | },
53 |
54 | componentWillUnmount: function() {
55 | clearTimeout(this.dismissTimer);
56 | }
57 | });
58 |
59 | module.exports = Alert;
60 | });
61 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Tooltip.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 |
6 |
7 | var Tooltip = React.createClass({displayName: 'Tooltip',
8 | mixins: [BootstrapMixin],
9 |
10 | propTypes: {
11 | placement: React.PropTypes.oneOf(['top','right', 'bottom', 'left']),
12 | positionLeft: React.PropTypes.number,
13 | positionTop: React.PropTypes.number,
14 | arrowOffsetLeft: React.PropTypes.number,
15 | arrowOffsetTop: React.PropTypes.number
16 | },
17 |
18 | getDefaultProps: function () {
19 | return {
20 | placement: 'right'
21 | };
22 | },
23 |
24 | render: function () {
25 | var classes = {};
26 | classes['tooltip'] = true;
27 | classes[this.props.placement] = true;
28 | classes['in'] = this.props.positionLeft != null || this.props.positionTop != null;
29 |
30 | var style = {};
31 | style['left'] = this.props.positionLeft;
32 | style['top'] = this.props.positionTop;
33 |
34 | var arrowStyle = {};
35 | arrowStyle['left'] = this.props.arrowOffsetLeft;
36 | arrowStyle['top'] = this.props.arrowOffsetTop;
37 |
38 | return (
39 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes)), style: style}),
40 | React.createElement("div", {className: "tooltip-arrow", style: arrowStyle}),
41 | React.createElement("div", {className: "tooltip-inner"},
42 | this.props.children
43 | )
44 | )
45 | );
46 | }
47 | });
48 |
49 | module.exports = Tooltip;
50 | });
51 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/utils/classSet.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {/**
2 | * Copyright 2013-2014, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This file contains an unmodified version of:
6 | * https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/cx.js
7 | *
8 | * This source code is licensed under the BSD-style license found here:
9 | * https://github.com/facebook/react/blob/v0.12.0/LICENSE
10 | * An additional grant of patent rights can be found here:
11 | * https://github.com/facebook/react/blob/v0.12.0/PATENTS
12 | */
13 |
14 | /**
15 | * This function is used to mark string literals representing CSS class names
16 | * so that they can be transformed statically. This allows for modularization
17 | * and minification of CSS class names.
18 | *
19 | * In static_upstream, this function is actually implemented, but it should
20 | * eventually be replaced with something more descriptive, and the transform
21 | * that is used in the main stack should be ported for use elsewhere.
22 | *
23 | * @param string|object className to modularize, or an object of key/values.
24 | * In the object case, the values are conditions that
25 | * determine if the className keys should be included.
26 | * @param [string ...] Variable list of classNames in the string case.
27 | * @return string Renderable space-separated CSS className.
28 | */
29 | function cx(classNames) {
30 | if (typeof classNames == 'object') {
31 | return Object.keys(classNames).filter(function(className) {
32 | return classNames[className];
33 | }).join(' ');
34 | } else {
35 | return Array.prototype.join.call(arguments, ' ');
36 | }
37 | }
38 |
39 | module.exports = cx;
40 | });
41 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/MenuItem.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 |
5 | var MenuItem = React.createClass({displayName: 'MenuItem',
6 | propTypes: {
7 | header: React.PropTypes.bool,
8 | divider: React.PropTypes.bool,
9 | href: React.PropTypes.string,
10 | title: React.PropTypes.string,
11 | onSelect: React.PropTypes.func,
12 | eventKey: React.PropTypes.any
13 | },
14 |
15 | getDefaultProps: function () {
16 | return {
17 | href: '#'
18 | };
19 | },
20 |
21 | handleClick: function (e) {
22 | if (this.props.onSelect) {
23 | e.preventDefault();
24 | this.props.onSelect(this.props.eventKey);
25 | }
26 | },
27 |
28 | renderAnchor: function () {
29 | return (
30 | React.createElement("a", {onClick: this.handleClick, href: this.props.href, title: this.props.title, tabIndex: "-1"},
31 | this.props.children
32 | )
33 | );
34 | },
35 |
36 | render: function () {
37 | var classes = {
38 | 'dropdown-header': this.props.header,
39 | 'divider': this.props.divider
40 | };
41 |
42 | var children = null;
43 | if (this.props.header) {
44 | children = this.props.children;
45 | } else if (!this.props.divider) {
46 | children = this.renderAnchor();
47 | }
48 |
49 | return (
50 | React.createElement("li", React.__spread({}, this.props, {role: "presentation", title: null, href: null,
51 | className: joinClasses(this.props.className, classSet(classes))}),
52 | children
53 | )
54 | );
55 | }
56 | });
57 |
58 | module.exports = MenuItem;
59 | });
60 |
--------------------------------------------------------------------------------
/HelloReact/lib/myExtension.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cu } = require("chrome");
6 |
7 | const { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
8 |
9 | /**
10 | * This object represents the extension. It's a singleton (only one
11 | * instance created).
12 | */
13 | const MyExtension =
14 | /** @lends MyExtension */
15 | {
16 | initialize: function(options) {
17 | // Hook developer tools events.
18 | gDevTools.on("toolbox-ready", this.onToolboxReady);
19 | gDevTools.on("toolbox-destroy", this.onToolboxDestroy);
20 | gDevTools.on("toolbox-destroyed", this.onToolboxClosed);
21 | },
22 |
23 | shutdown: function(reason) {
24 | gDevTools.off("toolbox-ready", this.onToolboxReady);
25 | gDevTools.off("toolbox-destroy", this.onToolboxDestroy);
26 | gDevTools.off("toolbox-destroyed", this.onToolboxClosed);
27 | },
28 |
29 | // Event Handlers
30 |
31 | /**
32 | * Executed by the framework when {@Toolbox} is opened and ready to use.
33 | * There is one instance of the {@Toolbox} per browser window.
34 | * The event is fired after the current panel is opened & loaded
35 | * (happens asynchronously) and ready to use.
36 | */
37 | onToolboxReady: function(event, toolbox) {
38 | },
39 |
40 | /**
41 | * Executed by the framework at the beginning of the {@Toolbox} destroy
42 | * process. All instantiated panel objects are still available, which
43 | * makes this method suitable for e.g. removing event listeners.
44 | */
45 | onToolboxDestroy: function(eventId, target) {
46 | },
47 |
48 | /**
49 | * Executed by the framework at the end of the {@Toolbox} destroy
50 | * process. All panel objects are destroyed at this moment.
51 | */
52 | onToolboxClosed: function(eventId, target) {
53 | },
54 | };
55 |
56 | // Exports from this module
57 | exports.MyExtension = MyExtension;
58 |
--------------------------------------------------------------------------------
/HelloWorld/lib/myExtension.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cu } = require("chrome");
6 |
7 | const { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
8 |
9 | /**
10 | * This object represents the extension. It's a singleton (only one
11 | * instance created).
12 | */
13 | const MyExtension =
14 | /** @lends MyExtension */
15 | {
16 | initialize: function(options) {
17 | // Hook developer tools events.
18 | gDevTools.on("toolbox-ready", this.onToolboxReady);
19 | gDevTools.on("toolbox-destroy", this.onToolboxDestroy);
20 | gDevTools.on("toolbox-destroyed", this.onToolboxClosed);
21 | },
22 |
23 | shutdown: function(reason) {
24 | gDevTools.off("toolbox-ready", this.onToolboxReady);
25 | gDevTools.off("toolbox-destroy", this.onToolboxDestroy);
26 | gDevTools.off("toolbox-destroyed", this.onToolboxClosed);
27 | },
28 |
29 | // Event Handlers
30 |
31 | /**
32 | * Executed by the framework when {@Toolbox} is opened and ready to use.
33 | * There is one instance of the {@Toolbox} per browser window.
34 | * The event is fired after the current panel is opened & loaded
35 | * (happens asynchronously) and ready to use.
36 | */
37 | onToolboxReady: function(event, toolbox) {
38 | },
39 |
40 | /**
41 | * Executed by the framework at the beginning of the {@Toolbox} destroy
42 | * process. All instantiated panel objects are still available, which
43 | * makes this method suitable for e.g. removing event listeners.
44 | */
45 | onToolboxDestroy: function(eventId, target) {
46 | },
47 |
48 | /**
49 | * Executed by the framework at the end of the {@Toolbox} destroy
50 | * process. All panel objects are destroyed at this moment.
51 | */
52 | onToolboxClosed: function(eventId, target) {
53 | },
54 | };
55 |
56 | // Exports from this module
57 | exports.MyExtension = MyExtension;
58 |
--------------------------------------------------------------------------------
/TodoMVC/data/components/todo-text-input.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // React
8 | const React = require("react");
9 |
10 | // Shortcuts
11 | const { input } = React.DOM;
12 | const { PropTypes } = React;
13 |
14 | /**
15 | * TODO: docs
16 | */
17 | var TodoTextInput = React.createClass(
18 | /** @lends TodoTextInput */
19 | {
20 | displayName: "TodoTextInput",
21 |
22 | getInitialState: function() {
23 | return {
24 | text: this.props.text || ""
25 | };
26 | },
27 |
28 | handleSubmit: function(e) {
29 | const text = e.target.value.trim();
30 | if (e.which === 13) {
31 | this.props.onSave(text);
32 | if (this.props.newTodo) {
33 | this.setState({ text: "" });
34 | }
35 | }
36 | },
37 |
38 | handleChange: function(e) {
39 | this.setState({ text: e.target.value });
40 | },
41 |
42 | handleBlur: function(e) {
43 | if (!this.props.newTodo) {
44 | this.props.onSave(e.target.value);
45 | }
46 | },
47 |
48 | render: function() {
49 | var classNames = [];
50 |
51 | if (this.props.editing) {
52 | classNames.push("edit");
53 | }
54 |
55 | if (this.props.newTodo) {
56 | classNames.push("new-todo");
57 | }
58 |
59 | return (
60 | input({className: classNames.join(" "),
61 | type: "text",
62 | placeholder: this.props.placeholder,
63 | autoFocus: "true",
64 | value: this.state.text,
65 | onBlur: this.handleBlur.bind(this),
66 | onChange: this.handleChange.bind(this),
67 | onKeyDown: this.handleSubmit.bind(this)
68 | })
69 | )
70 | }
71 | });
72 |
73 | TodoTextInput.propTypes = {
74 | onSave: PropTypes.func.isRequired,
75 | text: PropTypes.string,
76 | placeholder: PropTypes.string,
77 | editing: PropTypes.bool,
78 | newTodo: PropTypes.bool
79 | };
80 |
81 | // Exports from this module
82 | exports.TodoTextInput = TodoTextInput;
83 | });
84 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Popover.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 |
6 |
7 | var Popover = React.createClass({displayName: 'Popover',
8 | mixins: [BootstrapMixin],
9 |
10 | propTypes: {
11 | placement: React.PropTypes.oneOf(['top','right', 'bottom', 'left']),
12 | positionLeft: React.PropTypes.number,
13 | positionTop: React.PropTypes.number,
14 | arrowOffsetLeft: React.PropTypes.number,
15 | arrowOffsetTop: React.PropTypes.number,
16 | title: React.PropTypes.node
17 | },
18 |
19 | getDefaultProps: function () {
20 | return {
21 | placement: 'right'
22 | };
23 | },
24 |
25 | render: function () {
26 | var classes = {};
27 | classes['popover'] = true;
28 | classes[this.props.placement] = true;
29 | classes['in'] = this.props.positionLeft != null || this.props.positionTop != null;
30 |
31 | var style = {};
32 | style['left'] = this.props.positionLeft;
33 | style['top'] = this.props.positionTop;
34 | style['display'] = 'block';
35 |
36 | var arrowStyle = {};
37 | arrowStyle['left'] = this.props.arrowOffsetLeft;
38 | arrowStyle['top'] = this.props.arrowOffsetTop;
39 |
40 | return (
41 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes)), style: style, title: null}),
42 | React.createElement("div", {className: "arrow", style: arrowStyle}),
43 | this.props.title ? this.renderTitle() : null,
44 | React.createElement("div", {className: "popover-content"},
45 | this.props.children
46 | )
47 | )
48 | );
49 | },
50 |
51 | renderTitle: function() {
52 | return (
53 | React.createElement("h3", {className: "popover-title"}, this.props.title)
54 | );
55 | }
56 | });
57 |
58 | module.exports = Popover;
59 | });
60 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/NavItem.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 |
6 | var NavItem = React.createClass({displayName: 'NavItem',
7 | mixins: [BootstrapMixin],
8 |
9 | propTypes: {
10 | onSelect: React.PropTypes.func,
11 | active: React.PropTypes.bool,
12 | disabled: React.PropTypes.bool,
13 | href: React.PropTypes.string,
14 | title: React.PropTypes.string,
15 | eventKey: React.PropTypes.any
16 | },
17 |
18 | getDefaultProps: function () {
19 | return {
20 | href: '#'
21 | };
22 | },
23 |
24 | render: function () {
25 | var $__0=
26 |
27 |
28 |
29 |
30 |
31 | this.props,disabled=$__0.disabled,active=$__0.active,href=$__0.href,title=$__0.title,children=$__0.children,props=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{disabled:1,active:1,href:1,title:1,children:1}),
32 | classes = {
33 | 'active': active,
34 | 'disabled': disabled
35 | };
36 |
37 | return (
38 | React.createElement("li", React.__spread({}, props, {className: joinClasses(props.className, classSet(classes))}),
39 | React.createElement("a", {
40 | href: href,
41 | title: title,
42 | onClick: this.handleClick,
43 | ref: "anchor"},
44 | children
45 | )
46 | )
47 | );
48 | },
49 |
50 | handleClick: function (e) {
51 | if (this.props.onSelect) {
52 | e.preventDefault();
53 |
54 | if (!this.props.disabled) {
55 | this.props.onSelect(this.props.eventKey, this.props.href);
56 | }
57 | }
58 | }
59 | });
60 |
61 | module.exports = NavItem;
62 | });
63 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/utils/EventListener.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {/**
2 | * Copyright 2013-2014 Facebook, Inc.
3 | *
4 | * This file contains a modified version of:
5 | * https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/EventListener.js
6 | *
7 | * Licensed under the Apache License, Version 2.0 (the "License");
8 | * you may not use this file except in compliance with the License.
9 | * You may obtain a copy of the License at
10 | *
11 | * http://www.apache.org/licenses/LICENSE-2.0
12 | *
13 | * Unless required by applicable law or agreed to in writing, software
14 | * distributed under the License is distributed on an "AS IS" BASIS,
15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 | * See the License for the specific language governing permissions and
17 | * limitations under the License.
18 | *
19 | * TODO: remove in favour of solution provided by:
20 | * https://github.com/facebook/react/issues/285
21 | */
22 |
23 | /**
24 | * Does not take into account specific nature of platform.
25 | */
26 | var EventListener = {
27 | /**
28 | * Listen to DOM events during the bubble phase.
29 | *
30 | * @param {DOMEventTarget} target DOM element to register listener on.
31 | * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
32 | * @param {function} callback Callback function.
33 | * @return {object} Object with a `remove` method.
34 | */
35 | listen: function(target, eventType, callback) {
36 | if (target.addEventListener) {
37 | target.addEventListener(eventType, callback, false);
38 | return {
39 | remove: function() {
40 | target.removeEventListener(eventType, callback, false);
41 | }
42 | };
43 | } else if (target.attachEvent) {
44 | target.attachEvent('on' + eventType, callback);
45 | return {
46 | remove: function() {
47 | target.detachEvent('on' + eventType, callback);
48 | }
49 | };
50 | }
51 | }
52 | };
53 |
54 | module.exports = EventListener;
55 |
56 | });
57 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/utils/CustomPropTypes.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 |
3 | var ANONYMOUS = '<>';
4 |
5 | var CustomPropTypes = {
6 | /**
7 | * Checks whether a prop provides a DOM element
8 | *
9 | * The element can be provided in two forms:
10 | * - Directly passed
11 | * - Or passed an object which has a `getDOMNode` method which will return the required DOM element
12 | *
13 | * @param props
14 | * @param propName
15 | * @param componentName
16 | * @returns {Error|undefined}
17 | */
18 | mountable: createMountableChecker()
19 | };
20 |
21 | /**
22 | * Create chain-able isRequired validator
23 | *
24 | * Largely copied directly from:
25 | * https://github.com/facebook/react/blob/0.11-stable/src/core/ReactPropTypes.js#L94
26 | */
27 | function createChainableTypeChecker(validate) {
28 | function checkType(isRequired, props, propName, componentName) {
29 | componentName = componentName || ANONYMOUS;
30 | if (props[propName] == null) {
31 | if (isRequired) {
32 | return new Error(
33 | 'Required prop `' + propName + '` was not specified in ' +
34 | '`' + componentName + '`.'
35 | );
36 | }
37 | } else {
38 | return validate(props, propName, componentName);
39 | }
40 | }
41 |
42 | var chainedCheckType = checkType.bind(null, false);
43 | chainedCheckType.isRequired = checkType.bind(null, true);
44 |
45 | return chainedCheckType;
46 | }
47 |
48 | function createMountableChecker() {
49 | function validate(props, propName, componentName) {
50 | if (typeof props[propName] !== 'object' ||
51 | typeof props[propName].getDOMNode !== 'function' && props[propName].nodeType !== 1) {
52 | return new Error(
53 | 'Invalid prop `' + propName + '` supplied to ' +
54 | '`' + componentName + '`, expected a DOM element or an object that has a `getDOMNode` method'
55 | );
56 | }
57 | }
58 |
59 | return createChainableTypeChecker(validate);
60 | }
61 |
62 | module.exports = CustomPropTypes;
63 | });
64 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/DropdownStateMixin.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var EventListener = require('./utils/EventListener');
3 |
4 | /**
5 | * Checks whether a node is within
6 | * a root nodes tree
7 | *
8 | * @param {DOMElement} node
9 | * @param {DOMElement} root
10 | * @returns {boolean}
11 | */
12 | function isNodeInRoot(node, root) {
13 | while (node) {
14 | if (node === root) {
15 | return true;
16 | }
17 | node = node.parentNode;
18 | }
19 |
20 | return false;
21 | }
22 |
23 | var DropdownStateMixin = {
24 | getInitialState: function () {
25 | return {
26 | open: false
27 | };
28 | },
29 |
30 | setDropdownState: function (newState, onStateChangeComplete) {
31 | if (newState) {
32 | this.bindRootCloseHandlers();
33 | } else {
34 | this.unbindRootCloseHandlers();
35 | }
36 |
37 | this.setState({
38 | open: newState
39 | }, onStateChangeComplete);
40 | },
41 |
42 | handleDocumentKeyUp: function (e) {
43 | if (e.keyCode === 27) {
44 | this.setDropdownState(false);
45 | }
46 | },
47 |
48 | handleDocumentClick: function (e) {
49 | // If the click originated from within this component
50 | // don't do anything.
51 | if (isNodeInRoot(e.target, this.getDOMNode())) {
52 | return;
53 | }
54 |
55 | this.setDropdownState(false);
56 | },
57 |
58 | bindRootCloseHandlers: function () {
59 | this._onDocumentClickListener =
60 | EventListener.listen(document, 'click', this.handleDocumentClick);
61 | this._onDocumentKeyupListener =
62 | EventListener.listen(document, 'keyup', this.handleDocumentKeyUp);
63 | },
64 |
65 | unbindRootCloseHandlers: function () {
66 | if (this._onDocumentClickListener) {
67 | this._onDocumentClickListener.remove();
68 | }
69 |
70 | if (this._onDocumentKeyupListener) {
71 | this._onDocumentKeyupListener.remove();
72 | }
73 | },
74 |
75 | componentWillUnmount: function () {
76 | this.unbindRootCloseHandlers();
77 | }
78 | };
79 |
80 | module.exports = DropdownStateMixin;
81 | });
82 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/index.js:
--------------------------------------------------------------------------------
1 | /*global define */
2 |
3 | define(function (require) {
4 | 'use strict';
5 |
6 | return {
7 | Accordion: require('./Accordion'),
8 | Affix: require('./Affix'),
9 | AffixMixin: require('./AffixMixin'),
10 | Alert: require('./Alert'),
11 | BootstrapMixin: require('./BootstrapMixin'),
12 | Badge: require('./Badge'),
13 | Button: require('./Button'),
14 | ButtonGroup: require('./ButtonGroup'),
15 | ButtonToolbar: require('./ButtonToolbar'),
16 | Carousel: require('./Carousel'),
17 | CarouselItem: require('./CarouselItem'),
18 | Col: require('./Col'),
19 | CollapsableMixin: require('./CollapsableMixin'),
20 | DropdownButton: require('./DropdownButton'),
21 | DropdownMenu: require('./DropdownMenu'),
22 | DropdownStateMixin: require('./DropdownStateMixin'),
23 | FadeMixin: require('./FadeMixin'),
24 | Glyphicon: require('./Glyphicon'),
25 | Grid: require('./Grid'),
26 | Input: require('./Input'),
27 | Interpolate: require('./Interpolate'),
28 | Jumbotron: require('./Jumbotron'),
29 | Label: require('./Label'),
30 | ListGroup: require('./ListGroup'),
31 | ListGroupItem: require('./ListGroupItem'),
32 | MenuItem: require('./MenuItem'),
33 | Modal: require('./Modal'),
34 | Nav: require('./Nav'),
35 | Navbar: require('./Navbar'),
36 | NavItem: require('./NavItem'),
37 | ModalTrigger: require('./ModalTrigger'),
38 | OverlayTrigger: require('./OverlayTrigger'),
39 | OverlayMixin: require('./OverlayMixin'),
40 | PageHeader: require('./PageHeader'),
41 | Panel: require('./Panel'),
42 | PanelGroup: require('./PanelGroup'),
43 | PageItem: require('./PageItem'),
44 | Pager: require('./Pager'),
45 | Popover: require('./Popover'),
46 | ProgressBar: require('./ProgressBar'),
47 | Row: require('./Row'),
48 | SplitButton: require('./SplitButton'),
49 | SubNav: require('./SubNav'),
50 | TabbedArea: require('./TabbedArea'),
51 | Table: require('./Table'),
52 | TabPane: require('./TabPane'),
53 | Tooltip: require('./Tooltip'),
54 | Well: require('./Well')
55 | };
56 | });
57 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/FadeMixin.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {/*global document */
2 | // TODO: listen for onTransitionEnd to remove el
3 | function getElementsAndSelf (root, classes){
4 | var els = root.querySelectorAll('.' + classes.join('.'));
5 |
6 | els = [].map.call(els, function(e){ return e; });
7 |
8 | for(var i = 0; i < classes.length; i++){
9 | if( !root.className.match(new RegExp('\\b' + classes[i] + '\\b'))){
10 | return els;
11 | }
12 | }
13 | els.unshift(root);
14 | return els;
15 | }
16 |
17 | module.exports = {
18 | _fadeIn: function () {
19 | var els;
20 |
21 | if (this.isMounted()) {
22 | els = getElementsAndSelf(this.getDOMNode(), ['fade']);
23 |
24 | if (els.length) {
25 | els.forEach(function (el) {
26 | el.className += ' in';
27 | });
28 | }
29 | }
30 | },
31 |
32 | _fadeOut: function () {
33 | var els = getElementsAndSelf(this._fadeOutEl, ['fade', 'in']);
34 |
35 | if (els.length) {
36 | els.forEach(function (el) {
37 | el.className = el.className.replace(/\bin\b/, '');
38 | });
39 | }
40 |
41 | setTimeout(this._handleFadeOutEnd, 300);
42 | },
43 |
44 | _handleFadeOutEnd: function () {
45 | if (this._fadeOutEl && this._fadeOutEl.parentNode) {
46 | this._fadeOutEl.parentNode.removeChild(this._fadeOutEl);
47 | }
48 | },
49 |
50 | componentDidMount: function () {
51 | if (document.querySelectorAll) {
52 | // Firefox needs delay for transition to be triggered
53 | setTimeout(this._fadeIn, 20);
54 | }
55 | },
56 |
57 | componentWillUnmount: function () {
58 | var els = getElementsAndSelf(this.getDOMNode(), ['fade']),
59 | container = (this.props.container && this.props.container.getDOMNode()) || document.body;
60 |
61 | if (els.length) {
62 | this._fadeOutEl = document.createElement('div');
63 | container.appendChild(this._fadeOutEl);
64 | this._fadeOutEl.appendChild(this.getDOMNode().cloneNode(true));
65 | // Firefox needs delay for transition to be triggered
66 | setTimeout(this._fadeOut, 20);
67 | }
68 | }
69 | };
70 |
71 | });
72 |
--------------------------------------------------------------------------------
/SimpleMVC/lib/myExtension.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cu } = require("chrome");
6 |
7 | const { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
8 |
9 | /**
10 | * This object represents the extension. It's a singleton (only one
11 | * instance created). It also serves as a Model (the M in MVC pattern)
12 | * and provides some model API (see formatTime method).
13 | */
14 | const MyExtension =
15 | /** @lends MyExtension */
16 | {
17 | initialize: function(options) {
18 | // Hook developer tools events.
19 | gDevTools.on("toolbox-ready", this.onToolboxReady);
20 | gDevTools.on("toolbox-destroy", this.onToolboxDestroy);
21 | gDevTools.on("toolbox-destroyed", this.onToolboxClosed);
22 | },
23 |
24 | shutdown: function(reason) {
25 | gDevTools.off("toolbox-ready", this.onToolboxReady);
26 | gDevTools.off("toolbox-destroy", this.onToolboxDestroy);
27 | gDevTools.off("toolbox-destroyed", this.onToolboxClosed);
28 | },
29 |
30 | // Event Handlers
31 |
32 | /**
33 | * Executed by the framework when {@Toolbox} is opened and ready to use.
34 | * There is one instance of the {@Toolbox} per browser window.
35 | * The event is fired after the current panel is opened & loaded
36 | * (happens asynchronously) and ready to use.
37 | */
38 | onToolboxReady: function(event, toolbox) {
39 | },
40 |
41 | /**
42 | * Executed by the framework at the beginning of the {@Toolbox} destroy
43 | * process. All instantiated panel objects are still available, which
44 | * makes this method suitable for e.g. removing event listeners.
45 | */
46 | onToolboxDestroy: function(eventId, target) {
47 | },
48 |
49 | /**
50 | * Executed by the framework at the end of the {@Toolbox} destroy
51 | * process. All panel objects are destroyed at this moment.
52 | */
53 | onToolboxClosed: function(eventId, target) {
54 | },
55 |
56 | // Model API
57 |
58 | /**
59 | * Returns nicely formated time string.
60 | *
61 | * @param time {Number} A time in milliseconds.
62 | */
63 | formatTime: function(time) {
64 | let date = new Date(time);
65 | return date.toString();
66 | }
67 | };
68 |
69 | // Exports from this module
70 | exports.MyExtension = MyExtension;
71 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/TabPane.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var TransitionEvents = require('./utils/TransitionEvents');
5 |
6 | var TabPane = React.createClass({displayName: 'TabPane',
7 | getDefaultProps: function () {
8 | return {
9 | animation: true
10 | };
11 | },
12 |
13 | getInitialState: function () {
14 | return {
15 | animateIn: false,
16 | animateOut: false
17 | };
18 | },
19 |
20 | componentWillReceiveProps: function (nextProps) {
21 | if (this.props.animation) {
22 | if (!this.state.animateIn && nextProps.active && !this.props.active) {
23 | this.setState({
24 | animateIn: true
25 | });
26 | } else if (!this.state.animateOut && !nextProps.active && this.props.active) {
27 | this.setState({
28 | animateOut: true
29 | });
30 | }
31 | }
32 | },
33 |
34 | componentDidUpdate: function () {
35 | if (this.state.animateIn) {
36 | setTimeout(this.startAnimateIn, 0);
37 | }
38 | if (this.state.animateOut) {
39 | TransitionEvents.addEndEventListener(
40 | this.getDOMNode(),
41 | this.stopAnimateOut
42 | );
43 | }
44 | },
45 |
46 | startAnimateIn: function () {
47 | if (this.isMounted()) {
48 | this.setState({
49 | animateIn: false
50 | });
51 | }
52 | },
53 |
54 | stopAnimateOut: function () {
55 | if (this.isMounted()) {
56 | this.setState({
57 | animateOut: false
58 | });
59 |
60 | if (typeof this.props.onAnimateOutEnd === 'function') {
61 | this.props.onAnimateOutEnd();
62 | }
63 | }
64 | },
65 |
66 | render: function () {
67 | var classes = {
68 | 'tab-pane': true,
69 | 'fade': true,
70 | 'active': this.props.active || this.state.animateOut,
71 | 'in': this.props.active && !this.state.animateIn
72 | };
73 |
74 | return (
75 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
76 | this.props.children
77 | )
78 | );
79 | }
80 | });
81 |
82 | module.exports = TabPane;
83 | });
84 |
--------------------------------------------------------------------------------
/TodoMVC/lib/todo-actor.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | // Add-on SDK
6 | const { Cc, Ci, Cu } = require("chrome");
7 | const Events = require("sdk/event/core");
8 |
9 | // DevTools
10 | const { devtools } = Cu.import("resource://gre/modules/devtools/shared/Loader.jsm", {});
11 | const { console } = Cu.import("resource://gre/modules/devtools/shared/Console.jsm", {});
12 | const { expectState } = devtools["require"]("devtools/server/actors/common");
13 | const protocol = devtools["require"]("devtools/server/protocol");
14 |
15 | // Platform
16 | const { XPCOMUtils } = Cu.import("resource://gre/modules/XPCOMUtils.jsm", {});
17 |
18 | // Constants
19 | const { method, RetVal, ActorClass, FrontClass, Front, Actor, Arg } = protocol;
20 |
21 | /**
22 | * Custom actor object
23 | */
24 | var TodoActor = ActorClass({
25 | typeName: "TodoActor",
26 |
27 | // Initialization
28 |
29 | initialize: function(conn, parent) {
30 | Actor.prototype.initialize.call(this, conn);
31 |
32 | console.log("TodoActor.initialize");
33 |
34 | this.parent = parent;
35 | this.state = "detached";
36 | },
37 |
38 | destroy: function() {
39 | if (this.state === "attached") {
40 | this.detach();
41 | }
42 |
43 | Actor.prototype.destroy.call(this);
44 | },
45 |
46 | /**
47 | * Attach to this actor.
48 | */
49 | attach: method(expectState("detached", function() {
50 | this.state = "attached";
51 |
52 | return {
53 | type: "attached"
54 | }
55 | }), {
56 | request: {},
57 | response: RetVal("json")
58 | }),
59 |
60 | /**
61 | * Detach from this actor.
62 | */
63 | detach: method(expectState("attached", function() {
64 | this.state = "detached";
65 | }), {
66 | request: {},
67 | response: {
68 | type: "detached"
69 | }
70 | }),
71 | });
72 |
73 | // Front
74 |
75 | /**
76 | * Front object for the actor above. It's intended to be used
77 | * on the client side.
78 | */
79 | var TodoActorFront = FrontClass(TodoActor, {
80 | initialize: function(client, form) {
81 | Front.prototype.initialize.call(this, client, form);
82 |
83 | this.actorID = form[TodoActor.prototype.typeName];
84 | this.manage(this);
85 | }
86 | });
87 |
88 | // Exports from this module
89 | exports.TodoActor = TodoActor;
90 | exports.TodoActorFront = TodoActorFront;
91 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Interpolate.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {// https://www.npmjs.org/package/react-interpolate-component
2 | 'use strict';
3 |
4 | var React = require('react');
5 | var ValidComponentChildren = require('./utils/ValidComponentChildren');
6 | var assign = require('./utils/Object.assign');
7 |
8 | var REGEXP = /\%\((.+?)\)s/;
9 |
10 | var Interpolate = React.createClass({
11 | displayName: 'Interpolate',
12 |
13 | propTypes: {
14 | format: React.PropTypes.string
15 | },
16 |
17 | getDefaultProps: function() {
18 | return { component: 'span' };
19 | },
20 |
21 | render: function() {
22 | var format = (ValidComponentChildren.hasValidComponent(this.props.children) ||
23 | (typeof this.props.children === 'string')) ?
24 | this.props.children : this.props.format;
25 | var parent = this.props.component;
26 | var unsafe = this.props.unsafe === true;
27 | var props = assign({}, this.props);
28 |
29 | delete props.children;
30 | delete props.format;
31 | delete props.component;
32 | delete props.unsafe;
33 |
34 | if (unsafe) {
35 | var content = format.split(REGEXP).reduce(function(memo, match, index) {
36 | var html;
37 |
38 | if (index % 2 === 0) {
39 | html = match;
40 | } else {
41 | html = props[match];
42 | delete props[match];
43 | }
44 |
45 | if (React.isValidElement(html)) {
46 | throw new Error('cannot interpolate a React component into unsafe text');
47 | }
48 |
49 | memo += html;
50 |
51 | return memo;
52 | }, '');
53 |
54 | props.dangerouslySetInnerHTML = { __html: content };
55 |
56 | return React.createElement(parent, props);
57 | } else {
58 | var kids = format.split(REGEXP).reduce(function(memo, match, index) {
59 | var child;
60 |
61 | if (index % 2 === 0) {
62 | if (match.length === 0) {
63 | return memo;
64 | }
65 |
66 | child = match;
67 | } else {
68 | child = props[match];
69 | delete props[match];
70 | }
71 |
72 | memo.push(child);
73 |
74 | return memo;
75 | }, []);
76 |
77 | return React.createElement(parent, props, kids);
78 | }
79 | }
80 | });
81 |
82 | module.exports = Interpolate;
83 |
84 | });
85 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Col.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var constants = require('./constants');
5 |
6 |
7 | var Col = React.createClass({displayName: 'Col',
8 | propTypes: {
9 | xs: React.PropTypes.number,
10 | sm: React.PropTypes.number,
11 | md: React.PropTypes.number,
12 | lg: React.PropTypes.number,
13 | xsOffset: React.PropTypes.number,
14 | smOffset: React.PropTypes.number,
15 | mdOffset: React.PropTypes.number,
16 | lgOffset: React.PropTypes.number,
17 | xsPush: React.PropTypes.number,
18 | smPush: React.PropTypes.number,
19 | mdPush: React.PropTypes.number,
20 | lgPush: React.PropTypes.number,
21 | xsPull: React.PropTypes.number,
22 | smPull: React.PropTypes.number,
23 | mdPull: React.PropTypes.number,
24 | lgPull: React.PropTypes.number,
25 | componentClass: React.PropTypes.node.isRequired
26 | },
27 |
28 | getDefaultProps: function () {
29 | return {
30 | componentClass: 'div'
31 | };
32 | },
33 |
34 | render: function () {
35 | var ComponentClass = this.props.componentClass;
36 | var classes = {};
37 |
38 | Object.keys(constants.SIZES).forEach(function (key) {
39 | var size = constants.SIZES[key];
40 | var prop = size;
41 | var classPart = size + '-';
42 |
43 | if (this.props[prop]) {
44 | classes['col-' + classPart + this.props[prop]] = true;
45 | }
46 |
47 | prop = size + 'Offset';
48 | classPart = size + '-offset-';
49 | if (this.props[prop]) {
50 | classes['col-' + classPart + this.props[prop]] = true;
51 | }
52 |
53 | prop = size + 'Push';
54 | classPart = size + '-push-';
55 | if (this.props[prop]) {
56 | classes['col-' + classPart + this.props[prop]] = true;
57 | }
58 |
59 | prop = size + 'Pull';
60 | classPart = size + '-pull-';
61 | if (this.props[prop]) {
62 | classes['col-' + classPart + this.props[prop]] = true;
63 | }
64 | }, this);
65 |
66 | return (
67 | React.createElement(ComponentClass, React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
68 | this.props.children
69 | )
70 | );
71 | }
72 | });
73 |
74 | module.exports = Col;
75 | });
76 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/OverlayMixin.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var CustomPropTypes = require('./utils/CustomPropTypes');
3 |
4 | module.exports = {
5 | propTypes: {
6 | container: CustomPropTypes.mountable
7 | },
8 |
9 | getDefaultProps: function () {
10 | return {
11 | container: {
12 | // Provide `getDOMNode` fn mocking a React component API. The `document.body`
13 | // reference needs to be contained within this function so that it is not accessed
14 | // in environments where it would not be defined, e.g. nodejs. Equally this is needed
15 | // before the body is defined where `document.body === null`, this ensures
16 | // `document.body` is only accessed after componentDidMount.
17 | getDOMNode: function getDOMNode() {
18 | return document.body;
19 | }
20 | }
21 | };
22 | },
23 |
24 | componentWillUnmount: function () {
25 | this._unrenderOverlay();
26 | if (this._overlayTarget) {
27 | this.getContainerDOMNode()
28 | .removeChild(this._overlayTarget);
29 | this._overlayTarget = null;
30 | }
31 | },
32 |
33 | componentDidUpdate: function () {
34 | this._renderOverlay();
35 | },
36 |
37 | componentDidMount: function () {
38 | this._renderOverlay();
39 | },
40 |
41 | _mountOverlayTarget: function () {
42 | this._overlayTarget = document.createElement('div');
43 | this.getContainerDOMNode()
44 | .appendChild(this._overlayTarget);
45 | },
46 |
47 | _renderOverlay: function () {
48 | if (!this._overlayTarget) {
49 | this._mountOverlayTarget();
50 | }
51 |
52 | // Save reference to help testing
53 | this._overlayInstance = React.render(this.renderOverlay(), this._overlayTarget);
54 | },
55 |
56 | _unrenderOverlay: function () {
57 | React.unmountComponentAtNode(this._overlayTarget);
58 | this._overlayInstance = null;
59 | },
60 |
61 | getOverlayDOMNode: function () {
62 | if (!this.isMounted()) {
63 | throw new Error('getOverlayDOMNode(): A component must be mounted to have a DOM node.');
64 | }
65 |
66 | return this._overlayInstance.getDOMNode();
67 | },
68 |
69 | getContainerDOMNode: function () {
70 | return this.props.container.getDOMNode ?
71 | this.props.container.getDOMNode() : this.props.container;
72 | }
73 | };
74 |
75 | });
76 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/Button.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var BootstrapMixin = require('./BootstrapMixin');
5 |
6 | var Button = React.createClass({displayName: 'Button',
7 | mixins: [BootstrapMixin],
8 |
9 | propTypes: {
10 | active: React.PropTypes.bool,
11 | disabled: React.PropTypes.bool,
12 | block: React.PropTypes.bool,
13 | navItem: React.PropTypes.bool,
14 | navDropdown: React.PropTypes.bool,
15 | componentClass: React.PropTypes.node
16 | },
17 |
18 | getDefaultProps: function () {
19 | return {
20 | bsClass: 'button',
21 | bsStyle: 'default',
22 | type: 'button'
23 | };
24 | },
25 |
26 | render: function () {
27 | var classes = this.props.navDropdown ? {} : this.getBsClassSet();
28 | var renderFuncName;
29 |
30 | classes['active'] = this.props.active;
31 | classes['btn-block'] = this.props.block;
32 |
33 | if (this.props.navItem) {
34 | return this.renderNavItem(classes);
35 | }
36 |
37 | renderFuncName = this.props.href || this.props.navDropdown ?
38 | 'renderAnchor' : 'renderButton';
39 |
40 | return this[renderFuncName](classes);
41 | },
42 |
43 | renderAnchor: function (classes) {
44 |
45 | var Component = this.props.componentClass || 'a';
46 | var href = this.props.href || '#';
47 | classes['disabled'] = this.props.disabled;
48 |
49 | return (
50 | React.createElement(Component, React.__spread({},
51 | this.props,
52 | {href: href,
53 | className: joinClasses(this.props.className, classSet(classes)),
54 | role: "button"}),
55 | this.props.children
56 | )
57 | );
58 | },
59 |
60 | renderButton: function (classes) {
61 | var Component = this.props.componentClass || 'button';
62 |
63 | return (
64 | React.createElement(Component, React.__spread({},
65 | this.props,
66 | {className: joinClasses(this.props.className, classSet(classes))}),
67 | this.props.children
68 | )
69 | );
70 | },
71 |
72 | renderNavItem: function (classes) {
73 | var liClasses = {
74 | active: this.props.active
75 | };
76 |
77 | return (
78 | React.createElement("li", {className: classSet(liClasses)},
79 | this.renderAnchor(classes)
80 | )
81 | );
82 | }
83 | });
84 |
85 | module.exports = Button;
86 |
87 | });
88 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/PanelGroup.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var cloneWithProps = require('./utils/cloneWithProps');
5 |
6 | var BootstrapMixin = require('./BootstrapMixin');
7 | var ValidComponentChildren = require('./utils/ValidComponentChildren');
8 |
9 | var PanelGroup = React.createClass({displayName: 'PanelGroup',
10 | mixins: [BootstrapMixin],
11 |
12 | propTypes: {
13 | collapsable: React.PropTypes.bool,
14 | activeKey: React.PropTypes.any,
15 | defaultActiveKey: React.PropTypes.any,
16 | onSelect: React.PropTypes.func
17 | },
18 |
19 | getDefaultProps: function () {
20 | return {
21 | bsClass: 'panel-group'
22 | };
23 | },
24 |
25 | getInitialState: function () {
26 | var defaultActiveKey = this.props.defaultActiveKey;
27 |
28 | return {
29 | activeKey: defaultActiveKey
30 | };
31 | },
32 |
33 | render: function () {
34 | var classes = this.getBsClassSet();
35 | return (
36 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes)), onSelect: null}),
37 | ValidComponentChildren.map(this.props.children, this.renderPanel)
38 | )
39 | );
40 | },
41 |
42 | renderPanel: function (child, index) {
43 | var activeKey =
44 | this.props.activeKey != null ? this.props.activeKey : this.state.activeKey;
45 |
46 | var props = {
47 | bsStyle: child.props.bsStyle || this.props.bsStyle,
48 | key: child.key ? child.key : index,
49 | ref: child.ref
50 | };
51 |
52 | if (this.props.accordion) {
53 | props.collapsable = true;
54 | props.expanded = (child.props.eventKey === activeKey);
55 | props.onSelect = this.handleSelect;
56 | }
57 |
58 | return cloneWithProps(
59 | child,
60 | props
61 | );
62 | },
63 |
64 | shouldComponentUpdate: function() {
65 | // Defer any updates to this component during the `onSelect` handler.
66 | return !this._isChanging;
67 | },
68 |
69 | handleSelect: function (key) {
70 | if (this.props.onSelect) {
71 | this._isChanging = true;
72 | this.props.onSelect(key);
73 | this._isChanging = false;
74 | }
75 |
76 | if (this.state.activeKey === key) {
77 | key = null;
78 | }
79 |
80 | this.setState({
81 | activeKey: key
82 | });
83 | }
84 | });
85 |
86 | module.exports = PanelGroup;
87 | });
88 |
--------------------------------------------------------------------------------
/TodoMVC/data/components/footer.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // React
8 | const React = require("react");
9 |
10 | // TodoMVC
11 | const { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } = require("../constants/todo-filters");
12 |
13 | // Shortcuts
14 | const { div, span, strong, a, button, ul, li, footer } = React.DOM;
15 | const { PropTypes } = React;
16 |
17 | // Localization
18 | const FILTER_TITLES = {
19 | [SHOW_ALL]: "All",
20 | [SHOW_ACTIVE]: "Active",
21 | [SHOW_COMPLETED]: "Completed"
22 | };
23 |
24 | /**
25 | * TODO: docs
26 | */
27 | var Footer = React.createClass(
28 | /** @lends Footer */
29 | {
30 | displayName: "Footer",
31 |
32 | renderTodoCount: function() {
33 | const { activeCount } = this.props;
34 | const itemWord = activeCount === 1 ? "item" : "items";
35 |
36 | return (
37 | span({className: "todo-count"},
38 | strong({}, activeCount || "No"),
39 | span({}, " "),
40 | span({}, itemWord + " left")
41 | )
42 | );
43 | },
44 |
45 | renderFilterLink: function(filter) {
46 | const title = FILTER_TITLES[filter];
47 | const { filter: selectedFilter, onShow } = this.props;
48 |
49 | var className = filter === selectedFilter ? "selected" : "";
50 | return (
51 | a({className: className,
52 | style: {cursor: "hand"},
53 | onClick: () => onShow(filter)},
54 | title
55 | )
56 | );
57 | },
58 |
59 | renderClearButton: function() {
60 | const { completedCount, onClearCompleted } = this.props;
61 | if (completedCount > 0) {
62 | return (
63 | button({className: "clear-completed", onClick: onClearCompleted},
64 | "Clear completed"
65 | )
66 | );
67 | }
68 | },
69 |
70 | render: function() {
71 | var filters = [SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED];
72 | var items = filters.map(filter =>
73 | li({key: filter},
74 | this.renderFilterLink(filter)
75 | )
76 | )
77 |
78 | return (
79 | footer({className: "footer"},
80 | this.renderTodoCount(),
81 | ul({className: "filters"}, items),
82 | this.renderClearButton()
83 | )
84 | );
85 | }
86 | });
87 |
88 | Footer.propTypes = {
89 | completedCount: PropTypes.number.isRequired,
90 | activeCount: PropTypes.number.isRequired,
91 | filter: PropTypes.string.isRequired,
92 | onClearCompleted: PropTypes.func.isRequired,
93 | onShow: PropTypes.func.isRequired
94 | };
95 |
96 | // Exports from this module
97 | exports.Footer = Footer;
98 | });
99 |
--------------------------------------------------------------------------------
/TodoMVC/data/components/todo-item.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | define(function(require, exports/*, module*/) {
4 |
5 | "use strict";
6 |
7 | // Firebug.SDK
8 | const { createFactories } = require("reps/rep-utils");
9 |
10 | // React
11 | const React = require("react");
12 |
13 | // TodoMVC
14 | const { TodoTextInput } = createFactories(require("./todo-text-input"));
15 |
16 | // Shortcuts
17 | const { h1, div, input, label, button, li } = React.DOM;
18 | const { PropTypes } = React;
19 |
20 | /**
21 | * Represent single Todo item.
22 | */
23 | var TodoItem = React.createClass(
24 | /** @lends TodoItem */
25 | {
26 | getInitialState: function() {
27 | return {
28 | editing: false
29 | };
30 | },
31 |
32 | handleDoubleClick: function() {
33 | this.setState({editing: true});
34 | },
35 |
36 | handleSave: function(id, text) {
37 | if (text.length === 0) {
38 | this.props.deleteTodo(id);
39 | } else {
40 | this.props.editTodo(id, text);
41 | }
42 | this.setState({editing: false});
43 | },
44 |
45 | render: function() {
46 | const {todo, actions} = this.props;
47 |
48 | var element;
49 | if (this.state.editing) {
50 | element = (
51 | TodoTextInput({text: todo.text,
52 | editing: this.state.editing,
53 | onSave: text => this.handleSave(todo.id, text)
54 | })
55 | )
56 | } else {
57 | element = (
58 | div({className: "view"},
59 | input({className: "toggle",
60 | type: "checkbox",
61 | checked: todo.completed,
62 | onChange: () => actions.completeTodo(todo.id)
63 | }),
64 | label({onDoubleClick: this.handleDoubleClick.bind(this)},
65 | todo.text
66 | ),
67 | button({className: "destroy",
68 | onClick: () => actions.deleteTodo(todo.id)
69 | })
70 | )
71 | );
72 | }
73 |
74 | var classNames = [];
75 | if (todo.completed) {
76 | classNames.push("completed");
77 | }
78 |
79 | if (this.state.editing) {
80 | classNames.push("editing");
81 | }
82 |
83 | return (
84 | li({className: classNames.join(" ")},
85 | element
86 | )
87 | );
88 | }
89 | });
90 |
91 | TodoItem.propTypes = {
92 | todo: PropTypes.object.isRequired,
93 | editTodo: PropTypes.func.isRequired,
94 | deleteTodo: PropTypes.func.isRequired,
95 | completeTodo: PropTypes.func.isRequired
96 | };
97 |
98 | // Exports from this module
99 | exports.TodoItem = TodoItem;
100 | });
101 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/CarouselItem.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var classSet = require('./utils/classSet');
4 | var TransitionEvents = require('./utils/TransitionEvents');
5 |
6 | var CarouselItem = React.createClass({displayName: 'CarouselItem',
7 | propTypes: {
8 | direction: React.PropTypes.oneOf(['prev', 'next']),
9 | onAnimateOutEnd: React.PropTypes.func,
10 | active: React.PropTypes.bool,
11 | caption: React.PropTypes.node
12 | },
13 |
14 | getInitialState: function () {
15 | return {
16 | direction: null
17 | };
18 | },
19 |
20 | getDefaultProps: function () {
21 | return {
22 | animation: true
23 | };
24 | },
25 |
26 | handleAnimateOutEnd: function () {
27 | if (this.props.onAnimateOutEnd && this.isMounted()) {
28 | this.props.onAnimateOutEnd(this.props.index);
29 | }
30 | },
31 |
32 | componentWillReceiveProps: function (nextProps) {
33 | if (this.props.active !== nextProps.active) {
34 | this.setState({
35 | direction: null
36 | });
37 | }
38 | },
39 |
40 | componentDidUpdate: function (prevProps) {
41 | if (!this.props.active && prevProps.active) {
42 | TransitionEvents.addEndEventListener(
43 | this.getDOMNode(),
44 | this.handleAnimateOutEnd
45 | );
46 | }
47 |
48 | if (this.props.active !== prevProps.active) {
49 | setTimeout(this.startAnimation, 20);
50 | }
51 | },
52 |
53 | startAnimation: function () {
54 | if (!this.isMounted()) {
55 | return;
56 | }
57 |
58 | this.setState({
59 | direction: this.props.direction === 'prev' ?
60 | 'right' : 'left'
61 | });
62 | },
63 |
64 | render: function () {
65 | var classes = {
66 | item: true,
67 | active: (this.props.active && !this.props.animateIn) || this.props.animateOut,
68 | next: this.props.active && this.props.animateIn && this.props.direction === 'next',
69 | prev: this.props.active && this.props.animateIn && this.props.direction === 'prev'
70 | };
71 |
72 | if (this.state.direction && (this.props.animateIn || this.props.animateOut)) {
73 | classes[this.state.direction] = true;
74 | }
75 |
76 | return (
77 | React.createElement("div", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
78 | this.props.children,
79 | this.props.caption ? this.renderCaption() : null
80 | )
81 | );
82 | },
83 |
84 | renderCaption: function () {
85 | return (
86 | React.createElement("div", {className: "carousel-caption"},
87 | this.props.caption
88 | )
89 | );
90 | }
91 | });
92 |
93 | module.exports = CarouselItem;
94 | });
95 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/utils/ValidComponentChildren.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 |
3 | /**
4 | * Maps children that are typically specified as `props.children`,
5 | * but only iterates over children that are "valid components".
6 | *
7 | * The mapFunction provided index will be normalised to the components mapped,
8 | * so an invalid component would not increase the index.
9 | *
10 | * @param {?*} children Children tree container.
11 | * @param {function(*, int)} mapFunction.
12 | * @param {*} mapContext Context for mapFunction.
13 | * @return {object} Object containing the ordered map of results.
14 | */
15 | function mapValidComponents(children, func, context) {
16 | var index = 0;
17 |
18 | return React.Children.map(children, function (child) {
19 | if (React.isValidElement(child)) {
20 | var lastIndex = index;
21 | index++;
22 | return func.call(context, child, lastIndex);
23 | }
24 |
25 | return child;
26 | });
27 | }
28 |
29 | /**
30 | * Iterates through children that are typically specified as `props.children`,
31 | * but only iterates over children that are "valid components".
32 | *
33 | * The provided forEachFunc(child, index) will be called for each
34 | * leaf child with the index reflecting the position relative to "valid components".
35 | *
36 | * @param {?*} children Children tree container.
37 | * @param {function(*, int)} forEachFunc.
38 | * @param {*} forEachContext Context for forEachContext.
39 | */
40 | function forEachValidComponents(children, func, context) {
41 | var index = 0;
42 |
43 | return React.Children.forEach(children, function (child) {
44 | if (React.isValidElement(child)) {
45 | func.call(context, child, index);
46 | index++;
47 | }
48 | });
49 | }
50 |
51 | /**
52 | * Count the number of "valid components" in the Children container.
53 | *
54 | * @param {?*} children Children tree container.
55 | * @returns {number}
56 | */
57 | function numberOfValidComponents(children) {
58 | var count = 0;
59 |
60 | React.Children.forEach(children, function (child) {
61 | if (React.isValidElement(child)) { count++; }
62 | });
63 |
64 | return count;
65 | }
66 |
67 | /**
68 | * Determine if the Child container has one or more "valid components".
69 | *
70 | * @param {?*} children Children tree container.
71 | * @returns {boolean}
72 | */
73 | function hasValidComponent(children) {
74 | var hasValid = false;
75 |
76 | React.Children.forEach(children, function (child) {
77 | if (!hasValid && React.isValidElement(child)) {
78 | hasValid = true;
79 | }
80 | });
81 |
82 | return hasValid;
83 | }
84 |
85 | module.exports = {
86 | map: mapValidComponents,
87 | forEach: forEachValidComponents,
88 | numberOf: numberOfValidComponents,
89 | hasValidComponent: hasValidComponent
90 | };
91 | });
92 |
--------------------------------------------------------------------------------
/GlobalActor/lib/main.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | var self = require("sdk/self");
6 |
7 | const { Cu, Ci } = require("chrome");
8 | const { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
9 | const { MyGlobalActorFront } = require("./myActor.js");
10 |
11 | const { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
12 | const { ActorRegistryFront } = devtools["require"]("devtools/server/actors/actor-registry");
13 |
14 | let myActorRegistrar;
15 |
16 | /**
17 | * Application entry point
18 | */
19 | function main(options, callbacks) {
20 | // Wait for Toolbox initialization
21 | gDevTools.on("toolbox-ready", onToolboxReady);
22 | }
23 |
24 | function onUnload(reason) {
25 | gDevTools.off("toolbox-ready", onToolboxReady);
26 |
27 | // Unregister registered actor
28 | if (myActorRegistrar) {
29 | myActorRegistrar.unregister().then(() => {
30 | console.log("my actor unregistered");
31 | });
32 | }
33 | }
34 |
35 | /**
36 | * When the Toolbox is ready, register our custom global actor.
37 | */
38 | function onToolboxReady(event, toolbox) {
39 | let target = toolbox.target;
40 | let response = target.form;
41 | target.client.listTabs(response => {
42 | // The actor might be already registered on the backend.
43 | if (response[MyGlobalActorFront.prototype.typeName]) {
44 | attachActor(target, response);
45 | return;
46 | }
47 |
48 | // Register actor.
49 | registerActor(target, response);
50 | });
51 | }
52 |
53 | function registerActor(target, response) {
54 | // The actor is registered as 'global' actor (runs
55 | // within the parent process)
56 | let options = {
57 | prefix: MyGlobalActorFront.prototype.typeName,
58 | constructor: "MyGlobalActor",
59 | type: { global: true }
60 | };
61 |
62 | let actorModuleUrl = self.data.url("../lib/myActor.js");
63 |
64 | let registry = target.client.getActor(response["actorRegistryActor"]);
65 | if (!registry) {
66 | registry = ActorRegistryFront(target.client, response);
67 | }
68 |
69 | registry.registerActor(actorModuleUrl, options).then(actorRegistrar => {
70 | console.log("My global actor registered");
71 |
72 | // Remember, so we can unregister the actor later.
73 | myActorRegistrar = actorRegistrar;
74 |
75 | target.client.listTabs(response => {
76 | attachActor(target, response);
77 | });
78 | });
79 | }
80 |
81 | function attachActor(target, form) {
82 | let myActor = MyGlobalActorFront(target.client, form);
83 | myActor.attach().then(() => {
84 | // Finally, execute remote method on the actor!
85 | myActor.hello().then(response => {
86 | console.log("Response from the actor: " + response.msg, response);
87 | });
88 | });
89 | }
90 |
91 | // Exports from this module
92 | exports.main = main;
93 | exports.onUnload = onUnload;
94 |
--------------------------------------------------------------------------------
/HelloReact/data/lib/react-bootstrap/ListGroupItem.js:
--------------------------------------------------------------------------------
1 | define(function (require, exports, module) {var React = require('react');
2 | var joinClasses = require('./utils/joinClasses');
3 | var BootstrapMixin = require('./BootstrapMixin');
4 | var classSet = require('./utils/classSet');
5 | var cloneWithProps = require('./utils/cloneWithProps');
6 |
7 | var ValidComponentChildren = require('./utils/ValidComponentChildren');
8 |
9 | var ListGroupItem = React.createClass({displayName: 'ListGroupItem',
10 | mixins: [BootstrapMixin],
11 |
12 | propTypes: {
13 | bsStyle: React.PropTypes.oneOf(['danger','info','success','warning']),
14 | active: React.PropTypes.any,
15 | disabled: React.PropTypes.any,
16 | header: React.PropTypes.node,
17 | onClick: React.PropTypes.func,
18 | eventKey: React.PropTypes.any
19 | },
20 |
21 | getDefaultProps: function () {
22 | return {
23 | bsClass: 'list-group-item'
24 | };
25 | },
26 |
27 | render: function () {
28 | var classes = this.getBsClassSet();
29 |
30 | classes['active'] = this.props.active;
31 | classes['disabled'] = this.props.disabled;
32 |
33 | if (this.props.href || this.props.onClick) {
34 | return this.renderAnchor(classes);
35 | } else {
36 | return this.renderSpan(classes);
37 | }
38 | },
39 |
40 | renderSpan: function (classes) {
41 | return (
42 | React.createElement("span", React.__spread({}, this.props, {className: joinClasses(this.props.className, classSet(classes))}),
43 | this.props.header ? this.renderStructuredContent() : this.props.children
44 | )
45 | );
46 | },
47 |
48 | renderAnchor: function (classes) {
49 | return (
50 | React.createElement("a", React.__spread({},
51 | this.props,
52 | {className: joinClasses(this.props.className, classSet(classes)),
53 | onClick: this.handleClick}),
54 | this.props.header ? this.renderStructuredContent() : this.props.children
55 | )
56 | );
57 | },
58 |
59 | renderStructuredContent: function () {
60 | var header;
61 | if (React.isValidElement(this.props.header)) {
62 | header = cloneWithProps(this.props.header, {
63 | className: 'list-group-item-heading'
64 | });
65 | } else {
66 | header = (
67 | React.createElement("h4", {className: "list-group-item-heading"},
68 | this.props.header
69 | )
70 | );
71 | }
72 |
73 | var content = (
74 | React.createElement("p", {className: "list-group-item-text"},
75 | this.props.children
76 | )
77 | );
78 |
79 | return {
80 | header: header,
81 | content: content
82 | };
83 | },
84 |
85 | handleClick: function (e) {
86 | if (this.props.onClick) {
87 | e.preventDefault();
88 | this.props.onClick(this.props.eventKey, this.props.href);
89 | }
90 | }
91 | });
92 |
93 | module.exports = ListGroupItem;
94 |
95 | });
96 |
--------------------------------------------------------------------------------
/GlobalActor/lib/myActor.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cc, Ci, Cu } = require("chrome");
6 | const { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
7 | const { console } = Cu.import("resource://gre/modules/devtools/Console.jsm", {});
8 |
9 | let protocol = devtools["require"]("devtools/server/protocol");
10 | let { method, RetVal, ActorClass, FrontClass, Front, Actor } = protocol;
11 |
12 | /**
13 | * A method decorator that ensures the actor is in the expected state before
14 | * proceeding. If the actor is not in the expected state, the decorated method
15 | * returns a rejected promise.
16 | *
17 | * @param String expectedState
18 | * The expected state.
19 | *
20 | * @param Function method
21 | * The actor method to proceed with when the actor is in the expected
22 | * state.
23 | *
24 | * @returns Function
25 | * The decorated method.
26 | */
27 | function expectState(expectedState, method) {
28 | return function(...args) {
29 | if (this.state !== expectedState) {
30 | const msg = "Wrong State: Expected '" + expectedState + "', but current "
31 | + "state is '" + this.state + "'";
32 | return Promise.reject(new Error(msg));
33 | }
34 |
35 | return method.apply(this, args);
36 | };
37 | }
38 |
39 | /**
40 | * Custom actor object
41 | */
42 | var MyGlobalActor = ActorClass({
43 | typeName: "myglobalactor",
44 |
45 | initialize: function(conn, parent) {
46 | Actor.prototype.initialize.call(this, conn);
47 |
48 | console.log("myGlobalActor.initialize");
49 |
50 | this.parent = parent;
51 | this.state = "detached";
52 | },
53 |
54 | destroy: function() {
55 | if (this.state === "attached") {
56 | this.detach();
57 | }
58 |
59 | Actor.prototype.destroy.call(this);
60 | },
61 |
62 | /**
63 | * Attach to this actor.
64 | */
65 | attach: method(expectState("detached", function() {
66 | this.state = "attached";
67 | }), {
68 | request: {},
69 | response: {
70 | type: "attached"
71 | }
72 | }),
73 |
74 | /**
75 | * Detach from this actor.
76 | */
77 | detach: method(expectState("attached", function() {
78 | this.state = "detached";
79 | }), {
80 | request: {},
81 | response: {
82 | type: "detached"
83 | }
84 | }),
85 |
86 | /**
87 | * A test remote method.
88 | */
89 | hello: method(function() {
90 | let result = {
91 | msg: "Hello from a global actor!"
92 | };
93 |
94 | return result;
95 | }, {
96 | request: {},
97 | response: RetVal("json"),
98 | }),
99 | });
100 |
101 | exports.MyGlobalActor = MyGlobalActor;
102 |
103 | exports.MyGlobalActorFront = FrontClass(MyGlobalActor, {
104 | initialize: function(client, form) {
105 | Front.prototype.initialize.call(this, client, form);
106 |
107 | this.actorID = form[MyGlobalActor.prototype.typeName];
108 | this.manage(this);
109 | }
110 | });
111 |
--------------------------------------------------------------------------------
/TabActor/lib/myActor.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const { Cc, Ci, Cu } = require("chrome");
6 | const { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
7 | const { console } = Cu.import("resource://gre/modules/devtools/Console.jsm", {});
8 |
9 | let protocol = devtools["require"]("devtools/server/protocol");
10 | let { method, RetVal, ActorClass, FrontClass, Front, Actor } = protocol;
11 |
12 | /**
13 | * A method decorator that ensures the actor is in the expected state before
14 | * proceeding. If the actor is not in the expected state, the decorated method
15 | * returns a rejected promise.
16 | *
17 | * @param String expectedState
18 | * The expected state.
19 | *
20 | * @param Function method
21 | * The actor method to proceed with when the actor is in the expected
22 | * state.
23 | *
24 | * @returns Function
25 | * The decorated method.
26 | */
27 | function expectState(expectedState, method) {
28 | return function(...args) {
29 | if (this.state !== expectedState) {
30 | const msg = "Wrong State: Expected '" + expectedState + "', but current "
31 | + "state is '" + this.state + "'";
32 | return Promise.reject(new Error(msg));
33 | }
34 |
35 | return method.apply(this, args);
36 | };
37 | }
38 |
39 | /**
40 | * Custom actor object
41 | */
42 | var MyTabActor = ActorClass({
43 | typeName: "mytabactor",
44 |
45 | initialize: function(conn, parent) {
46 | Actor.prototype.initialize.call(this, conn);
47 |
48 | console.log("myTabActor.initialize");
49 |
50 | this.parent = parent;
51 | this.state = "detached";
52 | },
53 |
54 | destroy: function() {
55 | if (this.state === "attached") {
56 | this.detach();
57 | }
58 |
59 | Actor.prototype.destroy.call(this);
60 | },
61 |
62 | /**
63 | * Attach to this actor.
64 | */
65 | attach: method(expectState("detached", function() {
66 | this.state = "attached";
67 |
68 | console.log("myTabActor.attach");
69 | }), {
70 | request: {},
71 | response: {
72 | type: "attached"
73 | }
74 | }),
75 |
76 | /**
77 | * Detach from this actor.
78 | */
79 | detach: method(expectState("attached", function() {
80 | this.state = "detached";
81 |
82 | console.log("myTabActor.detach");
83 | }), {
84 | request: {},
85 | response: {
86 | type: "detached"
87 | }
88 | }),
89 |
90 | /**
91 | * A test remote method.
92 | */
93 | hello: method(function() {
94 | let result = {
95 | msg: "Hello from a tab actor!"
96 | };
97 |
98 | return result;
99 | }, {
100 | request: {},
101 | response: RetVal("json"),
102 | }),
103 | });
104 |
105 | exports.MyTabActor = MyTabActor;
106 |
107 | exports.MyTabActorFront = FrontClass(MyTabActor, {
108 | initialize: function(client, form) {
109 | Front.prototype.initialize.call(this, client, form);
110 |
111 | this.actorID = form[MyTabActor.prototype.typeName];
112 | this.manage(this);
113 | }
114 | });
115 |
--------------------------------------------------------------------------------
/DomInspector/lib/my-toolbox-overlay.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | module.metadata = {
6 | "stability": "stable"
7 | };
8 |
9 | // Add-on SDK
10 | var self = require("sdk/self");
11 | const { Cu, Ci } = require("chrome");
12 | const { Class } = require("sdk/core/heritage");
13 |
14 | // DevTools
15 | const { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
16 | const { ActorRegistryFront } = devtools["require"]("devtools/server/actors/actor-registry");
17 | const { console } = Cu.import("resource://gre/modules/devtools/Console.jsm", {});
18 |
19 | // DOM Inspector
20 | const { MyActorFront } = require("./my-actor");
21 |
22 | /**
23 | * This object is responsible for initialization and cleanup.
24 | * It represents an overlay for the developer Toolbox and it's
25 | * following the same life cycle.
26 | */
27 | const MyToolboxOverlay = Class(
28 | /** @lends MyToolboxOverlay */
29 | {
30 | // Initialization
31 |
32 | initialize: function(toolbox) {
33 | this.toolbox = toolbox;
34 |
35 | this.onClick = this.onClick.bind(this);
36 |
37 | this.attach();
38 | },
39 |
40 | destroy: function() {
41 | this.detach();
42 | },
43 |
44 | // Backend
45 |
46 | /**
47 | * Attach to the backend actor.
48 | */
49 | attach: function() {
50 | // The actor is registered as 'tab' actor (an instance created for
51 | // every browser tab).
52 | let options = {
53 | prefix: "myactor",
54 | constructor: "MyActor",
55 | type: { tab: true }
56 | };
57 |
58 | let actorModuleUrl = self.data.url("../lib/my-actor.js");
59 |
60 | // Get ActorRegistryFront client object.
61 | let target = this.toolbox.target;
62 | target.client.listTabs(response => {
63 | let registry = ActorRegistryFront(target.client, response);
64 |
65 | // Register the custom backend actor.
66 | registry.registerActor(actorModuleUrl, options).then(myActorClass => {
67 | // Remember actor class, so we can unregister the actor later.
68 | this.myActorClass = myActorClass;
69 |
70 | // Get custom actor client object
71 | target.client.listTabs(({ tabs, selected }) => {
72 | let myActor = MyActorFront(target.client, tabs[selected]);
73 |
74 | // Initialize inspector and get DOM Walker actor ID.
75 | this.toolbox.initInspector().then(() => {
76 | let walker = this.toolbox.walker;
77 |
78 | // Attach to the custom actor.
79 | myActor.attach(walker).then(() => {
80 | console.log("My actor attached!");
81 | });
82 | });
83 |
84 | myActor.on("click", this.onClick);
85 | });
86 | });
87 | });
88 | },
89 |
90 | detach: function() {
91 | // TODO: detach
92 | },
93 |
94 | // Actor Events
95 |
96 | onClick: function(clickedNodeData) {
97 | console.log("Click event from the backend!", clickedNodeData.node);
98 | }
99 | });
100 |
101 | // Exports from this module
102 | exports.MyToolboxOverlay = MyToolboxOverlay;
103 |
--------------------------------------------------------------------------------
/MessageManager/lib/myPanel.js:
--------------------------------------------------------------------------------
1 | /* See license.txt for terms of usage */
2 |
3 | "use strict";
4 |
5 | const self = require("sdk/self");
6 |
7 | const { Cu, Ci } = require("chrome");
8 | const { Panel } = require("dev/panel.js");
9 | const { Class } = require("sdk/core/heritage");
10 | const { Tool } = require("dev/toolbox");
11 | const { viewFor } = require("sdk/view/core");
12 |
13 | /**
14 | * This object represents a new {@Toolbox} panel
15 | */
16 | const MyPanel = Class(
17 | /** @lends MyPanel */
18 | {
19 | extends: Panel,
20 |
21 | label: "My Panel",
22 | tooltip: "My panel tooltip",
23 | icon: "./icon-16.png",
24 | url: "./myPanel.html",
25 |
26 | // Initialization
27 |
28 | /**
29 | * Executed by the framework when an instance of this panel is created.
30 | * There is one instance of this panel per {@Toolbox}. The panel is
31 | * instantiated when selected in the toolbox for the first time.
32 | */
33 | initialize: function(options) {
34 | this.onMessage = this.onMessage.bind(this);
35 | },
36 |
37 | /**
38 | * Executed by the framework when the panel is destroyed.
39 | */
40 | dispose: function() {
41 | },
42 |
43 | /**
44 | * Executed by the framework when the panel content frame is
45 | * ready (document state == interactive).
46 | */
47 | onReady: function() {
48 | // This is the way how to get access to the inner