Clean-up Chrome Apps codelab.

Some of the updated files got accidentally stashed and I needed to pop
and recheck that the content was up-to-date.

Review URL: https://codereview.chromium.org/647763004

Cr-Commit-Position: refs/heads/master@{#300334}

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

@@ -6,7 +6,7 @@
 <p>In this step, you will learn:</p>
 
 <ul>
-  <li>The basic building blocks of a Chrome App package, including the manifest file and background scripts.</li>
+  <li>The basic building blocks of a Chrome App, including the manifest file and background scripts.</li>
   <li>How to install, run, and debug a Chrome App.</li>
 </ul>
 
@@ -16,12 +16,9 @@
   To preview what you will complete in this step, <a href="#launch">jump down to the bottom of this page &#8595;</a>.
 </p>
 
-<h2 id="app-components">Get familiar with Chrome App packages</h2>
+<h2 id="app-components">Get familiar with Chrome Apps</h2>
 
-<p>Chrome Apps are structured similarly to Chrome extensions
-so current extension developers will find this process to be familiar.</p>
-
-<p>A packaged Chrome App contains these components:</p>
+<p>A Chrome App contains these components:</p>
 
 <ul>
   <li>The <strong>manifest</strong> specifies the meta information of your app. 
@@ -29,9 +26,9 @@ so current extension developers will find this process to be familiar.</p>
   <li>The <strong>event page</strong>, also called a <strong>background script</strong>, is 
     responsible for managing the app life cycle.
     The background script is where you register listeners for specific app events such as the launching and closing of the app's window.</li>
-  <li>All <strong>code files</strong> must be included in the Chrome App package. 
+  <li>All <strong>code files</strong> must be packaged in the Chrome App. 
     This includes HTML, CSS, JS, and Native Client modules.</li>
-  <li><strong>Assets</strong>, including app icons, should be included in the package as well.</li>
+  <li><strong>Assets</strong>, including app icons, should be packaged in the Chrome App as well.</li>
 </ul>
 
 <h3 id="manifest">Create a manifest</h3>
@@ -56,7 +53,8 @@ so current extension developers will find this process to be familiar.</p>
 }
 </pre>
 
-<p>Notice how this manifest describes a background script named <em>background.js</em>. We'll create that file next.</p>
+<p>Notice how this manifest describes a background script named <em>background.js</em>.
+You will create that file next.</p>
 
 <pre>
 "background": {
@@ -64,7 +62,7 @@ so current extension developers will find this process to be familiar.</p>
 }
 </pre>
 
-<p>We'll also supply you with an app icon later in this step:</p>
+<p>We'll supply you with an app icon later in this step:</p>
 
 <pre>
 "icons": {
@@ -102,7 +100,8 @@ chrome.app.runtime.onLaunched.addListener(function() {
 
 <p>When the Chrome App is launched, 
 <a href="/apps/app_window.html#method-create">chrome.app.window.create()</a>
-will create a new window using a basic HTML page (<em>index.html</em>) as the source. We'll create the HTML view in the next step.</p>
+will create a new window using a basic HTML page (<em>index.html</em>) as the source.
+You will create the HTML view in the next step.</p>
 
 <pre>
 <b>chrome.app.window.create</b>('<b>index.html</b>', {
@@ -139,7 +138,7 @@ additional packaged JavaScript, CSS, or assets.</p>
 
 <p align="center"><img src="{{static}}/images/app_codelab/icon_128.png" alt="Chrome App icon for this codelab" /></p>
 
-<p>We will use this PNG as our application's icon that users will see in the launch menu. <!-- For more detailed information about app icons, refer to <a href="/apps/manifest/icons">Manifest - Icons</a> in the docs. --></p>
+<p>You will use this PNG as our application's icon that users will see in the launch menu. <!-- For more detailed information about app icons, refer to <a href="/apps/manifest/icons">Manifest - Icons</a> in the docs. --></p>
 
 <h3 id="confirm-files">Confirm that you have created all your files</h3>
 
@@ -201,7 +200,7 @@ You can easily test an API call before adding it to your code:</p>
   <img src="{{static}}/images/app_codelab/console-log.png" alt="DevTools console log"/>
 </figure>
 
-<h2 id="recap">Recap APIs referenced in this step</h2>
+<h2 id="recap">For more information</h2>
 
 <p>For more detailed information about some of the APIs introduced in this step, refer to:</p>
 

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

@@ -20,29 +20,28 @@
   To preview what you will complete in this step, <a href="#launch">jump down to the bottom of this page &#8595;</a>.
 </p>
 
-<h2 id="csp-compliance">Learn how CSP affects the use of external web resources</h2>
+<h2 id="csp-compliance">How CSP affects the use of external resources</h2>
 
 <p>The Chrome Apps platform forces your app to be fully compliant with Content 
-Security Policies (CSP). This includes not being able to directly load DOM 
-resources like images, fonts, and CSS from outside of your packaged app.</p>
+Security Policies (CSP). You can't directly load DOM 
+resources like images, fonts, and CSS from outside of your Chrome App package.</p>
 
 <p>If you want to show an external image in your app, you need to request it via <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, 
-transform it into a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>, and create an <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL">ObjectURL</a>. This ObjectURL can then be 
-added to the DOM because it refers to an in-memory item in the context of the 
-app.</p>
+transform it into a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>, and create an <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL">ObjectURL</a>. This <code>ObjectURL</code> can be added to the DOM
+because it refers to an in-memory item in the context of the app.</p>
 
 <h2 id="show-images">Show thumbnail images for todo items</h2>
 
-<p>Let's change our app to look for image URLs in a todo item. If the URL 
-looks like an image (e.g. ends with .png, .jpg, .svg, or .gif), we will apply the
-process mentioned above in order to show an image thumbnail next to the URL.</p>
+<p>Let's change our app to look for image URLs in a todo item.
+If the URL looks like an image (for example, ends with .png, .jpg, .svg, or .gif),
+apply the process mentioned above in order to show an image thumbnail next to the URL.</p>
 
 <h3 id="update-permissions">Update permissions</h3>
 
-<p>In a Chrome App you can make XMLHttpRequest calls to any URL as long as you 
-whitelist its domain in the manifest. Since we won't know 
+<p>In a Chrome App, you can make XMLHttpRequest calls to any URL as long as you 
+whitelist its domain in the manifest. Since you won't know 
 beforehand what image URL the user will type, 
-we will ask permission to make requests to <code>"&lt;all_urls&gt;"</code>.</p>
+ask permission to make requests to <code>"&lt;all_urls&gt;"</code>.</p>
 
 <p>In <strong><em>manifest.json</em></strong>, request the "&lt;all_urls&gt;" permission:</p>
 
@@ -64,7 +63,7 @@ Controller.prototype._createObjectURL = function(blob) {
 };
 </pre>
 
-<p>ObjectURLs hold memory so, when you no longer need the ObjectURL, you 
+<p>ObjectURLs hold memory, so when you no longer need the ObjectURL, you 
 should revoke them. Add this 
 <code>_clearObjectURL()</code> method to <em>controller.js</em> to handle that:</p>
 
@@ -101,8 +100,8 @@ Controller.prototype._requestRemoteImageAndAppend = function(imageUrl, element)
 };
 </pre>
 
-<p>On XHR load, this method will create an ObjectURL from the XHR's response,
-and add an <code>&lt;img&gt;</code> element with this ObjectURL to the DOM.</p>
+<p>On XHR load, this method creates an <code>ObjectURL</code> from the XHR's response,
+and adds an <code>&lt;img&gt;</code> element with this <code>ObjectURL</code> to the DOM.</p>
 
 <h3 id="parse-urls">Parse for image URLs in todo items</h3>
 
@@ -181,8 +180,8 @@ Controller.prototype.editItem = function (id, label) {
 
 <h3 id="css">Constrain the displayed image dimensions</h3>
 
-<p>Finally, in <strong></em>bower_components/todomvc-common/base.css</strong></em>, add a CSS rule to limit 
-   the size of the image:</p>
+<p>Finally, in <strong><em>bower_components/todomvc-common/base.css</strong></em>,
+add a CSS rule to limit the size of the image:</p>
 
 <pre data-filename="base.css">
 .thumbnail img[data-src] {
@@ -207,7 +206,7 @@ offline cache and dozens of simultaneous resource downloads, we have created
 <a href="https://github.com/GoogleChrome/apps-resource-loader#readme">a helper library</a>
 to handle some common use cases.</p>
 
-<h2 id="recap">Recap APIs referenced in this step</h2>
+<h2 id="recap">For more information</h2>
 
 <p>For more detailed information about some of the APIs introduced in this step, refer to:</p>
 

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

@@ -13,7 +13,7 @@
 
 <ul>
   <li>How to create, run, and debug a Chrome App in <a href="app_codelab_basics.html">Step 1</a>.</li>
-  <li>How to update an existing web app as a Chrome App, deal with common Content Security Policy issues, and adding local storage support in <a href="app_codelab_todomvc.html">Step 2</a>.</li>
+  <li>How to update an existing web app as a Chrome App, deal with Content Security Policy issues, and add local storage support in <a href="app_codelab_todomvc.html">Step 2</a>.</li>
   <li>How to implement alarms and notifications in <a href="app_codelab_alarms.html">Step 3</a>.</li>
   <li>How to display web pages inline in <a href="app_codelab_webview.html">Step 4</a>.</li>
   <li>How to load resources (like images) from external sources in <a href="app_codelab_images.html">Step 5</a>.</li>
@@ -30,6 +30,7 @@
   <li><a href="https://github.com/mangini/io13-codelab/archive/master.zip">Download the reference code</a> for all steps or <a href="https://github.com/mangini/io13-codelab/tree/master/cheat_code">view them on Github</a> in case you get stuck.</li>
 </ul>
 
-<p>Each step builds on top of the previous but, if you decide to skip a step, solutions for every step can be found in the reference code.</p>
+<p>Each step builds on top of the previous.
+You can skip any step and use previous step solutions in the reference code.</p>
 
 <p>Let's get started. Go to <a href="app_codelab_basics.html">Step 1 - Create and run a Chrome App &raquo;</a></p>
\ No newline at end of file

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

@@ -32,14 +32,15 @@ a custom HTML tag called <a href="/apps/tags/webview">webview</a>.</p>
   <img src="{{static}}/images/app_codelab/webview-example.png" alt="The Todo app using a webview">
 </figure>
 
-<p class="note">A webview is a sandboxed process. For example, the enclosing Chrome App
-(also known as the "embedder page") cannot easily access the webview's loaded DOM.
+<p class="note"><strong>Webviews are sandboxed processes:</strong>
+The enclosing Chrome App (also known as the "embedder page")
+cannot easily access the webview's loaded DOM.
 You can only interact with the webview using its API.</p>
 
 <h2 id="implement-webview">Implement the webview tag</h2>
 
-<p>Let's update our Todo app to search for URLs in the todo item text
-in order to create a hyperlink. The link, when clicked, will open a new Chrome App window
+<p>Update the Todo app to search for URLs in the todo item text and create a hyperlink.
+The link, when clicked, opens a new Chrome App window
 (not a browser tab) with a webview presenting the content.</p>
 
 <h3 id="update-permissions">Update permissions</h3>
@@ -86,12 +87,12 @@ This file is a basic webpage with one <code>&lt;webview&gt;</code> tag:</p>
 })(window);
 </pre>
 
-<p>Whenever a string starting with "http://" or "https://" is found, a HTML anchor tag will be created to wrap around the URL.</p>
+<p>Whenever a string starting with "http://" or "https://" is found, a HTML anchor tag is created to wrap around the URL.</p>
 
 <h3 id="render-links">Render hyperlinks in the todo list</h3>
 
 <p>Find <code>showAll()</code> in <em>controller.js</em>. Update <code>showAll()</code>
-to parse for links by using the <code>_parseForURLs()</code> method that we added previously:</p>
+to parse for links by using the <code>_parseForURLs()</code> method added previously:</p>
 
 <pre data-filename="controller.js">
 /**
@@ -164,7 +165,7 @@ Controller.prototype.editItem = function (id, label) {
 
 <h3 id="open-webview">Open new window containing webview</h3>
 
-<p>Add a <code>_doShowUrl()</code> method to <em>controller.js</em>. This method will open a new Chrome App window
+<p>Add a <code>_doShowUrl()</code> method to <em>controller.js</em>. This method opens a new Chrome App window
 via <a href="/apps/app_window.html#method-create">chrome.app.window.create()</a>
 with <em>webview.html</em> as the window source:</p>
 
@@ -233,7 +234,7 @@ starting with http:// or https://, you should see something like this:</p>
   <img src="{{static}}/images/app_codelab/step4-completed.gif" alt="The Todo app with webview"/>
 </figure>
 
-<h2 id="recap">Recap APIs referenced in this step</h2>
+<h2 id="recap">For more information</h2>
 
 <p>For more detailed information about some of the APIs introduced in this step, refer to:</p>
 
@@ -245,16 +246,11 @@ starting with http:// or https://, you should see something like this:</p>
   <li>
     <a href="/apps/tags/webview" title="Read '&lt;webview&gt; Tag' in the Chrome developer docs">&lt;webview&gt; Tag</a>
     <a href="#overview" class="anchor-link-icon" title="This feature mentioned in 'Learn about the webview tag'">&#8593;</a>
-    <a href="#create-webview" class="anchor-link-icon" title="This feature mentioned in 'Create a webview embedder page'">&#8593;</a>
   </li>
   <li>
     <a href="/apps/app_window.html#method-create" title="Read 'chrome.app.window.create()' in the Chrome developer docs">chrome.app.window.create()</a>
     <a href="#open-webview" class="anchor-link-icon" title="This feature mentioned in 'Open new window containing webview'">&#8593;</a>
   </li>
-  <li>
-    <a href="/apps/tags/webview#tag" title="Read '&lt;webview&gt; Tag attributes' in the Chrome developer docs">&lt;webview&gt; Tag attributes</a>
-    <a href="#open-webview" class="anchor-link-icon" title="This feature mentioned in 'Open new window containing webview'">&#8593;</a>
-  </li>
 
 </ul>