6 files changed, 87 insertions, 11 deletions
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
index 53c243a8..b994c5c2 100755
--- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
@@ -25,8 +25,8 @@
        </script>
 </head>
-<body id="computestylesubpanel" onload="">
+<body>
-        <div id="nj-css-panel-computed" class="nj-css-panel-hide">
+        <div data-montage-id="nj-css-panel-computed" class="nj-css-panel-computed">
                <div id="nj-css-filter-panel">
                        <input id="nj-css-filter" class="nj-skinned" type="search">
                        <select id="nj-css-group-select" class="nj-skinned">
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
index e9af9b88..9f0043f4 100755
--- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
@@ -12,12 +12,13 @@
    padding: 8px 0;
    position: relative;
 }
-#nj-computed-sub-panel {
+.nj-css-panel-computed {
    display:-webkit-box;
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
 }
-#nj-computed-sub-panel .nj-sub-panel {
+/*#nj-computed-sub-panel .nj-sub-panel {*/
+.sub-panel-slot .nj-sub-panel {
    -webkit-box-flex: 1;
    background-color: #474747;
    color: #FFF;
@@ -53,10 +54,10 @@
 #nj-css-computed-list {
    margin-top: 7px;
 }
+#nj-css-computed-list dt, #nj-css-computed-list dd {
+    cursor: default;
+}
 #nj-css-computed-list dt {
    color: #FFF;
    width: 55%;
 }
-#nj-computed-sub-panel.nj-css-panel-hide {
-    display: none;
-}
-\ No newline at end of file
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') {
+            var elements = this.application.ninja.selectedElements;
-                this.ruleListContainer.displayedList.component.update();
+            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, {
        }
    },

diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html index 53c243a8..b994c5c2 100755 --- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html +++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.html
@@ -25,8 +25,8 @@
25	</script>	25	</script>
26		26
27	</head>	27	</head>
28	<body id="computestylesubpanel" onload="">	28	<body>
29	<div id="nj-css-panel-computed" class="nj-css-panel-hide">	29	<div data-montage-id="nj-css-panel-computed" class="nj-css-panel-computed">
30	<div id="nj-css-filter-panel">	30	<div id="nj-css-filter-panel">
31	<input id="nj-css-filter" class="nj-skinned" type="search">	31	<input id="nj-css-filter" class="nj-skinned" type="search">
32	<select id="nj-css-group-select" class="nj-skinned">	32	<select id="nj-css-group-select" class="nj-skinned">


diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css index e9af9b88..9f0043f4 100755 --- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css +++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/computed-style-sub-panel.css
@@ -12,12 +12,13 @@
12	padding: 8px 0;	12	padding: 8px 0;
13	position: relative;	13	position: relative;
14	}	14	}
15	#nj-computed-sub-panel {	15	.nj-css-panel-computed {
16	display:-webkit-box;	16	display:-webkit-box;
17	-webkit-box-flex: 1;	17	-webkit-box-flex: 1;
18	-webkit-box-orient: vertical;	18	-webkit-box-orient: vertical;
19	}	19	}
20	#nj-computed-sub-panel .nj-sub-panel {	20	/#nj-computed-sub-panel .nj-sub-panel {/
		21	.sub-panel-slot .nj-sub-panel {
21	-webkit-box-flex: 1;	22	-webkit-box-flex: 1;
22	background-color: #474747;	23	background-color: #474747;
23	color: #FFF;	24	color: #FFF;
@@ -53,10 +54,10 @@
53	#nj-css-computed-list {	54	#nj-css-computed-list {
54	margin-top: 7px;	55	margin-top: 7px;
55	}	56	}
		57	#nj-css-computed-list dt, #nj-css-computed-list dd {
		58	cursor: default;
		59	}
56	#nj-css-computed-list dt {	60	#nj-css-computed-list dt {
57	color: #FFF;	61	color: #FFF;
58	width: 55%;	62	width: 55%;
59	}	63	}
60	#nj-computed-sub-panel.nj-css-panel-hide {
61	display: none;
62	} \ No newline at end of file


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 @@
24	.styles-view-toolbar-container .toolbar-container {	24	.styles-view-toolbar-container .toolbar-container {
25	border-top: 1px solid #5c5c5c;	25	border-top: 1px solid #5c5c5c;
26	}	26	}
		27
		28	/* ----- Toolbar ----*/
		29
		30	.styles-view-container .toolbar-computed-button {
		31	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);
		32
		33	} \ 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
16	"properties" : {	16	"properties" : {
17	"element" : {"#" : "container"},	17	"element" : {"#" : "container"},
18	"ruleListContainer": {"@": "ruleListContainer" },	18	"ruleListContainer": {"@": "ruleListContainer" },
19	"substitution": {"@": "substitution" }	19	"computedStyleView": {"@": "computedStyleView" },
		20	"substitution": {"@": "substitution" },
		21	"toolbar": {"@": "toolbar"}
20	}	22	}
21	},	23	},
22	"substitution": {	24	"substitution": {
@@ -65,6 +67,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
65	{	67	{
66	"title": "Add",	68	"title": "Add",
67	"identifier": "add"	69	"identifier": "add"
		70	},
		71	{
		72	"title": "Computed Styles",
		73	"identifier": "computed",
		74	"leftAlign": true
68	}	75	}
69	]	76	]
70	}	77	}


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, {
29	templateDidLoad : {	29	templateDidLoad : {
30	value: function() {	30	value: function() {
31	this.eventManager.addEventListener('styleSheetsReady', this, false);	31	this.eventManager.addEventListener('styleSheetsReady', this, false);
		32	//this.eventManager.addEventListener('elementChanging', this, false);
32	this.eventManager.addEventListener('elementChange', this, false);	33	this.eventManager.addEventListener('elementChange', this, false);
33	}	34	}
34	},	35	},
@@ -44,17 +45,56 @@ exports.StylesViewContainer = Montage.create(Component, {
44	if(elements.length === 0) {	45	if(elements.length === 0) {
45	this.hasStyles = false;	46	this.hasStyles = false;
46	return false;	47	return false;
		48	} else if(elements.length === 1) {
		49	if(this.contentPanel === "rules") {
		50	this.ruleListContainer.displayListForSelection(elements);
		51	} else {
		52	this.computedStyleView.declaration = elements[0];
		53	}
		54	} else {
		55
47	}	56	}
48		57
49	this.ruleListContainer.displayListForSelection(elements);
50	this.hasStyles = true;	58	this.hasStyles = true;
51	}	59	}
52	},	60	},
53	handleElementChange : {	61	handleElementChange : {
54	value: function(e) {	62	value: function(e) {
55	if(e._event.detail.type !== 'cssChange') {	63	var elements = this.application.ninja.selectedElements;
56	this.ruleListContainer.displayedList.component.update();	64
		65	if(elements.length === 0) {
		66	return false;
		67	} else if(elements.length === 1) {
		68	if(this.contentPanel === "rules") {
		69	if(e._event.detail.type !== 'cssChange') {
		70	this.ruleListContainer.displayedList.component.update();
		71	}
		72	} else {
		73	this.computedStyleView.declaration = elements[0];
		74	}
		75	} else {
		76	return false;
		77	}
		78
		79	}
		80	},
		81
		82	handleElementChanging : {
		83	value: function(e) {
		84	var elements = this.application.ninja.selectedElements;
		85
		86	if(elements.length === 1) {
		87	if(this.contentPanel === "rules") {
		88	// if(e._event.detail.type !== 'cssChange') {
		89	// this.ruleListContainer.displayedList.component.update();
		90	// }
		91	} else {
		92	this.computedStyleView.declaration = elements[0];
		93	}
57	}	94	}
		95
		96	return false;
		97
58	}	98	}
59	},	99	},
60		100


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, {
49	}	49	}
50	},	50	},
51		51