New screenshots for the extension UI overview.

chrome/common/extensions/docs/overview.html

 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc. Note:
     1) The <head> information in this page is significant, should be uniform
        across api docs and should be edited only with knowledge of the
        templating mechanism.
     3) All <body>.innerHTML is genereated as an rendering step. If viewed in a
        browser, it will be re-generated from the template, json schema and
        authored overview content.
     4) The <body>.innerHTML is also generated by an offline step so that this
        page may easily be indexed by search engines.
 --><html xmlns="http://www.w3.org/1999/xhtml"><head>
@@ skipping 390 matching lines @@
 or <a href="pageAction.html">page actions</a>.
 Each extension can have at most one browser action or page action.
 Choose a <b>browser action</b> when the extension is relevant to most pages.
 Choose a <b>page action</b> when the extension's icon
 should appear or disappear,
 depending on the page.
 </p>
 
 <table class="columns">
 <tbody><tr>
-  <td>
-    <img src="images/index/gmail.png" width="150" height="79" alt="screenshot">
+  <td width="33%">
+    <img src="images/overview/browser-action.png" width="147" height="100" alt="screenshot">
+  </td>
+  <td width="33%">
+    <img src="images/overview/page-action.png" width="147" height="100" alt="screenshot">
   </td>
   <td>
-    <img src="images/index/news.png" width="150" height="79" alt="screenshot">
-  </td>
-  <td>
-    <img src="images/index/rss.png" width="150" height="79" alt="screenshot">
+    <img src="images/overview/browser-action-with-popup.png" width="147" height="100" alt="screenshot">
   </td>
 </tr>
 
 <tr>
   <td>
     This <a href="samples.html#gmail">mail extension</a>
     uses a <em>browser action</em>
     (icon in the toolbar).
   </td>
   <td>
-    This <a href="samples.html#news">news reader extension</a>
-    features a browser action that,
-    when clicked,
-    shows a <em>popup</em>.
-  </td>
-  <td>
     This <a href="samples.html#mappy">map extension</a>
     uses a <em>page action</em>
     (icon in the address bar)
     and <em>content script</em>
     (code injected into a web page).
   </td>
+  <td>
+    This <a href="samples.html#news">news extension</a>
+    features a browser action that,
+    when clicked,
+    shows a <em>popup</em>.
+  </td>
 </tr>
 </tbody></table>
 
 <p>
 Extensions (and packaged apps) can also present a UI in other ways,
 such as adding to the Chrome context menu,
 providing an options page,
 or using a content script that changes how pages look.
 See the <a href="devguide.html">Developer's Guide</a>
 for a complete list of extension features,
 with links to implementation details
 for each one.
 </p>
 
 
 <h3 id="packagedapp-ui">Packaged app UIs</h3>
 
 <p>
 A packaged app usually presents its main functionality using
 an HTML page that's bundled into the app.
 For example, the following packaged app
 displays a Flash file within an HTML page.
 </p>
 
-<img src="images/index/flashapp.png" width="372" height="300" alt="screenshot">
+<img src="images/overview/flash-app.png" width="372" height="300" alt="screenshot">
 
 <p>
 For more information,
 see <a href="apps.html">Packaged Apps</a>.
 </p>
 
 <h2 id="files">Files</h2>
 <p>
 Each extension has the following files:
 <!-- PENDING: This could use a picture -->
@@ skipping 91 matching lines @@
 
 <h2 id="arch">Architecture</h2>
 
 <p>
 Most extensions have a
 <a href="background_pages.html">background page</a>,
 an invisible page
 that holds the main logic of the extension.
 </p>
 
-<img src="images/arch-1.gif" width="232" height="168" alt="Two windows and a box representing a background page (background.html). One window has a yellow icon; the other has both a yellow icon and a blue icon. The yellow icons are connected to the background page.">
+<img src="images/overview/arch-1.gif" width="232" height="168" alt="Two windows and a box representing a background page (background.html). One window has a yellow icon; the other has both a yellow icon and a blue icon. The yellow icons are connected to the background page.">
 
 <p>
 The preceding figure shows a browser
 that has at least two extensions installed:
 a browser action (yellow icon)
 and a page action (blue icon).
 The browser action's background page,
 which is defined by an HTML file
 (<code>background.html</code>),
 has JavaScript code that controls
@@ skipping 25 matching lines @@
 of a browser action's popup.
 The popup's contents are a web page
 defined by an HTML file
 (<code>popup.html</code>).
 The popup doesn't need to duplicate code
 that's in the background page
 (<code>background.html</code>)
 because the popup can invoke functions on the background page.
 </p>
 
-<img src="images/arch-2.gif" width="256" height="168" alt="A browser window containing a browser action that's displaying a popup. The popup's HTML file (popup.html) can communicate with the extension's background page (background.html).">
+<img src="images/overview/arch-2.gif" width="256" height="168" alt="A browser window containing a browser action that's displaying a popup. The popup's HTML file (popup.html) can communicate with the extension's background page (background.html).">
 
 <p>
 See the <a href="browserAction.html">Browser Actions</a> page and
 the <a href="#pageComm">Communication between pages</a> section
 for more details.
 </p>
 
 
 <h3 id="contentScripts">Content scripts</h3>
 
@@ skipping 20 matching lines @@
 <p>
 Content scripts can read details of the web pages the browser visits,
 and they can make changes to the pages.
 In the following figure,
 the content script
 can read and modify
 the DOM for the displayed web page.
 It cannot, however, modify the DOM of its parent extension's background page.
 </p>
 
-<img src="images/arch-3.gif" width="238" height="169" alt="A browser window with a browser action (controlled by background.html) and a content script (controlled by contentscript.js).">
+<img src="images/overview/arch-3.gif" width="238" height="169" alt="A browser window with a browser action (controlled by background.html) and a content script (controlled by contentscript.js).">
 
 <p>
 Content scripts aren't completely cut off from their parent extensions.
 A content script can exchange messages with its parent extension,
 as the arrows in the following figure show.
 For example, a content script might send a message
 whenever it finds an RSS feed in a browser page.
 Or a background page might send a message
 asking a content script to change the appearance of its browser page.
 </p>
 
-<img src="images/arch-cs.gif" width="238" height="194" alt="Like the previous figure, but showing more of the parent extension's files, as well as a communication path between the content script and the parent extension.">
+<img src="images/overview/arch-cs.gif" width="238" height="194" alt="Like the previous figure, but showing more of the parent extension's files, as well as a communication path between the content script and the parent extension.">
 
 <!-- [PENDING: Add overview of message passing.] -->
 
 <p>
 For more information,
 see <a href="content_scripts.html">Content Scripts</a>.
 </p>
 
 
 <h2 id="pageComm">Communication between pages </h2>
@@ skipping 281 matching lines @@
     _uff=0;
     urchinTracker();
   }
   catch(e) {/* urchinTracker not available. */}
 </script>
 <!-- end analytics -->
       </div>
     </div> <!-- /gc-footer -->
   </div> <!-- /gc-container -->
 </body></html>