doc/webdeveloper/dashboard/edit_css.js

   1 var webdeveloper_editCSSIntervalId      = null;
   2 var webdeveloper_editCSSOldStyleText    = new Array();
   3 var webdeveloper_editCSSSelectedTab     = 0;
   4 var webdeveloper_editCSSUpdateFrequency = 500;
   5
   6 // Applies the CSS
   7 function webdeveloper_applyCSS()
   8 {
   9     var contentDocument = webdeveloper_getContentDocument();
  10     var headElement     = webdeveloper_getDocumentHeadElement(contentDocument);
  11     var styleElement    = null;
  12     var styleText       = null;
  13     var textBox         = null;
  14     var textBoxes       = document.getElementById("webdeveloper-edit-css-tab-panels").getElementsByTagName("textbox");
  15     var textBoxesLength = textBoxes.length;
  16
  17     // Loop through the text boxes
  18     for(var i = 0; i < textBoxesLength; i++)
  19     {
  20         styleElement = contentDocument.getElementById("webdeveloper-edit-css-style-" + i);
  21         textBox      = textBoxes[i];
  22         styleText    = textBox.value;
  23
  24         // If the strip import preference is not set or is set to true
  25         if(!webdeveloper_isPreferenceSet("webdeveloper.edit.css.import.strip") || webdeveloper_getBooleanPreference("webdeveloper.edit.css.import.strip", true))
  26         {
  27             styleText = styleText.replace(new RegExp("@import.*?;", "gi"), "");
  28         }
  29
  30         // If the style element does not exist
  31         if(!styleElement)
  32         {
  33             styleElement = contentDocument.createElement("style");
  34
  35             styleElement.setAttribute("id", "webdeveloper-edit-css-style-" + i);
  36             styleElement.setAttribute("type", "text/css");
  37             styleElement.setAttribute("xml:base", textBox.getAttribute("webdeveloper-base"));
  38             headElement.appendChild(styleElement);
  39
  40             // Make the styles different to make sure they get written if not there already
  41             webdeveloper_editCSSOldStyleText[i] = styleText + " ";
  42         }
  43
  44         // If the style text is not the same as the old style text
  45         if(styleText != webdeveloper_editCSSOldStyleText[i])
  46         {
  47             webdeveloper_editCSSOldStyleText[i] = styleText;
  48
  49             webdeveloper_removeAllChildElements(styleElement);
  50             styleElement.appendChild(contentDocument.createTextNode(styleText));
  51         }
  52     }
  53 }
  54
  55 // Clear the CSS
  56 function webdeveloper_clearCSS()
  57 {
  58     webdeveloper_getSelectedPanel().firstChild.value = "";
  59 }
  60
  61 // Reinitializes the dashboard when the page changes
  62 function webdeveloper_editCSSContentPageLoad(event)
  63 {
  64     var eventTarget = event.target;
  65
  66     // Try to get the original target
  67     try
  68     {
  69         var originalTarget = event.originalTarget;
  70
  71         // If the page is the target and the URI matches
  72         if(originalTarget && eventTarget && eventTarget.contentDocument && eventTarget.hasAttribute && eventTarget.hasAttribute("id") && eventTarget.getAttribute("id").toLowerCase() == "content" && originalTarget.documentURI == eventTarget.contentDocument.documentURI)
  73         {
  74             // If the CSS stick preference is not set to true
  75             if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true))
  76             {
  77                 webdeveloper_resetCSS();
  78             }
  79         }
  80     }
  81     catch(exception)
  82     {
  83         // Do nothing
  84     }
  85 }
  86
  87 // Handles a browser tab being selected
  88 function webdeveloper_editCSSMainTabSelect(event)
  89 {
  90     var browser     = window.top.getBrowser();
  91     var selectedTab = browser.mTabBox.selectedIndex;
  92
  93     // If the selected tab is different
  94     if(selectedTab != webdeveloper_editCSSSelectedTab)
  95     {
  96         var browsers      = browser.browsers;
  97         var browserLength = browsers.length;
  98
  99         // If the previous selected tab equals the browser length
 100         if(webdeveloper_editCSSSelectedTab == browserLength)
 101         {
 102             webdeveloper_editCSSSelectedTab = browserLength - 1;
 103         }
 104
 105         webdeveloper_resetDocument(browsers[webdeveloper_editCSSSelectedTab].contentDocument);
 106
 107         webdeveloper_editCSSSelectedTab = selectedTab;
 108
 109         // If the CSS stick preference is not set to true
 110         if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true))
 111         {
 112             webdeveloper_resetCSS();
 113         }
 114     }
 115 }
 116
 117 // Returns the selected panel
 118 function webdeveloper_getSelectedPanel()
 119 {
 120     var selectedPanel = document.getElementById("webdeveloper-edit-css-tab-box").selectedPanel;
 121
 122     // If the selected panel is not set
 123     if(!selectedPanel)
 124     {
 125         selectedPanel = document.getElementById("webdeveloper-edit-css-tab-panels").firstChild;
 126     }
 127
 128     return selectedPanel;
 129 }
 130
 131 // Returns the selected tab
 132 function webdeveloper_getSelectedTab()
 133 {
 134     var selectedTab = document.getElementById("webdeveloper-edit-css-tab-box").selectedTab;
 135
 136     // If the selected tab is not set
 137     if(!selectedTab)
 138     {
 139         selectedTab = document.getElementById("webdeveloper-edit-css-tabs").firstChild;
 140     }
 141
 142     return selectedTab;
 143 }
 144
 145 // Initializes the edit CSS dashboard
 146 function webdeveloper_initializeEditCSS()
 147 {
 148     var mainTabBox = window.top.getBrowser().mTabBox;
 149
 150     webdeveloper_editCSSSelectedTab     = mainTabBox.selectedIndex;
 151     webdeveloper_editCSSUpdateFrequency = webdeveloper_getIntegerPreference("webdeveloper.edit.update.frequency", true);
 152
 153     document.getElementById("webdeveloper-search-dashboard-text").addEventListener("keypress", webdeveloper_searchTextKeyPress, false);
 154     mainTabBox.addEventListener("select", webdeveloper_editCSSMainTabSelect, false);
 155     window.top.addEventListener("load", webdeveloper_editCSSContentPageLoad, true);
 156
 157     webdeveloper_updateStickCSS();
 158     webdeveloper_retrieveCSS();
 159
 160     // If the update frequency is greater than 0
 161     if(webdeveloper_editCSSUpdateFrequency > 0)
 162     {
 163         webdeveloper_editCSSIntervalId = window.setInterval(webdeveloper_applyCSS, webdeveloper_editCSSUpdateFrequency);
 164     }
 165 }
 166
 167 // Opens new CSS
 168 function webdeveloper_openCSS()
 169 {
 170     var filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
 171     var stringBundle = document.getElementById("webdeveloper-string-bundle");
 172
 173     filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
 174     filePicker.init(window, stringBundle.getString("webdeveloper_openStyleSheet"), filePicker.modeOpen);
 175
 176     // If the user selected a style sheet
 177     if(filePicker.show() == filePicker.returnOK)
 178     {
 179         var inputStream      = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
 180         var scriptableStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
 181
 182         inputStream.init(filePicker.file, 0x01, 00444, null);
 183         scriptableStream.init(inputStream);
 184
 185         webdeveloper_getSelectedPanel().firstChild.value = scriptableStream.read(scriptableStream.available());
 186
 187         scriptableStream.close();
 188         inputStream.close();
 189     }
 190 }
 191
 192 // Resets the edited CSS
 193 function webdeveloper_resetCSS()
 194 {
 195     webdeveloper_removeAllChildElements(document.getElementById("webdeveloper-edit-css-tab-panels"));
 196     webdeveloper_removeAllChildElements(document.getElementById("webdeveloper-edit-css-tabs"));
 197     webdeveloper_resetDocument(webdeveloper_getContentDocument());
 198     webdeveloper_retrieveCSS();
 199 }
 200
 201 // Resets the specified document
 202 function webdeveloper_resetDocument(contentDocument)
 203 {
 204     var styleElement     = null;
 205     var styleElements    = contentDocument.getElementsByTagName("style");
 206     var styleSheet       = null;
 207     var styleSheetList   = webdeveloper_getStyleSheetsForDocument(contentDocument, true, false);
 208     var styleSheetLength = styleSheetList.length;
 209
 210     // Loop through the style elements
 211     for(var i = 0; i < styleElements.length; i++)
 212     {
 213         styleElement = styleElements[i];
 214
 215         // If the style element has an id starting with webdeveloper-edit-css-style-
 216         if(styleElement.hasAttribute("id") && styleElement.getAttribute("id").indexOf("webdeveloper-edit-css-style-") == 0)
 217         {
 218             webdeveloper_removeElement(styleElement);
 219             i--;
 220         }
 221     }
 222
 223     // Loop through the style sheets
 224     for(i = 0; i < styleSheetLength; i++)
 225     {
 226         styleSheet = styleSheetList[i];
 227
 228         // If the style sheet is a valid style sheet, is for the screen and is not an alternate style sheet
 229         if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !webdeveloper_isAlternateStyleSheet(styleSheet))
 230         {
 231            styleSheet.disabled = false;
 232         }
 233     }
 234
 235 }
 236
 237 // Retrieves the CSS from the current page
 238 function webdeveloper_retrieveCSS()
 239 {
 240     var contentDocument  = webdeveloper_getContentDocument();
 241     var documentURL      = contentDocument.documentURI;
 242     var inlineStylesText = "";
 243     var result           = null;
 244     var results          = new Array();
 245     var resultsLength    = null;
 246     var stringBundle     = document.getElementById("webdeveloper-string-bundle");
 247     var styleElement     = null;
 248     var styleSheet       = null;
 249     var styleSheetList   = webdeveloper_getStyleSheetsForDocument(contentDocument, true, false);
 250     var styleSheetLength = styleSheetList.length;
 251     var tab              = null;
 252     var tabPanel         = null;
 253     var tabs             = document.getElementById("webdeveloper-edit-css-tabs");
 254     var tabPanels        = document.getElementById("webdeveloper-edit-css-tab-panels");
 255     var textBox          = null;
 256     var textBoxStyle     = "";
 257     var url              = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL);
 258
 259     url.spec = documentURL;
 260
 261     // If the edit CSS background color preference is set
 262     if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.background"))
 263     {
 264         textBoxStyle += "background-color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.background", true) + " !important; ";
 265     }
 266
 267     // If the edit CSS text color preference is set
 268     if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.text"))
 269     {
 270         textBoxStyle += "color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.text", true) + " !important; ";
 271     }
 272
 273     // If the edit CSS font preference is set
 274     if(webdeveloper_isPreferenceSet("webdeveloper.edit.font.size"))
 275     {
 276         textBoxStyle += "font-size: " + webdeveloper_getIntegerPreference("webdeveloper.edit.font.size", true) + "px !important; ";
 277     }
 278
 279     textBoxStyle = textBoxStyle.trim();
 280
 281     // Loop through the style sheets
 282     for(var i = 0; i < styleSheetLength; i++)
 283     {
 284         styleSheet = styleSheetList[i];
 285
 286         // If this is a valid style sheet, is for the screen, is not an alternate style sheet, is not disabled and is not an inline style sheet
 287         if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !webdeveloper_isAlternateStyleSheet(styleSheet) && !styleSheet.disabled && styleSheet.href != documentURL)
 288         {
 289             results = webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results);
 290         }
 291     }
 292
 293     styleSheetList   = contentDocument.getElementsByTagName("style");
 294     styleSheetLength = styleSheetList.length;
 295
 296     // Loop through the inline style sheets
 297     for(i = 0; i < styleSheetLength; i++)
 298     {
 299         styleElement = styleSheetList[i];
 300         styleSheet   = styleElement.sheet;
 301
 302         // If this is a valid style sheet, is for the screen and is not disabled
 303         if(webdeveloper_isValidStyleSheet(styleSheet) && (!styleElement.hasAttribute("id") || styleElement.getAttribute("id").indexOf("webdeveloper-") != 0) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !styleSheet.disabled)
 304         {
 305             inlineStylesText += styleElement.innerHTML.trim() + "\n\n";
 306
 307             styleSheet.disabled = true;
 308         }
 309     }
 310
 311     // If there are inline styles
 312     if(inlineStylesText != "")
 313     {
 314         tab      = document.createElement("tab");
 315         tabPanel = document.createElement("tabpanel");
 316         textBox  = document.createElement("textbox");
 317
 318         tab.setAttribute("label", stringBundle.getString("webdeveloper_embeddedStyles"));
 319         textBox.setAttribute("flex", "1");
 320         textBox.setAttribute("multiline", "true");
 321         textBox.setAttribute("style", textBoxStyle);
 322         textBox.setAttribute("value", inlineStylesText);
 323         textBox.setAttribute("webdeveloper-base", url.directory);
 324
 325         // If the edit CSS wrap preference is not set to true
 326         if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
 327         {
 328             textBox.setAttribute("wrap", "off");
 329         }
 330
 331         tabPanel.appendChild(textBox);
 332         results.push(new Array(tab, tabPanel));
 333     }
 334
 335     resultsLength = results.length;
 336
 337     // Loop through the results
 338     for(i = 0; i < resultsLength; i++)
 339     {
 340         result = results[i];
 341
 342         tabPanels.appendChild(result[1]);
 343         tabs.appendChild(result[0]);
 344     }
 345
 346     // If there are no tabs
 347     if(tabs.childNodes.length == 0)
 348     {
 349         tab      = document.createElement("tab");
 350         tabPanel = document.createElement("tabpanel");
 351         textBox  = document.createElement("textbox");
 352
 353         tab.setAttribute("label", stringBundle.getString("webdeveloper_editCSS"));
 354         textBox.setAttribute("flex", "1");
 355         textBox.setAttribute("multiline", "true");
 356         textBox.setAttribute("style", textBoxStyle);
 357         textBox.setAttribute("webdeveloper-base", url.directory);
 358
 359         // If the edit CSS wrap preference is not set to true
 360         if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
 361         {
 362             textBox.setAttribute("wrap", "off");
 363         }
 364
 365         tabPanel.appendChild(textBox);
 366         tabPanels.appendChild(tabPanel);
 367         tabs.appendChild(tab);
 368     }
 369
 370     tabs.selectedIndex = 0;
 371
 372     webdeveloper_applyCSS();
 373 }
 374
 375 // Retrieves the style sheet details
 376 function webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results)
 377 {
 378     var styleSheetHref = styleSheet.href;
 379     var position       = styleSheetHref.lastIndexOf("/");
 380     var stylesText     = webdeveloper_retrieveSource(styleSheetHref);
 381     var tab            = document.createElement("tab");
 382     var tabPanel       = document.createElement("tabpanel");
 383     var textBox        = document.createElement("textbox");
 384     var url            = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL);
 385
 386     url.spec = styleSheetHref;
 387
 388     tab.setAttribute("label", url.fileName);
 389     textBox.setAttribute("flex", "1");
 390     textBox.setAttribute("multiline", "true");
 391     textBox.setAttribute("style", textBoxStyle);
 392     textBox.setAttribute("value", stylesText);
 393     textBox.setAttribute("webdeveloper-base", url.directory);
 394
 395     // If the edit CSS wrap preference is not set to true
 396     if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
 397     {
 398         textBox.setAttribute("wrap", "off");
 399     }
 400
 401     tabPanel.appendChild(textBox);
 402     results.push(new Array(tab, tabPanel));
 403
 404     styleSheet.disabled = true;
 405
 406     return results;
 407 }
 408
 409 // Saves the CSS
 410 function webdeveloper_saveCSS()
 411 {
 412     var filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
 413     var result       = null;
 414     var stringBundle = document.getElementById("webdeveloper-string-bundle");
 415     var styleText    = webdeveloper_getSelectedPanel().firstChild.value;
 416
 417     filePicker.defaultExtension = "css";
 418     filePicker.defaultString    = webdeveloper_getSelectedTab().getAttribute("label");
 419
 420     filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
 421     filePicker.init(window, stringBundle.getString("webdeveloper_saveStyleSheet"), filePicker.modeSave);
 422
 423     result = filePicker.show();
 424
 425     // If the user selected a style sheet
 426     if(result == filePicker.returnOK || result == filePicker.returnReplace)
 427     {
 428         var file         = filePicker.file;
 429         var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
 430
 431         // If the file does not exist
 432         if(!file.exists())
 433         {
 434             file.create(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 00644);
 435         }
 436
 437         outputStream.init(file, 0x04 | 0x08 | 0x20, 00644, null);
 438         outputStream.write(styleText, styleText.length);
 439         outputStream.close();
 440     }
 441 }
 442
 443 // Searches the CSS
 444 function webdeveloper_searchCSS()
 445 {
 446     var searchText = document.getElementById("webdeveloper-search-dashboard-text").value;
 447
 448     // If the search text is set
 449     if(searchText)
 450     {
 451         webdeveloper_getSelectedPanel().firstChild.focus();
 452
 453         // If the search failed to find a match
 454         if(!window.find(searchText, false, false, true, false, false, false))
 455         {
 456             webdeveloper_getSelectedPanel().firstChild.setSelectionRange(0, 0);
 457             window.find(searchText, false, false, true, false, false, false);
 458         }
 459     }
 460 }
 461
 462 // Searches the CSS when the enter key is pressed
 463 function webdeveloper_searchTextKeyPress(event)
 464 {
 465     var keyCode = event.keyCode;
 466
 467     // If the key code is set and is 13
 468     if(keyCode && keyCode == 13)
 469     {
 470         webdeveloper_searchCSS();
 471     }
 472 }
 473
 474 // Toggles sticking the CSS
 475 function webdeveloper_toggleStickCSS()
 476 {
 477     webdeveloper_setBooleanPreference("webdeveloper.edit.stick", !webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true));
 478
 479     webdeveloper_updateStickCSS();
 480 }
 481
 482 // Unloads edit CSS
 483 function webdeveloper_unloadEditCSS()
 484 {
 485     webdeveloper_editCSSOldStyleText = new Array();
 486
 487     webdeveloper_resetDocument(webdeveloper_getContentDocument());
 488     window.clearInterval(webdeveloper_editCSSIntervalId);
 489
 490     // Try to remove the event listener
 491     try
 492     {
 493         document.getElementById("webdeveloper-search-dashboard-text").removeEventListener("keypress", webdeveloper_searchTextKeyPress, false);
 494     }
 495     catch(exception)
 496     {
 497         // Do nothing
 498     }
 499
 500     // Try to remove the event listener
 501     try
 502     {
 503         window.top.getBrowser().mTabBox.removeEventListener("select", webdeveloper_editCSSMainTabSelect, false);
 504     }
 505     catch(exception)
 506     {
 507         // Do nothing
 508     }
 509
 510     // Try to remove the event listener
 511     try
 512     {
 513         window.top.removeEventListener("load", webdeveloper_editCSSContentPageLoad, true);
 514     }
 515     catch(exception)
 516     {
 517         // Do nothing
 518     }
 519 }
 520
 521 // Updates the stick CSS button
 522 function webdeveloper_updateStickCSS()
 523 {
 524     var element      = document.getElementById("webdeveloper-stick-dashboard");
 525     var labelValue   = null;
 526     var stick        = webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true);
 527     var stringBundle = document.getElementById("webdeveloper-string-bundle");
 528
 529     // If the element exists
 530     if(element)
 531     {
 532         // If sticking the CSS
 533         if(stick)
 534         {
 535             labelValue = stringBundle.getString("webdeveloper_unstick");
 536
 537             element.setAttribute("class", "unstick webdeveloper-dashboard-button");
 538         }
 539         else
 540         {
 541             labelValue = stringBundle.getString("webdeveloper_stick");
 542
 543             element.setAttribute("class", "webdeveloper-dashboard-button");
 544         }
 545
 546         element.setAttribute("tooltiptext", labelValue);
 547     }
 548 }