Update packaging and getting started pages to feature new Extensions page

buttons (rather than the command line).

TBR=aa,rafaelw

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

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

8 files changed, 116 insertions, 78 deletions

diff --git a/chrome/common/extensions/docs/images/create-package.png b/chrome/common/extensions/docs/images/create-package.png
deleted file mode 100755
index 2079a6f..0000000
--- a/chrome/common/extensions/docs/images/create-package.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/load_after-small.gif b/chrome/common/extensions/docs/images/load_after-small.gif
new file mode 100755
index 0000000..b51ada5
--- /dev/null
+++ b/chrome/common/extensions/docs/images/load_after-small.gif
diff --git a/chrome/common/extensions/docs/images/load_after.gif b/chrome/common/extensions/docs/images/load_after.gif
new file mode 100755
index 0000000..36508bd
--- /dev/null
+++ b/chrome/common/extensions/docs/images/load_after.gif
diff --git a/chrome/common/extensions/docs/images/package-success.gif b/chrome/common/extensions/docs/images/package-success.gif
new file mode 100755
index 0000000..175a049
--- /dev/null
+++ b/chrome/common/extensions/docs/images/package-success.gif
diff --git a/chrome/common/extensions/docs/images/package-success.png b/chrome/common/extensions/docs/images/package-success.png
deleted file mode 100755
index 17f671e..0000000
--- a/chrome/common/extensions/docs/images/package-success.png
+++ /dev/null
diff --git a/chrome/common/extensions/docs/images/update-success.gif b/chrome/common/extensions/docs/images/update-success.gif
new file mode 100755
index 0000000..66e3e8b
--- /dev/null
+++ b/chrome/common/extensions/docs/images/update-success.gif
diff --git a/chrome/common/extensions/docs/static/getstarted.html b/chrome/common/extensions/docs/static/getstarted.html
index e733c67..4db3b2e 100755
--- a/chrome/common/extensions/docs/static/getstarted.html
+++ b/chrome/common/extensions/docs/static/getstarted.html
@@ -61,39 +61,47 @@ at the bottom of the Google Chrome window.
   <span>Hello, World!</span>
 &lt;/div&gt;</pre>
   </li>
-  <li> Load the extension:
+  <li> Load the extension.
     <ol type="a">
       <li>
-      Change the shortcut that you use to start the browser
-      (or create a new one)
-      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 <b>--load-extension="c:\myext"</b></pre>
+      Bring up the Extensions page
+      by going to this URL:
+      <blockquote>
+      <b>chrome://extensions</b>
+      </blockquote>
       </li>
-      <li>Exit Google Chrome.
-      If you have a separate profile for testing,
-      you only need to exit the browser instances that use the testing profile. </li>
-      <li>Double-click the shortcut to start the browser.</li>
-    </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>.
+
+      <li>
+      Click the <b>Load unpacked extension</b> button.
+      A file dialog appears.
+      </li>
+
+      <li>
+      In the file dialog,
+      navigate to your extension's directory
+      (<code>c:\myext</code>, for example)
+      and click the <b>OK</b> button.
+      </li>
+    </ol> </li>
+  </ol>
+
+<p>
+If your extension is valid,
+information about it
+appears in the <b>Installed extensions</b> part
+of the Extensions page,
+as the following screenshot shows.
 </p>
-  </li>
-</ol>
 
 <p>
-You should see the UI for your extension at the bottom left of the browser, looking something like this:
+<a href="images/load_after.gif"><img
+  src="images/load_after-small.gif"
+  width="327" height="196" /></a>
+</p>
+
+<p>
+You should see the UI for your extension at the bottom left of the browser,
+looking something like this:
 </p>
 
 <table class="imagelayout">
@@ -122,9 +130,11 @@ You should see the UI for your extension at the bottom left of the browser, look
   just like the buttons in the bookmark bar.
   After a while, a tooltip comes up, identifying the extension.
   </p>
-  <p> [PENDING: troubleshooting info should go here.
+  <p class="comment">
+  [PENDING: troubleshooting info should go here.
   what are symptoms of common typos, including misnamed files?
-  what are the symptoms if you don't have the dev channel?] </p>
+  what are the symptoms if you don't have the dev channel?]
+  </p>
 
 <h2 id="code">Add code to the extension</h2>
 <p> In this step, you'll make your extension <em>do</em> something besides just look good. </p>
@@ -159,7 +169,7 @@ it won't work! </p>
 
 <h2 id="summary">Now what?</h2>
 
-<p>
+<p class="comment">
 [PENDING: Summarize what we did,
 what it means,
 what else we would've done if this were a real extension (e.g. package it),
diff --git a/chrome/common/extensions/docs/static/packaging.html b/chrome/common/extensions/docs/static/packaging.html
index abbdbaa..5d539ab 100755
--- a/chrome/common/extensions/docs/static/packaging.html
+++ b/chrome/common/extensions/docs/static/packaging.html
@@ -22,19 +22,38 @@ for inclusion in the gallery.]
 
 <p>To package an extension:</p>
 <ol>
-<li>Close all your Google Chrome windows</li>
-<li>Execute Google Chrome, using the <code>--pack-extension</code> option
-to specify the path to the extension's folder:
-<pre>chrome.exe --pack-extension=<em>ext-folder-path</em></pre>
-</li>
+  <li>
+    Bring up the Extensions page
+    by going to this URL:
+    <blockquote>
+    <b>chrome://extensions</b>
+    </blockquote>
+  </li>
+
+  <li>
+    Click the <b>Pack extension</b> button.
+    A dialog appears.
+  </li>
+
+  <li>
+    In the <b>Extension root directory</b> field,
+    specify the path to the extension's folder &mdash;
+    for example, <code>c:\myext</code>.
+    (Ignore the other field;
+    you don't specify a private key file
+    the first time you package a particular extension.)
+  </li>
+
+  <li>
+    Click <b>OK</b>.
+    The packager creates two files:
+    a <code>.crx</code> file,
+    which is the actual extension that can be installed,
+    and a <code>.pem</code> file,
+    which contains the private key.
+  </li>
 </ol>
 
-<p>The packager creates two files:
-a <code>.crx</code> file,
-which is the actual extension that can be installed,
-and a <code>.pem</code> file,
-which contains the private key.
-</p>
 
 <p>
 <b>Do not lose the private key!</b>
@@ -53,54 +72,63 @@ that tells you where to find
 the <code>.crx</code> and <code>.pem</code> files:</p>
 </p>
 
-<img src="images/create-package.png" />
-
-
-<h3>Finding the path to Google Chrome</h3>
-
-<p>
-If <code>chrome.exe</code> isn't already in your path,
-you need to specify the complete path to it.
-Here's how:
-</p>
-
-<ul>
-<li>
-In Windows XP, right-click your Google Chrome shortcut,
-choose <b>Properties > Shortcut</b>,
-and then choose <b>Find Target</b>.
-</li>
-<li>
-In Vista, right-click your Google Chrome shortcut
-and select <b>Open File Location</b>.
-</li>
-</ul>
+<img src="images/package-success.gif"
+  width="554" height="208" />
 
 
 <h2 id="update">Updating a package</h2>
 
 <p>To create an updated version of your extension:</p>
 <ol>
-<li>Increase the version number in <code>manifest.json</code>.</li>
-<li>Close all your Google Chrome windows.</li>
-<li>Execute Google Chrome, using the <code>--pack-extension</code>
-and <code>--pack-extension-key</code> options.
-The value of the key option should be the path to
-the already generated <code>.pem</code> file for this extension.
-
-<pre>chrome.exe --pack-extension=<em>ext-folder-path</em> --pack-extension-key=<em>ext-key-path</em></pre>
-</li>
+  <li>
+    Increase the version number in <code>manifest.json</code>.
+  </li>
+
+  <li>
+    Bring up the Extensions page
+    by going to this URL: <b>chrome://extensions</b>
+  </li>
+
+  <li>
+    In the <b>Extension root directory</b> field,
+    specify the path to the extension's folder &mdash;
+    for example, <code>c:\myext</code>.
+  </li>
+
+  <li>
+    In the <b>Private key file</b> field,
+    specify the location of the
+    already generated <code>.pem</code> file for this extension &mdash;
+    for example, <code>c:\myext.pem</code>.
+  </li>
+
+  <li>
+    Click <b>OK</b>.
+  </li>
 </ol>
 
 <p>If the updated extension is successfully packaged, you'll see a dialog like this:</p>
 
-<img src="images/package-success.png">
+<img src="images/update-success.gif"
+  width="298" height="160" />
+
+<h2>Packaging at the command line</h2>
+
+<p>
+Another way to package extensions
+is by invoking <code>chrome.exe</code> at the command line.
+Use the <code>--pack-extension</code> flag
+to specify the location of the extension's folder.
+Use <code>--pack-extension-key</code>
+to specify the location of the extension's private key file.
+For example:
+</p>
 
-<h2>Tips and tricks</h2>
+<pre>
+chrome.exe --pack-extension=<em>ext-folder-path</em> --pack-extension-key=<em>ext-key-path</em>
+</pre>
 
 <p>
-You can use the <code>--no-message-box</code> command-line flag
-to suppress the dialog.
-This is useful if
-you're packing extensions in non-interactive scripts.
+To suppress the dialog,
+add <code>--no-message-box</code> to the command.
 </p>