CSS Panel - Update components to use new serialization format

15 files changed, 78 insertions, 182 deletions

diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html
index b33c4665..d2c5972a 100644
--- a/js/components/toolbar.reel/toolbar.html
+++ b/js/components/toolbar.reel/toolbar.html
@@ -25,12 +25,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element": {"#": "repetition"}
                 },
                 "bindings": {
-                    "objects" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "buttons",
-                        "oneway": true
-                    }
-
+                    "objects": {"<-": "@owner.buttons"}
                 }
             },
             
@@ -41,21 +36,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "label": " "
                 },
                 "bindings": {
-                    "label" : {
-                        "boundObject": {"@": "buttonList"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration.title",
-                        "oneway": true
-                    },
-                    "identifier": {
-                        "boundObject": {"@": "buttonList"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration.identifier",
-                        "oneway": true
-                    },
-                    "sourceObject": {
-                        "boundObject": {"@": "buttonList"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration",
-                        "oneway": true
-                    }
+                    "label": {"<-": "@buttonList.objectAtCurrentIteration.title"},
+                    "sourceObject": {"<-": "@buttonList.objectAtCurrentIteration"}
                 }
             }
         }
diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js
index 8f93aa2b..2ccdb2c5 100644
--- a/js/components/toolbar.reel/toolbar.js
+++ b/js/components/toolbar.reel/toolbar.js
@@ -11,17 +11,31 @@ exports.Toolbar = Montage.create(Component, {
     _needsButtonProperties : {
         value: null
     },
+    _sourceObject : {
+        value: null
+    },
+    sourceObject : {
+        get: function() {
+            return this._sourceObject;
+        },
+        set: function(value) {
+            if(value === this._sourceObject) { return; }
+            this._sourceObject = value;
+        },
+        serializable: true
+    },
     leftAlignClass  : { value: "left-button" },
     hideButtonClass : { value: "hide-button" },
-    _buttons : { value: null },
+    _buttons : { value: [], distinct: true },
     buttons : {
         get: function() {
             return this._buttons;
         },
         set: function(btns) {
             this._buttons = btns;
-            this._needsButtonProperties = this.needsDraw = true;;
-        }
+            this._needsButtonProperties = this.needsDraw = true;
+        },
+        serializable: true
     },
 
     _buttonToHide : {
diff --git a/js/data/panels-data.js b/js/data/panels-data.js
index ed346196..ffc76782 100644
--- a/js/data/panels-data.js
+++ b/js/data/panels-data.js
@@ -80,7 +80,7 @@ exports.PanelsData = Montage.create(Montage, {
             collapsed: false,
             open: true,
             modulePath: "js/panels/css-panel/css-panel.reel",
-            moduleName: "CSSPanelNew"
+            moduleName: "CssPanel"
         },
         {
             name: "Presets",
diff --git a/js/panels/css-panel/css-panel-container.js b/js/panels/css-panel/css-panel-container.js
index 6110c999..08673309 100644
--- a/js/panels/css-panel/css-panel-container.js
+++ b/js/panels/css-panel/css-panel-container.js
@@ -6,7 +6,7 @@
 
 var Montage = require("montage/core/core").Montage;
 var PanelBase = require("js/panels/PanelBase").PanelBase;
-var Content = require("js/panels/css-panel/css-panel.reel").CSSPanelNew;
+var Content = require("js/panels/css-panel/css-panel.reel").CssPanel;
 
 exports.CSSPanelContainer = Montage.create(PanelBase, {
     panelName : { value: "CSS Panel" },
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html
index 54bb1fae..42dca8a2 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.html
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -11,8 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
     <script type="text/montage-serialization">
         {
             "owner": {
-                "module" : "js/panels/css-panel/css-panel.reel",
-                "name" : "CSSPanelNew",
+                "prototype" : "js/panels/css-panel/css-panel.reel",
                 "properties" : {
                     "element" : {"#" : "container"},
                     "styleSheetsView": {"@": "styleSheetsView"},
@@ -21,16 +20,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             },
 
             "styleSheetsView": {
-                "module" : "js/panels/css-panel/style-sheets-view.reel",
-                "name": "StyleSheetsView",
+                "prototype" : "js/panels/css-panel/style-sheets-view.reel",
                 "properties": {
                     "element": {"#": "style-sheet-view" },
                     "documentNameLabel": {"#": "document-name" }
                 }
             },
             "stylesViewContainer": {
-                "module" : "js/panels/css-panel/styles-view-container.reel",
-                "name": "StylesViewContainer",
+                "prototype" : "js/panels/css-panel/styles-view-container.reel",
                 "properties": {
                     "element": {"#": "styles-view-container" },
                     "selectionName": {"@": "selectionName" }
@@ -42,22 +39,18 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element": {"#":"selection-name"}
                 },
                 "bindings": {
-                    "value" : {
-                        "boundObject": {"@": "stylesViewContainer"},
-                        "boundObjectPropertyPath": "selectionNameLabelText",
-                        "oneway": true
-                    }
+                    "value" : {"<-": "@stylesViewContainer.selectionNameLabelText" }
                 }
             }
         }
     </script>
 </head>
 <body>
-<section id="container" class="css-panel">
+<section data-montage-id="container" class="css-panel">
     <h3>Style Sheets <span data-montage-id="document-name" class="document-name"></span></h3>
-    <div id="style-sheet-view"></div>
+    <div data-montage-id="style-sheet-view"></div>
     <h3>Styles <span data-montage-id="selection-name" class="selection-name"></span></h3>
-    <div id="styles-view-container"></div>
+    <div data-montage-id="styles-view-container"></div>
 </section>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js
index 4a2062af..a117787e 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.js
+++ b/js/panels/css-panel/css-panel.reel/css-panel.js
@@ -7,7 +7,7 @@
 var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
-exports.CSSPanelNew = Montage.create(Component, {
+exports.CssPanel = Montage.create(Component, {
     prepareForDraw : {
         value: function() {
         }
diff --git a/js/panels/css-panel/css-style.reel/css-style.html b/js/panels/css