From 0e1a276f19ea70009c5a649e9667861d7c346a7e Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 6 Jun 2012 00:25:27 -0700
Subject: first iteration of adding serializable to ninja plus other changes to
 run the latest montage

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../code-editor-view-options.js                    |  33 ++++-
 js/components/SliderBase.js                        |   9 +-
 js/components/combobox.reel/combobox.js            |   6 +-
 js/components/controllers/tree-controller.js       |  11 +-
 .../layout/bread-crumb.reel/bread-crumb.html       |   2 +-
 .../layout/bread-crumb.reel/bread-crumb.js         |   5 +
 .../layout/document-bar.reel/document-bar.html     |   2 -
 .../layout/document-bar.reel/document-bar.js       |   7 +-
 .../layout/documents-tab.reel/documents-tab.js     |   3 +-
 .../layout/tool-button.reel/tool-button.html       |   2 +-
 .../layout/tools-list.reel/tools-list.html         |   5 +-
 js/components/layout/tools-list.reel/tools-list.js | 106 +++++++++++---
 .../tools-properties.reel/tools-properties.html    |  54 +++----
 .../tools-properties.reel/tools-properties.js      |  82 ++++++++++-
 js/components/menu/menu-entry.reel/menu-entry.html |   6 +-
 js/components/menu/menu-entry.reel/menu-entry.js   |  49 ++++++-
 js/components/menu/menu-item.reel/menu-item.js     |  15 ++
 js/components/menu/menu.reel/menu.html             |  14 +-
 js/components/radio.reel/radio.js                  |  21 ++-
 js/components/slider.reel/slider.js                |  15 ++
 js/components/toolbar.reel/toolbar-button.js       |   4 +
 js/components/toolbar.reel/toolbar.js              |   5 +
 .../brush-properties.reel/brush-properties.js      |  40 ++++++
 .../fill-properties.reel/fill-properties.js        |  20 +++
 .../ink-bottle-properties.js                       |  65 +++++++++
 .../line-properties.reel/line-properties.js        |   5 +-
 .../object3d-properties.js                         |  11 +-
 .../oval-properties.reel/oval-properties.js        |  11 +-
 .../pen-properties.reel/pen-properties.html        |   4 -
 .../pen-properties.reel/pen-properties.js          |  15 ++
 .../rect-properties.reel/rect-properties.html      |   1 -
 .../rect-properties.reel/rect-properties.js        |  20 ++-
 .../selection-properties.js                        |  86 ++++++++++-
 .../shape-properties.reel/shape-properties.html    |   7 +-
 .../shape-properties.reel/shape-properties.js      |  71 +++++++++
 .../tag-properties.reel/tag-properties.js          |  26 ++--
 .../text-properties.reel/text-properties.html      |  18 +--
 .../text-properties.reel/text-properties.js        |  44 +++---
 .../zoom-properties.reel/zoom-properties.js        |  12 +-
 .../treeview/ninja-branch.reel/ninja-branch.html   |   2 +-
 .../treeview/ninja-branch.reel/ninja-branch.js     |  35 ++++-
 js/components/treeview/treeview.reel/treeview.html |   2 +-
 js/components/treeview/treeview.reel/treeview.js   |  43 ++++--
 js/mediators/keyboard-mediator.js                  |   5 +
 js/ninja.reel/ninja.html                           |   4 +-
 js/ninja.reel/ninja.js                             | 160 ++++++++++++++++++++-
 .../materials-library-panel.js                     |   3 +-
 js/panels/Panel.reel/Panel.html                    |   1 -
 js/panels/Panel.reel/Panel.js                      |   8 +-
 js/panels/PanelContainer.reel/PanelContainer.js    |  48 ++++++-
 js/panels/Resizer.js                               |  13 +-
 js/panels/Splitter.js                              |   9 +-
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 122 ++++++++++++++--
 .../components-panel.reel/components-panel.html    |   3 +-
 js/panels/css-panel/css-panel.reel/css-panel.js    |  10 ++
 js/panels/css-panel/css-style.reel/css-style.html  |   2 +-
 .../css-style-rule.reel/css-style-rule.html        |   2 +-
 .../rule-list-container.js                         |  10 ++
 js/panels/css-panel/rule-list.reel/rule-list.js    |   5 +
 .../style-declaration.reel/style-declaration.html  |   6 +-
 .../style-sheets-view.reel/style-sheets-view.js    |  13 +-
 .../styles-view-container.html                     |   1 -
 .../styles-view-container.js                       |  19 +++
 js/panels/css-panel/styles-view-delegate.js        |   6 +
 js/panels/presets/content.reel/content.js          |  15 +-
 js/panels/properties.reel/properties.html          |   9 +-
 js/panels/properties.reel/properties.js            |  19 ++-
 js/panels/properties.reel/section.reel/section.js  |   9 +-
 .../sections/position-size.reel/position-size.html |   9 +-
 .../sections/position-size.reel/position-size.js   |  41 ++++++
 .../sections/three-d-view.reel/three-d-view.html   |   2 -
 .../sections/three-d-view.reel/three-d-view.js     |  55 +++++++
 js/panels/resize-composer.js                       |   6 +-
 js/stage/layout.js                                 |  11 +-
 js/stage/stage-deps.js                             |   5 +
 js/stage/stage.reel/stage.js                       |  79 ++++++++--
 76 files changed, 1458 insertions(+), 246 deletions(-)

(limited to 'js')

diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
index dabce6e0..13c9a705 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
@@ -52,6 +52,11 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
         }
     },
 
+    autoCompleteLabel: {
+        value: null,
+        serializable: true
+    },
+
     _autocomplete: {
         value: false
     },
@@ -73,7 +78,33 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
     },
 
     codeCompleteCheck: {
-        value: null
+        value: null,
+        serializable: true
+    },
+
+    zoomHottext: {
+        value: null,
+        serializable: true
+    },
+
+    comment: {
+        value: null,
+        serializable: true
+    },
+
+    uncomment: {
+        value: null,
+        serializable: true
+    },
+
+    themeSelect: {
+        value: null,
+        serializable: true
+    },
+
+    shortKeys: {
+        value: null,
+        serializable: true
     },
 
     prepareForDraw: {
diff --git a/js/components/SliderBase.js b/js/components/SliderBase.js
index 8df868a2..a6c3ff6d 100755
--- a/js/components/SliderBase.js
+++ b/js/components/SliderBase.js
@@ -83,7 +83,8 @@ var SliderBase = exports.SliderBase = Montage.create(Component, {
                 }
                 this.needsDraw = true;
             }
-        }
+        },
+        serializable: true
     },
 
     // Internal flags to determine what the change/changing events will contain
@@ -153,7 +154,8 @@ var SliderBase = exports.SliderBase = Montage.create(Component, {
                 }
                 this.needsDraw = true;
             }
-        }
+        },
+        serializable: true
     },
 
     _maxValue: {
@@ -175,7 +177,8 @@ var SliderBase = exports.SliderBase = Montage.create(Component, {
                 }
                 this.needsDraw = true;
             }
-        }
+        },
+        serializable: true
     },
 
     _valueCoef: {
diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index bc433f52..29f49b7b 100755
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -20,7 +20,8 @@ exports.Combobox = Montage.create(Component, {
     },
 
     labelField: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     labelFunction: {
@@ -28,7 +29,8 @@ exports.Combobox = Montage.create(Component, {
     },
 
     dataField: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     dataFunction: {
diff --git a/js/components/controllers/tree-controller.js b/js/components/controllers/tree-controller.js
index cb95ca1d..bc3d0860 100644
--- a/js/components/controllers/tree-controller.js
+++ b/js/components/controllers/tree-controller.js
@@ -30,7 +30,8 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
         },
         set: function(value) {
             this._delegate = value;
-        }
+        },
+        serializable: true
     },
 
     rootKey : {
@@ -38,7 +39,13 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
     },
 
     branchKey : {
-        value: null
+        value: null,
+        serializable: true
+    },
+
+    labelKey: {
+        value: null,
+        serializable: true
     },
 
     _root : {
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index 0dabc781..68f3be2b 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -40,7 +40,7 @@
                 "buttonsListController": {
                     "prototype": "montage/ui/controller/array-controller",
                     "bindings": {
-                        "content": {"<<->": "@owner.containerElements"}
+                        "content": {"<->": "@owner.containerElements"}
                     }
                 },
 
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index ac131f2c..d525c813 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -9,6 +9,11 @@ var Montage = require("montage/core/core").Montage,
 
 exports.Breadcrumb = Montage.create(Component, {
 
+    breadcrumbBt: {
+        value: null,
+        serializable: true
+    },
+
     _currentDocument: {
         enumerable: false,
         value: null
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index a35b5590..889160ad 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -45,8 +45,6 @@
                 "prototype": "js/components/layout/document-bar.reel",
                 "properties": {
                     "element": {"#": "documentBar"},
-                    "designView": {"#": "design"},
-                    "codeView": {"#": "code"},
                     "zoomControl": {"@": "hottext1"}
                 }
             }
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 1cb0bd90..74ba11c2 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -61,7 +61,8 @@ exports.DocumentBar = Montage.create(Component, {
     },
 
     zoomControl: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     _type: {
@@ -148,8 +149,8 @@ exports.DocumentBar = Montage.create(Component, {
 
     prepareForDraw: {
         value: function() {
-            this.designView.addEventListener("click", this, false);
-            this.codeView.addEventListener("click", this, false);
+//            this.designView.addEventListener("click", this, false);
+//            this.codeView.addEventListener("click", this, false);
 
         }
     },
diff --git a/js/components/layout/documents-tab.reel/documents-tab.js b/js/components/layout/documents-tab.reel/documents-tab.js
index 41c98b30..b72056f8 100755
--- a/js/components/layout/documents-tab.reel/documents-tab.js
+++ b/js/components/layout/documents-tab.reel/documents-tab.js
@@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component;
 
 exports.DocumentsTab = Montage.create(Component, {
     contentController: {
-        value: null
+        value: null,
+        serializable: true
     }
 });
\ No newline at end of file
diff --git a/js/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html
index a329f646..936c47ef 100755
--- a/js/components/layout/tool-button.reel/tool-button.html
+++ b/js/components/layout/tool-button.reel/tool-button.html
@@ -18,7 +18,7 @@
                     "element": {"#": "toolBarButton"}
                 },
                 "bindings": {
-                    "selected": {"<<->": "@owner.data.selected"},
+                    "selected": {"<->": "@owner.data.selected"},
                     "subselected": {"<-": "@owner.data.subtools.selected"}
                 }
             }
diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html
index 4e5b85ee..3a9661f5 100755
--- a/js/components/layout/tools-list.reel/tools-list.html
+++ b/js/components/layout/tools-list.reel/tools-list.html
@@ -126,10 +126,7 @@
                     "EraserTool":             {"@": "EraserTool1"},
                     "RotateStageTool3D":      {"@": "RotateStageTool3D1"},
                     "PanTool":                {"@": "PanTool1"},
-                    "ZoomTool":               {"@": "ZoomTool1"},
-                    "components": [
-                        {"@": "repetition1"}
-                    ]
+                    "ZoomTool":               {"@": "ZoomTool1"}
                 }
             }
     	}
diff --git a/js/components/layout/tools-list.reel/tools-list.js b/js/components/layout/tools-list.reel/tools-list.js
index c46c065e..e36001a3 100755
--- a/js/components/layout/tools-list.reel/tools-list.js
+++ b/js/components/layout/tools-list.reel/tools-list.js
@@ -9,23 +9,95 @@ var Component = require("montage/ui/component").Component;
 
 exports.ToolsList = Montage.create(Component, {
 
-    SelectionTool:          { value: null },
-    Rotate3DTool:           { value: null },
-    Translate3DTool:        { value: null },
-    TagTool:                { value: null },
-    PenTool:                { value: null },
-    TextTool:               { value: null },
-    ShapeTool:              { value: null },
-    OvalTool:               { value: null },
-    RectTool:               { value: null },
-    LineTool:               { value: null },
-    BrushTool:              { value: null },
-    FillTool:               { value: null },
-    InkBottleTool:          { value: null },
-    EraserTool:             { value: null },
-    RotateStageTool3D:      { value: null },
-    PanTool:                { value: null },
-    ZoomTool:               { value: null },
+    toolsData: {
+        value: null,
+        serializable: true
+    },
+
+    SelectionTool: {
+        value: null,
+        serializable: true
+    },
+
+    Rotate3DTool: {
+        value: null,
+        serializable: true
+    },
+
+    Translate3DTool: {
+        value: null,
+        serializable: true
+    },
+
+    TagTool: {
+        value: null,
+        serializable: true
+    },
+
+    PenTool: {
+        value: null,
+        serializable: true
+    },
+
+    TextTool: {
+        value: null,
+        serializable: true
+    },
+
+    ShapeTool: {
+        value: null,
+        serializable: true
+    },
+
+    OvalTool: {
+        value: null,
+        serializable: true
+    },
+
+    RectTool: {
+        value: null,
+        serializable: true
+    },
+
+    LineTool: {
+        value: null,
+        serializable: true
+    },
+
+    BrushTool: {
+        value: null,
+        serializable: true
+    },
+
+    FillTool: {
+        value: null,
+        serializable: true
+    },
+
+    InkBottleTool: {
+        value: null,
+        serializable: true
+    },
+
+    EraserTool: {
+        value: null,
+        serializable: true
+    },
+
+    RotateStageTool3D: {
+        value: null,
+        serializable: true
+    },
+
+    PanTool: {
+        value: null,
+        serializable: true
+    },
+
+    ZoomTool: {
+        value: null,
+        serializable: true
+    },
 
     _currentDocument: {
         enumerable: false,
diff --git a/js/components/layout/tools-properties.reel/tools-properties.html b/js/components/layout/tools-properties.reel/tools-properties.html
index e7d1ac8b..6b766532 100755
--- a/js/components/layout/tools-properties.reel/tools-properties.html
+++ b/js/components/layout/tools-properties.reel/tools-properties.html
@@ -12,37 +12,37 @@
         <script type="text/montage-serialization">
         {
 
-            "selectionProperties1": {
+            "selectionProperties": {
                 "prototype": "js/components/tools-properties/selection-properties.reel",
                 "properties": {
                     "element": {"#": "selectionProperties"}
                 }
             },
-            "object3DProperties1": {
+            "object3DProperties": {
                 "prototype": "js/components/tools-properties/object3d-properties.reel[Object3DProperties]",
                 "properties": {
                     "element": {"#": "object3DProperties"}
                 }
             },
-            "tagProperties1": {
+            "tagProperties": {
                 "prototype": "js/components/tools-properties/tag-properties.reel",
                 "properties": {
                     "element": {"#": "tagProperties"}
                 }
             },
-            "penProperties1": {
+            "penProperties": {
                 "prototype": "js/components/tools-properties/pen-properties.reel",
                 "properties": {
                     "element": {"#": "penProperties"}
                 }
             },
-            "textProperties1": {
+            "textProperties": {
                 "prototype": "js/components/tools-properties/text-properties.reel",
                 "properties": {
                     "element": {"#": "textProperties"}
                 }
             },
-            "shapeProperties1": {
+            "shapeProperties": {
                 "prototype": "js/components/tools-properties/shape-properties.reel",
                 "properties": {
                     "element": {"#": "shapeProperties"}
@@ -60,43 +60,43 @@
                     }
                 }
             },
-            "brushProperties1": {
+            "brushProperties": {
                 "prototype": "js/components/tools-properties/brush-properties.reel",
                 "properties": {
                     "element": {"#": "brushProperties"}
                 }
             },
-            "fillProperties1": {
+            "fillProperties": {
                 "prototype": "js/components/tools-properties/fill-properties.reel",
                 "properties": {
                     "element": {"#": "fillProperties"}
                 }
             },
-            "inkbottleProperties1": {
+            "inkbottleProperties": {
                 "prototype": "js/components/tools-properties/ink-bottle-properties.reel",
                 "properties": {
                     "element": {"#": "inkbottleProperties"}
                 }
             },
-            "eraserProperties1": {
+            "eraserProperties": {
                 "prototype": "js/components/tools-properties/eraser-properties.reel",
                 "properties": {
                     "element": {"#": "eraserProperties"}
                 }
             },
-            "rotateStageProperties1": {
+            "rotateStageProperties": {
                 "prototype": "js/components/tools-properties/rotate-stage-properties.reel",
                 "properties": {
                     "element": {"#": "rotateStageProperties"}
                 }
             },
-            "panProperties1": {
+            "panProperties": {
                 "prototype": "js/components/tools-properties/pan-properties.reel",
                 "properties": {
                     "element": {"#": "panProperties"}
                 }
             },
-            "zoomProperties1": {
+            "zoomProperties": {
                 "prototype": "js/components/tools-properties/zoom-properties.reel",
                 "properties": {
                     "element": {"#": "zoomProperties"}
@@ -121,20 +121,20 @@
                 "prototype": "js/components/layout/tools-properties.reel",
                 "properties": {
                     "element": {"#": "toolsProperties"},
-                    "selectionProperties":          {"@": "selectionProperties1"},
-                    "rotate3DProperties":           {"@": "object3DProperties1"},
-                    "translate3DProperties":        {"@": "object3DProperties1"},
-                    "tagProperties":                {"@": "tagProperties1"},
-                    "penProperties":                {"@": "penProperties1"},
-                    "textProperties":               {"@": "textProperties1"},
-                    "shapeProperties":              {"@": "shapeProperties1"},
-                    "brushProperties":              {"@": "brushProperties1"},
-                    "fillProperties":               {"@": "fillProperties1"},
-                    "inkbottleProperties":          {"@": "inkbottleProperties1"},
-                    "eraserProperties":             {"@": "eraserProperties1"},
-                    "rotateStageProperties":        {"@": "rotateStageProperties1"},
-                    "panProperties":                {"@": "panProperties1"},
-                    "zoomProperties":               {"@": "zoomProperties1"}
+                    "selectionProperties":          {"@": "selectionProperties"},
+                    "rotate3DProperties":           {"@": "object3DProperties"},
+                    "translate3DProperties":        {"@": "object3DProperties"},
+                    "tagProperties":                {"@": "tagProperties"},
+                    "penProperties":                {"@": "penProperties"},
+                    "textProperties":               {"@": "textProperties"},
+                    "shapeProperties":              {"@": "shapeProperties"},
+                    "brushProperties":              {"@": "brushProperties"},
+                    "fillProperties":               {"@": "fillProperties"},
+                    "inkbottleProperties":          {"@": "inkbottleProperties"},
+                    "eraserProperties":             {"@": "eraserProperties"},
+                    "rotateStageProperties":        {"@": "rotateStageProperties"},
+                    "panProperties":                {"@": "panProperties"},
+                    "zoomProperties":               {"@": "zoomProperties"}
                 },
                 "bindings": {
                     "currentSelectedTool": {
diff --git a/js/components/layout/tools-properties.reel/tools-properties.js b/js/components/layout/tools-properties.reel/tools-properties.js
index 6ea4ad85..c5a53abc 100755
--- a/js/components/layout/tools-properties.reel/tools-properties.js
+++ b/js/components/layout/tools-properties.reel/tools-properties.js
@@ -9,6 +9,85 @@ var Component = require("montage/ui/component").Component;
 
 exports.ToolsProperties = Montage.create(Component, {
 
+    selectionProperties: {
+        value: null,
+        serializable: true
+    },
+
+    object3DProperties: {
+        value: null,
+        serializable: true
+    },
+    tagProperties: {
+        value: null,
+        serializable: true
+    },
+
+    penProperties: {
+        value: null,
+        serializable: true
+    },
+
+    textProperties: {
+        value: null,
+        serializable: true
+    },
+
+    shapeProperties: {
+        value: null,
+        serializable: true
+    },
+
+    brushProperties: {
+        value: null,
+        serializable: true
+    },
+
+    fillProperties: {
+        value: null,
+        serializable: true
+    },
+
+    inkbottleProperties: {
+        value: null,
+        serializable: true
+    },
+
+    eraserProperties: {
+        value: null,
+        serializable: true
+    },
+
+    rotateStageProperties: {
+        value: null,
+        serializable: true
+    },
+
+    panProperties: {
+        value: null,
+        serializable: true
+    },
+
+    zoomProperties: {
+        value: null,
+        serializable: true
+    },
+
+    rotate3DProperties: {
+        value: null,
+        serializable: true
+    },
+
+    translate3DProperties: {
+        value: null,
+        serializable: true
+    },
+
+    toolsData: {
+        value: null,
+        serializable: true
+    },
+
     _currentDocument: {
         enumerable: false,
         value: null
@@ -28,7 +107,8 @@ exports.ToolsProperties = Montage.create(Component, {
 
             this.disabled = !this._currentDocument;
 
-        }
+        },
+        serializable: true
     },
 
     _disabled: {
diff --git a/js/components/menu/menu-entry.reel/menu-entry.html b/js/components/menu/menu-entry.reel/menu-entry.html
index f64de3cb..7310545f 100755
--- a/js/components/menu/menu-entry.reel/menu-entry.html
+++ b/js/components/menu/menu-entry.reel/menu-entry.html
@@ -24,8 +24,10 @@
             "repetition": {
                 "prototype": "montage/ui/repetition.reel",
                 "properties": {
-                    "element": { "#": "subEntries" },
-                    "contentController": {"@": "entriesController"}
+                    "element": { "#": "subEntries" }
+                },
+                "bindings": {
+                    "objects": {"<-": "@owner.data.entries"}
                 }
             },
 
diff --git a/js/components/menu/menu-entry.reel/menu-entry.js b/js/components/menu/menu-entry.reel/menu-entry.js
index 57e6ec87..b9c546ed 100755
--- a/js/components/menu/menu-entry.reel/menu-entry.js
+++ b/js/components/menu/menu-entry.reel/menu-entry.js
@@ -8,18 +8,54 @@ var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 
 exports.MenuEntry = Montage.create(Component, {
-    topHeader: { value: null },
-    topHeaderText: { value: null },
+    topHeader: {
+        value: null,
+        serializable: true
+    },
+
+    topHeaderText: {
+        value: null,
+        serializable: true
+    },
+
+    subEntries: {
+        value: null,
+        serializable: true
+    },
 
     // Reference to the parent Menu component
     _menu: {
         value: null
     },
 
-    data: {
+    menu: {
+        get: function() {
+            return this._menu;
+        },
+        set: function(value) {
+            if(value !== this._menu) {
+                this._menu = value;
+            }
+        },
+        serializable: true
+    },
+
+    _data: {
         value: null
     },
 
+    data: {
+        get: function() {
+            return this._data;
+        },
+        set: function(value) {
+            if(this._data !== value) {
+                this._data = value;
+            }
+        },
+        serializable: true
+    },
+
     select: {
         value: function() {
             this.element.classList.add("selected");
@@ -49,13 +85,16 @@ exports.MenuEntry = Montage.create(Component, {
 
     handleClick: {
         value: function(event) {
-            this._menu.toggleActivation(this);
+            // TODO: Hack! Rework this!
+            this.parentComponent.ownerComponent.toggleActivation(this);
+//            this._menu.toggleActivation(this);
         }
     },
 
     handleMouseover: {
         value: function(event) {
-            this._menu.activeEntry = this;
+            this.parentComponent.ownerComponent.activeEntry = this;
+//            this._menu.activeEntry = this;
         }
     },
 
diff --git a/js/components/menu/menu-item.reel/menu-item.js b/js/components/menu/menu-item.reel/menu-item.js
index c00c4412..f9a625a3 100755
--- a/js/components/menu/menu-item.reel/menu-item.js
+++ b/js/components/menu/menu-item.reel/menu-item.js
@@ -9,6 +9,21 @@ var Component = require("montage/ui/component").Component;
 
 exports.MenuItem = Montage.create(Component, {
 
+    itemBackground: {
+        value: null,
+        serializable: true
+    },
+
+    itemText: {
+        value: null,
+        serializable: true
+    },
+
+    subMenu: {
+        value: null,
+        serializable: true
+    },
+
     data: {
         value: null
     },
diff --git a/js/components/menu/menu.reel/menu.html b/js/components/menu/menu.reel/menu.html
index f15cf119..f18c1a0f 100755
--- a/js/components/menu/menu.reel/menu.html
+++ b/js/components/menu/menu.reel/menu.html
@@ -31,9 +31,10 @@
             "repetition": {
                 "prototype": "montage/ui/repetition.reel",
                 "properties": {
-                    "element": { "#": "topMenu" },
-                    "contentController": {"@": "menuController"},
-                    "menuComponent": {"@": "owner"}
+                    "element": { "#": "topMenu" }
+                },
+                "bindings": {
+                    "objects": {"<-": "@menudata.topLevelMenu"}
                 }
             },
 
@@ -43,17 +44,14 @@
                     "element": { "#": "menuItem" }
                 },
                 "bindings": {
-                    "data": {"<-": "@repetition.objectAtCurrentIteration"},
-                    "_menu": {"<-": "@repetition.menuComponent"}
+                    "data": {"<-": "@repetition.objectAtCurrentIteration"}
                 }
             },
             
             "owner": {
                 "prototype": "js/components/menu/menu.reel",
                 "properties": {
-                    "element":  {"#": "mainMenuBar"},
-                    "controller": {"@": "menuController"},
-                    "rep": {"@": "repetition"}
+                    "element":  {"#": "mainMenuBar"}
                 }
             }
         }
diff --git a/js/components/radio.reel/radio.js b/js/components/radio.reel/radio.js
index cec4f52e..33fd7e53 100755
--- a/js/components/radio.reel/radio.js
+++ b/js/components/radio.reel/radio.js
@@ -13,11 +13,13 @@ exports.RadioGroup = Montage.create(Component, {
     },
 
     _selectedItem: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     selectedIndex: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     selectedItem: {
@@ -55,7 +57,8 @@ exports.RadioGroup = Montage.create(Component, {
     },
 
     name: {
-        value: "RadioGroup0"
+        value: "RadioGroup0",
+        serializable: true
     },
 
     addRadio:
@@ -101,15 +104,18 @@ exports.Radio = Montage.create(Component, {
     },
 
     label: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     labelField: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     radioField: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     _checked: {
@@ -118,7 +124,8 @@ exports.Radio = Montage.create(Component, {
     },
 
     group: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     checked: {
diff --git a/js/components/slider.reel/slider.js b/js/components/slider.reel/slider.js
index fced8aad..b2af1f9a 100755
--- a/js/components/slider.reel/slider.js
+++ b/js/components/slider.reel/slider.js
@@ -9,6 +9,21 @@ var SliderBase = require("js/components/sliderbase").SliderBase;
 
 var Slider = exports.Slider = Montage.create(SliderBase, {
 
+    parentDiv: {
+        value: null,
+        serializable: true
+    },
+
+    track: {
+        value: null,
+        serializable: true
+    },
+
+    knob: {
+        value: null,
+        serializable: true
+    },
+
     // "horizontal" or "vertical"
     _direction: {
         enumerable: true,
diff --git a/js/components/toolbar.reel/toolbar-button.js b/js/components/toolbar.reel/toolbar-button.js
index 9ada9b29..74129c2a 100644
--- a/js/components/toolbar.reel/toolbar-button.js
+++ b/js/components/toolbar.reel/toolbar-button.js
@@ -12,6 +12,10 @@ var ToolbarButton = exports.ToolbarButton = Montage.create(Button, {
     hasTemplate : {
         value: false
     },
+    label: {
+        value: null,
+        serializable: true
+    },
     _sourceObject : {
         value: null
     },
diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js
index 2ccdb2c5..43f45f2b 100644
--- a/js/components/toolbar.reel/toolbar.js
+++ b/js/components/toolbar.reel/toolbar.js
@@ -8,6 +8,11 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.Toolbar = Montage.create(Component, {
+    repetition: {
+        value: null,
+        serializable: true
+    },
+    
     _needsButtonProperties : {
         value: null
     },
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js
index 7a0d21f1..1af128af 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -11,6 +11,46 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
 var BrushProperties = exports.BrushProperties = Montage.create(ToolProperties, {
     addedColorChips: { value: false },
 
+    _fillColorCtrl: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeSize: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeHardness: {
+        value: null,
+        serializable: true
+    },
+
+    _doSmoothing: {
+        value: null,
+        serializable: true
+    },
+
+    _smoothingAmount: {
+        value: null,
+        serializable: true
+    },
+
+    _useCalligraphic: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeAngle: {
+        value: null,
+        serializable: true
+    },
+
+    _angleLabel: {
+        value: null,
+        serializable: true
+    },
+
     _fill: {
         enumerable: false,
         value: { colorMode: 'rgb', color: { r: 0, g: 0, b: 0, a: 1, css: 'rgb(0,0,0)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [0, 0, 0, 1] }
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js
index ae136956..616badb0 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.js
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -10,6 +10,26 @@ var Montage = require("montage/core/core").Montage,
 
 var FillProperties = exports.FillProperties = Montage.create(ToolProperties, {
 
+    _fillColorCtrl: {
+        value: null,
+        serializable: true
+    },
+
+    _useWebGL: {
+        value: null,
+        serializable: true
+    },
+
+    _materialsContainer: {
+        value: null,
+        serializable: true
+    },
+
+    _fillMaterial: {
+        value: null,
+        serializable: true
+    },
+
     _use3D: { value: false },
     addedColorChips: { value: false },
 
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
index 945df857..8b4cc327 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
@@ -11,6 +11,71 @@ var Montage = require("montage/core/core").Montage,
 var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolProperties, {
     addedColorChips: { value: false },
 
+    _strokeColorCtrl: {
+        value: null,
+        serializable: true
+    },
+
+    useBorderWidth: {
+        value: null,
+        serializable: true
+    },
+
+    borderWidthLabel: {
+        value: null,
+        serializable: true
+    },
+
+    _borderWidth: {
+        value: null,
+        serializable: true
+    },
+
+    useBorderStyle: {
+        value: null,
+        serializable: true
+    },
+
+    borderStyleLabel: {
+        value: null,
+        serializable: true
+    },
+
+    _borderStyle: {
+        value: null,
+        serializable: true
+    },
+
+    useStrokeSize: {
+        value: null,
+        serializable: true
+    },
+
+    strokeSizeLabel: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeSize: {
+        value: null,
+        serializable: true
+    },
+
+    _useWebGL: {
+        value: null,
+        serializable: true
+    },
+
+    _materialsContainer: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeMaterial: {
+        value: null,
+        serializable: true
+    },
+
     _stroke: {
         enumerable: false,
         value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
diff --git a/js/components/tools-properties/line-properties.reel/line-properties.js b/js/components/tools-properties/line-properties.reel/line-properties.js
index ce8c0494..8c845432 100755
--- a/js/components/tools-properties/line-properties.reel/line-properties.js
+++ b/js/components/tools-properties/line-properties.reel/line-properties.js
@@ -9,7 +9,10 @@ var Montage = require("montage/core/core").Montage,
 
 exports.LineProperties = Montage.create(ToolProperties, {
 
-    base:       { value: null },
+    base: {
+        value: null,
+        serializable: true
+    },
     
     _subPrepare: {
         value: function() {
diff --git a/js/components/tools-properties/object3d-properties.reel/object3d-properties.js b/js/components/tools-properties/object3d-properties.reel/object3d-properties.js
index d7f0976c..33ef3394 100755
--- a/js/components/tools-properties/object3d-properties.reel/object3d-properties.js
+++ b/js/components/tools-properties/object3d-properties.reel/object3d-properties.js
@@ -10,8 +10,15 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 exports.Object3DProperties = Montage.create(ToolProperties, {
-    rotateLocally: { value: null, enumerable: false },
-    rotateGlobally: { value: null, enumerable: false },
+    rotateLocally: {
+        value: null,
+        serializable: true
+    },
+
+    rotateGlobally: {
+        value: null,
+        serializable: true
+    },
 
     _subPrepare: {
         value: function () {
diff --git a/js/components/tools-properties/oval-properties.reel/oval-properties.js b/js/components/tools-properties/oval-properties.reel/oval-properties.js
index 3edd9214..d371193f 100755
--- a/js/components/tools-properties/oval-properties.reel/oval-properties.js
+++ b/js/components/tools-properties/oval-properties.reel/oval-properties.js
@@ -8,8 +8,15 @@ var Montage = require("montage/core/core").Montage,
     ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 exports.OvalProperties = Montage.create(ToolProperties, {
-    base: { value: null },
-    innerRadius: { value: null },
+    base: {
+        value: null,
+        serializable: true
+    },
+
+    innerRadius: {
+        value: null,
+        serializable: true
+    },
     
     _subPrepare: {
         value: function() {
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html
index e720eb84..4ea6aac4 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -29,10 +29,6 @@
                 "properties": {
                     "element": {"#": "penProperties"},
 
-                    "_penToolRadio": {"#": "penTool"},
-                    "_penPlusRadio": {"#": "penPlus"},
-                    "_penMinusRadio": {"#": "penMinus"},
-
                     "_fillColorCtrl": {"#": "fillColorCtrl"},
                     "_strokeColorCtrl": {"#": "strokeColorCtrl"},
                     "_strokeSize": {"@": "strokeSizeHT"}
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.js b/js/components/tools-properties/pen-properties.reel/pen-properties.js
index cd205e07..2bb4d3e9 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.js
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.js
@@ -10,6 +10,21 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
 var PenProperties = exports.PenProperties = Montage.create(ToolProperties, {
     addedColorChips: { value: false },
 
+    _fillColorCtrl: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeColorCtrl: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeSize: {
+        value: null,
+        serializable: true
+    },
+
     _fill: {
         enumerable: false,
         value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.html b/js/components/tools-properties/rect-properties.reel/rect-properties.html
index a7bf6a7c..41606a45 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.html
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.html
@@ -80,7 +80,6 @@
                     "element": {"#": "lockButton"},
                     "pressed": true,
                     "pressedClass": "lockUp",
-                    "preventFocus": true,
                     "identifier": "lockButton"
                 },
                 "listeners": [
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js
index 2f8ea4dd..94c674a2 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.js
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js
@@ -8,12 +8,20 @@ var Montage = require("montage/core/core").Montage,
     ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 exports.RectProperties = Montage.create(ToolProperties, {
-    base:       { value: null },
-    lockButton: { value: null, enumerable: false},
-    TLRadiusControl: { value: null, enumerable: false },
-    TRRadiusControl: { value: null, enumerable: false },
-    BLRadiusControl: { value: null, enumerable: false },
-    BRRadiusControl: { value: null, enumerable: false },
+    base: {
+        value: null,
+        serializable: true
+    },
+
+    lockButton: {
+        value: null,
+        serializable: true
+    },
+
+    TLRadiusControl: { value: null, serializable: true },
+    TRRadiusControl: { value: null, serializable: true },
+    BLRadiusControl: { value: null, serializable: true },
+    BRRadiusControl: { value: null, serializable: true },
 
     _unlocked: { value: false, enumerable: false},
 
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.js b/js/components/tools-properties/selection-properties.reel/selection-properties.js
index 43622960..c036c4a3 100755
--- a/js/components/tools-properties/selection-properties.reel/selection-properties.js
+++ b/js/components/tools-properties/selection-properties.reel/selection-properties.js
@@ -10,7 +10,91 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
 
 exports.SelectionProperties = Montage.create(ToolProperties, {
 
-    transform: { value: null },
+    transform: {
+        value: null,
+        serializable: true
+    },
+
+    topAlign: {
+        value: null,
+        serializable: true
+    },
+
+    middleAlign: {
+        value: null,
+        serializable: true
+    },
+
+    bottomAlign: {
+        value: null,
+        serializable: true
+    },
+
+    leftAlign: {
+        value: null,
+        serializable: true
+    },
+
+    centerAlign: {
+        value: null,
+        serializable: true
+    },
+
+    rightAlign: {
+        value: null,
+        serializable: true
+    },
+
+    distTop: {
+        value: null,
+        serializable: true
+    },
+
+    distMiddle: {
+        value: null,
+        serializable: true
+    },
+
+    distBottom: {
+        value: null,
+        serializable: true
+    },
+
+    distLeft: {
+        value: null,
+        serializable: true
+    },
+
+    distCenter: {
+        value: null,
+        serializable: true
+    },
+
+    distRight: {
+        value: null,
+        serializable: true
+    },
+
+    arrangeBringForward: {
+        value: null,
+        serializable: true
+    },
+
+    arrangeSendBackward: {
+        value: null,
+        serializable: true
+    },
+
+    arrangeBringToFront: {
+        value: null,
+        serializable: true
+    },
+
+    arrangeSendToBack: {
+        value: null,
+        serializable: true
+    },
+
     _controls: { value: false },
 
     _subPrepare: {
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 9b523a3f..ea246ea8 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -118,12 +118,7 @@
                     "rectProperties": {"@": "rectProperties1"},
                     "lineProperties": {"@": "lineProperties1"},
 
-                    "endDivider": {"#": "endDivider"},
-
-                    "components": [
-                        {"@": "repetition1"}
-                    ]
-
+                    "endDivider": {"#": "endDivider"}
                 }
 
             }
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js
index bd0cf8cf..5829634c 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.js
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js
@@ -10,6 +10,77 @@ var Montage = require("montage/core/core").Montage,
 
 var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, {
     toolsData: { value: null },
+
+    _strokeMaterial: {
+        value: null,
+        serializable: true
+    },
+
+    _fillIcon: {
+        value: null,
+        serializable: true
+    },
+
+    _fillMaterial: {
+        value: null,
+        serializable: true
+    },
+
+    _useWebGL: {
+        value: null,
+        serializable: true
+    },
+
+    _materialLabel: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeIcon: {
+        value: null,
+        serializable: true
+    },
+
+    _fillColorCtrlIcon: {
+        value: null,
+        serializable: true
+    },
+
+    _fillColorCtrl: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeColorCtrl: {
+        value: null,
+        serializable: true
+    },
+
+    _strokeSize: {
+        value: null,
+        serializable: true
+    },
+
+    ovalProperties: {
+        value: null,
+        serializable: true
+    },
+
+    rectProperties: {
+        value: null,
+        serializable: true
+    },
+
+    lineProperties: {
+        value: null,
+        serializable: true
+    },
+
+    endDivider: {
+        value: null,
+        serializable: true
+    },
+
     _use3D: { value: false },
     addedColorChips: { value: false },
 
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js
index 52c6f44c..d38419aa 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.js
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -9,16 +9,26 @@ var Component = require("montage/ui/component").Component;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
-    divElement:     { value: null, enumerable: false },
-    imageElement:   { value: null, enumerable: false },
-    videoElement:   { value: null, enumerable: false },
-    canvasElement:  { value: null, enumerable: false },
-    customElement:  { value: null, enumerable: false },
-    classField:     { value: null, enumerable: false },
-    customName:     { value: null, enumerable: false },
-    customLabel:    { value: null, enumerable: false },
+    divElement: {
+        value: null,
+        serializable: true
+    },
+
+    imageElement:   { value: null, serializable: true },
+    videoElement:   { value: null, serializable: true },
+    canvasElement:  { value: null, serializable: true },
+    customElement:  { value: null, serializable: true },
+    classField:     { value: null, serializable: true },
+    customName:     { value: null, serializable: true },
+    customLabel:    { value: null, serializable: true },
+
     addedColorChips: { value: false },
 
+    _fillColorCtrl: {
+        value: null,
+        serializable: true
+    },
+
     _fill: {
         enumerable: false,
         value: { colorMode: 'nocolor', color: null, webGlColor: null }
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html
index 725e1d22..e7fafd0d 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -89,7 +89,6 @@
                 "properties": {
                     "element": {"#": "btnBold"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "btnBold",
                     "pressedLabel": "B",
                     "unpressedLabel": "B"
@@ -106,7 +105,6 @@
                 "properties": {
                     "element": {"#": "btnItalic"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "btnItalic",
                     "pressedLabel": "I",
                     "unpressedLabel": "I"
@@ -123,7 +121,6 @@
                 "properties": {
                     "element": {"#": "btnUnderline"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "btnUnderline",
                     "pressedLabel": "U",
                     "unpressedLabel": "U"
@@ -140,7 +137,6 @@
                 "properties": {
                     "element": {"#": "btnStrikethrough"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "btnStrikethrough",
                     "pressedLabel": "S",
                     "unpressedLabel": "S"
@@ -158,7 +154,6 @@
                 "properties": {
                     "element": {"#": "alignLeft"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "alignLeft",
                     "pressedLabel": "",
                     "unpressedLabel": ""
@@ -175,7 +170,6 @@
                 "properties": {
                     "element": {"#": "alignCenter"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "alignCenter",
                     "pressedLabel": "",
                     "unpressedLabel": ""
@@ -192,7 +186,6 @@
                 "properties": {
                     "element": {"#": "alignRight"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "alignRight",
                     "pressedLabel": "",
                     "unpressedLabel": ""
@@ -209,7 +202,6 @@
                 "properties": {
                     "element": {"#": "alignJustify"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "alignJustify",
                     "pressedLabel": "",
                     "unpressedLabel": ""
@@ -225,10 +217,8 @@
                 "prototype": "montage/ui/button.reel",
                 "properties": {
                     "element": {"#": "indent"},
-                    "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "indent",
-                    "label": ">>"
+                    "value": ">>"
                 },
                 "listeners": [
                     {
@@ -241,10 +231,8 @@
                 "prototype": "montage/ui/button.reel",
                 "properties": {
                     "element": {"#": "outdent"},
-                    "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "outdent",
-                    "label": "<<"
+                    "value": "<<"
                 },
                 "listeners": [
                     {
@@ -258,7 +246,6 @@
                 "properties": {
                     "element": {"#": "bulletedList"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "bulletedList",
                     "pressedLabel": "• • •",
                     "unpressedLabel": "• • •"
@@ -275,7 +262,6 @@
                 "properties": {
                     "element": {"#": "numberedList"},
                     "pressedClass": "active",
-                    "preventFocus": true,
                     "identifier": "numberedList",
                     "pressedLabel": "1 2 3",
                     "unpressedLabel": "1 2 3"
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.js b/js/components/tools-properties/text-properties.reel/text-properties.js
index fa2ec066..7fe5537c 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.js
+++ b/js/components/tools-properties/text-properties.reel/text-properties.js
@@ -10,28 +10,28 @@ var ArrayController = require("montage/ui/controller/array-controller").ArrayCon
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 exports.TextProperties = Montage.create(ToolProperties, {
-    className: {value: null},
-    tagType: {value: null},
-    fontSelection: {value: null},
-    fontSettings: {value: null},
-    fontSize: {value: null},
-    fontColor: {value: null},
-    btnBold: {value: null},
-    btnItalic: {value: null},
-    btnUnderline: {value: null},
-    btnStrikethrough: {value: null},
-    txtLink: {value: null},
-    linkTarget: {value: null},
-    alignLeft: {value: null},
-    alignCenter: {value: null},
-    alignRight: {value: null},
-    alignJustify: {value: null},
-    indent: {value: null},
-    outdent: {value: null},
-    numberedList: {value: null},
-    bulletedList: {value: null},
-    fontTypes: {value: null},
-    fontSizes: {value: null},
+    className: {value: null, serializable: true},
+    tagType: {value: null, serializable: true},
+    fontSelection: {value: null, serializable: true},
+    fontSettings: {value: null, serializable: true},
+    fontSize: {value: null, serializable: true},
+    fontColor: {value: null, serializable: true},
+    btnBold: {value: null, serializable: true},
+    btnItalic: {value: null, serializable: true},
+    btnUnderline: {value: null, serializable: true},
+    btnStrikethrough: {value: null, serializable: true},
+    txtLink: {value: null, serializable: true},
+    linkTarget: {value: null, serializable: true},
+    alignLeft: {value: null, serializable: true},
+    alignCenter: {value: null, serializable: true},
+    alignRight: {value: null, serializable: true},
+    alignJustify: {value: null, serializable: true},
+    indent: {value: null, serializable: true},
+    outdent: {value: null, serializable: true},
+    numberedList: {value: null, serializable: true},
+    bulletedList: {value: null, serializable: true},
+    fontTypes: {value: null, serializable: true},
+    fontSizes: {value: null, serializable: true},
 
     prepareForDraw: {
         value: function() {
diff --git a/js/components/tools-properties/zoom-properties.reel/zoom-properties.js b/js/components/tools-properties/zoom-properties.reel/zoom-properties.js
index b8d6eb6b..020e238c 100755
--- a/js/components/tools-properties/zoom-properties.reel/zoom-properties.js
+++ b/js/components/tools-properties/zoom-properties.reel/zoom-properties.js
@@ -10,8 +10,16 @@ var ToolProperties = require("js/components/tools-properties/tool-properties").T
 
 exports.ZoomProperties = Montage.create(ToolProperties, {
 
-    zoomIn:     { value: null },
-    zoomOut:    { value: null },
+    zoomIn: {
+        value: null,
+        serializable: true
+    },
+
+    zoomOut: {
+        value: null,
+        serializable: true
+    },
+
     zoomInCursor:{value:"url('images/cursors/zoom.png'), default"},
     zoomOutCursor:{value:"url('images/cursors/zoom_minus.png'), default"},
     _subPrepare: {
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.html b/js/components/treeview/ninja-branch.reel/ninja-branch.html
index 60894fbc..8b808488 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.html
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.html
@@ -105,7 +105,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "properties": {
                 "element": { "#": "branchList" },
                 "contentController": {"@": "arrayController" },
-                "selectionEnabled": true
+                "isSelectionEnabled": true
             }
         },
 
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.js b/js/components/treeview/ninja-branch.reel/ninja-branch.js
index 0d1a1d0e..48271c2d 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.js
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.js
@@ -8,12 +8,41 @@ var Montage = require("montage").Montage,
     TreeNode = require("js/components/treeview/tree-node").TreeNode;
 
 var Branch = exports.Branch = Montage.create(TreeNode, {
-    hasTemplate:{
-        value:true
+    label: {
+        value: null,
+        serializable: true
+    },
+
+    branchList: {
+        value: null,
+        serializable: true
+    },
+
+    arrayController: {
+        value: null,
+        serializable: true
     },
+
     repetition:{
-        value: null
+        value: null,
+        serializable: true
     },
+
+    leafComponent: {
+        value: null,
+        serializable: true
+    },
+
+    branchComponent: {
+        value: null,
+        serializable: true
+    },
+
+    collapser: {
+        value: null,
+        serializable: true
+    },
+
     prepareForDraw : {
         value: function() {
             this.collapser.removeAttribute('id');
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
index 1bed0f0b..9ab575c6 100644
--- a/js/components/treeview/treeview.reel/treeview.html
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -27,7 +27,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "prototype" : "js/components/treeview/leaf.reel"                
             },
             "scrollview": {
-                "prototype": "montage/ui/scrollview.reel[Scrollview]",
+                "prototype": "montage/ui/scroller.reel",
                 "properties": {
                     "element": {"#": "treeView"},
                     "axis": "vertical"
diff --git a/js/components/treeview/treeview.reel/treeview.js b/js/components/treeview/treeview.reel/treeview.js
index 9f78d36d..03e28c93 100644
--- a/js/components/treeview/treeview.reel/treeview.js
+++ b/js/components/treeview/treeview.reel/treeview.js
@@ -13,6 +13,11 @@ exports.Treeview = Montage.create(Component, {
     data              : { value : null },
     rootBranch        : { value : null },
 
+    activationEvent: {
+        value: null,
+        serializable: true
+    },
+
     _hasBeenDeserialized: {
         value: false,
         enumerable: false
@@ -27,6 +32,26 @@ exports.Treeview = Montage.create(Component, {
         serializable: true
     },
 
+    defaultBranchComponent: {
+        value: null,
+        serializable: true
+    },
+
+    defaultLeafComponent: {
+        value: null,
+        serializable: true
+    },
+
+    scrollview: {
+        value: null,
+        serializable: true
+    },
+
+    slot: {
+        value: null,
+        serializable: true
+    },
+
     hasTemplate: {
         value: true
     },
@@ -52,17 +77,18 @@ exports.Treeview = Montage.create(Component, {
             rootBranch.hideLabel = !this.showRoot;
             rootBranch.treeView = this;
 
-            this.slot.content = rootBranch;
-            rootBranch.sourceObject = this.contentController.root;
-            rootBranch.needsDraw = true;
-            this.rootBranch = rootBranch;
-
-            this.needsDraw = true;
+//            this.slot.content = rootBranch;
+//            rootBranch.sourceObject = this.contentController.root;
+//            rootBranch.needsDraw = true;
+//            this.rootBranch = rootBranch;
+//
+//            this.needsDraw = true;
 
         }
     },
     showRoot : {
-        value: null
+        value: null,
+        serializable: true
     },
 
     _contentController: {
@@ -109,7 +135,8 @@ exports.Treeview = Montage.create(Component, {
                 }
             }
 
-        }
+        },
+        serializable: true
     },
 
     deserializedFromTemplate: {
diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js
index e2e8e937..e3f41b3f 100755
--- a/js/mediators/keyboard-mediator.js
+++ b/js/mediators/keyboard-mediator.js
@@ -56,6 +56,11 @@ var Keyboard = exports.Keyboard = {
 
 exports.KeyboardMediator = Montage.create(Component, {
 
+    appModel: {
+        value: null,
+        serializable: true
+    },
+
     deserializedFromTemplate: {
         value: function() {
             this.eventManager.addEventListener("appLoaded", this, false);
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index a98fca60..a63422fb 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -163,7 +163,7 @@
                     "element": {"#": "stageMode"}
                 },
                 "bindings" : {
-                    "livePreview": {"<<->": "@appModel.livePreview"}
+                    "livePreview": {"<->": "@appModel.livePreview"}
                 }
             },
 
@@ -310,7 +310,7 @@
                     "selectObjectsOnAddition": true
                 },
                 "bindings": {
-                    "content": {"<<->": "@documentController.documents"}
+                    "content": {"<->": "@documentController.documents"}
                 }
             },
 
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index a12270a0..e4f447d2 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -14,22 +14,172 @@ var NjUtils = require("js/lib/NJUtils").NJUtils;
 
 exports.Ninja = Montage.create(Component, {
 
-    ninjaVersion: {
-        value: null
+    // SERIALIZABLE Properties
+    //////////////////////////////
+    rulerTop: {
+        value: null,
+        serializable: true
+    },
+
+    rulerLeft: {
+        value: null,
+        serializable: true
+    },
+
+    appModel: {
+        value: null,
+        serializable: true
     },
 
     toolsData: {
-        value: null
+        value: null,
+        serializable: true
     },
 
-    appData: {
-        value: AppData
+    toolsList: {
+        value: null,
+        serializable: true
+    },
+
+    toolsProperties: {
+        value: null,
+        serializable: true
+    },
+
+    stage: {
+        value: null,
+        serializable: true
+    },
+
+    elementMediator: {
+        value: null,
+        serializable: true
+    },
+
+    dragDropMediator: {
+        value: null,
+        serializable: true
+    },
+
+    undocontroller: {
+        value: null,
+        serializable: true
+    },
+
+    selectionController: {
+        value: null,
+        serializable: true
+    },
+
+    documentController: {
+        value: null,
+        serializable: true
+    },
+
+    popupManager: {
+        value: null,
+        serializable: true
+    },
+
+    colorController: {
+        value: null,
+        serializable: true
+    },
+
+    stylesController: {
+        value: null,
+        serializable: true
+    },
+
+    presetsController: {
+        value: null,
+        serializable: true
+    },
+
+    filePickerController: {
+        value: null,
+        serializable: true
+