Added summary page and static content for WebInspector modules.

BUG=56660
TEST=experimental.webInspector.html exists, other experimental.webInspector.* pages have static text that refers to it.
Review URL: http://codereview.chromium.org/6665040


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

12 files changed, 1004 insertions, 13 deletions

diff --git a/chrome/common/extensions/docs/experimental.webInspector.audits.html b/chrome/common/extensions/docs/experimental.webInspector.audits.html
index 2520d1c..ff20c3a 100644
--- a/chrome/common/extensions/docs/experimental.webInspector.audits.html
+++ b/chrome/common/extensions/docs/experimental.webInspector.audits.html
@@ -257,10 +257,10 @@
         <div id="toc">
           <h2>Contents</h2>
           <ol>
-            <li style="display: none; ">
-              <a>h2Name</a>
+            <li>
+              <a href="#H2-0">Notes</a>
               <ol>
-                <li>
+                <li style="display: none; ">
                   <a>h3Name</a>
                 </li>
               </ol>
@@ -320,7 +320,64 @@
         </p>
 
         <!-- STATIC CONTENT PLACEHOLDER -->
-        <div id="static"></div>
+        <div id="static"><!-- BEGIN AUTHORED CONTENT -->
+<p id="classSummary">
+Use the <code>experimental.webInspector.audits</code> module to add new audit
+categories and rules to WebInspector's Audit panel.
+</p><p>
+See <a href="experimental.webInspector.html">WebInspector API summary</a> for
+general introduction to using WebInspector API.
+</p>
+
+<a name="H2-0"></a><h2>Notes</h2>
+
+<p>
+Each audit category is represented by a line on <em>Select audits to run</em>
+screen in the Audits panel. The following example adds a category named
+<em>Readability</em>:</p>
+<pre>var category = webInspector.audits.addCategory("Readability", 2);
+</pre>
+<img src="images/devtools-audits-category.png" style="margin-left: 20px" width="489" height="342" alt="Extension audit category on the launch screen of Audits panel">
+<p>
+If the category's checkbox is checked, the <code>onAuditStarted</code> event of
+that category will be fired when user clicks the <em>Run</em> button.
+</p>
+<p>The event handler in your extension receives <code>AuditResults</code>
+as an argument and should add one or more results using <code>addResult()</code>
+method. This may be done asynchronously, i.e. after the handler returns. The
+run of the category is considered to be complete once the extension adds the
+number of results declared when adding the  category with
+<code>experimental.webInspector.audits.addCategory()</code> or
+calls AuditResult's <code>done()</code> method.
+</p>
+<p>The results may include additional details visualized as an expandable
+tree by the Audits panel. You may build the details tree using
+<code>createResult()</code> and <code>addChild()</code> methods. The child node
+may include specially formatted fragments created by
+<code>auditResults.snippet()</code> or <code>auditResults.url()</code>.
+</p>
+The following example adds a handler for onAuditStarted event that creates two
+audit results and populates one of them with the additional details:
+
+<pre>category.onAuditStarted.addListener(function(results) {
+  var details = results.createResult("Details...");
+  var styles = details.addChild("2 styles with small font");
+  var elements = details.addChild("3 elements with small font");
+
+  results.addResult("Font Size (5)",
+      "5 elements use font size below 10pt",
+      results.Severity.Severe,
+      details);
+  results.addResult("Contrast",
+                    "Text should stand out from background",
+                    results.Severity.Info);
+});
+</pre>
+<p>The audit result tree produced by the snippet above will look like this:
+</p>
+<img src="images/devtools-audits-results.png" style="margin-left: 20px" width="330" height="169" alt="Audit results example">
+<!-- END AUTHORED CONTENT -->
+</div>
 
         <!-- API PAGE -->
         <div class="apiPage">
diff --git a/chrome/common/extensions/docs/experimental.webInspector.html b/chrome/common/extensions/docs/experimental.webInspector.html
new file mode 100644
index 0000000..3d6eb67
--- /dev/null
+++ b/chrome/common/extensions/docs/experimental.webInspector.html
@@ -0,0 +1,585 @@
+<!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>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css">
+    <link href="css/print.css" rel="stylesheet" type="text/css" media="print">
+    <script type="text/javascript" src="../../../third_party/jstemplate/jstemplate_compiled.js">
+    </script>
+    <script type="text/javascript" src="js/api_page_generator.js"></script>
+    <script type="text/javascript" src="js/bootstrap.js"></script>
+    <script type="text/javascript" src="js/sidebar.js"></script>
+  <title>experimental.webInspector.* APIs - Google Chrome Extensions - Google Code</title></head>
+  <body>  <div id="gc-container" class="labs">
+      <div id="devModeWarning">
+        You are viewing extension docs in chrome via the 'file:' scheme: are you expecting to see local changes when you refresh? You'll need run chrome with --allow-file-access-from-files.
+      </div>
+      <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION -->
+      <!-- In particular, sub-templates that recurse, must be used by allowing
+           jstemplate to make a copy of the template in this section which
+           are not operated on by way of the jsskip="true" -->
+      <div style="display:none">
+
+        <!-- VALUE -->
+        <div id="valueTemplate">
+          <dt>
+            <var>paramName</var>
+              <em>
+
+                <!-- TYPE -->
+                <div style="display:inline">
+                  (
+                    <span class="optional">optional</span>
+                    <span class="enum">enumerated</span>
+                    <span id="typeTemplate">
+                      <span>
+                        <a> Type</a>
+                      </span>
+                      <span>
+                        <span>
+                          array of <span><span></span></span>
+                        </span>
+                        <span>paramType</span>
+                        <span></span>
+                      </span>
+                    </span>
+                  )
+                </div>
+
+              </em>
+          </dt>
+          <dd class="todo">
+            Undocumented.
+          </dd>
+          <dd>
+            Description of this parameter from the json schema.
+          </dd>
+          <dd>
+            This parameter was added in version
+            <b><span></span></b>.
+            You must omit this parameter in earlier versions,
+            and you may omit it in any version.  If you require this
+            parameter, the manifest key
+            <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a>
+            can ensure that your extension won't be run in an earlier browser version.
+          </dd>
+
+          <!-- OBJECT PROPERTIES -->
+          <dd>
+            <dl>
+              <div>
+                <div>
+                </div>
+              </div>
+            </dl>
+          </dd>
+
+          <!-- OBJECT METHODS -->
+          <dd>
+            <div></div>
+          </dd>
+
+          <!-- OBJECT EVENT FIELDS -->
+          <dd>
+            <div></div>
+          </dd>
+
+          <!-- FUNCTION PARAMETERS -->
+          <dd>
+            <div></div>
+          </dd>
+
+        </div> <!-- /VALUE -->
+
+        <div id="functionParametersTemplate">
+          <h5>Parameters</h5>
+          <dl>
+            <div>
+              <div>
+              </div>
+            </div>
+          </dl>
+        </div>
+      </div> <!-- /SUBTEMPLATES -->
+
+  <a id="top"></a>
+    <div id="skipto">
+      <a href="#gc-pagecontent">Skip to page content</a>
+      <a href="#gc-toc">Skip to main navigation</a>
+    </div>
+    <!-- API HEADER -->
+    <table id="header" width="100%" cellspacing="0" border="0">
+      <tbody><tr>
+        <td valign="middle"><a href="http://code.google.com/"><img src="images/code_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:0; margin:0;"></a></td>
+        <td valign="middle" width="100%" style="padding-left:0.6em;">
+          <form action="http://www.google.com/cse" id="cse" style="margin-top:0.5em">
+            <div id="gsc-search-box">
+              <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno">
+              <input type="hidden" name="ie" value="UTF-8">
+              <input type="text" name="q" value="" size="55">
+              <input class="gsc-search-button" type="submit" name="sa" value="Search">
+              <br>
+              <span class="greytext">e.g. "page action" or "tabs"</span>
+            </div>
+          </form>
+
+          <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+          <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
+          <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse&amp;t13n_langs=en"></script>
+          <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&amp;lang=en"></script>
+        </td>
+      </tr>
+    </tbody></table>
+
+    <div id="codesiteContent" class="">
+
+      <a id="gc-topnav-anchor"></a>
+      <div id="gc-topnav">
+        <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Labs</a>)</h1>
+        <ul id="home" class="gc-topnav-tabs">
+          <li id="home_link">
+            <a href="index.html" title="Google Chrome Extensions home page">Home</a>
+          </li>
+          <li id="docs_link">
+            <a href="docs.html" title="Official Google Chrome Extensions documentation">Docs</a>
+          </li>
+          <li id="faq_link">
+            <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions">FAQ</a>
+          </li>
+          <li id="samples_link">
+            <a href="samples.html" title="Sample extensions (with source code)">Samples</a>
+          </li>
+          <li id="group_link">
+            <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum">Group</a>
+          </li>
+        </ul>
+      </div> <!-- end gc-topnav -->
+
+    <div class="g-section g-tpl-170">
+      <!-- SIDENAV -->
+      <div class="g-unit g-first" id="gc-toc">
+        <ul>
+          <li><a href="getstarted.html">Getting Started</a></li>
+          <li><a href="overview.html">Overview</a></li>
+          <li><a href="whats_new.html">What's New?</a></li>
+          <li><h2><a href="devguide.html">Developer's Guide</a></h2>
+            <ul>
+              <li>Browser UI
+                <ul>
+                  <li><a href="browserAction.html">Browser Actions</a></li>
+                  <li><a href="contextMenus.html">Context Menus</a></li>
+                  <li><a href="notifications.html">Desktop Notifications</a></li>
+                  <li><a href="omnibox.html">Omnibox</a></li>
+                  <li><a href="options.html">Options Pages</a></li>
+                  <li><a href="override.html">Override Pages</a></li>
+                  <li><a href="pageAction.html">Page Actions</a></li>
+                </ul>
+              </li>
+              <li>Browser Interaction
+                <ul>
+                  <li><a href="bookmarks.html">Bookmarks</a></li>
+                  <li><a href="cookies.html">Cookies</a></li>
+                  <li><a href="events.html">Events</a></li>
+                  <li><a href="history.html">History</a></li>
+                  <li><a href="management.html">Management</a></li>
+                  <li><a href="tabs.html">Tabs</a></li>
+                  <li><a href="windows.html">Windows</a></li>
+                </ul>
+              </li>
+              <li>Implementation
+                <ul>
+                  <li><a href="a11y.html">Accessibility</a></li>
+                  <li><a href="background_pages.html">Background Pages</a></li>
+                  <li><a href="content_scripts.html">Content Scripts</a></li>
+                  <li><a href="xhr.html">Cross-Origin XHR</a></li>
+                  <li><a href="idle.html">Idle</a></li>
+                  <li><a href="i18n.html">Internationalization</a></li>
+                  <li><a href="messaging.html">Message Passing</a></li>
+                  <li><a href="npapi.html">NPAPI Plugins</a></li>
+                </ul>
+              </li>
+              <li>Finishing
+                <ul>
+                  <li><a href="hosting.html">Hosting</a></li>
+                  <li><a href="external_extensions.html">Other Deployment Options</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li><h2><a href="apps.html">Packaged Apps</a></h2></li>
+          <li><h2><a href="tutorials.html">Tutorials</a></h2>
+            <ul>
+              <li><a href="tut_debugging.html">Debugging</a></li>
+              <li><a href="tut_analytics.html">Google Analytics</a></li>
+              <li><a href="tut_oauth.html">OAuth</a></li>
+            </ul>
+          </li>
+          <li><h2>Reference</h2>
+            <ul>
+              <li>Formats
+                <ul>
+                  <li><a href="manifest.html">Manifest Files</a></li>
+                  <li><a href="match_patterns.html">Match Patterns</a></li>
+                </ul>
+              </li>
+              <li><a href="permission_warnings.html">Permission Warnings</a></li>
+              <li><a href="api_index.html">chrome.* APIs</a></li>
+              <li><a href="api_other.html">Other APIs</a></li>
+            </ul>
+          </li>
+          <li><h2><a href="samples.html">Samples</a></h2></li>
+          <div class="line"> </div>
+          <li><h2>More</h2>
+            <ul>
+              <li><a href="http://code.google.com/chrome/webstore/docs/index.html">Chrome Web Store</a></li>
+              <li><a href="http://code.google.com/chrome/apps/docs/developers_guide.html">Hosted Apps</a></li>
+              <li><a href="themes.html">Themes</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+      <script>
+        initToggles();
+      </script>
+
+    <div class="g-unit" id="gc-pagecontent">
+      <div id="pageTitle">
+        <h1 class="page_title">experimental.webInspector.* APIs</h1>
+      </div>
+        <!-- TABLE OF CONTENTS -->
+        <div id="toc" style="display: none; ">
+          <h2>Contents</h2>
+          <ol>
+            <li>
+              <a>h2Name</a>
+              <ol>
+                <li>
+                  <a>h3Name</a>
+                </li>
+              </ol>
+            </li>
+              <li>
+                <a href="#apiReference">API reference</a>
+                <ol>
+                  <li>
+                    <a href="#properties">Properties</a>
+                    <ol>
+                      <li>
+                        <a href="#property-anchor">propertyName</a>
+                      </li>
+                    </ol>
+                  </li>
+                  <li>
+                    <a>Methods</a>
+                    <ol>
+                      <li>
+                        <a href="#method-anchor">methodName</a>
+                      </li>
+                    </ol>
+                  </li>
+                  <li>
+                    <a>Events</a>
+                    <ol>
+                      <li>
+                        <a href="#event-anchor">eventName</a>
+                      </li>
+                    </ol>
+                  </li>
+                  <li>
+                    <a href="#types">Types</a>
+                    <ol>
+                      <li>
+                        <a href="#id-anchor">id</a>
+                      </li>
+                    </ol>
+                  </li>
+                </ol>
+              </li>
+          </ol>
+        </div>
+        <!-- /TABLE OF CONTENTS -->
+
+        <!-- Standard content lead-in for experimental API pages -->
+        <p id="classSummary" style="display: none; ">
+          For information on how to use experimental APIs, see the <a href="experimental.html">chrome.experimental.* APIs</a> page.
+        </p>
+
+        <!-- STATIC CONTENT PLACEHOLDER -->
+        <div id="static"><div id="pageData-name" class="pageData">experimental.webInspector.* APIs</div>
+
+<p>
+The following API modules provide support for extending
+Chrome Development Tools (aka WebInspector):
+</p>
+
+<a name="api-list"></a>
+<ul>
+  <li>
+  <a href="experimental.webInspector.audits.html">experimental.webInspector.audits</a></li><li>
+  <a href="experimental.webInspector.panels.html">experimental.webInspector.panels</a></li><li>
+  <a href="experimental.webInspector.resources.html">experimental.webInspector.resources</a></li>
+</ul>
+
+<p class="warning">
+<b>Caution:</b>
+Don't depend on these experimental APIs. They might disappear, and they
+<em>will</em> change.
+Also, the Chrome Developer Dashboard doesn't allow you to
+upload extensions that use experimental APIs.
+</p>
+
+<h2 id="using">How to use WebInspector APIs</h2>
+
+<ol>
+  <li>
+    WebInspector APIs are currently experimental, so please start with
+    <a href="experimental.html">the steps for using experimental extension
+    APIs</a>.
+  </li>
+  <li>
+    Specify the "devtools_page" field in your extension's manifest and make
+    sure you have "experimental" permission:
+<pre>{
+  "name": ...
+  "version": "1.0",
+  "minimum_chrome_version": "10.0",
+  <b>"devtools_page": "devtools.html"</b>,
+  "permissions": [ <b>"experimental"</b> ... ],
+  ...
+}
+</pre>
+  </li>
+  <li>
+    An instance of the devtools_page specified in your extension's manifest
+    will be created for every Developer Tools window opened. The page may add
+    other extension pages as panels and sidebars to the Developer Tools window
+    using <a href="experimental.webInspector.panels">experimental.webInspector.panels</a>
+    API.
+  </li>
+  <li>The APIs available to extension pages within the Developer Tools
+    window include all <a href="#api-list">experimental.webInspector modules
+    listed above</a> and <a href="extension.html">chrome.extension</a> API.
+    Other extension APIs are not available to the Developer Tools pages, but
+    you may invoke them by sending a request to the background page of your
+    extension, similarly to how it's done in the
+    <a href="overview.html#contentScripts">content scripts</a>.
+  </li><li>Please note that, unlike other Chrome Extension APIs, the WebInspector
+    APIs lack "chrome" prefix. This is because the APIs, as the WebInspector
+    itself, are a part of WebKit and may eventually appear in other browsers.
+  </li>
+  <li>
+    <a href="http://groups.google.com/group/google-chrome-developer-tools/topics">Give us feedback!</a>
+    Your comments and suggestions help us improve the APIs and decide which
+    ones should move from experimental to supported.
+  </li>
+</ol>
+
+<h2 id="other">More information</h2>
+
+<p>
+For information on the standard APIs that extensions can use, see
+<a href="api_index.html">chrome.* APIs</a> and
+<a href="api_other.html">Other APIs</a>.
+</p>
+</div>
+
+        <!-- API PAGE -->
+        <div class="apiPage" style="display: none; ">
+        <a name="apiReference"></a>
+        <h2>API reference: chrome.apiname </h2>
+
+          <!-- PROPERTIES -->
+          <div class="apiGroup">
+            <a name="properties"></a>
+            <h3 id="properties">Properties</h3>
+
+            <div>
+              <a></a>
+              <h4>getLastError</h4>
+              <div class="summary">
+                <!-- Note: intentionally longer 80 columns -->
+                <span>chrome.extension</span><span>lastError</span>
+              </div>
+              <div>
+              </div>
+            </div>
+
+          </div> <!-- /apiGroup -->
+
+          <!-- METHODS -->
+          <div id="methodsTemplate" class="apiGroup">
+            <a></a>
+            <h3>Methods</h3>
+
+            <!-- iterates over all functions -->
+            <div class="apiItem">
+              <a></a> <!-- method-anchor -->
+              <h4>method name</h4>
+
+              <div class="summary"><span>void</span>
+                  <!-- Note: intentionally longer 80 columns -->
+                  <span>chrome.module.methodName</span>(<span><span>, </span><span></span>
+                      <var><span></span></var></span>)</div>
+
+              <div class="description">
+                <p class="todo">Undocumented.</p>
+                <p>
+                  A description from the json schema def of the function goes here.
+                </p>
+
+                <!-- PARAMETERS -->
+                <h4>Parameters</h4>
+                <dl>
+                  <div>
+                    <div>
+                    </div>
+                  </div>
+                </dl>
+
+                <!-- RETURNS -->
+                <h4>Returns</h4>
+                <dl>
+                  <div>
+                    <div>
+                    </div>
+                  </div>
+                </dl>
+
+                <!-- CALLBACK -->
+                <div>
+                  <div>
+                  <h4>Callback function</h4>
+                  <p>
+                    The callback <em>parameter</em> should specify a function
+                    that looks like this:
+                  </p>
+                  <p>
+                    If you specify the <em>callback</em> parameter, it should
+                    specify a function that looks like this:
+                  </p>
+
+                  <!-- Note: intentionally longer 80 columns -->
+                  <pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>;</pre>
+                  <dl>
+                    <div>
+                      <div>
+                      </div>
+                    </div>
+                  </dl>
+                  </div>
+                </div>
+
+                <!-- MIN_VERSION -->
+                <p>
+                  This function was added in version <b><span></span></b>.
+                  If you require this function, the manifest key
+                  <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a>
+                  can ensure that your extension won't be run in an earlier browser version.
+                </p>
+              </div> <!-- /description -->
+
+            </div>  <!-- /apiItem -->
+
+          </div>  <!-- /apiGroup -->
+
+          <!-- EVENTS -->
+          <div id="eventsTemplate" class="apiGroup">
+            <a></a>
+            <h3>Events</h3>
+            <!-- iterates over all events -->
+            <div class="apiItem">
+              <a></a>
+              <h4>event name</h4>
+
+              <div class="summary">
+                <!-- Note: intentionally longer 80 columns -->
+                <span class="subdued">chrome.bookmarks</span><span>onEvent</span><span class="subdued">.addListener</span>(function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>);
+              </div>
+
+              <div class="description">
+                <p class="todo">Undocumented.</p>
+                <p>
+                  A description from the json schema def of the event goes here.
+                </p>
+
+                <!-- PARAMETERS -->
+                <div>
+                  <h4>Parameters</h4>
+                  <dl>
+                    <div>
+                      <div>
+                      </div>
+                    </div>
+                  </dl>
+                </div>
+              </div> <!-- /decription -->
+
+            </div> <!-- /apiItem -->
+
+          </div> <!-- /apiGroup -->
+
+          <!-- TYPES -->
+          <div class="apiGroup">
+            <a name="types"></a>
+            <h3 id="types">Types</h3>
+
+            <!-- iterates over all types -->
+            <div class="apiItem">
+              <a></a>
+              <h4>type name</h4>
+
+              <div>
+              </div>
+
+            </div> <!-- /apiItem -->
+
+          </div> <!-- /apiGroup -->
+
+        </div> <!-- /apiPage -->
+      </div> <!-- /gc-pagecontent -->
+    </div> <!-- /g-section -->
+  </div> <!-- /codesiteContent -->
+    <div id="gc-footer" --="">
+      <div class="text">
+  <p>
+  Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
+  the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
+  Attribution 3.0 License</a>, and code samples are licensed under the
+  <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
+  </p>
+  <p>
+  ©2011 Google
+  </p>
+
+<!-- begin analytics -->
+<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
+<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
+
+<script type="text/javascript">
+  // chrome doc tracking
+  try {
+    var engdocs = _gat._getTracker("YT-10763712-2");
+    engdocs._trackPageview();
+  } catch(err) {}
+
+  // code.google.com site-wide tracking
+  try {
+    _uacct="UA-18071-1";
+    _uanchor=1;
+    _uff=0;
+    urchinTracker();
+  }
+  catch(e) {/* urchinTracker not available. */}
+</script>
+<!-- end analytics -->
+      </div>
+    </div> <!-- /gc-footer -->
+  </div> <!-- /gc-container -->
+</body></html>
diff --git a/chrome/common/extensions/docs/experimental.webInspector.panels.html b/chrome/common/extensions/docs/experimental.webInspector.panels.html
index 29a1295..8ee8763 100644
--- a/chrome/common/extensions/docs/experimental.webInspector.panels.html
+++ b/chrome/common/extensions/docs/experimental.webInspector.panels.html
@@ -257,10 +257,17 @@
         <div id="toc">
           <h2>Contents</h2>
           <ol>
-            <li style="display: none; ">
-              <a>h2Name</a>
+            <li>
+              <a href="#H2-0">Notes</a>
               <ol>
-                <li>
+                <li style="display: none; ">
+                  <a>h3Name</a>
+                </li>
+              </ol>
+            </li><li>
+              <a href="#overview-examples">Examples</a>
+              <ol>
+                <li style="display: none; ">
                   <a>h3Name</a>
                 </li>
               </ol>
@@ -320,7 +327,52 @@
         </p>
 
         <!-- STATIC CONTENT PLACEHOLDER -->
-        <div id="static"></div>
+        <div id="static"><!-- BEGIN AUTHORED CONTENT -->
+<p id="classSummary">
+Use the <code>experimental.webInspector.panels</code> module to integrate your
+extension into Developer Tools window UI: create your own panels, access
+existing panels and add sidebars.
+</p><p>
+See <a href="experimental.webInspector.html">WebInspector API summary</a> for
+general introduction to using WebInspector API.
+</p>
+
+<a name="H2-0"></a><h2>Notes</h2>
+
+<p>
+Each extension panel and sidebar is displayed as a separate HTML page. All
+extension pages displayed in the Developer Tools window have access to all
+modules in <code>experimental.webInspector</code> API, as well as to
+<a href="extension.html">chrome.extension</a> API. Other extension APIs are not
+available to the pages within Developer Tools window, but you may invoke them
+by sending a request to the background page of your extension, similarly to how
+it's done in the <a href="overview.html#contentScripts">content scripts</a>.
+</p>
+
+<h2 id="overview-examples">Examples</h2>
+<p>The following code adds a panel contained in <code>Panel.html</code>,
+represented by <code>FontPicker.png</code> on the Developer Tools toolbar
+and labeled as <em>Font Picker</em>:</p>
+
+<pre>webInspector.panels.create("Font Picker", "FontPicker.png", "Panel.html");
+</pre>
+<p>The following code adds a sidebar pane contained in
+<code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements
+panel, then sets its height to <code>8ex</code>:
+</p><pre>webInspector.panels.elements.createSidebarPane("Font Properties", "Sidebar.html",
+    function(sidebar) {
+      sidebar.setHeight("8ex");
+    }
+}));
+</pre>
+<p>
+This screenshot demonstrates the effect the above examples would have on
+Developer Tools window:
+
+<img src="images/devtools-panels.png" style="margin-left: 20px" width="686" height="289" alt="Extension icon panel on DevTools toolbar">
+</p>
+<!-- END AUTHORED CONTENT -->
+</div>
 
         <!-- API PAGE -->
         <div class="apiPage">
diff --git a/chrome/common/extensions/docs/experimental.webInspector.resources.html b/chrome/common/extensions/docs/experimental.webInspector.resources.html
index 60036e2..50b031a 100644
--- a/chrome/common/extensions/docs/experimental.webInspector.resources.html
+++ b/chrome/common/extensions/docs/experimental.webInspector.resources.html
@@ -257,10 +257,17 @@
         <div id="toc">
           <h2>Contents</h2>
           <ol>
-            <li style="display: none; ">
-              <a>h2Name</a>
+            <li>
+              <a href="#H2-0">Notes</a>
               <ol>
-                <li>
+                <li style="display: none; ">
+                  <a>h3Name</a>
+                </li>
+              </ol>
+            </li><li>
+              <a href="#overview-examples">Examples</a>
+              <ol>
+                <li style="display: none; ">
                   <a>h3Name</a>
                 </li>
               </ol>
@@ -312,7 +319,49 @@
         </p>
 
         <!-- STATIC CONTENT PLACEHOLDER -->
-        <div id="static"></div>
+        <div id="static"><!-- BEGIN AUTHORED CONTENT -->
+<p id="classSummary">
+Use the <code>experimental.webInspector.resources</code> module to retrieve the
+information about network resources displayed by DevTools' Network panel.
+</p><p>
+See <a href="experimental.webInspector.html">WebInspector API summary</a> for
+general introduction to using WebInspector API.
+</p>
+
+<a name="H2-0"></a><h2>Notes</h2>
+
+<p>
+Network resource information is represented in HTTP Archive format
+(<em>HAR</em>). The description of HAR is outside of scope of this document,
+please refer to
+<a href="http://groups.google.com/group/http-archive-specification/web/har-1-2-spec">
+HAR v1.2 Specification</a>.
+</p><p>
+In terms of HAR, the <code>webInspector.resources.getHAR()</code> method
+returns entire <em>HAR log</em>, while
+<code>webInspector.resources.onFinish</code> event provides <em>HAR entry</em>
+as an argument to the event callback.
+</p>
+<p>Note that resource content is not provided as part of HAR for efficieny
+reasons. You may call resource's <code>getContent()</code> method to retrieve
+content.
+</p><p>Some resources may be missing in the array of entries returned by <code>
+getHAR()</code> in case WebInspector was opened after the page was loaded —
+reload the page to get all resources. In general, the list of resources returned
+by <code>getHAR()</code> should match that displayed by the Network panel.
+</p><h2 id="overview-examples">Examples</h2>
+
+<p>The following code logs URLs of all images larger than 40KB as they are
+loaded:</p>
+
+<pre>experimental.webInspector.resources.onFinished.addListener(function(resource) {
+  if (resource.response.bodySize &gt; 40*1024)
+    webInspector.log("Large image: " + resource.request.url);
+});
+</pre>
+
+<!-- END AUTHORED CONTENT -->
+</div>
 
         <!-- API PAGE -->
         <div class="apiPage">
diff --git a/chrome/common/extensions/docs/images/devtools-audits-category.png b/chrome/common/extensions/docs/images/devtools-audits-category.png
new file mode 100644
index 0000000..b05fc7d
--- /dev/null
+++ b/chrome/common/extensions/docs/images/devtools-audits-category.png
diff --git a/chrome/common/extensions/docs/images/devtools-audits-results.png b/chrome/common/extensions/docs/images/devtools-audits-results.png
new file mode 100644
index 0000000..9185055
--- /dev/null
+++ b/chrome/common/extensions/docs/images/devtools-audits-results.png
diff --git a/chrome/common/extensions/docs/images/devtools-panels.png b/chrome/common/extensions/docs/images/devtools-panels.png
new file mode 100644
index 0000000..93cbdfa
--- /dev/null
+++ b/chrome/common/extensions/docs/images/devtools-panels.png
diff --git a/chrome/common/extensions/docs/js/api_page_generator.js b/chrome/common/extensions/docs/js/api_page_generator.js
index c778d0d..b5afc6f 100644
--- a/chrome/common/extensions/docs/js/api_page_generator.js
+++ b/chrome/common/extensions/docs/js/api_page_generator.js
@@ -1,3 +1,7 @@
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
 /**
  * @fileoverview This file is the controller for generating extension
  * doc pages.
@@ -20,7 +24,7 @@ var SCHEMA = "../api/extension_api.json";
 var DEVTOOLS_SCHEMA = WEBKIT_PATH +
   "/Source/WebCore/inspector/front-end/ExtensionAPISchema.json";
 var USE_DEVTOOLS_SCHEMA =
-  /\.webInspector\.[^/]*\.html/.test(location.pathname);
+  /\.webInspector[^/]*\.html/.test(location.pathname);
 var API_MODULE_PREFIX = USE_DEVTOOLS_SCHEMA ? "" : "chrome.";
 var SAMPLES = "samples.json";
 var REQUEST_TIMEOUT = 2000;
@@ -343,6 +347,14 @@ function experimentalAPIs() {
   }).sort();
 }
 
+function webInspectorAPIs() {
+  return schema.filter(function(module) {
+    return !module.nodoc && module.namespace.indexOf("webInspector.") !== 0;
+  }).map(function(module) {
+    return module.namespace;
+  }).sort();
+}
+
 function getDataFromPageHTML(id) {
   var node = document.getElementById(id);
   if (!node)
diff --git a/chrome/common/extensions/docs/static/experimental.webInspector.audits.html b/chrome/common/extensions/docs/static/experimental.webInspector.audits.html
new file mode 100644
index 0000000..edd46f1f
--- /dev/null
+++ b/chrome/common/extensions/docs/static/experimental.webInspector.audits.html
@@ -0,0 +1,65 @@
+<!-- BEGIN AUTHORED CONTENT -->
+<p id="classSummary">
+Use the <code>experimental.webInspector.audits</code> module to add new audit
+categories and rules to WebInspector's Audit panel.
+</p><p>
+See <a href="experimental.webInspector.html">WebInspector API summary</a> for
+general introduction to using WebInspector API</a>.
+</p>
+
+<h2>Notes</h2>
+
+<p>
+Each audit category is represented by a line on <em>Select audits to run</em>
+screen in the Audits panel. The following example adds a category named
+<em>Readability</em>:</p>
+<pre>
+var category = webInspector.audits.addCategory("Readability", 2);
+</pre>
+<img src="images/devtools-audits-category.png"
+     style="margin-left: 20px"
+     width="489" height="342"
+     alt="Extension audit category on the launch screen of Audits panel" />
+<p>
+If the category's checkbox is checked, the <code>onAuditStarted</code> event of
+that category will be fired when user clicks the <em>Run</em> button.
+</p>
+<p>The event handler in your extension receives <code>AuditResults</code>
+as an argument and should add one or more results using <code>addResult()</code>
+method. This may be done asynchronously, i.e. after the handler returns. The
+run of the category is considered to be complete once the extension adds the
+number of results declared when adding the  category with
+<code>experimental.webInspector.audits.addCategory()</code> or
+calls AuditResult's <code>done()</code> method.
+</p>
+<p>The results may include additional details visualized as an expandable
+tree by the Audits panel. You may build the details tree using
+<code>createResult()</code> and <code>addChild()</code> methods. The child node
+may include specially formatted fragments created by
+<code>auditResults.snippet()</code> or <code>auditResults.url()</code>.
+</p>
+The following example adds a handler for onAuditStarted event that creates two
+audit results and populates one of them with the additional details:
+
+<pre>
+category.onAuditStarted.addListener(function(results) {
+  var details = results.createResult("Details...");
+  var styles = details.addChild("2 styles with small font");
+  var elements = details.addChild("3 elements with small font");
+
+  results.addResult("Font Size (5)",
+      "5 elements use font size below 10pt",
+      results.Severity.Severe,
+      details);
+  results.addResult("Contrast",
+                    "Text should stand out from background",
+                    results.Severity.Info);
+});
+</pre>
+<p>The audit result tree produced by the snippet above will look like this:
+</p>
+<img src="images/devtools-audits-results.png"
+     style="margin-left: 20px"
+     width="330" height="169"
+     alt="Audit results example" />
+<!-- END AUTHORED CONTENT -->
diff --git a/chrome/common/extensions/docs/static/experimental.webInspector.html b/chrome/common/extensions/docs/static/experimental.webInspector.html
new file mode 100644
index 0000000..cd34927
--- /dev/null
+++ b/chrome/common/extensions/docs/static/experimental.webInspector.html
@@ -0,0 +1,77 @@
+<div id="pageData-name" class="pageData">experimental.webInspector.* APIs</div>
+
+<p>
+The following API modules provide support for extending
+Chrome Development Tools (aka WebInspector):
+</p>
+
+<a name="api-list"></a>
+<ul>
+  <li jsselect="webInspectorAPIs();">
+  <a jsvalues=".href: $this + '.html'" jscontent="$this"></a></li>
+</ul>
+
+<p class="warning">
+<b>Caution:</b>
+Don't depend on these experimental APIs. They might disappear, and they
+<em>will</em> change.
+Also, the Chrome Developer Dashboard doesn't allow you to
+upload extensions that use experimental APIs.
+</p>
+
+<h2 id="using">How to use WebInspector APIs</h2>
+
+<ol>
+  <li>
+    WebInspector APIs are currently experimental, so please start with
+    <a href="experimental.html">the steps for using experimental extension
+    APIs</a>.
+  </li>
+  <li>
+    Specify the "devtools_page" field in your extension's manifest and make
+    sure you have "experimental" permission:
+<pre>
+{
+  "name": ...
+  "version": "1.0",
+  "minimum_chrome_version": "10.0",
+  <b>"devtools_page": "devtools.html"</b>,
+  "permissions": [ <b>"experimental"</b> ... ],
+  ...
+}
+</pre>
+  </li>
+  <li>
+    An instance of the devtools_page specified in your extension's manifest
+    will be created for every Developer Tools window opened. The page may add
+    other extension pages as panels and sidebars to the Developer Tools window
+    using <a href="experimental.webInspector.panels"
+    >experimental.webInspector.panels</a>
+    API.
+  </li>
+  <li>The APIs available to extension pages within the Developer Tools
+    window include all <a href="#api-list">experimental.webInspector modules
+    listed above</a> and <a href="extension.html">chrome.extension</a> API.
+    Other extension APIs are not available to the Developer Tools pages, but
+    you may invoke them by sending a request to the background page of your
+    extension, similarly to how it's done in the
+    <a href="overview.html#contentScripts">content scripts</a>.
+  <li>Please note that, unlike other Chrome Extension APIs, the WebInspector
+    APIs lack "chrome" prefix. This is because the APIs, as the WebInspector
+    itself, are a part of WebKit and may eventually appear in other browsers.
+  </li>
+  <li>
+    <a href="http://groups.google.com/group/google-chrome-developer-tools/topics"
+    >Give us feedback!</a>
+    Your comments and suggestions help us improve the APIs and decide which
+    ones should move from experimental to supported.
+  </li>
+</ol>
+
+<h2 id="other">More information</h2>
+
+<p>
+For information on the standard APIs that extensions can use, see
+<a href="api_index.html">chrome.* APIs</a> and
+<a href="api_other.html">Other APIs</a>.
+</p>
diff --git a/chrome/common/extensions/docs/static/experimental.webInspector.panels.html b/chrome/common/extensions/docs/static/experimental.webInspector.panels.html
new file mode 100644
index 0000000..9c719eb
--- /dev/null
+++ b/chrome/common/extensions/docs/static/experimental.webInspector.panels.html
@@ -0,0 +1,50 @@
+<!-- BEGIN AUTHORED CONTENT -->
+<p id="classSummary">
+Use the <code>experimental.webInspector.panels</code> module to integrate your
+extension into Developer Tools window UI: create your own panels, access
+existing panels and add sidebars.
+</p><p>
+See <a href="experimental.webInspector.html">WebInspector API summary</a> for
+general introduction to using WebInspector API</a>.
+</p>
+
+<h2>Notes</h2>
+
+<p>
+Each extension panel and sidebar is displayed as a separate HTML page. All
+extension pages displayed in the Developer Tools window have access to all
+modules in <code>experimental.webInspector</code> API, as well as to
+<a href="extension.html">chrome.extension</a> API. Other extension APIs are not
+available to the pages within Developer Tools window, but you may invoke them
+by sending a request to the background page of your extension, similarly to how
+it's done in the <a href="overview.html#contentScripts">content scripts</a>.
+</p>
+
+<h2 id="overview-examples">Examples</h2>
+<p>The following code adds a panel contained in <code>Panel.html</code>,
+represented by <code>FontPicker.png</code> on the Developer Tools toolbar
+and labeled as <em>Font Picker</em>:</p>
+
+<pre>
+webInspector.panels.create("Font Picker", "FontPicker.png", "Panel.html");
+</pre>
+<p>The following code adds a sidebar pane contained in
+<code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements
+panel, then sets its height to <code>8ex</code>:
+<pre>
+webInspector.panels.elements.createSidebarPane("Font Properties", "Sidebar.html",
+    function(sidebar) {
+      sidebar.setHeight("8ex");
+    }
+}));
+</pre>
+<p>
+This screenshot demonstrates the effect the above examples would have on
+Developer Tools window:
+
+<img src="images/devtools-panels.png"
+     style="margin-left: 20px"
+     width="686" height="289"
+     alt="Extension icon panel on DevTools toolbar" />
+</p>
+<!-- END AUTHORED CONTENT -->
diff --git a/chrome/common/extensions/docs/static/experimental.webInspector.resources.html b/chrome/common/extensions/docs/static/experimental.webInspector.resources.html
new file mode 100644
index 0000000..1d88718
--- /dev/null
+++ b/chrome/common/extensions/docs/static/experimental.webInspector.resources.html
@@ -0,0 +1,44 @@
+<!-- BEGIN AUTHORED CONTENT -->
+<p id="classSummary">
+Use the <code>experimental.webInspector.resources</code> module to retrieve the
+information about network resources displayed by DevTools' Network panel.
+</p><p>
+See <a href="experimental.webInspector.html">WebInspector API summary</a> for
+general introduction to using WebInspector API</a>.
+</p>
+
+<h2>Notes</h2>
+
+<p>
+Network resource information is represented in HTTP Archive format
+(<em>HAR</em>). The description of HAR is outside of scope of this document,
+please refer to
+<a href=
+"http://groups.google.com/group/http-archive-specification/web/har-1-2-spec">
+HAR v1.2 Specification</a>.
+</p><p>
+In terms of HAR, the <code>webInspector.resources.getHAR()</code> method
+returns entire <em>HAR log</em>, while
+<code>webInspector.resources.onFinish</code> event provides <em>HAR entry</em>
+as an argument to the event callback.
+</p>
+<p>Note that resource content is not provided as part of HAR for efficieny
+reasons. You may call resource's <code>getContent()</code> method to retrieve
+content.
+<p>Some resources may be missing in the array of entries returned by <code>
+getHAR()</code> in case WebInspector was opened after the page was loaded &mdash;
+reload the page to get all resources. In general, the list of resources returned
+by <code>getHAR()</code> should match that displayed by the Network panel.
+<h2 id="overview-examples">Examples</h2>
+
+<p>The following code logs URLs of all images larger than 40KB as they are
+loaded:</p>
+
+<pre>
+experimental.webInspector.resources.onFinished.addListener(function(resource) {
+  if (resource.response.bodySize > 40*1024)
+    webInspector.log("Large image: " + resource.request.url);
+});
+</pre>
+
+<!-- END AUTHORED CONTENT -->