← Back to branch summary

~ubuntu-branches/ubuntu/karmic/firebug/karmic

« back to all changes in this revision

Viewing changes to content/firebug/layout.js

  • Committer: Bazaar Package Importer
  • Author(s): Fabrice Coutadeur
  • Date: 2009-01-08 06:23:15 UTC
  • mfrom: (1.1.2 upstream) (0.1.3 sid)
  • Revision ID: james.westby@ubuntu.com-20090108062315-8axszgu22g9a2uyn
Tags: 1.2.1-1ubuntu1
https://launchpad.net/bugs/314962
https://launchpad.net/bugs/272959
* Merge with Debian unstable (LP: #314962)
* debian/control: 
  - Changed references of Iceweasel to Firefox
  - Changed dependency on iceweasel to firefox | abrowser 
    (also close LP: #272959)
  - Changed binary name to firebug
* debian/rules: Changed tag name from makebuilddir/iceweasel-firebug to
  makebuilddir/firebug::
* Created debian/links, debian/docs and debian/install from debian ones

Show diffs side-by-side

added added

removed removed

Lines of Context:
content/firebug/layout.js
1
 
/* See license.txt for terms of usage */
2
 
 
3
 
FBL.ns(function() { with (FBL) {
4
 
 
5
 
// ************************************************************************************************
6
 
 
7
 
function LayoutPanel() {}
8
 
 
9
 
LayoutPanel.prototype = extend(Firebug.Panel,
10
 
{
11
 
    template: domplate(
12
 
    {
13
 
        tag:
14
 
            DIV({class: "outerLayoutBox"},
15
 
                DIV({class: "offsetLayoutBox $outerTopMode $outerRightMode $outerBottomMode $outerLeftMode"},
16
 
                    DIV({class: "layoutEdgeTop layoutEdge"}),
17
 
                    DIV({class: "layoutEdgeRight layoutEdge"}),
18
 
                    DIV({class: "layoutEdgeBottom layoutEdge"}),
19
 
                    DIV({class: "layoutEdgeLeft layoutEdge"}),
20
 
 
21
 
                    DIV({class: "layoutLabelTop layoutLabel v$outerTop"},
22
 
                        SPAN({class: "editable"}, '$outerTop')
23
 
                    ),
24
 
                    DIV({class: "layoutLabelRight layoutLabel v$outerRight"},
25
 
                        SPAN({class: "editable"}, '')
26
 
                    ),
27
 
                    DIV({class: "layoutLabelBottom layoutLabel v$outerBottom"},
28
 
                        SPAN({class: "editable"}, '')
29
 
                    ),
30
 
                    DIV({class: "layoutLabelLeft layoutLabel v$outerLeft"},
31
 
                        SPAN({class: "editable"}, '$outerLeft')
32
 
                    ),
33
 
 
34
 
                    DIV({class: "layoutCaption"}, '$outerLabel'),
35
 
 
36
 
                    DIV({class: "marginLayoutBox layoutBox editGroup"},
37
 
                        DIV({class: "layoutCaption"}, $STR("LayoutMargin")),
38
 
                        DIV({class: "layoutLabelTop layoutLabel v$marginTop"},
39
 
                            SPAN({class: "editable"}, '$marginTop')
40
 
                        ),
41
 
                        DIV({class: "layoutLabelRight layoutLabel v$marginRight"},
42
 
                            SPAN({class: "editable"}, '$marginRight')
43
 
                        ),
44
 
                        DIV({class: "layoutLabelBottom layoutLabel v$marginBottom"},
45
 
                            SPAN({class: "editable"}, '$marginBottom')
46
 
                        ),
47
 
                        DIV({class: "layoutLabelLeft layoutLabel v$marginLeft"},
48
 
                            SPAN({class: "editable"}, '$marginLeft')
49
 
                        ),
50
 
 
51
 
                        DIV({class: "borderLayoutBox layoutBox editGroup"},
52
 
                            DIV({class: "layoutCaption"}, $STR("LayoutBorder")),
53
 
                            DIV({class: "layoutLabelTop layoutLabel v$borderTop"},
54
 
                                SPAN({class: "editable"}, '$borderTop')
55
 
                            ),
56
 
                            DIV({class: "layoutLabelRight layoutLabel v$borderRight"},
57
 
                                SPAN({class: "editable"}, '$borderRight')
58
 
                            ),
59
 
                            DIV({class: "layoutLabelBottom layoutLabel v$borderBottom"},
60
 
                                SPAN({class: "editable"}, '$borderBottom')
61
 
                            ),
62
 
                            DIV({class: "layoutLabelLeft layoutLabel v$borderLeft"},
63
 
                                SPAN({class: "editable"}, '$borderLeft')
64
 
                            ),
65
 
 
66
 
                            DIV({class: "paddingLayoutBox layoutBox editGroup"},
67
 
                                DIV({class: "layoutCaption"}, $STR("LayoutPadding")),
68
 
                                DIV({class: "layoutLabelTop layoutLabel v$paddingTop"},
69
 
                                    SPAN({class: "editable"}, '$paddingTop')
70
 
                                ),
71
 
                                DIV({class: "layoutLabelRight layoutLabel v$paddingRight"},
72
 
                                    SPAN({class: "editable"}, '$paddingRight')
73
 
                                ),
74
 
                                DIV({class: "layoutLabelBottom layoutLabel v$paddingBottom"},
75
 
                                    SPAN({class: "editable"}, '$paddingBottom')
76
 
                                ),
77
 
                                DIV({class: "layoutLabelLeft layoutLabel v$paddingLeft"},
78
 
                                    SPAN({class: "editable"}, '$paddingLeft')
79
 
                                ),
80
 
 
81
 
                                DIV({class: "contentLayoutBox layoutBox editGroup"},
82
 
                                    DIV({class: "layoutLabelCenter layoutLabel"},
83
 
                                        SPAN({class: "layoutLabelWidth layoutLabel editable"}, '$width'),
84
 
                                        " x ",
85
 
                                        SPAN({class: "layoutLabelHeight layoutLabel editable"}, '$height')
86
 
                                    )
87
 
                                )
88
 
                            )
89
 
                        )
90
 
                    )
91
 
                )
92
 
            ),
93
 
 
94
 
        getVerticalText: function(n)
95
 
        {
96
 
            return getVerticalText(n);
97
 
        }
98
 
    }),
99
 
 
100
 
    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
101
 
 
102
 
    onMouseOver: function(event)
103
 
    {
104
 
        var layoutBox = getAncestorByClass(event.target, "layoutBox");
105
 
        var boxFrame = layoutBox ? getBoxFrame(layoutBox) : null;
106
 
 
107
 
        if (this.highlightedBox)
108
 
            removeClass(this.highlightedBox, "highlighted");
109
 
 
110
 
        this.highlightedBox = layoutBox;
111
 
 
112
 
        if (layoutBox)
113
 
            setClass(layoutBox, "highlighted");
114
 
 
115
 
        Firebug.Inspector.highlightObject(this.selection, this.context, "boxModel", boxFrame);
116
 
    },
117
 
 
118
 
    onMouseOut: function(event)
119
 
    {
120
 
        var nextTarget = event.relatedTarget;
121
 
        if (nextTarget && getAncestorByClass(nextTarget, "layoutBox"))
122
 
            return;
123
 
 
124
 
        if (this.highlightedBox)
125
 
            removeClass(this.highlightedBox, "highlighted");
126
 
 
127
 
        this.highlightedBox = null;
128
 
 
129
 
        Firebug.Inspector.highlightObject(null, null, "boxModel");
130
 
    },
131
 
 
132
 
    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
133
 
    // extends Panel
134
 
 
135
 
    name: "layout",
136
 
    parentPanel: "html",
137
 
 
138
 
    initialize: function()
139
 
    {
140
 
        this.onMouseOver = bind(this.onMouseOver, this);
141
 
        this.onMouseOut = bind(this.onMouseOut, this);
142
 
 
143
 
        Firebug.Panel.initialize.apply(this, arguments);
144
 
    },
145
 
 
146
 
    initializeNode: function(oldPanelNode)
147
 
    {
148
 
        this.panelNode.addEventListener("mouseover", this.onMouseOver, false);
149
 
        this.panelNode.addEventListener("mouseout", this.onMouseOut, false);
150
 
    },
151
 
 
152
 
    destroyNode: function()
153
 
    {
154
 
        this.panelNode.removeEventListener("mouseover", this.onMouseOver, false);
155
 
        this.panelNode.removeEventListener("mouseout", this.onMouseOut, false);
156
 
    },
157
 
 
158
 
    supportsObject: function(object)
159
 
    {
160
 
        return object instanceof Element ? 1 : 0;
161
 
    },
162
 
 
163
 
    refresh: function()
164
 
    {
165
 
        this.updateSelection(this.selection);
166
 
    },
167
 
 
168
 
    updateSelection: function(element)
169
 
    {
170
 
        var view = element ? element.ownerDocument.defaultView : null;
171
 
        if (!view)
172
 
            return this.panelNode.innerHTML = "";
173
 
 
174
 
        var prev = getPreviousElement(element.previousSibling);
175
 
        var next = getNextElement(element.nextSibling);
176
 
 
177
 
        var style = view.getComputedStyle(element, "");
178
 
        var prevStyle = prev ? view.getComputedStyle(prev, "") : null;
179
 
        var nextStyle = next ? view.getComputedStyle(next, "") : null;
180
 
 
181
 
        function getStyle(st, name) { return parseInt(st.getPropertyCSSValue(name).cssText); }
182
 
 
183
 
        var args = readBoxStyles(style);
184
 
        args.width = element.offsetWidth
185
 
            - (args.paddingLeft+args.paddingRight+args.borderLeft+args.borderRight);
186
 
        args.height = element.offsetHeight
187
 
            - (args.paddingTop+args.paddingBottom+args.borderTop+args.borderBottom);
188
 
 
189
 
        args.outerLeft = args.outerRight = args.outerTop = args.outerBottom = 0;
190
 
        args.outerLeftMode = args.outerRightMode = args.outerTopMode = args.outerBottomMode = "";
191
 
 
192
 
        var position = style.getPropertyCSSValue("position").cssText;
193
 
        if (!Firebug.showAdjacentLayout || position == "absolute" || position == "fixed")
194
 
        {
195
 
            args.outerLabel = $STR("LayoutOffset");
196
 
            args.outerLeft = element.offsetLeft;
197
 
            args.outerTop = element.offsetTop;
198
 
            args.outerRight = args.outerBottom = 0;
199
 
            args.outerLeftMode = args.outerRightMode = args.outerTopMode
200
 
                = args.outerBottomMode = "absoluteEdge";
201
 
        }
202
 
        else
203
 
        {
204
 
            var parentStyle = isElement(element.parentNode)
205
 
                ? view.getComputedStyle(element.parentNode, "")
206
 
                : null;
207
 
 
208
 
            if (parentStyle)
209
 
            {
210
 
                var display = style.getPropertyCSSValue("display").cssText;
211
 
                if (display == "block")
212
 
                {
213
 
                    var firstSibling = getNextElement(element.parentNode.firstChild);
214
 
                    var lastSibling = getPreviousElement(element.parentNode.lastChild);
215
 
 
216
 
                    if (firstSibling == element)
217
 
                    {
218
 
                        args.outerTop = getStyle(parentStyle, "padding-top");
219
 
                        args.outerTopMode = "parentTop";
220
 
                    }
221
 
                    else if (prev)
222
 
                    {
223
 
                        args.outerTop = getStyle(prevStyle, "margin-bottom");
224
 
                        args.outerTopMode = "siblingTop";
225
 
                    }
226
 
 
227
 
                    if (lastSibling == element)
228
 
                    {
229
 
                        args.outerBottom = getStyle(parentStyle, "padding-bottom");
230
 
                        args.outerBottomMode = "parentBottom";
231
 
                    }
232
 
                    else if (next)
233
 
                    {
234
 
                        args.outerBottom = getStyle(nextStyle, "margin-top");
235
 
                        args.outerBottomMode = "siblingBottom";
236
 
                    }
237
 
 
238
 
                    args.outerLeft = getStyle(parentStyle, "padding-left");
239
 
                    args.outerLeftMode = "parentLeft";
240
 
 
241
 
                    args.outerRight = getStyle(parentStyle, "padding-right");
242
 
                    args.outerRightMode = "parentRight";
243
 
                }
244
 
                else
245
 
                {
246
 
                    if (prevStyle)
247
 
                    {
248
 
                        args.outerLeft = getStyle(prevStyle, "margin-right");
249
 
                        args.outerLeftMode = "siblingLeft";
250
 
                    }
251
 
                    else
252
 
                    {
253
 
                        args.outerLeft = getStyle(parentStyle, "padding-left");
254
 
                        args.outerLeftMode = "parentLeft";
255
 
                    }
256
 
 
257
 
                    if (nextStyle)
258
 
                    {
259
 
                        args.outerRight = getStyle(nextStyle, "margin-left");
260
 
                        args.outerRightMode = "siblingRight";
261
 
                    }
262
 
                    else
263
 
                    {
264
 
                        args.outerRight = getStyle(parentStyle, "padding-right");
265
 
                        args.outerRightMode = "parentRight";
266
 
                    }
267
 
 
268
 
                    args.outerTop = getStyle(parentStyle, "padding-top");
269
 
                    args.outerTopMode = "parentTop";
270
 
 
271
 
                    args.outerBottom = getStyle(parentStyle, "padding-bottom");
272
 
                    args.outerBottomMode = "parentBottom";
273
 
                }
274
 
 
275
 
                args.outerLabel = $STR("LayoutAdjacent");
276
 
            }
277
 
            else
278
 
                args.outerLabel = "";
279
 
        }
280
 
 
281
 
        this.template.tag.replace(args, this.panelNode);
282
 
    },
283
 
 
284
 
    updateOption: function(name, value)
285
 
    {
286
 
        if (name == "showAdjacentLayout")
287
 
        {
288
 
            this.updateSelection(this.selection);
289
 
        }
290
 
    },
291
 
 
292
 
    getOptionsMenuItems: function()
293
 
    {
294
 
        return [
295
 
            optionMenu("ShowRulers", "showRulers"),
296
 
        ];
297
 
    },
298
 
 
299
 
    getEditor: function(target, value)
300
 
    {
301
 
        if (!this.editor)
302
 
            this.editor = new LayoutEditor(this.document);
303
 
 
304
 
        return this.editor;
305
 
    }
306
 
});
307
 
 
308
 
// ************************************************************************************************
309
 
// LayoutEditor
310
 
 
311
 
function LayoutEditor(doc)
312
 
{
313
 
    this.initializeInline(doc);
314
 
 
315
 
    this.noWrap = false;
316
 
    this.numeric = true;
317
 
}
318
 
 
319
 
LayoutEditor.prototype = domplate(Firebug.InlineEditor.prototype,
320
 
{
321
 
    saveEdit: function(target, value, previousValue)
322
 
    {
323
 
        if (!this.panel.selection.style)
324
 
            return;
325
 
 
326
 
        var labelBox = getAncestorByClass(target, "layoutLabel");
327
 
        var layoutBox = getLayoutBox(labelBox);
328
 
 
329
 
        var boxFrame = getBoxFrame(layoutBox);
330
 
        var boxEdge = getBoxEdge(labelBox);
331
 
 
332
 
        var styleName;
333
 
        if (boxFrame == "content" || boxFrame == "offset")
334
 
            styleName = boxEdge.toLowerCase();
335
 
        else if (boxFrame == "border")
336
 
            styleName = boxFrame+boxEdge+"Width";
337
 
        else
338
 
            styleName = boxFrame+boxEdge;
339
 
 
340
 
        var intValue = value ? value : 0;
341
 
        this.panel.selection.style[styleName] = intValue + "px";
342
 
 
343
 
        if (Firebug.Inspector.highlightedElement == this.panel.selection)
344
 
        {
345
 
            var boxFrame = this.highlightedBox ? getBoxFrame(this.highlightedBox) : null;
346
 
            Firebug.Inspector.highlightObject(this.panel.selection, this.panel.context, "boxModel", boxFrame);
347
 
        }
348
 
 
349
 
        if (hasClass(target, "layoutVerticalText"))
350
 
            target.innerHTML = getVerticalText(intValue);
351
 
        else
352
 
            target.innerHTML = intValue;
353
 
 
354
 
        if (previousValue == "0" && !!value)
355
 
            removeClass(target.parentNode, "v0");
356
 
        else if (!value)
357
 
            setClass(target.parentNode, "v0");
358
 
    },
359
 
 
360
 
    endEditing: function(target, value, cancel)
361
 
    {
362
 
        // Don't remove groups
363
 
        return false;
364
 
    }
365
 
});
366
 
 
367
 
// ************************************************************************************************
368
 
// Local Helpers
369
 
 
370
 
function getLayoutBox(element)
371
 
{
372
 
    var re = /([^\s]+)LayoutBox/;
373
 
    for (var box = element; box; box = box.parentNode)
374
 
    {
375
 
        if (re.exec(box.className))
376
 
            return box;
377
 
    }
378
 
}
379
 
 
380
 
function getBoxFrame(element)
381
 
{
382
 
    var re = /([^\s]+)LayoutBox/;
383
 
    var m = re.exec(element.className);
384
 
    return m ? m[1] : "";
385
 
}
386
 
 
387
 
function getBoxEdge(element)
388
 
{
389
 
    var re = /layoutLabel([^\s]+)/;
390
 
    var m = re.exec(element.className);
391
 
    return m ? m[1] : "";
392
 
}
393
 
 
394
 
function getVerticalText(n)
395
 
{
396
 
    n = n+"";
397
 
    var text = [];
398
 
    for (var i = 0; i < n.length; ++i)
399
 
        text.push(n[i]);
400
 
    return text.join("<br>");
401
 
}
402
 
 
403
 
// ************************************************************************************************
404
 
 
405
 
Firebug.registerPanel(LayoutPanel);
406
 
 
407
 
// ************************************************************************************************
408
 
 
409
 
}});