doc/webdeveloper/css.js

   1 var webdeveloper_userStyleSheet = null;
   2
   3 // Adds a user style sheet to the page
   4 function webdeveloper_addUserStyleSheet(element)
   5 {
   6     var addStyleSheet = element.getAttribute("checked");
   7
   8     // If adding a style sheet
   9     if(addStyleSheet)
  10     {
  11         var filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
  12         var stringBundle = document.getElementById("webdeveloper-string-bundle");
  13
  14         filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
  15         filePicker.init(window, stringBundle.getString("webdeveloper_addUserStyleSheet"), filePicker.modeOpen);
  16
  17         // If the user selected a style sheet
  18         if(filePicker.show() == filePicker.returnOK)
  19         {
  20             var inputStream      = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
  21             var scriptableStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
  22
  23             inputStream.init(filePicker.file, 0x01, 0444, null);
  24             scriptableStream.init(inputStream);
  25
  26             webdeveloper_userStyleSheet = scriptableStream.read(scriptableStream.available());
  27
  28             scriptableStream.close();
  29             inputStream.close();
  30         }
  31         else
  32         {
  33             addStyleSheet               = false;
  34             webdeveloper_userStyleSheet = null;
  35         }
  36     }
  37
  38     // If adding a style sheet and the style sheet is not empty
  39     if(addStyleSheet && webdeveloper_userStyleSheet)
  40     {
  41         var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
  42         var documentLength = documentList.length;
  43         var pageDocument   = null;
  44         var styleElement   = null;
  45
  46         // Loop through the documents
  47         for(var i = 0; i < documentLength; i++)
  48         {
  49             pageDocument = documentList[i];
  50             styleElement = pageDocument.createElement("style");
  51
  52             styleElement.setAttribute("id", "webdeveloper-add-user-style-sheet");
  53             styleElement.setAttribute("type", "text/css");
  54             styleElement.appendChild(pageDocument.createTextNode(webdeveloper_userStyleSheet));
  55
  56             webdeveloper_getDocumentHeadElement(pageDocument).appendChild(styleElement);
  57         }
  58
  59         webdeveloper_addAppliedStyle("webdeveloper-add-user-style-sheet");
  60     }
  61     else
  62     {
  63         webdeveloper_userStyleSheet = null;
  64         webdeveloper_removeStyleSheet("webdeveloper-add-user-style-sheet", true);
  65     }
  66 }
  67
  68 // Display CSS for the given media type
  69 function webdeveloper_displayCSSMediaType(type, reset)
  70 {
  71     var documentList     = webdeveloper_getDocuments(webdeveloper_getContentWindow());
  72     var documentLength   = documentList.length;
  73     var media            = null;
  74     var pageDocument     = null;
  75     var styleSheet       = null;
  76     var styleSheetLength = null;
  77     var styleSheetList   = null;
  78
  79     // Loop through the documents
  80     for(var i = 0; i < documentLength; i++)
  81     {
  82         pageDocument     = documentList[i];
  83         styleSheetList   = pageDocument.styleSheets;
  84         styleSheetLength = styleSheetList.length;
  85
  86         // Loop through the style sheets
  87         for(var j = 0; j < styleSheetLength; j++)
  88         {
  89             styleSheet = styleSheetList[j];
  90
  91             // If the style sheet is valid and not an alternate style sheet
  92             if(webdeveloper_isValidStyleSheet(styleSheet) && !webdeveloper_isAlternateStyleSheet(styleSheet))
  93             {
  94                 media = styleSheet.media;
  95
  96                 // If resetting
  97                 if(reset)
  98                 {
  99                     // If the style sheet has the webdeveloper-appended-screen media
 100                     if(webdeveloper_isMediaStyleSheet(styleSheet, "webdeveloper-appended-screen"))
 101                     {
 102                         media.deleteMedium("webdeveloper-appended-screen");
 103                         media.deleteMedium("screen");
 104                     }
 105                     else if(webdeveloper_isMediaStyleSheet(styleSheet, "webdeveloper-deleted-screen"))
 106                     {
 107                         media.appendMedium("screen");
 108                         media.deleteMedium("webdeveloper-deleted-screen");
 109                     }
 110                 }
 111                 else
 112                 {
 113                     // If the style sheet matches this media
 114                     if(webdeveloper_isMediaStyleSheet(styleSheet, type))
 115                     {
 116                         // If the style sheet has the screen media
 117                         if(!webdeveloper_isMediaStyleSheet(styleSheet, "screen"))
 118                         {
 119                             media.appendMedium("webdeveloper-appended-screen");
 120                             media.appendMedium("screen");
 121                         }
 122                     }
 123                     else if(webdeveloper_isMediaStyleSheet(styleSheet, "screen"))
 124                     {
 125                         // If the media length is not 0
 126                         if(media.length != 0)
 127                         {
 128                             media.deleteMedium("screen");
 129                         }
 130
 131                         media.appendMedium("webdeveloper-deleted-screen");
 132                     }
 133                 }
 134
 135                 // Force the styles to reapply by disabling and enabling the style sheet
 136                 styleSheet.disabled = true;
 137                 styleSheet.disabled = false;
 138             }
 139         }
 140     }
 141 }
 142
 143 // Display the disable individual style sheet menu
 144 function webdeveloper_displayDisableIndividualStyleSheetMenu(menu)
 145 {
 146     var currentDocument  = webdeveloper_getContentDocument();
 147     var mediaList        = null;
 148     var menuItem         = null;
 149     var ownerNode        = null;
 150     var styleSheet       = null;
 151     var styleSheetHref   = null;
 152     var styleSheetLabel  = null;
 153     var styleSheetList   = currentDocument.styleSheets;
 154     var styleSheetLength = styleSheetList.length;
 155
 156     webdeveloper_removeGeneratedMenuItems(menu);
 157
 158     // Loop through the style sheets
 159     for(var i = 0; i < styleSheetLength; i++)
 160     {
 161         styleSheet     = styleSheetList[i];
 162         ownerNode      = styleSheet.ownerNode;
 163         styleSheetHref = styleSheet.href;
 164
 165         // If this is a valid style sheet, is not an line style sheet and is not an alternate style sheet
 166         if(webdeveloper_isValidStyleSheet(styleSheet) && styleSheetHref != currentDocument.documentURI)
 167         {
 168             menuItem = document.createElement("menuitem");
 169
 170             // If the owner node is set, is not a processing instruction and has a title attribute
 171             if(ownerNode && ownerNode.nodeType != Components.interfaces.nsIDOMNode.PROCESSING_INSTRUCTION_NODE && ownerNode.hasAttribute("title"))
 172             {
 173                 styleSheetLabel = ownerNode.getAttribute("title");
 174             }
 175             else
 176             {
 177                 styleSheetLabel = styleSheetHref;
 178             }
 179
 180             menuItem.setAttribute("class", "webdeveloper-generated-menu");
 181             menuItem.setAttribute("label", styleSheetLabel);
 182             menuItem.setAttribute("oncommand", "webdeveloper_toggleIndividualStyleSheet('" + styleSheetHref + "')");
 183             menuItem.setAttribute("type", "checkbox");
 184
 185             // If the style sheet is disabled
 186             if(!styleSheet.disabled)
 187             {
 188                 menuItem.setAttribute("checked", true);
 189             }
 190
 191             menu.appendChild(menuItem);
 192         }
 193     }
 194
 195     // If the menu has no children
 196     if(!menu.hasChildNodes())
 197     {
 198         menuItem        = document.createElement("menuitem");
 199         styleSheetLabel = document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_noStyleSheets");
 200
 201         menuItem.disabled = true;
 202         menuItem.setAttribute("class", "webdeveloper-generated-menu");
 203         menuItem.setAttribute("label", styleSheetLabel);
 204         menu.appendChild(menuItem);
 205     }
 206 }
 207
 208 // Display CSS for the handheld media type
 209 function webdeveloper_displayHandheldCSS(element)
 210 {
 211     var printElement = document.getElementById("webdeveloper-display-print-css-menu");
 212
 213     webdeveloper_configureElementByAppliedStyle(printElement, "checked", "webdeveloper-display-print-css");
 214
 215     // If the print element is checked
 216     if(printElement.getAttribute("checked"))
 217     {
 218         webdeveloper_displayCSSMediaType("print", true);
 219         webdeveloper_removeStyleSheet("webdeveloper-display-print-css");
 220     }
 221
 222     webdeveloper_displayCSSMediaType("handheld", !element.getAttribute("checked"));
 223     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-display-handheld-css");
 224 }
 225
 226 // Display CSS for the print media type
 227 function webdeveloper_displayPrintCSS(element)
 228 {
 229     var handheldElement = document.getElementById("webdeveloper-display-handheld-css-menu");
 230
 231     webdeveloper_configureElementByAppliedStyle(handheldElement, "checked", "webdeveloper-display-handheld-css");
 232
 233     // If the handheld element is checked
 234     if(handheldElement.getAttribute("checked"))
 235     {
 236         webdeveloper_displayCSSMediaType("handheld", true);
 237         webdeveloper_removeStyleSheet("webdeveloper-display-handheld-css");
 238     }
 239
 240     webdeveloper_displayCSSMediaType("print", !element.getAttribute("checked"));
 241     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-display-print-css");
 242 }
 243
 244 // Allows the user to edit the CSS of the current page
 245 function webdeveloper_editCSS()
 246 {
 247     var stringBundle = document.getElementById("webdeveloper-string-bundle");
 248     var editCSS      = stringBundle.getString("webdeveloper_editCSS");
 249
 250     // If edit CSS is open in the dashboard
 251     if(webdeveloper_isOpenInDashboard(editCSS))
 252     {
 253         webdeveloper_closeInDashboard(editCSS);
 254     }
 255     else if(webdeveloper_pageHasFrames())
 256     {
 257         window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", stringBundle.getString("webdeveloper_framesNotSupported"));
 258     }
 259     else
 260     {
 261         webdeveloper_openInDashboard(editCSS, "chrome://webdeveloper/content/dashboard/edit_css.xul");
 262     }
 263 }
 264
 265 // Toggles the border box model
 266 function webdeveloper_toggleBorderBoxModel(element)
 267 {
 268     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/use_border_box_model.css", "webdeveloper-use-border-box-model");
 269 }
 270
 271 // Toggles the browser default styles
 272 function webdeveloper_toggleBrowserDefaultStyles(element)
 273 {
 274     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/disable_browser_default_styles.css", "webdeveloper-disable-browser-default-styles");
 275 }
 276
 277 // Toggles all the inline styles in elements in the document
 278 function webdeveloper_toggleDocumentInlineStyles(node, disable)
 279 {
 280     // If the node exists and is an element
 281     if(node && node.nodeType == Node.ELEMENT_NODE)
 282     {
 283         var childNodes       = node.childNodes;
 284         var childNodesLength = childNodes.length;
 285
 286         // If disabling styles and the node has a style attribute
 287         if(disable && node.hasAttribute("style"))
 288         {
 289             node.setAttribute("webdeveloper-inline-style", node.getAttribute("style"));
 290             node.removeAttribute("style");
 291         }
 292         else if(!disable && node.hasAttribute("webdeveloper-inline-style"))
 293         {
 294             node.setAttribute("style", node.getAttribute("webdeveloper-inline-style"));
 295             node.removeAttribute("webdeveloper-inline-style");
 296         }
 297
 298         // Loop through the child nodes
 299         for(var i = 0; i < childNodesLength; i++)
 300         {
 301             webdeveloper_toggleDocumentInlineStyles(childNodes[i], disable);
 302         }
 303     }
 304 }
 305
 306 // Toggles all the embedded styles on the page
 307 function webdeveloper_toggleEmbeddedStyles(element)
 308 {
 309     var disable          = element.getAttribute("checked");
 310     var documentList     = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 311     var documentLength   = documentList.length;
 312     var pageDocument     = null;
 313     var styleSheetLength = null;
 314     var styleSheetList   = null;
 315     var styleSheet       = null;
 316
 317     // Loop through the documents
 318     for(var i = 0; i < documentLength; i++)
 319     {
 320         pageDocument     = documentList[i];
 321         styleSheetList   = pageDocument.getElementsByTagName("style");
 322         styleSheetLength = styleSheetList.length;
 323
 324         // Loop through all the stylesheets
 325         for(var j = 0; j < styleSheetLength; j++)
 326         {
 327             styleSheet = styleSheetList[j].sheet;
 328
 329             // If this is a valid style sheet
 330             if(webdeveloper_isValidStyleSheet(styleSheet))
 331             {
 332                 styleSheet.disabled = disable;
 333             }
 334         }
 335
 336     }
 337
 338     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-disable-embedded-styles");
 339 }
 340
 341 // Toggles all the inline styles in elements on the page
 342 function webdeveloper_toggleInlineStyles(element)
 343 {
 344     var disable        = element.getAttribute("checked");
 345     var documentList   = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 346     var documentLength = documentList.length;
 347
 348     // Loop through the documents
 349     for(var i = 0; i < documentLength; i++)
 350     {
 351         webdeveloper_toggleDocumentInlineStyles(documentList[i].documentElement, disable);
 352     }
 353
 354     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-disable-inline-styles");
 355 }
 356
 357 // Toggles all the linked styles on the page
 358 function webdeveloper_toggleLinkedStyles(element)
 359 {
 360     var disable          = element.getAttribute("checked");
 361     var documentList     = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 362     var documentLength   = documentList.length;
 363     var ownerNode        = null;
 364     var pageDocument     = null;
 365     var styleSheet       = null;
 366     var styleSheetLength = null;
 367     var styleSheetList   = null;
 368
 369     // Loop through the documents
 370     for(var i = 0; i < documentLength; i++)
 371     {
 372         pageDocument     = documentList[i];
 373         styleSheetList   = pageDocument.styleSheets;
 374         styleSheetLength = styleSheetList.length;
 375
 376         // Loop through all the stylesheets
 377         for(var j = 0; j < styleSheetLength; j++)
 378         {
 379             styleSheet = styleSheetList[j];
 380
 381             // If this is a valid style sheet, is not an inline style sheet and is not an alternate style sheet or style sheets are being disabled
 382             if(webdeveloper_isValidStyleSheet(styleSheet) && styleSheet.href != pageDocument.documentURI && (!webdeveloper_isAlternateStyleSheet(styleSheet) || disable))
 383             {
 384                 styleSheet.disabled = disable;
 385             }
 386         }
 387     }
 388
 389     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-disable-linked-styles");
 390 }
 391
 392 // Toggles the print styles for the page
 393 function webdeveloper_togglePrintStyles(element)
 394 {
 395     var disable         = element.getAttribute("checked");
 396     var documentList    = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 397     var documentLength  = documentList.length;
 398     var pageDocument    = null;
 399     var styleSheet      = null;
 400     var styleSheetLength = null;
 401     var styleSheetList  = null;
 402
 403     // Loop through the documents
 404     for(var i = 0; i < documentLength; i++)
 405     {
 406         pageDocument     = documentList[i];
 407         styleSheetList   = pageDocument.styleSheets;
 408         styleSheetLength = styleSheetList.length;
 409
 410         // Loop through the style sheets
 411         for(var j = 0; j < styleSheetLength; j++)
 412         {
 413             styleSheet = styleSheetList[j];
 414
 415             // If the style sheet is valid, is not an alternate style sheet and is a print style sheet, but not a screen style sheet
 416             if(webdeveloper_isValidStyleSheet(styleSheet) && !webdeveloper_isAlternateStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "print") && !webdeveloper_isMediaStyleSheet(styleSheet, "screen"))
 417             {
 418                 styleSheet.disabled = disable;
 419             }
 420         }
 421     }
 422
 423     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-disable-print-styles");
 424 }
 425
 426 // Toggles the styles for the page
 427 function webdeveloper_toggleStyles(element)
 428 {
 429     var disable          = true;
 430     var contentWindow    = webdeveloper_getContentWindow();
 431     var documentList     = webdeveloper_getDocuments(contentWindow);
 432     var documentLength   = documentList.length;
 433     var key              = null;
 434     var ownerNode        = null;
 435     var pageDocument     = null;
 436     var styleElement     = null;
 437     var styleSheet       = null;
 438     var styleSheetLength = null;
 439     var styleSheetList   = null;
 440
 441     // If the element is set
 442     if(element)
 443     {
 444         disable = element.getAttribute("checked");
 445     }
 446     else
 447     {
 448         var currentDocument = contentWindow.document;
 449
 450         element = document.getElementById("webdeveloper-disable-all-styles-menu");
 451
 452         // If the disable all styles element is set
 453         if(currentDocument.getElementById("webdeveloper-disable-all-styles"))
 454         {
 455             disable = false;
 456         }
 457
 458         webdeveloper_configureElement(element, "checked", disable);
 459     }
 460
 461     // Loop through the documents
 462     for(var i = 0; i < documentLength; i++)
 463     {
 464         pageDocument     = documentList[i];
 465         styleSheetList   = pageDocument.styleSheets;
 466         styleSheetLength = styleSheetList.length;
 467
 468         // Loop through all the stylesheets
 469         for(var j = 0; j < styleSheetLength; j++)
 470         {
 471             styleSheet = styleSheetList[j];
 472
 473             // If this is a valid style sheet and is not an alternate style sheet
 474             if(webdeveloper_isValidStyleSheet(styleSheet) && (!webdeveloper_isAlternateStyleSheet(styleSheet) || disable))
 475             {
 476                 styleSheet.disabled = disable;
 477             }
 478         }
 479
 480         webdeveloper_toggleDocumentInlineStyles(pageDocument.documentElement, disable);
 481     }
 482
 483     // Toggle other CSS feature keyboard shortcuts
 484     document.getElementById("webdeveloper-edit-css-key").setAttribute("disabled", disable);
 485     document.getElementById("webdeveloper-view-style-information-key").setAttribute("disabled", disable);
 486
 487     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/empty.css", "webdeveloper-disable-all-styles");
 488 }
 489
 490 // Updates the CSS menu
 491 function webdeveloper_updateCSSMenu(suffix)
 492 {
 493     var currentDocument         = webdeveloper_getContentDocument();
 494     var disableAllStylesChecked = webdeveloper_contains(webdeveloper_appliedStyles, "webdeveloper-disable-all-styles");
 495     var menu                    = document.getElementById("webdeveloper-edit-css-" + suffix);
 496
 497     // If the menu exists
 498     if(menu)
 499     {
 500         var editCSSOpen = webdeveloper_isOpenInDashboard(document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_editCSS"));
 501
 502         webdeveloper_configureElement(menu, "checked", editCSSOpen);
 503
 504         // If edit CSS is not open and the page has frames
 505         if(!editCSSOpen && webdeveloper_pageHasFrames())
 506         {
 507             menu.setAttribute("class", "menuitem-iconic");
 508         }
 509         else if(menu.hasAttribute("class"))
 510         {
 511             menu.removeAttribute("class");
 512         }
 513
 514         webdeveloper_configureElement(menu, "disabled", disableAllStylesChecked);
 515     }
 516
 517     menu = document.getElementById("webdeveloper-view-style-information-" + suffix);
 518
 519     // If the menu exists
 520     if(menu)
 521     {
 522         // If the DOM Inspector is not found
 523         if(!webdeveloper_isDOMInspectorAvailable())
 524         {
 525             menu.setAttribute("class", "menuitem-iconic");
 526         }
 527         else if(menu.hasAttribute("class"))
 528         {
 529             menu.removeAttribute("class");
 530         }
 531
 532         webdeveloper_configureElement(menu, "disabled", disableAllStylesChecked);
 533         webdeveloper_configureElementByAppliedStyle(menu, "checked", "webdeveloper-view-style-information");
 534     }
 535
 536     webdeveloper_configureElement(document.getElementById("webdeveloper-add-user-style-sheet-" + suffix), "disabled", disableAllStylesChecked);
 537     webdeveloper_configureElement(document.getElementById("webdeveloper-disable-individual-style-sheet-" + suffix), "disabled", disableAllStylesChecked);
 538     webdeveloper_configureElement(document.getElementById("webdeveloper-display-media-type-" + suffix), "disabled", disableAllStylesChecked);
 539     webdeveloper_configureElement(document.getElementById("webdeveloper-use-border-box-model-" + suffix), "disabled", disableAllStylesChecked);
 540     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-add-user-style-sheet-" + suffix), "checked", "webdeveloper-add-user-style-sheet");
 541     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-use-border-box-model-" + suffix), "checked", "webdeveloper-use-border-box-model");
 542 }
 543
 544 // Updates the CSS media type menu
 545 function webdeveloper_updateCSSMediaTypeMenu(suffix)
 546 {
 547     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-display-handheld-css-" + suffix), "checked", "webdeveloper-display-handheld-css");
 548     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-display-print-css-" + suffix), "checked", "webdeveloper-display-print-css");
 549 }
 550
 551 // Updates the disable styles menu
 552 function webdeveloper_updateDisableStylesMenu(suffix)
 553 {
 554     var currentDocument         = webdeveloper_getContentDocument();
 555     var disableAllStylesChecked = webdeveloper_contains(webdeveloper_appliedStyles, "webdeveloper-disable-all-styles");
 556
 557     webdeveloper_configureElement(document.getElementById("webdeveloper-disable-all-styles-" + suffix), "checked", disableAllStylesChecked);
 558     webdeveloper_configureElement(document.getElementById("webdeveloper-disable-browser-default-styles-" + suffix), "disabled", disableAllStylesChecked);
 559     webdeveloper_configureElement(document.getElementById("webdeveloper-disable-embedded-styles-" + suffix), "disabled", disableAllStylesChecked);
 560     webdeveloper_configureElement(document.getElementById("webdeveloper-disable-inline-styles-" + suffix), "disabled", disableAllStylesChecked);
 561     webdeveloper_configureElement(document.getElementById("webdeveloper-disable-linked-styles-" + suffix), "disabled", disableAllStylesChecked);
 562     webdeveloper_configureElement(document.getElementById("webdeveloper-disable-print-styles-" + suffix), "disabled", disableAllStylesChecked);
 563     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-disable-browser-default-styles-" + suffix), "checked", "webdeveloper-disable-browser-default-styles");
 564     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-disable-embedded-styles-" + suffix), "checked", "webdeveloper-disable-embedded-styles");
 565     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-disable-inline-styles-" + suffix), "checked", "webdeveloper-disable-inline-styles");
 566     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-disable-linked-styles-" + suffix), "checked", "webdeveloper-disable-linked-styles");
 567     webdeveloper_configureElementByAppliedStyle(document.getElementById("webdeveloper-disable-print-styles-" + suffix), "checked", "webdeveloper-disable-print-styles");
 568 }
 569
 570 // View CSS
 571 function webdeveloper_viewCSS()
 572 {
 573     var divElement        = null;
 574     var documentList      = webdeveloper_getDocuments(webdeveloper_getContentWindow());
 575     var documentLength    = documentList.length;
 576     var documentURL       = null;
 577     var inlineStylesText  = "";
 578     var linkElement       = null;
 579     var oldTab            = getBrowser().selectedTab;
 580     var oldURL            = getBrowser().currentURI.spec;
 581     var generatedDocument = webdeveloper_generateDocument("");
 582     var bodyElement       = webdeveloper_getDocumentBodyElement(generatedDocument);
 583     var headElement       = webdeveloper_getDocumentHeadElement(generatedDocument);
 584     var headerElement     = generatedDocument.createElement("h1");
 585     var pageDocument      = null;
 586     var preElement        = null;
 587     var scriptElement     = generatedDocument.createElement("script");
 588     var spanElement       = null;
 589     var stringBundle      = document.getElementById("webdeveloper-string-bundle");
 590     var styleSheet        = null;
 591     var styleSheetHref    = null;
 592     var styleSheetList    = new Array();
 593     var styleSheetLength  = null;
 594     var title             = stringBundle.getFormattedString("webdeveloper_viewCSSTitle", [oldURL]);
 595
 596     generatedDocument.title = title;
 597
 598     webdeveloper_addGeneratedStyles(generatedDocument);
 599
 600     headerElement.appendChild(generatedDocument.createTextNode(title));
 601     bodyElement.appendChild(headerElement);
 602
 603     webdeveloper_addGeneratedTools(generatedDocument);
 604
 605     // Loop through the documents
 606     for(var i = 0; i < documentLength; i++)
 607     {
 608         headerElement    = generatedDocument.createElement("h2");
 609         inlineStylesText = "";
 610         linkElement      = generatedDocument.createElement("a");
 611         pageDocument     = documentList[i];
 612         documentURL      = pageDocument.documentURI;
 613         styleSheetList   = pageDocument.getElementsByTagName("style");
 614         styleSheetLength = styleSheetList.length;
 615
 616         linkElement.setAttribute("href", documentURL);
 617         linkElement.appendChild(generatedDocument.createTextNode(documentURL));
 618         headerElement.appendChild(linkElement);
 619         bodyElement.appendChild(headerElement);
 620
 621         // Loop through the inline style sheets
 622         for(var j = 0; j < styleSheetLength; j++)
 623         {
 624             styleSheet = styleSheetList[j];
 625
 626             // If this is a valid style sheet
 627             if(webdeveloper_isValidStyleSheet(styleSheet.sheet) && (!styleSheet.hasAttribute("id") || styleSheet.getAttribute("id").indexOf("webdeveloper-") != 0))
 628             {
 629                 inlineStylesText += styleSheet.innerHTML.trim() + "\n\n";
 630             }
 631         }
 632
 633         // If there are inline styles
 634         if(inlineStylesText != "")
 635         {
 636             divElement    = generatedDocument.createElement("div");
 637             headerElement = generatedDocument.createElement("h3");
 638             preElement    = generatedDocument.createElement("pre");
 639             spanElement   = generatedDocument.createElement("span");
 640
 641             spanElement.setAttribute("class", "expanded pivot");
 642             headerElement.appendChild(spanElement);
 643             headerElement.appendChild(generatedDocument.createTextNode(stringBundle.getFormattedString("webdeveloper_embeddedStylesFrom", [documentURL])));
 644             bodyElement.appendChild(headerElement);
 645
 646             preElement.appendChild(generatedDocument.createTextNode(inlineStylesText));
 647             divElement.setAttribute("class", "output");
 648             divElement.appendChild(preElement);
 649             bodyElement.appendChild(divElement);
 650         }
 651
 652         styleSheetList   = webdeveloper_getStyleSheetsForDocument(pageDocument, true, true);
 653         styleSheetLength = styleSheetList.length;
 654
 655         // Loop through the style sheets
 656         for(j = 0; j < styleSheetLength; j++)
 657         {
 658             styleSheet = styleSheetList[j];
 659
 660             // If this is a valid style sheet and is not an inline style sheet
 661             if(webdeveloper_isValidStyleSheet(styleSheet) && styleSheet.href != documentURL)
 662             {
 663                 divElement     = generatedDocument.createElement("div");
 664                 headerElement  = generatedDocument.createElement("h3");
 665                 linkElement    = generatedDocument.createElement("a");
 666                 preElement     = generatedDocument.createElement("pre");
 667                 spanElement    = generatedDocument.createElement("span");
 668                 styleSheetHref = styleSheet.href;
 669
 670                 spanElement.setAttribute("class", "expanded pivot");
 671                 headerElement.appendChild(spanElement);
 672                 linkElement.setAttribute("href", styleSheetHref);
 673                 linkElement.appendChild(generatedDocument.createTextNode(styleSheetHref));
 674                 headerElement.appendChild(linkElement);
 675                 bodyElement.appendChild(headerElement);
 676                 preElement.appendChild(generatedDocument.createTextNode(webdeveloper_retrieveSource(styleSheetHref).replace(new RegExp("\r", "gi"), "\n")));
 677                 divElement.setAttribute("class", "output");
 678                 divElement.appendChild(preElement);
 679                 bodyElement.appendChild(divElement);
 680             }
 681         }
 682     }
 683
 684     scriptElement.setAttribute("defer", "defer");
 685     scriptElement.setAttribute("src", "chrome://webdeveloper/content/common/xpath.js");
 686     scriptElement.setAttribute("type", "text/javascript");
 687     headElement.appendChild(scriptElement);
 688
 689     scriptElement = generatedDocument.createElement("script");
 690
 691     scriptElement.setAttribute("defer", "defer");
 692     scriptElement.setAttribute("src", "chrome://webdeveloper/content/generated/output_pivot.js");
 693     scriptElement.setAttribute("type", "text/javascript");
 694     headElement.appendChild(scriptElement);
 695
 696     // If the open tabs in background preference is set to true
 697     if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
 698     {
 699         getBrowser().selectedTab = oldTab;
 700     }
 701 }