3 files changed, 34 insertions, 98 deletions

diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
index 326254ed..ff0b0b25 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
@@ -22,4 +22,18 @@
 }
 .styles-view-toolbar-container .toolbar-container {
     border-top: 1px solid #5c5c5c;
+}
+
+
+.styles-view-container .rule-list li {
+    border-top: 1px solid #CCC;
+    padding: 6px;
+}
+.styles-view-container .rule-list li:first-child {
+    padding-top: 0;
+    border-style: none;
+}
+
+.styles-view-container .rule-list li:after {
+    content: "}";
 }
\ No newline at end of file
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 97c7c889..e8ddb139 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
@@ -15,7 +15,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name" : "StylesViewContainer",
                 "properties" : {
                     "element" : {"#" : "container"},
-                    "ruleList": {"@": "ruleList" }
+                    "ruleListContainer": {"@": "ruleListContainer" },
+                    "substitution": {"@": "substitution" }
                 }
             },
             "substitution": {
@@ -24,7 +25,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "properties": {
                     "element": {"#": "sub-panel-slot"},
                     "switchComponents": {
-                        "rules": {"@": "ruleList"},
+                        "rules": {"@": "ruleListContainer"},
                         "computed": {"@": "computedStyleView"}
                     }
                 },
@@ -36,35 +37,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     }
                 }
             },
-            "ruleList": {
-                "module" : "js/panels/css-panel/rule-list.reel",
-                "name": "RuleList",
-                "properties": {
-                    "supportedRules" : {
-                        "1"  : {"@": "css-style-rule"},
-                        "3"  : {"@": "css-import-rule"},
-                        "4"  : {"@": "css-media-rule"},
-                        "5"  : {"@": "css-font-face-rule"},
-                        "6"  : {"@": "css-page-rule"},
-                        "10" : {"@": "namespace-rule"}
-                    }
-                },
-                "bindings": {
-                    "contentController" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "contentController",
-                        "oneway": true
-                    }
-                }
-            },
-            "css-style-rule": {
-                "module": "js/panels/css-panel/rule-components/css-style-rule.reel",
-                "name": "CssStyleRule"
+            "ruleListContainer": {
+                "module": "js/panels/css-panel/rule-list-container.reel",
+                "name": "RuleListContainer"
             },
             "computedStyleView": {
                 "module": "js/panels/CSSPanel/ComputedStyleSubPanel.reel",
-                "name": "ComputedStyleSubPanel",
-                "properties": { }
+                "name": "ComputedStyleSubPanel"
             },
             "toolbar": {
                 "module": "js/components/toolbar.reel",
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 6164a14c..5967345a 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
@@ -8,9 +8,6 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.StylesViewContainer = Montage.create(Component, {
-    noStylesCondition : {
-        value: true
-    },
     contentController : {
         value: null
     },
@@ -47,41 +44,31 @@ exports.StylesViewContainer = Montage.create(Component, {
 
             if(elements.length === 0) {
                 return false;
-            } else if(elements.length >= 1) {
+            } else if(elements.length > 1) {
                 type = 'ELEMENTS';
-                selection = elements;
+                selection = elements.map(function(obj) {
+                    return obj._element;
+                });
             } else {
-                type = 'ELEMENTS';
-                selection = elements[0]
+                type = 'ELEMENT';
+                selection = elements[0]._element;
             }
 
-            ruleList = this._getRuleList({
+            ruleList = this.ruleListContainer._getRuleList({
                 selectionType : type,
                 selection : selection
             });
 
             if(ruleList) {
-                this.displayedList = ruleList;
+                this.ruleListContainer.displayedList = ruleList;
+            } else {
+                this.ruleListContainer.add(type, selection);
             }
+
+            this.hasStyles = true;
         }
     },
-    _lastDisplayedList : {
-        value: null
-    },
-    _displayedList : {
-        value: null
-    },
-    displayedList : {
-        get: function() {
-            return this._displayedList;
-        },
-        set: function(list) {
-            this._hasStyles = true;
-            this._lastDisplayedList = this._displayedList;
-            this._displayedList = list;
-            this.needsDraw = true;
-        }
-    },
+
     _ruleList : {
         value: []
     },
@@ -101,60 +88,16 @@ exports.StylesViewContainer = Montage.create(Component, {
     },
     prepareForDraw : {
         value: function() {
-            debugger;
             console.log("styles view container - prepare for draw");
         }
     },
     draw : {
         value: function() {
-            console.log("styles view container - draw");
-console.log("has style = " + this._hasStyles);
             if(this.hasStyles) {
                 this.element.classList.remove('no-styles');
             } else {
                 this.element.classList.add('no-styles');
             }
-
-            if(this._lastDisplayedList) {
-                //this._lastDisplayedList.style.display = 'none';
-            }
-
-            //this._displayedList.style.display = '';
-        }
-    },
-    _getRuleList : {