diff --git a/src/Platform/CMakeLists.txt b/src/Platform/CMakeLists.txt
index 43f072490..5ff61f660 100644
--- a/src/Platform/CMakeLists.txt
+++ b/src/Platform/CMakeLists.txt
@@ -84,6 +84,11 @@ if(WITH_WINDOWLESSNACLAPPLICATION)
install(TARGETS MagnumWindowlessNaClApplication DESTINATION ${MAGNUM_LIBRARY_INSTALL_DIR})
endif()
+# JavaScript stuff for NaCl
+if(WITH_NACLAPPLICATION OR WITH_WINDOWLESSNACLAPPLICATION)
+ install(FILES NaClApplication.js DESTINATION ${MAGNUM_DATA_INSTALL_DIR})
+endif()
+
# GLX application
if(WITH_GLXAPPLICATION)
set(NEED_ABSTRACTXAPPLICATION 1)
diff --git a/src/Platform/NaClApplication.css b/src/Platform/NaClApplication.css
new file mode 100644
index 000000000..a2abf2c85
--- /dev/null
+++ b/src/Platform/NaClApplication.css
@@ -0,0 +1,51 @@
+body {
+ margin: 0px;
+ padding: 0px;
+ font-family: sans-serif;
+ background-color: #111111;
+ color: #aaaaaa;
+}
+
+h1 {
+ text-align: center;
+ font-size: 20px;
+}
+
+#listener {
+ border-style: solid;
+ border-color: #333333;
+ border-width: 1px;
+ padding: 1px;
+ width: 640px;
+ height: 480px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ position: relative;
+}
+
+#module {
+ width: 640px;
+ height: 480px;
+ z-index: 10;
+}
+
+#status {
+ position: absolute;
+ width: 640px;
+ text-align: center;
+ top: 200px;
+ font-size: 30px;
+ font-weight: bold;
+ z-index: 9;
+}
+
+#statusDescription {
+ position: absolute;
+ width: 640px;
+ text-align: center;
+ top: 250px;
+ font-size: 15px;
+ z-index: 9;
+}
diff --git a/src/Platform/NaClApplication.h b/src/Platform/NaClApplication.h
index e1a04d654..75b65d68c 100644
--- a/src/Platform/NaClApplication.h
+++ b/src/Platform/NaClApplication.h
@@ -73,12 +73,53 @@ to simplify porting.
@section NaClApplication-html HTML markup and NMF file
-You need to provide HTML markup containing `<embed>` pointing to `*.nmf`
-file describing the application.
+You need to provide HTML markup for your application. Template one is below,
+you can modify it to your liking. The markup references two files,
+`NaClApplication.js` and `NaClApplication.css`, both are in `Platform/`
+directory in the source tree and are also installed into `share/magnum/` inside
+your NaCl toolchain.
+@code
+
+
+
+Magnum NaCl Application
+
+
+
+
Magnum NaCl Application
+
+
+
+
Initialization...
+
+
+
+
+@endcode
+
+You can modify all the files to your liking, but the HTML file must contain at
+least the `<embed>` enclosed in listener `<div>`. The JavaScript
+file contains event listeners which print loading status on the page. The
+status displayed in the remaining two `<div>`s, if they are available.
+The CSS file contains rudimentary style to avoid eye bleeding.
+
+The `<embed>` file references NMF file which you need to provide too. If
+you target @ref CORRADE_TARGET_NACL_NEWLIB_ "newlib", the file is pretty
+simple, for example:
+@code
+{
+ "program": {
+ "x86-32": {"url": "application-x86-32.nexe"},
+ "x86-64": {"url": "application-x86-64.nexe"}
+ }
+}
+@endcode
-@todoc Document this better, add "bootstrap" examples
+If you target @ref CORRADE_TARGET_NACL_GLIBC_ "glibc", you need to specify also
+all additional dependencies. See [Native Client](https://developers.google.com/native-client/)
+documentation for more information.
-@subsection NaClApplication-html-console Redirecting output to Chrome's JavaScript console
+@section NaClApplication-console Redirecting output to Chrome's JavaScript console
The application redirects @ref Corrade::Utility::Debug "Debug",
@ref Corrade::Utility::Warning "Warning" and @ref Corrade::Utility::Error "Error"
diff --git a/src/Platform/NaClApplication.js b/src/Platform/NaClApplication.js
new file mode 100644
index 000000000..50bbe023a
--- /dev/null
+++ b/src/Platform/NaClApplication.js
@@ -0,0 +1,43 @@
+function setStatus(message) {
+ var status = document.getElementById('status');
+ if(status) status.innerHTML = message;
+}
+
+function setStatusDescription(message) {
+ var statusDescription = document.getElementById('statusDescription');
+ if(statusDescription) statusDescription.innerHTML = message;
+}
+
+var listener = document.getElementById('listener');
+
+listener.addEventListener('loadstart', function() {
+ setStatus('Loading...');
+}, true);
+
+listener.addEventListener('progress', function(event) {
+ setStatus('Downloading...');
+
+ /* Show progress */
+ if(event.lengthComputable && event.total > 0)
+ setStatusDescription(Math.round(event.loaded*100/event.total) + '% of '
+ + Math.round(event.total/1024) + ' kB');
+
+ /* Unknown total size */
+ else setStatusDescription(Math.round(event.loaded/1024) + ' kB');
+
+}, true);
+
+listener.addEventListener('error', function() {
+ setStatus('Loading failed');
+ setStatusDescription(document.getElementById('module').lastError + ' Check JavaScript console for more information.');
+}, true);
+
+listener.addEventListener('abort', function() {
+ setStatus('Loading aborted');
+ setStatusDescription('');
+}, true);
+
+listener.addEventListener('load', function() {
+ setStatus('');
+ setStatusDescription('');
+}, true);
diff --git a/src/Platform/WindowlessNaClApplication.h b/src/Platform/WindowlessNaClApplication.h
index d0f4ebb19..54de3ea05 100644
--- a/src/Platform/WindowlessNaClApplication.h
+++ b/src/Platform/WindowlessNaClApplication.h
@@ -71,11 +71,12 @@ If no other application header is included this class is also aliased to
@section WindowlessNaClApplication-html HTML markup and NMF file
You need to provide HTML markup containing `<embed>` pointing to `*.nmf`
-file describing the application.
+file describing the application. See @ref NaClApplication for more information.
+You may want to hide the `<embed>` (for example using CSS
+`visibility: hidden;`), as it probably won't display anything to default
+framebuffer.
-@todoc Document this better, add "bootstrap" examples
-
-@subsection WindowlessNaClApplication-html-console Redirecting output to Chrome's JavaScript console
+@section WindowlessNaClApplication-console Redirecting output to Chrome's JavaScript console
The application redirects @ref Corrade::Utility::Debug "Debug",
@ref Corrade::Utility::Warning "Warning" and @ref Corrade::Utility::Error "Error"
diff --git a/src/Platform/magnum-info-nacl.html b/src/Platform/magnum-info-nacl.html
index f12bcf996..4a3af2251 100644
--- a/src/Platform/magnum-info-nacl.html
+++ b/src/Platform/magnum-info-nacl.html
@@ -2,37 +2,10 @@
Magnum Info
+
-
+