Permalink
Browse files

created static docs for 1.2

  • Loading branch information...
1 parent 595a8b9 commit 7f79c163b177f6182f362295cecbd1dc5e0fd549 @wbamberg wbamberg committed Oct 17, 2011
Showing 387 changed files with 7,103 additions and 10,757 deletions.
@@ -170,7 +170,7 @@ overview-amo-review-process/](http://blog.mozilla.com/addons/2011/02/04/overview
You should see the highlight appearing when you move the mouse over certain elements:
<img class="image-center"
-src="media/annotator/highlight.png" alt="Annotator Highlighting">
+src="static-files/media/annotator/highlight.png" alt="Annotator Highlighting">
Click on the highlight and you should see something like this in the console
output:
@@ -323,7 +323,7 @@ element and click the element when it is highlighted. You should see a panel
with a text area for a note:
<img class="image-center"
-src="media/annotator/editor-panel.png" alt="Annotator Editor Panel">
+src="static-files/media/annotator/editor-panel.png" alt="Annotator Editor Panel">
<br>
Enter the note and press the return key: you should see console output like
@@ -191,13 +191,13 @@ Execute `cfx run` one last time. Activate the annotator and enter an
annotation. You should see a yellow border around the item you annotated:
<img class="image-center"
-src="media/annotator/matcher.png" alt="Annotator Matcher">
+src="static-files/media/annotator/matcher.png" alt="Annotator Matcher">
<br>
When you move your mouse over the item, the annotation should appear:
<img class="image-center"
-src="media/annotator/annotation-panel.png" alt="Annotation Panel">
+src="static-files/media/annotator/annotation-panel.png" alt="Annotation Panel">
<br>
Obviously this add-on isn't complete yet. It could do with more beautiful
@@ -10,7 +10,7 @@ We could represent the basic interactions between the `main` module and the
various content scripts like this:
<img class="image-center"
-src="media/annotator/annotator-design.png" alt="Annotator Design">
+src="static-files/media/annotator/annotator-design.png" alt="Annotator Design">
## User Interface ##
@@ -233,7 +233,7 @@ Firefox. Activate the add-on, add an annotation, and then right-click the
widget. You should see something like this:
<img class="image-center"
-src="media/annotator/annotation-list.png" alt="Annotation List">
+src="static-files/media/annotator/annotation-list.png" alt="Annotation List">
<br>
<span class="aside">
@@ -46,8 +46,8 @@ Save this in your `data/widget` directory as `widget.js`.
You can copy the widget's icons from here:
-<img style="margin-left:40px; margin-right:20px;" src="media/annotator/pencil-on.png" alt="Active Annotator">
-<img style="margin-left:20px; margin-right:20px;" src="media/annotator/pencil-off.png" alt="Inactive Annotator">
+<img style="margin-left:40px; margin-right:20px;" src="static-files/media/annotator/pencil-on.png" alt="Active Annotator">
+<img style="margin-left:20px; margin-right:20px;" src="static-files/media/annotator/pencil-off.png" alt="Inactive Annotator">
(Or make your own if you're feeling creative.) Save them in your `data/widget` directory.
@@ -100,7 +100,7 @@ Now from the `annotator` directory type `cfx run`. You should see the widget
in the add-on bar:
<div align="center">
-<img src="media/annotator/widget-icon.png" alt="Widget Icon">
+<img src="static-files/media/annotator/widget-icon.png" alt="Widget Icon">
</div>
<br>
@@ -22,7 +22,7 @@ You can build or load the content locally or load it from a remote server.
The screenshot below shows a panel whose content is built from the list of
currently open tabs:
-<img class="image-center" src="media/screenshots/modules/panel-tabs-osx.png"
+<img class="image-center" src="static-files/media/screenshots/modules/panel-tabs-osx.png"
alt="List open tabs panel">
<br>
@@ -40,7 +40,7 @@ Widgets are generally used in one of two different contexts:
the time in a selected time zone or the weather. The screenshot below shows a
widget that displays the time in the selected city:
-<img class="image-center" src="media/screenshots/modules/widget-content-osx.png"
+<img class="image-center" src="static-files/media/screenshots/modules/widget-content-osx.png"
alt="Mozilla widget content">
<br>
@@ -49,15 +49,15 @@ interface. For example, a widget might display only an icon, but open a
settings dialog when the user clicks it. The widget below displays only the
Mozilla icon:
-<img class="image-center" src="media/screenshots/modules/widget-icon-osx.png"
+<img class="image-center" src="static-files/media/screenshots/modules/widget-icon-osx.png"
alt="Mozilla widget icon">
<br>
To simplify your code in the latter case, you can assign a panel object to
your widget. Then when the user clicks the widget, the widget will display
the panel anchored to the widget:
-<img class="image-center" src="media/screenshots/modules/widget-panel-osx.png"
+<img class="image-center" src="static-files/media/screenshots/modules/widget-panel-osx.png"
alt="Panel anchored to widget">
<br>
@@ -73,7 +73,7 @@ is selected) or define your own contexts using scripts.
In the screenshot below an add-on has added a new submenu to the context menu
associated with `img` elements:
-<img class="image-center" src="media/screenshots/modules/context-menu-image-osx.png"
+<img class="image-center" src="static-files/media/screenshots/modules/context-menu-image-osx.png"
alt="Context-menu">
<br>
@@ -86,7 +86,7 @@ OS X and Windows, libnotify on Linux), so the notification will look slightly
different on different platforms. On Mac OS X a notification will look
something like this:
-<img class="image-center" src="media/screenshots/modules/notification-growl-osx.png"
+<img class="image-center" src="static-files/media/screenshots/modules/notification-growl-osx.png"
alt="Growl notification">
<br>
@@ -196,4 +196,4 @@ ID](dev-guide/addon-development/program-id.html).
Note that the `self` module is completely different from the global `self`
object accessible to content scripts, which is used by a content script to
-[communicate with the add-on code](dev-guide/addon-development/web-content#content_script_events).
+[communicate with the add-on code](dev-guide/addon-development/content-scripts/using-port.html).
@@ -23,8 +23,24 @@ applicable to a subset of the commands.
### cfx docs ###
-This command launches an HTTP server on the localhost to view web-based
-documentation in a new Firefox window.
+This command displays the documentation for the SDK. The documentation is
+shipped with the SDK in [Markdown](http://daringfireball.net/projects/markdown/)
+format. The first time this command is executed, and any time after the
+Markdown files on disk have changed, `cfx docs` will generate a set of HTML
+pages from them and launch a web browser to display them. If the Markdown files
+haven't changed, `cfx docs` just launches a browser initialized to the set of
+generated pages.
+
+To regenerate the documentation associated with a single file, you can
+specify the file as an argument. For example:
+
+<pre>
+ cfx docs doc/dev-guide-source/addon-development/cfx-tool.md
+</pre>
+
+This command will regenerate only the HTML page you're reading.
+This is useful if you're iteratively editing a single file, and don't want to wait for cfx to
+regenerate the complete documentation tree.
### cfx init ####
Create a new directory, change into it, and run `cfx init`.
@@ -87,6 +103,25 @@ your add-on alongside debuggers like [Firebug](http://getfirebug.com/).
<tr>
<td>
+ <code>--binary-args=CMDARGS</code>
+ </td>
+ <td>
+ <p>Pass <a href="http://kb.mozillazine.org/Command_line_arguments">extra
+ arguments</a> to the binary being executed (for example, Firefox).</p>
+ <p>For example, to pass the
+ <code>-jsconsole</code> argument to Firefox, which will launch the
+ <a href="https://developer.mozilla.org/en/Error_Console">JavaScript
+ Error Console</a>, try the following:</p<>
+ <pre>
+ cfx run --binary-args -jsconsole</pre>
+ <p>To pass multiple arguments, or arguments containing spaces, quote them:</p>
+ <pre>
+ cfx run --binary-args '-url "www.mozilla.org" -jsconsole'</pre>
+ </td>
+</tr>
+
+<tr>
+ <td>
<code>--extra-packages=EXTRA_PACKAGES</code>
</td>
<td>
@@ -218,25 +253,6 @@ To launch the application, enter the following command:
<tr>
<td>
- <code>--binary-args=CMDARGS</code>
- </td>
- <td>
- <p>Pass <a href="http://kb.mozillazine.org/Command_line_arguments">extra
- arguments</a> to the binary being executed (for example, Firefox).</p>
- <p>For example, to pass the
- <code>-jsconsole</code> argument to Firefox, which will launch the
- <a href="https://developer.mozilla.org/en/Error_Console">JavaScript
- Error Console</a>, try the following:</p<>
- <pre>
- cfx run --binary-args -jsconsole</pre>
- <p>To pass multiple arguments, or arguments containing spaces, quote them:</p>
- <pre>
- cfx run --binary-args '-url "www.mozilla.org" -jsconsole'</pre>
- </td>
-</tr>
-
-<tr>
- <td>
<code>--e10s</code>
</td>
<td>
@@ -298,6 +314,25 @@ times.
<tr>
<td>
+ <code>--binary-args=CMDARGS</code>
+ </td>
+ <td>
+ <p>Pass <a href="http://kb.mozillazine.org/Command_line_arguments">extra
+ arguments</a> to the binary being executed (for example, Firefox).</p>
+ <p>For example, to pass the
+ <code>-jsconsole</code> argument to Firefox, which will launch the
+ <a href="https://developer.mozilla.org/en/Error_Console">JavaScript
+ Error Console</a>, try the following:</p<>
+ <pre>
+ cfx run --binary-args -jsconsole</pre>
+ <p>To pass multiple arguments, or arguments containing spaces, quote them:</p>
+ <pre>
+ cfx run --binary-args '-url "www.mozilla.org" -jsconsole'</pre>
+ </td>
+</tr>
+
+<tr>
+ <td>
<code>--dependencies</code>
</td>
<td>
@@ -432,25 +467,6 @@ To launch the application, enter the following command:
<tr>
<td>
- <code>--binary-args=CMDARGS</code>
- </td>
- <td>
- <p>Pass <a href="http://kb.mozillazine.org/Command_line_arguments">extra
- arguments</a> to the binary being executed (for example, Firefox).</p>
- <p>For example, to pass the
- <code>-jsconsole</code> argument to Firefox, which will launch the
- <a href="https://developer.mozilla.org/en/Error_Console">JavaScript
- Error Console</a>, try the following:</p<>
- <pre>
- cfx run --binary-args -jsconsole</pre>
- <p>To pass multiple arguments, or arguments containing spaces, quote them:</p>
- <pre>
- cfx run --binary-args '-url "www.mozilla.org" -jsconsole'</pre>
- </td>
-</tr>
-
-<tr>
- <td>
<code>--e10s</code>
</td>
<td>
@@ -19,7 +19,7 @@ module wants to make available to other modules
object of another module. Your translator add-on uses `require` to import the
SDK modules it uses.
-![CommonJS modules](media/commonjs-modules.jpg)
+![CommonJS modules](static-files/media/commonjs-modules.jpg)
The SDK
[freezes](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/freeze)
@@ -62,7 +62,7 @@ soon as Firefox has enabled the add-on.
So in terms of CommonJS objects the translator consists of a package that
contains a single module called `main`, and which imports three SDK modules:
-![CommonJS translator](media/commonjs-translator.jpg)
+![CommonJS translator](static-files/media/commonjs-translator.jpg)
Because an add-on is a CommonJS package it's possible to include more than one
module in an add-on, and to make your modules available to any code that want
Oops, something went wrong.

0 comments on commit 7f79c16

Please sign in to comment.