PNaClize and update the 'Devguide -> Running' page of the documentation.

BUG= https://code.google.com/p/nativeclient/issues/detail?id=3634
R=binji@chromium.org

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

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

5 files changed, 135 insertions, 90 deletions

diff --git a/native_client_sdk/src/doc/devguide/devcycle/building.rst b/native_client_sdk/src/doc/devguide/devcycle/building.rst
index d1a6b04..dd1f243 100644
--- a/native_client_sdk/src/doc/devguide/devcycle/building.rst
+++ b/native_client_sdk/src/doc/devguide/devcycle/building.rst
@@ -94,7 +94,7 @@ toolchains are located in directories named
 * *<architecture>* is your target architecture (x86 or arm)
 * *<library>* is the C library you are compiling with (newlib or glibc)
 
-The compilers, linkers, and other tools are located in the ``bin/`` 
+The compilers, linkers, and other tools are located in the ``bin/``
 subdirectory in each toolchain. For example, the tools in the Windows SDK
 for PNaCl has a C++ compiler in ``toolchain/win_pnacl/bin/pnacl-clang++``.
 As another example, the GCC-based C++ compiler that targets the x86 and uses the
diff --git a/native_client_sdk/src/doc/devguide/devcycle/running.rst b/native_client_sdk/src/doc/devguide/devcycle/running.rst
index 17d8ad5..a6ad2ec 100644
--- a/native_client_sdk/src/doc/devguide/devcycle/running.rst
+++ b/native_client_sdk/src/doc/devguide/devcycle/running.rst
@@ -4,7 +4,7 @@
 Running
 #######
 
-.. contents:: Table Of Contents
+.. contents::
   :local:
   :backlinks: none
   :depth: 2
@@ -15,6 +15,27 @@ Introduction
 This document describes how to run Native Client applications during
 development.
 
+The workflow for PNaCl applications is straightfoward and will only be discussed
+briefly. For NaCl applications distributed through the web-store, there is a
+number of options and these will be discussed more in-depth.
+
+Portable Native Client (PNaCl) applications
+===========================================
+
+Running PNaCl applications from the open web is enabled in Chrome version 31 and
+above; therefore, no special provisions are required to run and test such
+applications locally. An application that uses a PNaCl module can be tested
+similarly to any other web application that only consists of HTML, CSS and
+JavaScript.
+
+To better simulate a production environment, it's recommended to start a local
+web server to serve the application's files. The NaCl SDK comes with a simple
+local server built in, and the process of using it to run PNaCl applications is
+described in :ref:`the tutorial <tutorial_step_2>`.
+
+Native Client applications and the Chrome Web Store
+===================================================
+
 Before reading about how to run Native Client applications, it's important to
 understand a little bit about how Native Client applications are distributed.
 As explained in :doc:`Distributing Your Application <../distributing>`, Native
@@ -43,42 +64,67 @@ below. Each technique has certain requirements (NaCl flag, web server, and/or
 CWS metadata); these are explained in the :ref:`Requirements <requirements>`
 section below.
 
-+-----------+----------------------+---------------------+-----------------------+-------------+
-| Technique | Requires NaCl flag   | Requires web server | Requires CWS metadata | Description |
-+===========+======================+=====================+=======================+=============+
-| 1         | local server         |                     |                       |             |
-+-----------+----------------------+---------------------+-----------------------+-------------+
-| 2         | packaged application |                     |                       |             |
-|           | loaded as an         |                     |                       |             |
-|           | unpacked extension   |                     |                       |             |
-+-----------+----------------------+---------------------+-----------------------+-------------+
-| 3         | hosted application   |                     |                       |             |
-|           | loaded as an unpacked|                     |                       |             |
-|           | extension            |                     |                       |             |
-+-----------+----------------------+---------------------+-----------------------+-------------+
-| 4         | Chrome Web Store     |                     |                       |             |
-|           | application with     |                     |                       |             |
-|           | trusted testers      |                     |                       |             |
-+-----------+----------------------+---------------------+-----------------------+-------------+
-
-Which of the above techniques you use to run your application during
-development is largely a matter of personal preference (i.e., would you rather
-start a local server or create CWS metadata?). As a general rule, once you have
-an idea of how you plan to distribute your application, you should use the
-corresponding technique during development (technique # 2 for packaged
-applications and extensions; technique # 3 for hosted applications). Choosing a
-distribution option depends on a number of factors such as application size,
-application start-up time, hosting costs, offline functionality, etc. (see
-:doc:`Distributing Your Application <../distributing>` for details), but you
-don't need to make a decision about how to distribute your application at the
-outset.
+.. list-table::
+   :header-rows: 1
+
+   * - #
+     - Technique
+     - Requires NaCl flag
+     - Requires Web Server
+     - Requires CWS Metadata
+     - Description
+   * - 1
+     - Local server
+     - |CHK|
+     - |CHK|
+     -
+     - Run a local server and simply point your browser to your application on
+       the server.
+   * - 2
+     - Packaged application loaded as an unpacked extension
+     -
+     -
+     - |CHK|
+     - Load your packaged application into Chrome as an unpacked extension and
+       run it without a server. An unpacked extension is simply an application
+       whose source and metadata files are located in a plain (unzipped) folder
+       on your development machine. The CWS manifest file (explained below) must
+       specify a ``local_path`` field.
+   * - 3
+     - Hosted application loaded as an unpacked extension
+     -
+     - |CHK|
+     - |CHK|
+     - Load your hosted application into Chrome as an unpacked extension and run
+       it from a server (which can be a local server). The CWS manifest file
+       must specify a ``web_url`` field.
+   * - 4
+     - CWS application with untrusted testers
+     -
+     -
+     - |CHK|
+     - This is the standard technique for distributing a packaged or hosted
+       application in the CWS, but you can limit the application to a few
+       trusted testers. This technique requires a server if your application is
+       a hosted application.
+
+.. |CHK| image:: /images/check-red.png
+
+Which of the above techniques you use to run your application during development
+is largely a matter of personal preference (i.e., would you rather start a local
+server or create CWS metadata?). As a general rule, once you have an idea of how
+you plan to distribute your application, you should use the corresponding
+technique during development. Choosing a distribution option depends on a number
+of factors such as application size, application start-up time, hosting costs,
+offline functionality, etc. (see :doc:`Distributing Your Application
+<../distributing>` for details), but you don't need to make a decision about how
+to distribute your application at the outset.
 
 The next two sections of this document describe a couple of prerequisites for
-running applications during development (using the correct version of Chrome
-and turning off the Chrome cache), and explain the three requirements listed in
-the table above (NaCl flag, web server, and CWS metadata). The subsequent
-sections of the document provide instructions for how to use each of the four
-techniques.
+running applications during development, and explain the three requirements
+listed in the table above (NaCl flag, web server, and CWS metadata). The
+subsequent sections of the document provide instructions for how to use each of
+the four techniques.
 
 Prerequisites
 =============
@@ -91,28 +137,17 @@ correct version of Chrome. Each version of Chrome supports a corresponding
 version of the Pepper API. You (and your users) must use a version of Chrome
 that is equal to or higher than the version of the Pepper API that your
 application uses. For example, if you compiled your application using the
-``pepper_28`` bundle, your application uses the Pepper 28 API, and you must run
-the application in Chrome 28 or higher. To check which version of Chrome you're
-using, type ``about:chrome`` or ``about:version`` in the Chrome address bar
-(the latter address shows additional information such as the Chrome command
-line and profile path).
-
-If your application requires a minimum version of Chrome, you are encouraged to
-include code in the application to check that the user's browser is compatible
-with the application. For sample code that checks the user's browser version,
-refer to the ``load_progress`` example in the Native Client SDK.
+``pepper_31`` bundle, your application uses the Pepper 31 API, and you must run
+the application in Chrome 31 or higher. To check which version of Chrome you're
+using, type ``about:version`` in the Chrome address bar.
 
 Chrome Cache
 ------------
 
-Chrome caches resources aggressively. You should disable Chrome's cache
-whenever you are developing a Native Client application in order to make sure
-Chrome loads new versions of your application. To disable the cache:
-
-#. Open Chrome's developer tools by clicking the menu icon |menu-icon| and
-   choosing **Tools > Developer tools**.
-#. Click the gear icon  in the bottom right corner of the Chrome window.
-#. Under the "General" settings, check the box next to "Disable cache".
+Chrome caches resources aggressively. You should disable Chrome's cache whenever
+you are developing a Native Client application in order to make sure Chrome
+loads new versions of your application. Follow the instructions :ref:`in the
+tutorial <tutorial_step_3>`.
 
 .. _requirements:
 
@@ -136,9 +171,9 @@ Client flag in Chrome as follows:
 #. If the link below "Native Client" says "Enable":
 
    * Click the "Enable" link.
-   * Scroll down to the bottom of the page and click the "Relaunch Now" button.
-     **Native Client will not be enabled until you relaunch your browser**. All
-     browser windows will restart when you relaunch Chrome.
+   * Click the "Relaunch Now" button in the bottom of the screen. **Native
+     Client will not be enabled until you relaunch your browser**. All browser
+     windows will restart when you relaunch Chrome.
 
 If you enable the Native Client flag and still can't run applications from
 outside the Chrome Web Store, you may need to enable the Native Client plugin:
@@ -149,7 +184,6 @@ outside the Chrome Web Store, you may need to enable the Native Client plugin:
    the Native Client plugin. You do not need to relaunch Chrome after enabling
    the Native Client plugin.
 
-
 .. _web_server:
 
 Web server
@@ -158,27 +192,22 @@ Web server
 For security reasons, Native Client applications must come from a server (you
 can't simply drag HTML files into your browser). The Native Client SDK comes
 with a lightweight Python web server that you can run to serve your application
-locally. The server is included in the ``examples`` directory in the SDK
-bundles (e.g., ``pepper_28/examples``). Here is how to run the server:
-
-* Windows::
+locally. The server can be invoked from a Makefile. Here is how to run the
+server:
 
-    cd examples
-    httpd.cmd
+.. naclcode::
+  :prettyprint: 0
 
-* Mac, Linux::
+  $ cd examples
+  $ make serve
 
-    cd examples
-    python httpd.py
+By default, the server listens for requests on port 5103. You can use the server
+to run most applications under the ``examples`` directory where you started the
+server. For example, to run the ``flock`` example in the SDK, start the server
+and point your browser to http://localhost:5103/demo/flock/.
 
-By default, the server listens for requests on port 5103. To use a different
-port, simply specify a different port number, e.g.: ``python httpd.py 5104``.
-
-You can use the server to run any application under the ``examples`` directory
-where you started the server. For example, to run the
-``hello_world_interactive`` example in the SDK, start the server as described
-above and point your browser to
-http://localhost:5103/hello_world_interactive/hello_world.html.
+Some of the applications need special flags to Chrome, and must be run with the
+``make run`` command. See :ref:`run_sdk_examples` for more details.
 
 .. _metadata:
 
@@ -186,17 +215,19 @@ Chrome Web Store metadata
 ~~~~~~~~~~~~~~~~~~~~~~~~~
 
 Applications published in the Chrome Web Store must be accompanied by CWS
-metadata—specifically, a Chrome Web Store manifest file named
+metadata; specifically, a Chrome Web Store manifest file named
 ``manifest.json``, and at least one icon.
 
-Below is an example of a CWS manifest file for a **hosted application**::
+Below is an example of a CWS manifest file for a **hosted application**:
+
+.. naclcode::
 
   {
     "name": "My NaCl App",
     "description": "Simple game implemented using Native Client",
     "version": "0.1",
     "icons": {
-      "128": "nacl_icon_128.jpg"
+      "128": "icon128.png"
     },
     "app": {
       "urls": [
@@ -210,15 +241,17 @@ Below is an example of a CWS manifest file for a **hosted application**::
 
 
 For a **packaged application**, you can omit the urls field, and replace the
-``web_url`` field with a ``local_path`` field, as shown below::
+``web_url`` field with a ``local_path`` field, as shown below:
+
+.. naclcode::
 
   {
     "name": "My NaCl App",
     "description": "Simple game implemented using Native Client",
     "version": "0.1",
     "icons": {
-      "16": "nacl_icon_16.jpg",
-      "128": "nacl_icon_128.jpg"
+      "16": "icon16.png",
+      "128": "icon128.png"
     },
     "app": {
       "launch": {
@@ -230,11 +263,18 @@ For a **packaged application**, you can omit the urls field, and replace the
 You must put the ``manifest.json`` file in the same directory as your
 application's main HTML page.
 
-If you don't have icons for your application, you can use the following icons
-as placeholders: nacl_icon_16.jpg and nacl_icon_128.jpg. Put the icons in the
-same directory as the CWS manifest file.
+If you don't have icons for your application, you can use the following icons as
+placeholders:
+
+|ICON16|
 
-For more information about CWS manifest files and application icons, see:
+|ICON128|
+
+.. |ICON16| image:: /images/icon16.png
+.. |ICON128| image:: /images/icon128.png
+
+Put the icons in the same directory as the CWS manifest file. For more
+information about CWS manifest files and application icons, see:
 
 * `Chrome Web Store Tutorial: Getting Started
   <https://developers.google.com/chrome/web-store/docs/get_started_simple>`_
@@ -249,7 +289,7 @@ To run your application from a local server:
 * Enable the :ref:`Native Client flag <flag>` in Chrome.
 * Start a :ref:`local web server <web_server>`.
 * Put your application under the examples directory in the SDK bundle you are
-  using (e.g., in the directory ``pepper_28/examples/my_app``).
+  using (e.g., in the directory ``pepper_31/examples/my_app``).
 * Access your application on the local server by typing the location of its
   HTML file in Chrome, e.g.:
   ``http://localhost:5103/my_app/my_app_main_page.html``.
@@ -259,7 +299,7 @@ To run your application from a local server:
 
   **Note:** You don't have to use a local web server---you can use another
   server if you already have one running. You must still enable the Native
-  Client flag in order to run your application from your server.
+  Client flag in order to run your application from the server.
 
 Technique 2: Packaged application loaded as an unpacked extension
 =================================================================
@@ -297,10 +337,11 @@ application into Chrome (including troubleshooting information), see the
 `Chrome Web Store Tutorial: Getting Started
 <https://developers.google.com/chrome/web-store/docs/get_started_simple>`_.
 
+See also :ref:`run_sdk_examples_as_packaged`.
+
 Technique 3: Hosted application loaded as an unpacked extension
 ===============================================================
 
-
 For development purposes, Chrome lets you load a hosted application as an
 unpacked extension. To load and run your hosted application as an unpacked
 extension:
@@ -315,7 +356,7 @@ extension:
    * If you're using the local server included with the Native Client SDK,
      simply put your application under the ``examples`` directory in the SDK
      bundle you are using (e.g., in the directory
-     ``pepper_28/examples/my_app``).
+     ``pepper_31/examples/my_app``).
 #. Create a Chrome Web Store manifest file and one or more icons for your
    application.
 
@@ -360,7 +401,8 @@ is how to do so:
      your application, as described above under :ref:`Chrome Web Store metadata
      <metadata>`. Note that packaged applications must have at least two icons
      (a 16x16 icon and a 128x128 icon).
-   * You also need to create the following additional assets before you can publish your application:
+   * You also need to create the following additional assets before you can
+     publish your application:
 
      * a screenshot (size must be 640x400 or 1280x800)
      * a promotional image called a "small tile" (size must be 440x280)
diff --git a/native_client_sdk/src/doc/images/icon128.png b/native_client_sdk/src/doc/images/icon128.png
new file mode 100644
index 0000000..a10c52a
--- /dev/null
+++ b/native_client_sdk/src/doc/images/icon128.png
diff --git a/native_client_sdk/src/doc/images/icon16.png b/native_client_sdk/src/doc/images/icon16.png
new file mode 100644
index 0000000..0a8d70c
--- /dev/null
+++ b/native_client_sdk/src/doc/images/icon16.png
diff --git a/native_client_sdk/src/doc/sdk/examples.rst b/native_client_sdk/src/doc/sdk/examples.rst
index 73c6a33..33de9cd 100644
--- a/native_client_sdk/src/doc/sdk/examples.rst
+++ b/native_client_sdk/src/doc/sdk/examples.rst
@@ -159,6 +159,8 @@ For details on how to use ``make``, see the `GNU 'make' Manual
 use the SDK toolchain itself, see :doc:`Building Native Client Modules
 <../devguide/devcycle/building>`.
 
+.. _run_sdk_examples:
+
 Run the SDK examples
 --------------------
 
@@ -202,6 +204,7 @@ You can run via a different toolchain or configuration by using the
 
   $ make run TOOLCHAIN=pnacl CONFIG=Debug
 
+.. _run_sdk_examples_as_packaged:
 
 Run the SDK examples as packaged apps
 -------------------------------------