Cleaning up apps codelab

chrome/common/extensions/docs/templates/articles/app_codelab7_useridentification.html

Index: chrome/common/extensions/docs/templates/articles/app_codelab7_useridentification.html
diff --git a/chrome/common/extensions/docs/templates/articles/app_codelab7_useridentification.html b/chrome/common/extensions/docs/templates/articles/app_codelab7_useridentification.html
index 02b586868412b84415a064e3747ffe50992d3a25..94f7dddd9cdcbdfcb6221190f6dc9b9444e33030 100644
--- a/chrome/common/extensions/docs/templates/articles/app_codelab7_useridentification.html
+++ b/chrome/common/extensions/docs/templates/articles/app_codelab7_useridentification.html
@@ -1,18 +1,17 @@
-<h1 id="lab_7_user_identity">Lab 7 - User Identity</h1>
+<h1 id="lab_7_user_identity">Access User's Data</h1>
 
 <p>Most modern applications are attached to the web to synchronize data. When synchronizing data, you need to identify who the user is.
-Chrome apps come with an <a href="http://developer.chrome.com/trunk/apps/experimental.identity.html">identity API</a> that makes it easy to integrate either with Google accounts or with any other service that supports OAuth.</p>
+Chrome packaged apps come with an <a href="http://developer.chrome.com/trunk/apps/experimental.identity.html">identity API</a> that makes it easy to integrate either with Google accounts or with any other service that supports OAuth.</p>
 
 <ol>
 <li> Built in - Google Authenticiation</li>
 <li> Third Party Authentication (Twitter, Foursquare, etc.)</li>
 </ol>
 
-<h2 id="you_should_also_read">You should also read</h2>
-
-<p><a href="http://developer.chrome.com/trunk/apps/app_identity.html">Identify User</a> in Chrome app docs</p>
-
-<p class="note"><b>Note:</b>  Apps with authentication require the experimental permission in the <code>manifest.json</code> and, until they came out of experimental state, they cannot be uploaded to the Chrome Web Store.
+<p class="warning"><b>Warning:</b>
+Apps with authentication require the experimental permission in the
+<code>manifest.json</code> and, until they came out of experimental state,
+they cannot be uploaded to the Chrome Web Store.
 If you prefer, you can choose to skip this lab.</p>
 
 <h2 id="authenticating_with_google">Authenticating with Google</h2>
@@ -21,7 +20,7 @@ If you prefer, you can choose to skip this lab.</p>
 
 <h2 id="integrating_with_a_third_party_service">Integrating with a third-party service</h2>
 
-<p>Chrome apps have a dedicated API for lauching the authentication flow to any third-party OAuth2 service, called $ref:experimental.identity.launchWebAuthFlow.
+<p>Chrome packaged apps have a dedicated API for lauching the authentication flow to any third-party OAuth2 service, called $ref:experimental.identity.launchWebAuthFlow.
 To show how this flow works, we&#39;re going to update our sample to import <a href="https://developers.google.com/google-apps/tasks/">Google Tasks</a> into the Todo list.</p>
 
 <h3 id="register_with_the_provider">Register with the provider</h3>
@@ -41,13 +40,21 @@ replacing &lt;YOURAPP_ID&gt; with your app ID (this is the app&#39;s long alphan
 
 <h3 id="add_permissions">Add permissions</h3>
 
-<p>Update the <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/angularjs/manifest.json">manifest.json</a> to use &quot;experimental&quot; features. Note that we&#39;ve also requested permission to make XHR requests to the Tasks service URL - for security reasons, you need to request explicit permission in the manifest for every URL you will call via XHR.
+<p>Update the
+<a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/angularjs/manifest.json">AngularJS manifest.json</a> or
+<a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/javascript/manifest.json">JavaScript manifest.json</a>
+to use &quot;experimental&quot; features.
+Note that we&#39;ve also requested permission
+to make XHR requests to the Tasks service URL - for security reasons,
+you need to request explicit permission in the manifest for every URL you will call via XHR.
+</p>
+
 <pre>
 {
      ... ,
      &quot;permissions&quot;: [&quot;storage&quot;, &quot;experimental&quot;, &quot;https://www.googleapis.com/tasks/*&quot;]
 }
-</pre></p>
+</pre>
 
 <h3 id="add_google_tasks_to_the_todo_list">Add Google tasks to the Todo list</h3>
 
@@ -55,12 +62,28 @@ replacing &lt;YOURAPP_ID&gt; with your app ID (this is the app&#39;s long alphan
 Once we have this token, we are able to call the Google Tasks API directly.</p>
 
 <ol>
-<li><p>Since this is time consuming and error prone, you can cheat and copy our JavaScript that handles the authentication to the Google Tasks API from here: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/angularjs/gapi_tasks.js">gapi_tasks.js</a>.
-This script calls <code>launchWebFlow</code> and gets a valid access token for the specified client ID. It also has simple JavaScript methods that, after authenticated, goes to the Tasks API and gets the user&#39;s task lists and the corresponding tasks. </p>
-
-<p class="note"><b>Note:</b>  this script is NOT intented to be used in production - it is just a very simple, limited and definitely not robust piece of code intented to highlight the basic authentication and API calls.</p></li>
-<li><p>Add a new method to the existing <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/angularjs/controller.js">controller.js</a> that, using the methods from the script of the previous step, authenticates the user and imports his Google tasks into the Todo list:
-<pre>
+<li><p>Since this is time consuming and error prone, you can cheat and copy our JavaScript that handles the authentication to the Google Tasks API from here: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/angularjs/gapi_tasks.js">Angular gapi_tasks.js</a>
+and <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/javascript/gapi_tasks.js">JavaScript gapi_tasks.js</a> are the same.
+This script calls <code>launchWebFlow</code> and
+gets a valid access token for the specified client ID.
+It also has simple JavaScript methods that, after authenticated,
+goes to the Tasks API and gets the user&#39;s task lists and the corresponding tasks. </p>
+
+<p class="note"><b>Note:</b> This script is NOT intented to be used in production - it is just a very simple, limited and definitely not robust piece of code intented to highlight the basic authentication and API calls.</p></li>
+<li><p>Add a new method to the existing
+<a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/angularjs/controller.js">AngularJS controller.js</a> or
+<a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useridentification/javascript/controller.js">JavaScript controller.js</a> that,
+using the methods from the script of the previous step,
+authenticates the user and imports his Google tasks into the Todo list:
+</p>
+
+<tabs data-group="source">
+
+  <header tabindex="0" data-value="angular">Angular</header>
+  <header tabindex="0" data-value="js">JavaScript</header>
+
+  <content>
+    <pre>
 $scope.importFromGTasks = function() {
   var api = new TasksAPI();
   var clientId = &quot;&lt;GET_YOURS_AT_https://code.google.com/apis/console&gt;&quot;;
@@ -82,31 +105,84 @@ $scope.importFromGTasks = function() {
     });
   });
 }
-</pre>   </p>
+    </pre>
+  </content>
+  <content>
+    <pre>
+  document.getElementById('importGTasks').addEventListener('click', function() {
+    var api = new TasksAPI();
+    var clientId = &quot;&lt;GET_YOURS_AT_https://code.google.com/apis/console&gt;&quot;;
+    api.authenticate(clientId, function() {
+      api.getLists(function(result) {
+        console.log(result);
+        if (!result || !result.items || result.items.length==0) {
+          throw "No task lists available";
+        }
+        var listId=result.items[0].id;
+        api.getTasks(listId, function(tasks) {
+          console.log(tasks);
+          for (var j=0; j&lt;tasks.items.length; j++) {
+            model.addTodo(tasks.items[j].title, tasks.items[j].status!='needsAction');
+          }
+        });
+      });
+    });
+  });
+    </pre>
+
+</tabs>
 
 <p>Replace the following line in the code above:
 <pre>
   var clientId = &quot;&lt;GET_YOURS_AT_https://code.google.com/apis/console&gt;&quot;;
 </pre>
-with your own project&#39;s Client ID that you got from the Google API Console. Should look like this:
+with your own project&#39;s Client ID that you got from the Google API Console.
+Should look like this:
 <pre>
   var clientId = &quot;xxxxxxxxxxxxxx.apps.googleusercontent.com&quot;;
 </pre></p></li>
 <li><p>Now we just need a button that starts the import process. Update the <code>index.html</code> to include <code>gapi_tasks.js</code> and add a new button to call <code>importFromGTasks</code>:
-<pre>
+</p>
+
+<tabs data-group="source">
+
+  <header tabindex="0" data-value="angular">Angular</header>
+  <header tabindex="0" data-value="js">JavaScript</header>
+
+  <content>
+    <pre>
 &lt;script src=&quot;gapi_tasks.js&quot;&gt;&lt;/script&gt;
 ...
 &lt;button ng-click=&quot;importFromGTasks()&quot;&gt;import tasks from GTasks&lt;/button&gt;
-</pre></p></li>
+    </pre>
+  </content>
+  <content>
+    <pre>
+&lt;button id="importGTasks"&gt;import tasks from GTasks&lt;/button&gt;
+...
+&lt;script src="gapi_tasks.js"&gt;&lt;/script&gt;
+    </pre>
+  </content>
+
+</tabs></li>
 </ol>
 
-<p class="note"><b>Note:</b>  If you get stuck and want to see the app in action,
-go to <code>chrome://extensions</code>, load the unpacked <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab7_useridentification">lab7 app</a>,
+<h3 id="results">Check the results</h3>
+
+<p>If you get stuck and want to see the app in action,
+go to <code>chrome://extensions</code>,
+load the unpacked
+<a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab7_useridentification/angularjs">AngularJS app</a> or
+<a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab7_useridentification/javascript">JavaScript app</a>,
 and launch the app from a new tab.</p>
 
-<h1 id="what_39_s_next_">What&#39;s next?</h1>
+<h2 id="you_should_also_read">You should also read</h2>
+
+<p><a href="http://developer.chrome.com/trunk/apps/app_identity.html">Identify User</a> tutorial</p>
+
+<h2 id="what_39_s_next_">What's next?</h2>
 
-<p>In <a href="app_codelab8_webresources.html">lab8_webresources</a>,
+<p>In <a href="app_codelab8_webresources.html">7 - Access Web Resources</a>,
 you will learn how to load and show images from a remote URL.</p>
 
 <p class="note"><b>Note:</b>  Up until now, the code in each lab builds upon the previous lab code sample.