3 files changed, 114 insertions, 52 deletions

diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
index 44d6d864..ebd7428b 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -8,15 +8,10 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.RuleList = Montage.create(Component, {
-    hasTemplate: {
-        value: true
-    },
-    listElement : {
-        value: null
-    },
-    _rules: {
-        value: null
-    },
+
+    ruleNodeName : { value: 'li' },
+
+    _rules: { value: null },
     rules: {
         get: function() {
             return this._rules;
@@ -28,62 +23,77 @@ exports.RuleList = Montage.create(Component, {
             //debugger;
             console.log('list: ', list);
             this._rules = list;
+
+            ///// remove previsouly added rules
+            if(this.childComponents){
+                this.childComponents.forEach(function(ruleComponent) {
+                    this.removeRule(ruleComponent);
+                }, this);
+            }
+
+            this._rules.forEach(function(rule) {
+                this.addRule(rule);
+            }, this);
+
             this.needsDraw = true;
-            this._needsAppend = true;
+
         }
     },
-    templateDidLoad : {
-        value: function() {
-            console.log("Rule List : template did load");
-            //this.condition = true;
-            this.needsDraw = true;
-            //debugger;
-        }
+
+    childComponents : {
+        value: [],
+        distinct: true
     },
-    prepareForDraw : {
-        value: function() {
-            console.log("Rule List : prepare for draw");
-        }
+
+    rulesToDraw : {
+        value: [],
+        distinct: true
     },
-    draw : {
-        value: function() {
-            console.log("Rule List - Draw");
-            if(this._needsAppend) {
-                this._rules.forEach(function(rule) {
-                    var componentBase = this.supportedRules[rule.type],
-                        instance, el;
-
-                    if(componentBase) {
-                        el = document.createElement(this.ruleNodeName);
-                        instance = Montage.create(componentBase);
-                        instance.element = el;
-                        instance.rule = rule;
-                        this.element.appendChild(instance.element);
-                        instance.needsDraw = true;
-                    }
 
+    addRule: {
+        value: function(rule) {
+            var componentBase = this.supportedRules[rule.type],
+                instance, el;
 
-                }, this);
+            ///// Draw the rule if we have a template for the rule type
+            if(componentBase) {
+                instance = Montage.create(componentBase);
+                instance.rule = rule;
+                this.rulesToDraw.push(instance);
+                this.needsDraw = true;
             }
-            console.log("Rule List : draw");
         }
     },
-    _createRuleComponent: {
-        value: function(ruleType) {
 
+    update : {
+        value: function() {
+            this.childComponents.forEach(function(component) {
+                component.update();
+            }, this);
+
+            //// TODO: find new styles based on selection
         }
     },
-    ruleNodeName : {
-        value: 'li'
+
+    willDraw : {
+        value: function() {
+            this.rulesToDraw.forEach(function(component) {
+                component.element = document.createElement(this.ruleNodeName);
+            }, this);
+
+        }
     },
-    ruleComponents : {
-        value: {
-            "1"  : 'css-style-rule',
-            "3"  : 'css-import-rule',
-            "4"  : 'css-media-rule',
-            "5"  : 'css-font-face-rule',
-            "6"  : 'css-page-rule',
-            "10" : 'namespace-rule'
+
+    draw : {
+        value: function() {
+            //// Iterate through all rules that need draw and append them
+            this.rulesToDraw.forEach(function(component) {
+                this.element.appendChild(component.element);
+                component.needsDraw = true;
+            }, this);
+
+            ///// Null out any rules that were just drawn
+            this.rulesToDraw.length = 0;
         }
     }
 });
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 e8ddb139..56e965c2 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
@@ -37,6 +37,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     }
                 }
             },
+            "stylesViewDelegate" : {
+                "module": "js/panels/css-panel/styles-view-mediator",
+                "name": "StylesViewMediator",
+                "properties": {
+                    "ruleListContainer": {"@": "ruleListContainer"}
+                }
+            },
             "ruleListContainer": {
                 "module": "js/panels/css-panel/rule-list-container.reel",
                 "name": "RuleListContainer"
@@ -49,7 +56,14 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "module": "js/components/toolbar.reel",
                 "name": "Toolbar",
                 "properties": {
-                    "element": {"#": "styles-view-toolbar"}
+                    "element": {"#": "styles-view-toolbar"},
+                    "delegate": {"@": "stylesViewDelegate" },
+                    "buttons": [
+                        {
+                            "title": "Add",
+                            "identifier": "add"
+                        }
+                    ]
                 }
             }
         }
diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js
new file mode 100644
index 00000000..38b61220
--- /dev/null
+++ b/js/panels/css-panel/styles-view-mediator.js
@@ -0,0 +1,38 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.StylesViewMediator = Montage.create(Component, {
+    stylesController : {
+        get: function() {
+            return this.application.ninja.stylesController;
+        },
+        set: function(){
+            return;
+        }
+    },
+    handleAddAction : {
+        value: function(e) {
+            var selector, newRule;
+
+            ///// Add rule to the container
+
+            ///// Get selection prefix
+            if(this.ruleListContainer.displayedList.selection.length > 1) {
+                selector = this.stylesController.generateClassName(null, true);
+            } else {
+                selector = this.stylesController.generateClassName(this.ruleListContainer.displayedList.selection[0].nodeName);
+            }
+
+            newRule = this.application.ninja.stylesController.addRule("."+selector, ' { }');
+
+            this.ruleListContainer.displa