1 var webdeveloper_lastCommentShown
= null;
3 // Clears the comments from the page
4 function webdeveloper_clearComments(pageDocument
)
7 var commentDivList
= webdeveloper_evaluateXPath(pageDocument
, "//div[@class='webdeveloper-comment-icon'] | //div[@class='webdeveloper-comment-text']");
8 var commentDivsLength
= commentDivList
.length
;
10 webdeveloper_lastCommentShown
= null;
12 // Loop through the comment divs
13 for(var i
= 0; i
< commentDivsLength
; i
++)
15 webdeveloper_removeElement(commentDivList
[i
]);
19 // Shows the comment text
20 function webdeveloper_showCommentText(event
)
22 var target
= event
.target
;
24 // If there is an event target
27 var currentDocument
= webdeveloper_getContentDocument();
28 var lastCommentElement
= null;
29 var targetComment
= target
.id
.replace(new RegExp("icon", "gi"), "text");
30 var targetCommentElement
= currentDocument
.getElementById(targetComment
);
32 // If this is not the last comment shown
33 if(webdeveloper_lastCommentShown
&& webdeveloper_lastCommentShown
!= targetComment
)
35 lastCommentElement
= currentDocument
.getElementById(webdeveloper_lastCommentShown
);
37 // If the last comment element exists
38 if(lastCommentElement
)
40 lastCommentElement
.style
.display
= "none";
44 // If the element is currently hidden
45 if(targetCommentElement
.style
.display
== "none")
47 targetCommentElement
.style
.display
= "block";
51 targetCommentElement
.style
.display
= "none";
54 webdeveloper_lastCommentShown
= targetComment
;
59 function webdeveloper_toggleComments(element
)
61 var documentList
= webdeveloper_getDocuments(webdeveloper_getContentWindow());
62 var documentLength
= documentList
.length
;
63 var show
= element
.getAttribute("checked");
65 // Loop through the documents
66 for(var i
= 0; i
< documentLength
; i
++)
68 webdeveloper_toggleCommentsForDocument(documentList
[i
], show
);
71 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/show_comments.css", "webdeveloper-show-comments");
72 webdeveloper_toggleFeatureTooltipStyles(element
, "webdeveloper-show-comments-tooltips", "div.webdeveloper-comment-icon, div.webdeveloper-comment-text, div.webdeveloper-comment-text *");
75 // Toggles the comments for a document
76 function webdeveloper_toggleCommentsForDocument(pageDocument
, show
)
78 var bodyElement
= webdeveloper_getDocumentBodyElement(pageDocument
);
79 var bodyOffsetWidth
= bodyElement
.offsetWidth
;
81 var commentsLength
= 0;
82 var commentsList
= new Array();
83 var parentElement
= null;
84 var treeWalker
= pageDocument
.createTreeWalker(pageDocument
, NodeFilter
.SHOW_COMMENT
, null, false);
86 webdeveloper_lastCommentShown
= null;
88 // While the tree walker has more nodes
89 while((comment
= treeWalker
.nextNode()) != null)
91 commentsList
.push(comment
);
94 // Remove XML declaration
95 if(commentsList
.length
> 0 && commentsList
[0].nodeValue
.indexOf("encoding") != -1)
101 if(commentsList
.length
> 0 && commentsList
[0].nodeValue
.indexOf("DOCTYPE") != -1)
103 commentsList
.shift();
106 commentsLength
= commentsList
.length
;
108 // If showing comments
111 var commentDiv
= null;
112 var commentIconDiv
= null;
114 var commentParent
= null;
115 var commentParentOffsetLeft
= 0;
116 var commentParentOffsetTop
= 0;
117 var commentText
= null;
121 // Loop through the comments
122 for(var i
= 0; i
< commentsLength
; i
++)
124 comment
= commentsList
[i
];
126 commentParent
= comment
.parentNode
;
127 commentText
= comment
.nodeValue
;
130 commentText
= commentText
.replace(new RegExp("<!--[\s]*", "gi"), "");
131 commentText
= commentText
.replace(new RegExp("[\s]*-->", "gi"), "");
132 commentText
= commentText
.replace(new RegExp("<([^\/][^>]*)class=\"[^\"]*\">", "gi"), "<$1>");
133 commentText
= commentText
.replace(new RegExp("<([^\/][^>]*)class=[^ >]*>", "gi"), "<$1>");
135 // While the comment has a parent
138 // If the parent node is not a document node or a table row
139 if(commentParent
.nodeType
!= Node
.DOCUMENT_NODE
&& commentParent
.tagName
&& commentParent
.tagName
.toLowerCase() != "tr")
141 commentParentOffsetLeft
= commentParent
.offsetLeft
;
142 commentParentOffsetTop
= commentParent
.offsetTop
;
144 // If the parent node has a left offset
145 if(commentParentOffsetLeft
)
147 commentLeft
+= commentParentOffsetLeft
;
150 // If the parent node has a top offset
151 if(commentParentOffsetTop
)
153 commentTop
+= commentParentOffsetTop
;
157 commentParent
= commentParent
.parentNode
;
160 // If the comment left offset is 0
165 else if(commentLeft
+ iconSize
> bodyOffsetWidth
)
167 commentLeft
= bodyOffsetWidth
;
170 // If the comment top offset is 0
176 // If this is not the first comment
179 // Loop through previous comments
180 for(var j
= 0; j
< i
; j
++)
182 // If the top off set of a previous comment matches this comment
183 if(parseInt(pageDocument
.getElementById("webdeveloper-comment-icon" + j
).style
.top
) == commentTop
)
185 commentTop
+= iconSize
;
190 commentIconDiv
= pageDocument
.createElement("div");
191 commentIconDiv
.style
.left
= commentLeft
+ "px";
192 commentIconDiv
.style
.top
= commentTop
+ "px";
194 commentIconDiv
.addEventListener("click", webdeveloper_showCommentText
, false);
195 commentIconDiv
.appendChild(pageDocument
.createTextNode("!"));
196 commentIconDiv
.setAttribute("class", "webdeveloper-comment-icon");
197 commentIconDiv
.setAttribute("id", "webdeveloper-comment-icon" + i
);
199 bodyElement
.appendChild(commentIconDiv
);
201 commentDiv
= pageDocument
.createElement("div");
202 commentDiv
.style
.left
= commentLeft
+ iconSize
+ "px";
203 commentDiv
.style
.top
= commentTop
+ "px";
205 commentDiv
.appendChild(pageDocument
.createTextNode(commentText
));
206 commentDiv
.setAttribute("class", "webdeveloper-comment-text");
207 commentDiv
.setAttribute("id", "webdeveloper-comment-text" + i
);
209 bodyElement
.appendChild(commentDiv
);
211 // If the offset width is greater than 200
212 if(commentDiv
.offsetWidth
> 200)
214 commentDiv
.style
.width
= "200px";
217 // If the offset height is greater than 100
218 if(commentDiv
.offsetHeight
> 100)
220 commentDiv
.style
.height
= "100px";
221 commentDiv
.style
.overflow
= "auto";
224 // If the comment is positioned outside the document
225 if(commentLeft
+ iconSize
+ commentDiv
.offsetWidth
> bodyOffsetWidth
)
227 commentDiv
.style
.left
= commentLeft
- commentDiv
.offsetWidth
- iconSize
+ "px";
230 commentDiv
.style
.display
= "none";
235 webdeveloper_clearComments(pageDocument
);