...

doc/dev-guide-source/addon-development/getting-started-with-cfx.md

@@ -1,7 +1,7 @@
 # Getting Started With cfx #
 
 To create add-ons using the SDK you'll have to get to know the `cfx`
-command-line tool. It's what you'll use for testing and packing add-ons.
+command-line tool. It's what you'll use for testing and packaging add-ons.
 
 There's comprehensive
 [reference documentation](dev-guide/addon-development/cfx-tool.html) covering
@@ -31,16 +31,13 @@ Create a new directory, navigate to it in your command shell, and run
 <pre>
 mkdir my-addon
 cd my-addon
+cfx init
 </pre>
 
 You don't have to create this directory under the SDK root: once you have
 activated from the SDK root, `cfx` will remember where the SDK is, and you
 will be able to use it from any directory.
 
-<pre>
-cfx init
-</pre>
-
 You'll see some output like this:
 
 <pre>

doc/dev-guide-source/addon-development/tutorials.md

@@ -2,42 +2,42 @@
 
 ## Getting Started ##
 
-** [Installation](dev-guide/addon-development/installation.html) **
+ [Installation](dev-guide/addon-development/installation.html) 
 <br/>
 
-** [Getting Started With cfx](dev-guide/addon-development/getting-started-with-cfx.html) **
+ [Getting Started With cfx](dev-guide/addon-development/getting-started-with-cfx.html) 
 
 ## Introducing the APIs ##
 
-** [Modifying Web Pages](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Modifying Web Pages](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-** [Adding a Button to the Toolbar](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Adding a Button to the Toolbar](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-** [Adding HTML Content to the Toolbar](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Adding HTML Content to the Toolbar](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-** [Displaying Popups](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Displaying Popups](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-** [Adding Menu Items to Firefox](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Adding Menu Items to Firefox](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-** [Adding Context Menu Items](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Adding Context Menu Items](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-** [Making Network Requests](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Making Network Requests](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-** [Preferences and Local Storage](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Preferences and Local Storage](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-** [Working With Windows and Tabs](dev-guide/addon-development/tutorials/modifying-web-pages.html) **
+ [Working With Windows and Tabs](dev-guide/addon-development/tutorials/modifying-web-pages.html) 
 <br/>
 
-## Putting It All Together ##
+## Putting It Together ##
 
-** [Connecting `panel` to `page-mod`](dev-guide/addon-development/tutorials/panel-to-pagemod.html) **
+ [Connecting `panel` to `page-mod`](dev-guide/addon-development/tutorials/panel-to-pagemod.html) 
 
-** [Creating an Annotator add-on](dev-guide/addon-development/tutorials/annotator.html) **
+ [Creating an Annotator add-on](dev-guide/addon-development/tutorials/annotator.html) 

doc/dev-guide-source/addon-development/tutorials/modifying-web-pages.md

@@ -1,15 +1,26 @@
 # Modifying Web Pages #
 
-To modify web pages, use the [`page-mod`](packages/addon-kit/page-mod.html)
-module.
+There are two main ways you can use the SDK to modify web pages.
 
-`page-mod` enables you to run scripts in the context of a web page. To use
-it you need to specify two things:
+* to modify any pages matching a particular URL pattern (for
+example:"mozilla.com" or "*.org") as they are loaded, use
+[`page-mod`](dev-guide/addon-development/tutorials/modifying-web-pages.html#page-mod)
+* to modify the page hosted by a particular tab (for example,
+the currently active tab) use
+[`tab.attach()`](dev-guide/addon-development/tutorials/modifying-web-pages.html#tab-attach)
+
+## <a name="page-mod">Modifying Pages Based on URL</a> ##
+
+`page-mod` enables you to attach scripts to web pages which match a particular
+URL pattern.
+
+To use it you need to specify two things:
 
 * the script to run
 * a pattern to match the URLs for the pages you want to modify
 
-Here's a simple example:
+Here's a simple example. The script is supplied as the `contentScript` option,
+and the URL pattern is given as the `include` option:
 
     // Import the page-mod API
     var pageMod = require("page-mod");
@@ -29,9 +40,27 @@ Try it out:
 * run `cfx init`
 * open the `lib/main.js` file, and replace its contents with the code above
 * run `cfx run`, then run `cfx run` again
-* open [mozilla.org](http://www.mozilla.org) in the browser window that opens
+* open [ietf.org](http://www.ietf.org) in the browser window that opens
+
+This is what you should see:
+
+<img src="static-files/media/screenshots/pagemod-ietf.png"
+alt="ietf.org eaten by page-mod" />
+
+## <a name="tab-attach">Modifying the Page Hosted by a Tab</a> ##
+
+Here's a simple example:
 
+    // Import the page-mod API
+    var pageMod = require("page-mod");
 
+    // Create a page mod
+    // It will run a script whenever a ".org" URL is loaded
+    // The script replaces the page contents with a message
+    pageMod.PageMod({
+      include: "*.org",
+      contentScript: 'document.body.innerHTML = ' +
+                     ' "<h1>Page matches ruleset</h1>";'
 
 
 You can learn all about [API reference page](packages/addon-kit/page-mod.html)

doc/static-files/css/sdk-docs.css

@@ -10,12 +10,6 @@ pre {
   padding-left: 3em;
 }
 
-h2 {
-  color: black;
-  background-color: #F0F8FF;
-  padding: 10px;
-}
-
 #columns {
   padding-left: 250px;      /* sidebar width + sidebar padding */
   padding-right: 65px;     /* main-content padding*/
@@ -218,6 +212,9 @@ hr {
 
 #main-content h2 {
   font-size: 1.7em;
+  color: black;
+  background-color: #F0F8FF;
+  padding: 10px;
 }
 
 .sidebar-subsection-contents {