New screenshots for many of the tutorial images.

TEST=none
BUG=none
TBR=aa

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

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

13 files changed, 45 insertions, 38 deletions

diff --git a/chrome/common/extensions/docs/getstarted.html b/chrome/common/extensions/docs/getstarted.html
index e81f5da..5d266d1 100644
--- a/chrome/common/extensions/docs/getstarted.html
+++ b/chrome/common/extensions/docs/getstarted.html
@@ -282,7 +282,7 @@ that, when clicked, displays an automatically generated page.
 The icon and page will look something like this:
 </p>
 
-<img src="images/hello-world-small.png" width="300" height="243" alt="a window with a grid of images related to HELLO WORLD">
+<img src="images/hello-world-small.png" width="300" height="221" alt="a window with a grid of images related to HELLO WORLD">
 
 
 <h2 id="browser">Get your browser ready</h2>
@@ -377,7 +377,7 @@ as the following screenshot shows.
 </p>
 
 <p>
-<a href="images/load_after.png"><img src="images/load_after_small.png" width="300" height="194"></a>
+<a href="images/load_after.png"><img src="images/load_after_small.png" width="300" height="132"></a>
 </p>
 
 <h2 id="code">Add code to the extension</h2>
@@ -408,7 +408,7 @@ as the following screenshot shows.
 </ol>
 <p> It should look something like this:</p>
 
-<img src="images/hello-world.png" width="500" height="405" alt="a popup with a grid of images related to HELLO WORLD">
+<img src="images/hello-world.png" width="500" height="369" alt="a popup with a grid of images related to HELLO WORLD">
 
 <p> If you don't see the popup,
 try the instructions again,
diff --git a/chrome/common/extensions/docs/images/debug-popup-tab.png b/chrome/common/extensions/docs/images/debug-popup-tab.png
index fff7200..a55d221 100644
--- a/chrome/common/extensions/docs/images/debug-popup-tab.png
+++ b/chrome/common/extensions/docs/images/debug-popup-tab.png
diff --git a/chrome/common/extensions/docs/images/debug-popup.png b/chrome/common/extensions/docs/images/debug-popup.png
index f9de402..50d4eba 100644
--- a/chrome/common/extensions/docs/images/debug-popup.png
+++ b/chrome/common/extensions/docs/images/debug-popup.png
diff --git a/chrome/common/extensions/docs/images/devtools-3.png b/chrome/common/extensions/docs/images/devtools-3.png
index 5ce14d1..1c22002 100755
--- a/chrome/common/extensions/docs/images/devtools-3.png
+++ b/chrome/common/extensions/docs/images/devtools-3.png
diff --git a/chrome/common/extensions/docs/images/devtools-localvars.png b/chrome/common/extensions/docs/images/devtools-localvars.png
index 1dafc1b..81e9215 100644
--- a/chrome/common/extensions/docs/images/devtools-localvars.png
+++ b/chrome/common/extensions/docs/images/devtools-localvars.png
diff --git a/chrome/common/extensions/docs/images/hello-world-small.png b/chrome/common/extensions/docs/images/hello-world-small.png
index d4471b0..53e3d7a 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 678c2a0..efefcb9 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
index 8845ca1..c2d0ddf 100755
--- a/chrome/common/extensions/docs/images/intermediate/hello-world.png
+++ 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 9aaa9e34..09b7085 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 f5dfc82..160de47 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/static/getstarted.html b/chrome/common/extensions/docs/static/getstarted.html
index 36f9868..2bcfd32 100644
--- a/chrome/common/extensions/docs/static/getstarted.html
+++ b/chrome/common/extensions/docs/static/getstarted.html
@@ -9,7 +9,7 @@ The icon and page will look something like this:
 </p>
 
 <img src="images/hello-world-small.png"
-  width="300" height="243"
+  width="300" height="221"
   alt="a window with a grid of images related to HELLO WORLD" />
 
 
@@ -112,7 +112,7 @@ as the following screenshot shows.
 <p>
 <a href="images/load_after.png"><img
   src="images/load_after_small.png"
-  width="300" height="194" /></a>
+  width="300" height="132" /></a>
 </p>
 
 <h2 id="code">Add code to the extension</h2>
@@ -146,7 +146,7 @@ as the following screenshot shows.
 <p> It should look something like this:</p>
 
 <img src="images/hello-world.png"
-  width="500" height="405"
+  width="500" height="369"
   alt="a popup with a grid of images related to HELLO WORLD" />
 
 <p> If you don't see the popup,
diff --git a/chrome/common/extensions/docs/static/tut_debugging.html b/chrome/common/extensions/docs/static/tut_debugging.html
index 16d564b..628e4f3 100644
--- a/chrome/common/extensions/docs/static/tut_debugging.html
+++ b/chrome/common/extensions/docs/static/tut_debugging.html
@@ -14,6 +14,10 @@ to interactively debug an extension.
 To follow this tutorial, you need
 the Hello World extension that was featured in
 <a href="getstarted.html">Getting Started</a>.
+In this section,
+you'll load the extension
+and take a look at its information
+in the Extensions page.
 </p>
 
 <ol>
@@ -42,7 +46,7 @@ the Hello World extension that was featured in
   </li>
 
   <li>
-  Go to the Installed Extensions page
+  Go to the Extensions page
   (<b>chrome://extensions</b>),
   and make sure the page is in Developer mode.
   </li>
@@ -59,7 +63,7 @@ the Hello World extension that was featured in
   </li>
 
   <li>
-  Keeping an eye on the Installed Extensions page,
+  Keeping an eye on the Extensions page,
   click the Hello World extension's icon
   <img src="examples/tutorials/getstarted/icon.png"
        width="19" height="19" alt=""
@@ -70,14 +74,14 @@ the Hello World extension that was featured in
 
   <p>
   <img src="images/debug-popup.png"
-       width="" height="" alt="" />
+       width="726" height="547" alt="" />
 
   </li>
 </ol>
 
 <p>
 Normally, you can inspect a page
-by clicking its link in the Installed Extensions page.
+by clicking its link in the Extensions page.
 However, clicking the link for a popup just
 makes the popup disappear.
 (This happens because a popup goes away as soon as it loses the keyboard focus.)
@@ -99,7 +103,7 @@ This feature is especially handy for debugging popups.
 <ol>
   <li>
   Get the ID for the Hello World extension
-  from the Installed Extensions page.
+  from the Extensions page.
   Example: <b>opnnhifacfpohionnikhlecfgheooenk</b>
   </li>
 
@@ -118,11 +122,11 @@ This feature is especially handy for debugging popups.
 
   <p>
   <img src="images/debug-popup-tab.png"
-       width="" height="" alt="" />
+       width="726" height="356" alt="" />
   </p>
 
   <li>
-  Back in the Installed Extensions page,
+  Back in the Extensions page,
   press <b>F5</b> or click the browser's Reload button
   to update the Hello World extension's information.
   <span class="comment">[PENDING: this seems like it should be unnecessary --
@@ -147,9 +151,8 @@ This feature is especially handy for debugging popups.
   <li>
   Click the console button
   <img src="images/console-button.gif"
-       style="border:1px black solid"
-       width="18" height="14" alt=""
-       style="margin:0" />
+       style="border:1px black solid; margin:0"
+       width="18" height="14" alt="" />
   (second from left, at the bottom of the Developer Tools window)
   so that you can see both the code and the console.
   </li>
@@ -200,21 +203,21 @@ as it adds images to itself.
   This section shows the current values of all variables in the current scope.
   For example, in the following screenshot
   the value of <code>i</code> is 0, and
-  <code>photos</code> is a <code>NodeList</code>
-  that contains at least one <code>Element</code>.
+  <code>photos</code> is a node list
+  that contains at least a few elements.
   (In fact, it contains 20 elements at indexes 0 through 19,
   each one representing a photo.)
 
   <p>
   <img src="images/devtools-localvars.png" alt=""
-       width="226" height="123" />
+       width="225" height="215" />
   </p>
   </li>
 
   <li>
   Click the play/pause button
   <img src="images/play-button.gif"
-       style="border:1px black solid"
+       style="border:1px black solid; margin:0"
        width="14" height="12" alt="" />
   (near the top right of the Developer Tools window)
   to go through the image-processing loop a single time.
@@ -227,7 +230,7 @@ as it adds images to itself.
 
   <p>
   <img src="images/devtools-3.png"
-       width="723" height="270"
+       width="726" height="356"
        alt="the popup page with 10 images" />
   </p>
 
@@ -238,7 +241,7 @@ as it adds images to itself.
   click line <b>37</b> to disable the breakpoint,
   and then press play/pause
   <img src="images/play-button.gif"
-       style="border:1px black solid"
+       style="border:1px black solid; margin:0"
        width="14" height="12" alt="" />
   to continue execution.
   </li>
@@ -256,7 +259,7 @@ to debug your extensions:
 <ul>
   <li>
     Find your extension's ID and links to its pages in
-    the <b>Installed Extensions</b> page
+    the <b>Extensions</b> page
     (<b>chrome://extensions</b>).
   </li>
   <li>
diff --git a/chrome/common/extensions/docs/tut_debugging.html b/chrome/common/extensions/docs/tut_debugging.html
index 6ddf343..02a375d 100644
--- a/chrome/common/extensions/docs/tut_debugging.html
+++ b/chrome/common/extensions/docs/tut_debugging.html
@@ -295,6 +295,10 @@ to interactively debug an extension.
 To follow this tutorial, you need
 the Hello World extension that was featured in
 <a href="getstarted.html">Getting Started</a>.
+In this section,
+you'll load the extension
+and take a look at its information
+in the Extensions page.
 </p>
 
 <ol>
@@ -321,7 +325,7 @@ the Hello World extension that was featured in
   </li>
 
   <li>
-  Go to the Installed Extensions page
+  Go to the Extensions page
   (<b>chrome://extensions</b>),
   and make sure the page is in Developer mode.
   </li>
@@ -338,7 +342,7 @@ the Hello World extension that was featured in
   </li>
 
   <li>
-  Keeping an eye on the Installed Extensions page,
+  Keeping an eye on the Extensions page,
   click the Hello World extension's icon
   <img src="examples/tutorials/getstarted/icon.png" width="19" height="19" alt="" style="margin:0">.
   A popup appears,
@@ -346,14 +350,14 @@ the Hello World extension that was featured in
   under a new "Inspect active views:" heading.
 
   <p>
-  <img src="images/debug-popup.png" width="" height="" alt="">
+  <img src="images/debug-popup.png" width="726" height="547" alt="">
 
   </p></li>
 </ol>
 
 <p>
 Normally, you can inspect a page
-by clicking its link in the Installed Extensions page.
+by clicking its link in the Extensions page.
 However, clicking the link for a popup just
 makes the popup disappear.
 (This happens because a popup goes away as soon as it loses the keyboard focus.)
@@ -375,7 +379,7 @@ This feature is especially handy for debugging popups.
 <ol>
   <li>
   Get the ID for the Hello World extension
-  from the Installed Extensions page.
+  from the Extensions page.
   Example: <b>opnnhifacfpohionnikhlecfgheooenk</b>
   </li>
 
@@ -393,11 +397,11 @@ This feature is especially handy for debugging popups.
   </p>
 
   <p>
-  <img src="images/debug-popup-tab.png" width="" height="" alt="">
+  <img src="images/debug-popup-tab.png" width="726" height="356" alt="">
   </p>
 
   </li><li>
-  Back in the Installed Extensions page,
+  Back in the Extensions page,
   press <b>F5</b> or click the browser's Reload button
   to update the Hello World extension's information.
   <span class="comment">[PENDING: this seems like it should be unnecessary --
@@ -420,7 +424,7 @@ This feature is especially handy for debugging popups.
   </li>
   <li>
   Click the console button
-  <img src="images/console-button.gif" style="border:1px black solid" width="18" height="14" alt="">
+  <img src="images/console-button.gif" style="border:1px black solid; margin:0" width="18" height="14" alt="">
   (second from left, at the bottom of the Developer Tools window)
   so that you can see both the code and the console.
   </li>
@@ -469,19 +473,19 @@ as it adds images to itself.
   This section shows the current values of all variables in the current scope.
   For example, in the following screenshot
   the value of <code>i</code> is 0, and
-  <code>photos</code> is a <code>NodeList</code>
-  that contains at least one <code>Element</code>.
+  <code>photos</code> is a node list
+  that contains at least a few elements.
   (In fact, it contains 20 elements at indexes 0 through 19,
   each one representing a photo.)
 
   <p>
-  <img src="images/devtools-localvars.png" alt="" width="226" height="123">
+  <img src="images/devtools-localvars.png" alt="" width="225" height="215">
   </p>
   </li>
 
   <li>
   Click the play/pause button
-  <img src="images/play-button.gif" style="border:1px black solid" width="14" height="12" alt="">
+  <img src="images/play-button.gif" style="border:1px black solid; margin:0" width="14" height="12" alt="">
   (near the top right of the Developer Tools window)
   to go through the image-processing loop a single time.
   Each time you click that button,
@@ -492,7 +496,7 @@ as it adds images to itself.
   </li>
 
   <p>
-  <img src="images/devtools-3.png" width="723" height="270" alt="the popup page with 10 images">
+  <img src="images/devtools-3.png" width="726" height="356" alt="the popup page with 10 images">
   </p>
 
   <li>
@@ -501,7 +505,7 @@ as it adds images to itself.
   To let the page finish loading,
   click line <b>37</b> to disable the breakpoint,
   and then press play/pause
-  <img src="images/play-button.gif" style="border:1px black solid" width="14" height="12" alt="">
+  <img src="images/play-button.gif" style="border:1px black solid; margin:0" width="14" height="12" alt="">
   to continue execution.
   </li>
 
@@ -518,7 +522,7 @@ to debug your extensions:
 <ul>
   <li>
     Find your extension's ID and links to its pages in
-    the <b>Installed Extensions</b> page
+    the <b>Extensions</b> page
     (<b>chrome://extensions</b>).
   </li>
   <li>