From 1c3da2901f454ad2c18e20216bb2517740a1c080 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 22 May 2012 14:28:00 -0700
Subject: CSS Panel - Update components to use new serialization format

---
 js/components/toolbar.reel/toolbar.html            | 24 ++-----------
 js/components/toolbar.reel/toolbar.js              | 20 +++++++++--
 js/data/panels-data.js                             |  2 +-
 js/panels/css-panel/css-panel-container.js         |  2 +-
 js/panels/css-panel/css-panel.reel/css-panel.html  | 21 ++++--------
 js/panels/css-panel/css-panel.reel/css-panel.js    |  2 +-
 js/panels/css-panel/css-style.reel/css-style.html  | 32 +++++------------
 .../css-style-rule.reel/css-style-rule.html        | 40 ++++++----------------
 .../rule-list-container.html                       | 11 +++---
 js/panels/css-panel/rule-list.reel/rule-list.html  |  3 +-
 .../style-declaration.reel/style-declaration.html  | 35 ++++---------------
 .../css-panel/style-sheet.reel/style-sheet.html    | 24 ++++---------
 .../style-sheets-view.reel/style-sheets-view.html  | 18 ++--------
 .../styles-view-container.html                     | 24 ++++---------
 js/panels/css-panel/styles-view-delegate.js        |  2 +-
 15 files changed, 78 insertions(+), 182 deletions(-)

(limited to 'js')

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-panel/css-style.reel/css-style.html
index c4b6dd59..00cebf39 100644
--- a/js/panels/css-panel/css-style.reel/css-style.html
+++ b/js/panels/css-panel/css-style.reel/css-style.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-style.reel",
-                "name" : "CssStyle",
+                "prototype" : "js/panels/css-panel/css-style.reel",
                 "properties" : {
                     "element" : {"#" : "container"},
                     "addStyleButton": {"#": "add-style-button"},
@@ -25,34 +24,24 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "object": "js/panels/CSSPanel/css-property-name-list"
             },
             "checkbox": {
-                "module": "montage/ui/checkbox.reel",
-                "name": "Checkbox",
+                "prototype": "montage/ui/checkbox.reel",
                 "properties": {
                     "element": {"#": "disable-checkbox"},
                     "checked": true
                 },
                 "bindings": {
-                    "checked" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "enabled",
-                        "oneway": false
-                    }
+                    "checked" : {"<<->": "@owner.enabled" }
                 }
             },
             "property": {
-                "module": "js/components/hintable.reel",
-                "name": "Hintable",
+                "prototype": "js/components/hintable.reel",
                 "properties": {
                     "startOnEvent": "click",
                     "element": {"#": "property"},
                     "identifier": "property"
                 },
                 "bindings": {
-                    "value" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "propertyText",
-                        "oneway": true
-                    }
+                    "value" : {"<-": "@owner.propertyText" }
                 },
                 "listeners": [
                     {
@@ -66,19 +55,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 ]
             },
             "value": {
-                "module": "js/components/hintable.reel",
-                "name": "Hintable",
+                "prototype": "js/components/hintable.reel",
                 "properties": {
                     "startOnEvent": "click",
                     "element": {"#": "value"},
                     "identifier": "value"
                 },
                 "bindings": {
-                    "value" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "valueText",
-                        "oneway": true
-                    }
+                    "value" : {"<-": "@owner.valueText" }
                 },
                 "listeners": [
                     {
@@ -95,7 +79,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
     </script>
 </head>
 <body>
-<div id="container" class="style-item"  spellcheck="false" draggable="false">
+<div data-montage-id="container" class="style-item"  spellcheck="false" draggable="false">
     <input type="checkbox" data-montage-id="disable-checkbox"><dt data-montage-id="property" class="css-property"></dt><dd data-montage-id="value" class="css-value"></dd>
     <button data-montage-id="add-style-button" class="add-style-button">Add</button>
 </div>
diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
index 05ea669f..f203b61f 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.html
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.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/rule-components/css-style-rule.reel",
-                "name" : "CssStyleRule",
+                "prototype" : "js/panels/css-panel/rule-components/css-style-rule.reel",
                 "properties" : {
                     "element" : {"#" : "rule-item"},
                     "selectorField": {"@": "selector"},
@@ -20,56 +19,37 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 }
             },
             "sheetName": {
-                "module": "montage/ui/dynamic-text.reel",
-                "name" : "DynamicText",
+                "prototype": "montage/ui/dynamic-text.reel",
                 "properties": {
                     "element": {"#": "style-sheet-name"}
                 },
                 "bindings": {
-                    "value" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "sheetName",
-                        "oneway": true
-                    }
+                    "value" : {"<-": "@owner.sheetName" }
                 }
             },
             "selector": {
-                "module": "js/components/hintable.reel",
-                "name" : "Hintable",
+                "prototype": "js/components/hintable.reel",
                 "properties": {
                     "startOnEvent": "click",
                     "element": {"#": "rule-selector"}
                 },
                 "bindings": {
-                    "value" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "selector",
-                        "oneway": true
-                    }
+                    "value" : {"<<->":"@owner.selector" }
                 }
             },
             "declaration": {
-                "module": "js/panels/css-panel/style-declaration.reel",
-                "name": "StyleDeclaration",
+                "prototype": "js/panels/css-panel/style-declaration.reel",
                 "properties": {
                     "element": {"#": "declaration-list"}
                 },
                 "bindings": {
-                    "focusDelegate" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "focusDelegate",
-                        "oneway": true
-                    },
-                    "declaration" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "_declaration",
-                        "oneway": true
-                    }
+                    "focusDelegate" : {"<-": "@owner.focusDelegate" },
+                    "declaration" : {"<-": "@owner._declaration" }
+
                 }
             },
             "sheetLink": {
-                "module": "montage/ui/anchor.reel",
-                "name": "Anchor",
+                "prototype": "montage/ui/anchor.reel",
                 "properties": {
                     "element": {"#": "style-sheet-name"}
                 }
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.html b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html
index 809f9bfe..77c9f275 100644
--- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.html
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.html
@@ -10,16 +10,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
     <script type="text/montage-serialization">
         {
             "owner": {
-                "module" : "js/panels/css-panel/rule-list-container.reel",
-                "name" : "RuleListContainer",
+                "prototype" : "js/panels/css-panel/rule-list-container.reel",
                 "properties" : {
                     "element" : {"#" : "container"},
                     "ruleListComponent": {"@": "ruleList"}
                 }
             },
             "ruleList": {
-                "module" : "js/panels/css-panel/rule-list.reel",
-                "name": "RuleList",
+                "prototype" : "js/panels/css-panel/rule-list.reel",
                 "properties": {
                     "supportedRules" : {
                         "inline": {"@": "cssStyleRule" },
@@ -28,8 +26,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 }
             },
             "cssStyleRule": {
-                "module": "js/panels/css-panel/rule-components/css-style-rule.reel",
-                "name": "CssStyleRule"
+                "prototype": "js/panels/css-panel/rule-components/css-style-rule.reel"
             }
         }
     </script>
@@ -46,6 +43,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
     </script>
 </head>
 <body>
-<div id="container" class="rule-list-container"></div>
+<div data-montage-id="container" class="rule-list-container"></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html
index c11e488d..67b17f48 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.html
+++ b/js/panels/css-panel/rule-list.reel/rule-list.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/rule-list.reel",
-                "name" : "RuleList",
+                "prototype" : "js/panels/css-panel/rule-list.reel",
                 "properties" : {
                     "element" : {"#" : "rule-list"}
                 }
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.html b/js/panels/css-panel/style-declaration.reel/style-declaration.html
index 9fc45640..fad54453 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.html
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.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/style-declaration.reel",
-                "name" : "Declaration",
+                "prototype" : "js/panels/css-panel/style-declaration.reel",
                 "properties" : {
                     "element" : {"#" : "container"},
                     "arrayController": {"@": "arrayController"},
@@ -26,11 +25,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "automaticallyOrganizeObjects": true
                 },
                 "bindings": {
-                    "content": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "styles",
-                        "oneway": true
-                    }
+                    "content": {"<-": "@owner.styles" }
                 }
             },
             "repetition": {
@@ -47,27 +42,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "declaration": {"@": "owner"}
                 },
                 "bindings": {
-                    "source" : {
-                        "boundObject": {"@": "repetition"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration",
-                        "oneway": true
-                    },
-                    "propertyText" : {
-                        "boundObject": {"@": "repetition"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration.name"
-                    },
-                    "valueText" : {
-                        "boundObject": {"@": "repetition"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration.value"
-                    },
-                    "empty" : {
-                        "boundObject": {"@": "repetition"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration.isEmpty"
-                    },
-                    "delegate": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "focusDelegate"
-                    }
+                    "source": {"<-": "@repetition.objectAtCurrentIteration" },
+                    "propertyText": {"<<->": "@repetition.objectAtCurrentIteration.name" },
+                    "valueText": {"<<->": "@repetition.objectAtCurrentIteration.value" },
+                    "empty": {"<<->": "@repetition.objectAtCurrentIteration.isEmpty" },
+                    "delegate": {"<-": "@owner.focusDelegate" }
                 }
             }
 
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html
index 788cafcc..7e27dd93 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.html
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.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/style-sheet.reel",
-                "name" : "StyleSheet",
+                "prototype" : "js/panels/css-panel/style-sheet.reel",
                 "properties" : {
                     "element" : {"#" : "style-sheet-container"},
                     "nameText": {"@": "name"},
@@ -24,31 +23,24 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 }
             },
             "name": {
-                "module": "montage/ui/dynamic-text.reel",
-                "name": "DynamicText",
+                "prototype": "montage/ui/dynamic-text.reel",
                 "properties": {
                     "element": {"#": "sheet-name"},
                     "identifier": "nameText",
                     "defaultText": "Style sheet"
                 },
                 "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "name",
-                        "onewway": true
-                    }
+                    "value": {"<-": "@owner.name"}
                 }
             },
             "mediaInput": {
-                "module": "js/components/textfield.reel",
-                "name": "TextField",
+                "prototype": "js/components/textfield.reel[TextField]",
                 "properties": {
                     "element": {"#": "media-input"}
                 }
             },
             "editButton": {
-                "module": "montage/ui/button.reel",
-                "name": "Button",
+                "prototype": "montage/ui/button.reel",
                 "properties": {
                     "element": {"#": "edit-button"},
                     "identifier": "editButton",
@@ -61,8 +53,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
             },
             "disableButton": {
-                "module": "montage/ui/button.reel",
-                "name": "Button",
+                "prototype": "montage/ui/button.reel",
                 "properties": {
                     "element": {"#": "disable-button"},
                     "identifier": "disableButton",
@@ -75,8 +66,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
             },
             "deleteButton": {
-                "module": "montage/ui/button.reel",
-                "name": "Button",
+                "prototype": "montage/ui/button.reel",
                 "properties": {
                     "element": {"#": "delete-button"},
                     "identifier": "deleteButton",
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
index 3e15f50b..8d3c44c5 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
@@ -21,11 +21,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "arrayController" : {
                 "prototype" : "montage/ui/controller/array-controller",
                 "bindings": {
-                    "content": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "styleSheets",
-                        "oneway": true
-                    }
+                    "content": {"<-": "@owner.styleSheets" }
                 }
             },
             "styleSheetList": {
@@ -41,11 +37,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element": {"#": "sheet-item"}
                 },
                 "bindings": {
-                    "source": {
-                        "boundObject": {"@": "styleSheetList"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration",
-                        "oneway": true
-                    }
+                    "source": {"<-": "@styleSheetList.objectAtCurrentIteration" }
                 }
             },
             "documentLoaded": {
@@ -55,11 +47,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "removalStrategy": "hide"
                 },
                 "bindings": {
-                    "condition": {
-                        "boundObject": {"@": "owner" },
-                        "boundObjectPropertyPath": "documentLoaded",
-                        "oneway": true
-                    }
+                    "condition": {"<-": "@owner.documentLoaded" }
                 }
             },
             "hasSheets": {
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
index 1dd83468..93ac3793 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.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/styles-view-container.reel",
-                "name" : "StylesViewContainer",
+                "prototype" : "js/panels/css-panel/styles-view-container.reel",
                 "properties" : {
                     "element" : {"#" : "container"},
                     "ruleListContainer": {"@": "ruleListContainer" },
@@ -23,8 +22,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 }
             },
             "substitution": {
-                "module": "montage/ui/substitution.reel",
-                "name": "Substitution",
+                "prototype": "montage/ui/substitution.reel",
                 "properties": {
                     "element": {"#": "sub-panel-slot"},
                     "switchComponents": {
@@ -33,34 +31,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     }
                 },
                 "bindings": {
-                    "switchValue": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "contentPanel",
-                        "oneway": true
-                    }
+                    "switchValue": { "<-": "@owner.contentPanel" }
                 }
             },
             "stylesViewDelegate" : {
-                "module": "js/panels/css-panel/styles-view-delegate",
-                "name": "StylesViewMediator",
+                "prototype": "js/panels/css-panel/styles-view-delegate",
                 "properties": {
                     "ruleListContainer": {"@": "ruleListContainer"}
                 }
             },
             "ruleListContainer": {
-                "module": "js/panels/css-panel/rule-list-container.reel",
-                "name": "RuleListContainer",
+                "prototype": "js/panels/css-panel/rule-list-container.reel",
                 "properties": {
                     "focusDelegate": {"@": "stylesViewDelegate"}
                 }
             },
             "computedStyleView": {
-                "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel",
-                "name": "ComputedStyleSubPanel"
+                "prototype": "js/panels/CSSPanel/ComputedStyleSubPanel.reel"
             },
             "toolbar": {
-                "module": "js/components/toolbar.reel",
-                "name": "Toolbar",
+                "prototype": "js/components/toolbar.reel",
                 "properties": {
                     "element": {"#": "styles-view-toolbar"},
                     "delegate": {"@": "stylesViewDelegate" },
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index 583eb0ba..919f6034 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -8,7 +8,7 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component,
     Keyboard = require("js/mediators/keyboard-mediator").Keyboard;
 
-exports.StylesViewMediator = Montage.create(Component, {
+exports.StylesViewDelegate = Montage.create(Component, {
     newClassPrefix      : { value: "new-class" },
     elementOutlineClass : { value: "nj-element-highlight" },
 
-- 
cgit v1.2.3