← 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): Jared Greenwald
  • Date: 2008-02-21 17:34:24 UTC
  • Revision ID: james.westby@ubuntu.com-20080221173424-illircvfpyvnp4uo
Tags: upstream-1.1.0~b11+svn317
Import upstream version 1.1.0~b11+svn317

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
}});