1 var webdeveloper_styleElement
= null;
3 // Output style information for an element
4 function webdeveloper_outputStyleInformationForElement(displayInDashboard
, styleSheetArray
, title
)
6 var bodyElement
= null;
9 var generatedDocument
= null;
10 var headElement
= null;
11 var headerElement
= null;
12 var linkElement
= null;
13 var preElement
= null;
14 var spanElement
= null;
15 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
16 var styleInformationFound
= false;
17 var styleSheet
= null;
19 // If displaying in the dashboard
20 if(displayInDashboard
)
24 generatedDocument
= webdeveloper_getDocumentInDashboard(stringBundle
.getString("webdeveloper_styleInformation"));
25 bodyElement
= webdeveloper_getDocumentBodyElement(generatedDocument
);
26 headElement
= webdeveloper_getDocumentHeadElement(generatedDocument
);
28 webdeveloper_removeAllChildElements(bodyElement
);
29 webdeveloper_removeAllChildElements(headElement
);
33 generatedDocument
= webdeveloper_generateDocument("");
34 bodyElement
= webdeveloper_getDocumentBodyElement(generatedDocument
);
35 headElement
= webdeveloper_getDocumentHeadElement(generatedDocument
);
36 headerElement
= generatedDocument
.createElement("h1");
38 headerElement
.appendChild(generatedDocument
.createTextNode(title
));
39 bodyElement
.appendChild(headerElement
);
42 generatedDocument
.title
= title
;
43 linkElement
= generatedDocument
.createElement("link");
45 webdeveloper_addGeneratedStyles(generatedDocument
);
47 linkElement
.setAttribute("href", "chrome://webdeveloper/content/stylesheets/generated/view_style_information.css");
48 linkElement
.setAttribute("rel", "stylesheet");
49 linkElement
.setAttribute("type", "text/css");
50 headElement
.appendChild(linkElement
);
52 // Loop through the style sheets
53 for(styleSheet
in styleSheetArray
)
55 cssElement
= generatedDocument
.createElement("div");
56 divElement
= generatedDocument
.createElement("div");
57 headerElement
= generatedDocument
.createElement("h2");
58 linkElement
= generatedDocument
.createElement("a");
59 spanElement
= generatedDocument
.createElement("span");
60 styleInformationFound
= true;
62 spanElement
.setAttribute("class", "expanded pivot");
63 headerElement
.appendChild(spanElement
);
64 linkElement
.setAttribute("href", styleSheet
);
65 linkElement
.appendChild(generatedDocument
.createTextNode(styleSheet
));
66 headerElement
.appendChild(linkElement
);
67 bodyElement
.appendChild(headerElement
);
69 cssElement
.setAttribute("class", "css");
70 divElement
.setAttribute("class", "output");
71 divElement
.appendChild(cssElement
);
72 bodyElement
.appendChild(divElement
);
74 cssElement
.innerHTML
= styleSheetArray
[styleSheet
];
77 // If style information was found
78 if(styleInformationFound
)
80 var scriptElement
= generatedDocument
.createElement("script");
82 scriptElement
.setAttribute("defer", "defer");
83 scriptElement
.setAttribute("src", "chrome://webdeveloper/content/common/xpath.js");
84 scriptElement
.setAttribute("type", "text/javascript");
85 headElement
.appendChild(scriptElement
);
87 scriptElement
= generatedDocument
.createElement("script");
89 scriptElement
.setAttribute("defer", "defer");
90 scriptElement
.setAttribute("src", "chrome://webdeveloper/content/generated/output_pivot.js");
91 scriptElement
.setAttribute("type", "text/javascript");
92 headElement
.appendChild(scriptElement
);
96 var pElement
= generatedDocument
.createElement("p");
98 pElement
.appendChild(generatedDocument
.createTextNode(stringBundle
.getString("webdeveloper_noStyleInformation")));
99 bodyElement
.appendChild(pElement
);
103 // View style information
104 function webdeveloper_viewStyleInformation(element
)
106 // If the DOM Inspector is available
107 if(webdeveloper_isDOMInspectorAvailable())
110 var contentWindow
= webdeveloper_getContentWindow();
111 var documentList
= webdeveloper_getDocuments(contentWindow
);
112 var documentLength
= documentList
.length
;
113 var pageDocument
= null;
115 // If the element is set
118 checked
= element
.getAttribute("checked");
122 var currentDocument
= contentWindow
.document
;
124 element
= document
.getElementById("webdeveloper-view-style-information-menu");
126 // If the view style information element is set
127 if(currentDocument
.getElementById("webdeveloper-view-style-information"))
132 webdeveloper_configureElement(element
, "checked", checked
);
135 webdeveloper_configureElement(document
.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked
);
137 // Loop through the documents
138 for(var i
= 0; i
< documentLength
; i
++)
140 pageDocument
= documentList
[i
];
142 // If viewing style information
145 pageDocument
.addEventListener("click", webdeveloper_viewStyleInformationForElement
, false);
146 pageDocument
.addEventListener("keypress", webdeveloper_viewStyleInformationKeyPress
, false);
147 pageDocument
.addEventListener("mousemove", webdeveloper_viewStyleInformationMouseMove
, false);
148 pageDocument
.addEventListener("mouseover", webdeveloper_viewStyleInformationMouseOver
, false);
152 var title
= document
.getElementById("webdeveloper-string-bundle").getString("webdeveloper_styleInformation");
154 // Try to remove the event listener
157 pageDocument
.removeEventListener("click", webdeveloper_viewStyleInformationForElement
, false);
164 // Try to remove the event listener
167 pageDocument
.removeEventListener("keypress", webdeveloper_viewStyleInformationKeyPress
, false);
174 // Try to remove the event listener
177 pageDocument
.removeEventListener("mousemove", webdeveloper_viewStyleInformationMouseMove
, false);
184 // Try to remove the event listener
187 pageDocument
.removeEventListener("mouseover", webdeveloper_viewStyleInformationMouseOver
, false);
194 // If view style information is open in the dashboard
195 if(webdeveloper_isOpenInDashboard(title
))
197 webdeveloper_closeInDashboard(title
);
200 webdeveloper_removeElementOutline(webdeveloper_styleElement
);
204 // If not viewing style information
207 webdeveloper_styleElement
= null;
210 webdeveloper_toggleStyleSheet(element
, "chrome://webdeveloper/content/stylesheets/view_style_information.css", "webdeveloper-view-style-information");
214 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");
218 // View style information for an element
219 function webdeveloper_viewStyleInformationForElement(event
)
221 var eventTarget
= event
.target
;
223 // If there is an event target and the click was not a right click
224 if(eventTarget
&& event
.button
!= 2)
226 var displayInDashboard
= webdeveloper_getBooleanPreference("webdeveloper.style.information.dashboard", true);
227 var domUtils
= Components
.classes
["@mozilla.org/inspector/dom-utils;1"].getService(Components
.interfaces
.inIDOMUtils
);
228 var elementRule
= null;
229 var headerElement
= null;
231 var oldURL
= getBrowser().currentURI
.spec
;
232 var ruleList
= domUtils
.getCSSStyleRules(eventTarget
);
233 var stringBundle
= document
.getElementById("webdeveloper-string-bundle");
234 var styleRule
= null;
235 var styleRuleLength
= null;
236 var styleRuleList
= null;
237 var styleSheet
= null;
238 var styleSheetArray
= new Array();
239 var styleSheetHref
= null;
240 var styleText
= null;
242 // Loop through the element rules
243 for(var i
= 0; i
< ruleList
.Count(); i
++)
245 elementRule
= ruleList
.GetElementAt(i
).QueryInterface(Components
.interfaces
.nsIDOMCSSStyleRule
);
246 line
= domUtils
.getRuleLine(elementRule
);
248 // If there is a parent style sheet
249 if(elementRule
.parentStyleSheet
)
251 styleSheet
= elementRule
.parentStyleSheet
;
254 // If this is a valid style sheet
255 if(webdeveloper_isValidStyleSheet(styleSheet
))
257 styleRuleList
= elementRule
.style
;
258 styleRuleLength
= styleRuleList
.length
;
259 styleSheetHref
= styleSheet
.href
;
260 styleText
= '<p class="selector">' + elementRule
.selectorText
+ ' <span>(' + stringBundle
.getString("webdeveloper_line").toLowerCase() + " " + line
+ ")</span></p>";
262 styleText
+= "<p>{</p>";
264 // Loop through the style rules
265 for(var j
= 0; j
< styleRuleLength
; j
++)
267 styleRule
= styleRuleList
[j
];
269 // If this is a valid style rule
270 if(webdeveloper_isValidStyleRule(styleRuleList
, styleRule
))
272 styleText
+= '<p class="rule"><span class="property">' + webdeveloper_formatStyleRuleProperty(styleRule
) + '</span>: <span class="value">' + webdeveloper_formatStyleRuleValue(styleRuleList
.getPropertyValue(styleRule
)) + "</span>;</p>";
276 styleText
+= "<p>}</p>";
278 // If this style sheet has rules already stored
279 if(styleSheetArray
[styleSheetHref
])
281 styleSheetArray
[styleSheetHref
] += styleText
;
285 styleSheetArray
[styleSheetHref
] = styleText
;
290 // If displaying in the dashboard
291 if(displayInDashboard
)
293 var title
= stringBundle
.getString("webdeveloper_styleInformation");
295 // If view style information is already open in the dashboard
296 if(webdeveloper_isOpenInDashboard(title
))
298 webdeveloper_outputStyleInformationForElement(displayInDashboard
, styleSheetArray
, stringBundle
.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL
]));
299 webdeveloper_selectInDashboard(title
);
303 webdeveloper_openInDashboard(title
, "");
305 // This sets a small timeout to guarantee the dashboard is open
306 window
.setTimeout(webdeveloper_outputStyleInformationForElement
, 500, displayInDashboard
, styleSheetArray
, stringBundle
.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL
]));
311 var oldTab
= getBrowser().selectedTab
;
313 webdeveloper_outputStyleInformationForElement(displayInDashboard
, styleSheetArray
, stringBundle
.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL
]));
315 // If the open tabs in background preference is set to true
316 if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
318 getBrowser().selectedTab
= oldTab
;
322 event
.preventDefault();
326 // Keypress event for view style information
327 function webdeveloper_viewStyleInformationKeyPress(event
)
329 webdeveloper_copyElementAncestors(event
);
332 // Move event for view style information
333 function webdeveloper_viewStyleInformationMouseMove(event
)
335 var outlineElement
= webdeveloper_addElementOutline(event
, webdeveloper_styleElement
);
337 // If the outline element is set
340 webdeveloper_styleElement
= outlineElement
;
344 // Mouseover event for view style information
345 function webdeveloper_viewStyleInformationMouseOver(event
)
347 webdeveloper_displayElementAncestors(event
);