11 files changed, 277 insertions, 21 deletions

diff --git a/js/panels/css-panel/declaration.reel/declaration.html b/js/panels/css-panel/declaration.reel/declaration.html
index 79865fed..3a513871 100644
--- a/js/panels/css-panel/declaration.reel/declaration.html
+++ b/js/panels/css-panel/declaration.reel/declaration.html
@@ -14,7 +14,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "module" : "js/panels/css-panel/declaration.reel",
                 "name" : "Declaration",
                 "properties" : {
-                    "element" : {"#" : "container"}
+                    "element" : {"#" : "container"},
+                    "treeController": {"@": "treeController"}
                 }
             },
             "styleShorthand": {
@@ -26,9 +27,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name": "TreeController",
                 "properties" : {
                     "branchKey" : "properties",
-                    "labelKey" : "name",
-
-                    "delegate": {"@": "owner" }
+                    "labelKey" : "name"
                 },
                 "bindings": {
                     "content": {
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
index 55fe0e18..9685510b 100644
--- a/js/panels/css-panel/declaration.reel/declaration.js
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -9,12 +9,16 @@ var Montage = require("montage/core/core").Montage,
     ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
 
 exports.Declaration = Montage.create(Component, {
+    focusDelegate : {
+        value: null
+    },
     includeEmptyStyle : {
         value: true
     },
     templateDidLoad : {
         value: function() {
             console.log("declaration - template did load");
+            this.treeController.delegate = this.focusDelegate || this;
         }
     },
     prepareForDraw : {
@@ -115,6 +119,12 @@ exports.Declaration = Montage.create(Component, {
         distinct: true
     },
 
+    addNewStyle : {
+        value: function() {
+            debugger;
+        }
+    },
+
     /* drag/drop events */
     handleDrop : {
         value: function(e) {
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 dd51565a..d85b5797 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
@@ -14,6 +14,10 @@ exports.CssStyleRule = Montage.create(Component, {
     hasTemplate: {
         value: true
     },
+    focusDelegate : {
+        value: null
+    },
+
     _rule : {
         value : null
     },
@@ -67,6 +71,10 @@ exports.CssStyleRule = Montage.create(Component, {
             if(this._declaration) {
                 this.declarationComponent.declaration = this._declaration;
             }
+
+            if(this.focusDelegate) {
+                this.declarationComponent.focusDelegate = this.focusDelegate;
+            }
         }
     },
     prepareForDraw : {
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 4bad8350..a059af12 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
@@ -116,6 +116,14 @@ exports.RuleListContainer = Montage.create(Component, {
         distinct: true
     },
 
+    templateDidLoad : {
+        value: function() {
+            if(this.focusDelegate) {
+                this.ruleListComponent.focusDelegate = this.focusDelegate;
+            }
+        }
+    },
+
     draw : {
         value: function() {
             if(this._appendElement) {
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 ebd7428b..0faff07e 100644
--- a/js/panels/css-panel/rule-list.reel/rule-list.js
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -8,7 +8,9 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.RuleList = Montage.create(Component, {
-
+    focusDelegate : {
+        value: null
+    },
     ruleNodeName : { value: 'li' },
 
     _rules: { value: null },
@@ -59,6 +61,11 @@ exports.RuleList = Montage.create(Component, {
             if(componentBase) {
                 instance = Montage.create(componentBase);
                 instance.rule = rule;
+
+                if(this.focusDelegate) {
+                    instance.focusDelegate = this.focusDelegate;
+                }
+
                 this.rulesToDraw.push(instance);
                 this.needsDraw = true;
             }
diff --git a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
index 243d9cc7..0311798b 100644
--- a/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
+++ b/js/panels/css-panel/style-shorthand.reel/style-shorthand.html
@@ -19,8 +19,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "branchList": {"#" : "branchList"},
                 "arrayController": {"@": "arrayController" },
                 "repetition": {"@": "repetition"},
-                "leafComponent": {"@": "leaf"},
-                "branchComponent": {"@": "branch"},
+                "leafComponent": {"@": "style"},
+                "branchComponent": {"@": "shorthand"},
                 "branchCollapser": {"#": "collapser" }
             }
         },
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index f8750eea..ff410951 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -11,7 +11,7 @@
     border-bottom: 1px solid rgba(0,0,0,0);
     cursor: url(/js/../images/tools/hand_down.png), default;
     display: block;
-    /*overflow: hidden;*/
+    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
@@ -21,6 +21,21 @@
 }
 
 /* ------------------------
+  Invalid Style
+------------------------  */
+.style-item-invalid {
+    background-repeat: no-repeat;
+    background-position: 6px 2px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMzYyMERFNTQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMzYyMERFNjQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNjIwREUzNDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNjIwREU0NDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bc4fwegAAAWpJREFUeNo8kLtLA0EQxr%2B9l3lcDAaCBsEqEOysBFEQsRAsRVCEpBREsbIUSxtBrAxEewsrK8VHQIhK%2FoIUUVJIQFFjYi65XDZ36%2Bz5GFgWZr75fjPDhBD4C%2BucjWgaphjQdTgK%2FfPi5a%2FGpPDtjEVjERyqKlag%2FlY8gHPsfzSwPbQgbDyfIs6vURa3EKK8Jf6jmhUy51yiWDlBUDED2NF0JKGQS3IPVn4ATXqIL0EYJgwD42YQG4quE45EggOtCwbWrUM1Ej%2F0jkXDAYaOtOa6iIH2YSQOBugPj4KN3aFdnIThkprynoeUYjtwIRO0hCLxiU3wp12odgl0AXhUa3VQ0xoWCqEApiNhEpFzt7Tm%2F4Tzo9kGvtq4UjNzqJB1mswURvNoqayP57V7KcB7HfZnE8v%2BHYtZtmiGcBzqQ1TSZUPP85HVlo1MfCaX94WPpSO83qwO6wbWCTtBQocoD70eDgZncw3Z%2BC3AAFMzlxlnnpevAAAAAElFTkSuQmCC);
+    opacity: 0.5;
+}
+.style-item.style-item-invalid:hover input {
+    visibility: hidden;
+}
+.style-item-invalid.edit-style-item {
+    opacity: 1;