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

1 files changed, 56 insertions, 4 deletions

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">