Add links to html5rocks.com.

TEST=none
BUG=49007

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

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

6 files changed, 166 insertions, 89 deletions

diff --git a/chrome/common/extensions/docs/api_other.html b/chrome/common/extensions/docs/api_other.html
index 1f4b473..4917280 100644
--- a/chrome/common/extensions/docs/api_other.html
+++ b/chrome/common/extensions/docs/api_other.html
@@ -295,6 +295,33 @@ E.g. window.open(someUrl). --></dd>
   of the manifest specifies
   which hosts the extension can send requests to.
   </dd>
+<dt> <strong>HTML5 and other emerging APIs</strong></dt>
+<dd> Google Chrome supports HTML5 features,
+     along with other emerging APIs.
+     Here are some of the APIs you can use:
+  <ul>
+  <li> audio
+    (<a href="http://www.html5rocks.com/tutorials/audio/quick/">tutorial</a>) </li>
+  <li> app cache
+    (<a href="http://www.html5rocks.com/tutorials/appcache/beginner/">tutorial</a>) </li>
+  <li> canvas </li>
+  <li> geolocation
+    (<a href="http://www.html5rocks.com/tutorials/geolocation/trip_meter/">tutorial</a>) </li>
+  <li> local storage </li>
+  <li> notifications
+    (<a href="http://www.html5rocks.com/tutorials/notifications/quick/">tutorial</a>) </li>
+  <li> session storage </li>
+  <li> video </li>
+  <li> web database
+    (<a href="http://www.html5rocks.com/tutorials/webdatabase/todo/">tutorial</a>) </li>
+  </ul>
+  <p>
+  See <a href="http://www.html5rocks.com">html5rocks.com</a>
+  for HTML5 information, tutorials, an interactive playground,
+  and links to other resources.
+  </p>
+</dd>
+
 <dt><strong> WebKit APIs </strong></dt>
 <dd>
   Because Google Chrome is built upon WebKit,
@@ -314,18 +341,12 @@ E.g. window.open(someUrl). --></dd>
 </dd>
 <dt><strong> V8 APIs</strong>, such as<strong> JSON </strong></dt>
 <dd> Because JSON is in V8, you don't need to include a JSON library to use JSON functions. <!-- [PENDING: what other APIs are in v8? link to complete list] --></dd>
-<dt> <strong>HTML5</strong> <strong>APIs</strong>, such as <strong>localStorage</strong></dt>
-<dd> HTML5 is still being defined and implemented,
-  but Google Chrome already supports local storage,
-  which extensions can use to store data.
-<!--
-localStorage.setItem(&quot;foo&quot;, &quot;bar&quot;); ... localStorage.getItem(&quot;foo&quot;); --> <!-- [PENDING: Other important API? link to complete list] --></dd>
 <dt><strong>APIs in bundled libraries</strong></dt>
 <dd> If you want to use a library that the browser doesn't provide
 (for example, jQuery),
 you can bundle that library's JavaScript files with your extension.
 Bundled libraries work in extensions
-just as they would in any other web pages.
+just as they do in other web pages.
 </dd>
 </dl>
 
diff --git a/chrome/common/extensions/docs/notifications.html b/chrome/common/extensions/docs/notifications.html
index 415fab9..644a13d 100644
--- a/chrome/common/extensions/docs/notifications.html
+++ b/chrome/common/extensions/docs/notifications.html
@@ -211,18 +211,39 @@
         <h1 class="page_title">Desktop Notifications</h1>
       </div>
         <!-- TABLE OF CONTENTS -->
-        <div id="toc" style="display: none; ">
+        <div id="toc">
           <h2>Contents</h2>
           <ol>
             <li>
-              <a>h2Name</a>
+              <a href="#manifest">Manifest</a>
               <ol>
-                <li>
+                <li style="display: none; ">
+                  <a>h3Name</a>
+                </li>
+              </ol>
+            </li><li>
+              <a href="#communication">Communicating with other views</a>
+              <ol>
+                <li style="display: none; ">
+                  <a>h3Name</a>
+                </li>
+              </ol>
+            </li><li>
+              <a href="#examples"> Examples </a>
+              <ol>
+                <li style="display: none; ">
+                  <a>h3Name</a>
+                </li>
+              </ol>
+            </li><li>
+              <a href="#api">API</a>
+              <ol>
+                <li style="display: none; ">
                   <a>h3Name</a>
                 </li>
               </ol>
             </li>
-              <li>
+              <li style="display: none; ">
                 <a href="#apiReference">API reference</a>
                 <ol>
                   <li>
@@ -265,6 +286,7 @@
 
         <!-- STATIC CONTENT PLACEHOLDER -->
         <div id="static"><div id="pageData-name" class="pageData">Desktop Notifications</div>
+<div id="pageData-showTOC" class="pageData">true</div>
 
 <!-- BEGIN AUTHORED CONTENT -->
 <p>
@@ -312,37 +334,6 @@ There is no need to call
 <code>webkitNotifications.checkPermission()</code>.
 </p>
 
-<h2 id="api">API</h2>
-
-<p>
-The desktop notification API for extensions
-is the same one that
-is available to normal web pages.
-As the following code shows,
-you first create either a simple text notification
-or an HTML notification,
-and then you show the notification.
-</p>
-
-<pre>// Create a simple text notification:
-var notification = webkitNotifications.createNotification(
-  '48.png',  // icon url - can be relative
-  'Hello!',  // notification title
-  'Lorem ipsum...'  // notification body text
-);
-
-// Or create an HTML notification:
-var notification = webkitNotifications.createHTMLNotification(
-  'notification.html'  // html url - can be relative
-);
-
-// Then show the notification.
-notification.show();
-</pre>
-
-<p>For complete API details,
-see the <a href="http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification">Desktop notifications draft specification</a>.</p>
-
 <h2 id="communication">Communicating with other views</h2>
 
 <p>
@@ -374,6 +365,44 @@ and for help in viewing the source code,
 see <a href="samples.html">Samples</a>.
 </p>
 
+<p>
+Also see html5rocks.com's
+<a href="http://www.html5rocks.com/tutorials/notifications/quick/">notifications tutorial</a>.
+Ignore the permission-related code;
+it's unnecessary if you declare the "notifications" permission.
+</p>
+
+<h2 id="api">API</h2>
+
+<p>
+The desktop notification API for extensions
+is the same one that
+is available to normal web pages.
+As the following code shows,
+you first create either a simple text notification
+or an HTML notification,
+and then you show the notification.
+</p>
+
+<pre>// Create a simple text notification:
+var notification = webkitNotifications.createNotification(
+  '48.png',  // icon url - can be relative
+  'Hello!',  // notification title
+  'Lorem ipsum...'  // notification body text
+);
+
+// Or create an HTML notification:
+var notification = webkitNotifications.createHTMLNotification(
+  'notification.html'  // html url - can be relative
+);
+
+// Then show the notification.
+notification.show();
+</pre>
+
+<p>For complete API details,
+see the <a href="http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification">Desktop notifications draft specification</a>.</p>
+
 <!-- END AUTHORED CONTENT -->
 </div>
 
diff --git a/chrome/common/extensions/docs/overview.html b/chrome/common/extensions/docs/overview.html
index 784489a..e1eb4cb 100644
--- a/chrome/common/extensions/docs/overview.html
+++ b/chrome/common/extensions/docs/overview.html
@@ -321,10 +321,9 @@ An extension is a zipped bundle of files —
 HTML, CSS, JavaScript, images, and anything else you need —
 that adds functionality to the Google Chrome browser.
 Extensions are essentially web pages,
-and they can use all the APIs
-that the browser provides
-to web pages,
-from XMLHttpRequest to JSON to HTML5 local storage.
+and they can use all the
+<a href="api_other.html">APIs that the browser provides to web pages</a>,
+from XMLHttpRequest to JSON to HTML5.
 </p>
 
 <p>
diff --git a/chrome/common/extensions/docs/static/api_other.html b/chrome/common/extensions/docs/static/api_other.html
index f05c244..95bf464 100644
--- a/chrome/common/extensions/docs/static/api_other.html
+++ b/chrome/common/extensions/docs/static/api_other.html
@@ -29,6 +29,33 @@ E.g. window.open(someUrl). --></dd>
   of the manifest specifies
   which hosts the extension can send requests to.
   </dd>
+<dt> <strong>HTML5 and other emerging APIs</strong></dt>
+<dd> Google Chrome supports HTML5 features,
+     along with other emerging APIs.
+     Here are some of the APIs you can use:
+  <ul>
+  <li> audio
+    (<a href="http://www.html5rocks.com/tutorials/audio/quick/">tutorial</a>) </li>
+  <li> app cache
+    (<a href="http://www.html5rocks.com/tutorials/appcache/beginner/">tutorial</a>) </li>
+  <li> canvas </li>
+  <li> geolocation
+    (<a href="http://www.html5rocks.com/tutorials/geolocation/trip_meter/">tutorial</a>) </li>
+  <li> local storage </li>
+  <li> notifications
+    (<a href="http://www.html5rocks.com/tutorials/notifications/quick/">tutorial</a>) </li>
+  <li> session storage </li>
+  <li> video </li>
+  <li> web database
+    (<a href="http://www.html5rocks.com/tutorials/webdatabase/todo/">tutorial</a>) </li>
+  </ul>
+  <p>
+  See <a href="http://www.html5rocks.com">html5rocks.com</a>
+  for HTML5 information, tutorials, an interactive playground,
+  and links to other resources.
+  </p>
+</dd>
+
 <dt><strong> WebKit APIs </strong></dt>
 <dd>
   Because Google Chrome is built upon WebKit,
@@ -48,18 +75,12 @@ E.g. window.open(someUrl). --></dd>
 </dd>
 <dt><strong> V8 APIs</strong>, such as<strong> JSON </strong></dt>
 <dd> Because JSON is in V8, you don't need to include a JSON library to use JSON functions. <!-- [PENDING: what other APIs are in v8? link to complete list] --></dd>
-<dt> <strong>HTML5</strong> <strong>APIs</strong>, such as <strong>localStorage</strong></dt>
-<dd> HTML5 is still being defined and implemented,
-  but Google Chrome already supports local storage,
-  which extensions can use to store data.
-<!--
-localStorage.setItem(&quot;foo&quot;, &quot;bar&quot;); ... localStorage.getItem(&quot;foo&quot;); --> <!-- [PENDING: Other important API? link to complete list] --></dd>
 <dt><strong>APIs in bundled libraries</strong></dt>
 <dd> If you want to use a library that the browser doesn't provide
 (for example, jQuery),
 you can bundle that library's JavaScript files with your extension.
 Bundled libraries work in extensions
-just as they would in any other web pages.
+just as they do in other web pages.
 </dd>
 </dl>
 
diff --git a/chrome/common/extensions/docs/static/notifications.html b/chrome/common/extensions/docs/static/notifications.html
index 8d3d98a..05f6f45 100644
--- a/chrome/common/extensions/docs/static/notifications.html
+++ b/chrome/common/extensions/docs/static/notifications.html
@@ -1,4 +1,5 @@
 <div id="pageData-name" class="pageData">Desktop Notifications</div>
+<div id="pageData-showTOC" class="pageData">true</div>
 
 <!-- BEGIN AUTHORED CONTENT -->
 <p>
@@ -52,38 +53,6 @@ There is no need to call
 <code>webkitNotifications.checkPermission()</code>.
 </p>
 
-<h2 id="api">API</h2>
-
-<p>
-The desktop notification API for extensions
-is the same one that
-is available to normal web pages.
-As the following code shows,
-you first create either a simple text notification
-or an HTML notification,
-and then you show the notification.
-</p>
-
-<pre>
-// Create a simple text notification:
-var notification = webkitNotifications.createNotification(
-  '48.png',  // icon url - can be relative
-  'Hello!',  // notification title
-  'Lorem ipsum...'  // notification body text
-);
-
-// Or create an HTML notification:
-var notification = webkitNotifications.createHTMLNotification(
-  'notification.html'  // html url - can be relative
-);
-
-// Then show the notification.
-notification.show();
-</pre>
-
-<p>For complete API details,
-see the <a href="http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification">Desktop notifications draft specification</a>.</p>
-
 <h2 id="communication">Communicating with other views</h2>
 
 <p>
@@ -116,4 +85,43 @@ and for help in viewing the source code,
 see <a href="samples.html">Samples</a>.
 </p>
 
+<p>
+Also see html5rocks.com's
+<a href="http://www.html5rocks.com/tutorials/notifications/quick/">notifications tutorial</a>.
+Ignore the permission-related code;
+it's unnecessary if you declare the "notifications" permission.
+</p>
+
+<h2 id="api">API</h2>
+
+<p>
+The desktop notification API for extensions
+is the same one that
+is available to normal web pages.
+As the following code shows,
+you first create either a simple text notification
+or an HTML notification,
+and then you show the notification.
+</p>
+
+<pre>
+// Create a simple text notification:
+var notification = webkitNotifications.createNotification(
+  '48.png',  // icon url - can be relative
+  'Hello!',  // notification title
+  'Lorem ipsum...'  // notification body text
+);
+
+// Or create an HTML notification:
+var notification = webkitNotifications.createHTMLNotification(
+  'notification.html'  // html url - can be relative
+);
+
+// Then show the notification.
+notification.show();
+</pre>
+
+<p>For complete API details,
+see the <a href="http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification">Desktop notifications draft specification</a>.</p>
+
 <!-- END AUTHORED CONTENT -->
diff --git a/chrome/common/extensions/docs/static/overview.html b/chrome/common/extensions/docs/static/overview.html
index aa370f7..6996c2f 100644
--- a/chrome/common/extensions/docs/static/overview.html
+++ b/chrome/common/extensions/docs/static/overview.html
@@ -16,10 +16,9 @@ An extension is a zipped bundle of files &mdash;
 HTML, CSS, JavaScript, images, and anything else you need &mdash;
 that adds functionality to the Google Chrome browser.
 Extensions are essentially web pages,
-and they can use all the APIs
-that the browser provides
-to web pages,
-from XMLHttpRequest to JSON to HTML5 local storage.
+and they can use all the
+<a href="api_other.html">APIs that the browser provides to web pages</a>,
+from XMLHttpRequest to JSON to HTML5.
 </p>
 
 <p>