CSS Panel - Add focus management to styles view delegate

8 files changed, 152 insertions, 33 deletions

diff --git a/js/components/treeview/treeview.reel/treeview.js b/js/components/treeview/treeview.reel/treeview.js
index ebbfe685..9f78d36d 100644
--- a/js/components/treeview/treeview.reel/treeview.js
+++ b/js/components/treeview/treeview.reel/treeview.js
@@ -11,6 +11,7 @@ exports.Treeview = Montage.create(Component, {
 
     substitution      : { value : null },
     data              : { value : null },
+    rootBranch        : { value : null },
 
     _hasBeenDeserialized: {
         value: false,
@@ -54,6 +55,8 @@ exports.Treeview = Montage.create(Component, {
             this.slot.content = rootBranch;
             rootBranch.sourceObject = this.contentController.root;
             rootBranch.needsDraw = true;
+            this.rootBranch = rootBranch;
+
             this.needsDraw = true;
 
         }
@@ -85,6 +88,8 @@ exports.Treeview = Montage.create(Component, {
 
             if (this._contentController) {
 
+//this._initializeRootBranch();
+
                 // And bind what we need from the new contentController
                 var selectedIndexesBindingDescriptor;
 
diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
index 873d2ce4..8ab19ad6 100644
--- a/js/panels/css-panel/declaration.reel/declaration.js
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -9,6 +9,9 @@ var Montage = require("montage/core/core").Montage,
     ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
 
 exports.Declaration = Montage.create(Component, {
+    cssText : {
+        value: null
+    },
     focusDelegate : {
         value: null
     },
@@ -42,6 +45,8 @@ exports.Declaration = Montage.create(Component, {
         set: function(dec) {
             this._declaration = dec;
 
+            this.cssText = dec.cssText;
+
             ///// creates data structure to use with tree component
             this.buildStyleTree();
 
@@ -52,11 +57,34 @@ exports.Declaration = Montage.create(Component, {
                     "isEmpty": true
                 });
             }
-//debugger;
+
             this.needsDraw = true;
         }
     },
 
+    update : {
+        value: function() {
+            if(this.declaration.cssText !== this.cssText) {
+                ///// Needs update
+                this.treeController.branchControllers[0].content.forEach(function(obj) {
+                    this.treeController.branchControllers[0].removeObjects(obj);
+                }, this );
+
+                this.buildStyleTree();
+
+                if(this.includeEmptyStyle) {
+                    this.styleTree.properties.push({
+                        "name": "property",
+                        "value" : "value",
+                        "isEmpty": true
+                    });
+                }
+//debugger;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     buildStyleTree : {
         value: function() {
             var styles = Array.prototype.slice.call(this._declaration).sort();
@@ -124,8 +152,6 @@ exports.Declaration = Montage.create(Component, {
 
     addNewStyleAfter : {
         value: function(style) {
-            //this.treeController.branchControllers[0].addObjects({
-            foo1 = style.parentComponent.parentComponent;
             style.parentComponent.parentComponent.contentController.addObjects({
                 name: 'property',
                 value: 'value',
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 7b5a736f..cfa3e605 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
@@ -90,7 +90,7 @@ exports.CssStyleRule = Montage.create(Component, {
         value: function() {
             if(this.cssText !== this.rule.cssText) {
                 // TODO: add update for selector and stylesheet name
-                this.declarationComponent.update();
+                //this.declarationComponent.update();
             }
         }
     },
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index c6bb070c..6864e245 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -111,7 +111,7 @@
     right: -1px;
 }
 .style-item .hintable-hint {
-    color: #CCC;
+    color: #bdbdbd;
 }
 
 /* ------------------------
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
index acc169be..9830a21e 100644
--- a/js/panels/css-panel/style.reel/style.html
+++ b/js/panels/css-panel/style.reel/style.html
@@ -58,6 +58,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     {
                         "type": "change",
                         "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "stop",
+                        "listener": {"@": "owner"}
                     }
                 ]
             },
@@ -80,6 +84,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     {
                         "type": "change",
                         "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "stop",
+                        "listener": {"@": "owner"}
                     }
                 ]
             }
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index c73da6e5..1d5a11a5 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -8,27 +8,14 @@ var Montage = require("montage/core/core").Montage,
     TreeNode = require("js/components/treeview/tree-node").TreeNode;
 
 exports.Style = Montage.create(TreeNode, {
-    delegate : {
-        value: null
-    },
-    disabledClass : {
-        value: 'style-item-disabled'
-    },
-    editingStyleClass : {
-        value: 'edit-style-item'
-    },
-    editNewEmptyClass : {
-        value: 'edit-empty-style'
-    },
-    invalidStyleClass : {
-        value: "style-item-invalid"
-    },
-    propertyText : {
-        value: "property"
-    },
-    _valueText : {
-        value: "value"
-    },
+    delegate          : { value: null },
+    disabledClass     : { value: 'style-item-disabled' },
+    editingStyleClass : { value: 'edit-style-item' },
+    editNewEmptyClass : { value: 'edit-empty-style' },
+    invalidStyleClass : { value: "style-item-invalid" },
+
+    propertyText : { value: "property" },
+    _valueText : { value: "value" },
     valueText : {
         get: function() {
             return this._valueText;
@@ -158,6 +145,27 @@ exports.Style = Montage.create(TreeNode, {
         }