made prerequisites an aside

doc/dev-guide-source/addon-development/tutorials/add-a-context-menu-item.md

@@ -4,10 +4,12 @@
 
 # Add a Context Menu Item #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 To add items and submenus to the Firefox context menu, use the
 [`context-menu`](packages/addon-kit/docs/context-menu.html) module.

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

@@ -4,10 +4,12 @@
 
 # Add a Menu Item to Firefox #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 The SDK doesn't yet provide an API to add new menu items to Firefox.
 But it's extensible by design, so anyone can build and publish

doc/dev-guide-source/addon-development/tutorials/adding-toolbar-button.md

@@ -4,10 +4,12 @@
 
 # Adding a Button to the Toolbar #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 To add a button to the toolbar, use the
 [`widget`](packages/addon-kit/docs/widget.html) module.

doc/dev-guide-source/addon-development/tutorials/adding-toolbar-content.md

@@ -4,10 +4,12 @@
 
 # Create a New Toolbar #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 You can use the [`widget`](packages/addon-kit/docs/widget.html)
 module to add a button to the

doc/dev-guide-source/addon-development/tutorials/display-a-popup.md

@@ -4,10 +4,12 @@
 
 # Display a Popup #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 <img class="image-right" src="static-files/media/screenshots/text-entry-panel.png"
 alt="Text entry panel">

doc/dev-guide-source/addon-development/tutorials/get-user-input.md

@@ -4,10 +4,12 @@
 
 # Getting User Input #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 <img class="image-right" src="static-files/media/screenshots/text-entry-panel.png"
 alt="Text entry panel">

doc/dev-guide-source/addon-development/tutorials/getting-user-input.md

@@ -0,0 +1,117 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+# Getting User Input #
+
+<span class="aside">
+To follow this tutorial you'll need to have
+[installed the SDK](dev-guide/addon-development/tutorials/installation.html)
+and learned the
+[basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
+
+<img class="image-right" src="static-files/media/screenshots/text-entry-panel.png"
+alt="Text entry panel">
+
+In this tutorial we'll create an add-on that adds widget to the toolbar
+which displays a panel when clicked. The panel just contains a
+`<textarea>` element: when the user presses the `return` key, the contents
+of the `<textarea>` is sent to the main add-on code.
+
+The add-on consists of three files:
+
+* **`main.js`**: the main add-on code, that creates the widget and panel
+* **`get-text.js`**: the content script that interacts with the panel content
+* **`text-entry.html`**: the panel content itself, specified as HTML
+
+"main.js" is saved in your add-on's `lib` directory, and the other two files
+go in your add-on's `data` directory:
+
+<pre>
+my-addon/
+         data/
+              get-text.js
+              text-entry.html
+         lib/
+             main.js
+</pre>
+
+The "main.js" looks like this:
+
+    var data = require("self").data;
+
+    // Create a panel whose content is defined in "text-entry.html".
+    // Attach a content script called "get-text.js".
+    var text_entry = require("panel").Panel({
+      width: 212,
+      height: 200,
+      contentURL: data.url("text-entry.html"),
+      contentScriptFile: data.url("get-text.js")
+    });
+
+    // Send the content script a message called "show" when
+    // the panel is shown.
+    text_entry.on("show", function() {
+      text_entry.port.emit("show");
+    });
+
+    // Listen for messages called "text-entered" coming from
+    // the content script. The message payload is the text the user
+    // entered.
+    // In this implementation we'll just log the text to the console.
+    text_entry.port.on("text-entered", function (text) {
+      console.log(text);
+      text_entry.hide();
+    });
+
+    // Create a widget, and attach the panel to it, so the panel is
+    // shown when the user clicks the widget.
+    require("widget").Widget({
+      label: "Text entry",
+      id: "text-entry",
+      contentURL: "http://www.mozilla.org/favicon.ico",
+      panel: text_entry
+    });
+
+The content script "get-text.js" looks like this:
+
+    self.port.on("show", function (arg) {
+      var textArea = document.getElementById('edit-box');
+      textArea.focus();
+      // When the user hits return, send a message to main.js.
+      // The message payload is the contents of the edit box.
+      textArea.onkeyup = function(event) {
+        if (event.keyCode == 13) {
+          // Remove the newline.
+          text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
+          self.port.emit("text-entered", text);
+          textArea.value = '';
+        }
+      };
+    });
+
+Finally, the "text-entry.html" file defines the `<textarea>` element:
+
+<script type="syntaxhighlighter" class="brush: html"><![CDATA[
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+
+<head>
+  <style type="text/css" media="all">
+    textarea {
+      margin: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <textarea rows="10" cols="20" id="edit-box"></textarea>
+</body>
+
+</html>
+]]>
+</script>
+

doc/dev-guide-source/addon-development/tutorials/list-open-tabs.md

@@ -4,10 +4,12 @@
 
 # List Open Tabs #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 To list the open tabs, you can iterate over the
 [`tabs`](packages/addon-kit/docs/tabs.html) object itself.

doc/dev-guide-source/addon-development/tutorials/listen-for-page-load.md

@@ -4,10 +4,12 @@
 
 # Listen For Page Load #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 You can get notifications about new pages loading using the
 [`tabs`](packages/addon-kit/docs/tabs.html) module. The following add-on

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

@@ -4,22 +4,25 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
-
-<span class="aside">
-Because `window.alert()` isn't available to your main add-on code,
-if you're used to using it for diagnostics then the console is a
-useful replacement.
 </span>
 
 To help debug your add-on you can use the SDK's global `console` object
 to log error, warning, or informational messages. You don't have to
 `require()` anything to get access to the console: it is automatically
 made available to you.
 
+<span class="aside">
+Because `window.alert()` isn't available to your main add-on code,
+if you use it for diagnostics then the console is a
+useful replacement.
+</span>
+
+
 The `console.log()` method prints an informational message:
 
     console.log("Hello World");

doc/dev-guide-source/addon-development/tutorials/make-a-network-request.md

@@ -0,0 +1 @@
+# Make a Network Request #

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

@@ -4,10 +4,12 @@
 
 # Modifying the Page Hosted by a Tab #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 To modify the page hosted by a particular tab, load a script into it
 using the `attach()` method of the

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

@@ -4,10 +4,12 @@
 
 # Modifying Web Pages Based on URL #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 To modify any pages that match a particular pattern
 (for example, "http://example.org/") as they are loaded, use the

doc/dev-guide-source/addon-development/tutorials/open-a-web-page.md

@@ -4,10 +4,12 @@
 
 # Open a Web Page #
 
+<span class="aside">
 To follow this tutorial you'll need to have
 [installed the SDK](dev-guide/addon-development/tutorials/installation.html)
 and learned the
 [basics of `cfx`](dev-guide/addon-development/tutorials/getting-started-with-cfx.html).
+</span>
 
 To open a new web page, you can use the
 [`tabs`](packages/addon-kit/docs/tabs.html) module: