Skip to content
This repository
Browse code

code refactored: use a worker to generate the output, attach click ha…

…ndler to document.body
  • Loading branch information...
commit e5bf5b5d772ec2cd687793f53e37284cf68b94d8 1 parent 4b52cd3
Gildas Lormeau authored October 19, 2011
26  WebContent/background.js
... ...
@@ -1,9 +1,29 @@
1 1
 chrome.extension.onConnect.addListener(function(port) {
2 2
 	port.onMessage.addListener(function(msg) {
  3
+		var worker;
  4
+
  5
+		function onWorkerMessage(event) {
  6
+			var msg = event.data;
  7
+			worker.removeEventListener("message", onmessage, false);
  8
+			worker.terminate();
  9
+			port.postMessage({
  10
+				onjsonToHTML : true,
  11
+				data : msg.data
  12
+			});
  13
+		}
  14
+
3 15
 		if (msg.init)
4  
-			port.postMessage( {
5  
-				init : true,
  16
+			port.postMessage({
  17
+				oninit : true,
6 18
 				options : localStorage.options ? JSON.parse(localStorage.options) : {}
7 19
 			});
  20
+		if (msg.jsonToHTML) {
  21
+			worker = new Worker("worker.js");
  22
+			worker.addEventListener("message", onWorkerMessage, false);
  23
+			worker.postMessage({
  24
+				parsedObject : msg.parsedObject,
  25
+				fnName : msg.fnName
  26
+			});
  27
+		}
8 28
 	});
9  
-});
  29
+});
151  WebContent/content.js
... ...
@@ -1,112 +1,8 @@
1  
-function JSONFormatter() {
2  
-}
3  
-JSONFormatter.prototype = {
4  
-	htmlEncode : function(t) {
5  
-		return t != null ? t.toString().replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;") : '';
6  
-	},
7  
-
8  
-	decorateWithSpan : function(value, className) {
9  
-		return '<span class="' + className + '">' + this.htmlEncode(value) + '</span>';
10  
-	},
11  
-
12  
-	valueToHTML : function(value) {
13  
-		var valueType = typeof value, output = "";
14  
-		if (value == null) {
15  
-			output += this.decorateWithSpan('null', 'null');
16  
-		} else if (value && value.constructor == Array) {
17  
-			output += this.arrayToHTML(value);
18  
-		} else if (valueType == 'object') {
19  
-			output += this.objectToHTML(value);
20  
-		} else if (valueType == 'number') {
21  
-			output += this.decorateWithSpan(value, 'num');
22  
-		} else if (valueType == 'string') {
23  
-			if (/^(http|https):\/\/[^\s]+$/.test(value)) {
24  
-				output += this.decorateWithSpan('"', 'string') + '<a href="' + value + '">' + this.htmlEncode(value) + '</a>'
25  
-						+ this.decorateWithSpan('"', 'string');
26  
-			} else {
27  
-				output += this.decorateWithSpan('"' + value + '"', 'string');
28  
-			}
29  
-		} else if (valueType == 'boolean') {
30  
-			output += this.decorateWithSpan(value, 'bool');
31  
-		}
32  
-
33  
-		return output;
34  
-	},
35  
-
36  
-	arrayToHTML : function(json) {
37  
-		var prop, output = '[<ul class="array collapsible">', hasContents = false;
38  
-		for (prop in json) {
39  
-			hasContents = true;
40  
-			output += '<li>';
41  
-			output += this.valueToHTML(json[prop]);
42  
-			output += '</li>';
43  
-		}
44  
-		output += '</ul>]';
45  
-
46  
-		if (!hasContents) {
47  
-			output = "[ ]";
48  
-		}
49  
-
50  
-		return output;
51  
-	},
52  
-
53  
-	objectToHTML : function(json) {
54  
-		var prop, output = '{<ul class="obj collapsible">', hasContents = false;
55  
-		for (prop in json) {
56  
-			hasContents = true;
57  
-			output += '<li>';
58  
-			output += '<span class="prop">' + this.htmlEncode(prop) + '</span>: ';
59  
-			output += this.valueToHTML(json[prop]);
60  
-			output += '</li>';
61  
-		}
62  
-		output += '</ul>}';
63  
-
64  
-		if (!hasContents) {
65  
-			output = "{ }";
66  
-		}
67  
-
68  
-		return output;
69  
-	},
70  
-
71  
-	jsonToHTML : function(json, fnName) {
72  
-		var output = '';
73  
-		if (fnName)
74  
-			output += '<div class="fn">' + fnName + '(</div>';
75  
-		output += '<div id="json">';
76  
-		output += this.valueToHTML(json);
77  
-		output += '</div>';
78  
-		if (fnName)
79  
-			output += '<div class="fn">)</div>';
80  
-		return output;
81  
-	}
82  
-};
83  
-
84  
-/**
85  
- * Click handler for collapsing and expanding objects and arrays
86  
- * 
87  
- * @param {Event} evt
88  
- */
89  
-function collapse(evt) {
90  
-	var ellipsis, collapser = evt.target, target = collapser.parentNode.getElementsByClassName('collapsible')[0];
91  
-	if (!target)
92  
-		return;
93  
-
94  
-	if (target.style.display == 'none') {
95  
-		ellipsis = target.parentNode.getElementsByClassName('ellipsis')[0];
96  
-		target.parentNode.removeChild(ellipsis);
97  
-		target.style.display = '';
98  
-	} else {
99  
-		target.style.display = 'none';
100  
-		ellipsis = document.createElement('span');
101  
-		ellipsis.className = 'ellipsis';
102  
-		ellipsis.innerHTML = ' &hellip; ';
103  
-		target.parentNode.insertBefore(ellipsis, target);
104  
-	}
105  
-	collapser.innerHTML = (collapser.innerHTML == '-') ? '+' : '-';
106  
-}
  1
+var port = chrome.extension.connect();
107 2
 
108 3
 function displayObject(jsonText, fnName) {
109  
-	var parsedObject, errorBox, closeBox;
  4
+	var parsedObject, errorBox, closeBox, worker;
  5
+
110 6
 	if (!jsonText)
111 7
 		return;
112 8
 	try {
@@ -136,17 +32,10 @@ function displayObject(jsonText, fnName) {
136 32
 		}
137 33
 		return;
138 34
 	}
139  
-	document.body.innerHTML = '<link rel="stylesheet" type="text/css" href="' + chrome.extension.getURL("content.css") + '">'
140  
-			+ new JSONFormatter().jsonToHTML(parsedObject, fnName);
141  
-	Array.prototype.forEach.call(document.getElementsByClassName('collapsible'), function(childItem) {
142  
-		var collapser, item = childItem.parentNode;
143  
-		if (item.nodeName == 'LI') {
144  
-			collapser = document.createElement('div');
145  
-			collapser.className = 'collapser';
146  
-			collapser.innerHTML = '-';
147  
-			collapser.addEventListener('click', collapse, false);
148  
-			item.insertBefore(collapser, item.firstChild);
149  
-		}
  35
+	port.postMessage({
  36
+		jsonToHTML : true,
  37
+		parsedObject : parsedObject,
  38
+		fnName : fnName
150 39
 	});
151 40
 }
152 41
 
@@ -182,10 +71,30 @@ function processData(data, options) {
182 71
 }
183 72
 
184 73
 function init(data) {
185  
-	var port = chrome.extension.connect();
186 74
 	port.onMessage.addListener(function(msg) {
187  
-		if (msg.init)
  75
+		if (msg.oninit)
188 76
 			processData(data, msg.options);
  77
+		if (msg.onjsonToHTML) {
  78
+			document.body.innerHTML = '<link rel="stylesheet" type="text/css" href="' + chrome.extension.getURL("content.css") + '">' + msg.data;
  79
+			document.body.addEventListener('click', function(event) {
  80
+				var ellipsis, collapsed, target = event.target;
  81
+				if (event.target.className == 'collapser') {
  82
+					collapsed = target.parentNode.getElementsByClassName('collapsible')[0];
  83
+					if (collapsed.style.display == 'none') {
  84
+						ellipsis = collapsed.parentNode.getElementsByClassName('ellipsis')[0];
  85
+						collapsed.parentNode.removeChild(ellipsis);
  86
+						collapsed.style.display = '';
  87
+					} else {
  88
+						collapsed.style.display = 'none';
  89
+						ellipsis = document.createElement('span');
  90
+						ellipsis.className = 'ellipsis';
  91
+						ellipsis.innerHTML = ' &hellip; ';
  92
+						collapsed.parentNode.insertBefore(ellipsis, collapsed);
  93
+					}
  94
+					target.innerHTML = (target.innerHTML == '-') ? '+' : '-';
  95
+				}
  96
+			}, false);
  97
+		}
189 98
 	});
190 99
 	port.postMessage({
191 100
 		init : true
@@ -202,4 +111,4 @@ function load() {
202 111
 	}
203 112
 }
204 113
 
205  
-load();
  114
+load();
89  WebContent/worker.js
... ...
@@ -0,0 +1,89 @@
  1
+function JSONFormatter() {
  2
+}
  3
+JSONFormatter.prototype = {
  4
+	htmlEncode : function(t) {
  5
+		return t != null ? t.toString().replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;") : '';
  6
+	},
  7
+
  8
+	decorateWithSpan : function(value, className) {
  9
+		return '<span class="' + className + '">' + this.htmlEncode(value) + '</span>';
  10
+	},
  11
+
  12
+	valueToHTML : function(value) {
  13
+		var valueType = typeof value, output = "";
  14
+		if (value == null) {
  15
+			output += this.decorateWithSpan('null', 'null');
  16
+		} else if (value && value.constructor == Array) {
  17
+			output += this.arrayToHTML(value);
  18
+		} else if (valueType == 'object') {
  19
+			output += this.objectToHTML(value);
  20
+		} else if (valueType == 'number') {
  21
+			output += this.decorateWithSpan(value, 'num');
  22
+		} else if (valueType == 'string') {
  23
+			if (/^(http|https):\/\/[^\s]+$/.test(value)) {
  24
+				output += this.decorateWithSpan('"', 'string') + '<a href="' + value + '">' + this.htmlEncode(value) + '</a>'
  25
+						+ this.decorateWithSpan('"', 'string');
  26
+			} else {
  27
+				output += this.decorateWithSpan('"' + value + '"', 'string');
  28
+			}
  29
+		} else if (valueType == 'boolean') {
  30
+			output += this.decorateWithSpan(value, 'bool');
  31
+		}
  32
+
  33
+		return output;
  34
+	},
  35
+
  36
+	arrayToHTML : function(json) {
  37
+		var prop, output = '<div class="collapser">-</div>[<ul class="array collapsible">', hasContents = false;
  38
+		for (prop in json) {
  39
+			hasContents = true;
  40
+			output += '<li>';
  41
+			output += this.valueToHTML(json[prop]);
  42
+			output += '</li>';
  43
+		}
  44
+		output += '</ul>]';
  45
+
  46
+		if (!hasContents) {
  47
+			output = "[ ]";
  48
+		}
  49
+
  50
+		return output;
  51
+	},
  52
+
  53
+	objectToHTML : function(json) {
  54
+		var prop, output = '<div class="collapser">-</div>{<ul class="obj collapsible">', hasContents = false;
  55
+		for (prop in json) {
  56
+			hasContents = true;
  57
+			output += '<li>';
  58
+			output += '<span class="prop">' + this.htmlEncode(prop) + '</span>: ';
  59
+			output += this.valueToHTML(json[prop]);
  60
+			output += '</li>';
  61
+		}
  62
+		output += '</ul>}';
  63
+
  64
+		if (!hasContents) {
  65
+			output = "{ }";
  66
+		}
  67
+
  68
+		return output;
  69
+	},
  70
+
  71
+	jsonToHTML : function(json, fnName) {
  72
+		var output = '';
  73
+		if (fnName)
  74
+			output += '<div class="fn">' + fnName + '(</div>';
  75
+		output += '<div id="json">';
  76
+		output += this.valueToHTML(json);
  77
+		output += '</div>';
  78
+		if (fnName)
  79
+			output += '<div class="fn">)</div>';
  80
+		return output;
  81
+	}
  82
+};
  83
+
  84
+addEventListener("message", function(event) {
  85
+	postMessage({
  86
+		onjsonToHTML : true,
  87
+		data : (new JSONFormatter()).jsonToHTML(event.data.parsedObject, event.data.fnName)
  88
+	});
  89
+}, false);

0 notes on commit e5bf5b5

Please sign in to comment.
Something went wrong with that request. Please try again.