Cleanup pass on Getting Started.

Copyedited it, and updated it to use new icons,
new screenshots, and the new examples directory.
I'll remove the samples directory once the
debugging tutorial is updated.

BUG=none
TEST=none
TBR=aa

Review URL: http://codereview.chromium.org/384136

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@31969 0039d316-1c4b-4281-b951-d872f2087c98

11 files changed, 133 insertions, 47 deletions

diff --git a/chrome/common/extensions/docs/examples/tutorials/getstarted/icon.png b/chrome/common/extensions/docs/examples/tutorials/getstarted/icon.png
new file mode 100755
index 0000000..103ff36
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/tutorials/getstarted/icon.png
diff --git a/chrome/common/extensions/docs/examples/tutorials/getstarted/manifest.json b/chrome/common/extensions/docs/examples/tutorials/getstarted/manifest.json
new file mode 100755
index 0000000..eabeca5
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/tutorials/getstarted/manifest.json
@@ -0,0 +1,12 @@
+{
+  "name": "My First Extension",
+  "version": "1.0",
+  "description": "The first extension that I made.",
+  "browser_action": {
+    "default_icon": "icon.png",
+    "popup": "popup.html"
+  },
+  "permissions": [
+    "http://api.flickr.com/"
+  ]
+}
diff --git a/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html b/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html
new file mode 100644
index 0000000..a3cab7a
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html
@@ -0,0 +1,50 @@
+<style>
+body {
+  min-width:357px;
+  overflow-x:hidden;
+}
+
+img {
+  margin:5px;
+  border:2px solid black;
+  vertical-align:middle;
+  width:75px;
+  height:75px;
+}
+</style>
+
+<script>
+var req = new XMLHttpRequest();
+req.open(
+    "GET",
+    "http://api.flickr.com/services/rest/?" +
+        "method=flickr.photos.search&" +
+        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
+        "text=hello%20world&" +
+        "safe_search=1&" +  // 1 is "safe"
+        "content_type=1&" +  // 1 is "photos only"
+        "sort=relevance&" +  // another good one is "interestingness-desc"
+        "per_page=20",
+    true);
+req.onload = showPhotos;
+req.send(null);
+
+function showPhotos() {
+  var photos = req.responseXML.getElementsByTagName("photo");
+
+  for (var i = 0, photo; photo = photos[i]; i++) {
+    var img = document.createElement("image");
+    img.src = constructImageURL(photo);
+    document.body.appendChild(img);
+  }
+}
+
+// See: http://www.flickr.com/services/api/misc.urls.html
+function constructImageURL(photo) {
+  return "http://farm" + photo.getAttribute("farm") +
+      ".static.flickr.com/" + photo.getAttribute("server") +
+      "/" + photo.getAttribute("id") +
+      "_" + photo.getAttribute("secret") +
+      "_s.jpg";
+}
+</script>
diff --git a/chrome/common/extensions/docs/getstarted.html b/chrome/common/extensions/docs/getstarted.html
index 9ff61ff..3536ad7 100644
--- a/chrome/common/extensions/docs/getstarted.html
+++ b/chrome/common/extensions/docs/getstarted.html
@@ -239,12 +239,12 @@
 
 <p>
 This tutorial walks you through creating a simple extension.
-You'll add a button to Google Chrome
+You'll add an icon to Google Chrome
 that, when clicked, displays an automatically generated page.
-The button and page will look something like this:
+The icon and page will look something like this:
 </p>
 
-<img src="images/hello-world-small.png" width="300" height="199" alt="a window with a grid of images related to HELLO WORLD">
+<img src="images/hello-world-small.png" width="300" height="243" alt="a window with a grid of images related to HELLO WORLD">
 
 
 <h2 id="browser">Get your browser ready</h2>
@@ -284,7 +284,7 @@ to the toolbar of Google Chrome.
   "version": "1.0",
   "description": "The first extension that I made.",
   "browser_action": {
-    ""default_icon": "icon.png""
+    "default_icon": "icon.png"
   },
   "permissions": [
     "http://api.flickr.com/"
@@ -295,15 +295,25 @@ to the toolbar of Google Chrome.
     Copy this icon to the same folder:<br>
     <table cellpadding="0" cellspacing="0">
       <tbody><tr>
-        <td style="text-align:center; border:0;"><a href="samples/hello_world/icon.png"><img src="samples/hello_world/icon.png" width="19" height="19" border="0"></a><br>
-          <a href="samples/hello_world/icon.png">Download icon.png</a></td>
+        <td style="text-align:center; border:0;"><a href="examples/tutorials/getstarted/icon.png"><img src="examples/tutorials/getstarted/icon.png" width="19" height="19" border="0"></a><br>
+          <a href="examples/tutorials/getstarted/icon.png">Download icon.png</a></td>
       </tr>
     </tbody></table>
   </li>
   <li> Load the extension.
     <ol type="a">
       <li>
-      Bring up the Extensions management page by clicking the wrench icon, and selecting the "Extensions" menu item.
+      Bring up the extensions management page
+      by clicking the Tools menu
+      <img src="images/toolsmenu.gif" width="43" height="34" alt="" align="absmiddle">
+      and choosing <b>Extensions</b>.
+      </li>
+
+      <li>
+      If <b>Developer mode</b> has a + by it,
+      click the + to add developer information to the page.
+      The + changes to a -,
+      and more buttons and information appear.
       </li>
 
       <li>
@@ -315,21 +325,21 @@ to the toolbar of Google Chrome.
       In the file dialog,
       navigate to your extension's folder
       (<code>c:\myext</code>, for example)
-      and click the <b>OK</b> button.
+      and click <b>OK</b>.
       </li>
     </ol> </li>
   </ol>
 
 <p>
 If your extension is valid,
-information about it
-appears in the <b>Installed extensions</b> part
-of the Extensions page,
+its icon appears next to the address bar,
+and information about the extension
+appears in the extensions page,
 as the following screenshot shows.
 </p>
 
 <p>
-<a href="images/load_after.png"><img src="images/load_after_small.png" width="327" height="206"></a>
+<a href="images/load_after.png"><img src="images/load_after_small.png" width="300" height="194"></a>
 </p>
 
 <h2 id="code">Add code to the extension</h2>
@@ -339,27 +349,28 @@ as the following screenshot shows.
     <p> Edit <code>manifest.json</code> to add the following line:</p>
 <pre>  ...
   "browser_action": {
-    "default_icon": "icon.png",
-    <b style="background:yellow">"popup": "popup.html"</b>
+    "default_icon": "icon.png"<b>,
+    "popup": "popup.html"</b>
   },
   ...
 </pre>
     <p> Inside your extension's folder,
     create a text file called <strong><code>popup.html</code></strong>,
     and add the following code to it:</p>
-    <blockquote> <a href="samples/hello_world/popup.html" onclick="window.open('view-source:' + this.href); return false;">CSS
+    <blockquote> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html?content-type=text/plain" target="_blank">CSS
     and JavaScript code for hello_world</a></blockquote>
   </li>
   <li>
-    Return to <b>chrome://extensions</b>,
+    Return to the extensions management page,
     and click the <b>Reload</b> button
     to load the new version of the extension.</li>
-  <li>Click the button.
-  A popup bubble should come up that displays <code>popup.html</code>. </li>
+  <li>Click the extension's icon.
+  A popup should appear that displays the contents of
+  <code>popup.html</code>. </li>
 </ol>
 <p> It should look something like this:</p>
 
-<img src="images/hello-world.png" width="583" height="387" alt="a popup with a grid of images related to HELLO WORLD">
+<img src="images/hello-world.png" width="500" height="405" alt="a popup with a grid of images related to HELLO WORLD">
 
 <p> If you don't see the popup,
 try the instructions again,
@@ -397,7 +408,7 @@ Here are some suggestions for what to do next:
   </li>
   <li>
     Look at some
-    <a href="http://sites.google.com/a/chromium.org/dev/developers/design-documents/extensions/samples">sample extensions</a>
+    <a href="samples.html">sample extensions</a>
   </li>
 </ul>
 </div>
diff --git a/chrome/common/extensions/docs/images/hello-world-small.png b/chrome/common/extensions/docs/images/hello-world-small.png
index 2d008192..d4471b0 100644
--- a/chrome/common/extensions/docs/images/hello-world-small.png
+++ b/chrome/common/extensions/docs/images/hello-world-small.png
diff --git a/chrome/common/extensions/docs/images/hello-world.png b/chrome/common/extensions/docs/images/hello-world.png
index deed573..678c2a0 100644
--- a/chrome/common/extensions/docs/images/hello-world.png
+++ b/chrome/common/extensions/docs/images/hello-world.png
diff --git a/chrome/common/extensions/docs/images/intermediate/hello-world.png b/chrome/common/extensions/docs/images/intermediate/hello-world.png
new file mode 100755
index 0000000..8845ca1
--- /dev/null
+++ b/chrome/common/extensions/docs/images/intermediate/hello-world.png
diff --git a/chrome/common/extensions/docs/images/load_after.png b/chrome/common/extensions/docs/images/load_after.png
index 0d82005..9aaa9e34 100644
--- a/chrome/common/extensions/docs/images/load_after.png
+++ b/chrome/common/extensions/docs/images/load_after.png
diff --git a/chrome/common/extensions/docs/images/load_after_small.png b/chrome/common/extensions/docs/images/load_after_small.png
index 63d5cc5..f5dfc82 100644
--- a/chrome/common/extensions/docs/images/load_after_small.png
+++ b/chrome/common/extensions/docs/images/load_after_small.png
diff --git a/chrome/common/extensions/docs/images/toolsmenu.gif b/chrome/common/extensions/docs/images/toolsmenu.gif
new file mode 100755
index 0000000..d6afcab
--- /dev/null
+++ b/chrome/common/extensions/docs/images/toolsmenu.gif
diff --git a/chrome/common/extensions/docs/static/getstarted.html b/chrome/common/extensions/docs/static/getstarted.html
index 4391c15..ccd612f 100644
--- a/chrome/common/extensions/docs/static/getstarted.html
+++ b/chrome/common/extensions/docs/static/getstarted.html
@@ -3,13 +3,13 @@
 
 <p>
 This tutorial walks you through creating a simple extension.
-You'll add a button to Google Chrome
+You'll add an icon to Google Chrome
 that, when clicked, displays an automatically generated page.
-The button and page will look something like this:
+The icon and page will look something like this:
 </p>
 
 <img src="images/hello-world-small.png"
-  width="300" height="199"
+  width="300" height="243"
   alt="a window with a grid of images related to HELLO WORLD" />
 
 
@@ -46,14 +46,14 @@ to the toolbar of Google Chrome.
     create a text file called <strong><code>manifest.json</code></strong>,
     and put this in it:
 <pre>{
-  &quot;name&quot;: &quot;My First Extension&quot;,
-  &quot;version&quot;: &quot;1.0&quot;,
-  &quot;description&quot;: &quot;The first extension that I made.&quot;,
-  &quot;browser_action&quot;: {
-    &quot;"default_icon": "icon.png"&quot;
+  "name": "My First Extension",
+  "version": "1.0",
+  "description": "The first extension that I made.",
+  "browser_action": {
+    "default_icon": "icon.png"
   },
-  &quot;permissions&quot;: [
-    &quot;http://api.flickr.com/&quot;
+  "permissions": [
+    "http://api.flickr.com/"
   ]
 }</pre>
   </li>
@@ -62,10 +62,10 @@ to the toolbar of Google Chrome.
     <table cellpadding="0" cellspacing="0">
       <tr>
         <td style="text-align:center; border:0;"><a
-          href="samples/hello_world/icon.png"
-            ><img src="samples/hello_world/icon.png"
+          href="examples/tutorials/getstarted/icon.png"
+            ><img src="examples/tutorials/getstarted/icon.png"
               width="19" height="19" border="0"></a><br>
-          <a href="samples/hello_world/icon.png"
+          <a href="examples/tutorials/getstarted/icon.png"
             >Download icon.png</a></td>
       </tr>
     </table>
@@ -73,7 +73,18 @@ to the toolbar of Google Chrome.
   <li> Load the extension.
     <ol type="a">
       <li>
-      Bring up the Extensions management page by clicking the wrench icon, and selecting the "Extensions" menu item.
+      Bring up the extensions management page
+      by clicking the Tools menu
+      <img src="images/toolsmenu.gif" width="43" height="34" alt=""
+           align="absmiddle">
+      and choosing <b>Extensions</b>.
+      </li>
+
+      <li>
+      If <b>Developer mode</b> has a + by it,
+      click the + to add developer information to the page.
+      The + changes to a -,
+      and more buttons and information appear.
       </li>
 
       <li>
@@ -85,23 +96,23 @@ to the toolbar of Google Chrome.
       In the file dialog,
       navigate to your extension's folder
       (<code>c:\myext</code>, for example)
-      and click the <b>OK</b> button.
+      and click <b>OK</b>.
       </li>
     </ol> </li>
   </ol>
 
 <p>
 If your extension is valid,
-information about it
-appears in the <b>Installed extensions</b> part
-of the Extensions page,
+its icon appears next to the address bar,
+and information about the extension
+appears in the extensions page,
 as the following screenshot shows.
 </p>
 
 <p>
 <a href="images/load_after.png"><img
   src="images/load_after_small.png"
-  width="327" height="206" /></a>
+  width="300" height="194" /></a>
 </p>
 
 <h2 id="code">Add code to the extension</h2>
@@ -112,28 +123,30 @@ as the following screenshot shows.
 <pre>
   ...
   "browser_action": {
-    "default_icon": "icon.png",
-    <b style="background:yellow">"popup": "popup.html"</b>
+    "default_icon": "icon.png"<b>,
+    "popup": "popup.html"</b>
   },
   ...
 </pre>
     <p> Inside your extension's folder,
     create a text file called <strong><code>popup.html</code></strong>,
     and add the following code to it:</p>
-    <blockquote> <a href="samples/hello_world/popup.html" onclick="window.open('view-source:' + this.href); return false;">CSS
+    <blockquote> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html?content-type=text/plain"
+    target="_blank">CSS
     and JavaScript code for hello_world</a></blockquote>
   </li>
   <li>
-    Return to <b>chrome://extensions</b>,
+    Return to the extensions management page,
     and click the <b>Reload</b> button
     to load the new version of the extension.</li>
-  <li>Click the button.
-  A popup bubble should come up that displays <code>popup.html</code>. </li>
+  <li>Click the extension's icon.
+  A popup should appear that displays the contents of
+  <code>popup.html</code>. </li>
 </ol>
 <p> It should look something like this:</p>
 
 <img src="images/hello-world.png"
-  width="583" height="387"
+  width="500" height="405"
   alt="a popup with a grid of images related to HELLO WORLD" />
 
 <p> If you don't see the popup,
@@ -172,6 +185,6 @@ Here are some suggestions for what to do next:
   </li>
   <li>
     Look at some
-    <a href="http://sites.google.com/a/chromium.org/dev/developers/design-documents/extensions/samples">sample extensions</a>
+    <a href="samples.html">sample extensions</a>
   </li>
 </ul>