7 files changed, 157 insertions, 102 deletions

diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
index cbfe2d9b..6e3b2aaf 100644
--- a/js/components/hintable.reel/hintable.js
+++ b/js/components/hintable.reel/hintable.js
@@ -157,6 +157,14 @@ exports.Hintable = Montage.create(Editable, {
                 
             this._super(arguments);
             
+                        /// Remove the phantom "<BR>" element that is generated when 
+                        /// content editable element is empty
+                        this._children(this._element, function(item) { 
+                            return item.nodeName === 'BR';
+                        }).forEach(function(item) {
+                            this._element.removeChild(item);
+                        }, this);
+            
             if(k === 39) {
                 selection = window.getSelection();
                 text = selection.baseNode.textContent;
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 454c2742..eb9ff3a9 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -337,14 +337,14 @@
                                         <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span>
                                 </div>
                                 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position">
-                                        <div class="layout-table">
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">X</div>
-                                                        <div class="layout-cell"><div data-montage-id="position-x"></div></div>
+                                        <div class="layout-tablew">
+                                                <div class="container-row">
+                                                        <div class="cell-property">X</div>
+                                                        <div class="cell-value"><div data-montage-id="position-x"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Y</div>
-                                                        <div class="layout-cell"><div data-montage-id="position-y"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Y</div>
+                                                        <div class="cell-value"><div data-montage-id="position-y"></div></div>
                                                 </div>
                                         </div>
                                 </div>
@@ -353,26 +353,26 @@
                                         <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span>
                                 </div>
                                 <div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform">
-                                        <div class="layout-table">
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Scale X</div>
-                                                        <div class="layout-cell"><div data-montage-id="scale-x"></div></div>
+                                        <div class="layout-tablew">
+                                                <div class="container-row">
+                                                        <div class="cell-property">Scale X</div>
+                                                        <div class="cell-value"><div data-montage-id="scale-x"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Scale Y</div>
-                                                        <div class="layout-cell"><div data-montage-id="scale-y"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Scale Y</div>
+                                                        <div class="cell-value"><div data-montage-id="scale-y"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Skew X</div>
-                                                        <div class="layout-cell"><div data-montage-id="skew-x"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Skew X</div>
+                                                        <div class="cell-value"><div data-montage-id="skew-x"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Skew Y</div>
-                                                        <div class="layout-cell"><div data-montage-id="skew-y"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Skew Y</div>
+                                                        <div class="cell-value"><div data-montage-id="skew-y"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Rotation</div>
-                                                        <div class="layout-cell"><div data-montage-id="rotation"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Rotation</div>
+                                                        <div class="cell-value"><div data-montage-id="rotation"></div></div>
                                                 </div>
                                         </div>
                                         
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 2f0310a9..3bcc1401 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -311,11 +311,9 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isMainCollapsed;
         },
         set: function(newVal) {
-                if (newVal !== this._isMainCollapsed) {
-                        this.log('layer.js: isMainCollapsed: ' + newVal);
-                        this._isMainCollapsed = newVal;
-                        this.layerData.isMainCollapsed = newVal;
-                }
+                        this._isMainCollapsed = newVal;
+                        this.layerData.isMainCollapsed = newVal;
+
         }
     },
     
@@ -329,10 +327,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isTransformCollapsed;
         },
         set: function(newVal) {
-                if (newVal !== this._isTransformCollapsed) {
-                        this._isTransformCollapsed = newVal;
-                        this.layerData.isTransformCollapsed = newVal;
-                }
+                        this._isTransformCollapsed = newVal;
+                        this.layerData.isTransformCollapsed = newVal;
         }
     },
     
@@ -346,10 +342,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isPositionCollapsed;
         },
         set: function(newVal) {
-                if (newVal !== this._isPositionCollapsed) {
-                        this._isPositionCollapsed = newVal;
-                        this.layerData.isPositionCollapsed = newVal;
-                }
+                        this._isPositionCollapsed = newVal;
+                        this.layerData.isPositionCollapsed = newVal;
         }
     },
     
@@ -363,10 +357,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isStyleCollapsed;
         },
         set: function(newVal) {
-                if (newVal !== this._isStyleCollapsed) {
-                        this._isStyleCollapsed = newVal;
-                        this.layerData.isStyleCollapsed = newVal;
-                }
+                        this._isStyleCollapsed = newVal;
+                        this.layerData.isStyleCollapsed = newVal;
         }
     },
     _bypassAnimation : {
@@ -379,7 +371,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._bypassAnimation;
         },
         set: function(newVal) {
-                if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) {
+                if (typeof(this.layerData) !== "undefined") {
                         this._bypassAnimation = newVal;
                         this.layerData.bypassAnimation = newVal;        
                 }
@@ -480,31 +472,23 @@ var Layer = exports.Layer = Montage.create(Component, {
                 
                 // Initialize myself
                         this.init();
-                        var that = this;
+                        
                 // Make it editable!
                 this._layerEditable = Hintable.create();
                 this._layerEditable.element = this.titleSelector;
                 this.titleSelector.identifier = "selectorEditable";
                 this.titleSelector.addEventListener("click", this, false);
-                this._layerEditable.addEventListener("blur", function(event) {
-                        that.handleSelectorEditableBlur(event);
-                }, false);
-                this._layerEditable.addEventListener("change", function(event) {
-                                that.dynamicLayerName.value = that._layerEditable.value;
-                this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value;
-                                that.needsDraw = true;
-                this.application.ninja.documentController.activeDocument.needsSave = true;
-                }, false);
+                this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false);
+                this._layerEditable.addEventListener("change", this.handleLayerNameChange.bind(this), false);
                 this._layerEditable.editingClass = "editable2";
                 this._layerEditable.value = this.layerName;
-                //this._layerEditable.needsDraw = true;
-
+                
+                // Collapser event handlers.