← Back to branch summary

~ubuntu-branches/ubuntu/maverick/webdeveloper/maverick-proposed

« back to all changes in this revision

Viewing changes to source/content_common/webdeveloper/features/view_style_information.js

  • Committer: Bazaar Package Importer
  • Author(s): Luca Falavigna
  • Date: 2009-01-04 12:25:00 UTC
  • mfrom: (1.1.5 upstream)
  • Revision ID: james.westby@ubuntu.com-20090104122500-agtub7j8tfr3s09t
Tags: 1.1.6+repack-1ubuntu1
* Merge from Debian experimental, remaining Ubuntu changes:
  + debian/control:
    - Build firefox-webdeveloper and adjust it for Firefox.
    - Do not conflict/replaces with firefox-developer.
    - Add Vcs-Bzr header.
  + debian/rules:
    - Adjust makebuilddir to build firefox-webdeveloper package.
  + Rename iceweasel-{webdeveloper.links,firefox-webdeveloper.install} to
    firefox-{webdeveloper.links,firefox-webdeveloper.install}

Show diffs side-by-side

added added

removed removed

Lines of Context:
source/content_common/webdeveloper/features/view_style_information.js
 
1
var webdeveloper_styleElement = null;
 
2
 
 
3
// Output style information for an element
 
4
function webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, title)
 
5
{
 
6
    var bodyElement           = null;
 
7
    var cssElement            = null;
 
8
    var divElement            = 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;
 
18
 
 
19
    // If displaying in the dashboard
 
20
    if(displayInDashboard)
 
21
    {
 
22
        var parent = null;
 
23
 
 
24
        generatedDocument = webdeveloper_getDocumentInDashboard(stringBundle.getString("webdeveloper_styleInformation"));
 
25
        bodyElement       = webdeveloper_getDocumentBodyElement(generatedDocument);
 
26
        headElement       = webdeveloper_getDocumentHeadElement(generatedDocument);
 
27
 
 
28
        webdeveloper_removeAllChildElements(bodyElement);
 
29
        webdeveloper_removeAllChildElements(headElement);
 
30
    }
 
31
    else
 
32
    {
 
33
        generatedDocument = webdeveloper_generateDocument("");
 
34
        bodyElement       = webdeveloper_getDocumentBodyElement(generatedDocument);
 
35
        headElement       = webdeveloper_getDocumentHeadElement(generatedDocument);
 
36
        headerElement     = generatedDocument.createElement("h1");
 
37
 
 
38
        headerElement.appendChild(generatedDocument.createTextNode(title));
 
39
        bodyElement.appendChild(headerElement);
 
40
    }
 
41
 
 
42
    generatedDocument.title = title;
 
43
    linkElement             = generatedDocument.createElement("link");
 
44
 
 
45
    webdeveloper_addGeneratedStyles(generatedDocument);
 
46
 
 
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);
 
51
 
 
52
    // Loop through the style sheets
 
53
    for(styleSheet in styleSheetArray)
 
54
    {
 
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;
 
61
 
 
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);
 
68
 
 
69
        cssElement.setAttribute("class", "css");
 
70
        divElement.setAttribute("class", "output");
 
71
        divElement.appendChild(cssElement);
 
72
        bodyElement.appendChild(divElement);
 
73
 
 
74
        cssElement.innerHTML = styleSheetArray[styleSheet];
 
75
    }
 
76
 
 
77
    // If style information was found
 
78
    if(styleInformationFound)
 
79
    {
 
80
        var scriptElement = generatedDocument.createElement("script");
 
81
 
 
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);
 
86
 
 
87
        scriptElement = generatedDocument.createElement("script");
 
88
 
 
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);
 
93
    }
 
94
    else
 
95
    {
 
96
        var pElement = generatedDocument.createElement("p");
 
97
 
 
98
        pElement.appendChild(generatedDocument.createTextNode(stringBundle.getString("webdeveloper_noStyleInformation")));
 
99
        bodyElement.appendChild(pElement);
 
100
    }
 
101
}
 
102
 
 
103
// View style information
 
104
function webdeveloper_viewStyleInformation(element)
 
105
{
 
106
    // If the DOM Inspector is available
 
107
    if(webdeveloper_isDOMInspectorAvailable())
 
108
    {
 
109
        var checked        = true;
 
110
        var contentWindow  = webdeveloper_getContentWindow();
 
111
        var documentList   = webdeveloper_getDocuments(contentWindow);
 
112
        var documentLength = documentList.length;
 
113
        var pageDocument   = null;
 
114
 
 
115
        // If the element is set
 
116
        if(element)
 
117
        {
 
118
            checked = webdeveloper_convertToBoolean(element.getAttribute("checked"));
 
119
        }
 
120
        else
 
121
        {
 
122
            var currentDocument = contentWindow.document;
 
123
 
 
124
            element = document.getElementById("webdeveloper-view-style-information-menu");
 
125
 
 
126
            // If the view style information element is set
 
127
            if(currentDocument.getElementById("webdeveloper-view-style-information"))
 
128
            {
 
129
                checked = false;
 
130
            }
 
131
 
 
132
            webdeveloper_configureElement(element, "checked", checked);
 
133
        }
 
134
 
 
135
        webdeveloper_configureElement(document.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked);
 
136
 
 
137
        // Loop through the documents
 
138
        for(var i = 0; i < documentLength; i++)
 
139
        {
 
140
            pageDocument = documentList[i];
 
141
 
 
142
            // If viewing style information
 
143
            if(checked)
 
144
            {
 
145
                pageDocument.addEventListener("click", webdeveloper_viewStyleInformationForElement, true);
 
146
                pageDocument.addEventListener("keypress", webdeveloper_viewStyleInformationKeyPress, false);
 
147
                pageDocument.addEventListener("mousemove", webdeveloper_viewStyleInformationMouseMove, false);
 
148
                pageDocument.addEventListener("mouseover", webdeveloper_viewStyleInformationMouseOver, false);
 
149
            }
 
150
            else
 
151
            {
 
152
                var title = document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_styleInformation");
 
153
 
 
154
                // Try to remove the event listener
 
155
                try
 
156
                {
 
157
                    pageDocument.removeEventListener("click", webdeveloper_viewStyleInformationForElement, true);
 
158
                }
 
159
                catch(exception)
 
160
                {
 
161
                    // Do nothing
 
162
                }
 
163
 
 
164
                // Try to remove the event listener
 
165
                try
 
166
                {
 
167
                    pageDocument.removeEventListener("keypress", webdeveloper_viewStyleInformationKeyPress, false);
 
168
                }
 
169
                catch(exception)
 
170
                {
 
171
                    // Do nothing
 
172
                }
 
173
 
 
174
                // Try to remove the event listener
 
175
                try
 
176
                {
 
177
                    pageDocument.removeEventListener("mousemove", webdeveloper_viewStyleInformationMouseMove, false);
 
178
                }
 
179
                catch(exception)
 
180
                {
 
181
                    // Do nothing
 
182
                }
 
183
 
 
184
                // Try to remove the event listener
 
185
                try
 
186
                {
 
187
                    pageDocument.removeEventListener("mouseover", webdeveloper_viewStyleInformationMouseOver, false);
 
188
                }
 
189
                catch(exception)
 
190
                {
 
191
                    // Do nothing
 
192
                }
 
193
 
 
194
                // If view style information is open in the dashboard
 
195
                if(webdeveloper_isOpenInDashboard(title))
 
196
                {
 
197
                    webdeveloper_closeInDashboard(title);
 
198
                }
 
199
 
 
200
                webdeveloper_removeElementOutline(webdeveloper_styleElement);
 
201
            }
 
202
        }
 
203
 
 
204
        // If not viewing style information
 
205
        if(!checked)
 
206
        {
 
207
            webdeveloper_styleElement = null;
 
208
        }
 
209
 
 
210
        webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/view_style_information.css", "webdeveloper-view-style-information");
 
211
    }
 
212
    else
 
213
    {
 
214
        window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_domInspectorRequired"), "@home.page@documentation/faq/#dom-inspector");
 
215
    }
 
216
}
 
217
 
 
218
// View style information for an element
 
219
function webdeveloper_viewStyleInformationForElement(event)
 
220
{
 
221
    var eventTarget = event.target;
 
222
 
 
223
    // If there is an event target and the click was not a right click
 
224
    if(eventTarget && event.button != 2)
 
225
    {
 
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;
 
230
        var line               = 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;
 
241
 
 
242
        // Loop through the element rules
 
243
        for(var i = 0; i < ruleList.Count(); i++)
 
244
        {
 
245
            elementRule = ruleList.GetElementAt(i).QueryInterface(Components.interfaces.nsIDOMCSSStyleRule);
 
246
            line        = domUtils.getRuleLine(elementRule);
 
247
 
 
248
            // If there is a parent style sheet
 
249
            if(elementRule.parentStyleSheet)
 
250
            {
 
251
                styleSheet = elementRule.parentStyleSheet;
 
252
            }
 
253
 
 
254
            // If this is a valid style sheet
 
255
            if(webdeveloper_isValidStyleSheet(styleSheet))
 
256
            {
 
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>";
 
261
 
 
262
                styleText += "<p>{</p>";
 
263
 
 
264
                // Loop through the style rules
 
265
                for(var j = 0; j < styleRuleLength; j++)
 
266
                {
 
267
                    styleRule  = styleRuleList[j];
 
268
 
 
269
                    // If this is a valid style rule
 
270
                    if(webdeveloper_isValidStyleRule(styleRuleList, styleRule))
 
271
                    {
 
272
                        styleText += '<p class="rule"><span class="property">' + webdeveloper_formatStyleRuleProperty(styleRule) + '</span>: <span class="value">' + webdeveloper_formatStyleRuleValue(styleRuleList.getPropertyValue(styleRule)) + "</span>;</p>";
 
273
                    }
 
274
                }
 
275
 
 
276
                styleText += "<p>}</p>";
 
277
 
 
278
                // If this style sheet has rules already stored
 
279
                if(styleSheetArray[styleSheetHref])
 
280
                {
 
281
                    styleSheetArray[styleSheetHref] += styleText;
 
282
                }
 
283
                else
 
284
                {
 
285
                    styleSheetArray[styleSheetHref] = styleText;
 
286
                }
 
287
            }
 
288
        }
 
289
 
 
290
        // If displaying in the dashboard
 
291
        if(displayInDashboard)
 
292
        {
 
293
            var title = stringBundle.getString("webdeveloper_styleInformation");
 
294
 
 
295
            // If view style information is already open in the dashboard
 
296
            if(webdeveloper_isOpenInDashboard(title))
 
297
            {
 
298
                webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, stringBundle.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL]));
 
299
                webdeveloper_selectInDashboard(title);
 
300
            }
 
301
            else
 
302
            {
 
303
                webdeveloper_openInDashboard(title, "");
 
304
 
 
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]));
 
307
            }
 
308
        }
 
309
        else
 
310
        {
 
311
            var oldTab = getBrowser().selectedTab;
 
312
 
 
313
            webdeveloper_outputStyleInformationForElement(displayInDashboard, styleSheetArray, stringBundle.getFormattedString("webdeveloper_viewStyleInformationTitle", [oldURL]));
 
314
 
 
315
            // If the open tabs in background preference is set to true
 
316
            if(webdeveloper_getBooleanPreference("webdeveloper.open.tabs.background", true))
 
317
            {
 
318
                getBrowser().selectedTab = oldTab;
 
319
            }
 
320
        }
 
321
 
 
322
        event.stopPropagation();
 
323
        event.preventDefault();
 
324
    }
 
325
}
 
326
 
 
327
// Keypress event for view style information
 
328
function webdeveloper_viewStyleInformationKeyPress(event)
 
329
{
 
330
    webdeveloper_copyElementAncestors(event);
 
331
}
 
332
 
 
333
// Move event for view style information
 
334
function webdeveloper_viewStyleInformationMouseMove(event)
 
335
{
 
336
    var outlineElement = webdeveloper_addElementOutline(event, webdeveloper_styleElement);
 
337
 
 
338
    // If the outline element is set
 
339
    if(outlineElement)
 
340
    {
 
341
        webdeveloper_styleElement = outlineElement;
 
342
    }
 
343
}
 
344
 
 
345
// Mouseover event for view style information
 
346
function webdeveloper_viewStyleInformationMouseOver(event)
 
347
{
 
348
    webdeveloper_displayElementAncestors(event);
 
349
}