CSS Panel - Added update of new rules to rule list

3 files changed, 42 insertions, 15 deletions

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 a059af12..5371ec9a 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
@@ -78,18 +78,7 @@ exports.RuleListContainer = Montage.create(Component, {
                 container = document.createElement('div'),
                 rules, ruleListLog;
 
-            if(selection.length === 1) {
-                rules = stylesController.getMatchingRules(selection[0]);
-
-                ///// Add inline style to rule list
-                rules.splice(0, 0, {
-                    type             : 'inline',
-                    selectorText     : 'element.style',
-                    parentStyleSheet : 'Inline Style',
-                    style            : selection[0].style
-                });
-
-            } //// TODO: support more selection types
+            rules = this.getRulesForSelection(selection);
 
             this._instanceToAdd = listInstance;
             listInstance.rules = rules;
@@ -108,6 +97,43 @@ exports.RuleListContainer = Montage.create(Component, {
         }
     },
 
+    getRulesForSelection : {
+        value: function(selection) {
+            var rules;
+
+            if(selection.length === 1) {
+                rules = this.stylesController.getMatchingRules(selection[0]);
+
+                ///// Add inline style to rule list
+                rules.splice(0, 0, {
+                    type             : 'inline',
+                    selectorText     : 'element.style',
+                    parentStyleSheet : 'Inline Style',
+                    style            : selection[0].style
+                });
+
+            } //// TODO: support more selection types
+
+            return rules;
+        }
+    },
+
+    update : {
+        value: function() {
+            var stylesController = this.application.ninja.stylesController,
+                rules = this.getRulesForSelection(this.displayedList.selection),
+                newRules;
+
+            newRules = rules.filter(function(rule) {
+                return rule.type !== 'inline' && this.displayedList.component.rules.indexOf(rule) === -1;
+            }, this);
+
+            newRules.forEach(function(rule) {
+                this.displayedList.component.addRule(rule);
+            },this);
+        }
+    },
+
     //// Array of lists that have been added to the container
     //// Lists include selection type (element/stylesheet), and
     //// the selection itself
@@ -121,6 +147,7 @@ exports.RuleListContainer = Montage.create(Component, {
             if(this.focusDelegate) {
                 this.ruleListComponent.focusDelegate = this.focusDelegate;
             }
+            this.stylesController = this.application.ninja.stylesController;
         }
     },
 
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 be9f61d7..c9eeb64b 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -85,13 +85,13 @@ exports.RuleList = Montage.create(Component, {
     },
 
     update : {
-        value: function() {
+        value: function(rules) {
             this.childComponents.forEach(function(component) {
                 component.update();
             }, this);
 
             //// TODO: find new styles based on selection
-            if()
+
         }
     },
 
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
index c927fe9a..6ce64b8f 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
@@ -88,7 +88,7 @@ exports.StylesViewContainer = Montage.create(Component, {
             } else if(elements.length === 1) {
                 if(this.contentPanel === "rules") {
                     if(e._event.detail.type !== 'cssChange') {
-                        this.ruleListContainer.displayedList.component.update();
+                        this.ruleListContainer.update();
                     }
                 } else {
                     this.computedStyleView.declaration = elements[0];