Move debugging stuff out of Getting Started into its own tutorial.

(Not done; needs intro text.)

Removed --enable-extensions from command line. (Strangely, it made
the doc more complicated, since your extension's users will need it.
For now.)

Made some minor formatting changes.

Added a page to point to all the tutorials.

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

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

5 files changed, 233 insertions, 133 deletions

diff --git a/chrome/common/extensions/docs/static/getstarted.html b/chrome/common/extensions/docs/static/getstarted.html
index f63037e1..fdf05a6 100755
--- a/chrome/common/extensions/docs/static/getstarted.html
+++ b/chrome/common/extensions/docs/static/getstarted.html
@@ -1,10 +1,10 @@
-<div id="pageData-title" class="pageData">Getting Started</div>
+<div id="pageData-title" class="pageData">Tutorial: Getting Started</div>
 <div id="pageData-showTOC" class="pageData">true</div>
 
 <p>
 This tutorial walks you through creating a simple extension.
-To complete this tutorial, you must have Windows;
-Linux and Mac don't yet support extensions.
+To complete this tutorial, you must have Windows.
+(Linux and Mac don't yet support extensions.)
 </p>
 
 <h2 id="browser">Get your browser ready</h2>
@@ -66,11 +66,11 @@ at the bottom of the Google Chrome window.
       <li>
       Change the shortcut that you use to start the browser
       (or create a new one)
-      so that it has the <code>--enable-extensions</code>
-      and <code>--load-extension</code> flags.
+      so that it has the 
+      <code>--load-extension</code> flag.
       For example, if your extension is at <code>c:\myext</code>,
       your shortcut might look something like this:
-<pre>chrome.exe <span class="newCode">--enable-extensions --load-extension="c:\myext"</span></pre>
+<pre>chrome.exe <span class="newCode">--load-extension="c:\myext"</span></pre>
       </li>
       <li>Exit Google Chrome.
       If you have a separate profile for testing,
@@ -79,9 +79,16 @@ at the bottom of the Google Chrome window.
     </ol>
     <p>
     <b>Note:</b>
+    To run already-packaged extensions
+    the browser must be started with the
+    <code>--enable-extensions</code> or <code>--load-extension</code> flag.
+    An exception:
+    themes run in the Dev channel version of Google Chrome,
+    no flags required.
     For details on changing shortcut properties, see
     <a href="http://dev.chromium.org/developers/creating-and-using-profiles">Creating
-    and Using Profiles</a>.</p>
+    and Using Profiles</a>.
+</p>
   </li>
 </ol>
 
@@ -89,20 +96,20 @@ at the bottom of the Google Chrome window.
 You should see the UI for your extension at the bottom left of the browser, looking something like this:
 </p>
 
-<table>
+<table class="imagelayout">
     <tbody>
-      <tr>
-        <td align="center" width="33%"><img src="images/hw-1.gif"
+      <tr class="images">
+        <td width="33%"><img src="images/hw-1.gif"
                                         alt="" /></td>
-        <td align="center" width="33%"><img src="images/hw-2.gif"
+        <td width="33%"><img src="images/hw-2.gif"
                                         alt="" /></td>
-        <td align="center" width="33%"><img src="images/hw-3.gif"
+        <td width="33%"><img src="images/hw-3.gif"
                                         alt="" /></td>
       </tr>
       <tr>
-        <th align="center" width="33%"> default appearance</th>
-        <th align="center" width="33%"> initial onhover appearance</th>
-        <th align="center" width="33%"> final onhover appearance</th>
+        <td width="33%"> default appearance</td>
+        <td width="33%"> initial onhover appearance</td>
+        <td width="33%"> final onhover appearance</td>
       </tr>
     </tbody>
 </table>
@@ -150,124 +157,6 @@ following them exactly.
 Don't try loading an HTML file that isn't in the extension's folder &mdash;
 it won't work! </p>
 
-<h2 id="debug">Debug the extension</h2>
-<p>
-You can use the browser's built-in developer tools
-to view your extension's code,
-display debugging output,
-and debug your extension.
-</p>
-<ol>
-  <li>
-    <p> Edit <code>my_toolstrip.html</code>, so that it has the following code: </p>
-<pre><span class="newCode">&lt;script&gt;
-function helloWorld() {
-  var hwFile = 'hello_world.html';
-  console.log(&quot;in helloWorld()&quot;);
-  window.open(hwFile);
-}
-&lt;/script&gt;</span>
-
-&lt;div class=&quot;toolstrip-button&quot; onclick=&quot;<span class="newCode">helloWorld();</span>&quot;&gt;
-&lt;span&gt;Hello, World!&lt;/span&gt;
-&lt;/div&gt;</pre>
-    <p> The relocated code still has the same effect,
-    but now it has some debugging output,
-    thanks to the call to <code>console.log()</code>.</p>
-  </li>
-  <li>
-  Restart the browser, so that it loads your new version of the extension.
-
-<!--
-This might be confusing.
-Maybe we should instead cover location.reload() later,
-after we've shown the console.
-  <div class="note">
-  <b>Tip:</b>
-  If you don't want to restart your browser,
-  you can get an updated version of the extension
-  by opening a new window.
-  The new window will contain the updated extension;
-  old windows will contain the old version.
-  </div>
--->
-  </li>
-  <li>
-  Right-click the <strong>Hello, World!</strong> button
-  (at the bottom left)
-  to bring up the Developer Tools window
-  for this instance of your toolstrip.
-  The window should look something like this:
-  <p>
-     <img src="images/devtools-1.gif" alt="" />  </p>
-<!--
-Possibly we should recommend starting the Dev Tools
-using chrome://extensions, rather than right-click.
-However, that adds some stuff (such as id)
-that might be confusing.
--->
-
-  </li>
-  <li>
-  Click the <strong>Scripts</strong> button.
-  If necessary, choose <strong>my_toolstrip.html</strong>
-  from the list of scripts.
-  The result should be something like this:
-  <p>
-  <img src="images/devtools-2.gif" alt="" />  </p>
-  </li>
-  <li>
-  Set a debugging breakpoint at the <code>window.open()</code> statement
-  by clicking <strong>5</strong> in the left column:
-  <p>
-  <img src="images/devtools-3.gif" alt="" />  </p>
-  </li>
-  <li>
-  Click the Console button
-  (second from left, at the bottom of the Developer Tools window)
-  so that you can see both the code and the console.
-  <p>
-  <img src="images/devtools-4.gif" alt="" /></p>
-  </li>
-  <li>
-  Back in the main browser window,
-  click the <strong>Hello, World!</strong> button,
-  so that the extension begins executing.
-  You should see the output of <code>console.log()</code>
-  along with the line number,
-  and execution should stop just before
-  the call to <code>window.open()</code>.
-  <p>
-  <img src="images/devtools-5.gif" alt="" />
-  </p>
-
-  <p>
-  The Call Stack area at the right of the tools window shows that
-  the <code>helloWorld()</code> method was called by an anonymous function
-  that was called by <code>onclick</code>.
-  Anywhere in the Call Stack or console that you see a file and line number
-  (for example, &quot;my_toolstrip.html:4&quot;),
-  you can click that text to see the relevant line of code.  </p>
-  </li>
-  <li>
-  In the upper right part of the tools window,
-  scroll down (if necessary) until you can see the local scope variables.
-  This section shows the current values of all variables in the current scope.
-  For example, you can see that <code>hwFile</code> is a local variable
-  that has the value &quot;hello_world.html&quot;.
-  <p>
-  <img src="images/devtools-6.gif" alt="" />  </p>
-  </li>
-  <li>
-  Click the buttons at the upper right of the window
-  to resume execution or to step through the code.
-  Once the call to <code>window.open()</code> returns,
-  the main browser window should open a new tab
-  that displays the contents of <code>hello_world.html</code>.</li>
-</ol>
-<p>
-You now know how to load and debug an extension!</p>
-
 <h2 id="summary">Summary</h2>
 
 <p>
diff --git a/chrome/common/extensions/docs/static/tut_debugging.html b/chrome/common/extensions/docs/static/tut_debugging.html
new file mode 100644
index 0000000..61e139f
--- /dev/null
+++ b/chrome/common/extensions/docs/static/tut_debugging.html
@@ -0,0 +1,133 @@
+<div id="pageData-title" class="pageData">Tutorial: Debugging</div>
+
+<p>
+[PENDING: intro goes here.
+This tutorial starts where
+<a href="getstarted.html">Getting Started</a> ends.
+Point to files needed.]
+</p>
+
+<p>
+You can use the browser's built-in developer tools
+to view your extension's code,
+display debugging output,
+and debug your extension.
+</p>
+<ol>
+  <li>
+    <p> Edit <code>my_toolstrip.html</code>, so that it has the following code: </p>
+<pre><span class="newCode">&lt;script&gt;
+function helloWorld() {
+  var hwFile = 'hello_world.html';
+  console.log(&quot;in helloWorld()&quot;);
+  window.open(hwFile);
+}
+&lt;/script&gt;</span>
+
+&lt;div class=&quot;toolstrip-button&quot; onclick=&quot;<span class="newCode">helloWorld();</span>&quot;&gt;
+&lt;span&gt;Hello, World!&lt;/span&gt;
+&lt;/div&gt;</pre>
+    <p> The relocated code still has the same effect,
+    but now it has some debugging output,
+    thanks to the call to <code>console.log()</code>.</p>
+  </li>
+  <li>
+  Restart the browser, so that it loads your new version of the extension.
+
+<!--
+This might be confusing.
+Maybe we should instead cover location.reload() later,
+after we've shown the console.
+  <div class="note">
+  <b>Tip:</b>
+  If you don't want to restart your browser,
+  you can get an updated version of the extension
+  by opening a new window.
+  The new window will contain the updated extension;
+  old windows will contain the old version.
+  </div>
+-->
+  </li>
+  <li>
+  Right-click the <strong>Hello, World!</strong> button
+  (at the bottom left)
+  to bring up the Developer Tools window
+  for this instance of your toolstrip.
+  The window should look something like this:
+  <p>
+     <img src="images/devtools-1.gif" alt="" />  </p>
+<!--
+Possibly we should recommend starting the Dev Tools
+using chrome://extensions, rather than right-click.
+However, that adds some stuff (such as id)
+that might be confusing.
+-->
+
+  </li>
+  <li>
+  Click the <strong>Scripts</strong> button.
+  If necessary, choose <strong>my_toolstrip.html</strong>
+  from the list of scripts.
+  The result should be something like this:
+  <p>
+  <img src="images/devtools-2.gif" alt="" />  </p>
+  </li>
+  <li>
+  Set a debugging breakpoint at the <code>window.open()</code> statement
+  by clicking <strong>5</strong> in the left column:
+  <p>
+  <img src="images/devtools-3.gif" alt="" />  </p>
+  </li>
+  <li>
+  Click the Console button
+  (second from left, at the bottom of the Developer Tools window)
+  so that you can see both the code and the console.
+  <p>
+  <img src="images/devtools-4.gif" alt="" /></p>
+  </li>
+  <li>
+  Back in the main browser window,
+  click the <strong>Hello, World!</strong> button,
+  so that the extension begins executing.
+  You should see the output of <code>console.log()</code>
+  along with the line number,
+  and execution should stop just before
+  the call to <code>window.open()</code>.
+  <p>
+  <img src="images/devtools-5.gif" alt="" />
+  </p>
+
+  <p>
+  The Call Stack area at the right of the tools window shows that
+  the <code>helloWorld()</code> method was called by an anonymous function
+  that was called by <code>onclick</code>.
+  Anywhere in the Call Stack or console that you see a file and line number
+  (for example, &quot;my_toolstrip.html:4&quot;),
+  you can click that text to see the relevant line of code.  </p>
+  </li>
+  <li>
+  In the upper right part of the tools window,
+  scroll down (if necessary) until you can see the local scope variables.
+  This section shows the current values of all variables in the current scope.
+  For example, you can see that <code>hwFile</code> is a local variable
+  that has the value &quot;hello_world.html&quot;.
+  <p>
+  <img src="images/devtools-6.gif" alt="" />  </p>
+  </li>
+  <li>
+  Click the buttons at the upper right of the window
+  to resume execution or to step through the code.
+  Once the call to <code>window.open()</code> returns,
+  the main browser window should open a new tab
+  that displays the contents of <code>hello_world.html</code>.</li>
+</ol>
+<p>
+You now know how to load and debug an extension!</p>
+
+<h2 id="summary">Summary</h2>
+
+<p>
+[PENDING: Summarize what we did,
+what it means,
+and where to find more information.
+Suggest where to go next.]</p>
diff --git a/chrome/common/extensions/docs/static/tutorials.html b/chrome/common/extensions/docs/static/tutorials.html
new file mode 100644
index 0000000..f5963b7
--- /dev/null
+++ b/chrome/common/extensions/docs/static/tutorials.html
@@ -0,0 +1,10 @@
+<div id="pageData-title" class="pageData">Tutorials</div>
+
+<p>
+Here's what we have, so far:
+</p>
+
+<ul>
+  <li> <a href="getstarted.html">Getting Started</a> </li>
+  <li> <a href="tut_debugging.html">Debugging</a> </li>
+</ul>
diff --git a/chrome/common/extensions/docs/tut_debugging.html b/chrome/common/extensions/docs/tut_debugging.html
new file mode 100644
index 0000000..ed40a76
--- /dev/null
+++ b/chrome/common/extensions/docs/tut_debugging.html
@@ -0,0 +1,34 @@
+<!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.
+    2) The <body> tag *must* retain id="body"
+    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.
+       
+    TODO(rafaelw): Abstract this into a "pageshell" that becomes the single
+    version of page template shell and the "instance" pages (bookmarks.html,
+    etc...) can be generated with a build step.
+-->
+<!-- <html> must retain id="template -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <!-- <head> data is significant and loads the needed libraries and styles -->
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title jscontent="pageTitle">pageTitle</title>
+    <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css">
+    <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>
+  </head>
+  <!-- <body> content is completely generated. Do not edit, as it will be
+      and rewritten. -->
+  <body>
+  </body>
+</html>
diff --git a/chrome/common/extensions/docs/tutorials.html b/chrome/common/extensions/docs/tutorials.html
new file mode 100644
index 0000000..ed40a76
--- /dev/null
+++ b/chrome/common/extensions/docs/tutorials.html
@@ -0,0 +1,34 @@
+<!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.
+    2) The <body> tag *must* retain id="body"
+    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.
+       
+    TODO(rafaelw): Abstract this into a "pageshell" that becomes the single
+    version of page template shell and the "instance" pages (bookmarks.html,
+    etc...) can be generated with a build step.
+-->
+<!-- <html> must retain id="template -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <!-- <head> data is significant and loads the needed libraries and styles -->
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title jscontent="pageTitle">pageTitle</title>
+    <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css">
+    <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>
+  </head>
+  <!-- <body> content is completely generated. Do not edit, as it will be
+      and rewritten. -->
+  <body>
+  </body>
+</html>