3 files changed, 141 insertions, 0 deletions
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css
new file mode 100644
index 00000000..0f744511
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -0,0 +1,26 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+.rule-list-container {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-box-flex: 1;
+}
+.rule-list {
+    background-color: #FFF;
+    background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px);
+    color: #333;
+    display: -webkit-box;
+    font-family: monospace;
+    padding: 0;
+    margin: 0;
+    overflow-y: auto;
+    -webkit-box-orient: vertical;
+    -webkit-box-flex: 1;
+}
+.rule-list li {
+    list-style-type: none;
+    margin: 0;
+}
+\ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html
new file mode 100644
index 00000000..c11e488d
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> -->
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="rule-list.css" type="text/css" rel="stylesheet">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/css-panel/rule-list.reel",
+                "name" : "RuleList",
+                "properties" : {
+                    "element" : {"#" : "rule-list"}
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+<ul id="rule-list" class="rule-list"></ul>
+</body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js
new file mode 100644
index 00000000..44d6d864
--- /dev/null
+++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -0,0 +1,89 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+exports.RuleList = Montage.create(Component, {
+    hasTemplate: {
+        value: true
+    },
+    listElement : {
+        value: null
+    },
+    _rules: {
+        value: null
+    },
+    rules: {
+        get: function() {
+            return this._rules;
+        },
+        set: function(list) {
+            if(!list) {
+                return null;
+            }
+            //debugger;
+            console.log('list: ', list);
+            this._rules = list;
+            this.needsDraw = true;
+            this._needsAppend = true;
+        }
+    },
+    templateDidLoad : {
+        value: function() {
+            console.log("Rule List : template did load");
+            //this.condition = true;
+            this.needsDraw = true;
+            //debugger;
+        }
+    },
+    prepareForDraw : {
+        value: function() {
+            console.log("Rule List : prepare for draw");
+        }
+    },
+    draw : {
+        value: function() {
+            console.log("Rule List - Draw");
+            if(this._needsAppend) {
+                this._rules.forEach(function(rule) {
+                    var componentBase = this.supportedRules[rule.type],
+                        instance, el;
+                    if(componentBase) {
+                        el = document.createElement(this.ruleNodeName);
+                        instance = Montage.create(componentBase);
+                        instance.element = el;
+                        instance.rule = rule;
+                        this.element.appendChild(instance.element);
+                        instance.needsDraw = true;
+                    }
+                }, this);
+            }
+            console.log("Rule List : draw");
+        }
+    },
+    _createRuleComponent: {
+        value: function(ruleType) {
+        }
+    },
+    ruleNodeName : {
+        value: 'li'
+    },
+    ruleComponents : {
+        value: {
+            "1"  : 'css-style-rule',
+            "3"  : 'css-import-rule',
+            "4"  : 'css-media-rule',
+            "5"  : 'css-font-face-rule',
+            "6"  : 'css-page-rule',
+            "10" : 'namespace-rule'
+        }
+    }
+});

diff --git a/js/panels/css-panel/rule-list.reel/rule-list.css b/js/panels/css-panel/rule-list.reel/rule-list.css new file mode 100644 index 00000000..0f744511 --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.css
@@ -0,0 +1,26 @@
	1	/* <copyright>
	2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	5	</copyright> */
	6	.rule-list-container {
	7	display: -webkit-box;
	8	-webkit-box-orient: vertical;
	9	-webkit-box-flex: 1;
	10	}
	11	.rule-list {
	12	background-color: #FFF;
	13	background: #FFF -webkit-linear-gradient(top, rgba(0,0,0,0.12) 0%,rgba(0,0,0,0) 4px);
	14	color: #333;
	15	display: -webkit-box;
	16	font-family: monospace;
	17	padding: 0;
	18	margin: 0;
	19	overflow-y: auto;
	20	-webkit-box-orient: vertical;
	21	-webkit-box-flex: 1;
	22	}
	23	.rule-list li {
	24	list-style-type: none;
	25	margin: 0;
	26	} \ No newline at end of file


diff --git a/js/panels/css-panel/rule-list.reel/rule-list.html b/js/panels/css-panel/rule-list.reel/rule-list.html new file mode 100644 index 00000000..c11e488d --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.html
@@ -0,0 +1,26 @@
	1	<!DOCTYPE html>
	2	<!-- <copyright>
	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	6	</copyright> -->
	7	<html lang="en">
	8	<head>
	9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	10	<link href="rule-list.css" type="text/css" rel="stylesheet">
	11	<script type="text/montage-serialization">
	12	{
	13	"owner": {
	14	"module" : "js/panels/css-panel/rule-list.reel",
	15	"name" : "RuleList",
	16	"properties" : {
	17	"element" : {"#" : "rule-list"}
	18	}
	19	}
	20	}
	21	</script>
	22	</head>
	23	<body>
	24	<ul id="rule-list" class="rule-list"></ul>
	25	</body>
	26	</html> \ No newline at end of file


diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js new file mode 100644 index 00000000..44d6d864 --- /dev/null +++ b/js/panels/css-panel/rule-list.reel/rule-list.js
@@ -0,0 +1,89 @@
	1	/* <copyright>
	2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	5	</copyright> */
	6
	7	var Montage = require("montage/core/core").Montage,
	8	Component = require("montage/ui/component").Component;
	9
	10	exports.RuleList = Montage.create(Component, {
	11	hasTemplate: {
	12	value: true
	13	},
	14	listElement : {
	15	value: null
	16	},
	17	_rules: {
	18	value: null
	19	},
	20	rules: {
	21	get: function() {
	22	return this._rules;
	23	},
	24	set: function(list) {
	25	if(!list) {
	26	return null;
	27	}
	28	//debugger;
	29	console.log('list: ', list);
	30	this._rules = list;
	31	this.needsDraw = true;
	32	this._needsAppend = true;
	33	}
	34	},
	35	templateDidLoad : {
	36	value: function() {
	37	console.log("Rule List : template did load");
	38	//this.condition = true;
	39	this.needsDraw = true;
	40	//debugger;
	41	}
	42	},
	43	prepareForDraw : {
	44	value: function() {
	45	console.log("Rule List : prepare for draw");
	46	}
	47	},
	48	draw : {
	49	value: function() {
	50	console.log("Rule List - Draw");
	51	if(this._needsAppend) {
	52	this._rules.forEach(function(rule) {
	53	var componentBase = this.supportedRules[rule.type],
	54	instance, el;
	55
	56	if(componentBase) {
	57	el = document.createElement(this.ruleNodeName);
	58	instance = Montage.create(componentBase);
	59	instance.element = el;
	60	instance.rule = rule;
	61	this.element.appendChild(instance.element);
	62	instance.needsDraw = true;
	63	}
	64
	65
	66	}, this);
	67	}
	68	console.log("Rule List : draw");
	69	}
	70	},
	71	_createRuleComponent: {
	72	value: function(ruleType) {
	73
	74	}
	75	},
	76	ruleNodeName : {
	77	value: 'li'
	78	},
	79	ruleComponents : {
	80	value: {
	81	"1" : 'css-style-rule',
	82	"3" : 'css-import-rule',
	83	"4" : 'css-media-rule',
	84	"5" : 'css-font-face-rule',
	85	"6" : 'css-page-rule',
	86	"10" : 'namespace-rule'
	87	}
	88	}
	89	});