X-Git-Url: http://git.euphorik.ch/?p=pompage.git;a=blobdiff_plain;f=doc%2Fwebdeveloper%2Fdashboard%2Fedit_css.js;fp=doc%2Fwebdeveloper%2Fdashboard%2Fedit_css.js;h=cbc4c2e94e4318111b0163c143750a79d090b4e0;hp=0000000000000000000000000000000000000000;hb=c3b0deb3d8c9f439739c79806e915c29bc1d4b84;hpb=cff6539539a79e014f6ac8df46716cafce2c8472 diff --git a/doc/webdeveloper/dashboard/edit_css.js b/doc/webdeveloper/dashboard/edit_css.js new file mode 100644 index 0000000..cbc4c2e --- /dev/null +++ b/doc/webdeveloper/dashboard/edit_css.js @@ -0,0 +1,548 @@ +var webdeveloper_editCSSIntervalId = null; +var webdeveloper_editCSSOldStyleText = new Array(); +var webdeveloper_editCSSSelectedTab = 0; +var webdeveloper_editCSSUpdateFrequency = 500; + +// Applies the CSS +function webdeveloper_applyCSS() +{ + var contentDocument = webdeveloper_getContentDocument(); + var headElement = webdeveloper_getDocumentHeadElement(contentDocument); + var styleElement = null; + var styleText = null; + var textBox = null; + var textBoxes = document.getElementById("webdeveloper-edit-css-tab-panels").getElementsByTagName("textbox"); + var textBoxesLength = textBoxes.length; + + // Loop through the text boxes + for(var i = 0; i < textBoxesLength; i++) + { + styleElement = contentDocument.getElementById("webdeveloper-edit-css-style-" + i); + textBox = textBoxes[i]; + styleText = textBox.value; + + // If the strip import preference is not set or is set to true + if(!webdeveloper_isPreferenceSet("webdeveloper.edit.css.import.strip") || webdeveloper_getBooleanPreference("webdeveloper.edit.css.import.strip", true)) + { + styleText = styleText.replace(new RegExp("@import.*?;", "gi"), ""); + } + + // If the style element does not exist + if(!styleElement) + { + styleElement = contentDocument.createElement("style"); + + styleElement.setAttribute("id", "webdeveloper-edit-css-style-" + i); + styleElement.setAttribute("type", "text/css"); + styleElement.setAttribute("xml:base", textBox.getAttribute("webdeveloper-base")); + headElement.appendChild(styleElement); + + // Make the styles different to make sure they get written if not there already + webdeveloper_editCSSOldStyleText[i] = styleText + " "; + } + + // If the style text is not the same as the old style text + if(styleText != webdeveloper_editCSSOldStyleText[i]) + { + webdeveloper_editCSSOldStyleText[i] = styleText; + + webdeveloper_removeAllChildElements(styleElement); + styleElement.appendChild(contentDocument.createTextNode(styleText)); + } + } +} + +// Clear the CSS +function webdeveloper_clearCSS() +{ + webdeveloper_getSelectedPanel().firstChild.value = ""; +} + +// Reinitializes the dashboard when the page changes +function webdeveloper_editCSSContentPageLoad(event) +{ + var eventTarget = event.target; + + // Try to get the original target + try + { + var originalTarget = event.originalTarget; + + // If the page is the target and the URI matches + if(originalTarget && eventTarget && eventTarget.contentDocument && eventTarget.hasAttribute && eventTarget.hasAttribute("id") && eventTarget.getAttribute("id").toLowerCase() == "content" && originalTarget.documentURI == eventTarget.contentDocument.documentURI) + { + // If the CSS stick preference is not set to true + if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true)) + { + webdeveloper_resetCSS(); + } + } + } + catch(exception) + { + // Do nothing + } +} + +// Handles a browser tab being selected +function webdeveloper_editCSSMainTabSelect(event) +{ + var browser = window.top.getBrowser(); + var selectedTab = browser.mTabBox.selectedIndex; + + // If the selected tab is different + if(selectedTab != webdeveloper_editCSSSelectedTab) + { + var browsers = browser.browsers; + var browserLength = browsers.length; + + // If the previous selected tab equals the browser length + if(webdeveloper_editCSSSelectedTab == browserLength) + { + webdeveloper_editCSSSelectedTab = browserLength - 1; + } + + webdeveloper_resetDocument(browsers[webdeveloper_editCSSSelectedTab].contentDocument); + + webdeveloper_editCSSSelectedTab = selectedTab; + + // If the CSS stick preference is not set to true + if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true)) + { + webdeveloper_resetCSS(); + } + } +} + +// Returns the selected panel +function webdeveloper_getSelectedPanel() +{ + var selectedPanel = document.getElementById("webdeveloper-edit-css-tab-box").selectedPanel; + + // If the selected panel is not set + if(!selectedPanel) + { + selectedPanel = document.getElementById("webdeveloper-edit-css-tab-panels").firstChild; + } + + return selectedPanel; +} + +// Returns the selected tab +function webdeveloper_getSelectedTab() +{ + var selectedTab = document.getElementById("webdeveloper-edit-css-tab-box").selectedTab; + + // If the selected tab is not set + if(!selectedTab) + { + selectedTab = document.getElementById("webdeveloper-edit-css-tabs").firstChild; + } + + return selectedTab; +} + +// Initializes the edit CSS dashboard +function webdeveloper_initializeEditCSS() +{ + var mainTabBox = window.top.getBrowser().mTabBox; + + webdeveloper_editCSSSelectedTab = mainTabBox.selectedIndex; + webdeveloper_editCSSUpdateFrequency = webdeveloper_getIntegerPreference("webdeveloper.edit.update.frequency", true); + + document.getElementById("webdeveloper-search-dashboard-text").addEventListener("keypress", webdeveloper_searchTextKeyPress, false); + mainTabBox.addEventListener("select", webdeveloper_editCSSMainTabSelect, false); + window.top.addEventListener("load", webdeveloper_editCSSContentPageLoad, true); + + webdeveloper_updateStickCSS(); + webdeveloper_retrieveCSS(); + + // If the update frequency is greater than 0 + if(webdeveloper_editCSSUpdateFrequency > 0) + { + webdeveloper_editCSSIntervalId = window.setInterval(webdeveloper_applyCSS, webdeveloper_editCSSUpdateFrequency); + } +} + +// Opens new CSS +function webdeveloper_openCSS() +{ + var filePicker = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker); + var stringBundle = document.getElementById("webdeveloper-string-bundle"); + + filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css"); + filePicker.init(window, stringBundle.getString("webdeveloper_openStyleSheet"), filePicker.modeOpen); + + // If the user selected a style sheet + if(filePicker.show() == filePicker.returnOK) + { + var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream); + var scriptableStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream); + + inputStream.init(filePicker.file, 0x01, 00444, null); + scriptableStream.init(inputStream); + + webdeveloper_getSelectedPanel().firstChild.value = scriptableStream.read(scriptableStream.available()); + + scriptableStream.close(); + inputStream.close(); + } +} + +// Resets the edited CSS +function webdeveloper_resetCSS() +{ + webdeveloper_removeAllChildElements(document.getElementById("webdeveloper-edit-css-tab-panels")); + webdeveloper_removeAllChildElements(document.getElementById("webdeveloper-edit-css-tabs")); + webdeveloper_resetDocument(webdeveloper_getContentDocument()); + webdeveloper_retrieveCSS(); +} + +// Resets the specified document +function webdeveloper_resetDocument(contentDocument) +{ + var styleElement = null; + var styleElements = contentDocument.getElementsByTagName("style"); + var styleSheet = null; + var styleSheetList = webdeveloper_getStyleSheetsForDocument(contentDocument, true, false); + var styleSheetLength = styleSheetList.length; + + // Loop through the style elements + for(var i = 0; i < styleElements.length; i++) + { + styleElement = styleElements[i]; + + // If the style element has an id starting with webdeveloper-edit-css-style- + if(styleElement.hasAttribute("id") && styleElement.getAttribute("id").indexOf("webdeveloper-edit-css-style-") == 0) + { + webdeveloper_removeElement(styleElement); + i--; + } + } + + // Loop through the style sheets + for(i = 0; i < styleSheetLength; i++) + { + styleSheet = styleSheetList[i]; + + // If the style sheet is a valid style sheet, is for the screen and is not an alternate style sheet + if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !webdeveloper_isAlternateStyleSheet(styleSheet)) + { + styleSheet.disabled = false; + } + } + +} + +// Retrieves the CSS from the current page +function webdeveloper_retrieveCSS() +{ + var contentDocument = webdeveloper_getContentDocument(); + var documentURL = contentDocument.documentURI; + var inlineStylesText = ""; + var result = null; + var results = new Array(); + var resultsLength = null; + var stringBundle = document.getElementById("webdeveloper-string-bundle"); + var styleElement = null; + var styleSheet = null; + var styleSheetList = webdeveloper_getStyleSheetsForDocument(contentDocument, true, false); + var styleSheetLength = styleSheetList.length; + var tab = null; + var tabPanel = null; + var tabs = document.getElementById("webdeveloper-edit-css-tabs"); + var tabPanels = document.getElementById("webdeveloper-edit-css-tab-panels"); + var textBox = null; + var textBoxStyle = ""; + var url = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL); + + url.spec = documentURL; + + // If the edit CSS background color preference is set + if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.background")) + { + textBoxStyle += "background-color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.background", true) + " !important; "; + } + + // If the edit CSS text color preference is set + if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.text")) + { + textBoxStyle += "color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.text", true) + " !important; "; + } + + // If the edit CSS font preference is set + if(webdeveloper_isPreferenceSet("webdeveloper.edit.font.size")) + { + textBoxStyle += "font-size: " + webdeveloper_getIntegerPreference("webdeveloper.edit.font.size", true) + "px !important; "; + } + + textBoxStyle = textBoxStyle.trim(); + + // Loop through the style sheets + for(var i = 0; i < styleSheetLength; i++) + { + styleSheet = styleSheetList[i]; + + // 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 + if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !webdeveloper_isAlternateStyleSheet(styleSheet) && !styleSheet.disabled && styleSheet.href != documentURL) + { + results = webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results); + } + } + + styleSheetList = contentDocument.getElementsByTagName("style"); + styleSheetLength = styleSheetList.length; + + // Loop through the inline style sheets + for(i = 0; i < styleSheetLength; i++) + { + styleElement = styleSheetList[i]; + styleSheet = styleElement.sheet; + + // If this is a valid style sheet, is for the screen and is not disabled + if(webdeveloper_isValidStyleSheet(styleSheet) && (!styleElement.hasAttribute("id") || styleElement.getAttribute("id").indexOf("webdeveloper-") != 0) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !styleSheet.disabled) + { + inlineStylesText += styleElement.innerHTML.trim() + "\n\n"; + + styleSheet.disabled = true; + } + } + + // If there are inline styles + if(inlineStylesText != "") + { + tab = document.createElement("tab"); + tabPanel = document.createElement("tabpanel"); + textBox = document.createElement("textbox"); + + tab.setAttribute("label", stringBundle.getString("webdeveloper_embeddedStyles")); + textBox.setAttribute("flex", "1"); + textBox.setAttribute("multiline", "true"); + textBox.setAttribute("style", textBoxStyle); + textBox.setAttribute("value", inlineStylesText); + textBox.setAttribute("webdeveloper-base", url.directory); + + // If the edit CSS wrap preference is not set to true + if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true)) + { + textBox.setAttribute("wrap", "off"); + } + + tabPanel.appendChild(textBox); + results.push(new Array(tab, tabPanel)); + } + + resultsLength = results.length; + + // Loop through the results + for(i = 0; i < resultsLength; i++) + { + result = results[i]; + + tabPanels.appendChild(result[1]); + tabs.appendChild(result[0]); + } + + // If there are no tabs + if(tabs.childNodes.length == 0) + { + tab = document.createElement("tab"); + tabPanel = document.createElement("tabpanel"); + textBox = document.createElement("textbox"); + + tab.setAttribute("label", stringBundle.getString("webdeveloper_editCSS")); + textBox.setAttribute("flex", "1"); + textBox.setAttribute("multiline", "true"); + textBox.setAttribute("style", textBoxStyle); + textBox.setAttribute("webdeveloper-base", url.directory); + + // If the edit CSS wrap preference is not set to true + if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true)) + { + textBox.setAttribute("wrap", "off"); + } + + tabPanel.appendChild(textBox); + tabPanels.appendChild(tabPanel); + tabs.appendChild(tab); + } + + tabs.selectedIndex = 0; + + webdeveloper_applyCSS(); +} + +// Retrieves the style sheet details +function webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results) +{ + var styleSheetHref = styleSheet.href; + var position = styleSheetHref.lastIndexOf("/"); + var stylesText = webdeveloper_retrieveSource(styleSheetHref); + var tab = document.createElement("tab"); + var tabPanel = document.createElement("tabpanel"); + var textBox = document.createElement("textbox"); + var url = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL); + + url.spec = styleSheetHref; + + tab.setAttribute("label", url.fileName); + textBox.setAttribute("flex", "1"); + textBox.setAttribute("multiline", "true"); + textBox.setAttribute("style", textBoxStyle); + textBox.setAttribute("value", stylesText); + textBox.setAttribute("webdeveloper-base", url.directory); + + // If the edit CSS wrap preference is not set to true + if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true)) + { + textBox.setAttribute("wrap", "off"); + } + + tabPanel.appendChild(textBox); + results.push(new Array(tab, tabPanel)); + + styleSheet.disabled = true; + + return results; +} + +// Saves the CSS +function webdeveloper_saveCSS() +{ + var filePicker = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker); + var result = null; + var stringBundle = document.getElementById("webdeveloper-string-bundle"); + var styleText = webdeveloper_getSelectedPanel().firstChild.value; + + filePicker.defaultExtension = "css"; + filePicker.defaultString = webdeveloper_getSelectedTab().getAttribute("label"); + + filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css"); + filePicker.init(window, stringBundle.getString("webdeveloper_saveStyleSheet"), filePicker.modeSave); + + result = filePicker.show(); + + // If the user selected a style sheet + if(result == filePicker.returnOK || result == filePicker.returnReplace) + { + var file = filePicker.file; + var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream); + + // If the file does not exist + if(!file.exists()) + { + file.create(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 00644); + } + + outputStream.init(file, 0x04 | 0x08 | 0x20, 00644, null); + outputStream.write(styleText, styleText.length); + outputStream.close(); + } +} + +// Searches the CSS +function webdeveloper_searchCSS() +{ + var searchText = document.getElementById("webdeveloper-search-dashboard-text").value; + + // If the search text is set + if(searchText) + { + webdeveloper_getSelectedPanel().firstChild.focus(); + + // If the search failed to find a match + if(!window.find(searchText, false, false, true, false, false, false)) + { + webdeveloper_getSelectedPanel().firstChild.setSelectionRange(0, 0); + window.find(searchText, false, false, true, false, false, false); + } + } +} + +// Searches the CSS when the enter key is pressed +function webdeveloper_searchTextKeyPress(event) +{ + var keyCode = event.keyCode; + + // If the key code is set and is 13 + if(keyCode && keyCode == 13) + { + webdeveloper_searchCSS(); + } +} + +// Toggles sticking the CSS +function webdeveloper_toggleStickCSS() +{ + webdeveloper_setBooleanPreference("webdeveloper.edit.stick", !webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true)); + + webdeveloper_updateStickCSS(); +} + +// Unloads edit CSS +function webdeveloper_unloadEditCSS() +{ + webdeveloper_editCSSOldStyleText = new Array(); + + webdeveloper_resetDocument(webdeveloper_getContentDocument()); + window.clearInterval(webdeveloper_editCSSIntervalId); + + // Try to remove the event listener + try + { + document.getElementById("webdeveloper-search-dashboard-text").removeEventListener("keypress", webdeveloper_searchTextKeyPress, false); + } + catch(exception) + { + // Do nothing + } + + // Try to remove the event listener + try + { + window.top.getBrowser().mTabBox.removeEventListener("select", webdeveloper_editCSSMainTabSelect, false); + } + catch(exception) + { + // Do nothing + } + + // Try to remove the event listener + try + { + window.top.removeEventListener("load", webdeveloper_editCSSContentPageLoad, true); + } + catch(exception) + { + // Do nothing + } +} + +// Updates the stick CSS button +function webdeveloper_updateStickCSS() +{ + var element = document.getElementById("webdeveloper-stick-dashboard"); + var labelValue = null; + var stick = webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true); + var stringBundle = document.getElementById("webdeveloper-string-bundle"); + + // If the element exists + if(element) + { + // If sticking the CSS + if(stick) + { + labelValue = stringBundle.getString("webdeveloper_unstick"); + + element.setAttribute("class", "unstick webdeveloper-dashboard-button"); + } + else + { + labelValue = stringBundle.getString("webdeveloper_stick"); + + element.setAttribute("class", "webdeveloper-dashboard-button"); + } + + element.setAttribute("tooltiptext", labelValue); + } +} \ No newline at end of file