CSS Panel - Support showing computed styles

4 files changed, 79 insertions, 4 deletions

diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
index 5bc34d57..bec2f449 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css
@@ -24,3 +24,10 @@
 .styles-view-toolbar-container .toolbar-container {
     border-top: 1px solid #5c5c5c;
 }
+
+/* ----- Toolbar ----*/
+
+.styles-view-container .toolbar-computed-button {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMTYyOTg1RURFNTIxMUUwQkQyRkUwNDk1QUNCRDQ2NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMTYyOTg1RkRFNTIxMUUwQkQyRkUwNDk1QUNCRDQ2NiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxNjI5ODVDREU1MjExRTBCRDJGRTA0OTVBQ0JENDY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxNjI5ODVEREU1MjExRTBCRDJGRTA0OTVBQ0JENDY2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BQa86dAAAAgdJREFUeNpiZmBgEABiFSAWAuIfQPwPKsYPZf9mIAAM9u%2Ff%2F3%2Fp0qV3oQbxFBQU5M6dO%2FcQkG0BxFz4NDNBbWP48eMHN5CSBGLhFy9eyCkpKdlOmDBhNpCvh88QkAF%2FQQw2NjZuX1%2FfxNDQ0AIREREbkJi%2Bvr7OxIkTZwGZaiAl2AxgBGLtVatW7RMVFRXDZcvBgwcnNDQ01AKZX9DlmIH417Vr186ws7NzPn78%2BNW9e%2Feevnz5kkFGRgYUiAyXLl26XFFR0QBkvoC5FpsrOIFYHIjlQX4OCgqaAgrYvr6%2B60C%2BHRBzQ73LAqVRwuA%2FEH8H4pdA%2FBCI7wO98%2FjRo0dPgE4%2FYmJi8hcalXxxcXG2QFoKOTyYsTnpPxCIiYkZRkREBL5%2B%2FfruuXPnzgKFJSorK5cpKCioHDt27BqQ%2FwnkJSYs%2Bn8DNTyFuozh7du3skBKEZRGvn37xuft7Z2Ym5sLChMlkEtYsDkAFLDMzMx%2FQBwzMzMvHR0d3d%2B%2Ff3Pw8vKCUisDMIzCgfK%2FgemkghFHzAkkJSXlxsbGNuGK2p9A4OHhoc%2BCQ%2F7LvHnz5j98%2BPCepKSk1r9%2F%2F5g%2Ff%2F4sBkxkYbKystzAVPt7ypQpIMPfEUrmHKDQhyZ3mwULFjzZsWPHTy8vrxogXxpXJOACSsAMdxro%2FwJkzYwkGMANdc0PWBSCBAECDAAwy7PLmtswugAAAABJRU5ErkJggg%3D%3D);
+
+}
\ No newline at end of file
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
index 658a8bac..9868f486 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.html
@@ -16,7 +16,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "properties" : {
                     "element" : {"#" : "container"},
                     "ruleListContainer": {"@": "ruleListContainer" },
-                    "substitution": {"@": "substitution" }
+                    "computedStyleView": {"@": "computedStyleView" },
+                    "substitution": {"@": "substitution" },
+                    "toolbar": {"@": "toolbar"}
                 }
             },
             "substitution": {
@@ -65,6 +67,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                         {
                             "title": "Add",
                             "identifier": "add"
+                        },
+                        {
+                            "title": "Computed Styles",
+                            "identifier": "computed",
+                            "leftAlign": true
                         }
                     ]
                 }
diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
index 1d6d6075..32b2c3ee 100644
--- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
+++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js
@@ -29,6 +29,7 @@ exports.StylesViewContainer = Montage.create(Component, {
     templateDidLoad : {
         value: function() {
             this.eventManager.addEventListener('styleSheetsReady', this, false);
+            //this.eventManager.addEventListener('elementChanging', this, false);
             this.eventManager.addEventListener('elementChange', this, false);
         }
     },
@@ -44,17 +45,56 @@ exports.StylesViewContainer = Montage.create(Component, {
             if(elements.length === 0) {
                 this.hasStyles = false;
                 return false;
+            } else if(elements.length === 1) {
+                if(this.contentPanel === "rules") {
+                    this.ruleListContainer.displayListForSelection(elements);
+                } else {
+                    this.computedStyleView.declaration = elements[0];
+                }
+            } else {
+
             }
 
-            this.ruleListContainer.displayListForSelection(elements);
             this.hasStyles = true;
         }
     },
     handleElementChange : {
         value: function(e) {
-            if(e._event.detail.type !== 'cssChange') {
-                this.ruleListContainer.displayedList.component.update();
+            var elements = this.application.ninja.selectedElements;
+
+            if(elements.length === 0) {
+                return false;
+            } else if(elements.length === 1) {
+                if(this.contentPanel === "rules") {
+                    if(e._event.detail.type !== 'cssChange') {
+                        this.ruleListContainer.displayedList.component.update();
+                    }
+                } else {
+                    this.computedStyleView.declaration = elements[0];
+                }
+            } else {
+                return false;
+            }
+
+        }
+    },
+
+    handleElementChanging : {
+        value: function(e) {
+            var elements = this.application.ninja.selectedElements;
+
+            if(elements.length === 1) {
+                if(this.contentPanel === "rules") {
+//                    if(e._event.detail.type !== 'cssChange') {
+//                        this.ruleListContainer.displayedList.component.update();
+//                    }
+                } else {
+                    this.computedStyleView.declaration = elements[0];
+                }
             }
+
+               return false;
+
         }
     },
 
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index ec0026a1..ccbfecad 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -49,6 +49,9 @@ exports.StylesViewMediator = Montage.create(Component, {
         }
     },
 
+    /// Toolbar Button Actions
+    /// -----------------------
+
     ///// Add rule button action
     handleAddAction : {
         value: function(e) {
@@ -82,6 +85,24 @@ exports.StylesViewMediator = Montage.create(Component, {
         }
     },
 
+    handleComputedAction : {
+        value: function(e) {
+            var container = this.ownerComponent,
+                panelToShow = (container.contentPanel === "computed") ? "rules" : "computed";
+
+            ///// Handle showing and hiding of the add button
+            if(panelToShow === "computed") {
+                container.toolbar.hideButton('add');
+            } else {
+                container.toolbar.showButton('add');
+            }
+
+            container.contentPanel = panelToShow;
+            this.ownerComponent.handleSelectionChange();
+        }
+    },
+
+
     _doesSelectorTargetElement : {
         value: function doesSelectorTargetElement(selector, element) {
             var doc = element.ownerDocument,