[NaCl SDK Docs] Only generate one top-level <section> element.

native_client_sdk/doc_generated/devguide/tutorial/tutorial-part2.html

 {{+bindTo:partials.standard_nacl_article}}
 
 <section id="c-tutorial-getting-started-part-2">
 <span id="tutorial2"></span><h1 id="c-tutorial-getting-started-part-2"><span id="tutorial2"></span>C++ Tutorial: Getting Started (Part 2)</h1>
 <div class="contents local" id="contents" style="display: none">
 <ul class="small-gap">
 <li><a class="reference internal" href="#overview" id="id1">Overview</a></li>
 <li><p class="first"><a class="reference internal" href="#using-the-native-client-sdk-build-system" id="id2">Using the Native Client SDK build system</a></p>
 <ul class="small-gap">
 <li><a class="reference internal" href="#simplifying-the-makefile" id="id3">Simplifying the Makefile</a></li>
@@ skipping 10 matching lines @@
 </ul>
 </li>
 <li><p class="first"><a class="reference internal" href="#sharing-common-code-with-common-js" id="id11">Sharing common code with common.js</a></p>
 <ul class="small-gap">
 <li><a class="reference internal" href="#loading-the-page-and-creating-the-module" id="id12">Loading the page and creating the module</a></li>
 </ul>
 </li>
 <li><a class="reference internal" href="#example-specific-behavior-with-example-js" id="id13">Example-specific behavior with example.js</a></li>
 </ul>
 
-</div><section id="overview">
-<h2 id="overview">Overview</h2>
+</div><h2 id="overview">Overview</h2>
 <p>This tutorial shows how to convert the finished PNaCl web application from
 <a class="reference internal" href="/native-client/devguide/tutorial/tutorial-part1.html"><em>Part 1</em></a> to use the Native Client SDK build system and
 common JavaScript files. It also demonstrates some techniques to make your web
 application <a class="reference external" href="/apps/contentSecurityPolicy">Content Security Policy (CSP)-compliant</a>, which is necessary for <a class="reference external" href="/apps/about_apps">Chrome Apps</a>.</p>
 <p>Using the Native Client SDK build system makes it easy to build with all of the
 SDK toolchains, and switch between the Debug and Release configurations. It
 also simplifies the makefiles for your project, as we&#8217;ll see in the next
 section. Finally, it adds some useful commands for <a class="reference internal" href="/native-client/sdk/examples.html#id1"><em>running</em></a> and <a class="reference internal" href="/native-client/sdk/examples.html#debugging-the-sdk-examples"><em>debugging</em></a>
 your application.</p>
 <p>The finished code for this example can be found in the
 <code>pepper_$(VERSION)/getting_started/part2</code> directory in the Native Client SDK
 download.</p>
-</section><section id="using-the-native-client-sdk-build-system">
 <h2 id="using-the-native-client-sdk-build-system">Using the Native Client SDK build system</h2>
 <p>This section describes how to use the SDK build system. To do so, we&#8217;ll make
 changes in the makefile. Because the makefile in part1 and part2 are so
 different, it is easier to start from scratch. Here is the contents of the new
 makefile. The following sections will describe it in more detail.</p>
-<section id="simplifying-the-makefile">
 <h3 id="simplifying-the-makefile">Simplifying the Makefile</h3>
 <p>The makefile from part1 only supports one toolchain (PNaCl) and one
 configuration (Release). It also only supports one source file. It&#8217;s relatively
 simple, but if we want to add support for multiple toolchains, configurations,
 source files, or build steps, it would grow increasingly complex. The SDK build
 system uses a set of variables and macros to make this possible, without
 significantly increasing the complexity of the makefile.</p>
 <p>Here is the new makefile, supporting three toolchains (PNaCl, Newlib NaCl,
 Glibc NaCl) and two configurations (Debug, Release).</p>
 <pre class="prettyprint">
@@ skipping 16 matching lines @@
 # On NaCl, only produce a stripped binary for Release configs (not Debug).
 ifneq (,$(or $(findstring pnacl,$(TOOLCHAIN)),$(findstring Release,$(CONFIG))))
 $(eval $(call LINK_RULE,$(TARGET)_unstripped,$(SOURCES),$(LIBS),$(DEPS)))
 $(eval $(call STRIP_RULE,$(TARGET),$(TARGET)_unstripped))
 else
 $(eval $(call LINK_RULE,$(TARGET),$(SOURCES),$(LIBS),$(DEPS)))
 endif
 
 $(eval $(call NMF_RULE,$(TARGET),))
 </pre>
-</section><section id="choosing-valid-toolchains-and-including-common-mk">
 <h3 id="choosing-valid-toolchains-and-including-common-mk">Choosing valid toolchains, and including common.mk</h3>
 <p>The makefile begins by specifying the toolchains that are valid for this
 project. The Native Client SDK build system supports multi-toolchain projects
 for its examples and libraries, but generally you will choose one toolchain
 when you begin your project and never change it. Please see the
 <a class="reference internal" href="/native-client/overview.html#toolchains"><em>Toolchains section of the Native Client overview</em></a> for more
 information.</p>
 <p>For this example, we support the <code>pnacl</code>, <code>newlib</code> and <code>glibc</code> toolchains.</p>
 <pre class="prettyprint">
 VALID_TOOLCHAINS := pnacl newlib glibc
@@ skipping 10 matching lines @@
 here. You can also override this default by setting the <code>NACL_SDK_ROOT</code>
 environment variable. See <a class="reference internal" href="/native-client/devguide/tutorial/tutorial-part1.html#tutorial-step-5"><em>Step 5 of Part 1 of this tutorial</em></a> for more details.</div></blockquote>
 
 </aside>
 <p>Next, we include the file <code>tools/common.mk</code>. This file provides the
 functionality for the Native Client SDK build system, including new build rules
 to compile and link a project, which we&#8217;ll use below.</p>
 <pre class="prettyprint">
 include $(NACL_SDK_ROOT)/tools/common.mk
 </pre>
-</section><section id="configuring-your-project">
 <h3 id="configuring-your-project">Configuring your project</h3>
 <p>After including <code>tools/common.mk</code>, we configure the project by specifying its
 name, the sources and libraries it uses:</p>
 <pre class="prettyprint">
 TARGET = part2
 LIBS = ppapi_cpp ppapi
 
 CFLAGS = -Wall
 SOURCES = hello_tutorial.cc
 </pre>
@@ skipping 24 matching lines @@
 <dd>A list of C or C++ sources to compile, separated by spaces. If you have a
 long list of sources, it may be easier to read if you put each file on its
 own line, and use <code>\</code> as a line-continuation character. Here&#8217;s an example:</dd>
 </dl>
 <pre class="prettyprint">
 SOURCES = foo.cc \
           bar.cc \
           baz.cc \
           quux.cc
 </pre>
-</section><section id="build-macros">
 <h3 id="build-macros">Build macros</h3>
 <p>For many projects, the following build macros do not need to be changed; they
 will use the variables we&#8217;ve defined above.</p>
 <pre class="prettyprint">
 $(foreach src,$(SOURCES),$(eval $(call COMPILE_RULE,$(src),$(CFLAGS))))
 
 ifneq (,$(or $(findstring pnacl,$(TOOLCHAIN)),$(findstring Release,$(CONFIG))))
 $(eval $(call LINK_RULE,$(TARGET)_unstripped,$(SOURCES),$(LIBS),$(DEPS)))
 $(eval $(call STRIP_RULE,$(TARGET),$(TARGET)_unstripped))
 else
@@ skipping 23 matching lines @@
 $(eval $(call STRIP_RULE,$(TARGET),$(TARGET)_unstripped))
 else
 $(eval $(call LINK_RULE,$(TARGET),$(SOURCES),$(LIBS),$(DEPS)))
 endif
 </pre>
 <p>Finally, the NMF rule generates a NaCl manifest file (<code>.nmf</code>) that references
 each executable generated in the previous step:</p>
 <pre class="prettyprint">
 $(eval $(call NMF_RULE,$(TARGET),))
 </pre>
-</section></section><section id="making-index-html-work-for-chrome-apps">
 <h2 id="making-index-html-work-for-chrome-apps">Making index.html work for Chrome Apps</h2>
 <p>This section describes the changes necessary to make the HTML and JavaScript in
 part1 CSP-compliant. This is required if you want to build a <a class="reference external" href="/apps/about_apps">Chrome App</a>, but is not necessary if you want to use PNaCl on the open
 web.</p>
-<section id="csp-rules">
 <h3 id="csp-rules">CSP rules</h3>
 <p><a class="reference external" href="/apps/contentSecurityPolicy#what">Chrome Apps CSP</a> restricts you from doing
 the following:</p>
 <ul class="small-gap">
 <li>You can’t use inline scripting in your Chrome App pages. The restriction
 bans both <code>&lt;script&gt;</code> blocks and event handlers (<code>&lt;button onclick=&quot;...&quot;&gt;</code>).</li>
 <li>You can’t reference any external resources in any of your app files (except
 for video and audio resources). You can’t embed external resources in an
 iframe.</li>
 <li>You can’t use string-to-JavaScript methods like <code>eval()</code> and <code>new
 Function()</code>.</li>
 </ul>
-</section><section id="making-index-html-csp-compliant">
 <h3 id="making-index-html-csp-compliant">Making index.html CSP-compliant</h3>
 <p>To make our application CSP-compliant, we have to remove inline scripting. As
 described above, we can&#8217;t use inline <code>&lt;script&gt;</code> blocks or event handlers. This
 is easy to do&#8212;we&#8217;ll just reference some new files from our script tag, and
 remove all of our inlined scripts:</p>
 <pre class="prettyprint">
 &lt;head&gt;
   ...
   &lt;script type=&quot;text/javascript&quot; src=&quot;common.js&quot;&gt;&lt;/script&gt;
   &lt;script type=&quot;text/javascript&quot; src=&quot;example.js&quot;&gt;&lt;/script&gt;
 &lt;/head&gt;
 </pre>
 <p><code>common.js</code> has shared code used by all SDK examples, and is described
 later in this document. <code>example.js</code> is a script that has code specific to
 this example.</p>
 <p>We also need to remove the inline event handler on the body tag:</p>
 <pre class="prettyprint">
 &lt;body onload=&quot;pageDidLoad()&quot;&gt;
 ...
 </pre>
 <p>This logic is now handled by <code>common.js</code>.</p>
-</section><section id="making-index-html-support-different-toolchains-and-configurations">
 <h3 id="making-index-html-support-different-toolchains-and-configurations">Making index.html support different toolchains and configurations</h3>
 <p>Finally, there are a few changes to <code>index.html</code> that are not necessary for
 CSP-compliance, but help make the SDK examples more generic.</p>
 <p>First, we add some <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">data attributes</a>
 to the body element to specify the name, supported toolchains, supported
 configurations, and path to the <code>.nmf</code> file:</p>
 <pre class="prettyprint">
 &lt;body data-name=&quot;part2&quot;
     data-tools=&quot;newlib glibc pnacl&quot;
     data-configs=&quot;Debug Release&quot;
     data-path=&quot;{tc}/{config}&quot;&gt;
 ...
 </pre>
 <p><code>common.js</code> will read these data attributes to allow you to load the same
 example with different toolchains by changing the URL&#8217;s <a class="reference external" href="http://en.wikipedia.org/wiki/Query_string">query string</a>. For example, you can load the
 glibc Debug version of this example by navigating to
 <code>index.html?tc=glibc&amp;config=Debug</code>.</p>
 <p>Next, we remove the <code>embed</code> element that is described in HTML. This will be
 automatically added for us by <code>common.js</code>, based on the current
 toolchain/configuration combination:</p>
 <pre class="prettyprint">
 &lt;!--
 Just as in part1, the &lt;embed&gt; element will be wrapped inside the &lt;div&gt;
 element with the id &quot;listener&quot;. In part1, the embed was specified in HTML,
 here the common.js module creates a new &lt;embed&gt; element and adds it to the
 &lt;div&gt; for us.
 --&gt;
 &lt;div id=&quot;listener&quot;&gt;&lt;/div&gt;
 </pre>
-</section></section><section id="sharing-common-code-with-common-js">
 <h2 id="sharing-common-code-with-common-js">Sharing common code with common.js</h2>
 <p><code>common.js</code> contains JavaScript code that each example uses to create a
 NaCl module, handle messages from that module and other common tasks like
 displaying the module load status and logging messages. Explaining all of
 <code>common.js</code> is outside the scope of this document, but please look at the
 documentation in that file for more information.</p>
-<section id="loading-the-page-and-creating-the-module">
 <h3 id="loading-the-page-and-creating-the-module">Loading the page and creating the module</h3>
 <p>Since we&#8217;ve added <code>&lt;script&gt;</code> tags for <code>common.js</code> and <code>example.js</code> to the
 <code>head</code> element, they will be loaded and executed before the rest of the
 document has been parsed. As a result, we have to wait for the page to finish
 loading before we try to create the embed element and add it to the page.</p>
 <p>We can do that by calling <code>addEventListener</code> and listening for the
 <code>DOMContentLoaded</code> event:</p>
 <pre class="prettyprint">
 // Listen for the DOM content to be loaded. This event is fired when parsing of
 // the page's document has finished.
@@ skipping 106 matching lines @@
 <pre class="prettyprint">
 function moduleDidLoad() {
   common.naclModule = document.getElementById('nacl_module');
   updateStatus('RUNNING');
 
   if (typeof window.moduleDidLoad !== 'undefined') {
     window.moduleDidLoad();
   }
 }
 </pre>
-</section></section><section id="example-specific-behavior-with-example-js">
 <h2 id="example-specific-behavior-with-example-js">Example-specific behavior with example.js</h2>
 <p>As described in the previous section, <code>common.js</code> will call certain functions
 during the module loading process. This example only needs to respond to two:
 <code>moduleDidLoad</code> and <code>handleMessage</code>.</p>
 <pre class="prettyprint">
 // This function is called by common.js when the NaCl module is
 // loaded.
 function moduleDidLoad() {
   // Once we load, hide the plugin. In this example, we don't display anything
   // in the plugin, so it is fine to hide it.
   common.hideModule();
 
   // After the NaCl module has loaded, common.naclModule is a reference to the
   // NaCl module's &lt;embed&gt; element.
   //
   // postMessage sends a message to it.
   common.naclModule.postMessage('hello');
 }
 
 // This function is called by common.js when a message is received from the
 // NaCl module.
 function handleMessage(message) {
   var logEl = document.getElementById('log');
   logEl.textContent += message.data;
 }
 </pre>
-</section></section>
+</section>
 
 {{/partials.standard_nacl_article}}