← Back to branch summary

~ubuntu-branches/debian/sid/webdeveloper/sid

« back to all changes in this revision

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

  • Committer: Package Import Robot
  • Author(s): Andrea Veri
  • Date: 2013-05-18 13:36:00 UTC
  • mfrom: (1.1.8)
  • Revision ID: package-import@ubuntu.com-20130518133600-weda29itup66eiaf
Tags: 1.2.5-1
* New upstream release.
* debian/rules:
  - drop the dirty hack for max_version, it's not needed
    anymore since Iceweasel >= 10.
* debian/control:
  - bump Standards-Version to latest.

Show diffs side-by-side

added added

removed removed

Lines of Context:
source/content_common/webdeveloper/features/display_element_information.js
1
 
var webdeveloper_elementInformationBlockSelected = false;
2
 
var webdeveloper_informationElement              = null;
3
 
 
4
 
// Creates the element information block
5
 
function webdeveloper_createElementInformationBlock(ownerDocument)
6
 
{
7
 
    var definitionElement = ownerDocument.createElement("dd");
8
 
    var divElement        = ownerDocument.createElement("div");
9
 
    var headerElement     = ownerDocument.createElement("h2");
10
 
    var listElement       = ownerDocument.createElement("dl");
11
 
    var stringBundle      = document.getElementById("webdeveloper-string-bundle");
12
 
    var termElement       = ownerDocument.createElement("dt");
13
 
 
14
 
    headerElement.addEventListener("mousedown", webdeveloper_selectElementInformation, false);
15
 
    headerElement.addEventListener("mouseup", webdeveloper_deselectElementInformation, false);
16
 
    headerElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_elementInformation")));
17
 
    divElement.appendChild(headerElement);
18
 
 
19
 
    termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
20
 
    termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_attributes")));
21
 
    definitionElement.setAttribute("id", "webdeveloper-element-information-attributes");
22
 
    listElement.appendChild(termElement);
23
 
    listElement.appendChild(definitionElement);
24
 
    divElement.appendChild(listElement);
25
 
 
26
 
    definitionElement = ownerDocument.createElement("dd");
27
 
    listElement       = ownerDocument.createElement("dl");
28
 
    termElement       = ownerDocument.createElement("dt");
29
 
 
30
 
    termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
31
 
    termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_position")));
32
 
    definitionElement.setAttribute("id", "webdeveloper-element-information-position");
33
 
    listElement.appendChild(termElement);
34
 
    listElement.appendChild(definitionElement);
35
 
    divElement.appendChild(listElement);
36
 
 
37
 
    definitionElement = ownerDocument.createElement("dd");
38
 
    listElement       = ownerDocument.createElement("dl");
39
 
    termElement       = ownerDocument.createElement("dt");
40
 
 
41
 
    termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
42
 
    termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_other")));
43
 
    definitionElement.setAttribute("id", "webdeveloper-element-information-other");
44
 
    listElement.appendChild(termElement);
45
 
    listElement.appendChild(definitionElement);
46
 
    divElement.appendChild(listElement);
47
 
 
48
 
    definitionElement = ownerDocument.createElement("dd");
49
 
    listElement       = ownerDocument.createElement("dl");
50
 
    termElement       = ownerDocument.createElement("dt");
51
 
 
52
 
    termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
53
 
    termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_ancestors")));
54
 
    definitionElement.setAttribute("id", "webdeveloper-element-information-ancestors");
55
 
    listElement.appendChild(termElement);
56
 
    listElement.appendChild(definitionElement);
57
 
    divElement.appendChild(listElement);
58
 
 
59
 
    definitionElement = ownerDocument.createElement("dd");
60
 
    listElement       = ownerDocument.createElement("dl");
61
 
    termElement       = ownerDocument.createElement("dt");
62
 
 
63
 
    termElement.addEventListener("click", webdeveloper_toggleElementInformationBlock, false);
64
 
    termElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_children")));
65
 
    definitionElement.setAttribute("id", "webdeveloper-element-information-children");
66
 
    listElement.appendChild(termElement);
67
 
    listElement.appendChild(definitionElement);
68
 
    divElement.appendChild(listElement);
69
 
 
70
 
    divElement.setAttribute("id", "webdeveloper-element-information");
71
 
    webdeveloper_getDocumentBodyElement(ownerDocument).appendChild(divElement);
72
 
}
73
 
 
74
 
// Called when the element information is deselected
75
 
function webdeveloper_deselectElementInformation(event)
76
 
{
77
 
    webdeveloper_elementInformationBlockSelected = false;
78
 
}
79
 
 
80
 
// Displays information about the element
81
 
function webdeveloper_displayElementInformation(element)
82
 
{
83
 
    var checked         = true;
84
 
    var contentDocument = webdeveloper_getContentDocument();
85
 
    var contentWindow   = webdeveloper_getContentWindow();
86
 
    var divElement      = null;
87
 
    var documentList    = webdeveloper_getDocuments(contentWindow);
88
 
    var documentLength  = documentList.length;
89
 
    var leftOffset      = contentWindow.pageXOffset;
90
 
    var pageDocument    = null;
91
 
    var topOffset       = contentWindow.pageYOffset;
92
 
 
93
 
    // If the element is set
94
 
    if(element)
95
 
    {
96
 
        checked = webdeveloper_convertToBoolean(element.getAttribute("checked"));
97
 
    }
98
 
    else
99
 
    {
100
 
        var currentDocument = contentWindow.document;
101
 
 
102
 
        element = document.getElementById("webdeveloper-display-element-information-menu");
103
 
 
104
 
        // If the display element information element is set
105
 
        if(currentDocument.getElementById("webdeveloper-display-element-information"))
106
 
        {
107
 
            checked = false;
108
 
        }
109
 
 
110
 
        webdeveloper_configureElement(element, "checked", checked);
111
 
    }
112
 
 
113
 
    webdeveloper_configureElement(document.getElementById("webdeveloper-information-text-toolbar"), "hidden", !checked);
114
 
 
115
 
    // Loop through the documents
116
 
    for(var i = 0; i < documentLength; i++)
117
 
    {
118
 
        pageDocument = documentList[i];
119
 
 
120
 
        // If displaying element information
121
 
        if(checked)
122
 
        {
123
 
            webdeveloper_createElementInformationBlock(pageDocument);
124
 
 
125
 
            // If this is the content document
126
 
            if(pageDocument == contentDocument)
127
 
            {
128
 
                divElement = pageDocument.getElementById("webdeveloper-element-information");
129
 
 
130
 
                // If the div element was found
131
 
                if(divElement)
132
 
                {
133
 
                    divElement.style.left = (leftOffset + 5) + "px";
134
 
                    divElement.style.top  = (topOffset + 5) + "px";
135
 
                }
136
 
            }
137
 
 
138
 
            pageDocument.addEventListener("click", webdeveloper_displayElementInformationForElement, true);
139
 
            //pageDocument.addEventListener("keypress", webdeveloper_displayElementInformationKeyPress, false);
140
 
            pageDocument.addEventListener("mousemove", webdeveloper_displayElementInformationMouseMove, false);
141
 
            pageDocument.addEventListener("mouseover", webdeveloper_displayElementInformationMouseOver, false);
142
 
        }
143
 
        else
144
 
        {
145
 
            divElement = pageDocument.getElementById("webdeveloper-element-information");
146
 
 
147
 
            // Try to remove the event listener
148
 
            try
149
 
            {
150
 
                pageDocument.removeEventListener("click", webdeveloper_displayElementInformationForElement, true);
151
 
            }
152
 
            catch(exception)
153
 
            {
154
 
                // Do nothing
155
 
            }
156
 
 
157
 
                        /*
158
 
            // Try to remove the event listener
159
 
            try
160
 
            {
161
 
                pageDocument.removeEventListener("keypress", webdeveloper_displayElementInformationKeyPress, false);
162
 
            }
163
 
            catch(exception)
164
 
            {
165
 
                // Do nothing
166
 
            }
167
 
                        */
168
 
 
169
 
            // Try to remove the event listener
170
 
            try
171
 
            {
172
 
                pageDocument.removeEventListener("mousemove", webdeveloper_displayElementInformationMouseMove, false);
173
 
            }
174
 
            catch(exception)
175
 
            {
176
 
                // Do nothing
177
 
            }
178
 
 
179
 
            // Try to remove the event listener
180
 
            try
181
 
            {
182
 
                pageDocument.removeEventListener("mouseover", webdeveloper_displayElementInformationMouseOver, false);
183
 
            }
184
 
            catch(exception)
185
 
            {
186
 
                // Do nothing
187
 
            }
188
 
 
189
 
            webdeveloper_removeElement(divElement);
190
 
            webdeveloper_removeElementOutline(webdeveloper_informationElement);
191
 
        }
192
 
    }
193
 
 
194
 
    // If not displaying element information
195
 
    if(!checked)
196
 
    {
197
 
        webdeveloper_elementInformationBlockSelected = false;
198
 
        webdeveloper_informationElement              = null;
199
 
    }
200
 
 
201
 
    webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_element_information.css", "webdeveloper-display-element-information");
202
 
}
203
 
 
204
 
// Displays information about the specific element
205
 
function webdeveloper_displayElementInformationForElement(event)
206
 
{
207
 
    var element = event.target;
208
 
 
209
 
    // If the element is set
210
 
    if(element)
211
 
    {
212
 
        var elementName   = element.tagName;
213
 
        var ownerDocument = element.ownerDocument;
214
 
 
215
 
        // If the element has a name and it is not scrollbar and it has an owner document
216
 
        if(elementName && elementName != "scrollbar" && ownerDocument)
217
 
        {
218
 
            var divElement = ownerDocument.getElementById("webdeveloper-element-information");
219
 
 
220
 
            // If the div element was found
221
 
            if(divElement)
222
 
            {
223
 
                // If the element is not the div element and the div element is not an ancestor of the element
224
 
                if(element != divElement && !webdeveloper_isAncestor(element, divElement))
225
 
                {
226
 
                    var definitionElement = ownerDocument.getElementById("webdeveloper-element-information-attributes");
227
 
                    var headerElements    = divElement.getElementsByTagName("h2");
228
 
                    var outlineElement    = null;
229
 
                    var pElement          = null;
230
 
                    var stringBundle      = document.getElementById("webdeveloper-string-bundle");
231
 
                    var tableElement      = null;
232
 
                    var tableCellElement  = null;
233
 
                    var tableRowElement   = null;
234
 
 
235
 
                    webdeveloper_removeElementOutline(element);
236
 
 
237
 
                    // If header elements were found
238
 
                    if(headerElements.length > 0)
239
 
                    {
240
 
                        var headerElement = headerElements[0];
241
 
 
242
 
                        // If the header element is set
243
 
                        if(headerElement)
244
 
                        {
245
 
                            webdeveloper_removeAllChildElements(headerElement);
246
 
 
247
 
                            headerElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(element)));
248
 
                        }
249
 
                    }
250
 
 
251
 
                    // If the definition element is set
252
 
                    if(definitionElement)
253
 
                    {
254
 
                        var elementAttribute        = null;
255
 
                        var elementAttributes       = element.attributes;
256
 
                        var elementAttributesLength = elementAttributes.length;
257
 
 
258
 
                        webdeveloper_removeAllChildElements(definitionElement);
259
 
 
260
 
                        // If there are no attributes
261
 
                        if(elementAttributesLength == 0)
262
 
                        {
263
 
                            definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
264
 
                        }
265
 
                        else
266
 
                        {
267
 
                            // Loop through the attributes
268
 
                            for(var i = 0; i < elementAttributesLength; i++)
269
 
                            {
270
 
                                elementAttribute = elementAttributes[i];
271
 
                                pElement         = ownerDocument.createElement("p");
272
 
 
273
 
                                pElement.appendChild(ownerDocument.createTextNode(elementAttribute.name + " = " + elementAttribute.value));
274
 
                                definitionElement.appendChild(pElement);
275
 
                            }
276
 
                        }
277
 
                    }
278
 
 
279
 
                    definitionElement = ownerDocument.getElementById("webdeveloper-element-information-position");
280
 
 
281
 
                    // If the definition element is set
282
 
                    if(definitionElement)
283
 
                    {
284
 
                        tableElement     = ownerDocument.createElement("table");
285
 
                        tableCellElement = ownerDocument.createElement("td");
286
 
                        tableRowElement  = ownerDocument.createElement("tr");
287
 
 
288
 
                        webdeveloper_removeAllChildElements(definitionElement);
289
 
 
290
 
                        tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_left") + ": " + webdeveloper_getElementPositionX(element) + "px"));
291
 
                        tableRowElement.appendChild(tableCellElement);
292
 
 
293
 
                        tableCellElement = ownerDocument.createElement("td");
294
 
                        tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_top") + ": " + webdeveloper_getElementPositionY(element) + "px"));
295
 
                        tableRowElement.appendChild(tableCellElement);
296
 
                        tableElement.appendChild(tableRowElement);
297
 
 
298
 
                        tableCellElement = ownerDocument.createElement("td");
299
 
                        tableRowElement  = ownerDocument.createElement("tr");
300
 
                        tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_width") + ": " + element.clientWidth + "px"));
301
 
                        tableRowElement.appendChild(tableCellElement);
302
 
 
303
 
                        tableCellElement = ownerDocument.createElement("td");
304
 
                        tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_height") + ": " + element.clientHeight + "px"));
305
 
                        tableRowElement.appendChild(tableCellElement);
306
 
                        tableElement.appendChild(tableRowElement);
307
 
                        definitionElement.appendChild(tableElement);
308
 
                    }
309
 
 
310
 
                    definitionElement = ownerDocument.getElementById("webdeveloper-element-information-other");
311
 
 
312
 
                    // If the definition element is set
313
 
                    if(definitionElement)
314
 
                    {
315
 
                        var fontFamily = element.ownerDocument.defaultView.getComputedStyle(element, null).getPropertyCSSValue("font-family");
316
 
                        var fontSize   = element.ownerDocument.defaultView.getComputedStyle(element, null).getPropertyCSSValue("font-size");
317
 
 
318
 
                        tableElement    = ownerDocument.createElement("table");
319
 
 
320
 
                        webdeveloper_removeAllChildElements(definitionElement);
321
 
 
322
 
                        // If this element has a font family
323
 
                        if(fontFamily)
324
 
                        {
325
 
                            tableCellElement = ownerDocument.createElement("td");
326
 
                            tableRowElement = ownerDocument.createElement("tr");
327
 
                            tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_fontFamily") + ":"));
328
 
                            tableRowElement.appendChild(tableCellElement);
329
 
 
330
 
                            tableCellElement = ownerDocument.createElement("td");
331
 
                            tableCellElement.appendChild(ownerDocument.createTextNode(fontFamily.cssText));
332
 
                            tableRowElement.appendChild(tableCellElement);
333
 
                            tableElement.appendChild(tableRowElement);
334
 
                        }
335
 
 
336
 
                        // If this element has a font size
337
 
                        if(fontSize)
338
 
                        {
339
 
                            tableCellElement = ownerDocument.createElement("td");
340
 
                            tableRowElement = ownerDocument.createElement("tr");
341
 
                            tableCellElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_fontSize") + ":"));
342
 
                            tableRowElement.appendChild(tableCellElement);
343
 
 
344
 
                            tableCellElement = ownerDocument.createElement("td");
345
 
                            tableCellElement.appendChild(ownerDocument.createTextNode(fontSize.cssText));
346
 
                            tableRowElement.appendChild(tableCellElement);
347
 
                            tableElement.appendChild(tableRowElement);
348
 
                        }
349
 
 
350
 
                        // If the table has child nodes
351
 
                        if(tableElement.hasChildNodes())
352
 
                        {
353
 
                            definitionElement.appendChild(tableElement);
354
 
                        }
355
 
                    }
356
 
 
357
 
                    definitionElement = ownerDocument.getElementById("webdeveloper-element-information-ancestors");
358
 
 
359
 
                    // If the definition element is set
360
 
                    if(definitionElement)
361
 
                    {
362
 
                        var ancestorList   = webdeveloper_getElementAncestors(element);
363
 
                        var ancestorLength = ancestorList.length;
364
 
 
365
 
                        webdeveloper_removeAllChildElements(definitionElement);
366
 
 
367
 
                        // If there are no ancestors
368
 
                        if(ancestorLength == 0)
369
 
                        {
370
 
                            definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
371
 
                        }
372
 
                        else
373
 
                        {
374
 
                            // Loop through the ancestors
375
 
                            for(i = 0; i < ancestorLength; i++)
376
 
                            {
377
 
                                pElement = ownerDocument.createElement("p");
378
 
 
379
 
                                pElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(ancestorList[i])));
380
 
                                definitionElement.appendChild(pElement);
381
 
                            }
382
 
                        }
383
 
                    }
384
 
 
385
 
                    definitionElement = ownerDocument.getElementById("webdeveloper-element-information-children");
386
 
 
387
 
                    // If the definition element is set
388
 
                    if(definitionElement)
389
 
                    {
390
 
                        var children    = webdeveloper_getElementChildren(element);
391
 
                        var childLength = children.length;
392
 
 
393
 
                        webdeveloper_removeAllChildElements(definitionElement);
394
 
 
395
 
                        // If there are no children
396
 
                        if(childLength == 0)
397
 
                        {
398
 
                            definitionElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_none")));
399
 
                        }
400
 
                        else
401
 
                        {
402
 
                            // Loop through the children
403
 
                            for(i = 0; i < childLength; i++)
404
 
                            {
405
 
                                pElement = ownerDocument.createElement("p");
406
 
 
407
 
                                pElement.appendChild(ownerDocument.createTextNode(webdeveloper_getElementDescription(children[i])));
408
 
                                definitionElement.appendChild(pElement);
409
 
                            }
410
 
                        }
411
 
                    }
412
 
 
413
 
                    element.style.MozOutline = "1px solid #ff0000";
414
 
 
415
 
                    // Force the style sheet to refresh
416
 
                    divElement.setAttribute("class", "force-width");
417
 
                    divElement.removeAttribute("class");
418
 
 
419
 
                    event.stopPropagation();
420
 
                    event.preventDefault();
421
 
                }
422
 
            }
423
 
        }
424
 
    }
425
 
}
426
 
 
427
 
// Keypress event for display element information
428
 
function webdeveloper_displayElementInformationKeyPress(event)
429
 
{
430
 
    webdeveloper_copyElementAncestors(event);
431
 
}
432
 
 
433
 
// Move event for display element information
434
 
function webdeveloper_displayElementInformationMouseMove(event)
435
 
{
436
 
    // If the element information block is selected
437
 
    if(webdeveloper_elementInformationBlockSelected)
438
 
    {
439
 
        webdeveloper_moveElementInformationBlock(event);
440
 
    }
441
 
    else
442
 
    {
443
 
        var element = event.target;
444
 
 
445
 
        // If the element is set
446
 
        if(element)
447
 
        {
448
 
            var ownerDocument = element.ownerDocument;
449
 
 
450
 
            // If the owner document is set
451
 
            if(ownerDocument)
452
 
            {
453
 
                var divElement = ownerDocument.getElementById("webdeveloper-element-information");
454
 
 
455
 
                // If the div element was found
456
 
                if(divElement)
457
 
                {
458
 
                    // If the element is not the div element and the div element is not an ancestor of the element
459
 
                    if(element != divElement && !webdeveloper_isAncestor(element, divElement))
460
 
                    {
461
 
                        var outlineElement = webdeveloper_addElementOutline(event, webdeveloper_informationElement);
462
 
 
463
 
                        // If the outline element is set
464
 
                        if(outlineElement)
465
 
                        {
466
 
                            webdeveloper_informationElement = outlineElement;
467
 
                        }
468
 
                    }
469
 
 
470
 
                }
471
 
            }
472
 
        }
473
 
    }
474
 
}
475
 
 
476
 
// Mouseover event for display element information
477
 
function webdeveloper_displayElementInformationMouseOver(event)
478
 
{
479
 
    var element = event.target;
480
 
 
481
 
    // If the element is set
482
 
    if(element)
483
 
    {
484
 
        var ownerDocument = element.ownerDocument;
485
 
 
486
 
        // If the owner document is set
487
 
        if(ownerDocument)
488
 
        {
489
 
            var divElement = ownerDocument.getElementById("webdeveloper-element-information");
490
 
 
491
 
            // If the div element was found
492
 
            if(divElement)
493
 
            {
494
 
                // If the element is not the div element and the div element is not an ancestor of the element
495
 
                if(element != divElement && !webdeveloper_isAncestor(element, divElement))
496
 
                {
497
 
                    webdeveloper_displayElementAncestors(event);
498
 
                }
499
 
 
500
 
            }
501
 
        }
502
 
    }
503
 
}
504
 
 
505
 
// Move the element information block
506
 
function webdeveloper_moveElementInformationBlock(event)
507
 
{
508
 
    var element = event.target;
509
 
 
510
 
    // If the element is set
511
 
    if(element)
512
 
    {
513
 
        var ownerDocument = element.ownerDocument;
514
 
 
515
 
        // If the target has an owner document
516
 
        if(ownerDocument)
517
 
        {
518
 
            var divElement = ownerDocument.getElementById("webdeveloper-element-information");
519
 
 
520
 
            // If the div element was found
521
 
            if(divElement)
522
 
            {
523
 
                divElement.style.left = (event.pageX - 5) + "px";
524
 
                divElement.style.top  = (event.pageY - 5) + "px";
525
 
            }
526
 
        }
527
 
    }
528
 
}
529
 
 
530
 
// Called when the element information is selected
531
 
function webdeveloper_selectElementInformation(event)
532
 
{
533
 
    // If the click was not a right click
534
 
    if(event.button != 2)
535
 
    {
536
 
        webdeveloper_elementInformationBlockSelected = true;
537
 
    }
538
 
}
539
 
 
540
 
// Toggles an element information block
541
 
function webdeveloper_toggleElementInformationBlock(event)
542
 
{
543
 
    var element = event.target;
544
 
 
545
 
    // If there is a target element
546
 
    if(element)
547
 
    {
548
 
        // If the element has a class attribute
549
 
        if(element.hasAttribute("class"))
550
 
        {
551
 
            element.removeAttribute("class");
552
 
        }
553
 
        else
554
 
        {
555
 
            element.setAttribute("class", "collapsed");
556
 
        }
557
 
    }
558
 
}