1 var webdeveloper_editCSSIntervalId
= null;
2 var webdeveloper_editCSSOldStyleText
= new Array();
3 var webdeveloper_editCSSSelectedTab
= 0;
4 var webdeveloper_editCSSUpdateFrequency
= 500;
7 function webdeveloper_applyCSS()
9 var contentDocument
= webdeveloper_getContentDocument();
10 var headElement
= webdeveloper_getDocumentHeadElement(contentDocument
);
11 var styleElement
= null;
14 var textBoxes
= document
.getElementById("webdeveloper-edit-css-tab-panels").getElementsByTagName("textbox");
15 var textBoxesLength
= textBoxes
.length
;
17 // Loop through the text boxes
18 for(var i
= 0; i
< textBoxesLength
; i
++)
20 styleElement
= contentDocument
.getElementById("webdeveloper-edit-css-style-" + i
);
21 textBox
= textBoxes
[i
];
22 styleText
= textBox
.value
;
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))
27 styleText
= styleText
.replace(new RegExp("@import.*?;", "gi"), "");
30 // If the style element does not exist
33 styleElement
= contentDocument
.createElement("style");
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
);
40 // Make the styles different to make sure they get written if not there already
41 webdeveloper_editCSSOldStyleText
[i
] = styleText
+ " ";
44 // If the style text is not the same as the old style text
45 if(styleText
!= webdeveloper_editCSSOldStyleText
[i
])
47 webdeveloper_editCSSOldStyleText
[i
] = styleText
;
49 webdeveloper_removeAllChildElements(styleElement
);
50 styleElement
.appendChild(contentDocument
.createTextNode(styleText
));
56 function webdeveloper_clearCSS()
58 webdeveloper_getSelectedPanel().firstChild
.value
= "";
61 // Reinitializes the dashboard when the page changes
62 function webdeveloper_editCSSContentPageLoad(event
)
64 var eventTarget
= event
.target
;
66 // Try to get the original target
69 var originalTarget
= event
.originalTarget
;
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
)
74 // If the CSS stick preference is not set to true
75 if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true))
77 webdeveloper_resetCSS();
87 // Handles a browser tab being selected
88 function webdeveloper_editCSSMainTabSelect(event
)
90 var browser
= window
.top
.getBrowser();
91 var selectedTab
= browser
.mTabBox
.selectedIndex
;
93 // If the selected tab is different
94 if(selectedTab
!= webdeveloper_editCSSSelectedTab
)
96 var browsers
= browser
.browsers
;
97 var browserLength
= browsers
.length
;
99 // If the previous selected tab equals the browser length
100 if(webdeveloper_editCSSSelectedTab
== browserLength
)
102 webdeveloper_editCSSSelectedTab
= browserLength
- 1;
105 webdeveloper_resetDocument(browsers
[webdeveloper_editCSSSelectedTab
].contentDocument
);
107 webdeveloper_editCSSSelectedTab
= selectedTab
;
109 // If the CSS stick preference is not set to true
110 if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true))
112 webdeveloper_resetCSS();
117 // Returns the selected panel
118 function webdeveloper_getSelectedPanel()
120 var selectedPanel
= document
.getElementById("webdeveloper-edit-css-tab-box").selectedPanel
;
122 // If the selected panel is not set
125 selectedPanel
= document
.getElementById("webdeveloper-edit-css-tab-panels").firstChild
;
128 return selectedPanel
;
131 // Returns the selected tab
132 function webdeveloper_getSelectedTab()
134 var selectedTab
= document
.getElementById("webdeveloper-edit-css-tab-box").selectedTab
;
136 // If the selected tab is not set
139 selectedTab
= document
.getElementById("webdeveloper-edit-css-tabs").firstChild
;
145 // Initializes the edit CSS dashboard
146 function webdeveloper_initializeEditCSS()
148 var mainTabBox
= window
.top
.getBrowser().mTabBox
;
150 webdeveloper_editCSSSelectedTab
= mainTabBox
.selectedIndex
;
151 webdeveloper_editCSSUpdateFrequency
= webdeveloper_getIntegerPreference("webdeveloper.edit.update.frequency", true);
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);
157 webdeveloper_updateStickCSS();
158 webdeveloper_retrieveCSS();
160 // If the update frequency is greater than 0
161 if(webdeveloper_editCSSUpdateFrequency
> 0)
163 webdeveloper_editCSSIntervalId
= window
.setInterval(webdeveloper_applyCSS
, webdeveloper_editCSSUpdateFrequency
);
168 function webdeveloper_openCSS()
170 var filePicker
= Components
.classes
["@mozilla.org/filepicker;1"].createInstance(Components
.interfaces
.nsIFilePicker
);
171 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
173 filePicker
.appendFilter(stringBundle
.getString("webdeveloper_styleSheetDescription"), "*.css");
174 filePicker
.init(window
, stringBundle
.getString("webdeveloper_openStyleSheet"), filePicker
.modeOpen
);
176 // If the user selected a style sheet
177 if(filePicker
.show() == filePicker
.returnOK
)
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
);
182 inputStream
.init(filePicker
.file
, 0x01, 00444, null);
183 scriptableStream
.init(inputStream
);
185 webdeveloper_getSelectedPanel().firstChild
.value
= scriptableStream
.read(scriptableStream
.available());
187 scriptableStream
.close();
192 // Resets the edited CSS
193 function webdeveloper_resetCSS()
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();
201 // Resets the specified document
202 function webdeveloper_resetDocument(contentDocument
)
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
;
210 // Loop through the style elements
211 for(var i
= 0; i
< styleElements
.length
; i
++)
213 styleElement
= styleElements
[i
];
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)
218 webdeveloper_removeElement(styleElement
);
223 // Loop through the style sheets
224 for(i
= 0; i
< styleSheetLength
; i
++)
226 styleSheet
= styleSheetList
[i
];
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
))
231 styleSheet
.disabled
= false;
237 // Retrieves the CSS from the current page
238 function webdeveloper_retrieveCSS()
240 var contentDocument
= webdeveloper_getContentDocument();
241 var documentURL
= contentDocument
.documentURI
;
242 var inlineStylesText
= "";
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
;
253 var tabs
= document
.getElementById("webdeveloper-edit-css-tabs");
254 var tabPanels
= document
.getElementById("webdeveloper-edit-css-tab-panels");
256 var textBoxStyle
= "";
257 var url
= Components
.classes
["@mozilla.org/network/standard-url;1"].createInstance(Components
.interfaces
.nsIURL
);
259 url
.spec
= documentURL
;
261 // If the edit CSS background color preference is set
262 if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.background"))
264 textBoxStyle
+= "background-color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.background", true) + " !important; ";
267 // If the edit CSS text color preference is set
268 if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.text"))
270 textBoxStyle
+= "color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.text", true) + " !important; ";
273 // If the edit CSS font preference is set
274 if(webdeveloper_isPreferenceSet("webdeveloper.edit.font.size"))
276 textBoxStyle
+= "font-size: " + webdeveloper_getIntegerPreference("webdeveloper.edit.font.size", true) + "px !important; ";
279 textBoxStyle
= textBoxStyle
.trim();
281 // Loop through the style sheets
282 for(var i
= 0; i
< styleSheetLength
; i
++)
284 styleSheet
= styleSheetList
[i
];
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
)
289 results
= webdeveloper_retrieveStyleSheetDetails(styleSheet
, textBoxStyle
, results
);
293 styleSheetList
= contentDocument
.getElementsByTagName("style");
294 styleSheetLength
= styleSheetList
.length
;
296 // Loop through the inline style sheets
297 for(i
= 0; i
< styleSheetLength
; i
++)
299 styleElement
= styleSheetList
[i
];
300 styleSheet
= styleElement
.sheet
;
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
)
305 inlineStylesText
+= styleElement
.innerHTML
.trim() + "\n\n";
307 styleSheet
.disabled
= true;
311 // If there are inline styles
312 if(inlineStylesText
!= "")
314 tab
= document
.createElement("tab");
315 tabPanel
= document
.createElement("tabpanel");
316 textBox
= document
.createElement("textbox");
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
);
325 // If the edit CSS wrap preference is not set to true
326 if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
328 textBox
.setAttribute("wrap", "off");
331 tabPanel
.appendChild(textBox
);
332 results
.push(new Array(tab
, tabPanel
));
335 resultsLength
= results
.length
;
337 // Loop through the results
338 for(i
= 0; i
< resultsLength
; i
++)
342 tabPanels
.appendChild(result
[1]);
343 tabs
.appendChild(result
[0]);
346 // If there are no tabs
347 if(tabs
.childNodes
.length
== 0)
349 tab
= document
.createElement("tab");
350 tabPanel
= document
.createElement("tabpanel");
351 textBox
= document
.createElement("textbox");
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
);
359 // If the edit CSS wrap preference is not set to true
360 if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
362 textBox
.setAttribute("wrap", "off");
365 tabPanel
.appendChild(textBox
);
366 tabPanels
.appendChild(tabPanel
);
367 tabs
.appendChild(tab
);
370 tabs
.selectedIndex
= 0;
372 webdeveloper_applyCSS();
375 // Retrieves the style sheet details
376 function webdeveloper_retrieveStyleSheetDetails(styleSheet
, textBoxStyle
, results
)
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
);
386 url
.spec
= styleSheetHref
;
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
);
395 // If the edit CSS wrap preference is not set to true
396 if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
398 textBox
.setAttribute("wrap", "off");
401 tabPanel
.appendChild(textBox
);
402 results
.push(new Array(tab
, tabPanel
));
404 styleSheet
.disabled
= true;
410 function webdeveloper_saveCSS()
412 var filePicker
= Components
.classes
["@mozilla.org/filepicker;1"].createInstance(Components
.interfaces
.nsIFilePicker
);
414 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
415 var styleText
= webdeveloper_getSelectedPanel().firstChild
.value
;
417 filePicker
.defaultExtension
= "css";
418 filePicker
.defaultString
= webdeveloper_getSelectedTab().getAttribute("label");
420 filePicker
.appendFilter(stringBundle
.getString("webdeveloper_styleSheetDescription"), "*.css");
421 filePicker
.init(window
, stringBundle
.getString("webdeveloper_saveStyleSheet"), filePicker
.modeSave
);
423 result
= filePicker
.show();
425 // If the user selected a style sheet
426 if(result
== filePicker
.returnOK
|| result
== filePicker
.returnReplace
)
428 var file
= filePicker
.file
;
429 var outputStream
= Components
.classes
["@mozilla.org/network/file-output-stream;1"].createInstance(Components
.interfaces
.nsIFileOutputStream
);
431 // If the file does not exist
434 file
.create(Components
.interfaces
.nsIFile
.NORMAL_FILE_TYPE
, 00644);
437 outputStream
.init(file
, 0x04 | 0x08 | 0x20, 00644, null);
438 outputStream
.write(styleText
, styleText
.length
);
439 outputStream
.close();
444 function webdeveloper_searchCSS()
446 var searchText
= document
.getElementById("webdeveloper-search-dashboard-text").value
;
448 // If the search text is set
451 webdeveloper_getSelectedPanel().firstChild
.focus();
453 // If the search failed to find a match
454 if(!window
.find(searchText
, false, false, true, false, false, false))
456 webdeveloper_getSelectedPanel().firstChild
.setSelectionRange(0, 0);
457 window
.find(searchText
, false, false, true, false, false, false);
462 // Searches the CSS when the enter key is pressed
463 function webdeveloper_searchTextKeyPress(event
)
465 var keyCode
= event
.keyCode
;
467 // If the key code is set and is 13
468 if(keyCode
&& keyCode
== 13)
470 webdeveloper_searchCSS();
474 // Toggles sticking the CSS
475 function webdeveloper_toggleStickCSS()
477 webdeveloper_setBooleanPreference("webdeveloper.edit.stick", !webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true));
479 webdeveloper_updateStickCSS();
483 function webdeveloper_unloadEditCSS()
485 webdeveloper_editCSSOldStyleText
= new Array();
487 webdeveloper_resetDocument(webdeveloper_getContentDocument());
488 window
.clearInterval(webdeveloper_editCSSIntervalId
);
490 // Try to remove the event listener
493 document
.getElementById("webdeveloper-search-dashboard-text").removeEventListener("keypress", webdeveloper_searchTextKeyPress
, false);
500 // Try to remove the event listener
503 window
.top
.getBrowser().mTabBox
.removeEventListener("select", webdeveloper_editCSSMainTabSelect
, false);
510 // Try to remove the event listener
513 window
.top
.removeEventListener("load", webdeveloper_editCSSContentPageLoad
, true);
521 // Updates the stick CSS button
522 function webdeveloper_updateStickCSS()
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");
529 // If the element exists
532 // If sticking the CSS
535 labelValue
= stringBundle
.getString("webdeveloper_unstick");
537 element
.setAttribute("class", "unstick webdeveloper-dashboard-button");
541 labelValue
= stringBundle
.getString("webdeveloper_stick");
543 element
.setAttribute("class", "webdeveloper-dashboard-button");
546 element
.setAttribute("tooltiptext", labelValue
);