Style Sheets - Show dirty marker when editing media attribute

3 files changed, 20 insertions, 2 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 8639bed1..87019cad 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -1433,6 +1433,9 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 sheetEl.disabled = true;
                 this.userStyleSheets.splice(this.userStyleSheets.indexOf(sheet), 1);
 
+                ///// Make sure cached rules from this stylesheet are not used
+                this._clearCache();
+
                 ///// Check to see if we're removing the default style sheet
                 if(sheet === this._defaultStylesheet) {
                     sheetCount = this.userStyleSheets.length;
@@ -1470,6 +1473,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         }
     },
 
+    setMediaAttribute : {
+        value: function(sheet, mediaString) {
+            if(sheet.media.mediaText === mediaString) { return false; }
+
+            sheet.ownerNode.setAttribute('media', mediaString);
+
+            this._clearCache();
+
+            this.styleSheetModified(sheet);
+        }
+    },
+
     ///// Style Sheet Modified
     ///// Method to call whenever a stylesheet change is made
     ///// Dispatches an event, and keeps list of dirty style sheets
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js
index 8a8e7dbf..3a0060b2 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.js
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -202,7 +202,7 @@ exports.StyleSheet = Montage.create(Component, {
         set : function(value) {
             if(value === this._mediaText) { return; }
 
-            this._source.ownerNode.setAttribute('media', value);
+            this.application.ninja.stylesController.setMediaAttribute(this._source, value);
             
             this._mediaText = value;
 
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
index e2193ba0..a328cb65 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
@@ -96,13 +96,16 @@ exports.StyleSheetsView = Montage.create(Component, {
 
             var sheetComponent, oldDefaultSheet;
 
+            ///// Mark the appropriate component as the default, un-mark the previous default
             if(this.styleSheetList) {
                 sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)];
                 if(sheetComponent) {
                     sheetComponent['default'] = true;
                     if(this._defaultStyleSheet) {
                         oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)];
-                        oldDefaultSheet['default'] = false;
+                        if(oldDefaultSheet) {
+                            oldDefaultSheet['default'] = false;
+                        }
                     }
                 }
             }