Bug 601903 - Update static-files/md/dev-guide/programs.md for e10s context-menu changes. r=myk, a=blocking0.9
authorDrew Willcoxon <adw@mozilla.com>
Tue, 19 Oct 2010 11:59:31 -0700
changeset 886 895e79514ce608c6d1b56132ed48d22854d12c79
parent 885 ee3d5c8a57839951a6a929aa1e099ebbc9dd86d4
child 887 bb651f9b6f092dca29f79ae223ee67a31d2e3951
push id390
push userdwillcoxon@mozilla.com
push dateTue, 19 Oct 2010 19:00:10 +0000
reviewersmyk, blocking0.9
bugs601903
Bug 601903 - Update static-files/md/dev-guide/programs.md for e10s context-menu changes. r=myk, a=blocking0.9
static-files/md/dev-guide/programs.md
--- a/static-files/md/dev-guide/programs.md
+++ b/static-files/md/dev-guide/programs.md
@@ -5,62 +5,81 @@ change in the near future.
 
 If Jetpack packages are constructed in a certain way, they can function as
 Firefox or Thunderbird extensions, full-fledged native platform applications,
 and more.
 
 ## Your First Program ##
 
 We're going to continue building upon our package from the [Packaging]
-section. This program will add a context-menu option to links, with the
-ability to search Google for the link text.
+section.  This program adds a menu item to Firefox's context menu that replaces
+selected text with its English translation.
 
 ### Using Jetpack's Built-in Libraries ###
 
 Add a `dependencies` entry to your package.json file, showing that your
 package requires modules from the jetpack-core library. It should look
 something like this now:
 
     {
-      "description": "This package adds a Google search context-menu item.",
+      "description": "This package adds a translation context menu item.",
       "author": "Me (http://me.org)",
       "dependencies": ["jetpack-core"]
     }
 
 
 ### Adding Your Code ###
 
 If a module called `main` exists in your package, that module will be evaluated
 as soon as your program is loaded. By "loaded", we mean that either a host
 application such as Firefox or Thunderbird has enabled your program as an
 extension, or that your program is itself a standalone application.  The
 forthcoming example will demonstrate an extension.
 
 With this in mind, let's create a file at `lib/main.js` with the
 following content:
 
+    // Import the APIs we need.
     var contextMenu = require("context-menu");
+    var request = require("request");
+    var selection = require("selection");
 
     // Create a new context menu item.
     var menuItem = contextMenu.Item({
 
-      label: "Search with Google",
+      label: "Translate Selection",
+
+      // Show this item when a selection exists.
+      context: contextMenu.SelectionContext(),
 
-      // A CSS selector. Matching on this selector triggers the
-      // display of our context menu.
-      context: "a[href]",
+      // When this item is clicked, post a message to the item with the
+      // selected text and current URL.
+      contentScript: 'on("click", function () {' +
+                     '  var text = window.getSelection().toString();' +
+                     '  postMessage({ text: text, url: document.URL });' +
+                     '});',
 
-      // When the context menu item is clicked, perform a Google
-      // search for the link text.
-      onClick: function (contextObj, item) {
-        var anchor = contextObj.node;
-        console.log("searching for " + anchor.textContent);
-        var searchUrl = "http://www.google.com/search?q=" +
-                        anchor.textContent;
-        contextObj.window.location.href = searchUrl;
+      // When we receive the message, call the Google Translate API with the
+      // selected text and replace it with the translation.
+      onMessage: function (selectionInfo) {
+        var req = request.Request({
+          url: "http://ajax.googleapis.com/ajax/services/language/translate",
+          content: {
+            v: "1.0",
+            q: selectionInfo.text,
+            langpair: "|en"
+          },
+          headers: {
+            Referer: selectionInfo.url
+          },
+          onComplete: function (response) {
+            selection.text = response.json.responseData.translatedText;
+          }
+        });
+        req.get();
       }
     });
 
     // Add the new menu item to the application's context menu.
     contextMenu.add(menuItem);
 
 ### Listening for Load and Unload ###