doc/webdeveloper/outline.js

   1 // Outlines all block level element names
   2 function webdeveloper_outlineBlockLevelElementNames(element)
   3 {
   4     webdeveloper_removeStyleSheet("webdeveloper-outline-block-level-elements-before");
   5     webdeveloper_removeStyleSheet("webdeveloper-outline-block-level-elements-before-tooltips");
   6
   7     // If the show outlined element names preference is set
   8     if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
   9     {
  10         webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_block_level_elements_before.css", "webdeveloper-outline-block-level-elements-before");
  11         webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-outline-block-level-elements-before-tooltips", "*:before");
  12     }
  13 }
  14
  15 // Outlines all block level elements
  16 function webdeveloper_outlineBlockLevelElements(element)
  17 {
  18     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_block_level_elements.css", "webdeveloper-outline-block-level-elements");
  19     webdeveloper_outlineBlockLevelElementNames(element);
  20 }
  21
  22 // Outlines the current element
  23 function webdeveloper_outlineCurrentElement(element)
  24 {
  25     var checked        = element.getAttribute("checked");
  26     var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
  27     var documentLength = documentList.length;
  28     var pageDocument   = null;
  29
  30     webdeveloper_configureElement(document.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked);
  31
  32     // Loop through the documents
  33     for(var i = 0; i < documentLength; i++)
  34     {
  35         pageDocument = documentList[i];
  36
  37         // If outlining the element
  38         if(checked)
  39         {
  40             pageDocument.addEventListener("keypress", webdeveloper_outlineCurrentElementKeyPress, false);
  41             pageDocument.addEventListener("mousemove", webdeveloper_outlineCurrentElementMouseMove, false);
  42             pageDocument.addEventListener("mouseover", webdeveloper_outlineCurrentElementMouseOver, false);
  43         }
  44         else
  45         {
  46             // Try to remove the event listener
  47             try
  48             {
  49                 pageDocument.removeEventListener("keypress", webdeveloper_outlineCurrentElementKeyPress, false);
  50             }
  51             catch(exception)
  52             {
  53                 // Do nothing
  54             }
  55
  56             // Try to remove the event listener
  57             try
  58             {
  59                 pageDocument.removeEventListener("mousemove", webdeveloper_outlineCurrentElementMouseMove, false);
  60             }
  61             catch(exception)
  62             {
  63                 // Do nothing
  64             }
  65
  66             // Try to remove the event listener
  67             try
  68             {
  69                 pageDocument.removeEventListener("mouseover", webdeveloper_outlineCurrentElementMouseOver, false);
  70             }
  71             catch(exception)
  72             {
  73                 // Do nothing
  74             }
  75
  76             webdeveloper_removeElementOutline(webdeveloper_outlineElement);
  77         }
  78     }
  79
  80     // If not outlining the element
  81     if(!checked)
  82     {
  83         webdeveloper_outlineElement = null;
  84     }
  85
  86     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_current_element.css", "webdeveloper-outline-current-element");
  87 }
  88
  89 // Keypress event for outline current element
  90 function webdeveloper_outlineCurrentElementKeyPress(event)
  91 {
  92     webdeveloper_copyElementAncestors(event);
  93 }
  94
  95 // Mouseover event for outline current element
  96 function webdeveloper_outlineCurrentElementMouseMove(event)
  97 {
  98     var outlineElement = webdeveloper_addElementOutline(event, webdeveloper_outlineElement);
  99
 100     // If the outline element is set
 101     if(outlineElement)
 102     {
 103         webdeveloper_outlineElement = outlineElement;
 104     }
 105 }
 106
 107 // Mouseover event for outline current element
 108 function webdeveloper_outlineCurrentElementMouseOver(event)
 109 {
 110     webdeveloper_displayElementAncestors(event);
 111 }
 112
 113 // Outlines the given element
 114 function webdeveloper_outlineCustomElements(element)
 115 {
 116     webdeveloper_outlinedElements = new Array();
 117
 118     // If the menu is checked
 119     if(element.getAttribute("checked"))
 120     {
 121         window.openDialog("chrome://webdeveloper/content/dialogs/outline_elements.xul", "webdeveloper-outline-elements-dialog", "centerscreen,chrome,modal", webdeveloper_outlinedElements);
 122
 123         // If the user clicked cancel in the dialog
 124         if(webdeveloper_outlinedElements.length == 0)
 125         {
 126            element.removeAttribute("checked");
 127         }
 128     }
 129
 130     webdeveloper_outlineElements(element, true);
 131 }
 132
 133 // Outlines all deprecated element names
 134 function webdeveloper_outlineDeprecatedElementNames(element)
 135 {
 136     webdeveloper_removeStyleSheet("webdeveloper-outline-deprecated-elements-before");
 137     webdeveloper_removeStyleSheet("webdeveloper-outline-deprecated-elements-before-tooltips");
 138
 139     // If the show outlined element names preference is set
 140     if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
 141     {
 142         webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_deprecated_elements_before.css", "webdeveloper-outline-deprecated-elements-before");
 143         webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-outline-deprecated-elements-before-tooltips", "*:before");
 144     }
 145 }
 146
 147 // Outlines all deprecated elements
 148 function webdeveloper_outlineDeprecatedElements(element)
 149 {
 150     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_deprecated_elements.css", "webdeveloper-outline-deprecated-elements");
 151     webdeveloper_outlineDeprecatedElementNames(element);
 152 }
 153
 154 // Outlines the given element
 155 function webdeveloper_outlineElements(element)
 156 {
 157     // If the menu is checked
 158     if(element.getAttribute("checked") && webdeveloper_outlinedElements.length > 0)
 159     {
 160         var documentList             = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 161         var documentLength           = documentList.length;
 162         var outlineColor             = null;
 163         var outlineColorPreference   = null;
 164         var outlineElement           = null;
 165         var outlineElementLength     = null;
 166         var outlineElementList       = null;
 167         var outlineElementPreference = null;
 168         var outlineElementValue      = null;
 169         var pageDocument             = null;
 170         var styleElement             = null;
 171
 172         // Loop through the documents
 173         for(var i = 0; i < documentLength; i++)
 174         {
 175             pageDocument = documentList[i];
 176             styleElement = pageDocument.createElement("style");
 177
 178             styleElement.setAttribute("id", "webdeveloper-outline-custom-elements");
 179             styleElement.setAttribute("type", "text/css");
 180
 181             // Loop through outline colors and elements
 182             for(var j = 0; j <= 5; j++)
 183             {
 184                 outlineColor             = "webdeveloper.custom." + j + ".color";
 185                 outlineColorPreference   = webdeveloper_getStringPreference(outlineColor, true);
 186                 outlineElement           = "webdeveloper.custom." + j + ".element";
 187                 outlineElementPreference = webdeveloper_getStringPreference(outlineElement, true);
 188
 189                 // If the color and element are set and not blank
 190                 if(outlineColorPreference && outlineElementPreference)
 191                 {
 192                     outlineElementList   = outlineElementPreference.split(",");
 193                     outlineElementLength = outlineElementList.length;
 194
 195                     // Loop through the elements
 196                     for(var k = 0; k < outlineElementLength; k++)
 197                     {
 198                         outlineElementValue = outlineElementList[k];
 199
 200                         styleElement.appendChild(pageDocument.createTextNode(outlineElementValue + " { -moz-outline: 1px solid " + outlineColorPreference + " !important; outline: 1px solid " + outlineColorPreference + " !important; }"));
 201
 202                         // If the show outlined element names preference is set
 203                         if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
 204                         {
 205                             styleElement.appendChild(pageDocument.createTextNode(outlineElementValue + ":before { content: \"<" + outlineElementValue + ">\" !important; }"));
 206                         }
 207                     }
 208                 }
 209             }
 210
 211             webdeveloper_getDocumentHeadElement(pageDocument).appendChild(styleElement);
 212         }
 213
 214         webdeveloper_addAppliedStyle("webdeveloper-outline-custom-elements");
 215     }
 216     else
 217     {
 218         webdeveloper_removeStyleSheet("webdeveloper-outline-custom-elements", true);
 219     }
 220
 221     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/imports/before.css", "webdeveloper-outline-custom-elements-before");
 222     webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-outline-custom-elements-before-tooltips", "*:before");
 223 }
 224
 225 // Outlines all external links
 226 function webdeveloper_outlineExternalLinks(element)
 227 {
 228     // If the menu is checked
 229     if(element.getAttribute("checked"))
 230     {
 231         var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 232         var documentLength = documentList.length;
 233         var location       = null;
 234         var pageDocument   = null;
 235         var protocol       = null;
 236         var styleElement   = null;
 237
 238         // Loop through the documents
 239         for(var i = 0; i < documentLength; i++)
 240         {
 241             pageDocument    = documentList[i];
 242             location        = pageDocument.location;
 243             protocol        = location.protocol.replace(new RegExp(":", "gi"), "\\:");
 244             styleElement    = pageDocument.createElement("style");
 245
 246             styleElement.setAttribute("id", "webdeveloper-outline-external-links");
 247             styleElement.setAttribute("type", "text/css");
 248             styleElement.appendChild(pageDocument.createTextNode("a:not([href^=" + protocol + "\\/\\/" + location.hostname.replace(new RegExp("\\.", "gi"), "\\.") + "]) { -moz-outline: 1px solid #ff0000 !important; outline: 1px solid #ff0000 !important; }"));
 249             styleElement.appendChild(pageDocument.createTextNode("a:not([href^=" + protocol + "]) { -moz-outline-style: none !important; outline-style: none !important; }"));
 250
 251             webdeveloper_getDocumentHeadElement(pageDocument).appendChild(styleElement);
 252         }
 253
 254         webdeveloper_addAppliedStyle("webdeveloper-outline-external-links");
 255     }
 256     else
 257     {
 258         webdeveloper_removeStyleSheet("webdeveloper-outline-external-links", true);
 259     }
 260 }
 261
 262 // Outlines all floated elements
 263 function webdeveloper_outlineFloatedElements(element)
 264 {
 265     var checked        = element.getAttribute("checked");
 266     var className      = null;
 267     var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 268     var documentLength = documentList.length;
 269     var floatValue     = null;
 270     var pageDocument   = null;
 271     var pageElement    = null;
 272     var treeWalker     = null;
 273
 274     // Loop through the documents
 275     for(var i = 0; i < documentLength; i++)
 276     {
 277         pageDocument = documentList[i];
 278         treeWalker   = pageDocument.createTreeWalker(pageDocument, NodeFilter.SHOW_ELEMENT, null, false);
 279
 280         // While the tree walker has more nodes
 281         while((pageElement = treeWalker.nextNode()) != null)
 282         {
 283             // If the element is checked
 284             if(checked)
 285             {
 286                 floatValue = pageElement.ownerDocument.defaultView.getComputedStyle(pageElement, null).getPropertyCSSValue("float").cssText;
 287
 288                 // If this element is floated and it is not set to none
 289                 if(floatValue && floatValue != "none")
 290                 {
 291                     pageElement.className += " webdeveloper-floated-element";
 292                 }
 293             }
 294             else
 295             {
 296                 className = pageElement.className;
 297
 298                 // If the element has a class name and it contains webdeveloper-floated-element
 299                 if(className && className.indexOf("webdeveloper-floated-element") != -1)
 300                 {
 301                     pageElement.className = webdeveloper_removeSubstring(className, "webdeveloper-floated-element");
 302                 }
 303             }
 304         }
 305     }
 306
 307     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_floated_elements.css", "webdeveloper-outline-floated-elements");
 308 }
 309
 310 // Outlines all frames
 311 function webdeveloper_outlineFrames(element)
 312 {
 313     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_frames.css", "webdeveloper-outline-frames");
 314 }
 315
 316 // Outlines all heading names
 317 function webdeveloper_outlineHeadingNames(element)
 318 {
 319     webdeveloper_removeStyleSheet("webdeveloper-outline-headings-before");
 320     webdeveloper_removeStyleSheet("webdeveloper-outline-headings-before-tooltips");
 321
 322     // If the show outlined element names preference is set
 323     if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
 324     {
 325         webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_headings_before.css", "webdeveloper-outline-headings-before");
 326         webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-outline-headings-before-tooltips", "*:before");
 327     }
 328 }
 329
 330 // Outlines all headings
 331 function webdeveloper_outlineHeadings(element)
 332 {
 333     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_headings.css", "webdeveloper-outline-headings");
 334     webdeveloper_outlineHeadingNames(element);
 335 }
 336
 337 // Outlines all the links with ping attributes
 338 function webdeveloper_outlineLinksWithPingAttributes(element)
 339 {
 340     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_links_with_ping_attributes.css", "webdeveloper-outline-links-with-ping-attributes");
 341 }
 342
 343 // Outlines all the links without title attributes
 344 function webdeveloper_outlineLinksWithoutTitleAttributes(element)
 345 {
 346     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_links_without_title_attributes.css", "webdeveloper-outline-links-without-title-attributes");
 347 }
 348
 349 // Outlines all positioned elements of the specified position on the page
 350 function webdeveloper_outlinePositionedElements(position, element)
 351 {
 352     var attributeName  = "webdeveloper-" + position + "-positioned-element";
 353     var checked        = element.getAttribute("checked");
 354     var className      = null;
 355     var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 356     var documentLength = documentList.length;
 357     var pageDocument   = null;
 358     var pageElement    = null;
 359     var positionValue  = null;
 360     var treeWalker     = null;
 361
 362     // Loop through the documents
 363     for(var i = 0; i < documentLength; i++)
 364     {
 365         pageDocument = documentList[i];
 366         treeWalker   = pageDocument.createTreeWalker(pageDocument, NodeFilter.SHOW_ELEMENT, null, false);
 367
 368         // While the tree walker has more nodes
 369         while((pageElement = treeWalker.nextNode()) != null)
 370         {
 371             // If the element is checked
 372             if(checked)
 373             {
 374                 positionValue = pageElement.ownerDocument.defaultView.getComputedStyle(pageElement, null).getPropertyCSSValue("position").cssText;
 375
 376                 // If this element is positioned and it is the specified position
 377                 if(positionValue && positionValue == position)
 378                 {
 379                     pageElement.className += " " + attributeName;
 380                 }
 381             }
 382             else if(pageElement.className.indexOf(attributeName) != -1)
 383             {
 384                 pageElement.className = webdeveloper_removeSubstring(pageElement.className, attributeName);
 385             }
 386         }
 387     }
 388
 389     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_positioned_elements.css", "webdeveloper-outline-" + position + "-positioned-elements");
 390 }
 391
 392 // Outlines all table captions
 393 function webdeveloper_outlineTableCaptions(element)
 394 {
 395     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_table_captions.css", "webdeveloper-outline-table-captions");
 396 }
 397
 398 // Outlines all table cells
 399 function webdeveloper_outlineTableCells(element)
 400 {
 401     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_table_cells.css", "webdeveloper-outline-table-cells");
 402     webdeveloper_outlineTableCellNames(element);
 403 }
 404
 405 // Outlines all table cell names
 406 function webdeveloper_outlineTableCellNames(element)
 407 {
 408     webdeveloper_removeStyleSheet("webdeveloper-outline-table-cells-before");
 409     webdeveloper_removeStyleSheet("webdeveloper-outline-table-cells-before-tooltips");
 410
 411     // If the show outlined element names preference is set
 412     if(webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true))
 413     {
 414         webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_table_cells_before.css", "webdeveloper-outline-table-cells-before");
 415         webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-outline-table-cells-before-tooltips", "*:before");
 416     }
 417 }
 418
 419 // Outlines all tables
 420 function webdeveloper_outlineTables(element)
 421 {
 422     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_tables.css", "webdeveloper-outline-all-tables");
 423 }
 424
 425 // Toggle showing of element names when outlining
 426 function webdeveloper_toggleShowElementNamesWhenOutlining(element)
 427 {
 428     var menu = document.getElementById("webdeveloper-outline-block-level-elements-menu");
 429
 430     webdeveloper_enablePreference(element, "webdeveloper.outline.show.element.names");
 431
 432     webdeveloper_configureElementByAppliedStyle(menu, "checked", "webdeveloper-outline-block-level-elements");
 433     webdeveloper_outlineBlockLevelElementNames(menu, true);
 434
 435     menu = document.getElementById("webdeveloper-outline-deprecated-elements-menu");
 436     webdeveloper_configureElementByAppliedStyle(menu, "checked", "webdeveloper-outline-deprecated-elements");
 437     webdeveloper_outlineDeprecatedElementNames(menu, true);
 438
 439     menu = document.getElementById("webdeveloper-outline-headings-menu");
 440     webdeveloper_configureElementByAppliedStyle(menu, "checked", "webdeveloper-outline-headings");
 441     webdeveloper_outlineHeadingNames(menu, true);
 442
 443     menu = document.getElementById("webdeveloper-outline-table-cells-menu");
 444     webdeveloper_configureElementByAppliedStyle(menu, "checked", "webdeveloper-outline-table-cells");
 445     webdeveloper_outlineTableCellNames(menu, true);
 446 }
 447
 448 // Updates the outline menu
 449 function webdeveloper_updateOutlineMenu(suffix)
 450 {
 451     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-block-level-elements-" + suffix), "checked", "webdeveloper-outline-block-level-elements");
 452     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-current-element-" + suffix), "checked", "webdeveloper-outline-current-element");
 453     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-custom-elements-" + suffix), "checked", "webdeveloper-outline-custom-elements");
 454     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-deprecated-elements-" + suffix), "checked", "webdeveloper-outline-deprecated-elements");
 455     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-frames-" + suffix), "checked", "webdeveloper-outline-frames");
 456     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-headings-" + suffix), "checked", "webdeveloper-outline-headings");
 457     webdeveloper_configureElement(document.getElementById("webdeveloper-outline-show-element-names-" + suffix), "checked", webdeveloper_getBooleanPreference("webdeveloper.outline.show.element.names", true));
 458 }
 459
 460 // Updates the outline links menu
 461 function webdeveloper_updateOutlineLinksMenu(suffix)
 462 {
 463     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-external-links-" + suffix), "checked", "webdeveloper-outline-external-links");
 464     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-links-with-ping-attributes-" + suffix), "checked", "webdeveloper-outline-links-with-ping-attributes");
 465     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-links-without-title-attributes-" + suffix), "checked", "webdeveloper-outline-links-without-title-attributes");
 466 }
 467
 468 // Updates the outline positioned elements menu
 469 function webdeveloper_updateOutlinePositionedElementsMenu(suffix)
 470 {
 471     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-absolute-positioned-elements-" + suffix), "checked", "webdeveloper-outline-absolute-positioned-elements");
 472     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-fixed-positioned-elements-" + suffix), "checked", "webdeveloper-outline-fixed-positioned-elements");
 473     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-floated-elements-" + suffix), "checked", "webdeveloper-outline-floated-elements");
 474     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-relative-positioned-elements-" + suffix), "checked", "webdeveloper-outline-relative-positioned-elements");
 475 }
 476
 477 // Updates the outline tables menu
 478 function webdeveloper_updateOutlineTablesMenu(suffix)
 479 {
 480     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-table-captions-" + suffix), "checked", "webdeveloper-outline-table-captions");
 481     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-table-cells-" + suffix), "checked", "webdeveloper-outline-table-cells");
 482     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-outline-all-tables-" + suffix), "checked", "webdeveloper-outline-all-tables");
 483 }