4 files changed, 25 insertions, 9 deletions

diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index c74502c0..ac714bfa 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -29,7 +29,7 @@ exports.CssStyleRule = Montage.create(Component, {
             return this._applied;
         },
         set: function(value) {
-            if(this._applied === value) { return false; }
+            if(this._applied === value || value === undefined || value === null) { return false; }
 
             this._applied = value;
             this.needsDraw = true;
diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
index 9cf8b875..511ff24c 100644
--- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
+++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js
@@ -30,8 +30,6 @@ exports.RuleListContainer = Montage.create(Component, {
 
             if(!list) {
                 list = this.add(selection);
-            } else {
-                console.log("rule list found!");
             }
 
             this.displayedList = list;
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 5f6afee5..bca298df 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -83,19 +83,28 @@ exports.RuleList = Montage.create(Component, {
     },
 
     addRule: {
-        value: function(rule, atIndex) {
+        value: function(rule, atIndex, applies, drawCallback) {
             var insertIndex = atIndex || this.childComponents.length;
 
             this.rulesToDraw.push({
                 rule: rule,
                 index: insertIndex,
-                instance : null
+                instance : null,
+                applies : applies,
+                callback : drawCallback
             });
 
             this.needsDraw = true;
         }
     },
 
+    removeRule: {
+        value: function(ruleComponent) {
+            this.rulesToRemove.push(ruleComponent);
+            this.needsDraw = true;
+        }
+    },
+
     willDraw : {
         value: function() {
             this.rulesToDraw.forEach(function(ruleObj) {
@@ -110,6 +119,7 @@ exports.RuleList = Montage.create(Component, {
                 instance = Montage.create(componentBase);
                 instance.element = document.createElement(this.ruleNodeName);
                 instance.rule = ruleObj.rule;
+                instance.applied = ruleObj.applies;
 
                 if(this.focusDelegate) {
                     instance.focusDelegate = this.focusDelegate;
@@ -156,17 +166,23 @@ exports.RuleList = Montage.create(Component, {
                 ruleObj.instance.needsDraw = true;
             }, this);
 
-            ///// Null out any rules that were just drawn
-            this.rulesToDraw.length = 0;
-
         }
     },
 
     didDraw : {
         value: function() {
+            this.rulesToDraw.forEach(function(ruleObj) {
+                if(typeof ruleObj.callback === 'function') {
+                    ruleObj.callback(ruleObj.instance);
+                }
+            });
+
             this.rulesToRemove.forEach(function(ruleObj) {
                 ruleObj.instance = null;
             }, this);
+
+            ///// Null out any rules that were just drawn
+            this.rulesToDraw.length = 0;
             this.rulesToRemove.length = 0;
         }
     }
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index 3f29ba27..aba8c042 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -246,7 +246,9 @@ exports.StylesViewMediator = Montage.create(Component, {
             },this);
 
             ///// Add rule directly to the rule list
-            this.ruleListContainer.displayedList.component.addRule(newRule).applied = applies;
+            this.ruleListContainer.displayedList.component.addRule(newRule, null, applies, function(ruleComponent) {
+                ruleComponent.selectorField.start();
+            });
 
         }
     },