Confirmed users
177
edits
DevTools/Hacking: Difference between revisions
Jump to navigation
Jump to search
JavaScript modules
(Directories before workflow) |
(JavaScript modules) |
||
| Line 82: | Line 82: | ||
You may also be interested in the remote protocol inspector add-on: https://github.com/firebug/rdp-inspector/wiki | You may also be interested in the remote protocol inspector add-on: https://github.com/firebug/rdp-inspector/wiki | ||
== JavaScript Modules == | |||
=== Build Configuration === | |||
JavaScript modules are installed by our build system using <tt>moz.build</tt> files. If you add a new JavaScript module, you'll need to update (or add) one of these files to make the build system aware of your new module. See the example below. | |||
A <tt>moz.build</tt> file must live in the same directory as the files to be installed. Don't list files from a subdirectory in a <tt>moz.build</tt> from a parent directory. | |||
Following these steps ensures that <tt>require()</tt> and <tt>resource://</tt> paths map directly to locations in the source tree, instead of being totally arbitrary. | |||
Example: | |||
* File: <tt>/devtools/server/actors/layout.js</tt> | |||
* In <tt>/devtools/server/actors/moz.build</tt>: | |||
DevToolsModules( | |||
'layout.js' | |||
) | |||
=== <tt>require()</tt> === | |||
Most DevTools JS code is in the form of CommonJS modules that loaded with <tt>require()</tt>. | |||
To <tt>require()</tt> a file, the module ID is exactly its source tree path. | |||
Example: | |||
* File: <tt>/devtools/server/actors/layout.js</tt> | |||
* Usage (prefer lazy in most cases): | |||
** <tt>loader.lazyRequireGetter(this, "layout", "devtools/server/actors/layout")</tt> | |||
** <tt>require("devtools/server/actors/layout")</tt> | |||
=== <tt>Cu.import()</tt> === | |||
Some older DevTools JS modules use the Gecko [https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using "JavaScript code module"] format with the file extension <tt>.jsm</tt>. We are trying to move away from this format, so it's unlikely you would add a new one, but you might need to import an existing one in your code. | |||
These modules are loaded using <tt>Cu.import()</tt>. To <tt>import()</tt> a file, you provide a <tt>resource://</tt> URL, which is derived directly from the source tree path. There is a slight difference between client and server URLs because the non-client files have extra <tt>gre</tt> segment. In more detail: | |||
* <tt>/devtools/client/<X></tt>: <tt>resource:///modules/devtools/client/<X></tt> | |||
* <tt>/devtools/server/<X></tt>: <tt>resource://gre/modules/devtools/server/<X></tt> | |||
* <tt>/devtools/shared/<X></tt>: <tt>resource://gre/modules/devtools/shared/<X></tt> | |||
Example: | |||
* File: <tt>/devtools/shared/Loader.jsm</tt> | |||
* Usage: | |||
** <tt>Cu.import("resource://gre/modules/devtools/shared/Loader.jsm")</tt> | |||
Example: | |||
* File: <tt>/devtools/client/framework/gDevTools.jsm</tt> | |||
* Usage (prefer lazy in most cases): | |||
** <tt>loader.lazyImporter(this, "gDevTools", "resource:///modules/devtools/client/framework/gDevTools.jsm")</tt> | |||
** <tt>Cu.import("resource:///modules/devtools/client/framework/gDevTools.jsm")</tt> | |||
= Making and Submitting a Patch = | = Making and Submitting a Patch = | ||