Adding and cleaning up screenshots

TBR=aa
TEST=none
BUG=27425

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

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

25 files changed, 32 insertions, 84 deletions

diff --git a/chrome/common/extensions/docs/bookmarks.html b/chrome/common/extensions/docs/bookmarks.html
index 28d8928a..fd7fd67 100644
--- a/chrome/common/extensions/docs/bookmarks.html
+++ b/chrome/common/extensions/docs/bookmarks.html
@@ -293,6 +293,8 @@ Use the <code>chrome.bookmarks</code> module to create, organize,
 and otherwise manipulate bookmarks.
 </p>
 
+<img src="images/bookmarks.png" width="210" height="147" alt="Clicking the star adds a bookmark">
+
 <h2 id="manifest">Manifest</h2>
 <p>You must declare the "bookmarks" permission
 in the <a href="manifest.html">extension manifest</a>
@@ -331,47 +333,6 @@ See <a href="#type-BookmarkTreeNode"><code>BookmarkTreeNode</code></a>
 for information about the properties a node can have.
 </p>
 
-<!-- [PENDING: Update and introduce the following image or delete the file.]
-
-<img
-  alt="2 kinds of bookmark objects"
-  width="415"
-  height="123"
-  src="images/bookmarks.png" />
--->
-
-<!-- [PENDING: The following section needs to be updated or deleted.]
-<p>
-Say you have bookmark hierarchy that looks like this:</p>
-
-<ul>
-  <li>Bookmarks</li>
-  <ul>
-    <li>Google</li>
-    <ul>
-      <li>Apps</li>
-      <ul>
-        <li>...</li>
-        <li>...</li>
-        <li>...</li>
-      </ul>
-    <li>Google homepage</li>
-    </ul>
-    <li>Example</li>
-  </ul>
-</ul>
-
-<p>
-Here's how those bookmarks might be represented with bookmark objects:</p>
-
-<img
-  alt="a hierarchy of bookmarks"
-  width="522"
-  height="594"
-  src="images/bookmarks-hierarchy.png">
-
--->
-
 
 <h2 id="overview-examples">Examples</h2>
 
diff --git a/chrome/common/extensions/docs/images/bookmarks-hierarchy.png b/chrome/common/extensions/docs/images/bookmarks-hierarchy.png
deleted file mode 100644
index a3902ae..0000000
--- a/chrome/common/extensions/docs/images/bookmarks-hierarchy.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/bookmarks.png b/chrome/common/extensions/docs/images/bookmarks.png
index a4d2ca2..1186d3c 100644
--- a/chrome/common/extensions/docs/images/bookmarks.png
+++ b/chrome/common/extensions/docs/images/bookmarks.png
diff --git a/chrome/common/extensions/docs/images/intermediate/bookmarks.png b/chrome/common/extensions/docs/images/intermediate/bookmarks.png
new file mode 100755
index 0000000..142fa08
--- /dev/null
+++ b/chrome/common/extensions/docs/images/intermediate/bookmarks.png
diff --git a/chrome/common/extensions/docs/images/intermediate/tabs.png b/chrome/common/extensions/docs/images/intermediate/tabs.png
new file mode 100755
index 0000000..ab506e6
--- /dev/null
+++ b/chrome/common/extensions/docs/images/intermediate/tabs.png
diff --git a/chrome/common/extensions/docs/images/intermediate/themes-1.jpg b/chrome/common/extensions/docs/images/intermediate/themes-1.jpg
new file mode 100755
index 0000000..b0acce3
--- /dev/null
+++ b/chrome/common/extensions/docs/images/intermediate/themes-1.jpg
diff --git a/chrome/common/extensions/docs/images/intermediate/themes-2.jpg b/chrome/common/extensions/docs/images/intermediate/themes-2.jpg
new file mode 100755
index 0000000..baefdc3
--- /dev/null
+++ b/chrome/common/extensions/docs/images/intermediate/themes-2.jpg
diff --git a/chrome/common/extensions/docs/images/intermediate/themes-3.jpg b/chrome/common/extensions/docs/images/intermediate/themes-3.jpg
new file mode 100755
index 0000000..dc1b826
--- /dev/null
+++ b/chrome/common/extensions/docs/images/intermediate/themes-3.jpg
diff --git a/chrome/common/extensions/docs/images/intermediate/windows.png b/chrome/common/extensions/docs/images/intermediate/windows.png
new file mode 100755
index 0000000..a0279a9
--- /dev/null
+++ b/chrome/common/extensions/docs/images/intermediate/windows.png
diff --git a/chrome/common/extensions/docs/images/news.gif b/chrome/common/extensions/docs/images/news.gif
new file mode 100755
index 0000000..55b2a63
--- /dev/null
+++ b/chrome/common/extensions/docs/images/news.gif
diff --git a/chrome/common/extensions/docs/images/news.png b/chrome/common/extensions/docs/images/news.png
deleted file mode 100755
index 624e07b..0000000
--- a/chrome/common/extensions/docs/images/news.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/tabs.png b/chrome/common/extensions/docs/images/tabs.png
new file mode 100755
index 0000000..781ae26
--- /dev/null
+++ b/chrome/common/extensions/docs/images/tabs.png
diff --git a/chrome/common/extensions/docs/images/themes-1.gif b/chrome/common/extensions/docs/images/themes-1.gif
new file mode 100755
index 0000000..fb4bff8
--- /dev/null
+++ b/chrome/common/extensions/docs/images/themes-1.gif
diff --git a/chrome/common/extensions/docs/images/themes-2.gif b/chrome/common/extensions/docs/images/themes-2.gif
new file mode 100755
index 0000000..17f35ae
--- /dev/null
+++ b/chrome/common/extensions/docs/images/themes-2.gif
diff --git a/chrome/common/extensions/docs/images/themes-3.gif b/chrome/common/extensions/docs/images/themes-3.gif
new file mode 100755
index 0000000..ed55160
--- /dev/null
+++ b/chrome/common/extensions/docs/images/themes-3.gif
diff --git a/chrome/common/extensions/docs/images/windows.png b/chrome/common/extensions/docs/images/windows.png
new file mode 100755
index 0000000..c54b182
--- /dev/null
+++ b/chrome/common/extensions/docs/images/windows.png
diff --git a/chrome/common/extensions/docs/samples.html b/chrome/common/extensions/docs/samples.html
index 73e537a..a59ea40 100644
--- a/chrome/common/extensions/docs/samples.html
+++ b/chrome/common/extensions/docs/samples.html
@@ -342,7 +342,7 @@ For more example code, see the
 
 <p>Displays the first 5 items from the 'Google News - top news' RSS feed in a popup. Also shows how a popup can dynamically resize itself to fit additional content.
 
-</p><p><a href="https://clients2.google.com/service/update2/crx?response=redirect&amp;x=id%3Dmmdhomleggalggemanamhjdhafaabfdi%26uc%26lang%3Den-US"><img src="images/news.png" style="margin-bottom:0.5em" width="475" height="346"></a><br>
+</p><p><a href="https://clients2.google.com/service/update2/crx?response=redirect&amp;x=id%3Dmmdhomleggalggemanamhjdhafaabfdi%26uc%26lang%3Den-US"><img src="images/news.gif" style="margin-bottom:0.5em" width="475" height="346"></a><br>
 
 <b><a href="https://clients2.google.com/service/update2/crx?response=redirect&amp;x=id%3Dmmdhomleggalggemanamhjdhafaabfdi%26uc%26lang%3Den-US">Install</a>&nbsp;&nbsp;
 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news/">Source code</a></b>
diff --git a/chrome/common/extensions/docs/static/bookmarks.html b/chrome/common/extensions/docs/static/bookmarks.html
index 0fa962c..8bc9e3c 100644
--- a/chrome/common/extensions/docs/static/bookmarks.html
+++ b/chrome/common/extensions/docs/static/bookmarks.html
@@ -6,6 +6,9 @@ Use the <code>chrome.bookmarks</code> module to create, organize,
 and otherwise manipulate bookmarks.
 </p>
 
+<img src="images/bookmarks.png"
+     width="210" height="147" alt="Clicking the star adds a bookmark" />
+
 <h2 id="manifest">Manifest</h2>
 <p>You must declare the "bookmarks" permission
 in the <a href="manifest.html">extension manifest</a>
@@ -44,47 +47,6 @@ See <a href="#type-BookmarkTreeNode"><code>BookmarkTreeNode</code></a>
 for information about the properties a node can have.
 </p>
 
-<!-- [PENDING: Update and introduce the following image or delete the file.]
-
-<img
-  alt="2 kinds of bookmark objects"
-  width="415"
-  height="123"
-  src="images/bookmarks.png" />
--->
-
-<!-- [PENDING: The following section needs to be updated or deleted.]
-<p>
-Say you have bookmark hierarchy that looks like this:</p>
-
-<ul>
-  <li>Bookmarks</li>
-  <ul>
-    <li>Google</li>
-    <ul>
-      <li>Apps</li>
-      <ul>
-        <li>...</li>
-        <li>...</li>
-        <li>...</li>
-      </ul>
-    <li>Google homepage</li>
-    </ul>
-    <li>Example</li>
-  </ul>
-</ul>
-
-<p>
-Here's how those bookmarks might be represented with bookmark objects:</p>
-
-<img
-  alt="a hierarchy of bookmarks"
-  width="522"
-  height="594"
-  src="images/bookmarks-hierarchy.png">
-
--->
-
 
 <h2 id="overview-examples">Examples</h2>
 
diff --git a/chrome/common/extensions/docs/static/samples.html b/chrome/common/extensions/docs/static/samples.html
index eab6cd0..4e73929 100644
--- a/chrome/common/extensions/docs/static/samples.html
+++ b/chrome/common/extensions/docs/static/samples.html
@@ -72,7 +72,7 @@ For more example code, see the
 
 <p>Displays the first 5 items from the 'Google News - top news' RSS feed in a popup. Also shows how a popup can dynamically resize itself to fit additional content.
 
-<p><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dmmdhomleggalggemanamhjdhafaabfdi%26uc%26lang%3Den-US"><img src="images/news.png" style="margin-bottom:0.5em" width="475" height="346"></a><br>
+<p><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dmmdhomleggalggemanamhjdhafaabfdi%26uc%26lang%3Den-US"><img src="images/news.gif" style="margin-bottom:0.5em" width="475" height="346"></a><br>
 
 <b><a href="https://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dmmdhomleggalggemanamhjdhafaabfdi%26uc%26lang%3Den-US">Install</a>&nbsp;&nbsp;
 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news/">Source code</a></b>
diff --git a/chrome/common/extensions/docs/static/tabs.html b/chrome/common/extensions/docs/static/tabs.html
index 3b9f896..ec475b2 100644
--- a/chrome/common/extensions/docs/static/tabs.html
+++ b/chrome/common/extensions/docs/static/tabs.html
@@ -8,6 +8,9 @@ You can use this module to
 create, modify, and rearrange tabs in the browser.
 </p>
 
+<img src="images/tabs.png"
+     width="323" height="50" alt="Two tabs in a window" />
+
 <h2 id="manifest">Manifest</h2>
 <p>You must declare the "tabs" permission in your extension's manifest to use the tabs API.
 For example:
diff --git a/chrome/common/extensions/docs/static/themes.html b/chrome/common/extensions/docs/static/themes.html
index de6c74c..44147a3 100644
--- a/chrome/common/extensions/docs/static/themes.html
+++ b/chrome/common/extensions/docs/static/themes.html
@@ -12,6 +12,15 @@ You can find and try a bunch of themes at the
 <a href="https://tools.google.com/chrome/intl/en/themes/">themes gallery</a>.
 </p>
 
+<img src="images/themes-1.gif"
+     width="100" height="80" alt="grassy theme" />
+
+<img src="images/themes-2.gif"
+     width="100" height="80" alt="dark theme" />
+
+<img src="images/themes-3.gif"
+     width="100" height="80" alt="foggy theme" />
+
 <h2> Manifest </h2>
 <p>
 Here is an example
diff --git a/chrome/common/extensions/docs/static/windows.html b/chrome/common/extensions/docs/static/windows.html
index e527cd9..912f89c 100644
--- a/chrome/common/extensions/docs/static/windows.html
+++ b/chrome/common/extensions/docs/static/windows.html
@@ -8,6 +8,9 @@ You can use this module to
 create, modify, and rearrange windows in the browser.
 </p>
 
+<img src="images/windows.png"
+     width="256" height="76" alt="Two windows, each with one tab" />
+
 <h2 id="manifest">Manifest</h2>
 <p>
 To use the windows API,
diff --git a/chrome/common/extensions/docs/tabs.html b/chrome/common/extensions/docs/tabs.html
index 2eb78ab..a53bd45 100644
--- a/chrome/common/extensions/docs/tabs.html
+++ b/chrome/common/extensions/docs/tabs.html
@@ -293,6 +293,8 @@ You can use this module to
 create, modify, and rearrange tabs in the browser.
 </p>
 
+<img src="images/tabs.png" width="323" height="50" alt="Two tabs in a window">
+
 <h2 id="manifest">Manifest</h2>
 <p>You must declare the "tabs" permission in your extension's manifest to use the tabs API.
 For example:
diff --git a/chrome/common/extensions/docs/themes.html b/chrome/common/extensions/docs/themes.html
index 3ae62dd..7e20615 100644
--- a/chrome/common/extensions/docs/themes.html
+++ b/chrome/common/extensions/docs/themes.html
@@ -267,6 +267,12 @@ You can find and try a bunch of themes at the
 <a href="https://tools.google.com/chrome/intl/en/themes/">themes gallery</a>.
 </p>
 
+<img src="images/themes-1.gif" width="100" height="80" alt="grassy theme">
+
+<img src="images/themes-2.gif" width="100" height="80" alt="dark theme">
+
+<img src="images/themes-3.gif" width="100" height="80" alt="foggy theme">
+
 <a name="H2-0"></a><h2> Manifest </h2>
 <p>
 Here is an example
diff --git a/chrome/common/extensions/docs/windows.html b/chrome/common/extensions/docs/windows.html
index e015aa5..0c9900d 100644
--- a/chrome/common/extensions/docs/windows.html
+++ b/chrome/common/extensions/docs/windows.html
@@ -280,6 +280,8 @@ You can use this module to
 create, modify, and rearrange windows in the browser.
 </p>
 
+<img src="images/windows.png" width="256" height="76" alt="Two windows, each with one tab">
+
 <h2 id="manifest">Manifest</h2>
 <p>
 To use the windows API,