Merge 32929 - Reduced the size of images in the debugging tutorial so they'll

load faster, and not take so much space visually.

TEST=none
BUG=none
TBR=aa

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

TBR=kathyw@google.com

git-svn-id: svn://svn.chromium.org/chrome/branches/249/src@34673 0039d316-1c4b-4281-b951-d872f2087c98

16 files changed, 34 insertions, 32 deletions

diff --git a/chrome/common/extensions/docs/images/console-button.gif b/chrome/common/extensions/docs/images/console-button.gif
index 7b12438..387b4e8 100644
--- a/chrome/common/extensions/docs/images/console-button.gif
+++ b/chrome/common/extensions/docs/images/console-button.gif
diff --git a/chrome/common/extensions/docs/images/debug-popup-tab.gif b/chrome/common/extensions/docs/images/debug-popup-tab.gif
new file mode 100644
index 0000000..9599743
--- /dev/null
+++ b/chrome/common/extensions/docs/images/debug-popup-tab.gif
diff --git a/chrome/common/extensions/docs/images/debug-popup-tab.png b/chrome/common/extensions/docs/images/debug-popup-tab.png
deleted file mode 100644
index a55d221..0000000
--- a/chrome/common/extensions/docs/images/debug-popup-tab.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/debug-popup.gif b/chrome/common/extensions/docs/images/debug-popup.gif
new file mode 100644
index 0000000..d73dd27
--- /dev/null
+++ b/chrome/common/extensions/docs/images/debug-popup.gif
diff --git a/chrome/common/extensions/docs/images/debug-popup.png b/chrome/common/extensions/docs/images/debug-popup.png
deleted file mode 100644
index 50d4eba..0000000
--- a/chrome/common/extensions/docs/images/debug-popup.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/devtools-1.gif b/chrome/common/extensions/docs/images/devtools-1.gif
new file mode 100644
index 0000000..012500a
--- /dev/null
+++ b/chrome/common/extensions/docs/images/devtools-1.gif
diff --git a/chrome/common/extensions/docs/images/devtools-1.png b/chrome/common/extensions/docs/images/devtools-1.png
deleted file mode 100755
index 8caf978..0000000
--- a/chrome/common/extensions/docs/images/devtools-1.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/devtools-2.gif b/chrome/common/extensions/docs/images/devtools-2.gif
new file mode 100644
index 0000000..ec85912
--- /dev/null
+++ b/chrome/common/extensions/docs/images/devtools-2.gif
diff --git a/chrome/common/extensions/docs/images/devtools-2.png b/chrome/common/extensions/docs/images/devtools-2.png
deleted file mode 100755
index 8901b691..0000000
--- a/chrome/common/extensions/docs/images/devtools-2.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/devtools-3.gif b/chrome/common/extensions/docs/images/devtools-3.gif
new file mode 100644
index 0000000..40deb03
--- /dev/null
+++ b/chrome/common/extensions/docs/images/devtools-3.gif
diff --git a/chrome/common/extensions/docs/images/devtools-3.png b/chrome/common/extensions/docs/images/devtools-3.png
deleted file mode 100755
index 1c22002..0000000
--- a/chrome/common/extensions/docs/images/devtools-3.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/devtools-localvars.gif b/chrome/common/extensions/docs/images/devtools-localvars.gif
new file mode 100644
index 0000000..2640c7d
--- /dev/null
+++ b/chrome/common/extensions/docs/images/devtools-localvars.gif
diff --git a/chrome/common/extensions/docs/images/devtools-localvars.png b/chrome/common/extensions/docs/images/devtools-localvars.png
deleted file mode 100644
index 81e9215..0000000
--- a/chrome/common/extensions/docs/images/devtools-localvars.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/play-button.gif b/chrome/common/extensions/docs/images/play-button.gif
index c25d9e8..9039660 100644
--- a/chrome/common/extensions/docs/images/play-button.gif
+++ b/chrome/common/extensions/docs/images/play-button.gif
diff --git a/chrome/common/extensions/docs/static/tut_debugging.html b/chrome/common/extensions/docs/static/tut_debugging.html
index 628e4f3..c7a3c5a 100644
--- a/chrome/common/extensions/docs/static/tut_debugging.html
+++ b/chrome/common/extensions/docs/static/tut_debugging.html
@@ -73,8 +73,8 @@ in the Extensions page.
   under a new "Inspect active views:" heading.
 
   <p>
-  <img src="images/debug-popup.png"
-       width="726" height="547" alt="" />
+  <img src="images/debug-popup.gif"
+       width="500" height="377" alt="" />
 
   </li>
 </ol>
@@ -121,8 +121,8 @@ This feature is especially handy for debugging popups.
   </p>
 
   <p>
-  <img src="images/debug-popup-tab.png"
-       width="726" height="356" alt="" />
+  <img src="images/debug-popup-tab.gif"
+       width="500" height="245" alt="" />
   </p>
 
   <li>
@@ -139,8 +139,8 @@ This feature is especially handy for debugging popups.
   displaying the code for <b>popup.html</b>.
 
   <p>
-     <img src="images/devtools-1.png" alt=""
-          width="669" height="394" />
+     <img src="images/devtools-1.gif" alt=""
+          width="500" height="294" />
      </p>
   </li>
   <li>
@@ -151,9 +151,10 @@ This feature is especially handy for debugging popups.
   <li>
   Click the console button
   <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)
+       style="margin:0; padding:0" align="absmiddle"
+       width="26" height="22" alt="" />(second
+  from left,
+  at the bottom of the Developer Tools window)
   so that you can see both the code and the console.
   </li>
 </ol>
@@ -173,8 +174,8 @@ as it adds images to itself.
   and clicking the number of the line where it occurs
   (for example, <strong>37</strong>):
   <p>
-  <img src="images/devtools-2.png" alt=""
-       width="669" height="394" />
+  <img src="images/devtools-2.gif" alt=""
+       width="500" height="294" />
   </p>
   </li>
 
@@ -209,7 +210,7 @@ as it adds images to itself.
   each one representing a photo.)
 
   <p>
-  <img src="images/devtools-localvars.png" alt=""
+  <img src="images/devtools-localvars.gif" alt=""
        width="225" height="215" />
   </p>
   </li>
@@ -217,9 +218,9 @@ as it adds images to itself.
   <li>
   Click the play/pause button
   <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)
+       style="margin:0; padding:0" align="absmiddle"
+       width="22" height="20" 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,
   the value of <code>i</code> increments and
@@ -229,8 +230,8 @@ as it adds images to itself.
   </li>
 
   <p>
-  <img src="images/devtools-3.png"
-       width="726" height="356"
+  <img src="images/devtools-3.gif"
+       width="500" height="245"
        alt="the popup page with 10 images" />
   </p>
 
@@ -241,9 +242,9 @@ 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; margin:0"
-       width="14" height="12" alt="" />
-  to continue execution.
+       style="margin:0; padding:0" align="absmiddle"
+       width="22" height="20" alt="" />to
+  continue execution.
   </li>
 
 </ol>
diff --git a/chrome/common/extensions/docs/tut_debugging.html b/chrome/common/extensions/docs/tut_debugging.html
index 0fae77d..3d82cdf 100644
--- a/chrome/common/extensions/docs/tut_debugging.html
+++ b/chrome/common/extensions/docs/tut_debugging.html
@@ -344,7 +344,7 @@ in the Extensions page.
   under a new "Inspect active views:" heading.
 
   <p>
-  <img src="images/debug-popup.png" width="726" height="547" alt="">
+  <img src="images/debug-popup.gif" width="500" height="377" alt="">
 
   </p></li>
 </ol>
@@ -391,7 +391,7 @@ This feature is especially handy for debugging popups.
   </p>
 
   <p>
-  <img src="images/debug-popup-tab.png" width="726" height="356" alt="">
+  <img src="images/debug-popup-tab.gif" width="500" height="245" alt="">
   </p>
 
   </li><li>
@@ -408,7 +408,7 @@ This feature is especially handy for debugging popups.
   displaying the code for <b>popup.html</b>.
 
   <p>
-     <img src="images/devtools-1.png" alt="" width="669" height="394">
+     <img src="images/devtools-1.gif" alt="" width="500" height="294">
      </p>
   </li>
   <li>
@@ -418,8 +418,9 @@ 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; margin:0" width="18" height="14" alt="">
-  (second from left, at the bottom of the Developer Tools window)
+  <img src="images/console-button.gif" style="margin:0; padding:0" align="absmiddle" width="26" height="22" alt="">(second
+  from left,
+  at the bottom of the Developer Tools window)
   so that you can see both the code and the console.
   </li>
 </ol>
@@ -439,7 +440,7 @@ as it adds images to itself.
   and clicking the number of the line where it occurs
   (for example, <strong>37</strong>):
   <p>
-  <img src="images/devtools-2.png" alt="" width="669" height="394">
+  <img src="images/devtools-2.gif" alt="" width="500" height="294">
   </p>
   </li>
 
@@ -473,14 +474,14 @@ as it adds images to itself.
   each one representing a photo.)
 
   <p>
-  <img src="images/devtools-localvars.png" alt="" width="225" height="215">
+  <img src="images/devtools-localvars.gif" alt="" width="225" height="215">
   </p>
   </li>
 
   <li>
   Click the play/pause button
-  <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)
+  <img src="images/play-button.gif" style="margin:0; padding:0" align="absmiddle" width="22" height="20" 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,
   the value of <code>i</code> increments and
@@ -490,7 +491,7 @@ as it adds images to itself.
   </li>
 
   <p>
-  <img src="images/devtools-3.png" width="726" height="356" alt="the popup page with 10 images">
+  <img src="images/devtools-3.gif" width="500" height="245" alt="the popup page with 10 images">
   </p>
 
   <li>
@@ -499,8 +500,8 @@ 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; margin:0" width="14" height="12" alt="">
-  to continue execution.
+  <img src="images/play-button.gif" style="margin:0; padding:0" align="absmiddle" width="22" height="20" alt="">to
+  continue execution.
   </li>
 
 </ol>