doc/webdeveloper/features/display_element_information.js

   1 var webdeveloper_elementInformationBlockSelected = false;
   2 var webdeveloper_informationElement              = null;
   3
   4 // Creates the element information block
   5 function webdeveloper_createElementInformationBlock(ownerDocument)
   6 {
   7     var definitionElement = ownerDocument.createElement("dd");
   8     var divElement        = ownerDocument.createElement("div");
   9     var headerElement     = ownerDocument.createElement("h2");
  10     var listElement       = ownerDocument.createElement("dl");
  11     var stringBundle      = document.getElementById("webdeveloper-string-bundle");
  12     var termElement       = ownerDocument.createElement("dt");
  13
  14     headerElement.addEventListener("mousedown", webdeveloper_selectElementInformation, false);
  15     headerElement.addEventListener("mouseup", webdeveloper_deselectElementInformation, false);
  16     headerElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_elementInformation")));
  17     divElement.appendChild(headerElement);
  18
  19     termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
  20     termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_attributes")));
  21     definitionElement.setAttribute("id", "webdeveloper-element-information-attributes");
  22     listElement.appendChild(termElement);
  23     listElement.appendChild(definitionElement);
  24     divElement.appendChild(listElement);
  25
  26     definitionElement = ownerDocument.createElement("dd");
  27     listElement       = ownerDocument.createElement("dl");
  28     termElement       = ownerDocument.createElement("dt");
  29
  30     termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
  31     termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_position")));
  32     definitionElement.setAttribute("id", "webdeveloper-element-information-position");
  33     listElement.appendChild(termElement);
  34     listElement.appendChild(definitionElement);
  35     divElement.appendChild(listElement);
  36
  37     definitionElement = ownerDocument.createElement("dd");
  38     listElement       = ownerDocument.createElement("dl");
  39     termElement       = ownerDocument.createElement("dt");
  40
  41     termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
  42     termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_other")));
  43     definitionElement.setAttribute("id", "webdeveloper-element-information-other");
  44     listElement.appendChild(termElement);
  45     listElement.appendChild(definitionElement);
  46     divElement.appendChild(listElement);
  47
  48     definitionElement = ownerDocument.createElement("dd");
  49     listElement       = ownerDocument.createElement("dl");
  50     termElement       = ownerDocument.createElement("dt");
  51
  52     termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
  53     termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_ancestors")));
  54     definitionElement.setAttribute("id", "webdeveloper-element-information-ancestors");
  55     listElement.appendChild(termElement);
  56     listElement.appendChild(definitionElement);
  57     divElement.appendChild(listElement);
  58
  59     definitionElement = ownerDocument.createElement("dd");
  60     listElement       = ownerDocument.createElement("dl");
  61     termElement       = ownerDocument.createElement("dt");
  62
  63     termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
  64     termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_children")));
  65     definitionElement.setAttribute("id", "webdeveloper-element-information-children");
  66     listElement.appendChild(termElement);
  67     listElement.appendChild(definitionElement);
  68     divElement.appendChild(listElement);
  69
  70     divElement.setAttribute("id", "webdeveloper-element-information");
  71     webdeveloper_getDocumentBodyElement(ownerDocument).appendChild(divElement);
  72 }
  73
  74 // Called when the element information is deselected
  75 function webdeveloper_deselectElementInformation(event)
  76 {
  77     webdeveloper_elementInformationBlockSelected = false;
  78 }
  79
  80 // Displays information about the element
  81 function webdeveloper_displayElementInformation(element)
  82 {
  83     var checked         = true;
  84     var contentDocument = webdeveloper_getContentDocument();
  85     var contentWindow   = webdeveloper_getContentWindow();
  86     var divElement      = null;
  87     var documentList    = webdeveloper_getDocuments(contentWindow);
  88     var documentLength  = documentList.length;
  89     var leftOffset      = contentWindow.pageXOffset;
  90     var pageDocument    = null;
  91     var topOffset       = contentWindow.pageYOffset;
  92
  93     // If the element is set
  94     if(element)
  95     {
  96         checked = element.getAttribute("checked");
  97     }
  98     else
  99     {
 100         var currentDocument = contentWindow.document;
 101
 102         element = document.getElementById("webdeveloper-display-element-information-menu");
 103
 104         // If the display element information element is set
 105         if(currentDocument.getElementById("webdeveloper-display-element-information"))
 106         {
 107             checked = false;
 108         }
 109
 110         webdeveloper_configureElement(element, "checked", checked);
 111     }
 112
 113     webdeveloper_configureElement(document.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked);
 114
 115     // Loop through the documents
 116     for(var i = 0; i < documentLength; i++)
 117     {
 118         pageDocument = documentList[i];
 119
 120         // If displaying element information
 121         if(checked)
 122         {
 123             webdeveloper_createElementInformationBlock(pageDocument);
 124
 125             // If this is the content document
 126             if(pageDocument == contentDocument)
 127             {
 128                 divElement = pageDocument.getElementById("webdeveloper-element-information");
 129
 130                 // If the div element was found
 131                 if(divElement)
 132                 {
 133                     divElement.style.left = (leftOffset + 5) + "px";
 134                     divElement.style.top  = (topOffset + 5) + "px";
 135                 }
 136             }
 137
 138             pageDocument.addEventListener("click", webdeveloper_displayElementInformationForElement, false);
 139             pageDocument.addEventListener("keypress", webdeveloper_displayElementInformationKeyPress, false);
 140             pageDocument.addEventListener("mousemove", webdeveloper_displayElementInformationMouseMove, false);
 141             pageDocument.addEventListener("mouseover", webdeveloper_displayElementInformationMouseOver, false);
 142         }
 143         else
 144         {
 145             divElement = pageDocument.getElementById("webdeveloper-element-information");
 146
 147             // Try to remove the event listener
 148             try
 149             {
 150                 pageDocument.removeEventListener("click", webdeveloper_displayElementInformationForElement, false);
 151             }
 152             catch(exception)
 153             {
 154                 // Do nothing
 155             }
 156
 157             // Try to remove the event listener
 158             try
 159             {
 160                 pageDocument.removeEventListener("keypress", webdeveloper_displayElementInformationKeyPress, false);
 161             }
 162             catch(exception)
 163             {
 164                 // Do nothing
 165             }
 166
 167             // Try to remove the event listener
 168             try
 169             {
 170                 pageDocument.removeEventListener("mousemove", webdeveloper_displayElementInformationMouseMove, false);
 171             }
 172             catch(exception)
 173             {
 174                 // Do nothing
 175             }
 176
 177             // Try to remove the event listener
 178             try
 179             {
 180                 pageDocument.removeEventListener("mouseover", webdeveloper_displayElementInformationMouseOver, false);
 181             }
 182             catch(exception)
 183             {
 184                 // Do nothing
 185             }
 186
 187             webdeveloper_removeElement(divElement);
 188             webdeveloper_removeElementOutline(webdeveloper_informationElement);
 189         }
 190     }
 191
 192     // If not displaying element information
 193     if(!checked)
 194     {
 195         webdeveloper_elementInformationBlockSelected = false;
 196         webdeveloper_informationElement              = null;
 197     }
 198
 199     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_element_information.css", "webdeveloper-display-element-information");
 200 }
 201
 202 // Displays information about the specific element
 203 function webdeveloper_displayElementInformationForElement(event)
 204 {
 205     var element = event.target;
 206
 207     // If the element is set
 208     if(element)
 209     {
 210         var elementName   = element.tagName;
 211         var ownerDocument = element.ownerDocument;
 212
 213         // If the element has a name and it is not scrollbar and it has an owner document
 214         if(elementName && elementName != "scrollbar" && ownerDocument)
 215         {
 216             var divElement = ownerDocument.getElementById("webdeveloper-element-information");
 217
 218             // If the div element was found
 219             if(divElement)
 220             {
 221                 // If the element is not the div element and the div element is not an ancestor of the element
 222                 if(element != divElement && !webdeveloper_isAncestor(element, divElement))
 223                 {
 224                     var definitionElement = ownerDocument.getElementById("webdeveloper-element-information-attributes");
 225                     var headerElements    = divElement.getElementsByTagName("h2");
 226                     var outlineElement    = null;
 227                     var pElement          = null;
 228                     var stringBundle      = document.getElementById("webdeveloper-string-bundle");
 229                     var tableElement      = null;
 230                     var tableCellElement  = null;
 231                     var tableRowElement   = null;
 232
 233                     webdeveloper_removeElementOutline(element);
 234
 235                     // If header elements were found
 236                     if(headerElements.length > 0)
 237                     {
 238                         var headerElement = headerElements[0];
 239
 240                         // If the header element is set
 241                         if(headerElement)
 242                         {
 243                             webdeveloper_removeAllChildElements(headerElement);
 244
 245                             headerElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(element)));
 246                         }
 247                     }
 248
 249                     // If the definition element is set
 250                     if(definitionElement)
 251                     {
 252                         var elementAttribute        = null;
 253                         var elementAttributes       = element.attributes;
 254                         var elementAttributesLength = elementAttributes.length;
 255
 256                         webdeveloper_removeAllChildElements(definitionElement);
 257
 258                         // If there are no attributes
 259                         if(elementAttributesLength == 0)
 260                         {
 261                             definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
 262                         }
 263                         else
 264                         {
 265                             // Loop through the attributes
 266                             for(var i = 0; i < elementAttributesLength; i++)
 267                             {
 268                                 elementAttribute = elementAttributes[i];
 269                                 pElement         = ownerDocument.createElement("p");
 270
 271                                 pElement.appendChild(ownerDocument.createTextNode(elementAttribute.name + " = " + elementAttribute.value));
 272                                 definitionElement.appendChild(pElement);
 273                             }
 274                         }
 275                     }
 276
 277                     definitionElement = ownerDocument.getElementById("webdeveloper-element-information-position");
 278
 279                     // If the definition element is set
 280                     if(definitionElement)
 281                     {
 282                         tableElement     = ownerDocument.createElement("table");
 283                         tableCellElement = ownerDocument.createElement("td");
 284                         tableRowElement  = ownerDocument.createElement("tr");
 285
 286                         webdeveloper_removeAllChildElements(definitionElement);
 287
 288                         tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_left") + ": " + webdeveloper_getElementPositionX(element) + "px"));
 289                         tableRowElement.appendChild(tableCellElement);
 290
 291                         tableCellElement = ownerDocument.createElement("td");
 292                         tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_top") + ": " + webdeveloper_getElementPositionY(element) + "px"));
 293                         tableRowElement.appendChild(tableCellElement);
 294                         tableElement.appendChild(tableRowElement);
 295
 296                         tableCellElement = ownerDocument.createElement("td");
 297                         tableRowElement  = ownerDocument.createElement("tr");
 298                         tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_width") + ": " + element.clientWidth + "px"));
 299                         tableRowElement.appendChild(tableCellElement);
 300
 301                         tableCellElement = ownerDocument.createElement("td");
 302                         tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_height") + ": " + element.clientHeight + "px"));
 303                         tableRowElement.appendChild(tableCellElement);
 304                         tableElement.appendChild(tableRowElement);
 305                         definitionElement.appendChild(tableElement);
 306                     }
 307
 308                     definitionElement = ownerDocument.getElementById("webdeveloper-element-information-other");
 309
 310                     // If the definition element is set
 311                     if(definitionElement)
 312                     {
 313                         var fontFamily = element.ownerDocument.defaultView.getComputedStyle(element, null).getPropertyCSSValue("font-family");
 314                         var fontSize   = element.ownerDocument.defaultView.getComputedStyle(element, null).getPropertyCSSValue("font-size");
 315
 316                         tableElement    = ownerDocument.createElement("table");
 317
 318                         webdeveloper_removeAllChildElements(definitionElement);
 319
 320                         // If this element has a font family
 321                         if(fontFamily)
 322                         {
 323                             tableCellElement = ownerDocument.createElement("td");
 324                             tableRowElement = ownerDocument.createElement("tr");
 325                             tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_fontFamily") + ":"));
 326                             tableRowElement.appendChild(tableCellElement);
 327
 328                             tableCellElement = ownerDocument.createElement("td");
 329                             tableCellElement.appendChild(ownerDocument.createTextNode(fontFamily.cssText));
 330                             tableRowElement.appendChild(tableCellElement);
 331                             tableElement.appendChild(tableRowElement);
 332                         }
 333
 334                         // If this element has a font size
 335                         if(fontSize)
 336                         {
 337                             tableCellElement = ownerDocument.createElement("td");
 338                             tableRowElement = ownerDocument.createElement("tr");
 339                             tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_fontSize") + ":"));
 340                             tableRowElement.appendChild(tableCellElement);
 341
 342                             tableCellElement = ownerDocument.createElement("td");
 343                             tableCellElement.appendChild(ownerDocument.createTextNode(fontSize.cssText));
 344                             tableRowElement.appendChild(tableCellElement);
 345                             tableElement.appendChild(tableRowElement);
 346                         }
 347
 348                         // If the table has child nodes
 349                         if(tableElement.hasChildNodes())
 350                         {
 351                             definitionElement.appendChild(tableElement);
 352                         }
 353                     }
 354
 355                     definitionElement = ownerDocument.getElementById("webdeveloper-element-information-ancestors");
 356
 357                     // If the definition element is set
 358                     if(definitionElement)
 359                     {
 360                         var ancestorList   = webdeveloper_getElementAncestors(element);
 361                         var ancestorLength = ancestorList.length;
 362
 363                         webdeveloper_removeAllChildElements(definitionElement);
 364
 365                         // If there are no ancestors
 366                         if(ancestorLength == 0)
 367                         {
 368                             definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
 369                         }
 370                         else
 371                         {
 372                             // Loop through the ancestors
 373                             for(i = 0; i < ancestorLength; i++)
 374                             {
 375                                 pElement = ownerDocument.createElement("p");
 376
 377                                 pElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(ancestorList[i])));
 378                                 definitionElement.appendChild(pElement);
 379                             }
 380                         }
 381                     }
 382
 383                     definitionElement = ownerDocument.getElementById("webdeveloper-element-information-children");
 384
 385                     // If the definition element is set
 386                     if(definitionElement)
 387                     {
 388                         var children    = webdeveloper_getElementChildren(element);
 389                         var childLength = children.length;
 390
 391                         webdeveloper_removeAllChildElements(definitionElement);
 392
 393                         // If there are no children
 394                         if(childLength == 0)
 395                         {
 396                             definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
 397                         }
 398                         else
 399                         {
 400                             // Loop through the children
 401                             for(i = 0; i < childLength; i++)
 402                             {
 403                                 pElement = ownerDocument.createElement("p");
 404
 405                                 pElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(children[i])));
 406                                 definitionElement.appendChild(pElement);
 407                             }
 408                         }
 409                     }
 410
 411                     element.style.MozOutline = "1px solid #ff0000";
 412
 413                     // Force the style sheet to refresh
 414                     divElement.setAttribute("class", "force-width");
 415                     divElement.removeAttribute("class");
 416
 417                     event.preventDefault();
 418                 }
 419             }
 420         }
 421     }
 422 }
 423
 424 // Keypress event for display element information
 425 function webdeveloper_displayElementInformationKeyPress(event)
 426 {
 427     webdeveloper_copyElementAncestors(event);
 428 }
 429
 430 // Move event for display element information
 431 function webdeveloper_displayElementInformationMouseMove(event)
 432 {
 433     // If the element information block is selected
 434     if(webdeveloper_elementInformationBlockSelected)
 435     {
 436         webdeveloper_moveElementInformationBlock(event);
 437     }
 438     else
 439     {
 440         var element = event.target;
 441
 442         // If the element is set
 443         if(element)
 444         {
 445             var ownerDocument = element.ownerDocument;
 446
 447             // If the owner document is set
 448             if(ownerDocument)
 449             {
 450                 var divElement = ownerDocument.getElementById("webdeveloper-element-information");
 451
 452                 // If the div element was found
 453                 if(divElement)
 454                 {
 455                     // If the element is not the div element and the div element is not an ancestor of the element
 456                     if(element != divElement && !webdeveloper_isAncestor(element, divElement))
 457                     {
 458                         var outlineElement = webdeveloper_addElementOutline(event, webdeveloper_informationElement);
 459
 460                         // If the outline element is set
 461                         if(outlineElement)
 462                         {
 463                             webdeveloper_informationElement = outlineElement;
 464                         }
 465                     }
 466
 467                 }
 468             }
 469         }
 470     }
 471 }
 472
 473 // Mouseover event for display element information
 474 function webdeveloper_displayElementInformationMouseOver(event)
 475 {
 476     var element = event.target;
 477
 478     // If the element is set
 479     if(element)
 480     {
 481         var ownerDocument = element.ownerDocument;
 482
 483         // If the owner document is set
 484         if(ownerDocument)
 485         {
 486             var divElement = ownerDocument.getElementById("webdeveloper-element-information");
 487
 488             // If the div element was found
 489             if(divElement)
 490             {
 491                 // If the element is not the div element and the div element is not an ancestor of the element
 492                 if(element != divElement && !webdeveloper_isAncestor(element, divElement))
 493                 {
 494                     webdeveloper_displayElementAncestors(event);
 495                 }
 496
 497             }
 498         }
 499     }
 500 }
 501
 502 // Move the element information block
 503 function webdeveloper_moveElementInformationBlock(event)
 504 {
 505     var element = event.target;
 506
 507     // If the element is set
 508     if(element)
 509     {
 510         var ownerDocument = element.ownerDocument;
 511
 512         // If the target has an owner document
 513         if(ownerDocument)
 514         {
 515             var divElement = ownerDocument.getElementById("webdeveloper-element-information");
 516
 517             // If the div element was found
 518             if(divElement)
 519             {
 520                 divElement.style.left = (event.pageX - 5) + "px";
 521                 divElement.style.top  = (event.pageY - 5) + "px";
 522             }
 523         }
 524     }
 525 }
 526
 527 // Called when the element information is selected
 528 function webdeveloper_selectElementInformation(event)
 529 {
 530     // If the click was not a right click
 531     if(event.button != 2)
 532     {
 533         webdeveloper_elementInformationBlockSelected = true;
 534     }
 535 }
 536
 537 // Toggles an element information block
 538 function webdeveloper_toggleElementInformationBlock(event)
 539 {
 540     var element = event.target;
 541
 542     // If there is a target element
 543     if(element)
 544     {
 545         // If the element has a class attribute
 546         if(element.hasAttribute("class"))
 547         {
 548             element.removeAttribute("class");
 549         }
 550         else
 551         {
 552             element.setAttribute("class", "collapsed");
 553         }
 554     }
 555 }