doc/webdeveloper/features/show_comments.js

   1 var webdeveloper_lastCommentShown = null;
   2
   3 // Clears the comments from the page
   4 function webdeveloper_clearComments(pageDocument)
   5 {
   6     var commentDiv        = null;
   7     var commentDivList    = webdeveloper_evaluateXPath(pageDocument, "//div[@class='webdeveloper-comment-icon'] | //div[@class='webdeveloper-comment-text']");
   8     var commentDivsLength = commentDivList.length;
   9
  10     webdeveloper_lastCommentShown = null;
  11
  12     // Loop through the comment divs
  13     for(var i = 0; i < commentDivsLength; i++)
  14     {
  15         webdeveloper_removeElement(commentDivList[i]);
  16     }
  17 }
  18
  19 // Shows the comment text
  20 function webdeveloper_showCommentText(event)
  21 {
  22     var target = event.target;
  23
  24     // If there is an event target
  25         if(target)
  26         {
  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);
  31
  32         // If this is not the last comment shown
  33         if(webdeveloper_lastCommentShown && webdeveloper_lastCommentShown != targetComment)
  34         {
  35             lastCommentElement = currentDocument.getElementById(webdeveloper_lastCommentShown);
  36
  37             // If the last comment element exists
  38             if(lastCommentElement)
  39             {
  40                 lastCommentElement.style.display = "none";
  41             }
  42         }
  43
  44         // If the element is currently hidden
  45         if(targetCommentElement.style.display == "none")
  46         {
  47             targetCommentElement.style.display = "block";
  48         }
  49         else
  50         {
  51             targetCommentElement.style.display = "none";
  52         }
  53
  54         webdeveloper_lastCommentShown = targetComment;
  55         }
  56 }
  57
  58 // Toggles comments
  59 function webdeveloper_toggleComments(element)
  60 {
  61     var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
  62     var documentLength = documentList.length;
  63     var show           = element.getAttribute("checked");
  64
  65     // Loop through the documents
  66     for(var i = 0; i < documentLength; i++)
  67     {
  68         webdeveloper_toggleCommentsForDocument(documentList[i], show);
  69     }
  70
  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 *");
  73 }
  74
  75 // Toggles the comments for a document
  76 function webdeveloper_toggleCommentsForDocument(pageDocument, show)
  77 {
  78     var bodyElement     = webdeveloper_getDocumentBodyElement(pageDocument);
  79     var bodyOffsetWidth = bodyElement.offsetWidth;
  80     var comment         = null;
  81     var commentsLength  = 0;
  82     var commentsList    = new Array();
  83     var parentElement   = null;
  84     var treeWalker      = pageDocument.createTreeWalker(pageDocument, NodeFilter.SHOW_COMMENT, null, false);
  85
  86     webdeveloper_lastCommentShown = null;
  87
  88     // While the tree walker has more nodes
  89     while((comment = treeWalker.nextNode()) != null)
  90     {
  91         commentsList.push(comment);
  92     }
  93
  94     // Remove XML declaration
  95     if(commentsList.length > 0 && commentsList[0].nodeValue.indexOf("encoding") != -1)
  96     {
  97         commentsList.shift();
  98     }
  99
 100     // Remove DOCTYPE
 101     if(commentsList.length > 0 && commentsList[0].nodeValue.indexOf("DOCTYPE") != -1)
 102     {
 103         commentsList.shift();
 104     }
 105
 106     commentsLength = commentsList.length;
 107
 108     // If showing comments
 109     if(show)
 110     {
 111         var commentDiv              = null;
 112         var commentIconDiv          = null;
 113         var commentLeft             = 0;
 114         var commentParent           = null;
 115         var commentParentOffsetLeft = 0;
 116         var commentParentOffsetTop  = 0;
 117         var commentText             = null;
 118         var commentTop              = 0;
 119         var iconSize                = 17;
 120
 121         // Loop through the comments
 122         for(var i = 0; i < commentsLength; i++)
 123         {
 124             comment       = commentsList[i];
 125             commentLeft   = 0;
 126             commentParent = comment.parentNode;
 127             commentText   = comment.nodeValue;
 128             commentTop    = 0;
 129
 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>");
 134
 135             // While the comment has a parent
 136             while(commentParent)
 137             {
 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")
 140                 {
 141                     commentParentOffsetLeft = commentParent.offsetLeft;
 142                     commentParentOffsetTop  = commentParent.offsetTop;
 143
 144                     // If the parent node has a left offset
 145                     if(commentParentOffsetLeft)
 146                     {
 147                         commentLeft += commentParentOffsetLeft;
 148                     }
 149
 150                     // If the parent node has a top offset
 151                     if(commentParentOffsetTop)
 152                     {
 153                         commentTop += commentParentOffsetTop;
 154                     }
 155                 }
 156
 157                 commentParent = commentParent.parentNode;
 158             }
 159
 160             // If the comment left offset is 0
 161             if(commentLeft == 0)
 162             {
 163                 commentLeft = 1;
 164             }
 165             else if(commentLeft + iconSize > bodyOffsetWidth)
 166             {
 167                 commentLeft = bodyOffsetWidth;
 168             }
 169
 170             // If the comment top offset is 0
 171             if(commentTop == 0)
 172             {
 173                 commentTop = 1;
 174             }
 175
 176             // If this is not the first comment
 177             if(i > 0)
 178             {
 179                 // Loop through previous comments
 180                 for(var j = 0; j < i; j++)
 181                 {
 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)
 184                     {
 185                         commentTop += iconSize;
 186                     }
 187                 }
 188             }
 189
 190             commentIconDiv            = pageDocument.createElement("div");
 191             commentIconDiv.style.left = commentLeft + "px";
 192             commentIconDiv.style.top  = commentTop + "px";
 193
 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);
 198
 199             bodyElement.appendChild(commentIconDiv);
 200
 201             commentDiv            = pageDocument.createElement("div");
 202             commentDiv.style.left = commentLeft + iconSize + "px";
 203             commentDiv.style.top  = commentTop + "px";
 204
 205             commentDiv.appendChild(pageDocument.createTextNode(commentText));
 206             commentDiv.setAttribute("class", "webdeveloper-comment-text");
 207             commentDiv.setAttribute("id", "webdeveloper-comment-text" + i);
 208
 209             bodyElement.appendChild(commentDiv);
 210
 211             // If the offset width is greater than 200
 212             if(commentDiv.offsetWidth > 200)
 213             {
 214                 commentDiv.style.width = "200px";
 215             }
 216
 217             // If the offset height is greater than 100
 218             if(commentDiv.offsetHeight > 100)
 219             {
 220                 commentDiv.style.height   = "100px";
 221                 commentDiv.style.overflow = "auto";
 222             }
 223
 224             // If the comment is positioned outside the document
 225             if(commentLeft + iconSize + commentDiv.offsetWidth > bodyOffsetWidth)
 226             {
 227                 commentDiv.style.left = commentLeft - commentDiv.offsetWidth - iconSize + "px";
 228             }
 229
 230             commentDiv.style.display = "none";
 231         }
 232     }
 233     else
 234     {
 235         webdeveloper_clearComments(pageDocument);
 236     }
 237 }