--- /dev/null
+var webdeveloper_styleElement = null;
+
+// Output style information for an element
+function webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, title)
+{
+ var bodyElement = null;
+ var cssElement = null;
+ var divElement = null;
+ var generatedDocument = null;
+ var headElement = null;
+ var headerElement = null;
+ var linkElement = null;
+ var preElement = null;
+ var spanElement = null;
+ var stringBundle = document.getElementById("webdeveloper-string-bundle");
+ var styleInformationFound = false;
+ var styleSheet = null;
+
+ // If displaying in the dashboard
+ if(displayInDashboard)
+ {
+ var parent = null;
+
+ generatedDocument = webdeveloper_getDocumentInDashboard(stringBundle.getString("webdeveloper_styleInformation"));
+ bodyElement = webdeveloper_getDocumentBodyElement(generatedDocument);
+ headElement = webdeveloper_getDocumentHeadElement(generatedDocument);
+
+ webdeveloper_removeAllChildElements(bodyElement);
+ webdeveloper_removeAllChildElements(headElement);
+ }
+ else
+ {
+ generatedDocument = webdeveloper_generateDocument("");
+ bodyElement = webdeveloper_getDocumentBodyElement(generatedDocument);
+ headElement = webdeveloper_getDocumentHeadElement(generatedDocument);
+ headerElement = generatedDocument.createElement("h1");
+
+ headerElement.appendChild(generatedDocument.createTextNode(title));
+ bodyElement.appendChild(headerElement);
+ }
+
+ generatedDocument.title = title;
+ linkElement = generatedDocument.createElement("link");
+
+ webdeveloper_addGeneratedStyles(generatedDocument);
+
+ linkElement.setAttribute("href", "chrome://webdeveloper/content/stylesheets/generated/view_style_information.css");
+ linkElement.setAttribute("rel", "stylesheet");
+ linkElement.setAttribute("type", "text/css");
+ headElement.appendChild(linkElement);
+
+ // Loop through the style sheets
+ for(styleSheet in styleSheetArray)
+ {
+ cssElement = generatedDocument.createElement("div");
+ divElement = generatedDocument.createElement("div");
+ headerElement = generatedDocument.createElement("h2");
+ linkElement = generatedDocument.createElement("a");
+ spanElement = generatedDocument.createElement("span");
+ styleInformationFound = true;
+
+ spanElement.setAttribute("class", "expanded pivot");
+ headerElement.appendChild(spanElement);
+ linkElement.setAttribute("href", styleSheet);
+ linkElement.appendChild(generatedDocument.createTextNode(styleSheet));
+ headerElement.appendChild(linkElement);
+ bodyElement.appendChild(headerElement);
+
+ cssElement.setAttribute("class", "css");
+ divElement.setAttribute("class", "output");
+ divElement.appendChild(cssElement);
+ bodyElement.appendChild(divElement);
+
+ cssElement.innerHTML = styleSheetArray[styleSheet];
+ }
+
+ // If style information was found
+ if(styleInformationFound)
+ {
+ var scriptElement = generatedDocument.createElement("script");
+
+ scriptElement.setAttribute("defer", "defer");
+ scriptElement.setAttribute("src", "chrome://webdeveloper/content/common/xpath.js");
+ scriptElement.setAttribute("type", "text/javascript");
+ headElement.appendChild(scriptElement);
+
+ scriptElement = generatedDocument.createElement("script");
+
+ scriptElement.setAttribute("defer", "defer");
+ scriptElement.setAttribute("src", "chrome://webdeveloper/content/generated/output_pivot.js");
+ scriptElement.setAttribute("type", "text/javascript");
+ headElement.appendChild(scriptElement);
+ }
+ else
+ {
+ var pElement = generatedDocument.createElement("p");
+
+ pElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_noStyleInformation")));
+ bodyElement.appendChild(pElement);
+ }
+}
+
+// View style information
+function webdeveloper_viewStyleInformation(element)
+{
+ // If the DOM Inspector is available
+ if(webdeveloper_isDOMInspectorAvailable())
+ {
+ var checked = true;
+ var contentWindow = webdeveloper_getContentWindow();
+ var documentList = webdeveloper_getDocuments(contentWindow);
+ var documentLength = documentList.length;
+ var pageDocument = null;
+
+ // If the element is set
+ if(element)
+ {
+ checked = element.getAttribute("checked");
+ }
+ else
+ {
+ var currentDocument = contentWindow.document;
+
+ element = document.getElementById("webdeveloper-view-style-information-menu");
+
+ // If the view style information element is set
+ if(currentDocument.getElementById("webdeveloper-view-style-information"))
+ {
+ checked = false;
+ }
+
+ webdeveloper_configureElement(element, "checked", checked);
+ }
+
+ webdeveloper_configureElement(document.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked);
+
+ // Loop through the documents
+ for(var i = 0; i < documentLength; i++)
+ {
+ pageDocument = documentList[i];
+
+ // If viewing style information
+ if(checked)
+ {
+ pageDocument.addEventListener("click", webdeveloper_viewStyleInformationForElement, false);
+ pageDocument.addEventListener("keypress", webdeveloper_viewStyleInformationKeyPress, false);
+ pageDocument.addEventListener("mousemove", webdeveloper_viewStyleInformationMouseMove, false);
+ pageDocument.addEventListener("mouseover", webdeveloper_viewStyleInformationMouseOver, false);
+ }
+ else
+ {
+ var title = document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_styleInformation");
+
+ // Try to remove the event listener
+ try
+ {
+ pageDocument.removeEventListener("click", webdeveloper_viewStyleInformationForElement, false);
+ }
+ catch(exception)
+ {
+ // Do nothing
+ }
+
+ // Try to remove the event listener
+ try
+ {
+ pageDocument.removeEventListener("keypress", webdeveloper_viewStyleInformationKeyPress, false);
+ }
+ catch(exception)
+ {
+ // Do nothing
+ }
+
+ // Try to remove the event listener
+ try
+ {
+ pageDocument.removeEventListener("mousemove", webdeveloper_viewStyleInformationMouseMove, false);
+ }
+ catch(exception)
+ {
+ // Do nothing
+ }
+
+ // Try to remove the event listener
+ try
+ {
+ pageDocument.removeEventListener("mouseover", webdeveloper_viewStyleInformationMouseOver, false);
+ }
+ catch(exception)
+ {
+ // Do nothing
+ }
+
+ // If view style information is open in the dashboard
+ if(webdeveloper_isOpenInDashboard(title))
+ {
+ webdeveloper_closeInDashboard(title);
+ }
+
+ webdeveloper_removeElementOutline(webdeveloper_styleElement);
+ }
+ }
+
+ // If not viewing style information
+ if(!checked)
+ {
+ webdeveloper_styleElement = null;
+ }
+
+ webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/view_style_information.css", "webdeveloper-view-style-information");
+ }
+ else
+ {
+ window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_domInspectorRequired"), "http://chrispederick.com/work/web-developer/documentation/faq/#dom-inspector");
+ }
+}
+
+// View style information for an element
+function webdeveloper_viewStyleInformationForElement(event)
+{
+ var eventTarget = event.target;
+
+ // If there is an event target and the click was not a right click
+ if(eventTarget && event.button != 2)
+ {
+ var displayInDashboard = webdeveloper_getBooleanPreference("webdeveloper.style.information.dashboard", true);
+ var domUtils = Components.classes["@mozilla.org/inspector/dom-utils;1"].getService(Components.interfaces.inIDOMUtils);
+ var elementRule = null;
+ var headerElement = null;
+ var line = null;
+ var oldURL = getBrowser().currentURI.spec;
+ var ruleList = domUtils.getCSSStyleRules(eventTarget);
+ var stringBundle = document.getElementById("webdeveloper-string-bundle");
+ var styleRule = null;
+ var styleRuleLength = null;
+ var styleRuleList = null;
+ var styleSheet = null;
+ var styleSheetArray = new Array();
+ var styleSheetHref = null;
+ var styleText = null;
+
+ // Loop through the element rules
+ for(var i = 0; i < ruleList.Count(); i++)
+ {
+ elementRule = ruleList.GetElementAt(i).QueryInterface(Components.interfaces.nsIDOMCSSStyleRule);
+ line = domUtils.getRuleLine(elementRule);
+
+ // If there is a parent style sheet
+ if(elementRule.parentStyleSheet)
+ {
+ styleSheet = elementRule.parentStyleSheet;
+ }
+
+ // If this is a valid style sheet
+ if(webdeveloper_isValidStyleSheet(styleSheet))
+ {
+ styleRuleList = elementRule.style;
+ styleRuleLength = styleRuleList.length;
+ styleSheetHref = styleSheet.href;
+ styleText = '<p class="selector">' + elementRule.selectorText + ' <span>(' + stringBundle.getString("webdeveloper_line").toLowerCase() + " " + line + ")</span></p>";
+
+ styleText += "<p>{</p>";
+
+ // Loop through the style rules
+ for(var j = 0; j < styleRuleLength; j++)
+ {
+ styleRule = styleRuleList[j];
+
+ // If this is a valid style rule
+ if(webdeveloper_isValidStyleRule(styleRuleList, styleRule))
+ {
+ styleText += '<p class="rule"><span class="property">' + webdeveloper_formatStyleRuleProperty(styleRule) + '</span>: <span class="value">' + webdeveloper_formatStyleRuleValue(styleRuleList.getPropertyValue(styleRule)) + "</span>;</p>";
+ }
+ }
+
+ styleText += "<p>}</p>";
+
+ // If this style sheet has rules already stored
+ if(styleSheetArray[styleSheetHref])
+ {
+ styleSheetArray[styleSheetHref] += styleText;
+ }
+ else
+ {
+ styleSheetArray[styleSheetHref] = styleText;
+ }
+ }
+ }
+
+ // If displaying in the dashboard
+ if(displayInDashboard)
+ {
+ var title = stringBundle.getString("webdeveloper_styleInformation");
+
+ // If view style information is already open in the dashboard
+ if(webdeveloper_isOpenInDashboard(title))
+ {
+ webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, stringBundle.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL]));
+ webdeveloper_selectInDashboard(title);
+ }
+ else
+ {
+ webdeveloper_openInDashboard(title, "");
+
+ // This sets a small timeout to guarantee the dashboard is open
+ window.setTimeout(webdeveloper_outputStyleInformationForElement, 500, displayInDashboard, styleSheetArray, stringBundle.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL]));
+ }
+ }
+ else
+ {
+ var oldTab = getBrowser().selectedTab;
+
+ webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, stringBundle.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL]));
+
+ // If the open tabs in background preference is set to true
+ if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
+ {
+ getBrowser().selectedTab = oldTab;
+ }
+ }
+
+ event.preventDefault();
+ }
+}
+
+// Keypress event for view style information
+function webdeveloper_viewStyleInformationKeyPress(event)
+{
+ webdeveloper_copyElementAncestors(event);
+}
+
+// Move event for view style information
+function webdeveloper_viewStyleInformationMouseMove(event)
+{
+ var outlineElement = webdeveloper_addElementOutline(event, webdeveloper_styleElement);
+
+ // If the outline element is set
+ if(outlineElement)
+ {
+ webdeveloper_styleElement = outlineElement;
+ }
+}
+
+// Mouseover event for view style information
+function webdeveloper_viewStyleInformationMouseOver(event)
+{
+ webdeveloper_displayElementAncestors(event);
+}
projects / pompage.git / blobdiff