Re: Lost in Space

[Jan Honza Odvarko]

On Jun 24, 12:33 pm, Mark Filipak <markfilipak.mozi...@gmail.com>
wrote:
> The only properties of window.document I can see with FireBug are
> .constructor and .location. Huh? Where are .head and .body? What am I doing
> wrong? Or has the DOM so completely changed in the last 2 years? -- That
> would be hard to believe. Thanks for your help. - Mark.
I can see both body and head in my Firebug (1.10b1)

Go to the DOM panel open the option menu (the little black triangle
next
to the panel label) and check the options that say what properties
should and should not be displayed.

Honza

[Mark Filipak]

Thank you, Honza. I enabled all "Show" options in the 1st section and that's just what I wanted.

Another question, please? I'm used to seeing the property list in alphabetical order. Do you know how I can configure FireBug to show the properties in alphabetical order?

Thanks in advance - Mark.

[Jan Honza Odvarko]

On Jun 26, 1:15 am, Mark Filipak <markfilipak.mozi...@gmail.com>
wrote:

> Thank you, Honza. I enabled all "Show" options in the 1st section and that's just what I wanted.
>
> Another question, please? I'm used to seeing the property list in alphabetical order. Do you know how I can configure FireBug to show the properties in alphabetical order?

This feature is in progress, see:
http://code.google.com/p/fbug/issues/detail?id=4231

The last suggestion is to have one global option
that sorts/do not sort DOM properties alphabetically.
This option would also affect object logging in the Console
panel and e.g. JSON previews for HTTP responses and Cookie
values.

Honza

[Mark Filipak]

Again, thanks for your kind consideration.

When DOM1 was adopted I found no tools, so I wrote my own DOM browser. It is much the same as FireBug's DOM tree (links an all), but in a much more compact form. One thing I found helpful was a status line containing the entire property chain, such as:

window.document.body.firstChild... etc.

Each level above is clickable for fast travel. Included is a getElementById('<clickable-link>') etc. ...very handy.

Short of writing directly to Joe Hewitt, how can I get ideas to the developers?

Best Regards,
Mark.

[Jan Honza Odvarko]

On Jun 26, 5:55 pm, Mark Filipak <markfilipak.mozi...@gmail.com>
wrote:

> Again, thanks for your kind consideration.
>
> When DOM1 was adopted I found no tools, so I wrote my own DOM browser. It is much the same as FireBug's DOM tree (links an all), but in a much more compact form. One thing I found helpful was a status line containing the entire property chain, such as:
>
> window.document.body.firstChild... etc.
>
> Each level above is clickable for fast travel.

If I understand correctly your feature, you can find the same at the
top of the
DOM panel (aka breadcrumbs).

Just expand an object in the DOM panel, click its value on the right
side
and if it's an object you'll go one level down and the clickable-path
will be displayed at the top.

> Included is a getElementById('<clickable-link>') etc. ...very handy.

Not sure what is this feature about...?

> Short of writing directly to Joe Hewitt, how can I get ideas to the developers?

Posting ideas to this group is the best way.
(also, note that Joe Hewitt is not working on Firebug any more)

Honza

[Mark Filipak]

No breadcrumbs visible.

[Jan Odvarko]

See the attached screenshot

 

Honza

 

 

> -----Original Message-----

> From: fir...@googlegroups.com [mailto:fir...@googlegroups.com] On

> Behalf Of Mark Filipak

> Sent: Tuesday, June 26, 2012 6:39 PM

> To: fir...@googlegroups.com

> Subject: Re: [firebug] Re: Lost in Space

> --

> You received this message because you are subscribed to the Google Groups

> "Firebug" group.

> To post to this group, send email to fir...@googlegroups.com To unsubscribe

> from this group, send email to

> firebug+u...@googlegroups.com

> For more options, visit this group at

> https://groups.google.com/forum/#!forum/firebug

[Mark Filipak]

Not found. The breadcrumbs shown in your screenshot do not appear.

FireFox version 13.0.1
FireBug version 1.9.2

I run FireFox in a sandbox. Could that be an issue?

On 2012-06-26 12:50 PM, Jan Odvarko wrote:
> See the attached screenshot
>
> Honza
>

> > -----Original Message-----
>
> > From: fir...@googlegroups.com [mailto:fir...@googlegroups.com] On
>
> > Behalf Of Mark Filipak
>
> > Sent: Tuesday, June 26, 2012 6:39 PM
>
> > To: fir...@googlegroups.com
>
> > Subject: Re: [firebug] Re: Lost in Space
>
> >
>
> > No breadcrumbs visible.
>
> >
>
> > On 2012-06-26 12:14 PM, Jan Honza Odvarko wrote:
>

> > > On Jun 26, 5:55 pm, Mark Filipak <markfilipak.mozi...@gmail.com <mailto:markfilipak.mozi...@gmail.com>>

>
> > > wrote:
>
> > >> Again, thanks for your kind consideration.
>
> > >>
>
> > >> When DOM1 was adopted I found no tools, so I wrote my own DOM
>
> > browser. It is much the same as FireBug's DOM tree (links an all), but in a much
>
> > more compact form. One thing I found helpful was a status line containing the
>
> > entire property chain, such as:
>
> >
>
> > >>
>
> > >> window.document.body.firstChild... etc.
>
> > >>
>
> > >> Each level above is clickable for fast travel.
>
> > > If I understand correctly your feature, you can find the same at the
>
> > > top of the DOM panel (aka breadcrumbs).
>
> > >
>
> > > Just expand an object in the DOM panel, click its value on the right
>
> > > side and if it's an object you'll go one level down and the
>
> > > clickable-path will be displayed at the top.
>
> > >
>
> > >> Included is a getElementById('<clickable-link>') etc. ...very handy.
>
> > > Not sure what is this feature about...?
>
> > >
>
> > >
>
> > >> Short of writing directly to Joe Hewitt, how can I get ideas to the developers?
>
> > > Posting ideas to this group is the best way.
>
> > > (also, note that Joe Hewitt is not working on Firebug any more)
>
> > >
>
> > > Honza
>
> > >
>
> >
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
>
> > "Firebug" group.
>

> > To post to this group, send email to fir...@googlegroups.com <mailto:fir...@googlegroups.com> To unsubscribe

>
> > from this group, send email to
>

> > firebug+u...@googlegroups.com <mailto:firebug+u...@googlegroups.com>

[Jan Honza Odvarko]

On Jun 26, 9:09 pm, Mark Filipak <markfilipak.mozi...@gmail.com>
wrote:

> Not found. The breadcrumbs shown in your screenshot do not appear.

But you see at least the 'window' in the Toolbar, right?

Honza

[Mark Filipak]

> But you see at least the 'window' in the Toolbar, right?

The toolbar 'looks' like this (from left to right):

[Firebug Options] [Click an element in the page to inspect] //...2 buttons
| //...divider
< > //...back & next buttons
| //...divider
[Show Command Line] [Panel Selector] //...2 buttons
Console HTML CSS Script DOM Net //...6 buttons
[_____] //...search textbox
[Minimize Firebug] [Open Firebug in New Window] //...2 buttons

Below the toolbar is the name of the global object (i.e., "window").
Below "window" is window's property tree.

As I browse the property tree, for example: to document.body.firstElementChild.firstElementChild, the top line shows "window" but nothing else.

FireBug version is 1.9.2

[Jan Honza Odvarko]

Here are instructions how to see the 'breadcrumbs' path:

1) Open Firebug on any page, e.g. google.com
2) Enable the Console panel
3) Execute the following expresssion:

console.log({a:1, b:1})

4) Click on the new log in the Console panel.
5) You should be navigated to the DOM panel and the
path should be: "window > Object"

Honza

[Denis Ruest]

Wow that was fast... I'll try it tonight.

Thanks,

Denis

Honza

[Mark Filipak]

All happened as you described. But when I traverse the properties of the global object (window in this case), I still don't get the property chain.

On 2012-06-28 10:06 AM, Denis Ruest wrote:
> Wow that was fast... I'll try it tonight.
>
> Thanks,
>
> Denis
>

> On Thu, Jun 28, 2012 at 9:32 AM, Jan Honza Odvarko <odv...@gmail.com <mailto:odv...@gmail.com>> wrote:
>
> Here are instructions how to see the 'breadcrumbs' path:
>

> 1) Open Firebug on any page, e.g. google.com <http://google.com>

> 2) Enable the Console panel
> 3) Execute the following expresssion:
>
> console.log({a:1, b:1})
>
> 4) Click on the new log in the Console panel.
> 5) You should be navigated to the DOM panel and the
> path should be: "window > Object"
>
> Honza
>
> --
> You received this message because you are subscribed to the Google
> Groups "Firebug" group.

> To post to this group, send email to fir...@googlegroups.com <mailto:fir...@googlegroups.com>

> To unsubscribe from this group, send email to

> firebug+u...@googlegroups.com <mailto:firebug%2Bunsu...@googlegroups.com>

> For more options, visit this group at

> https://groups.google.com/forum/#!forum/firebug <https://groups.google.com/forum/#%21forum/firebug>

[Mark Filipak]

All happened as you described. But when I traverse the properties of the global object (window in this case), I still don't get the property chain.

[Jan Odvarko]

> All happened as you described. But when I traverse the properties of the
global
> object (window in this case), I still don't get the property chain.

Can you provide *detailed* baby-step instructions of what you are doing?
(similar to what I did)

I'll try to reproduce on my machine.

Honza

> -----Original Message-----
> From: fir...@googlegroups.com [mailto:fir...@googlegroups.com] On
> Behalf Of Mark Filipak
> Sent: Thursday, June 28, 2012 7:12 PM
> To: fir...@googlegroups.com
> Subject: Re: [firebug] Re: Lost in Space
>

[Mark Filipak]

Step 1: Browse to https://www.google.com
Step 2: Open FireBug via button on the Navigation Toolbar in FireFox
Step 3: In FireBug's DOM property tree, browse to document.body by clicking on either [+] (for "[+] document" and then "[+] body") or the name of the property (i.e., "document", then "body")

The top greyed line reads: "window", not "window.document.body" as expected.

Ciao - Mark.

[Mark Filipak]

On 2012-06-26 12:14 PM, Jan Honza Odvarko wrote:

> On Jun 26, 5:55 pm, Mark Filipak <markfilipak.mozi...@gmail.com>

-snip-

>> Included is a getElementById('<clickable-link>') etc. ...very handy.
> Not sure what is this feature about...?

My DOM Browser opens in one or more child windows (depending upon how many calls to domBrowse() have been inserted into the code, and where, and whether the domBrowse instances have been supplied with any arguments--by object or by reference). Then, in the particular child window associated with an instance of domBrowse(), one can click on <property-path>.getElementById(), for example, and supply an argument ("foo", for example) and see it take effect immediately (jump directly to the id="foo" element in the DOM tree, for example). I have implemented this functionality for all functions. It is very handy.

Obviously, each domBrowse() generated auxiliary window is communicating with its parent window (which contains the actual document or a 'higher' level of a domBrowse() generated child window). Changes made via function arguments in child windows take effect globally so that the results are acted upon by the parent window. That's very handy too. If the function alters the DOM tree, the resulting scope remains rooted to the global object (window), but if the function provokes an event, the scope is rooted to the event object and the returned object in the child window is the event object.

- Mark.

[Jan Honza Odvarko]

On Jun 28, 8:30 pm, Mark Filipak <markfilipak.mozi...@gmail.com>
wrote:
> Step 1: Browse tohttps://www.google.com

> Step 2: Open FireBug via button on the Navigation Toolbar in FireFox
> Step 3: In FireBug's DOM property tree, browse to document.body by clicking on either [+] (for "[+] document" and then "[+] body") or the name of the property (i.e., "document", then "body")
>
> The top greyed line reads: "window", not "window.document.body" as expected.

Yep, true.

Try one more step:

Step 4: Click on the body value (next to the prop name): body#gsr

The top greyed line reads: window > document > body

Do you see it now?

Honza

[Sebastian Zartner]

Try one more step:

Step 4: Click on the body value (next to the prop name): body#gsr

The top greyed line reads: window > document > body

I just want to note that is what I mentioned in my first post. Only clicking the property's value changes the property path.

@Honza:
Do you think it makes sense to change the property path on clicking a DOM property's name?
At least this would be somewhat conform to what we have inside the HTML panel, i.e. changing the path on selection and do not limit the view.

Sebastian

[Jan Honza Odvarko]

On Jun 29, 9:49 am, Sebastian Zartner <sebastianzart...@gmail.com>
wrote:

> @Honza:
> Do you think it makes sense to change the property path on clicking a DOM
> property's name?
> At least this would be somewhat conform to what we have inside the HTML
> panel, i.e. changing the path on selection and do not limit the view.

Yes, as long as we have a support for selection in the DOM panel...
Honza

[Sebastian Zartner]

Yes, as long as we have a support for selection in the DOM panel...

Here you are: issue 5650.

Sebastian

[Mark Filipak]

Re, issue 5650: Well, Sebastian, I clicked on window.a, then window.a.b, then window.a.b.c, and finally window.a.b.c.d and the property path was not displayed at any point. So I guess that issue 5650 is not a live demo - darn it!

I'm curious about a couple of other things.

Why a > b > c > d ? Why not window.a.b.c.d ? Wouldn't that be more intuitive?

And, is it possible to open multiple independent Firebug windows so that multiple properties can be monitored at the same time?

Suggestion: As you may know, I wrote my own dom browser in 2003. I made all of my domBrowser() functions and variables properties of domBrowse() itself. That way they don't show up in the global scope. That keeps things tidy. Perhaps you guys might do the same, eh?

And an OT question: It's been a couple of years since I wrote DOM code. I don't see constructors for the HTML5 elements like Footer (i.e., I can't see a HTMLFooterElement() ). If I write:

document.createDocumentFragment().appendChild(document.createElement("Footer"));

an [object HTMLElement] is returned (i.e., it is the prototype of HTML<tag>Element, is it not?). I hated when Microsoft did such things. What's up with HTML5 and FireFox?

Thanks for preparing the issue. Your service (and Honza's!) is appreciated here. - Mark.

On 2012-07-02 7:26 PM, Sebastian Zartner wrote:
> Yes, as long as we have a support for selection in the DOM panel...
>

> Here you are: issue 5650 <http://code.google.com/p/fbug/issues/detail?id=5650>.
>
> Sebastian

[Sebastian Zartner]

Re, issue 5650: Well, Sebastian, I clicked on window.a, then window.a.b, then window.a.b.c, and finally window.a.b.c.d and the property path was not displayed at any point. So I guess that issue 5650 is not a live demo - darn it!

If you read carefully, issue 5650 is an enhancement request. Firebug does not change the property path just by clicking the property names at the moment.

I'm curious about a couple of other things.

Why a > b > c > d ? Why not window.a.b.c.d ? Wouldn't that be more intuitive?

Because that's how ancestor paths are displayed within Firebug. It might make sense to change the delimiter to a dot, though that's not part of that issue.
 

And, is it possible to open multiple independent Firebug windows so that multiple properties can be monitored at the same time?

No, but you could use the Watch side panel for this purpose by adding the properties as watches.

Suggestion: As you may know, I wrote my own dom browser in 2003. I made all of my domBrowser() functions and variables properties of domBrowse() itself. That way they don't show up in the global scope. That keeps things tidy. Perhaps you guys might do the same, eh?

Do you see something of Firebug in the global scope, which shouldn't be there?

And an OT question: It's been a couple of years since I wrote DOM code. I don't see constructors for the HTML5 elements like Footer (i.e., I can't see a HTMLFooterElement() ). If I write:

document.createDocumentFragment().appendChild(document.createElement("Footer"));

an [object HTMLElement] is returned (i.e., it is the prototype of HTML<tag>Element, is it not?). I hated when Microsoft did such things. What's up with HTML5 and FireFox?

That's not a Firefox issue but defined that way in the HTML5 standard. See the DOM interface of
http://www.w3.org/TR/2012/WD-html5-20120329/the-footer-element.html#the-footer-element
in comparison to e.g.
http://www.w3.org/TR/2012/WD-html5-20120329/the-img-element.html#the-img-element

So if you want to complain, you should do that at the W3C.
 

Thanks for preparing the issue. Your service (and Honza's!) is appreciated here.

You're welcome. If you have any other suggestions how to improve Firebug, feel free to create your own enhancement requests. But make sure you read our wiki page for making enhancement requests first.

Sebastian