CSS Style Declaration - Improve shorthand filtering

2 files changed, 37 insertions, 34 deletions

diff --git a/js/panels/CSSPanel/css-shorthand-map.js b/js/panels/CSSPanel/css-shorthand-map.js
index 191dbae5..d469e2a1 100755
--- a/js/panels/CSSPanel/css-shorthand-map.js
+++ b/js/panels/CSSPanel/css-shorthand-map.js
@@ -16,24 +16,24 @@ exports.CSS_SHORTHAND_MAP = {
     'background-repeat-y' : ['background', 'background-repeat'],
     
     'border-bottom' : ['border'],
-    'border-bottom-color' : ['border', 'border-bottom'],
-    'border-bottom-style' : ['border', 'border-bottom'],
-    'border-bottom-width' : ['border', 'border-bottom'],
+    'border-bottom-color' : ['border-bottom'],
+    'border-bottom-style' : ['border-bottom'],
+    'border-bottom-width' : ['border-bottom'],
     
     'border-left' : ['border'],
-    'border-left-color' : ['border', 'border-left'],
-    'border-left-style' : ['border', 'border-left'],
-    'border-left-width' : ['border', 'border-left'],
+    'border-left-color' : ['border-left'],
+    'border-left-style' : ['border-left'],
+    'border-left-width' : ['border-left'],
     
     'border-right' : ['border'],
-    'border-right-color' : ['border', 'border-right'],
-    'border-right-style' : ['border', 'border-right'],
-    'border-right-width' : ['border', 'border-right'],
+    'border-right-color' : ['border-right'],
+    'border-right-style' : ['border-right'],
+    'border-right-width' : ['border-right'],
     
     'border-top' : ['border'],
-    'border-top-color' : ['border', 'border-top'],
-    'border-top-style' : ['border', 'border-top'],
-    'border-top-width' : ['border', 'border-top'],
+    'border-top-color' : ['border-top'],
+    'border-top-style' : ['border-top'],
+    'border-top-width' : ['border-top'],
     
     'border-color' : ['border'],
     'border-style' : ['border'],
@@ -79,9 +79,12 @@ exports.CSS_SHORTHAND_TO_SUBPROP_MAP = {
     'background' : ["background-image", "background-repeat-x", "background-repeat-y", "background-attachment",
                     "background-position-x", "background-position-y", "background-origin", "background-clip",
                     "background-color"],
-    'border' : ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width",
-                "border-top-style", "border-right-style", "border-bottom-style", "border-left-style",
-                "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-image"],
+    'border' : ['border-width', 'border-style', 'border-color'],
+    'border-top' : ['border-top-width', 'border-top-style', 'border-top-color'],
+    'border-right' : ['border-right-width', 'border-right-style', 'border-right-color'],
+    'border-bottom' : ['border-bottom-width', 'border-bottom-style', 'border-bottom-color'],
+    'border-left' : ['border-left-width', 'border-left-style', 'border-left-color'],
+    'border-image' : ['border-image-outset', 'border-image-repeat','border-image-slice', 'border-image-source', 'border-image-width'],
     'border-radius' : ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius",
                        "border-bottom-left-radius"],
     'font' : ["font-family", "font-size", "font-style", "font-variant", "font-weight", "line-height"],
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
index 711879ce..57cbdb63 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -84,8 +84,7 @@ exports.StyleDeclaration = Montage.create(Component, {
             ///// Take snapshot of declaration
             this.cssText = dec.cssText;
 
-            stylesArray = Array.prototype.slice.call(dec);
-
+            stylesArray = this.filterShorthands(Array.prototype.slice.call(dec));
             stylesArray.forEach(function(prop, index) {
                 this.styles.push({
                     name: prop,
@@ -107,28 +106,32 @@ exports.StyleDeclaration = Montage.create(Component, {
         }
     },
 
-    styleShorthander : {
+    filterShorthands : {
         value: function(styles) {
             var shorthandsToAdd = [],
                 subProps, hasAll;
 
-            styles.forEach(function(property, index, styleArray) {
-                var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];
+            var stylesCopy = styles.map(function(style) {
+                return style;
+            });
 
-                if(!shorthands) { return false; }
+            stylesCopy.forEach(function(property, index) {
+                var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];
+                if(shorthands) {
+                    subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
 
-                var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]],
-                    stylesArray = styleArray;
+                    hasAll = subProps.every(function(subProp) {
+                        return styles.indexOf(subProp) !== -1;
+                    });
 
-                hasAll = subProps.every(function(subProp) {
-                    return stylesArray.indexOf(subProp) !== -1;
-                });
+                    if(hasAll) {
+                        for(var i = subProps.length-1; i>=0; i--) {
+                            styles.splice(styles.indexOf(subProps[i]), 1);
+                        }
+                        shorthandsToAdd.push(shorthands[0]);
+                    }
 
-                if(hasAll) {
-                    subProps.forEach(function(subProp) {
-                        stylesArray.splice(stylesArray.indexOf(subProp), 1);
-                    }, this);
-                    shorthandsToAdd.push(shorthands[0]);
+                    return true;
                 }
             }, this);
 
@@ -227,8 +230,6 @@ exports.StyleDeclaration = Montage.create(Component, {
                 isEmpty: false
             }, prop;
 
-            console.log('adding "'+ property+'" with value "' + value + '"');
-
             for(prop in data) {
                 if(data.hasOwnProperty(prop)) {
                     styleDescriptor[prop] = data[prop];
@@ -244,7 +245,6 @@ exports.StyleDeclaration = Montage.create(Component, {
     removeStyle : {
         value: function(styleDescriptor) {
             var styleDescriptorIndex = this.styles.indexOf(styleDescriptor);
-console.log("removing style", styleDescriptor);
             //this.styles.splice(styleDescriptorIndex, 1);
             this.arrayController.removeObjects(styleDescriptor);