From 1f4ef4262538c75d7f40fd16a76469dbca46c643 Mon Sep 17 00:00:00 2001
From: daboe01 <daboe01@googlemail.com>
Date: Thu, 13 Jun 2019 15:58:34 +0200
Subject: [PATCH] Fixed: index.html and index-debug.html were outdated in the
 manual tests (#2848)

---
 .../Manual/ArrayController1/index-debug.html  | 205 +++++++++++----
 Tests/Manual/ArrayController1/index.html      | 191 ++++++++++----
 .../index-debug.html                          | 203 +++++++++++----
 .../index.html                                | 192 ++++++++++----
 .../index-debug.html                          | 203 +++++++++++----
 .../index.html                                | 192 ++++++++++----
 Tests/Manual/AttachedSheet/index-debug.html   | 221 ++++++++++++----
 Tests/Manual/AttachedSheet/index.html         | 203 +++++++++++----
 Tests/Manual/AttachedSheet2/index-debug.html  | 201 +++++++++++----
 Tests/Manual/AttachedSheet2/index.html        | 191 ++++++++++----
 Tests/Manual/Bindings/index-debug.html        | 207 +++++++++++----
 Tests/Manual/Bindings/index.html              | 192 ++++++++++----
 Tests/Manual/CGCanvasContext/index-debug.html | 203 +++++++++++----
 Tests/Manual/CGCanvasContext/index.html       | 192 ++++++++++----
 Tests/Manual/CGPath/index-debug.html          | 176 ++++++++++---
 Tests/Manual/CGPath/index.html                | 167 +++++++++---
 Tests/Manual/CPAlertTest/index-debug.html     | 207 +++++++++++----
 Tests/Manual/CPAlertTest/index.html           | 192 ++++++++++----
 .../index-debug.html                          | 203 +++++++++++----
 .../index.html                                | 191 ++++++++++----
 .../CPAnimationContextTest/index-debug.html   |  12 +-
 .../Manual/CPAnimationContextTest/index.html  |  12 +-
 Tests/Manual/CPAnimationTest/index-debug.html |  26 +-
 Tests/Manual/CPAnimationTest/index.html       |  20 +-
 .../Manual/CPBinder-echo-bug/index-debug.html | 203 +++++++++++----
 Tests/Manual/CPBinder-echo-bug/index.html     | 191 ++++++++++----
 Tests/Manual/CPBoxTest/index-debug.html       | 205 +++++++++++----
 Tests/Manual/CPBoxTest/index.html             | 191 ++++++++++----
 Tests/Manual/CPBrowserTest/index-debug.html   | 215 ++++++++++++----
 Tests/Manual/CPBrowserTest/index.html         | 192 ++++++++++----
 .../index-debug.html                          | 241 ++++++++++++++----
 .../index.html                                | 202 +++++++++++----
 Tests/Manual/CPButtonTest/index-debug.html    | 205 +++++++++++----
 Tests/Manual/CPButtonTest/index.html          | 191 ++++++++++----
 .../CPByteCountFormatter/index-debug.html     | 201 +++++++++++----
 Tests/Manual/CPByteCountFormatter/index.html  | 191 ++++++++++----
 .../CPCollectionViewNibTest/index-debug.html  | 201 +++++++++++----
 .../Manual/CPCollectionViewNibTest/index.html | 191 ++++++++++----
 .../index-debug.html                          | 205 +++++++++++----
 .../CPColor-CPImage-description/index.html    | 191 ++++++++++----
 .../CPColorWellBindings/index-debug.html      | 205 +++++++++++----
 Tests/Manual/CPColorWellBindings/index.html   | 191 ++++++++++----
 Tests/Manual/CPComboBoxTest/index-debug.html  | 207 +++++++++++----
 Tests/Manual/CPComboBoxTest/index.html        | 192 ++++++++++----
 .../index-debug.html                          | 241 ++++++++++++++----
 .../index.html                                | 202 +++++++++++----
 Tests/Manual/CPControlSize/index-debug.html   |  25 +-
 Tests/Manual/CPControlSize/index.html         |  17 +-
 Tests/Manual/CPCursor/index-debug.html        | 220 ++++++++++++----
 Tests/Manual/CPCursor/index.html              | 205 +++++++++++----
 .../CPDateFormatterTest/index-debug.html      | 174 ++++++++++---
 Tests/Manual/CPDateFormatterTest/index.html   | 166 +++++++++---
 .../Manual/CPDatePickerTest/index-debug.html  | 199 +++++++++++----
 Tests/Manual/CPDatePickerTest/index.html      | 191 ++++++++++----
 .../index-debug.html                          | 199 +++++++++++----
 .../CPDictionaryControllerTest/index.html     | 191 ++++++++++----
 .../withNib/index-debug.html                  | 201 +++++++++++----
 .../withNib/index.html                        | 191 ++++++++++----
 .../withoutNib/index-debug.html               | 201 +++++++++++----
 .../withoutNib/index.html                     | 191 ++++++++++----
 Tests/Manual/CPFlashviewTest/index-debug.html | 203 +++++++++++----
 Tests/Manual/CPFlashviewTest/index.html       | 192 ++++++++++----
 Tests/Manual/CPFormatterTest/index-debug.html | 203 +++++++++++----
 Tests/Manual/CPFormatterTest/index.html       | 191 ++++++++++----
 Tests/Manual/CPGraphicsTest/index-debug.html  | 241 ++++++++++++++----
 Tests/Manual/CPGraphicsTest/index.html        | 202 +++++++++++----
 .../index-debug.html                          | 201 +++++++++++----
 .../CPImageViewAlignmentScaling/index.html    | 191 ++++++++++----
 Tests/Manual/CPImageViewTest/index-debug.html | 207 +++++++++++----
 Tests/Manual/CPImageViewTest/index.html       | 192 ++++++++++----
 .../CPImageViewbindingsTest/index-debug.html  | 205 +++++++++++----
 .../Manual/CPImageViewbindingsTest/index.html | 191 ++++++++++----
 .../Manual/CPLevelIndicator/index-debug.html  | 205 +++++++++++----
 Tests/Manual/CPLevelIndicator/index.html      | 191 ++++++++++----
 .../CPLocalizationTest/index-debug.html       |  23 +-
 Tests/Manual/CPLocalizationTest/index.html    |  15 +-
 Tests/Manual/CPLogTest/index-debug.html       | 241 ++++++++++++++----
 Tests/Manual/CPLogTest/index.html             | 202 +++++++++++----
 .../index-debug.html                          | 207 +++++++++++----
 .../CPMenuEnabledBindingsTest/index.html      | 192 ++++++++++----
 .../CPMenuKeyEquivalents/index-debug.html     | 207 +++++++++++----
 Tests/Manual/CPMenuKeyEquivalents/index.html  | 193 ++++++++++----
 .../CPMenuRemoveAllTest/index-debug.html      | 207 +++++++++++----
 Tests/Manual/CPMenuRemoveAllTest/index.html   | 192 ++++++++++----
 Tests/Manual/CPMenuTest/index-debug.html      | 207 +++++++++++----
 Tests/Manual/CPMenuTest/index.html            | 192 ++++++++++----
 .../CPOutlineViewCibTest/index-debug.html     | 205 +++++++++++----
 Tests/Manual/CPOutlineViewCibTest/index.html  | 191 ++++++++++----
 .../Manual/CPOutlineViewTest/index-debug.html | 224 ++++++++++++----
 Tests/Manual/CPOutlineViewTest/index.html     | 203 +++++++++++----
 .../index-debug.html                          | 201 +++++++++++----
 .../CPOutlineViewViewBasedCibTest/index.html  | 191 ++++++++++----
 Tests/Manual/CPPanelTest/index-debug.html     |  25 +-
 Tests/Manual/CPPanelTest/index.html           |  17 +-
 .../Manual/CPPlatformWindow/index-debug.html  |  25 +-
 Tests/Manual/CPPlatformWindow/index.html      |  17 +-
 .../CPPlattformWindowMinSize/index-debug.html | 207 +++++++++++----
 .../CPPlattformWindowMinSize/index.html       | 190 ++++++++++----
 .../CPPopUpButtonBindings/index-debug.html    | 206 +++++++++++----
 Tests/Manual/CPPopUpButtonBindings/index.html | 192 ++++++++++----
 .../Manual/CPPopUpButtonTest/index-debug.html | 207 +++++++++++----
 Tests/Manual/CPPopUpButtonTest/index.html     | 190 ++++++++++----
 Tests/Manual/CPPopover/index-debug.html       | 203 +++++++++++----
 Tests/Manual/CPPopover/index.html             | 192 ++++++++++----
 .../CPPredicateEditorCibTest/index-debug.html | 211 +++++++++++----
 .../CPPredicateEditorCibTest/index.html       | 193 ++++++++++----
 .../CPProgressIndicator/index-debug.html      | 201 +++++++++++----
 Tests/Manual/CPProgressIndicator/index.html   | 191 ++++++++++----
 .../index-debug.html                          | 207 +++++++++++----
 .../index.html                                | 192 ++++++++++----
 Tests/Manual/CPRadioBindings/index-debug.html | 174 ++++++++++---
 Tests/Manual/CPRadioBindings/index.html       | 166 +++++++++---
 .../CPRuleEditorCibTest/index-debug.html      | 206 +++++++++++----
 Tests/Manual/CPRuleEditorCibTest/index.html   | 192 ++++++++++----
 Tests/Manual/CPScrollView/index-debug.html    | 209 +++++++++++----
 Tests/Manual/CPScrollView/index.html          | 192 ++++++++++----
 Tests/Manual/CPScrollView2/index-debug.html   | 205 +++++++++++----
 Tests/Manual/CPScrollView2/index.html         | 191 ++++++++++----
 Tests/Manual/CPSearchField/index-debug.html   | 205 +++++++++++----
 Tests/Manual/CPSearchField/index.html         | 191 ++++++++++----
 .../index-debug.html                          |  10 +-
 .../CPSearchFieldPredicateBinding/index.html  |  10 +-
 .../index-debug.html                          | 174 ++++++++++---
 .../CPSegmentedControlBindings/index.html     | 166 +++++++++---
 .../CPSegmentedControlTest/index-debug.html   | 201 +++++++++++----
 .../Manual/CPSegmentedControlTest/index.html  | 191 ++++++++++----
 Tests/Manual/CPSoundTest/index-debug.html     | 207 +++++++++++----
 Tests/Manual/CPSoundTest/index.html           | 192 ++++++++++----
 .../CPSplitViewDivider/index-debug.html       |  25 +-
 Tests/Manual/CPSplitViewDivider/index.html    |  15 +-
 Tests/Manual/CPSplitViewTest/index-debug.html | 205 +++++++++++----
 Tests/Manual/CPSplitViewTest/index.html       | 191 ++++++++++----
 .../Manual/CPStepperBindings/index-debug.html | 201 +++++++++++----
 Tests/Manual/CPStepperBindings/index.html     | 191 ++++++++++----
 .../Manual/CPStepperNibTest/index-debug.html  | 205 +++++++++++----
 Tests/Manual/CPStepperNibTest/index.html      | 191 ++++++++++----
 Tests/Manual/CPTabView2/index-debug.html      | 207 +++++++++++----
 Tests/Manual/CPTabView2/index.html            | 192 ++++++++++----
 .../Manual/CPTabViewBindings/index-debug.html |  24 +-
 Tests/Manual/CPTabViewBindings/index.html     |  15 +-
 Tests/Manual/CPTabViewNib/index-debug.html    | 205 +++++++++++----
 Tests/Manual/CPTabViewNib/index.html          | 191 ++++++++++----
 .../CPTableViewGroupRows/index-debug.html     | 207 +++++++++++----
 Tests/Manual/CPTableViewGroupRows/index.html  | 192 ++++++++++----
 Tests/Manual/CPTextField/index-debug.html     | 207 +++++++++++----
 Tests/Manual/CPTextField/index.html           | 192 ++++++++++----
 .../index-debug.html                          |  24 +-
 .../CPTextFieldEditingStyleTest/index.html    |  16 +-
 .../CPTextFieldHeightTest/index-debug.html    | 240 +++++++++++++----
 Tests/Manual/CPTextFieldHeightTest/index.html | 201 +++++++++++----
 .../CPTextFieldMovementsTest/index-debug.html |  24 +-
 .../CPTextFieldMovementsTest/index.html       |  16 +-
 .../CPTextFieldMultiline/index-debug.html     |  25 +-
 Tests/Manual/CPTextFieldMultiline/index.html  |  17 +-
 Tests/Manual/CPTextView/index.html            | 188 ++++++++++----
 .../Manual/CPTextViewCibTest/index-debug.html |  25 +-
 Tests/Manual/CPTextViewCibTest/index.html     |  17 +-
 .../index-debug.html                          |  10 +-
 .../index.html                                |  10 +-
 Tests/Manual/CPTimeZone/index-debug.html      | 174 ++++++++++---
 Tests/Manual/CPTimeZone/index.html            | 166 +++++++++---
 .../Manual/CPTokenFieldTest/index-debug.html  | 207 +++++++++++----
 Tests/Manual/CPTokenFieldTest/index.html      | 192 ++++++++++----
 Tests/Manual/CPToolTip/index-debug.html       | 207 +++++++++++----
 Tests/Manual/CPToolTip/index.html             | 192 ++++++++++----
 Tests/Manual/CPToolbarTest/index-debug.html   | 203 +++++++++++----
 Tests/Manual/CPToolbarTest/index.html         | 192 ++++++++++----
 .../CPURLConnectionAsyncTest/index-debug.html | 205 +++++++++++----
 .../CPURLConnectionAsyncTest/index.html       | 191 ++++++++++----
 .../index-debug.html                          | 203 +++++++++++----
 .../CPURLConnectionSynchronousTest/index.html | 192 ++++++++++----
 Tests/Manual/CPUserDefaults/index-debug.html  | 207 +++++++++++----
 Tests/Manual/CPUserDefaults/index.html        | 192 ++++++++++----
 .../index-debug.html                          | 205 +++++++++++----
 .../CPUserDefaultsControllerTest/index.html   | 191 ++++++++++----
 .../CPUserNotificationTest/index-debug.html   |  23 +-
 .../Manual/CPUserNotificationTest/index.html  |  15 +-
 .../Manual/CPViewController/index-debug.html  |  25 +-
 Tests/Manual/CPViewController/index.html      |  15 +-
 .../CPVisualEffectViewTest/index-debug.html   |  23 +-
 .../Manual/CPVisualEffectViewTest/index.html  |  15 +-
 Tests/Manual/CPWebViewTest/index-debug.html   | 205 +++++++++++----
 Tests/Manual/CPWebViewTest/index.html         | 191 ++++++++++----
 Tests/Manual/CPWebViewTest2/index-debug.html  | 207 +++++++++++----
 Tests/Manual/CPWebViewTest2/index.html        | 192 ++++++++++----
 .../CPWindowLiveResizeTest/index-debug.html   |  12 +-
 .../Manual/CPWindowLiveResizeTest/index.html  |  12 +-
 .../CPWindowMovableTest/index-debug.html      | 207 +++++++++++----
 Tests/Manual/CPWindowMovableTest/index.html   | 192 ++++++++++----
 .../CPWindowResizeStyle/index-debug.html      | 201 +++++++++++----
 Tests/Manual/CPWindowResizeStyle/index.html   | 191 ++++++++++----
 Tests/Manual/ChildWindows/index-debug.html    | 201 +++++++++++----
 Tests/Manual/ChildWindows/index.html          | 191 ++++++++++----
 .../index-debug.html                          | 205 +++++++++++----
 .../index.html                                | 191 ++++++++++----
 Tests/Manual/CopyAndPaste/index-debug.html    | 174 ++++++++++---
 Tests/Manual/CopyAndPaste/index.html          | 166 +++++++++---
 Tests/Manual/CrossOriginTest/index-debug.html |  25 +-
 Tests/Manual/CrossOriginTest/index.html       |  17 +-
 Tests/Manual/FF4096Test/index-debug.html      | 207 +++++++++++----
 Tests/Manual/FF4096Test/index.html            | 192 ++++++++++----
 .../index-debug.html                          | 176 ++++++++++---
 .../index.html                                | 167 +++++++++---
 .../FontEnhancementTest/index-debug.html      | 203 +++++++++++----
 Tests/Manual/FontEnhancementTest/index.html   | 191 ++++++++++----
 .../FontMetricsExplorer/index-debug.html      | 207 ++++++++++++---
 Tests/Manual/FontMetricsExplorer/index.html   | 170 +++++++++---
 Tests/Manual/KeyEquivalents/index-debug.html  | 207 +++++++++++----
 Tests/Manual/KeyEquivalents/index.html        | 192 ++++++++++----
 Tests/Manual/KeyViewLoopTest/index-debug.html | 201 +++++++++++----
 Tests/Manual/KeyViewLoopTest/index.html       | 191 ++++++++++----
 .../index-debug.html                          |  12 +-
 .../index.html                                |  12 +-
 Tests/Manual/LayoutTest/index-debug.html      | 205 +++++++++++----
 Tests/Manual/LayoutTest/index.html            | 191 ++++++++++----
 Tests/Manual/LoadTimeTest/index-debug.html    | 223 ++++++++++++----
 Tests/Manual/LoadTimeTest/index.html          | 207 ++++++++++-----
 Tests/Manual/LongBindings/index-debug.html    | 205 +++++++++++----
 Tests/Manual/LongBindings/index.html          | 191 ++++++++++----
 Tests/Manual/MobileTest/index-debug.html      |  12 +-
 Tests/Manual/MobileTest/index.html            |  12 +-
 .../MultipleValueBindings/index-debug.html    | 199 +++++++++++----
 Tests/Manual/MultipleValueBindings/index.html | 191 ++++++++++----
 Tests/Manual/NSBoxTest/index-debug.html       | 241 ++++++++++++++----
 Tests/Manual/NSBoxTest/index.html             | 202 +++++++++++----
 Tests/Manual/NSBrowserTest/index-debug.html   | 174 ++++++++++---
 Tests/Manual/NSBrowserTest/index.html         | 166 +++++++++---
 .../Manual/NewTextFieldBezel/index-debug.html | 203 +++++++++++----
 Tests/Manual/NewTextFieldBezel/index.html     | 192 ++++++++++----
 .../Manual/Nib2CibAlignment/index-debug.html  | 205 +++++++++++----
 Tests/Manual/Nib2CibAlignment/index.html      | 191 ++++++++++----
 .../index-debug.html                          | 201 +++++++++++----
 .../Nib2CibBaselineAlignementTest/index.html  | 191 ++++++++++----
 Tests/Manual/NibAppRemixed/index-debug.html   | 205 +++++++++++----
 Tests/Manual/NibAppRemixed/index.html         | 191 ++++++++++----
 Tests/Manual/PatternFillTest/index-debug.html | 207 +++++++++++----
 Tests/Manual/PatternFillTest/index.html       | 191 ++++++++++----
 Tests/Manual/PlatformWindows/index-debug.html | 241 ++++++++++++++----
 Tests/Manual/PlatformWindows/index.html       | 202 +++++++++++----
 .../PopUpButtonEscTest/index-debug.html       | 174 ++++++++++---
 Tests/Manual/PopUpButtonEscTest/index.html    | 166 +++++++++---
 Tests/Manual/ScalingTest/index-debug.html     | 174 ++++++++++---
 Tests/Manual/ScalingTest/index.html           | 166 +++++++++---
 .../Manual/ScrollviewTheming/index-debug.html | 205 +++++++++++----
 Tests/Manual/ScrollviewTheming/index.html     | 191 ++++++++++----
 .../index-debug.html                          |  10 +-
 .../SheetWindowOrderFrontIssue/index.html     |  10 +-
 Tests/Manual/SimpleBindings2/index-debug.html | 213 ++++++++++++++--
 Tests/Manual/SimpleBindings2/index.html       | 172 +++++++++++--
 .../Manual/SmartFoldersDemo/index-debug.html  | 206 +++++++++++----
 Tests/Manual/SmartFoldersDemo/index.html      | 192 ++++++++++----
 .../BorderTableTest/index-debug.html          | 212 +++++++++++----
 .../TableTest/BorderTableTest/index.html      | 202 +++++++++++----
 .../TableTest/ColumnResize/index-debug.html   | 208 +++++++++++----
 .../Manual/TableTest/ColumnResize/index.html  | 193 ++++++++++----
 .../TableTest/ColumnSizing2/index-debug.html  | 207 +++++++++++----
 .../Manual/TableTest/ColumnSizing2/index.html | 192 ++++++++++----
 .../TableTest/DataView/index-debug.html       | 199 +++++++++++----
 Tests/Manual/TableTest/DataView/index.html    | 191 ++++++++++----
 .../DelegateSelectionTest/index-debug.html    |  25 +-
 .../DelegateSelectionTest/index.html          |  17 +-
 .../TableTest/DragAndDrop/index-debug.html    | 208 +++++++++++----
 Tests/Manual/TableTest/DragAndDrop/index.html | 193 ++++++++++----
 .../TableTest/DrawRowTest/index-debug.html    | 207 +++++++++++----
 Tests/Manual/TableTest/DrawRowTest/index.html | 192 ++++++++++----
 .../Manual/TableTest/Editing/index-debug.html | 208 +++++++++++----
 Tests/Manual/TableTest/Editing/index.html     | 193 ++++++++++----
 .../EditingControls/index-debug.html          | 201 +++++++++++----
 .../TableTest/EditingControls/index.html      | 191 ++++++++++----
 .../TableTest/GroupRowTest/index-debug.html   | 207 +++++++++++----
 .../Manual/TableTest/GroupRowTest/index.html  | 192 ++++++++++----
 .../HeaderCornerView/index-debug.html         | 205 +++++++++++----
 .../TableTest/HeaderCornerView/index.html     | 191 ++++++++++----
 .../Manual/TableTest/OldTest/index-debug.html | 241 ++++++++++++++----
 Tests/Manual/TableTest/OldTest/index.html     | 205 +++++++++++----
 .../TableTest/TableBindings/index-debug.html  | 205 +++++++++++----
 .../Manual/TableTest/TableBindings/index.html | 191 ++++++++++----
 .../TableTest/TableCibTest/index-debug.html   | 241 ++++++++++++++----
 .../Manual/TableTest/TableCibTest/index.html  | 202 +++++++++++----
 .../TestTableColumn/index-debug.html          | 176 ++++++++++---
 .../TableTest/TestTableColumn/index.html      | 166 +++++++++---
 .../TableTest/VariableRows/index-debug.html   | 207 +++++++++++----
 .../Manual/TableTest/VariableRows/index.html  | 192 ++++++++++----
 .../TableTest/ViewBased/index-debug.html      | 215 +++++++++++-----
 Tests/Manual/TableTest/ViewBased/index.html   | 194 ++++++++++----
 .../TableTest/ViewBasedCib/index-debug.html   | 207 +++++++++++----
 .../Manual/TableTest/ViewBasedCib/index.html  | 191 ++++++++++----
 Tests/Manual/ThemeBrowser/index-debug.html    | 226 ++++++++++++----
 Tests/Manual/ThemeBrowser/index.html          | 202 +++++++++++----
 .../Manual/ThemeKitchenSink/index-debug.html  |  25 +-
 Tests/Manual/ThemeKitchenSink/index.html      |  17 +-
 Tests/Manual/TrackingArea/index-debug.html    |  25 +-
 Tests/Manual/TrackingArea/index.html          |  15 +-
 .../UndoRedoWithMenuUpdate/index-debug.html   | 241 ++++++++++++++----
 .../Manual/UndoRedoWithMenuUpdate/index.html  | 202 +++++++++++----
 Tests/Manual/UserlandNSTest/index-debug.html  | 203 +++++++++++----
 Tests/Manual/UserlandNSTest/index.html        | 191 ++++++++++----
 .../index-debug.html                          | 206 +++++++++++----
 .../layoutEphemeralSubviewTest/index.html     | 191 ++++++++++----
 .../loadDynamicFrameworks/index-debug.html    | 174 ++++++++++---
 Tests/Manual/loadDynamicFrameworks/index.html | 224 ++++++++++------
 .../performKeyEquivalentTest/index-debug.html | 205 +++++++++++----
 .../performKeyEquivalentTest/index.html       | 191 ++++++++++----
 .../predicateWithFormat/index-debug.html      | 205 +++++++++++----
 Tests/Manual/predicateWithFormat/index.html   | 191 ++++++++++----
 .../index-debug.html                          | 205 +++++++++++----
 .../index.html                                | 191 ++++++++++----
 Tests/Manual/sizeToFitFix/index-debug.html    | 236 +++++++++++++----
 Tests/Manual/sizeToFitFix/index.html          | 193 ++++++++++----
 309 files changed, 38782 insertions(+), 13457 deletions(-)

diff --git a/Tests/Manual/ArrayController1/index-debug.html b/Tests/Manual/ArrayController1/index-debug.html
index e385197ea..a36b1d3b9 100644
--- a/Tests/Manual/ArrayController1/index-debug.html
+++ b/Tests/Manual/ArrayController1/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- ArrayController
+ __project.name__
 
- Created by Alexander Ljungberg on April 2, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ArrayController</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ArrayController...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ArrayController1/index.html b/Tests/Manual/ArrayController1/index.html
index 07bc29469..ac42c98a7 100644
--- a/Tests/Manual/ArrayController1/index.html
+++ b/Tests/Manual/ArrayController1/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- ArrayController
+ __project.name__
 
- Created by Alexander Ljungberg on April 2, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ArrayController</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ArrayController...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ArrayControllerInitialSelectionTest/index-debug.html b/Tests/Manual/ArrayControllerInitialSelectionTest/index-debug.html
index b1224f0f1..a36b1d3b9 100644
--- a/Tests/Manual/ArrayControllerInitialSelectionTest/index-debug.html
+++ b/Tests/Manual/ArrayControllerInitialSelectionTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- ArrayControllerInitialSelectionTest
+ __project.name__
 
- Created by You on July 21, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ArrayControllerInitialSelectionTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ArrayControllerInitialSelectionTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ArrayControllerInitialSelectionTest/index.html b/Tests/Manual/ArrayControllerInitialSelectionTest/index.html
index d5bfff88b..ac42c98a7 100644
--- a/Tests/Manual/ArrayControllerInitialSelectionTest/index.html
+++ b/Tests/Manual/ArrayControllerInitialSelectionTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- ArrayControllerInitialSelectionTest
+ __project.name__
 
- Created by You on July 21, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ArrayControllerInitialSelectionTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ArrayControllerInitialSelectionTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/ArrayControllerRemovingFirstTest/index-debug.html b/Tests/Manual/ArrayControllerRemovingFirstTest/index-debug.html
index dd0fc0edb..a36b1d3b9 100644
--- a/Tests/Manual/ArrayControllerRemovingFirstTest/index-debug.html
+++ b/Tests/Manual/ArrayControllerRemovingFirstTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- ArrayControllerRemovingFirstTest
+ __project.name__
 
- Created by You on July 17, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ArrayControllerRemovingFirstTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ArrayControllerRemovingFirstTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ArrayControllerRemovingFirstTest/index.html b/Tests/Manual/ArrayControllerRemovingFirstTest/index.html
index 5ec794679..ac42c98a7 100644
--- a/Tests/Manual/ArrayControllerRemovingFirstTest/index.html
+++ b/Tests/Manual/ArrayControllerRemovingFirstTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- ArrayControllerRemovingFirstTest
+ __project.name__
 
- Created by You on July 17, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ArrayControllerRemovingFirstTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ArrayControllerRemovingFirstTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/AttachedSheet/index-debug.html b/Tests/Manual/AttachedSheet/index-debug.html
index e25104ee0..a36b1d3b9 100644
--- a/Tests/Manual/AttachedSheet/index-debug.html
+++ b/Tests/Manual/AttachedSheet/index-debug.html
@@ -1,83 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- Untitled
+ __project.name__
 
- Created by You on July 30, 2009.
- Copyright 2009, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>Attached Sheet</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <script type = "text/javascript">
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-       <script type = "text/javascript">
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
 
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
             // Uncomment to enable runtime type checking:
             //objj_msgSend_decorate(objj_typecheck_decorator);
 
             // Uncomment (along with both above) to print backtraces on type check errors:
             //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading Attached Sheet...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/AttachedSheet/index.html b/Tests/Manual/AttachedSheet/index.html
index ac6428852..ac42c98a7 100644
--- a/Tests/Manual/AttachedSheet/index.html
+++ b/Tests/Manual/AttachedSheet/index.html
@@ -1,69 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- SplitView
+ __project.name__
 
- Created by You on August 1, 2009.
- Copyright 2009, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>Attached Sheet</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading <i>Attached Sheet</i> …</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/AttachedSheet2/index-debug.html b/Tests/Manual/AttachedSheet2/index-debug.html
index f50088110..a36b1d3b9 100644
--- a/Tests/Manual/AttachedSheet2/index-debug.html
+++ b/Tests/Manual/AttachedSheet2/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TestSheet
+ __project.name__
 
- Created by You on August 11, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>TestSheet</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TestSheet...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/AttachedSheet2/index.html b/Tests/Manual/AttachedSheet2/index.html
index 7ff29a77b..ac42c98a7 100644
--- a/Tests/Manual/AttachedSheet2/index.html
+++ b/Tests/Manual/AttachedSheet2/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TestSheet
+ __project.name__
 
- Created by You on April 14, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>TestSheet</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TestSheet...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/Bindings/index-debug.html b/Tests/Manual/Bindings/index-debug.html
index b976cd65b..a36b1d3b9 100644
--- a/Tests/Manual/Bindings/index-debug.html
+++ b/Tests/Manual/Bindings/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- Bindings
+ __project.name__
 
- Created by aparajita on August 17, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>Bindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading Bindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/Bindings/index.html b/Tests/Manual/Bindings/index.html
index 8d0aa3d38..ac42c98a7 100644
--- a/Tests/Manual/Bindings/index.html
+++ b/Tests/Manual/Bindings/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- Bindings
+ __project.name__
 
- Created by aparajita on August 17, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>Bindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading Bindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CGCanvasContext/index-debug.html b/Tests/Manual/CGCanvasContext/index-debug.html
index adf426ade..a36b1d3b9 100644
--- a/Tests/Manual/CGCanvasContext/index-debug.html
+++ b/Tests/Manual/CGCanvasContext/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- cgcanvascontext
+ __project.name__
 
- Created by You on February 19, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>cgcanvascontext</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading cgcanvascontext...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CGCanvasContext/index.html b/Tests/Manual/CGCanvasContext/index.html
index 09c72f701..ac42c98a7 100644
--- a/Tests/Manual/CGCanvasContext/index.html
+++ b/Tests/Manual/CGCanvasContext/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- cgcanvascontext
+ __project.name__
 
- Created by You on February 19, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>cgcanvascontext</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading cgcanvascontext...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CGPath/index-debug.html b/Tests/Manual/CGPath/index-debug.html
index 80c7219c9..a36b1d3b9 100644
--- a/Tests/Manual/CGPath/index-debug.html
+++ b/Tests/Manual/CGPath/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CGPath
+ __project.name__
 
- Created by You on May 23, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,19 +25,56 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CGPath</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CGPath...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CGPath/index.html b/Tests/Manual/CGPath/index.html
index 1fa069702..ac42c98a7 100644
--- a/Tests/Manual/CGPath/index.html
+++ b/Tests/Manual/CGPath/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CGPath
+ __project.name__
 
- Created by You on May 23, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,59 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CGPath</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CGPath...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPAlertTest/index-debug.html b/Tests/Manual/CPAlertTest/index-debug.html
index e19163777..a36b1d3b9 100644
--- a/Tests/Manual/CPAlertTest/index-debug.html
+++ b/Tests/Manual/CPAlertTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPAlertTest
+ __project.name__
 
- Created by Alexander Ljungberg on August 19, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPAlertTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPAlertTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPAlertTest/index.html b/Tests/Manual/CPAlertTest/index.html
index b7ef26beb..ac42c98a7 100644
--- a/Tests/Manual/CPAlertTest/index.html
+++ b/Tests/Manual/CPAlertTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPAlertTest
+ __project.name__
 
- Created by Alexander Ljungberg on August 19, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPAlertTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPAlertTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPAnimatablePropertyContainerTest/index-debug.html b/Tests/Manual/CPAnimatablePropertyContainerTest/index-debug.html
index 10b7505ee..a36b1d3b9 100644
--- a/Tests/Manual/CPAnimatablePropertyContainerTest/index-debug.html
+++ b/Tests/Manual/CPAnimatablePropertyContainerTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPAnimatablePropertyContainerTest
+ __project.name__
 
- Created by You on December 3, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPAnimatablePropertyContainerTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,9 +74,10 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
-            objj_msgSend_decorate(objj_backtrace_decorator);
+            //objj_msgSend_decorate(objj_backtrace_decorator);
 
             // Uncomment to supress exceptions that take place inside a message
             //objj_msgSend_decorate(objj_supress_exceptions_decorator)
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPAnimatablePropertyContainerTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPAnimatablePropertyContainerTest/index.html b/Tests/Manual/CPAnimatablePropertyContainerTest/index.html
index ef1661487..ac42c98a7 100644
--- a/Tests/Manual/CPAnimatablePropertyContainerTest/index.html
+++ b/Tests/Manual/CPAnimatablePropertyContainerTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPAnimatablePropertyContainerTest
+ __project.name__
 
- Created by You on December 3, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPAnimatablePropertyContainerTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPAnimatablePropertyContainerTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPAnimationContextTest/index-debug.html b/Tests/Manual/CPAnimationContextTest/index-debug.html
index 504b47db3..a36b1d3b9 100644
--- a/Tests/Manual/CPAnimationContextTest/index-debug.html
+++ b/Tests/Manual/CPAnimationContextTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPAnimationContextTest
+ __project.name__
 
- Created by You on June 28, 2017.
- Copyright 2017, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPAnimationContextTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -44,7 +44,7 @@
             // more information on decorators.
             //
             // Uncomment or comment on the line below to change the flags
-            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures"/*, "InlineMsgSend"*/];
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -193,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPAnimationContextTest/index.html b/Tests/Manual/CPAnimationContextTest/index.html
index a9ab78274..ac42c98a7 100644
--- a/Tests/Manual/CPAnimationContextTest/index.html
+++ b/Tests/Manual/CPAnimationContextTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPAnimationContextTest
+ __project.name__
 
- Created by You on June 28, 2017.
- Copyright 2017, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPAnimationContextTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -36,7 +36,7 @@
             // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
             // code like the Cappuccino frameworks.
             // Uncomment or comment on the line below to change the flags
-            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures", "InlineMsgSend"];
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -155,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPAnimationTest/index-debug.html b/Tests/Manual/CPAnimationTest/index-debug.html
index 042c2c6f8..a36b1d3b9 100644
--- a/Tests/Manual/CPAnimationTest/index-debug.html
+++ b/Tests/Manual/CPAnimationTest/index-debug.html
@@ -1,5 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+<!--
+ index-debug.html
+ __project.name__
+
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
+-->
     <head>
         <meta charset="utf-8">
 
@@ -18,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPAnimationTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -26,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -55,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -95,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -173,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPAnimationTest/index.html b/Tests/Manual/CPAnimationTest/index.html
index b48b8ea22..ac42c98a7 100644
--- a/Tests/Manual/CPAnimationTest/index.html
+++ b/Tests/Manual/CPAnimationTest/index.html
@@ -1,6 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-     <head>
+<!--
+ index.html
+ __project.name__
+
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
+-->
+    <head>
         <meta charset="utf-8">
 
         <!--[if lte IE 8]>
@@ -18,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPAnimationTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -65,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -143,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPBinder-echo-bug/index-debug.html b/Tests/Manual/CPBinder-echo-bug/index-debug.html
index f91631eec..a36b1d3b9 100644
--- a/Tests/Manual/CPBinder-echo-bug/index-debug.html
+++ b/Tests/Manual/CPBinder-echo-bug/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPBinder-echo-bug
+ __project.name__
 
- Created by You on March 29, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPBinder-echo-bug</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPBinder-echo-bug...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPBinder-echo-bug/index.html b/Tests/Manual/CPBinder-echo-bug/index.html
index 89ab0667f..ac42c98a7 100644
--- a/Tests/Manual/CPBinder-echo-bug/index.html
+++ b/Tests/Manual/CPBinder-echo-bug/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPBinder-echo-bug
+ __project.name__
 
- Created by You on March 29, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPBinder-echo-bug</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPBinder-echo-bug...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPBoxTest/index-debug.html b/Tests/Manual/CPBoxTest/index-debug.html
index 665d6ea07..a36b1d3b9 100644
--- a/Tests/Manual/CPBoxTest/index-debug.html
+++ b/Tests/Manual/CPBoxTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPBox
+ __project.name__
 
- Created by You on January 13, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPBoxTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPBoxTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPBoxTest/index.html b/Tests/Manual/CPBoxTest/index.html
index 488acb148..ac42c98a7 100644
--- a/Tests/Manual/CPBoxTest/index.html
+++ b/Tests/Manual/CPBoxTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPBoxTest
+ __project.name__
 
- Created by You on January 13, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPBoxTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPBoxTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPBrowserTest/index-debug.html b/Tests/Manual/CPBrowserTest/index-debug.html
index cdf809537..a36b1d3b9 100644
--- a/Tests/Manual/CPBrowserTest/index-debug.html
+++ b/Tests/Manual/CPBrowserTest/index-debug.html
@@ -1,85 +1,204 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPBrowserTest
+ __project.name__
 
- Created by Ross Boucher on March 23, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <title>CPBrowserTest</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
+
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
 
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
             // Uncomment to enable runtime type checking:
             //objj_msgSend_decorate(objj_typecheck_decorator);
 
             // Uncomment (along with both above) to print backtraces on type check errors:
             //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type = "text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPBrowserTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPBrowserTest/index.html b/Tests/Manual/CPBrowserTest/index.html
index 9d33c844e..ac42c98a7 100644
--- a/Tests/Manual/CPBrowserTest/index.html
+++ b/Tests/Manual/CPBrowserTest/index.html
@@ -1,70 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPBrowserTest
+ __project.name__
 
- Created by Ross Boucher on March 23, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <title>CPBrowserTest</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
+
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type = "text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPBrowserTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPButtonKeyEquivalentDefaultTest/index-debug.html b/Tests/Manual/CPButtonKeyEquivalentDefaultTest/index-debug.html
index 2c219c143..a36b1d3b9 100644
--- a/Tests/Manual/CPButtonKeyEquivalentDefaultTest/index-debug.html
+++ b/Tests/Manual/CPButtonKeyEquivalentDefaultTest/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPButtonKeyEquivalentDefaultTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPButtonKeyEquivalentDefaultTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPButtonKeyEquivalentDefaultTest/index.html b/Tests/Manual/CPButtonKeyEquivalentDefaultTest/index.html
index 32052c4a3..ac42c98a7 100644
--- a/Tests/Manual/CPButtonKeyEquivalentDefaultTest/index.html
+++ b/Tests/Manual/CPButtonKeyEquivalentDefaultTest/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPButtonKeyEquivalentDefaultTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPButtonKeyEquivalentDefaultTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPButtonTest/index-debug.html b/Tests/Manual/CPButtonTest/index-debug.html
index 2fc2b0a44..a36b1d3b9 100644
--- a/Tests/Manual/CPButtonTest/index-debug.html
+++ b/Tests/Manual/CPButtonTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPButton
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPButton</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPButton...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPButtonTest/index.html b/Tests/Manual/CPButtonTest/index.html
index 6c8234b0e..ac42c98a7 100644
--- a/Tests/Manual/CPButtonTest/index.html
+++ b/Tests/Manual/CPButtonTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPButton
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPButton</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPButton...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPByteCountFormatter/index-debug.html b/Tests/Manual/CPByteCountFormatter/index-debug.html
index 56d73399c..a36b1d3b9 100644
--- a/Tests/Manual/CPByteCountFormatter/index-debug.html
+++ b/Tests/Manual/CPByteCountFormatter/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPByteCountFormatter
+ __project.name__
 
- Created by You on February 10, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPByteCountFormatter</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPByteCountFormatter...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPByteCountFormatter/index.html b/Tests/Manual/CPByteCountFormatter/index.html
index 4a55da337..ac42c98a7 100644
--- a/Tests/Manual/CPByteCountFormatter/index.html
+++ b/Tests/Manual/CPByteCountFormatter/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPByteCountFormatter
+ __project.name__
 
- Created by You on February 10, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPByteCountFormatter</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPByteCountFormatter...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPCollectionViewNibTest/index-debug.html b/Tests/Manual/CPCollectionViewNibTest/index-debug.html
index e6d7aaf45..a36b1d3b9 100644
--- a/Tests/Manual/CPCollectionViewNibTest/index-debug.html
+++ b/Tests/Manual/CPCollectionViewNibTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPCollectionViewNibTest
+ __project.name__
 
- Created by You on November 28, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPCollectionViewNibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPCollectionViewNibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPCollectionViewNibTest/index.html b/Tests/Manual/CPCollectionViewNibTest/index.html
index f3c766373..ac42c98a7 100644
--- a/Tests/Manual/CPCollectionViewNibTest/index.html
+++ b/Tests/Manual/CPCollectionViewNibTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPCollectionViewNibTest
+ __project.name__
 
- Created by You on November 28, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPCollectionViewNibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPCollectionViewNibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPColor-CPImage-description/index-debug.html b/Tests/Manual/CPColor-CPImage-description/index-debug.html
index cdb1fe922..a36b1d3b9 100644
--- a/Tests/Manual/CPColor-CPImage-description/index-debug.html
+++ b/Tests/Manual/CPColor-CPImage-description/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- test
+ __project.name__
 
- Created by aparajita on May 19, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPColor-CPImage-description</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPColor-CPImage-description/index.html b/Tests/Manual/CPColor-CPImage-description/index.html
index ecc896bae..ac42c98a7 100644
--- a/Tests/Manual/CPColor-CPImage-description/index.html
+++ b/Tests/Manual/CPColor-CPImage-description/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- test
+ __project.name__
 
- Created by aparajita on May 19, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPColor-CPImage-description</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPColorWellBindings/index-debug.html b/Tests/Manual/CPColorWellBindings/index-debug.html
index 1b641d790..a36b1d3b9 100644
--- a/Tests/Manual/CPColorWellBindings/index-debug.html
+++ b/Tests/Manual/CPColorWellBindings/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPColorWellBindings
+ __project.name__
 
- Created by You on January 27, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPColorWellBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPColorWellBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPColorWellBindings/index.html b/Tests/Manual/CPColorWellBindings/index.html
index 1374c447b..ac42c98a7 100644
--- a/Tests/Manual/CPColorWellBindings/index.html
+++ b/Tests/Manual/CPColorWellBindings/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPColorWellBindings
+ __project.name__
 
- Created by You on January 27, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPColorWellBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPColorWellBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPComboBoxTest/index-debug.html b/Tests/Manual/CPComboBoxTest/index-debug.html
index 4bcee21fc..a36b1d3b9 100644
--- a/Tests/Manual/CPComboBoxTest/index-debug.html
+++ b/Tests/Manual/CPComboBoxTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPComboBoxTest
+ __project.name__
 
- Created by aparajita on August 8, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPComboBoxTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPComboBoxTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPComboBoxTest/index.html b/Tests/Manual/CPComboBoxTest/index.html
index d53f50a5a..ac42c98a7 100644
--- a/Tests/Manual/CPComboBoxTest/index.html
+++ b/Tests/Manual/CPComboBoxTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPComboBoxTest
+ __project.name__
 
- Created by aparajita on August 8, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPComboBoxTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPComboBoxTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPControlPerformClickExceptionTest/index-debug.html b/Tests/Manual/CPControlPerformClickExceptionTest/index-debug.html
index 364887abc..a36b1d3b9 100644
--- a/Tests/Manual/CPControlPerformClickExceptionTest/index-debug.html
+++ b/Tests/Manual/CPControlPerformClickExceptionTest/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPControlPerformClickExceptionTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPControlPerformClickExceptionTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPControlPerformClickExceptionTest/index.html b/Tests/Manual/CPControlPerformClickExceptionTest/index.html
index f6348e8f9..ac42c98a7 100644
--- a/Tests/Manual/CPControlPerformClickExceptionTest/index.html
+++ b/Tests/Manual/CPControlPerformClickExceptionTest/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPControlPerformClickExceptionTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPControlPerformClickExceptionTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPControlSize/index-debug.html b/Tests/Manual/CPControlSize/index-debug.html
index 4512b93d4..a36b1d3b9 100644
--- a/Tests/Manual/CPControlSize/index-debug.html
+++ b/Tests/Manual/CPControlSize/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPControlSize
+ __project.name__
 
- Created by You on August 11, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPControlSize</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -102,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPControlSize/index.html b/Tests/Manual/CPControlSize/index.html
index 0542512f6..ac42c98a7 100644
--- a/Tests/Manual/CPControlSize/index.html
+++ b/Tests/Manual/CPControlSize/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPControlSize
+ __project.name__
 
- Created by You on August 11, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPControlSize</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -72,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPCursor/index-debug.html b/Tests/Manual/CPCursor/index-debug.html
index 213aea188..a36b1d3b9 100644
--- a/Tests/Manual/CPCursor/index-debug.html
+++ b/Tests/Manual/CPCursor/index-debug.html
@@ -1,84 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CursorTest
+ __project.name__
 
- Created by You on November 6, 2009.
- Copyright 2009, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CursorTest</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <script type = "text/javascript">
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
-        <script type = "text/javascript">
+        <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
 
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
             // Uncomment to enable runtime type checking:
             //objj_msgSend_decorate(objj_typecheck_decorator);
 
             // Uncomment (along with both above) to print backtraces on type check errors:
             //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CursorTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPCursor/index.html b/Tests/Manual/CPCursor/index.html
index fbc419e1e..ac42c98a7 100644
--- a/Tests/Manual/CPCursor/index.html
+++ b/Tests/Manual/CPCursor/index.html
@@ -1,71 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CursorTest
+ __project.name__
 
- Created by You on November 6, 2009.
- Copyright 2009, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CursorTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type = "text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CursorTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPDateFormatterTest/index-debug.html b/Tests/Manual/CPDateFormatterTest/index-debug.html
index 96c33bd02..a36b1d3b9 100644
--- a/Tests/Manual/CPDateFormatterTest/index-debug.html
+++ b/Tests/Manual/CPDateFormatterTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPDateFormatterTest
+ __project.name__
 
- Created by You on April 9, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPDateFormatterTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPDateFormatterTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDateFormatterTest/index.html b/Tests/Manual/CPDateFormatterTest/index.html
index 124529560..ac42c98a7 100644
--- a/Tests/Manual/CPDateFormatterTest/index.html
+++ b/Tests/Manual/CPDateFormatterTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPDateFormatterTest
+ __project.name__
 
- Created by You on April 9, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPDateFormatterTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPDateFormatterTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDatePickerTest/index-debug.html b/Tests/Manual/CPDatePickerTest/index-debug.html
index 588676347..a36b1d3b9 100644
--- a/Tests/Manual/CPDatePickerTest/index-debug.html
+++ b/Tests/Manual/CPDatePickerTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPDatePickerTest
+ __project.name__
 
- Created by You on March 15, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPDatePickerTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPDatePickerTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDatePickerTest/index.html b/Tests/Manual/CPDatePickerTest/index.html
index 58bb17dd1..ac42c98a7 100644
--- a/Tests/Manual/CPDatePickerTest/index.html
+++ b/Tests/Manual/CPDatePickerTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPDatePickerTest
+ __project.name__
 
- Created by You on March 15, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPDatePickerTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPDatePickerTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDictionaryControllerTest/index-debug.html b/Tests/Manual/CPDictionaryControllerTest/index-debug.html
index 63a6fb2c5..a36b1d3b9 100644
--- a/Tests/Manual/CPDictionaryControllerTest/index-debug.html
+++ b/Tests/Manual/CPDictionaryControllerTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPDictionaryControllerTest
+ __project.name__
 
- Created by Blair Duncan on February 17, 2013.
- Copyright 2013, SGL Studio, BBDO Toronto All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPDictionaryControllerTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPDictionaryControllerTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDictionaryControllerTest/index.html b/Tests/Manual/CPDictionaryControllerTest/index.html
index 6c9b5c510..ac42c98a7 100644
--- a/Tests/Manual/CPDictionaryControllerTest/index.html
+++ b/Tests/Manual/CPDictionaryControllerTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPDictionaryControllerTest
+ __project.name__
 
- Created by Blair Duncan on February 17, 2013.
- Copyright 2013, SGL Studio, BBDO Toronto All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPDictionaryControllerTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPDictionaryControllerTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDocumentControllerTest/withNib/index-debug.html b/Tests/Manual/CPDocumentControllerTest/withNib/index-debug.html
index f73a77933..a36b1d3b9 100644
--- a/Tests/Manual/CPDocumentControllerTest/withNib/index-debug.html
+++ b/Tests/Manual/CPDocumentControllerTest/withNib/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CappDoc
+ __project.name__
 
- Created by You on May 24, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CappDoc</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CappDoc...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDocumentControllerTest/withNib/index.html b/Tests/Manual/CPDocumentControllerTest/withNib/index.html
index e833b6ee0..ac42c98a7 100644
--- a/Tests/Manual/CPDocumentControllerTest/withNib/index.html
+++ b/Tests/Manual/CPDocumentControllerTest/withNib/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CappDoc
+ __project.name__
 
- Created by You on May 24, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CappDoc</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CappDoc...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDocumentControllerTest/withoutNib/index-debug.html b/Tests/Manual/CPDocumentControllerTest/withoutNib/index-debug.html
index f73a77933..a36b1d3b9 100644
--- a/Tests/Manual/CPDocumentControllerTest/withoutNib/index-debug.html
+++ b/Tests/Manual/CPDocumentControllerTest/withoutNib/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CappDoc
+ __project.name__
 
- Created by You on May 24, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CappDoc</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CappDoc...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPDocumentControllerTest/withoutNib/index.html b/Tests/Manual/CPDocumentControllerTest/withoutNib/index.html
index e833b6ee0..ac42c98a7 100644
--- a/Tests/Manual/CPDocumentControllerTest/withoutNib/index.html
+++ b/Tests/Manual/CPDocumentControllerTest/withoutNib/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CappDoc
+ __project.name__
 
- Created by You on May 24, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CappDoc</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CappDoc...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPFlashviewTest/index-debug.html b/Tests/Manual/CPFlashviewTest/index-debug.html
index 6f1e04102..a36b1d3b9 100644
--- a/Tests/Manual/CPFlashviewTest/index-debug.html
+++ b/Tests/Manual/CPFlashviewTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPFlashviewTest
+ __project.name__
 
- Created by Blair Duncan on April 23, 2012.
- Copyright 2012, SGL Studio, BBDO Toronto All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPFlashviewTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPFlashviewTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPFlashviewTest/index.html b/Tests/Manual/CPFlashviewTest/index.html
index 3e904ed0e..ac42c98a7 100644
--- a/Tests/Manual/CPFlashviewTest/index.html
+++ b/Tests/Manual/CPFlashviewTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPFlashviewTest
+ __project.name__
 
- Created by Blair Duncan on April 23, 2012.
- Copyright 2012, SGL Studio, BBDO Toronto All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPFlashviewTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPFlashviewTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPFormatterTest/index-debug.html b/Tests/Manual/CPFormatterTest/index-debug.html
index d1b117f8a..a36b1d3b9 100644
--- a/Tests/Manual/CPFormatterTest/index-debug.html
+++ b/Tests/Manual/CPFormatterTest/index-debug.html
@@ -1,32 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPFormatterTest
+ __project.name__
 
- Created by aparajita on June 30, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPFormatterTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <script src="Resources/date-functions.js" type="text/javascript" charset="utf-8"></script>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -35,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -54,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPFormatterTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPFormatterTest/index.html b/Tests/Manual/CPFormatterTest/index.html
index 28f212619..ac42c98a7 100644
--- a/Tests/Manual/CPFormatterTest/index.html
+++ b/Tests/Manual/CPFormatterTest/index.html
@@ -1,79 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPFormatterTest
+ __project.name__
 
- Created by aparajita on June 30, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPFormatterTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <script src="Resources/date-functions.js" type="text/javascript" charset="utf-8"></script>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPFormatterTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPGraphicsTest/index-debug.html b/Tests/Manual/CPGraphicsTest/index-debug.html
index 8ff83bff3..a36b1d3b9 100644
--- a/Tests/Manual/CPGraphicsTest/index-debug.html
+++ b/Tests/Manual/CPGraphicsTest/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPGraphicsTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPGraphics Test</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPGraphics Test...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPGraphicsTest/index.html b/Tests/Manual/CPGraphicsTest/index.html
index 9855ff52f..ac42c98a7 100644
--- a/Tests/Manual/CPGraphicsTest/index.html
+++ b/Tests/Manual/CPGraphicsTest/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPGraphicsTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPGraphics Test</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPGraphics Test...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPImageViewAlignmentScaling/index-debug.html b/Tests/Manual/CPImageViewAlignmentScaling/index-debug.html
index 25cbf8af5..a36b1d3b9 100644
--- a/Tests/Manual/CPImageViewAlignmentScaling/index-debug.html
+++ b/Tests/Manual/CPImageViewAlignmentScaling/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPImageViewScaling
+ __project.name__
 
- Created by aparajita on April 12, 2012.
- Copyright 2012, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPImageViewScaling</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPImageViewScaling...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPImageViewAlignmentScaling/index.html b/Tests/Manual/CPImageViewAlignmentScaling/index.html
index e0aad1756..ac42c98a7 100644
--- a/Tests/Manual/CPImageViewAlignmentScaling/index.html
+++ b/Tests/Manual/CPImageViewAlignmentScaling/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPImageViewScaling
+ __project.name__
 
- Created by aparajita on April 12, 2012.
- Copyright 2012, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPImageViewScaling</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPImageViewScaling...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPImageViewTest/index-debug.html b/Tests/Manual/CPImageViewTest/index-debug.html
index b304f1c39..a36b1d3b9 100644
--- a/Tests/Manual/CPImageViewTest/index-debug.html
+++ b/Tests/Manual/CPImageViewTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPImageViewTest
+ __project.name__
 
- Created by Alexander Ljungberg on March 9, 2012.
- Copyright 2012, SlevenBits Ltd All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPImageViewTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPImageViewTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPImageViewTest/index.html b/Tests/Manual/CPImageViewTest/index.html
index cc8dd3eec..ac42c98a7 100644
--- a/Tests/Manual/CPImageViewTest/index.html
+++ b/Tests/Manual/CPImageViewTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPImageViewTest
+ __project.name__
 
- Created by Alexander Ljungberg on March 9, 2012.
- Copyright 2012, SlevenBits Ltd All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPImageViewTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPImageViewTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPImageViewbindingsTest/index-debug.html b/Tests/Manual/CPImageViewbindingsTest/index-debug.html
index 7e983997b..a36b1d3b9 100644
--- a/Tests/Manual/CPImageViewbindingsTest/index-debug.html
+++ b/Tests/Manual/CPImageViewbindingsTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPImageViewbindingsTest
+ __project.name__
 
- Created by You on March 13, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPImageViewbindingsTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPImageViewbindingsTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPImageViewbindingsTest/index.html b/Tests/Manual/CPImageViewbindingsTest/index.html
index c73fad761..ac42c98a7 100644
--- a/Tests/Manual/CPImageViewbindingsTest/index.html
+++ b/Tests/Manual/CPImageViewbindingsTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPImageViewbindingsTest
+ __project.name__
 
- Created by You on March 13, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPImageViewbindingsTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPImageViewbindingsTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPLevelIndicator/index-debug.html b/Tests/Manual/CPLevelIndicator/index-debug.html
index 1097bcf1b..a36b1d3b9 100644
--- a/Tests/Manual/CPLevelIndicator/index-debug.html
+++ b/Tests/Manual/CPLevelIndicator/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPLevelIndicator
+ __project.name__
 
- Created by Alexander Ljungberg on May 28, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPLevelIndicator</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPLevelIndicator...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPLevelIndicator/index.html b/Tests/Manual/CPLevelIndicator/index.html
index 26086f976..ac42c98a7 100644
--- a/Tests/Manual/CPLevelIndicator/index.html
+++ b/Tests/Manual/CPLevelIndicator/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPLevelIndicator
+ __project.name__
 
- Created by Alexander Ljungberg on May 28, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPLevelIndicator</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPLevelIndicator...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPLocalizationTest/index-debug.html b/Tests/Manual/CPLocalizationTest/index-debug.html
index 13c385d7e..a36b1d3b9 100644
--- a/Tests/Manual/CPLocalizationTest/index-debug.html
+++ b/Tests/Manual/CPLocalizationTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPLocalizationTest
+ __project.name__
 
- Created by You on April 20, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPLocalizationTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPLocalizationTest/index.html b/Tests/Manual/CPLocalizationTest/index.html
index e80f2fe83..ac42c98a7 100644
--- a/Tests/Manual/CPLocalizationTest/index.html
+++ b/Tests/Manual/CPLocalizationTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPLocalizationTest
+ __project.name__
 
- Created by You on April 20, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPLocalizationTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPLogTest/index-debug.html b/Tests/Manual/CPLogTest/index-debug.html
index 69b7c0047..a36b1d3b9 100644
--- a/Tests/Manual/CPLogTest/index-debug.html
+++ b/Tests/Manual/CPLogTest/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPLog Test</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPLog Test...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPLogTest/index.html b/Tests/Manual/CPLogTest/index.html
index b1eef3174..ac42c98a7 100644
--- a/Tests/Manual/CPLogTest/index.html
+++ b/Tests/Manual/CPLogTest/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPLog Test</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPLog Test...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPMenuEnabledBindingsTest/index-debug.html b/Tests/Manual/CPMenuEnabledBindingsTest/index-debug.html
index a8f427610..a36b1d3b9 100644
--- a/Tests/Manual/CPMenuEnabledBindingsTest/index-debug.html
+++ b/Tests/Manual/CPMenuEnabledBindingsTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPMenuTest
+ __project.name__
 
- Created by Alexander Ljungberg on August 31, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPMenuTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPMenuTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPMenuEnabledBindingsTest/index.html b/Tests/Manual/CPMenuEnabledBindingsTest/index.html
index 0e112f0a5..ac42c98a7 100644
--- a/Tests/Manual/CPMenuEnabledBindingsTest/index.html
+++ b/Tests/Manual/CPMenuEnabledBindingsTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPMenuTest
+ __project.name__
 
- Created by Alexander Ljungberg on August 31, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPMenuTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPMenuTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPMenuKeyEquivalents/index-debug.html b/Tests/Manual/CPMenuKeyEquivalents/index-debug.html
index 0d31f8d54..a36b1d3b9 100644
--- a/Tests/Manual/CPMenuKeyEquivalents/index-debug.html
+++ b/Tests/Manual/CPMenuKeyEquivalents/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- menu-keyequivs
+ __project.name__
 
- Created by You on May 5, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>menu-keyequivs</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading menu-keyequivs...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPMenuKeyEquivalents/index.html b/Tests/Manual/CPMenuKeyEquivalents/index.html
index db4ab645f..ac42c98a7 100644
--- a/Tests/Manual/CPMenuKeyEquivalents/index.html
+++ b/Tests/Manual/CPMenuKeyEquivalents/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- menu-keyequivs
+ __project.name__
 
- Created by You on May 5, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>menu-keyequivs</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading menu-keyequivs...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/Manual/CPMenuRemoveAllTest/index-debug.html b/Tests/Manual/CPMenuRemoveAllTest/index-debug.html
index ddea8eb05..a36b1d3b9 100644
--- a/Tests/Manual/CPMenuRemoveAllTest/index-debug.html
+++ b/Tests/Manual/CPMenuRemoveAllTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPMenuRemoveAllTest
+ __project.name__
 
- Created by aparajita on May 11, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPMenuRemoveAllTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPMenuRemoveAllTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPMenuRemoveAllTest/index.html b/Tests/Manual/CPMenuRemoveAllTest/index.html
index d6a5a8915..ac42c98a7 100644
--- a/Tests/Manual/CPMenuRemoveAllTest/index.html
+++ b/Tests/Manual/CPMenuRemoveAllTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPMenuRemoveAllTest
+ __project.name__
 
- Created by aparajita on May 11, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPMenuRemoveAllTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPMenuRemoveAllTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPMenuTest/index-debug.html b/Tests/Manual/CPMenuTest/index-debug.html
index a8f427610..a36b1d3b9 100644
--- a/Tests/Manual/CPMenuTest/index-debug.html
+++ b/Tests/Manual/CPMenuTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPMenuTest
+ __project.name__
 
- Created by Alexander Ljungberg on August 31, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPMenuTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPMenuTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPMenuTest/index.html b/Tests/Manual/CPMenuTest/index.html
index 0e112f0a5..ac42c98a7 100644
--- a/Tests/Manual/CPMenuTest/index.html
+++ b/Tests/Manual/CPMenuTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPMenuTest
+ __project.name__
 
- Created by Alexander Ljungberg on August 31, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPMenuTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPMenuTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPOutlineViewCibTest/index-debug.html b/Tests/Manual/CPOutlineViewCibTest/index-debug.html
index 1e85b1d0f..a36b1d3b9 100644
--- a/Tests/Manual/CPOutlineViewCibTest/index-debug.html
+++ b/Tests/Manual/CPOutlineViewCibTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPOutlineViewCibTest
+ __project.name__
 
- Created by You on January 14, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPOutlineViewCibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPOutlineViewCibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPOutlineViewCibTest/index.html b/Tests/Manual/CPOutlineViewCibTest/index.html
index 3d3fde819..ac42c98a7 100644
--- a/Tests/Manual/CPOutlineViewCibTest/index.html
+++ b/Tests/Manual/CPOutlineViewCibTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPOutlineViewCibTest
+ __project.name__
 
- Created by You on January 14, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPOutlineViewCibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPOutlineViewCibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPOutlineViewTest/index-debug.html b/Tests/Manual/CPOutlineViewTest/index-debug.html
index 2970da2bc..a36b1d3b9 100644
--- a/Tests/Manual/CPOutlineViewTest/index-debug.html
+++ b/Tests/Manual/CPOutlineViewTest/index-debug.html
@@ -1,84 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- outlineview
+ __project.name__
 
- Created by You on January 22, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>outlineview</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <script type = "text/javascript">
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
-        <script type = "text/javascript">
+        <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
-            objj_msgSend_decorate(objj_backtrace_decorator);
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
 
             // Uncomment to enable runtime type checking:
-            // objj_msgSend_decorate(objj_typecheck_decorator);
+            //objj_msgSend_decorate(objj_typecheck_decorator);
 
             // Uncomment (along with both above) to print backtraces on type check errors:
             //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading outlineview...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPOutlineViewTest/index.html b/Tests/Manual/CPOutlineViewTest/index.html
index b777fd706..ac42c98a7 100644
--- a/Tests/Manual/CPOutlineViewTest/index.html
+++ b/Tests/Manual/CPOutlineViewTest/index.html
@@ -1,69 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- outlineview
+ __project.name__
 
- Created by You on January 22, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>outlineview</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading outlineview...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPOutlineViewViewBasedCibTest/index-debug.html b/Tests/Manual/CPOutlineViewViewBasedCibTest/index-debug.html
index a8557b32a..a36b1d3b9 100644
--- a/Tests/Manual/CPOutlineViewViewBasedCibTest/index-debug.html
+++ b/Tests/Manual/CPOutlineViewViewBasedCibTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPOutlineViewViewBasedCibTest
+ __project.name__
 
- Created by You on April 11, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPOutlineViewViewBasedCibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPOutlineViewViewBasedCibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPOutlineViewViewBasedCibTest/index.html b/Tests/Manual/CPOutlineViewViewBasedCibTest/index.html
index 6a881aa50..ac42c98a7 100644
--- a/Tests/Manual/CPOutlineViewViewBasedCibTest/index.html
+++ b/Tests/Manual/CPOutlineViewViewBasedCibTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPOutlineViewViewBasedCibTest
+ __project.name__
 
- Created by You on April 11, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPOutlineViewViewBasedCibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPOutlineViewViewBasedCibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPanelTest/index-debug.html b/Tests/Manual/CPPanelTest/index-debug.html
index d2336e707..a36b1d3b9 100644
--- a/Tests/Manual/CPPanelTest/index-debug.html
+++ b/Tests/Manual/CPPanelTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPPanelTest
+ __project.name__
 
- Created by You on June 18, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPPanelTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -102,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPPanelTest/index.html b/Tests/Manual/CPPanelTest/index.html
index 6f82ac7f8..ac42c98a7 100644
--- a/Tests/Manual/CPPanelTest/index.html
+++ b/Tests/Manual/CPPanelTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPPanelTest
+ __project.name__
 
- Created by You on June 18, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPPanelTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -72,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPPlatformWindow/index-debug.html b/Tests/Manual/CPPlatformWindow/index-debug.html
index a908e47c7..a36b1d3b9 100644
--- a/Tests/Manual/CPPlatformWindow/index-debug.html
+++ b/Tests/Manual/CPPlatformWindow/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPPlatformWindow
+ __project.name__
 
- Created by You on October 30, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPPlatformWindow</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -102,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPPlatformWindow/index.html b/Tests/Manual/CPPlatformWindow/index.html
index 32157686e..ac42c98a7 100644
--- a/Tests/Manual/CPPlatformWindow/index.html
+++ b/Tests/Manual/CPPlatformWindow/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPPlatformWindow
+ __project.name__
 
- Created by You on October 30, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPPlatformWindow</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -72,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPPlattformWindowMinSize/index-debug.html b/Tests/Manual/CPPlattformWindowMinSize/index-debug.html
index aa6461fdc..a36b1d3b9 100644
--- a/Tests/Manual/CPPlattformWindowMinSize/index-debug.html
+++ b/Tests/Manual/CPPlattformWindowMinSize/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPPopUpButtonTest
+ __project.name__
 
- Created by You on December 8, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPopUpButtonTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPopUpButtonTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPlattformWindowMinSize/index.html b/Tests/Manual/CPPlattformWindowMinSize/index.html
index 1f2fb16e4..ac42c98a7 100644
--- a/Tests/Manual/CPPlattformWindowMinSize/index.html
+++ b/Tests/Manual/CPPlattformWindowMinSize/index.html
@@ -1,76 +1,166 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPPopUpButtonTest
+ __project.name__
 
- Created by You on December 8, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPopUpButtonTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPopUpButtonTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPPopUpButtonBindings/index-debug.html b/Tests/Manual/CPPopUpButtonBindings/index-debug.html
index 0ad0aff89..a36b1d3b9 100644
--- a/Tests/Manual/CPPopUpButtonBindings/index-debug.html
+++ b/Tests/Manual/CPPopUpButtonBindings/index-debug.html
@@ -1,31 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPPopUpButtonBindings
+ __project.name__
 
- Created by You on November 2, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPopUpButtonBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -34,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -53,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPopUpButtonBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPopUpButtonBindings/index.html b/Tests/Manual/CPPopUpButtonBindings/index.html
index a997a675f..ac42c98a7 100644
--- a/Tests/Manual/CPPopUpButtonBindings/index.html
+++ b/Tests/Manual/CPPopUpButtonBindings/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPPopUpButtonBindings
+ __project.name__
 
- Created by You on November 2, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPopUpButtonBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPopUpButtonBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPopUpButtonTest/index-debug.html b/Tests/Manual/CPPopUpButtonTest/index-debug.html
index aa6461fdc..a36b1d3b9 100644
--- a/Tests/Manual/CPPopUpButtonTest/index-debug.html
+++ b/Tests/Manual/CPPopUpButtonTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPPopUpButtonTest
+ __project.name__
 
- Created by You on December 8, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPopUpButtonTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPopUpButtonTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPopUpButtonTest/index.html b/Tests/Manual/CPPopUpButtonTest/index.html
index 1f2fb16e4..ac42c98a7 100644
--- a/Tests/Manual/CPPopUpButtonTest/index.html
+++ b/Tests/Manual/CPPopUpButtonTest/index.html
@@ -1,76 +1,166 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPPopUpButtonTest
+ __project.name__
 
- Created by You on December 8, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPopUpButtonTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPopUpButtonTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPPopover/index-debug.html b/Tests/Manual/CPPopover/index-debug.html
index c8bfddf86..a36b1d3b9 100644
--- a/Tests/Manual/CPPopover/index-debug.html
+++ b/Tests/Manual/CPPopover/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPPopover Test
+ __project.name__
 
- Created by You on July 6, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPopover Test</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPopover Test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPopover/index.html b/Tests/Manual/CPPopover/index.html
index 87cbb633f..ac42c98a7 100644
--- a/Tests/Manual/CPPopover/index.html
+++ b/Tests/Manual/CPPopover/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPPopover Test
+ __project.name__
 
- Created by You on July 6, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPopover Test</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPopover Test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPPredicateEditorCibTest/index-debug.html b/Tests/Manual/CPPredicateEditorCibTest/index-debug.html
index c15f34a63..a36b1d3b9 100644
--- a/Tests/Manual/CPPredicateEditorCibTest/index-debug.html
+++ b/Tests/Manual/CPPredicateEditorCibTest/index-debug.html
@@ -1,43 +1,87 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPPredicateEditorTest
+ __project.name__
 
- Created by You on May 7, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPredicateEditorTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
 
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
             // Uncomment to enable runtime type checking:
             //objj_msgSend_decorate(objj_typecheck_decorator);
 
@@ -50,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPredicateEditorTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPredicateEditorCibTest/index.html b/Tests/Manual/CPPredicateEditorCibTest/index.html
index f4100327f..ac42c98a7 100644
--- a/Tests/Manual/CPPredicateEditorCibTest/index.html
+++ b/Tests/Manual/CPPredicateEditorCibTest/index.html
@@ -1,79 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPPredicateEditorTest
+ __project.name__
 
- Created by You on May 7, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPredicateEditorTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPredicateEditorTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPProgressIndicator/index-debug.html b/Tests/Manual/CPProgressIndicator/index-debug.html
index b97c85b5c..a36b1d3b9 100644
--- a/Tests/Manual/CPProgressIndicator/index-debug.html
+++ b/Tests/Manual/CPProgressIndicator/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPProgressIndicator
+ __project.name__
 
- Created by Alexander Ljungberg on May 3, 2012.
- Copyright 2012, SlevenBits Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPProgressIndicator</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPProgressIndicator...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPProgressIndicator/index.html b/Tests/Manual/CPProgressIndicator/index.html
index d6c5ab5bb..ac42c98a7 100644
--- a/Tests/Manual/CPProgressIndicator/index.html
+++ b/Tests/Manual/CPProgressIndicator/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPProgressIndicator
+ __project.name__
 
- Created by Alexander Ljungberg on May 3, 2012.
- Copyright 2012, SlevenBits Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPProgressIndicator</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPProgressIndicator...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPropertyListSerializationTest/index-debug.html b/Tests/Manual/CPPropertyListSerializationTest/index-debug.html
index 5334885e6..a36b1d3b9 100644
--- a/Tests/Manual/CPPropertyListSerializationTest/index-debug.html
+++ b/Tests/Manual/CPPropertyListSerializationTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPPropertyListSerializationTest
+ __project.name__
 
- Created by You on March 9, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPropertyListSerializationTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPropertyListSerializationTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPPropertyListSerializationTest/index.html b/Tests/Manual/CPPropertyListSerializationTest/index.html
index 1f6923ace..ac42c98a7 100644
--- a/Tests/Manual/CPPropertyListSerializationTest/index.html
+++ b/Tests/Manual/CPPropertyListSerializationTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPPropertyListSerializationTest
+ __project.name__
 
- Created by You on March 9, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPPropertyListSerializationTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPPropertyListSerializationTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPRadioBindings/index-debug.html b/Tests/Manual/CPRadioBindings/index-debug.html
index f50db83df..a36b1d3b9 100644
--- a/Tests/Manual/CPRadioBindings/index-debug.html
+++ b/Tests/Manual/CPRadioBindings/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPRadioBindings
+ __project.name__
 
- Created by You on February 22, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPRadioBindings</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPRadioBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPRadioBindings/index.html b/Tests/Manual/CPRadioBindings/index.html
index 67a56600a..ac42c98a7 100644
--- a/Tests/Manual/CPRadioBindings/index.html
+++ b/Tests/Manual/CPRadioBindings/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPRadioBindings
+ __project.name__
 
- Created by You on February 22, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPRadioBindings</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPRadioBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPRuleEditorCibTest/index-debug.html b/Tests/Manual/CPRuleEditorCibTest/index-debug.html
index 89bd441c7..a36b1d3b9 100644
--- a/Tests/Manual/CPRuleEditorCibTest/index-debug.html
+++ b/Tests/Manual/CPRuleEditorCibTest/index-debug.html
@@ -1,31 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPRuleEditorCibTest
+ __project.name__
 
- Created by You on September 3, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPRuleEditorCibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -34,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -53,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPRuleEditorCibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPRuleEditorCibTest/index.html b/Tests/Manual/CPRuleEditorCibTest/index.html
index 26facfdda..ac42c98a7 100644
--- a/Tests/Manual/CPRuleEditorCibTest/index.html
+++ b/Tests/Manual/CPRuleEditorCibTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPRuleEditorCibTest
+ __project.name__
 
- Created by You on September 3, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPRuleEditorCibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPRuleEditorCibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPScrollView/index-debug.html b/Tests/Manual/CPScrollView/index-debug.html
index 1f2fe33c9..a36b1d3b9 100644
--- a/Tests/Manual/CPScrollView/index-debug.html
+++ b/Tests/Manual/CPScrollView/index-debug.html
@@ -1,41 +1,83 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- Scrolling
+ __project.name__
 
- Created by You on August 27, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>Scrolling</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
-            objj_msgSend_decorate(objj_backtrace_decorator);
+            //objj_msgSend_decorate(objj_backtrace_decorator);
 
             // Uncomment to supress exceptions that take place inside a message
             //objj_msgSend_decorate(objj_supress_exceptions_decorator)
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading Scrolling...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPScrollView/index.html b/Tests/Manual/CPScrollView/index.html
index 62ab8c7fb..ac42c98a7 100644
--- a/Tests/Manual/CPScrollView/index.html
+++ b/Tests/Manual/CPScrollView/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- Scrolling
+ __project.name__
 
- Created by You on August 27, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>Scrolling</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading Scrolling...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPScrollView2/index-debug.html b/Tests/Manual/CPScrollView2/index-debug.html
index e5d7a3445..a36b1d3b9 100644
--- a/Tests/Manual/CPScrollView2/index-debug.html
+++ b/Tests/Manual/CPScrollView2/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- scrollview
+ __project.name__
 
- Created by You on October 3, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>scrollview</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading scrollview...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPScrollView2/index.html b/Tests/Manual/CPScrollView2/index.html
index 4d99b1077..ac42c98a7 100644
--- a/Tests/Manual/CPScrollView2/index.html
+++ b/Tests/Manual/CPScrollView2/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- scrollview
+ __project.name__
 
- Created by You on October 3, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>scrollview</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading scrollview...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSearchField/index-debug.html b/Tests/Manual/CPSearchField/index-debug.html
index 7b588b988..a36b1d3b9 100644
--- a/Tests/Manual/CPSearchField/index-debug.html
+++ b/Tests/Manual/CPSearchField/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPSearchField
+ __project.name__
 
- Created by You on November 27, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPSearchField</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSearchField...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSearchField/index.html b/Tests/Manual/CPSearchField/index.html
index f3a34919e..ac42c98a7 100644
--- a/Tests/Manual/CPSearchField/index.html
+++ b/Tests/Manual/CPSearchField/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPSearchField
+ __project.name__
 
- Created by You on November 27, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPSearchField</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSearchField...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSearchFieldPredicateBinding/index-debug.html b/Tests/Manual/CPSearchFieldPredicateBinding/index-debug.html
index 277ed18ef..a36b1d3b9 100755
--- a/Tests/Manual/CPSearchFieldPredicateBinding/index-debug.html
+++ b/Tests/Manual/CPSearchFieldPredicateBinding/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- 44-Sorting-CPTableView
+ __project.name__
 
- Created by Argos Oz on May 1, 2018.
- Copyright 2018, Army of Me, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>44-Sorting-CPTableView</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -193,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPSearchFieldPredicateBinding/index.html b/Tests/Manual/CPSearchFieldPredicateBinding/index.html
index 618ec9cec..ac42c98a7 100755
--- a/Tests/Manual/CPSearchFieldPredicateBinding/index.html
+++ b/Tests/Manual/CPSearchFieldPredicateBinding/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- 44-Sorting-CPTableView
+ __project.name__
 
- Created by Argos Oz on May 1, 2018.
- Copyright 2018, Army of Me, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>44-Sorting-CPTableView</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -155,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPSegmentedControlBindings/index-debug.html b/Tests/Manual/CPSegmentedControlBindings/index-debug.html
index 8afbc1aeb..a36b1d3b9 100644
--- a/Tests/Manual/CPSegmentedControlBindings/index-debug.html
+++ b/Tests/Manual/CPSegmentedControlBindings/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPSegmentedControlBindings
+ __project.name__
 
- Created by You on March 8, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPSegmentedControlBindings</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSegmentedControlBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSegmentedControlBindings/index.html b/Tests/Manual/CPSegmentedControlBindings/index.html
index cb2d2cf6d..ac42c98a7 100644
--- a/Tests/Manual/CPSegmentedControlBindings/index.html
+++ b/Tests/Manual/CPSegmentedControlBindings/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPSegmentedControlBindings
+ __project.name__
 
- Created by You on March 8, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPSegmentedControlBindings</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSegmentedControlBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSegmentedControlTest/index-debug.html b/Tests/Manual/CPSegmentedControlTest/index-debug.html
index 39d14e30e..a36b1d3b9 100644
--- a/Tests/Manual/CPSegmentedControlTest/index-debug.html
+++ b/Tests/Manual/CPSegmentedControlTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPSegmentedControlTest
+ __project.name__
 
- Created by You on January 4, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPSegmentedControlTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSegmentedControlTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSegmentedControlTest/index.html b/Tests/Manual/CPSegmentedControlTest/index.html
index 9f04cb8aa..ac42c98a7 100644
--- a/Tests/Manual/CPSegmentedControlTest/index.html
+++ b/Tests/Manual/CPSegmentedControlTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPSegmentedControlTest
+ __project.name__
 
- Created by You on January 4, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPSegmentedControlTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSegmentedControlTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSoundTest/index-debug.html b/Tests/Manual/CPSoundTest/index-debug.html
index 828d60ea2..a36b1d3b9 100644
--- a/Tests/Manual/CPSoundTest/index-debug.html
+++ b/Tests/Manual/CPSoundTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPSoundTest
+ __project.name__
 
- Created by Alexander Ljungberg on November 18, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPSoundTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSoundTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSoundTest/index.html b/Tests/Manual/CPSoundTest/index.html
index 32df44fb3..ac42c98a7 100644
--- a/Tests/Manual/CPSoundTest/index.html
+++ b/Tests/Manual/CPSoundTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPSoundTest
+ __project.name__
 
- Created by Alexander Ljungberg on November 18, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPSoundTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSoundTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPSplitViewDivider/index-debug.html b/Tests/Manual/CPSplitViewDivider/index-debug.html
index 8040f8aa7..a36b1d3b9 100644
--- a/Tests/Manual/CPSplitViewDivider/index-debug.html
+++ b/Tests/Manual/CPSplitViewDivider/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPSplitViewDivider
+ __project.name__
 
- Created by You on January 12, 2016.
- Copyright 2016, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPSplitViewDivider</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,8 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
-            // Uncomment below to generate debug symbols, type signatures and inline objj_msgSend functions
-            // OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "InlineMsgSend"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -64,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -182,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPSplitViewDivider/index.html b/Tests/Manual/CPSplitViewDivider/index.html
index 44d7516fa..ac42c98a7 100644
--- a/Tests/Manual/CPSplitViewDivider/index.html
+++ b/Tests/Manual/CPSplitViewDivider/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPSplitViewDivider
+ __project.name__
 
- Created by You on January 12, 2016.
- Copyright 2016, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPSplitViewDivider</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPSplitViewTest/index-debug.html b/Tests/Manual/CPSplitViewTest/index-debug.html
index 59adbbf9e..a36b1d3b9 100644
--- a/Tests/Manual/CPSplitViewTest/index-debug.html
+++ b/Tests/Manual/CPSplitViewTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPSplitViewTest
+ __project.name__
 
- Created by Alexander Ljungberg on January 27, 2012.
- Copyright 2012, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPSplitViewTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSplitViewTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPSplitViewTest/index.html b/Tests/Manual/CPSplitViewTest/index.html
index f88dff0f4..ac42c98a7 100644
--- a/Tests/Manual/CPSplitViewTest/index.html
+++ b/Tests/Manual/CPSplitViewTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPSplitViewTest
+ __project.name__
 
- Created by Alexander Ljungberg on January 27, 2012.
- Copyright 2012, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPSplitViewTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPSplitViewTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPStepperBindings/index-debug.html b/Tests/Manual/CPStepperBindings/index-debug.html
index 4977a329e..a36b1d3b9 100644
--- a/Tests/Manual/CPStepperBindings/index-debug.html
+++ b/Tests/Manual/CPStepperBindings/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPStepperBindings
+ __project.name__
 
- Created by You on November 27, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPStepperBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPStepperBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPStepperBindings/index.html b/Tests/Manual/CPStepperBindings/index.html
index 9782d3281..ac42c98a7 100644
--- a/Tests/Manual/CPStepperBindings/index.html
+++ b/Tests/Manual/CPStepperBindings/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPStepperBindings
+ __project.name__
 
- Created by You on November 27, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPStepperBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPStepperBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPStepperNibTest/index-debug.html b/Tests/Manual/CPStepperNibTest/index-debug.html
index 5d256189d..a36b1d3b9 100644
--- a/Tests/Manual/CPStepperNibTest/index-debug.html
+++ b/Tests/Manual/CPStepperNibTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPStepperNibTest
+ __project.name__
 
- Created by You on February 7, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPStepperNibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPStepperNibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPStepperNibTest/index.html b/Tests/Manual/CPStepperNibTest/index.html
index 0bd329799..ac42c98a7 100644
--- a/Tests/Manual/CPStepperNibTest/index.html
+++ b/Tests/Manual/CPStepperNibTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPStepperNibTest
+ __project.name__
 
- Created by You on February 7, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPStepperNibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPStepperNibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTabView2/index-debug.html b/Tests/Manual/CPTabView2/index-debug.html
index e1bbb8d33..a36b1d3b9 100644
--- a/Tests/Manual/CPTabView2/index-debug.html
+++ b/Tests/Manual/CPTabView2/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPTabView2
+ __project.name__
 
- Created by You on August 27, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTabView2</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTabView2...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTabView2/index.html b/Tests/Manual/CPTabView2/index.html
index 95c5dee7d..ac42c98a7 100644
--- a/Tests/Manual/CPTabView2/index.html
+++ b/Tests/Manual/CPTabView2/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTabView2
+ __project.name__
 
- Created by You on August 27, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTabView2</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTabView2...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPTabViewBindings/index-debug.html b/Tests/Manual/CPTabViewBindings/index-debug.html
index 029e77822..a36b1d3b9 100644
--- a/Tests/Manual/CPTabViewBindings/index-debug.html
+++ b/Tests/Manual/CPTabViewBindings/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPTabViewBindings
+ __project.name__
 
- Created by You on February 25, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTabViewBindings</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -59,8 +71,10 @@
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
+            objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -179,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTabViewBindings/index.html b/Tests/Manual/CPTabViewBindings/index.html
index 65e579ad1..ac42c98a7 100644
--- a/Tests/Manual/CPTabViewBindings/index.html
+++ b/Tests/Manual/CPTabViewBindings/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPTabViewBindings
+ __project.name__
 
- Created by You on February 25, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTabViewBindings</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTabViewNib/index-debug.html b/Tests/Manual/CPTabViewNib/index-debug.html
index 8caf0bb8f..a36b1d3b9 100644
--- a/Tests/Manual/CPTabViewNib/index-debug.html
+++ b/Tests/Manual/CPTabViewNib/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPTabViewNib
+ __project.name__
 
- Created by Alexander Ljungberg on November 5, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTabViewNib</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTabViewNib...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTabViewNib/index.html b/Tests/Manual/CPTabViewNib/index.html
index ef9d8b592..ac42c98a7 100644
--- a/Tests/Manual/CPTabViewNib/index.html
+++ b/Tests/Manual/CPTabViewNib/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTabViewNib
+ __project.name__
 
- Created by Alexander Ljungberg on November 5, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTabViewNib</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTabViewNib...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTableViewGroupRows/index-debug.html b/Tests/Manual/CPTableViewGroupRows/index-debug.html
index a6c743171..a36b1d3b9 100644
--- a/Tests/Manual/CPTableViewGroupRows/index-debug.html
+++ b/Tests/Manual/CPTableViewGroupRows/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPTableViewGroupRows
+ __project.name__
 
- Created by You on November 5, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTableViewGroupRows</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTableViewGroupRows...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTableViewGroupRows/index.html b/Tests/Manual/CPTableViewGroupRows/index.html
index df695ceb7..ac42c98a7 100644
--- a/Tests/Manual/CPTableViewGroupRows/index.html
+++ b/Tests/Manual/CPTableViewGroupRows/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTableViewGroupRows
+ __project.name__
 
- Created by You on November 5, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTableViewGroupRows</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTableViewGroupRows...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPTextField/index-debug.html b/Tests/Manual/CPTextField/index-debug.html
index 36a07aa27..a36b1d3b9 100644
--- a/Tests/Manual/CPTextField/index-debug.html
+++ b/Tests/Manual/CPTextField/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPTextField
+ __project.name__
 
- Created by Alexander Ljungberg on August 2, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTextField</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTextField...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTextField/index.html b/Tests/Manual/CPTextField/index.html
index b18467d00..ac42c98a7 100644
--- a/Tests/Manual/CPTextField/index.html
+++ b/Tests/Manual/CPTextField/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTextField
+ __project.name__
 
- Created by Alexander Ljungberg on August 2, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTextField</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTextField...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPTextFieldEditingStyleTest/index-debug.html b/Tests/Manual/CPTextFieldEditingStyleTest/index-debug.html
index d98a6aa5b..a36b1d3b9 100644
--- a/Tests/Manual/CPTextFieldEditingStyleTest/index-debug.html
+++ b/Tests/Manual/CPTextFieldEditingStyleTest/index-debug.html
@@ -2,9 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPTextFieldEditingStyleTest
+ __project.name__
 
- Created by Alexandre Wilhelm on June 9, 2014.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -24,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextFieldEditingStyleTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -32,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -61,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -101,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -179,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextFieldEditingStyleTest/index.html b/Tests/Manual/CPTextFieldEditingStyleTest/index.html
index 61cb32972..ac42c98a7 100644
--- a/Tests/Manual/CPTextFieldEditingStyleTest/index.html
+++ b/Tests/Manual/CPTextFieldEditingStyleTest/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPTextFieldEditingStyleTest
+ __project.name__
 
- Created by Alexandre Wilhelm on June 9, 2014.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -24,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextFieldEditingStyleTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -71,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -149,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextFieldHeightTest/index-debug.html b/Tests/Manual/CPTextFieldHeightTest/index-debug.html
index 9a7feb2ab..a36b1d3b9 100644
--- a/Tests/Manual/CPTextFieldHeightTest/index-debug.html
+++ b/Tests/Manual/CPTextFieldHeightTest/index-debug.html
@@ -1,68 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPTextFieldHeightTest
+ __project.name__
 
- Created by Aparajita Fishman on August 31, 2010.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPTextField Height Test</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPTextField Height Test...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTextFieldHeightTest/index.html b/Tests/Manual/CPTextFieldHeightTest/index.html
index b83fed1fa..ac42c98a7 100644
--- a/Tests/Manual/CPTextFieldHeightTest/index.html
+++ b/Tests/Manual/CPTextFieldHeightTest/index.html
@@ -1,67 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTextFieldHeightTest
+ __project.name__
 
- Created by Aparajita Fishman on August 31, 2010.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>CPTextField Height Test</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading CPTextField Height Test...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTextFieldMovementsTest/index-debug.html b/Tests/Manual/CPTextFieldMovementsTest/index-debug.html
index d7cd7aef1..a36b1d3b9 100644
--- a/Tests/Manual/CPTextFieldMovementsTest/index-debug.html
+++ b/Tests/Manual/CPTextFieldMovementsTest/index-debug.html
@@ -2,9 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPTextFieldMovementsTest
+ __project.name__
 
- Created by Alexandre Wilhelm on October 29, 2013.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -24,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextFieldMovementsTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -32,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -61,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -101,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -179,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextFieldMovementsTest/index.html b/Tests/Manual/CPTextFieldMovementsTest/index.html
index 1664f234e..ac42c98a7 100644
--- a/Tests/Manual/CPTextFieldMovementsTest/index.html
+++ b/Tests/Manual/CPTextFieldMovementsTest/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPTextFieldMovementsTest
+ __project.name__
 
- Created by Alexandre Wilhelm on October 29, 2013.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -24,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextFieldMovementsTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -71,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -149,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextFieldMultiline/index-debug.html b/Tests/Manual/CPTextFieldMultiline/index-debug.html
index 7a4693877..a36b1d3b9 100644
--- a/Tests/Manual/CPTextFieldMultiline/index-debug.html
+++ b/Tests/Manual/CPTextFieldMultiline/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPTextFielMultine
+ __project.name__
 
- Created by You on November 12, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextFielMultine</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -102,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextFieldMultiline/index.html b/Tests/Manual/CPTextFieldMultiline/index.html
index cb15b05a5..ac42c98a7 100644
--- a/Tests/Manual/CPTextFieldMultiline/index.html
+++ b/Tests/Manual/CPTextFieldMultiline/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPTextFielMultine
+ __project.name__
 
- Created by You on November 12, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextFielMultine</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -72,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextView/index.html b/Tests/Manual/CPTextView/index.html
index 5069921db..ac42c98a7 100644
--- a/Tests/Manual/CPTextView/index.html
+++ b/Tests/Manual/CPTextView/index.html
@@ -1,74 +1,166 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTextView
+ __project.name__
 
- Created by Alexander Ljungberg on May 28, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTextView</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTextView...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTextViewCibTest/index-debug.html b/Tests/Manual/CPTextViewCibTest/index-debug.html
index ed8c41c09..a36b1d3b9 100644
--- a/Tests/Manual/CPTextViewCibTest/index-debug.html
+++ b/Tests/Manual/CPTextViewCibTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPTextViewCibTest
+ __project.name__
 
- Created by You on June 4, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextViewCibTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -102,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextViewCibTest/index.html b/Tests/Manual/CPTextViewCibTest/index.html
index 9dd3013c4..ac42c98a7 100644
--- a/Tests/Manual/CPTextViewCibTest/index.html
+++ b/Tests/Manual/CPTextViewCibTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPTextViewCibTest
+ __project.name__
 
- Created by You on June 4, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextViewCibTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -72,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextViewDelegateAndNotifications/index-debug.html b/Tests/Manual/CPTextViewDelegateAndNotifications/index-debug.html
index 153ad11f1..a36b1d3b9 100644
--- a/Tests/Manual/CPTextViewDelegateAndNotifications/index-debug.html
+++ b/Tests/Manual/CPTextViewDelegateAndNotifications/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPTextViewDelegateAndNotifications
+ __project.name__
 
- Created by You on December 22, 2017.
- Copyright 2017, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextViewDelegateAndNotifications</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -193,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTextViewDelegateAndNotifications/index.html b/Tests/Manual/CPTextViewDelegateAndNotifications/index.html
index 466bd2815..ac42c98a7 100644
--- a/Tests/Manual/CPTextViewDelegateAndNotifications/index.html
+++ b/Tests/Manual/CPTextViewDelegateAndNotifications/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPTextViewDelegateAndNotifications
+ __project.name__
 
- Created by You on December 22, 2017.
- Copyright 2017, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTextViewDelegateAndNotifications</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -155,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPTimeZone/index-debug.html b/Tests/Manual/CPTimeZone/index-debug.html
index 577b77b22..a36b1d3b9 100644
--- a/Tests/Manual/CPTimeZone/index-debug.html
+++ b/Tests/Manual/CPTimeZone/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPTimeZone
+ __project.name__
 
- Created by You on April 16, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTimeZone</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTimeZone...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTimeZone/index.html b/Tests/Manual/CPTimeZone/index.html
index 95dd00e9e..ac42c98a7 100644
--- a/Tests/Manual/CPTimeZone/index.html
+++ b/Tests/Manual/CPTimeZone/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPTimeZone
+ __project.name__
 
- Created by You on April 16, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPTimeZone</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTimeZone...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTokenFieldTest/index-debug.html b/Tests/Manual/CPTokenFieldTest/index-debug.html
index 8e19cc826..a36b1d3b9 100644
--- a/Tests/Manual/CPTokenFieldTest/index-debug.html
+++ b/Tests/Manual/CPTokenFieldTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPTokenFieldTest
+ __project.name__
 
- Created by Alexander Ljungberg on October 2, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTokenFieldTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTokenFieldTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPTokenFieldTest/index.html b/Tests/Manual/CPTokenFieldTest/index.html
index 988f4eb7e..ac42c98a7 100644
--- a/Tests/Manual/CPTokenFieldTest/index.html
+++ b/Tests/Manual/CPTokenFieldTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTokenFieldTest
+ __project.name__
 
- Created by Alexander Ljungberg on October 2, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTokenFieldTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTokenFieldTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPToolTip/index-debug.html b/Tests/Manual/CPToolTip/index-debug.html
index 989b3bf61..a36b1d3b9 100644
--- a/Tests/Manual/CPToolTip/index-debug.html
+++ b/Tests/Manual/CPToolTip/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- tooltips
+ __project.name__
 
- Created by You on April 26, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>tooltips</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading tooltips...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPToolTip/index.html b/Tests/Manual/CPToolTip/index.html
index 86f03ebbd..ac42c98a7 100644
--- a/Tests/Manual/CPToolTip/index.html
+++ b/Tests/Manual/CPToolTip/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- tooltips
+ __project.name__
 
- Created by You on April 26, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>tooltips</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading tooltips...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPToolbarTest/index-debug.html b/Tests/Manual/CPToolbarTest/index-debug.html
index 757e3211e..a36b1d3b9 100644
--- a/Tests/Manual/CPToolbarTest/index-debug.html
+++ b/Tests/Manual/CPToolbarTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPToolbarTest
+ __project.name__
 
- Created by Alexander Ljungberg on June 12, 2012.
- Copyright 2012, SlevenBits Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPToolbarTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPToolbarTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPToolbarTest/index.html b/Tests/Manual/CPToolbarTest/index.html
index 83e243181..ac42c98a7 100644
--- a/Tests/Manual/CPToolbarTest/index.html
+++ b/Tests/Manual/CPToolbarTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPToolbarTest
+ __project.name__
 
- Created by Alexander Ljungberg on June 12, 2012.
- Copyright 2012, SlevenBits Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPToolbarTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPToolbarTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPURLConnectionAsyncTest/index-debug.html b/Tests/Manual/CPURLConnectionAsyncTest/index-debug.html
index a441ea9b2..a36b1d3b9 100644
--- a/Tests/Manual/CPURLConnectionAsyncTest/index-debug.html
+++ b/Tests/Manual/CPURLConnectionAsyncTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPURLConnectionAsyncTest
+ __project.name__
 
- Created by You on February 1, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPURLConnectionAsyncTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPURLConnectionAsyncTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPURLConnectionAsyncTest/index.html b/Tests/Manual/CPURLConnectionAsyncTest/index.html
index 0bc96c02b..ac42c98a7 100644
--- a/Tests/Manual/CPURLConnectionAsyncTest/index.html
+++ b/Tests/Manual/CPURLConnectionAsyncTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPURLConnectionAsyncTest
+ __project.name__
 
- Created by You on February 1, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPURLConnectionAsyncTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPURLConnectionAsyncTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPURLConnectionSynchronousTest/index-debug.html b/Tests/Manual/CPURLConnectionSynchronousTest/index-debug.html
index bbab82e8e..a36b1d3b9 100644
--- a/Tests/Manual/CPURLConnectionSynchronousTest/index-debug.html
+++ b/Tests/Manual/CPURLConnectionSynchronousTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPURLConnectionSynchronousTest
+ __project.name__
 
- Created by You on July 28, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPURLConnectionSynchronousTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPURLConnectionSynchronousTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPURLConnectionSynchronousTest/index.html b/Tests/Manual/CPURLConnectionSynchronousTest/index.html
index 42d7aaf45..ac42c98a7 100644
--- a/Tests/Manual/CPURLConnectionSynchronousTest/index.html
+++ b/Tests/Manual/CPURLConnectionSynchronousTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPURLConnectionSynchronousTest
+ __project.name__
 
- Created by You on July 28, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPURLConnectionSynchronousTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPURLConnectionSynchronousTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPUserDefaults/index-debug.html b/Tests/Manual/CPUserDefaults/index-debug.html
index 51b93ad1d..a36b1d3b9 100644
--- a/Tests/Manual/CPUserDefaults/index-debug.html
+++ b/Tests/Manual/CPUserDefaults/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPUserDefaults
+ __project.name__
 
- Created by You on October 13, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPUserDefaults</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPUserDefaults...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPUserDefaults/index.html b/Tests/Manual/CPUserDefaults/index.html
index 03fc990c9..ac42c98a7 100644
--- a/Tests/Manual/CPUserDefaults/index.html
+++ b/Tests/Manual/CPUserDefaults/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPUserDefaults
+ __project.name__
 
- Created by You on October 13, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPUserDefaults</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPUserDefaults...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPUserDefaultsControllerTest/index-debug.html b/Tests/Manual/CPUserDefaultsControllerTest/index-debug.html
index c63d083d1..a36b1d3b9 100644
--- a/Tests/Manual/CPUserDefaultsControllerTest/index-debug.html
+++ b/Tests/Manual/CPUserDefaultsControllerTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPUserDefaultsControllerTest
+ __project.name__
 
- Created by Alexander Ljungberg on May 30, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPUserDefaultsControllerTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPUserDefaultsControllerTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPUserDefaultsControllerTest/index.html b/Tests/Manual/CPUserDefaultsControllerTest/index.html
index 78f423d41..ac42c98a7 100644
--- a/Tests/Manual/CPUserDefaultsControllerTest/index.html
+++ b/Tests/Manual/CPUserDefaultsControllerTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPUserDefaultsControllerTest
+ __project.name__
 
- Created by Alexander Ljungberg on May 30, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPUserDefaultsControllerTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPUserDefaultsControllerTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPUserNotificationTest/index-debug.html b/Tests/Manual/CPUserNotificationTest/index-debug.html
index 4b4dd4189..a36b1d3b9 100644
--- a/Tests/Manual/CPUserNotificationTest/index-debug.html
+++ b/Tests/Manual/CPUserNotificationTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPUserNotificationTest
+ __project.name__
 
- Created by You on June 25, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPUserNotificationTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPUserNotificationTest/index.html b/Tests/Manual/CPUserNotificationTest/index.html
index 8e40d3c80..ac42c98a7 100644
--- a/Tests/Manual/CPUserNotificationTest/index.html
+++ b/Tests/Manual/CPUserNotificationTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPUserNotificationTest
+ __project.name__
 
- Created by You on June 25, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPUserNotificationTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPViewController/index-debug.html b/Tests/Manual/CPViewController/index-debug.html
index 4d9b333d9..a36b1d3b9 100644
--- a/Tests/Manual/CPViewController/index-debug.html
+++ b/Tests/Manual/CPViewController/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPViewController
+ __project.name__
 
- Created by You on November 11, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPViewController</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,8 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
-            // Uncomment below to generate debug symbols, type signatures and inline objj_msgSend functions
-            // OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "InlineMsgSend"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -64,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -182,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPViewController/index.html b/Tests/Manual/CPViewController/index.html
index 8b2ebeacd..ac42c98a7 100644
--- a/Tests/Manual/CPViewController/index.html
+++ b/Tests/Manual/CPViewController/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPViewController
+ __project.name__
 
- Created by You on November 11, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPViewController</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPVisualEffectViewTest/index-debug.html b/Tests/Manual/CPVisualEffectViewTest/index-debug.html
index c4d1557d3..a36b1d3b9 100644
--- a/Tests/Manual/CPVisualEffectViewTest/index-debug.html
+++ b/Tests/Manual/CPVisualEffectViewTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPVisualEffectViewTest
+ __project.name__
 
- Created by You on August 13, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPVisualEffectViewTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPVisualEffectViewTest/index.html b/Tests/Manual/CPVisualEffectViewTest/index.html
index af62486e2..ac42c98a7 100644
--- a/Tests/Manual/CPVisualEffectViewTest/index.html
+++ b/Tests/Manual/CPVisualEffectViewTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPVisualEffectViewTest
+ __project.name__
 
- Created by You on August 13, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPVisualEffectViewTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPWebViewTest/index-debug.html b/Tests/Manual/CPWebViewTest/index-debug.html
index 6aba07546..a36b1d3b9 100644
--- a/Tests/Manual/CPWebViewTest/index-debug.html
+++ b/Tests/Manual/CPWebViewTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPWebViewTest
+ __project.name__
 
- Created by Alexander Ljungberg on March 4, 2011.
- Copyright 2011, Alexander Ljungberg All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPWebViewTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPWebViewTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPWebViewTest/index.html b/Tests/Manual/CPWebViewTest/index.html
index 6a4475958..ac42c98a7 100644
--- a/Tests/Manual/CPWebViewTest/index.html
+++ b/Tests/Manual/CPWebViewTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPWebViewTest
+ __project.name__
 
- Created by Alexander Ljungberg on March 4, 2011.
- Copyright 2011, Alexander Ljungberg All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPWebViewTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPWebViewTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPWebViewTest2/index-debug.html b/Tests/Manual/CPWebViewTest2/index-debug.html
index fab528613..a36b1d3b9 100644
--- a/Tests/Manual/CPWebViewTest2/index-debug.html
+++ b/Tests/Manual/CPWebViewTest2/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPWebViewTest2
+ __project.name__
 
- Created by Alexander Ljungberg on May 9, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPWebViewTest2</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPWebViewTest2...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPWebViewTest2/index.html b/Tests/Manual/CPWebViewTest2/index.html
index a2b5829de..ac42c98a7 100644
--- a/Tests/Manual/CPWebViewTest2/index.html
+++ b/Tests/Manual/CPWebViewTest2/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPWebViewTest2
+ __project.name__
 
- Created by Alexander Ljungberg on May 9, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPWebViewTest2</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPWebViewTest2...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPWindowLiveResizeTest/index-debug.html b/Tests/Manual/CPWindowLiveResizeTest/index-debug.html
index b7947dd4f..a36b1d3b9 100644
--- a/Tests/Manual/CPWindowLiveResizeTest/index-debug.html
+++ b/Tests/Manual/CPWindowLiveResizeTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPWindowLiveResizeTest
+ __project.name__
 
- Created by You on June 2, 2017.
- Copyright 2017, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPWindowLiveResizeTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -44,7 +44,7 @@
             // more information on decorators.
             //
             // Uncomment or comment on the line below to change the flags
-            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures"/*, "InlineMsgSend"*/];
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -193,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPWindowLiveResizeTest/index.html b/Tests/Manual/CPWindowLiveResizeTest/index.html
index c1746b220..ac42c98a7 100644
--- a/Tests/Manual/CPWindowLiveResizeTest/index.html
+++ b/Tests/Manual/CPWindowLiveResizeTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPWindowLiveResizeTest
+ __project.name__
 
- Created by You on June 2, 2017.
- Copyright 2017, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPWindowLiveResizeTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -36,7 +36,7 @@
             // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
             // code like the Cappuccino frameworks.
             // Uncomment or comment on the line below to change the flags
-            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures", "InlineMsgSend"];
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -155,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CPWindowMovableTest/index-debug.html b/Tests/Manual/CPWindowMovableTest/index-debug.html
index 6dd11647b..a36b1d3b9 100644
--- a/Tests/Manual/CPWindowMovableTest/index-debug.html
+++ b/Tests/Manual/CPWindowMovableTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPWindowMovableTest
+ __project.name__
 
- Created by You on October 28, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPWindowMovableTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPWindowMovableTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPWindowMovableTest/index.html b/Tests/Manual/CPWindowMovableTest/index.html
index 48384810c..ac42c98a7 100644
--- a/Tests/Manual/CPWindowMovableTest/index.html
+++ b/Tests/Manual/CPWindowMovableTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPWindowMovableTest
+ __project.name__
 
- Created by You on October 28, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPWindowMovableTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPWindowMovableTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/CPWindowResizeStyle/index-debug.html b/Tests/Manual/CPWindowResizeStyle/index-debug.html
index 8de964c5b..a36b1d3b9 100644
--- a/Tests/Manual/CPWindowResizeStyle/index-debug.html
+++ b/Tests/Manual/CPWindowResizeStyle/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPWindowResizeStyle
+ __project.name__
 
- Created by You on December 24, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPWindowResizeStyle</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPWindowResizeStyle...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CPWindowResizeStyle/index.html b/Tests/Manual/CPWindowResizeStyle/index.html
index 69456474f..ac42c98a7 100644
--- a/Tests/Manual/CPWindowResizeStyle/index.html
+++ b/Tests/Manual/CPWindowResizeStyle/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPWindowResizeStyle
+ __project.name__
 
- Created by You on December 24, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPWindowResizeStyle</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPWindowResizeStyle...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ChildWindows/index-debug.html b/Tests/Manual/ChildWindows/index-debug.html
index 0d7b3e2f2..a36b1d3b9 100644
--- a/Tests/Manual/ChildWindows/index-debug.html
+++ b/Tests/Manual/ChildWindows/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- ChildWindows
+ __project.name__
 
- Created by You on January 17, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ChildWindows</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ChildWindows...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ChildWindows/index.html b/Tests/Manual/ChildWindows/index.html
index 9d778d2dd..ac42c98a7 100644
--- a/Tests/Manual/ChildWindows/index.html
+++ b/Tests/Manual/ChildWindows/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- ChildWindows
+ __project.name__
 
- Created by You on January 17, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ChildWindows</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ChildWindows...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ContinuouslyUpdatesValueBinding/index-debug.html b/Tests/Manual/ContinuouslyUpdatesValueBinding/index-debug.html
index 0395aa2b9..a36b1d3b9 100644
--- a/Tests/Manual/ContinuouslyUpdatesValueBinding/index-debug.html
+++ b/Tests/Manual/ContinuouslyUpdatesValueBinding/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- BindingContiniouslyUpdatesValue
+ __project.name__
 
- Created by Alexander Ljungberg on March 27, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>BindingContiniouslyUpdatesValue</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading BindingContiniouslyUpdatesValue...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ContinuouslyUpdatesValueBinding/index.html b/Tests/Manual/ContinuouslyUpdatesValueBinding/index.html
index 31b5eb785..ac42c98a7 100644
--- a/Tests/Manual/ContinuouslyUpdatesValueBinding/index.html
+++ b/Tests/Manual/ContinuouslyUpdatesValueBinding/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- BindingContiniouslyUpdatesValue
+ __project.name__
 
- Created by Alexander Ljungberg on March 27, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>BindingContiniouslyUpdatesValue</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading BindingContiniouslyUpdatesValue...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CopyAndPaste/index-debug.html b/Tests/Manual/CopyAndPaste/index-debug.html
index 92421e271..a36b1d3b9 100644
--- a/Tests/Manual/CopyAndPaste/index-debug.html
+++ b/Tests/Manual/CopyAndPaste/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CopyAndPaste
+ __project.name__
 
- Created by Alexander Ljungberg on June 13, 2013.
- Copyright 2013, SlevenBits, Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CopyAndPaste</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CopyAndPaste...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CopyAndPaste/index.html b/Tests/Manual/CopyAndPaste/index.html
index d06e9dbbf..ac42c98a7 100644
--- a/Tests/Manual/CopyAndPaste/index.html
+++ b/Tests/Manual/CopyAndPaste/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CopyAndPaste
+ __project.name__
 
- Created by Alexander Ljungberg on June 13, 2013.
- Copyright 2013, SlevenBits, Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CopyAndPaste</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CopyAndPaste...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/CrossOriginTest/index-debug.html b/Tests/Manual/CrossOriginTest/index-debug.html
index 59a519b3d..a36b1d3b9 100644
--- a/Tests/Manual/CrossOriginTest/index-debug.html
+++ b/Tests/Manual/CrossOriginTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CrossOriginTest
+ __project.name__
 
- Created by You on December 5, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>TestIEWithCredentials</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -102,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/CrossOriginTest/index.html b/Tests/Manual/CrossOriginTest/index.html
index b38196c63..ac42c98a7 100644
--- a/Tests/Manual/CrossOriginTest/index.html
+++ b/Tests/Manual/CrossOriginTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CrossOriginTest
+ __project.name__
 
- Created by You on December 5, 2014.
- Copyright 2014, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CrossOriginTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -72,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/FF4096Test/index-debug.html b/Tests/Manual/FF4096Test/index-debug.html
index cd522a8f3..a36b1d3b9 100755
--- a/Tests/Manual/FF4096Test/index-debug.html
+++ b/Tests/Manual/FF4096Test/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- FFTest
+ __project.name__
 
- Created by C. Blair Duncan on September 22, 2010.
- Copyright 2010, BBDO All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>FFTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading FFTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/FF4096Test/index.html b/Tests/Manual/FF4096Test/index.html
index 13a118179..ac42c98a7 100755
--- a/Tests/Manual/FF4096Test/index.html
+++ b/Tests/Manual/FF4096Test/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- FFTest
+ __project.name__
 
- Created by C. Blair Duncan on September 22, 2010.
- Copyright 2010, BBDO All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>FFTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading FFTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/FontEnhancementTest/CPViewNoDisplayAfterHidingAndResizeBug/index-debug.html b/Tests/Manual/FontEnhancementTest/CPViewNoDisplayAfterHidingAndResizeBug/index-debug.html
index 636db06c8..a36b1d3b9 100644
--- a/Tests/Manual/FontEnhancementTest/CPViewNoDisplayAfterHidingAndResizeBug/index-debug.html
+++ b/Tests/Manual/FontEnhancementTest/CPViewNoDisplayAfterHidingAndResizeBug/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- CPViewNoDisplayAfterHidingAndResizeBug
+ __project.name__
 
- Created by You on February 24, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,19 +25,56 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPViewNoDisplayAfterHidingAndResizeBug</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPViewNoDisplayAfterHidingAndResizeBug...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/FontEnhancementTest/CPViewNoDisplayAfterHidingAndResizeBug/index.html b/Tests/Manual/FontEnhancementTest/CPViewNoDisplayAfterHidingAndResizeBug/index.html
index f27a4cb8a..ac42c98a7 100644
--- a/Tests/Manual/FontEnhancementTest/CPViewNoDisplayAfterHidingAndResizeBug/index.html
+++ b/Tests/Manual/FontEnhancementTest/CPViewNoDisplayAfterHidingAndResizeBug/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- CPViewNoDisplayAfterHidingAndResizeBug
+ __project.name__
 
- Created by You on February 24, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,59 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>CPViewNoDisplayAfterHidingAndResizeBug</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPViewNoDisplayAfterHidingAndResizeBug...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/FontEnhancementTest/index-debug.html b/Tests/Manual/FontEnhancementTest/index-debug.html
index 593d51edc..a36b1d3b9 100644
--- a/Tests/Manual/FontEnhancementTest/index-debug.html
+++ b/Tests/Manual/FontEnhancementTest/index-debug.html
@@ -1,32 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- test
+ __project.name__
 
- Created by aparajita on March 9, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>FontEnhancementTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -35,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -54,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/FontEnhancementTest/index.html b/Tests/Manual/FontEnhancementTest/index.html
index 426e2f3d8..ac42c98a7 100644
--- a/Tests/Manual/FontEnhancementTest/index.html
+++ b/Tests/Manual/FontEnhancementTest/index.html
@@ -1,79 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- test
+ __project.name__
 
- Created by aparajita on March 9, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>FontEnhancementTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/FontMetricsExplorer/index-debug.html b/Tests/Manual/FontMetricsExplorer/index-debug.html
index 15019a6db..a36b1d3b9 100644
--- a/Tests/Manual/FontMetricsExplorer/index-debug.html
+++ b/Tests/Manual/FontMetricsExplorer/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,57 +25,180 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>Font Metrics Explorer</title>
+        <title>__project.name__</title>
 
-        <script type = "text/javascript">
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading Font Metrics Explorer...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/FontMetricsExplorer/index.html b/Tests/Manual/FontMetricsExplorer/index.html
index 594f49abb..ac42c98a7 100644
--- a/Tests/Manual/FontMetricsExplorer/index.html
+++ b/Tests/Manual/FontMetricsExplorer/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,56 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>Font Metrics Explorer</title>
+        <title>__project.name__</title>
 
-        <script type = "text/javascript">
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading Font Metrics Explorer...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/KeyEquivalents/index-debug.html b/Tests/Manual/KeyEquivalents/index-debug.html
index 98b8fc8c6..a36b1d3b9 100644
--- a/Tests/Manual/KeyEquivalents/index-debug.html
+++ b/Tests/Manual/KeyEquivalents/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- cappuccino-keyequivalents
+ __project.name__
 
- Created by Alexander Ljungberg on July 20, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>cappuccino-keyequivalents</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading cappuccino-keyequivalents...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/KeyEquivalents/index.html b/Tests/Manual/KeyEquivalents/index.html
index dde8ace3c..ac42c98a7 100644
--- a/Tests/Manual/KeyEquivalents/index.html
+++ b/Tests/Manual/KeyEquivalents/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- cappuccino-keyequivalents
+ __project.name__
 
- Created by Alexander Ljungberg on July 20, 2010.
- Copyright 2010, WireLoad, LLC All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>cappuccino-keyequivalents</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading cappuccino-keyequivalents...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/KeyViewLoopTest/index-debug.html b/Tests/Manual/KeyViewLoopTest/index-debug.html
index 47971c639..a36b1d3b9 100644
--- a/Tests/Manual/KeyViewLoopTest/index-debug.html
+++ b/Tests/Manual/KeyViewLoopTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- KeyViewLoopTest
+ __project.name__
 
- Created by You on January 7, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>KeyViewLoopTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading KeyViewLoopTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/KeyViewLoopTest/index.html b/Tests/Manual/KeyViewLoopTest/index.html
index 6f77164fb..ac42c98a7 100644
--- a/Tests/Manual/KeyViewLoopTest/index.html
+++ b/Tests/Manual/KeyViewLoopTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- KeyViewLoopTest
+ __project.name__
 
- Created by You on January 7, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>KeyViewLoopTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading KeyViewLoopTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/KeyWindowInTheBackgroundActivation/index-debug.html b/Tests/Manual/KeyWindowInTheBackgroundActivation/index-debug.html
index c4de7ac52..a36b1d3b9 100644
--- a/Tests/Manual/KeyWindowInTheBackgroundActivation/index-debug.html
+++ b/Tests/Manual/KeyWindowInTheBackgroundActivation/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- WindowFrontTest
+ __project.name__
 
- Created by You on January 15, 2018.
- Copyright 2018, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>WindowFrontTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -44,7 +44,7 @@
             // more information on decorators.
             //
             // Uncomment or comment on the line below to change the flags
-            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures"/*, "InlineMsgSend"*/];
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -193,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/KeyWindowInTheBackgroundActivation/index.html b/Tests/Manual/KeyWindowInTheBackgroundActivation/index.html
index 6fd788486..ac42c98a7 100644
--- a/Tests/Manual/KeyWindowInTheBackgroundActivation/index.html
+++ b/Tests/Manual/KeyWindowInTheBackgroundActivation/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- WindowFrontTest
+ __project.name__
 
- Created by You on January 15, 2018.
- Copyright 2018, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>WindowFrontTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -36,7 +36,7 @@
             // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
             // code like the Cappuccino frameworks.
             // Uncomment or comment on the line below to change the flags
-            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures", "InlineMsgSend"];
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -155,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/LayoutTest/index-debug.html b/Tests/Manual/LayoutTest/index-debug.html
index 9a4b7018f..a36b1d3b9 100644
--- a/Tests/Manual/LayoutTest/index-debug.html
+++ b/Tests/Manual/LayoutTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- LayoutTest
+ __project.name__
 
- Created by Alexander Ljungberg on March 13, 2012.
- Copyright 2012, SlevenBits Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>LayoutTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading LayoutTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/LayoutTest/index.html b/Tests/Manual/LayoutTest/index.html
index eae1b83f8..ac42c98a7 100644
--- a/Tests/Manual/LayoutTest/index.html
+++ b/Tests/Manual/LayoutTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- LayoutTest
+ __project.name__
 
- Created by Alexander Ljungberg on March 13, 2012.
- Copyright 2012, SlevenBits Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>LayoutTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading LayoutTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/LoadTimeTest/index-debug.html b/Tests/Manual/LoadTimeTest/index-debug.html
index 407368f65..a36b1d3b9 100644
--- a/Tests/Manual/LoadTimeTest/index-debug.html
+++ b/Tests/Manual/LoadTimeTest/index-debug.html
@@ -1,87 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- LoadTimeTest
+ __project.name__
 
- Created by You on February 23, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <title>LoadTimeTest</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <script type = "text/javascript">
-            startLoad = new Date();
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
-        <script type = "text/javascript">
+        <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
 
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
             // Uncomment to enable runtime type checking:
             //objj_msgSend_decorate(objj_typecheck_decorator);
 
             // Uncomment (along with both above) to print backtraces on type check errors:
             //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type = "text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading LoadTimeTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/LoadTimeTest/index.html b/Tests/Manual/LoadTimeTest/index.html
index 08ff8f5c6..ac42c98a7 100644
--- a/Tests/Manual/LoadTimeTest/index.html
+++ b/Tests/Manual/LoadTimeTest/index.html
@@ -1,73 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- LoadTimeTest
+ __project.name__
 
- Created by You on February 23, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <title>LoadTimeTest</title>
-
-        <script type = "text/javascript">
-            startLoad = new Date();
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type = "text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading LoadTimeTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/LongBindings/index-debug.html b/Tests/Manual/LongBindings/index-debug.html
index 29c1f8447..a36b1d3b9 100644
--- a/Tests/Manual/LongBindings/index-debug.html
+++ b/Tests/Manual/LongBindings/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- bindings-bug
+ __project.name__
 
- Created by You on November 2, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>bindings-bug</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading bindings-bug...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/LongBindings/index.html b/Tests/Manual/LongBindings/index.html
index f267f39e7..ac42c98a7 100644
--- a/Tests/Manual/LongBindings/index.html
+++ b/Tests/Manual/LongBindings/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- bindings-bug
+ __project.name__
 
- Created by You on November 2, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>bindings-bug</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading bindings-bug...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/MobileTest/index-debug.html b/Tests/Manual/MobileTest/index-debug.html
index dd81cdff7..a36b1d3b9 100644
--- a/Tests/Manual/MobileTest/index-debug.html
+++ b/Tests/Manual/MobileTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- MobileTest
+ __project.name__
 
- Created by You on August 18, 2016.
- Copyright 2016, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>MobileTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -44,7 +44,7 @@
             // more information on decorators.
             //
             // Uncomment or comment on the line below to change the flags
-            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures"/*, "InlineMsgSend"*/];
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -193,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/MobileTest/index.html b/Tests/Manual/MobileTest/index.html
index 56bfc77c6..ac42c98a7 100644
--- a/Tests/Manual/MobileTest/index.html
+++ b/Tests/Manual/MobileTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- MobileTest
+ __project.name__
 
- Created by You on August 18, 2016.
- Copyright 2016, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>MobileTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -36,7 +36,7 @@
             // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
             // code like the Cappuccino frameworks.
             // Uncomment or comment on the line below to change the flags
-            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures", "InlineMsgSend"];
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -155,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/MultipleValueBindings/index-debug.html b/Tests/Manual/MultipleValueBindings/index-debug.html
index 68aacbc4a..a36b1d3b9 100644
--- a/Tests/Manual/MultipleValueBindings/index-debug.html
+++ b/Tests/Manual/MultipleValueBindings/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- MultipleValueBindings
+ __project.name__
 
- Created by You on January 31, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>MultipleValueBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading MultipleValueBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/MultipleValueBindings/index.html b/Tests/Manual/MultipleValueBindings/index.html
index 659b13a1b..ac42c98a7 100644
--- a/Tests/Manual/MultipleValueBindings/index.html
+++ b/Tests/Manual/MultipleValueBindings/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- MultipleValueBindings
+ __project.name__
 
- Created by You on January 31, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>MultipleValueBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading MultipleValueBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/NSBoxTest/index-debug.html b/Tests/Manual/NSBoxTest/index-debug.html
index 9dd3bf0ab..a36b1d3b9 100644
--- a/Tests/Manual/NSBoxTest/index-debug.html
+++ b/Tests/Manual/NSBoxTest/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>NSBox Test</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading NSBox Test...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/NSBoxTest/index.html b/Tests/Manual/NSBoxTest/index.html
index 5178d2869..ac42c98a7 100644
--- a/Tests/Manual/NSBoxTest/index.html
+++ b/Tests/Manual/NSBoxTest/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>NSBox Test</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading NSBox Test...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/NSBrowserTest/index-debug.html b/Tests/Manual/NSBrowserTest/index-debug.html
index 10b196497..a36b1d3b9 100644
--- a/Tests/Manual/NSBrowserTest/index-debug.html
+++ b/Tests/Manual/NSBrowserTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- NSBrowserTest
+ __project.name__
 
- Created by You on February 21, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>NSBrowserTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading NSBrowserTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/NSBrowserTest/index.html b/Tests/Manual/NSBrowserTest/index.html
index c3b3d3cd1..ac42c98a7 100644
--- a/Tests/Manual/NSBrowserTest/index.html
+++ b/Tests/Manual/NSBrowserTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- NSBrowserTest
+ __project.name__
 
- Created by You on February 21, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>NSBrowserTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading NSBrowserTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/NewTextFieldBezel/index-debug.html b/Tests/Manual/NewTextFieldBezel/index-debug.html
index 48c27eea6..a36b1d3b9 100644
--- a/Tests/Manual/NewTextFieldBezel/index-debug.html
+++ b/Tests/Manual/NewTextFieldBezel/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- NewTextField
+ __project.name__
 
- Created by aparajita on August 10, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>NewTextField</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading NewTextField...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/NewTextFieldBezel/index.html b/Tests/Manual/NewTextFieldBezel/index.html
index 6bee03c49..ac42c98a7 100644
--- a/Tests/Manual/NewTextFieldBezel/index.html
+++ b/Tests/Manual/NewTextFieldBezel/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- NewTextField
+ __project.name__
 
- Created by aparajita on August 10, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>NewTextField</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading NewTextField...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/Nib2CibAlignment/index-debug.html b/Tests/Manual/Nib2CibAlignment/index-debug.html
index a4f8d9c2b..a36b1d3b9 100644
--- a/Tests/Manual/Nib2CibAlignment/index-debug.html
+++ b/Tests/Manual/Nib2CibAlignment/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- test2
+ __project.name__
 
- Created by You on May 17, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>nib2cib alignment</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test2...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/Nib2CibAlignment/index.html b/Tests/Manual/Nib2CibAlignment/index.html
index e386d4a4f..ac42c98a7 100644
--- a/Tests/Manual/Nib2CibAlignment/index.html
+++ b/Tests/Manual/Nib2CibAlignment/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- test2
+ __project.name__
 
- Created by You on May 17, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>nib2cib alignment</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test2...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/Nib2CibBaselineAlignementTest/index-debug.html b/Tests/Manual/Nib2CibBaselineAlignementTest/index-debug.html
index 99ef57a32..a36b1d3b9 100644
--- a/Tests/Manual/Nib2CibBaselineAlignementTest/index-debug.html
+++ b/Tests/Manual/Nib2CibBaselineAlignementTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- Nib2CibBaselineAlignementTest
+ __project.name__
 
- Created by You on July 12, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>Nib2CibBaselineAlignementTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading Nib2CibBaselineAlignementTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/Nib2CibBaselineAlignementTest/index.html b/Tests/Manual/Nib2CibBaselineAlignementTest/index.html
index fa46309ff..ac42c98a7 100644
--- a/Tests/Manual/Nib2CibBaselineAlignementTest/index.html
+++ b/Tests/Manual/Nib2CibBaselineAlignementTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- Nib2CibBaselineAlignementTest
+ __project.name__
 
- Created by You on July 12, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>Nib2CibBaselineAlignementTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading Nib2CibBaselineAlignementTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/NibAppRemixed/index-debug.html b/Tests/Manual/NibAppRemixed/index-debug.html
index 43b89f4df..a36b1d3b9 100644
--- a/Tests/Manual/NibAppRemixed/index-debug.html
+++ b/Tests/Manual/NibAppRemixed/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- NibApp.new
+ __project.name__
 
- Created by Alexander Ljungberg on May 17, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>NibApp.new</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading NibApp.new...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/NibAppRemixed/index.html b/Tests/Manual/NibAppRemixed/index.html
index 9eed31aea..ac42c98a7 100644
--- a/Tests/Manual/NibAppRemixed/index.html
+++ b/Tests/Manual/NibAppRemixed/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- NibApp.new
+ __project.name__
 
- Created by Alexander Ljungberg on May 17, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>NibApp.new</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading NibApp.new...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/PatternFillTest/index-debug.html b/Tests/Manual/PatternFillTest/index-debug.html
index 5d5c3884f..a36b1d3b9 100644
--- a/Tests/Manual/PatternFillTest/index-debug.html
+++ b/Tests/Manual/PatternFillTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- test
+ __project.name__
 
- Created by aparajita on March 7, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>test</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/PatternFillTest/index.html b/Tests/Manual/PatternFillTest/index.html
index 43c78f997..ac42c98a7 100644
--- a/Tests/Manual/PatternFillTest/index.html
+++ b/Tests/Manual/PatternFillTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- test
+ __project.name__
 
- Created by aparajita on March 7, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>test</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/PlatformWindows/index-debug.html b/Tests/Manual/PlatformWindows/index-debug.html
index 7af8f9aff..a36b1d3b9 100644
--- a/Tests/Manual/PlatformWindows/index-debug.html
+++ b/Tests/Manual/PlatformWindows/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- PlatformWindows
+ __project.name__
 
- Created by Francisco Tolmasky on July 23, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>PlatformWindows</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading PlatformWindows...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/PlatformWindows/index.html b/Tests/Manual/PlatformWindows/index.html
index b1ddd94b6..ac42c98a7 100644
--- a/Tests/Manual/PlatformWindows/index.html
+++ b/Tests/Manual/PlatformWindows/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- PlatformWindows
+ __project.name__
 
- Created by Francisco Tolmasky on July 23, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>PlatformWindows</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading PlatformWindows...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/PopUpButtonEscTest/index-debug.html b/Tests/Manual/PopUpButtonEscTest/index-debug.html
index 355456078..a36b1d3b9 100755
--- a/Tests/Manual/PopUpButtonEscTest/index-debug.html
+++ b/Tests/Manual/PopUpButtonEscTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- PopUpButtonTest
+ __project.name__
 
- Created by Glenn L. Austin on June 26, 2013.
- Copyright 2013, Austin-Soft.com All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>PopUpButtonTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading PopUpButtonTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/PopUpButtonEscTest/index.html b/Tests/Manual/PopUpButtonEscTest/index.html
index 9006d46fd..ac42c98a7 100755
--- a/Tests/Manual/PopUpButtonEscTest/index.html
+++ b/Tests/Manual/PopUpButtonEscTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- PopUpButtonTest
+ __project.name__
 
- Created by Glenn L. Austin on June 26, 2013.
- Copyright 2013, Austin-Soft.com All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>PopUpButtonTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading PopUpButtonTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ScalingTest/index-debug.html b/Tests/Manual/ScalingTest/index-debug.html
index 26bfaf7f1..a36b1d3b9 100644
--- a/Tests/Manual/ScalingTest/index-debug.html
+++ b/Tests/Manual/ScalingTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- ScalingTest
+ __project.name__
 
- Created by You on July 23, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>ScalingTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ScalingTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ScalingTest/index.html b/Tests/Manual/ScalingTest/index.html
index a873d60d0..ac42c98a7 100644
--- a/Tests/Manual/ScalingTest/index.html
+++ b/Tests/Manual/ScalingTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- ScalingTest
+ __project.name__
 
- Created by You on July 23, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>ScalingTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ScalingTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ScrollviewTheming/index-debug.html b/Tests/Manual/ScrollviewTheming/index-debug.html
index 92795e08a..a36b1d3b9 100644
--- a/Tests/Manual/ScrollviewTheming/index-debug.html
+++ b/Tests/Manual/ScrollviewTheming/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- ScrollviewTheming
+ __project.name__
 
- Created by You on September 9, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ScrollviewTheming</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ScrollviewTheming...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ScrollviewTheming/index.html b/Tests/Manual/ScrollviewTheming/index.html
index 8ca6ef9ac..ac42c98a7 100644
--- a/Tests/Manual/ScrollviewTheming/index.html
+++ b/Tests/Manual/ScrollviewTheming/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- ScrollviewTheming
+ __project.name__
 
- Created by You on September 9, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ScrollviewTheming</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ScrollviewTheming...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/SheetWindowOrderFrontIssue/index-debug.html b/Tests/Manual/SheetWindowOrderFrontIssue/index-debug.html
index dbdee830d..a36b1d3b9 100644
--- a/Tests/Manual/SheetWindowOrderFrontIssue/index-debug.html
+++ b/Tests/Manual/SheetWindowOrderFrontIssue/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- WindowSheetOrderTest
+ __project.name__
 
- Created by You on March 23, 2018.
- Copyright 2018, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>WindowSheetOrderTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -193,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/SheetWindowOrderFrontIssue/index.html b/Tests/Manual/SheetWindowOrderFrontIssue/index.html
index 2356dfcbf..ac42c98a7 100644
--- a/Tests/Manual/SheetWindowOrderFrontIssue/index.html
+++ b/Tests/Manual/SheetWindowOrderFrontIssue/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- WindowSheetOrderTest
+ __project.name__
 
- Created by You on March 23, 2018.
- Copyright 2018, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>WindowSheetOrderTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -155,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/SimpleBindings2/index-debug.html b/Tests/Manual/SimpleBindings2/index-debug.html
index 392b37a8f..a36b1d3b9 100644
--- a/Tests/Manual/SimpleBindings2/index-debug.html
+++ b/Tests/Manual/SimpleBindings2/index-debug.html
@@ -1,35 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
-//
-//  index-debug.html
-//
-//  Created by __Me__ on __Date__.
-//  Copyright 2008 __MyCompanyName__. All rights reserved.
-//
+ index-debug.html
+ __project.name__
+
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
+        <meta charset="utf-8">
 
-        <title>Hello World</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <script type = "text/javascript">
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-        
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
     <body>
-        <div style="position: absolute; left: 50%; top: 50%;">
-            <center>
-                <img src = "Frameworks/AppKit/Resources/CPProgressIndicator/CPProgressIndicatorSpinningStyleRegular.gif" style="left: -32px; position: relative; top: -32px;" />
-            </center>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
+                    </div>
+                </div>
+            </noscript>
         </div>
     </body>
 </html>
-
diff --git a/Tests/Manual/SimpleBindings2/index.html b/Tests/Manual/SimpleBindings2/index.html
index fbcf5a9bc..ac42c98a7 100644
--- a/Tests/Manual/SimpleBindings2/index.html
+++ b/Tests/Manual/SimpleBindings2/index.html
@@ -1,36 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
-//
-//  index.html
-//
-//  Created by __Me__ on __Date__.
-//  Copyright 2008 __MyCompanyName__. All rights reserved.
-//
+ index.html
+ __project.name__
+
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
+        <meta charset="utf-8">
 
-        <title>Hello World</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <script type = "text/javascript">
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
-        
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
 
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
     <body>
-        <div style="position: absolute; left: 50%; top: 50%;">
-            <center>
-                <img src = "Frameworks/AppKit/Resources/CPProgressIndicator/CPProgressIndicatorSpinningStyleRegular.gif" style="left: -32px; position: relative; top: -32px;" />
-            </center>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
+                    </div>
+                </div>
+            </noscript>
         </div>
     </body>
-    
 </html>
-
diff --git a/Tests/Manual/SmartFoldersDemo/index-debug.html b/Tests/Manual/SmartFoldersDemo/index-debug.html
index 36f2fa7f3..a36b1d3b9 100644
--- a/Tests/Manual/SmartFoldersDemo/index-debug.html
+++ b/Tests/Manual/SmartFoldersDemo/index-debug.html
@@ -1,31 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- SmartFoldersDemo
+ __project.name__
 
- Created by You on November 25, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>SmartFoldersDemo</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -34,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -53,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading SmartFoldersDemo...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/SmartFoldersDemo/index.html b/Tests/Manual/SmartFoldersDemo/index.html
index b6b0c146e..ac42c98a7 100644
--- a/Tests/Manual/SmartFoldersDemo/index.html
+++ b/Tests/Manual/SmartFoldersDemo/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- SmartFoldersDemo
+ __project.name__
 
- Created by You on November 25, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>SmartFoldersDemo</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading SmartFoldersDemo...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/BorderTableTest/index-debug.html b/Tests/Manual/TableTest/BorderTableTest/index-debug.html
index 4990e3c59..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/BorderTableTest/index-debug.html
+++ b/Tests/Manual/TableTest/BorderTableTest/index-debug.html
@@ -1,37 +1,86 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>NewTableTest</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <script type = "text/javascript">
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
-            objj_msgSend_decorate(objj_backtrace_decorator);
+            //objj_msgSend_decorate(objj_backtrace_decorator);
 
             // Uncomment to supress exceptions that take place inside a message
-            objj_msgSend_decorate(objj_supress_exceptions_decorator)
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
 
             // Uncomment to enable runtime type checking:
             //objj_msgSend_decorate(objj_typecheck_decorator);
@@ -45,50 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading TableCibTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/BorderTableTest/index.html b/Tests/Manual/TableTest/BorderTableTest/index.html
index 7b7f10465..ac42c98a7 100644
--- a/Tests/Manual/TableTest/BorderTableTest/index.html
+++ b/Tests/Manual/TableTest/BorderTableTest/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>NewTableTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading TableCibTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/ColumnResize/index-debug.html b/Tests/Manual/TableTest/ColumnResize/index-debug.html
index 15bdf77e5..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/ColumnResize/index-debug.html
+++ b/Tests/Manual/TableTest/ColumnResize/index-debug.html
@@ -1,39 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- ColumnResize
+ __project.name__
 
- Created by You on December 10, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ColumnResize</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -53,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ColumnResize...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/ColumnResize/index.html b/Tests/Manual/TableTest/ColumnResize/index.html
index ef6b76957..ac42c98a7 100644
--- a/Tests/Manual/TableTest/ColumnResize/index.html
+++ b/Tests/Manual/TableTest/ColumnResize/index.html
@@ -1,79 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- ColumnResize
+ __project.name__
 
- Created by You on December 10, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ColumnResize</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ColumnResize...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/ColumnSizing2/index-debug.html b/Tests/Manual/TableTest/ColumnSizing2/index-debug.html
index f50a6af98..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/ColumnSizing2/index-debug.html
+++ b/Tests/Manual/TableTest/ColumnSizing2/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- ColumnSizing2
+ __project.name__
 
- Created by Alexander Ljungberg on October 20, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ColumnSizing2</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ColumnSizing2...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/ColumnSizing2/index.html b/Tests/Manual/TableTest/ColumnSizing2/index.html
index d3b5a8c7c..ac42c98a7 100644
--- a/Tests/Manual/TableTest/ColumnSizing2/index.html
+++ b/Tests/Manual/TableTest/ColumnSizing2/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- ColumnSizing2
+ __project.name__
 
- Created by Alexander Ljungberg on October 20, 2011.
- Copyright 2011, WireLoad All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ColumnSizing2</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ColumnSizing2...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/DataView/index-debug.html b/Tests/Manual/TableTest/DataView/index-debug.html
index 88eb8f794..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/DataView/index-debug.html
+++ b/Tests/Manual/TableTest/DataView/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- DataView
+ __project.name__
 
- Created by You on February 12, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>DataView</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading DataView...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/DataView/index.html b/Tests/Manual/TableTest/DataView/index.html
index d9782713b..ac42c98a7 100644
--- a/Tests/Manual/TableTest/DataView/index.html
+++ b/Tests/Manual/TableTest/DataView/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- DataView
+ __project.name__
 
- Created by You on February 12, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>DataView</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading DataView...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/DelegateSelectionTest/index-debug.html b/Tests/Manual/TableTest/DelegateSelectionTest/index-debug.html
index e2397e9bb..a36b1d3b9 100755
--- a/Tests/Manual/TableTest/DelegateSelectionTest/index-debug.html
+++ b/Tests/Manual/TableTest/DelegateSelectionTest/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- DelegateSelectionTest
+ __project.name__
 
- Created by You on October 16, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>DelegateSelectionTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -102,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/TableTest/DelegateSelectionTest/index.html b/Tests/Manual/TableTest/DelegateSelectionTest/index.html
index 3524786f0..ac42c98a7 100755
--- a/Tests/Manual/TableTest/DelegateSelectionTest/index.html
+++ b/Tests/Manual/TableTest/DelegateSelectionTest/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- DelegateSelectionTest
+ __project.name__
 
- Created by You on October 16, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>DelegateSelectionTest</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -72,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/TableTest/DragAndDrop/index-debug.html b/Tests/Manual/TableTest/DragAndDrop/index-debug.html
index e1153eaf3..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/DragAndDrop/index-debug.html
+++ b/Tests/Manual/TableTest/DragAndDrop/index-debug.html
@@ -1,39 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- DragAndDrop
+ __project.name__
 
- Created by You on December 10, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>DragAndDrop</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -53,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading DragAndDrop...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/DragAndDrop/index.html b/Tests/Manual/TableTest/DragAndDrop/index.html
index 5092ed3a8..ac42c98a7 100644
--- a/Tests/Manual/TableTest/DragAndDrop/index.html
+++ b/Tests/Manual/TableTest/DragAndDrop/index.html
@@ -1,79 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- DragAndDrop
+ __project.name__
 
- Created by You on December 10, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>DragAndDrop</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading DragAndDrop...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/DrawRowTest/index-debug.html b/Tests/Manual/TableTest/DrawRowTest/index-debug.html
index 98e79f082..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/DrawRowTest/index-debug.html
+++ b/Tests/Manual/TableTest/DrawRowTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- DrawRowTest
+ __project.name__
 
- Created by You on August 11, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>DrawRowTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading DrawRowTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/DrawRowTest/index.html b/Tests/Manual/TableTest/DrawRowTest/index.html
index 5868b8c12..ac42c98a7 100644
--- a/Tests/Manual/TableTest/DrawRowTest/index.html
+++ b/Tests/Manual/TableTest/DrawRowTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- DrawRowTest
+ __project.name__
 
- Created by You on August 11, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>DrawRowTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading DrawRowTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/Editing/index-debug.html b/Tests/Manual/TableTest/Editing/index-debug.html
index 8126afa7d..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/Editing/index-debug.html
+++ b/Tests/Manual/TableTest/Editing/index-debug.html
@@ -1,39 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableTest/Editing
+ __project.name__
 
- Created by You on July 15, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>TableTest/Editing</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -53,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TableTest/Editing...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/Editing/index.html b/Tests/Manual/TableTest/Editing/index.html
index c817245d5..ac42c98a7 100644
--- a/Tests/Manual/TableTest/Editing/index.html
+++ b/Tests/Manual/TableTest/Editing/index.html
@@ -1,79 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableTest/Editing
+ __project.name__
 
- Created by You on July 15, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
-        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>TableTest/Editing</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TableTest/Editing...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/EditingControls/index-debug.html b/Tests/Manual/TableTest/EditingControls/index-debug.html
index e6542d36a..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/EditingControls/index-debug.html
+++ b/Tests/Manual/TableTest/EditingControls/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- issue1593
+ __project.name__
 
- Created by You on July 9, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>issue1593</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading issue1593...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/EditingControls/index.html b/Tests/Manual/TableTest/EditingControls/index.html
index 5fa431cf1..ac42c98a7 100644
--- a/Tests/Manual/TableTest/EditingControls/index.html
+++ b/Tests/Manual/TableTest/EditingControls/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- issue1593
+ __project.name__
 
- Created by You on July 9, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>issue1593</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading issue1593...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/GroupRowTest/index-debug.html b/Tests/Manual/TableTest/GroupRowTest/index-debug.html
index 69db152b8..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/GroupRowTest/index-debug.html
+++ b/Tests/Manual/TableTest/GroupRowTest/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- GroupRowTest
+ __project.name__
 
- Created by You on August 27, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>GroupRowTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading GroupRowTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/GroupRowTest/index.html b/Tests/Manual/TableTest/GroupRowTest/index.html
index 80a9ca6ba..ac42c98a7 100644
--- a/Tests/Manual/TableTest/GroupRowTest/index.html
+++ b/Tests/Manual/TableTest/GroupRowTest/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- GroupRowTest
+ __project.name__
 
- Created by You on August 27, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>GroupRowTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading GroupRowTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/HeaderCornerView/index-debug.html b/Tests/Manual/TableTest/HeaderCornerView/index-debug.html
index 0c1dbd8d6..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/HeaderCornerView/index-debug.html
+++ b/Tests/Manual/TableTest/HeaderCornerView/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- Header-CornerView
+ __project.name__
 
- Created by Alexander Ljungberg on March 18, 2012.
- Copyright 2012, SlevenBits Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>Header-CornerView</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading Header-CornerView...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/HeaderCornerView/index.html b/Tests/Manual/TableTest/HeaderCornerView/index.html
index 25e8abb1d..ac42c98a7 100644
--- a/Tests/Manual/TableTest/HeaderCornerView/index.html
+++ b/Tests/Manual/TableTest/HeaderCornerView/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- Header-CornerView
+ __project.name__
 
- Created by Alexander Ljungberg on March 18, 2012.
- Copyright 2012, SlevenBits Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>Header-CornerView</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading Header-CornerView...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/OldTest/index-debug.html b/Tests/Manual/TableTest/OldTest/index-debug.html
index 307093898..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/OldTest/index-debug.html
+++ b/Tests/Manual/TableTest/OldTest/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableTest
+ __project.name__
 
- Created by You on June 7, 2009.
- Copyright 2009, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>TableTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading TableTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/OldTest/index.html b/Tests/Manual/TableTest/OldTest/index.html
index 80699cfe8..ac42c98a7 100644
--- a/Tests/Manual/TableTest/OldTest/index.html
+++ b/Tests/Manual/TableTest/OldTest/index.html
@@ -1,71 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableTest
+ __project.name__
 
- Created by You on June 7, 2009.
- Copyright 2009, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>TableTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type = "text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TableTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/TableBindings/index-debug.html b/Tests/Manual/TableTest/TableBindings/index-debug.html
index 9a29810d5..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/TableBindings/index-debug.html
+++ b/Tests/Manual/TableTest/TableBindings/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableBindings
+ __project.name__
 
- Created by You on January 16, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>TableBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TableBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/TableBindings/index.html b/Tests/Manual/TableTest/TableBindings/index.html
index e756f8673..ac42c98a7 100644
--- a/Tests/Manual/TableTest/TableBindings/index.html
+++ b/Tests/Manual/TableTest/TableBindings/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableBindings
+ __project.name__
 
- Created by You on January 16, 2011.
- Copyright 2011, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>TableBindings</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TableBindings...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/TableCibTest/index-debug.html b/Tests/Manual/TableTest/TableCibTest/index-debug.html
index 723ff837a..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/TableCibTest/index-debug.html
+++ b/Tests/Manual/TableTest/TableCibTest/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>TableCibTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading TableCibTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/TableCibTest/index.html b/Tests/Manual/TableTest/TableCibTest/index.html
index b22be0c25..ac42c98a7 100644
--- a/Tests/Manual/TableTest/TableCibTest/index.html
+++ b/Tests/Manual/TableTest/TableCibTest/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>TableCibTest</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading TableCibTest...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/TestTableColumn/index-debug.html b/Tests/Manual/TableTest/TestTableColumn/index-debug.html
index 052461639..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/TestTableColumn/index-debug.html
+++ b/Tests/Manual/TableTest/TestTableColumn/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- TestTableColumn
+ __project.name__
 
- Created by You on April 16, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>TestTableColumn</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,9 +74,10 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
-            objj_msgSend_decorate(objj_backtrace_decorator);
+            //objj_msgSend_decorate(objj_backtrace_decorator);
 
             // Uncomment to supress exceptions that take place inside a message
             //objj_msgSend_decorate(objj_supress_exceptions_decorator)
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TestTableColumn...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/TestTableColumn/index.html b/Tests/Manual/TableTest/TestTableColumn/index.html
index 079d93ccf..ac42c98a7 100644
--- a/Tests/Manual/TableTest/TestTableColumn/index.html
+++ b/Tests/Manual/TableTest/TestTableColumn/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- TestTableColumn
+ __project.name__
 
- Created by You on April 16, 2013.
- Copyright 2013, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,58 +25,142 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>TestTableColumn</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading TestTableColumn...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/VariableRows/index-debug.html b/Tests/Manual/TableTest/VariableRows/index-debug.html
index 784d30766..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/VariableRows/index-debug.html
+++ b/Tests/Manual/TableTest/VariableRows/index-debug.html
@@ -1,38 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- VariableRows
+ __project.name__
 
- Created by You on November 17, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>VariableRows</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading VariableRows...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/VariableRows/index.html b/Tests/Manual/TableTest/VariableRows/index.html
index cb39c05f3..ac42c98a7 100644
--- a/Tests/Manual/TableTest/VariableRows/index.html
+++ b/Tests/Manual/TableTest/VariableRows/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- VariableRows
+ __project.name__
 
- Created by You on November 17, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>VariableRows</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading VariableRows...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/ViewBased/index-debug.html b/Tests/Manual/TableTest/ViewBased/index-debug.html
index 548147b89..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/ViewBased/index-debug.html
+++ b/Tests/Manual/TableTest/ViewBased/index-debug.html
@@ -1,42 +1,84 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPTableViewViewBased
+ __project.name__
 
- Created by You on August 11, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTableViewViewBased</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
-        
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
-        
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
-            
+
             // Uncomment to supress exceptions that take place inside a message
             //objj_msgSend_decorate(objj_supress_exceptions_decorator)
 
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
-        
+
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTableViewViewBased...</p></div>");
-                </script>
-        
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/ViewBased/index.html b/Tests/Manual/TableTest/ViewBased/index.html
index bcb4c1cf8..ac42c98a7 100644
--- a/Tests/Manual/TableTest/ViewBased/index.html
+++ b/Tests/Manual/TableTest/ViewBased/index.html
@@ -1,78 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTableViewViewBased
+ __project.name__
 
- Created by You on August 11, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTableViewViewBased</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
-        
+
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTableViewViewBased...</p></div>");
-                </script>
-        
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/TableTest/ViewBasedCib/index-debug.html b/Tests/Manual/TableTest/ViewBasedCib/index-debug.html
index fcf70860d..a36b1d3b9 100644
--- a/Tests/Manual/TableTest/ViewBasedCib/index-debug.html
+++ b/Tests/Manual/TableTest/ViewBasedCib/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- CPTableViewLionCibTest
+ __project.name__
 
- Created by You on March 8, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTableViewLionCibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,9 +74,10 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
-            objj_msgSend_decorate(objj_backtrace_decorator);
+            //objj_msgSend_decorate(objj_backtrace_decorator);
 
             // Uncomment to supress exceptions that take place inside a message
             //objj_msgSend_decorate(objj_supress_exceptions_decorator)
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTableViewLionCibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/TableTest/ViewBasedCib/index.html b/Tests/Manual/TableTest/ViewBasedCib/index.html
index f9c67fec8..ac42c98a7 100644
--- a/Tests/Manual/TableTest/ViewBasedCib/index.html
+++ b/Tests/Manual/TableTest/ViewBasedCib/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- CPTableViewLionCibTest
+ __project.name__
 
- Created by You on March 8, 2012.
- Copyright 2012, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>CPTableViewLionCibTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading CPTableViewLionCibTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ThemeBrowser/index-debug.html b/Tests/Manual/ThemeBrowser/index-debug.html
index e2760f77a..a36b1d3b9 100644
--- a/Tests/Manual/ThemeBrowser/index-debug.html
+++ b/Tests/Manual/ThemeBrowser/index-debug.html
@@ -1,78 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>Theme Browser</title>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <script type = "text/javascript">
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
-		</script>
 
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading Theme Browser...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ThemeBrowser/index.html b/Tests/Manual/ThemeBrowser/index.html
index 076934a98..ac42c98a7 100644
--- a/Tests/Manual/ThemeBrowser/index.html
+++ b/Tests/Manual/ThemeBrowser/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- TableCibTest
+ __project.name__
 
- Created by Francisco Tolmasky on July 5, 2009.
- Copyright 2009, 280 North, Inc. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>Theme Browser</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading Theme Browser...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/ThemeKitchenSink/index-debug.html b/Tests/Manual/ThemeKitchenSink/index-debug.html
index 393668d41..a36b1d3b9 100644
--- a/Tests/Manual/ThemeKitchenSink/index-debug.html
+++ b/Tests/Manual/ThemeKitchenSink/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- ThemeKitchenSink
+ __project.name__
 
- Created by Alexander Ljungberg on May 11, 2014.
- Copyright 2014, SlevenBits, Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>ThemeKitchenSink</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,6 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -62,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -102,7 +115,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -180,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/ThemeKitchenSink/index.html b/Tests/Manual/ThemeKitchenSink/index.html
index 6b4358625..ac42c98a7 100644
--- a/Tests/Manual/ThemeKitchenSink/index.html
+++ b/Tests/Manual/ThemeKitchenSink/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- ThemeKitchenSink
+ __project.name__
 
- Created by Alexander Ljungberg on May 11, 2014.
- Copyright 2014, SlevenBits, Ltd. All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>ThemeKitchenSink</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -72,7 +77,7 @@
                 width: 100%;
 
                 /* Put it at the bottom of the stack so it doesn't interfere with UI */
-                z-index: -1000;
+                z-index: 0;
             }
 
             #cappuccino-body .container {
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/TrackingArea/index-debug.html b/Tests/Manual/TrackingArea/index-debug.html
index ea5f6f364..a36b1d3b9 100644
--- a/Tests/Manual/TrackingArea/index-debug.html
+++ b/Tests/Manual/TrackingArea/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- TrackingArea
+ __project.name__
 
- Created by You on November 2, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,7 +25,7 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>TrackingArea</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
@@ -33,8 +33,18 @@
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
-            // Uncomment below to generate debug symbols, type signatures and inline objj_msgSend functions
-            // OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "InlineMsgSend"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -64,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -182,7 +193,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/TrackingArea/index.html b/Tests/Manual/TrackingArea/index.html
index cc1a78e03..ac42c98a7 100644
--- a/Tests/Manual/TrackingArea/index.html
+++ b/Tests/Manual/TrackingArea/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index.html
- TrackingArea
+ __project.name__
 
- Created by You on November 2, 2015.
- Copyright 2015, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,13 +25,18 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>TrackingArea</title>
+        <title>__project.name__</title>
 
         <!-- Custom javascript goes here -->
         <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
             var progressBar = null;
 
@@ -150,7 +155,7 @@
                 <div class="container">
                     <div class="content">
                         <div id="noscript">
-                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this site.</p>
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
                             <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
diff --git a/Tests/Manual/UndoRedoWithMenuUpdate/index-debug.html b/Tests/Manual/UndoRedoWithMenuUpdate/index-debug.html
index b53ab38b7..a36b1d3b9 100644
--- a/Tests/Manual/UndoRedoWithMenuUpdate/index-debug.html
+++ b/Tests/Manual/UndoRedoWithMenuUpdate/index-debug.html
@@ -1,69 +1,204 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- iApplication
+ __project.name__
 
- Created by C. Blair Duncan on May 20, 2010.
- Copyright 2010, BBDO All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>iApplication</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
-        </script>
-
-        <script src = "Frameworks/Debug/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading iApplication...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/UndoRedoWithMenuUpdate/index.html b/Tests/Manual/UndoRedoWithMenuUpdate/index.html
index 79663632a..ac42c98a7 100644
--- a/Tests/Manual/UndoRedoWithMenuUpdate/index.html
+++ b/Tests/Manual/UndoRedoWithMenuUpdate/index.html
@@ -1,68 +1,166 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- iApplication
+ __project.name__
 
- Created by C. Blair Duncan on May 20, 2010.
- Copyright 2010, BBDO All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
+        <meta charset="utf-8">
 
-        <title>iApplication</title>
-
-        <script type = "text/javascript">
-            OBJJ_MAIN_FILE = "main.j";
-        </script>
-
-        <script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
-
-        <style type = "text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-        </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <![endif]-->
 
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
+
+        <script type="text/javascript">
+            OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
+        </script>
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
+        </style>
     </head>
 
-    <body style="">
-        <div id="loadingcontainer" style=" background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <script type = "text/javascript">
-                document.write("<div id='container'><p id='content'>" +
-                               "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                               "Loading iApplication...</p></div>");
-            </script>
-
-            <noscript>
-                <div id="container">
-                    <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                        <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                        <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                        <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                        <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                            <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                            <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                            <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                            <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                            <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                        </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
                     </div>
                 </div>
             </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/UserlandNSTest/index-debug.html b/Tests/Manual/UserlandNSTest/index-debug.html
index 64a07e512..a36b1d3b9 100644
--- a/Tests/Manual/UserlandNSTest/index-debug.html
+++ b/Tests/Manual/UserlandNSTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- UserlandNSTest
+ __project.name__
 
- Created by aparajita on April 11, 2012.
- Copyright 2012, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>UserlandNSTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -50,7 +92,7 @@
             //CPLogUnregister(CPLogDefault);
 
             // Uncomment to enable a specific logger:
-            CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
 
             // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
@@ -59,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading UserlandNSTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/UserlandNSTest/index.html b/Tests/Manual/UserlandNSTest/index.html
index 1f3b24fd9..ac42c98a7 100644
--- a/Tests/Manual/UserlandNSTest/index.html
+++ b/Tests/Manual/UserlandNSTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- UserlandNSTest
+ __project.name__
 
- Created by aparajita on April 11, 2012.
- Copyright 2012, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>UserlandNSTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading UserlandNSTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/layoutEphemeralSubviewTest/index-debug.html b/Tests/Manual/layoutEphemeralSubviewTest/index-debug.html
index 3780ef7d2..a36b1d3b9 100644
--- a/Tests/Manual/layoutEphemeralSubviewTest/index-debug.html
+++ b/Tests/Manual/layoutEphemeralSubviewTest/index-debug.html
@@ -1,37 +1,80 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- layoutEphemeralSubview Test
+ __project.name__
 
-Created by Aparajita Fishman on October 8, 2010.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>layoutEphemeralSubview Test</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <script type="text/javascript">
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -51,52 +94,111 @@ Created by Aparajita Fishman on October 8, 2010.
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading layoutEphemeralSubview Test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/layoutEphemeralSubviewTest/index.html b/Tests/Manual/layoutEphemeralSubviewTest/index.html
index 453aab498..ac42c98a7 100644
--- a/Tests/Manual/layoutEphemeralSubviewTest/index.html
+++ b/Tests/Manual/layoutEphemeralSubviewTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- layoutEphemeralSubview Test
+ __project.name__
 
- Created by Aparajita Fishman on October 8, 2010.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>layoutEphemeralSubview Test</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading layoutEphemeralSubview Test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
-
diff --git a/Tests/Manual/loadDynamicFrameworks/index-debug.html b/Tests/Manual/loadDynamicFrameworks/index-debug.html
index caf89e562..a36b1d3b9 100644
--- a/Tests/Manual/loadDynamicFrameworks/index-debug.html
+++ b/Tests/Manual/loadDynamicFrameworks/index-debug.html
@@ -2,10 +2,10 @@
 <html lang="en">
 <!--
  index-debug.html
- loadDynamicFrameworks
+ __project.name__
 
- Created by Blair Duncan on February 23, 2013.
- Copyright 2013, SGL Studio, BBDO Toronto All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
         <meta charset="utf-8">
@@ -25,11 +25,47 @@
         <link rel="apple-touch-icon" href="Resources/icon.png">
         <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>loadDynamicFrameworks</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
             OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -38,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -64,49 +101,104 @@
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading loadDynamicFrameworks...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/loadDynamicFrameworks/index.html b/Tests/Manual/loadDynamicFrameworks/index.html
index ae42e2b90..ac42c98a7 100644
--- a/Tests/Manual/loadDynamicFrameworks/index.html
+++ b/Tests/Manual/loadDynamicFrameworks/index.html
@@ -1,111 +1,165 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- MA
+ __project.name__
 
- Created by Blair Duncan on January 31, 2013.
- Copyright 2013, SGL Studio, BBDO Toronto All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-        <meta content="utf-8" http-equiv="encoding">
+        <meta charset="utf-8">
 
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
 
-        <title>DocumentLoaderTest</title>
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-        </script>
-        <script type="text/javascript">
-            var progressBarPill = null;
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
 
-            OBJJ_PROGRESS_CALLBACK = function(percent)
-            {
-                percent = 100 * percent;
-                if (!progressBarPill)
-                    progressBarPill = document.getElementById("progressBarPill");
+            var progressBar = null;
 
-                if (percent > 5)
-                    progressBarPill.style.width = percent + "%";
-            }
-        </script>
-        <script type="text/javascript">
-            var ShowStartButton = function()
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
             {
-                document.getElementById('container').innerHTML=("<div id='button'><BR><img onclick='StartMeUp()' src='Resources/StartButton.png'/><BR>Click to install</div>");
-            }
-            var StartMeUp = function()
-            {
-                var cpobj = document.createElement("script");
-                cpobj.type = "text/javascript";
-                cpobj.async = true;
-                cpobj.src = "Frameworks/Objective-J/Objective-J.js";
-                var s = document.getElementsByTagName('script')[0];
-                s.parentNode.insertBefore(cpobj, s);
-                document.getElementById('container').innerHTML=("<div id='container'>" +
-                                   "<div id='content'>" +
-                                       "<div id='textcontent'>Loading application...</div>" +
-                                       "<div id='progressBar'>" +
-                                           "<span id='progressBarPill'><span id='left'></span><span id='center'></span><span id='right'></span></span>" +
-                                       "</div>" +
-                                   "</div>" +
-                               "</div>");
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
             }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
-        <style type = "text/css">
-            body{margin:0; padding:0; background-color: rgb(211, 218, 223);}
-            #container {position: absolute; top:50%; left:50%;}
-            #button {width: 300px; margin-left: -150px; height: 300px; margin-top:-80px; text-align: center; font-family: sans-serif; font-size: 16px; color: #555555; text-shadow: 0px 1px 0px white;}
-            #content {width: 474px; margin-left: -254px; height: 135px; margin-top:-108px; background-image: url("Resources/LoginWindowBackground.png"); padding-top: 80px; padding-left: 35px; line-height: 30px; font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; color: black; text-shadow: 0px 1px 0px white;}
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
-            #progressBarPill { display: block; height: 16px; width: 5%; position: relative; }
-            #progressBar { display: block; width: 190px; height: 16px; background: url('Resources/ProgressBarBezel.png'); }
-            #left { display: block; position: absolute; width: 3px; height: 15px; background-image: url('Resources/CPProgressIndicator/CPProgressIndicatorBarBarRegular0.png'); }
-            #center { display: block; position: absolute; left:3px; right: 3px; height: 15px; background-image: url('Resources/CPProgressIndicator/CPProgressIndicatorBarBarRegular1.png'); }
-            #right { display: block; position: absolute; right: 0; width: 3px; height: 15px; background-image: url('Resources/CPProgressIndicator/CPProgressIndicatorBarBarRegular2.png'); }
-            #foot {position: absolute; top:75%;width: 300px; margin-left: -150px; height: 40px;  text-align: center; font-family: sans-serif; font-size: 12px; color: #555555; text-shadow: 0px 1px 0px white;}
+
+        <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <style type="text/css">
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="" onload="ShowStartButton()">
-        <div id="loadingcontainer" style=" overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-            <div id="container">
-            </div>
-            <noscript>
-            <div id="container">
-                <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                    <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                    <p style="font-size:120%; padding:10px;"><a href="http://cappuccino.org/noscript">Show me how to enable JavaScript</a></p>
-                    <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                    <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                        <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                        <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                        <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                        <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                        <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                    </ul>
+    <body>
+        <div id="cappuccino-body">
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
                 </div>
             </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
+                        </div>
+                    </div>
+                </div>
             </noscript>
         </div>
     </body>
diff --git a/Tests/Manual/performKeyEquivalentTest/index-debug.html b/Tests/Manual/performKeyEquivalentTest/index-debug.html
index a5cf3b8eb..a36b1d3b9 100644
--- a/Tests/Manual/performKeyEquivalentTest/index-debug.html
+++ b/Tests/Manual/performKeyEquivalentTest/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- performKeyEquivalentTest
+ __project.name__
 
- Created by aparajita on May 22, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>performKeyEquivalentTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading performKeyEquivalentTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/performKeyEquivalentTest/index.html b/Tests/Manual/performKeyEquivalentTest/index.html
index c3f1824be..ac42c98a7 100644
--- a/Tests/Manual/performKeyEquivalentTest/index.html
+++ b/Tests/Manual/performKeyEquivalentTest/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- performKeyEquivalentTest
+ __project.name__
 
- Created by aparajita on May 22, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>performKeyEquivalentTest</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading performKeyEquivalentTest...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/predicateWithFormat/index-debug.html b/Tests/Manual/predicateWithFormat/index-debug.html
index f4190a743..a36b1d3b9 100644
--- a/Tests/Manual/predicateWithFormat/index-debug.html
+++ b/Tests/Manual/predicateWithFormat/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- test
+ __project.name__
 
- Created by aparajita on May 25, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>test</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/predicateWithFormat/index.html b/Tests/Manual/predicateWithFormat/index.html
index 21379c635..ac42c98a7 100644
--- a/Tests/Manual/predicateWithFormat/index.html
+++ b/Tests/Manual/predicateWithFormat/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- test
+ __project.name__
 
- Created by aparajita on May 25, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>test</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading test...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/resignFirstResponder-CPControlTextDidEndEditing/index-debug.html b/Tests/Manual/resignFirstResponder-CPControlTextDidEndEditing/index-debug.html
index cddbb6cd0..a36b1d3b9 100644
--- a/Tests/Manual/resignFirstResponder-CPControlTextDidEndEditing/index-debug.html
+++ b/Tests/Manual/resignFirstResponder-CPControlTextDidEndEditing/index-debug.html
@@ -1,30 +1,71 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index-debug.html
- resignFirstResponder-CPControlTextDidEndEditing
+ __project.name__
 
- Created by aparajita on September 2, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>resignFirstResponder-CPControlTextDidEndEditing</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
@@ -33,6 +74,7 @@
             objj_msgSend_reset();
 
             // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
 
             // Uncomment to enable printing of backtraces on exceptions:
             //objj_msgSend_decorate(objj_backtrace_decorator);
@@ -52,52 +94,111 @@
             // Uncomment to enable a specific logger:
             //CPLogRegister(CPLogConsole);
             //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
         </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading resignFirstResponder-CPControlTextDidEndEditing...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/resignFirstResponder-CPControlTextDidEndEditing/index.html b/Tests/Manual/resignFirstResponder-CPControlTextDidEndEditing/index.html
index 589fced48..ac42c98a7 100644
--- a/Tests/Manual/resignFirstResponder-CPControlTextDidEndEditing/index.html
+++ b/Tests/Manual/resignFirstResponder-CPControlTextDidEndEditing/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- resignFirstResponder-CPControlTextDidEndEditing
+ __project.name__
 
- Created by aparajita on September 2, 2011.
- Copyright 2011, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>resignFirstResponder-CPControlTextDidEndEditing</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading resignFirstResponder-CPControlTextDidEndEditing...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
 </html>
diff --git a/Tests/Manual/sizeToFitFix/index-debug.html b/Tests/Manual/sizeToFitFix/index-debug.html
index d1c338d03..a36b1d3b9 100644
--- a/Tests/Manual/sizeToFitFix/index-debug.html
+++ b/Tests/Manual/sizeToFitFix/index-debug.html
@@ -1,78 +1,204 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
- index.html
- ButtonLayoutIssue
+ index-debug.html
+ __project.name__
 
- Created by You on October 19, 2010.
- Copyright 2010, Your Company All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>ButtonLayoutIssue</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
-            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks", "SomethingElse"];
+            OBJJ_INCLUDE_PATHS = ["Frameworks/Debug", "Frameworks"];
+            // The below will tell the compiler to generate debug symbols, type signatures and not inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            //
+            // Debug symbols will give each Objective-J method a Javascript function name. Without a name it will be very hard to find
+            // the methods in the debugger.
+            // Type Signatures will give type information to the Objective-J runtime for instance variables and methods.
+            // Inline objj_msgSend will give a speed increase but decorators will not work. Check below on debug options for
+            // more information on decorators.
+            //
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = ["IncludeDebugSymbols", "IncludeTypeSignatures", "SourceMap", "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
-        <script src="Frameworks/Debug/Objective-J/Objective-J.js" type="text/javascript" charset="UTF-8"></script>
+        <script type="text/javascript" src="Frameworks/Debug/Objective-J/Objective-J.js" charset="UTF-8"></script>
+
+        <script type="text/javascript">
+            objj_msgSend_reset();
+
+            // DEBUG OPTIONS:
+            // Decorators will only work when the code is compiled without the compiler option 'InlineMsgSend'. Check above.
+
+            // Uncomment to enable printing of backtraces on exceptions:
+            //objj_msgSend_decorate(objj_backtrace_decorator);
+
+            // Uncomment to supress exceptions that take place inside a message
+            //objj_msgSend_decorate(objj_supress_exceptions_decorator)
+
+            // Uncomment to enable runtime type checking:
+            //objj_msgSend_decorate(objj_typecheck_decorator);
+
+            // Uncomment (along with both above) to print backtraces on type check errors:
+            //objj_typecheck_prints_backtrace = true;
+
+            // Uncomment to disable the default logger (CPLogConsole if window.console exists, CPLogPopup otherwise):
+            //CPLogUnregister(CPLogDefault);
+
+            // Uncomment to enable a specific logger:
+            //CPLogRegister(CPLogConsole);
+            //CPLogRegister(CPLogPopup);
+
+            // Tag view DOM elements with a "data-cappuccino-view" attribute that contains
+            // the class name of the view that created them. Comment this or set to false to disable.
+            appkit_tag_dom_elements = true;
+        </script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading ButtonLayoutIssue...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/Manual/sizeToFitFix/index.html b/Tests/Manual/sizeToFitFix/index.html
index faa208422..ac42c98a7 100644
--- a/Tests/Manual/sizeToFitFix/index.html
+++ b/Tests/Manual/sizeToFitFix/index.html
@@ -1,77 +1,166 @@
-<!DOCTYPE html
-    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html>
+<html lang="en">
 <!--
  index.html
- sizeToFit
+ __project.name__
 
- Created by aparajita on November 6, 2010.
- Copyright 2010, Victory-Heart Productions All rights reserved.
+ Created by __user.name__ on __project.date__.
+ Copyright __project.year__, __organization.name__ All rights reserved.
 -->
     <head>
-        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1" />
+        <meta charset="utf-8">
 
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+        <!--[if lte IE 8]>
+        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, chrome=1">
+        <![endif]-->
+        <!--[if gte IE 9]>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
+        <![endif]-->
 
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
-        <link rel="apple-touch-icon" href="Resources/icon.png" />
-        <link rel="apple-touch-startup-image" href="Resources/default.png" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-        <title>sizeToFit</title>
+        <link rel="apple-touch-icon" href="Resources/icon.png">
+        <link rel="apple-touch-startup-image" href="Resources/default.png">
+
+        <title>__project.name__</title>
+
+        <!-- Custom javascript goes here -->
+        <!-- End custom javascript -->
 
         <script type="text/javascript">
             OBJJ_MAIN_FILE = "main.j";
+            // The below will tell the compiler to not generate debug symbols but will generate type signatures and inline objj_msgSend functions.
+            // This will affect only Objective-J code that is compiled when loading the application. It will not affect precompiled
+            // code like the Cappuccino frameworks.
+            // Uncomment or comment on the line below to change the flags
+            OBJJ_COMPILER_FLAGS = [/*"IncludeDebugSymbols"*/, "IncludeTypeSignatures"/*, "SourceMap"*/, "InlineMsgSend"];
+
+            var progressBar = null;
+
+            OBJJ_PROGRESS_CALLBACK = function(percent, appSize, path)
+            {
+                percent = percent * 100;
+
+                if (!progressBar)
+                    progressBar = document.getElementById("progress-bar");
+
+                if (progressBar)
+                    progressBar.style.width = Math.min(percent, 100) + "%";
+            }
+
+            var loadingHTML =
+                    '<div id="loading">' +
+                    '    <div id="loading-text">Loading...</div>' +
+                    '    <div id="progress-indicator">' +
+                    '        <span id="progress-bar" style="width:0%"></span>' +
+                    '    </div>' +
+                    '</div>';
         </script>
 
         <script type="text/javascript" src="Frameworks/Objective-J/Objective-J.js" charset="UTF-8"></script>
 
         <style type="text/css">
-            body{margin:0; padding:0;}
-            #container {position: absolute; top:50%; left:50%;}
-            #content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
-            #content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
-            #loadgraphic {margin-right: 0.2em; margin-bottom:-2px;}
+            html, body, h1, p {
+                margin: 0;
+                padding: 0;
+            }
+
+            /* We need a body wrapper because Cappuccino is unhappy if we change the body element */
+            #cappuccino-body {
+                /* Position it absolutely so it will fill the height without content */
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                width: 100%;
+
+                /* Put it at the bottom of the stack so it doesn't interfere with UI */
+                z-index: 0;
+            }
+
+            #cappuccino-body .container {
+                display: table;
+                margin: 0 auto;
+                height: 100%;
+            }
+
+            #cappuccino-body .content {
+                display: table-cell;
+                height: 100%;
+                vertical-align: top;
+            }
+
+            #loading {
+                position: relative;
+                top: 35%;
+            }
+
+            #loading-text {
+                height: 1.5em;
+                color: #555;
+                font: normal bold 36px/36px Arial, sans-serif;
+            }
+
+            #progress-indicator {
+                padding: 0px;
+                height: 16px;
+                border: 5px solid #555;
+                border-radius: 18px;
+                background-color: white;
+            }
+
+            #progress-bar {
+                position: relative;
+                top: -1px;
+                left: -1px;
+                display: block;
+                height: 18px;
+
+                /* Compensate for moving the bar left 1px to overlap the indicator border */
+                border-right: 1px solid #555;
+                background-color: #555;
+            }
+
+            #noscript {
+                position: relative;
+                top: 35%;
+                padding: 1em 1.5em;
+                border: 5px solid #555;
+                border-radius: 16px;
+                background-color: white;
+                color: #555;
+                text-align: center;
+                font: bold 24px Arial, sans-serif;
+            }
+
+            #noscript a {
+                color: #98c0ff;
+                text-decoration: none;
+            }
         </style>
-
-        <!--[if lt IE 7]>
-        <STYLE type="text/css">
-            #container { position: relative; top: 50%; }
-            #content { position: relative;}
-        </STYLE>
-        <![endif]-->
-
     </head>
 
-    <body style="">
+    <body>
         <div id="cappuccino-body">
-            <div id="loadingcontainer" style="background-color: #eeeeee; overflow:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0;">
-                <script type="text/javascript">
-                    document.write("<div id='container'><p id='content'>" +
-                                   "<img id='loadgraphic' width='16' height='16' src='Resources/spinner.gif' /> " +
-                                   "Loading sizeToFit...</p></div>");
-                </script>
-
-                <noscript>
-                    <div id="container">
-                        <div style="width: 440px; padding: 10px 25px 20px 25px; font-family: sans-serif; background-color: #ffffff; position: relative; left: -245px; top: -120px; text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; color: #555555">
-                            <p style="line-height: 1.4em;">JavaScript is required for this site to work correctly but is either disabled or not supported by your browser.</p>
-                            <p style="font-size:120%; padding:10px;"><a href="http://cappuccino-project.org/noscript">Show me how to enable JavaScript</a></p>
-                            <p style="font-size:80%;">You may want to upgrade to a newer browser while you're at it:</p>
-                            <ul style="margin:0;padding:0; text-align: center; font-size:80%;" >
-                                <li style="display: inline;"><a href="http://www.apple.com/safari/download/">Safari</a></li>
-                                <li style="display: inline;"><a href="http://www.mozilla.com/en-US/firefox/">Firefox</a></li>
-                                <li style="display: inline;"><a href="http://www.google.com/chrome/">Chrome</a></li>
-                                <li style="display: inline;"><a href="http://www.opera.com/download/">Opera</a></li>
-                                <li style="display: inline;"><a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer</a></li>
-                            </ul>
+            <div class="container">
+                <div class="content">
+                    <script type="text/javascript">
+                        document.write(loadingHTML);
+                    </script>
+                </div>
+            </div>
+            <noscript style="position:absolute; top:0; left:0; width:100%; height:100%">
+                <div class="container">
+                    <div class="content">
+                        <div id="noscript">
+                            <p style="font-size:120%; margin-bottom:.75em">JavaScript is required for this application.</p>
+                            <p><a href="http://www.enable-javascript.com" target="_blank">Enable JavaScript</a></p>
                         </div>
                     </div>
-                </noscript>
-            </div>
+                </div>
+            </noscript>
         </div>
     </body>
-
-</html>
\ No newline at end of file
+</html>