color indication in DOM Panel

[Markus Staab]

the DOM panel uses a lot of different colors to render all those objects, functions, attributes etc.

there are a lot of them and unfortunately it is not transparent to the users which color has which intention.

So it would be very helpfull to have something like a legend, which shows what all those colors mean.

[Jan Honza Odvarko]

Do you think the legend should be built in Firebug (like e.g. the
'help' command
in the Console panel) or just available as a doc on getfirebug.com/
wiki?

Honz

>  dom.png
> 59KViewDownload

[Markus Staab]

I think it has to be built into firebug (maybe with an option to hide, but i am not sure about that).

when just putting it into the docs a lot of people won't fit it...

maybe it would be sufficient to have something like a statusbar at the bottom with a short description

[Jan Honza Odvarko]

On Aug 20, 3:36 pm, Markus Staab <maggus.st...@gmail.com> wrote:
> I think it has to be built into firebug (maybe with an option to hide, but
> i am not sure about that).
> when just putting it into the docs a lot of people won't fit it...

Yep, agree.

> maybe it would be sufficient to have something like a statusbar at the
> bottom with a short description

What would be displayed in the status-bar?
Can you provide some examples?
What about having better tooltip?

Honza

[Markus Staab]

enclosed you will find a mockup how the statusbar like solution could look like.

a "better" tooltip would also be an option (because there is not tooltip ATM) ;-),
but i guess a statusbar would be easier to implement and the user will not be overwhelmed with all those tooltips which appear on nearly every element inside the view.

IMO: The tooltip would only make sense in case there would be more information to the current element which need to be shown

[Jan Honza Odvarko]

On Aug 20, 3:52 pm, Markus Staab <maggus.st...@gmail.com> wrote:
> <https://lh6.googleusercontent.com/-Z5Pje_cTyc8/UDJAqefaxHI/AAAAAAAAAB...>

> enclosed you will find a mockup how the statusbar like solution could look
> like.
>
> a "better" tooltip would also be an option (because there is not tooltip
> ATM) ;-),

There are tooltips, but not for all values (try e.g. document or
window and
you should see URL)

> but i guess a statusbar would be easier to implement

Tooltips (infotips) have great support in the internal Firebug
architecture so, it should be relatively simple to do even more
complicated
(not only textual) tooltips.

Anyway, if I understand correctly, the status bar would be just
a static bar with textual legend, correct?

> and the user will not
> be overwhelmed with all those tooltips which appear on nearly every element
> inside the view.

Yep, I see the point, this could be a problem.

> IMO: The tooltip would only make sense in case there would be more
> information to the current element which need to be shown

I am not sure if I understand this..

[Sebastian Zartner]

I wonder why the info about the variable type is not clear enough. Strings in JavaScript are surrounded by quotes, so they are inside the DOM panel. Numbers and boolean values are easily recognizable, too. And functions and objects display either function() or Object { ... }.

IMO the more important thing is to differentiate between the different categories like DOM and user-defined properties.
Therefore I created issue 5364 some time ago.

Sebastian

[Markus Staab]

>Anyway, if I understand correctly, the status bar would be just 
>a static bar with textual legend, correct? 

absolutely. have a look at the screenshot i posted with the last message (at the  very bottom).

>> IMO: The tooltip would only make sense in case there would be more 
>> information to the current element which need to be shown 
>I am not sure if I understand this.. 

I can't think of a way, how we could render the tooltip to help the user for this particular issue..

[Markus Staab]

I think it is not the problem to get those different data-types, it is more about all those other colors.

For example, have a loot at my initial screenshot (left column):

- Why is $ and jQuery red?

- Why are some properties at the left bold and some not?

- Why are some properties rendered using black or green font?

[Markus Staab]

Another point:

why is "history: 13 history entries" or "applicationCache: 0 items in offline cache" rendered light blue but "localStorage: 0 Elemente in Storage" rendered green

Am Montag, 20. August 2012 16:35:17 UTC+2 schrieb Sebastian Zartner:

[Jan Honza Odvarko]

On Aug 20, 4:46 pm, Markus Staab <maggus.st...@gmail.com> wrote:
> Another point:
>
> why is "history: 13 history entries" or "applicationCache: 0 items in
> offline cache" rendered light blue but "localStorage: 0 Elemente in
> Storage" rendered green

As far as I know, there is no hidden reason behind the different
colors.
I think you can create another report for this.
Perhaps there is more such cases where the visual format isn't
logical?

Honza

[Sebastian Zartner]

>> IMO: The tooltip would only make sense in case there would be more 
>> information to the current element which need to be shown 
>I am not sure if I understand this.. 

I can't think of a way, how we could render the tooltip to help the user for this particular issue..

I guess Honza means to display something like Type: Object as tooltip and objects returning more info:

Type: Object
URL: http://getfirebug.com

For example, have a loot at my initial screenshot (left column):

- Why is $ and jQuery red?

- Why are some properties at the left bold and some not?

- Why are some properties rendered using black or green font?

See the color code description.

I totally agree that this description in the wiki is not enough. Only color encoding is almost never descriptive enough. Though I legend is taking vertical space. I think an infotip would be better in this case.

Sebastian

[Markus Staab]

thanks for pointing me to the docs.. this brings more light into the issue :-).

let me put the main parts into a nutshell:

- most colors which are not intuitive are in the left column (red, gree, black, bold, non-bold font)

- it is confusing that colors which appear on the left and also on the right have different meaning (red colored var on the left is a constructor, red colored var on the right is a String-datatype)

so i think it would be apropriate to define tooltips for the left column cells in the format sebastian suggested. (Type... Url...).

Maybe there could also be link to the corresponding wiki artikel inside the tooltip for further reading.

another option which would simplify things a lot was already described by Sebastian in 

http://code.google.com/p/fbug/issues/detail?id=5364

The categorized view there describes what atm is rendered using colors very well. Maybe just doing it that way and drop the colored rendering at all will make the view even more clear.

[Jan Honza Odvarko]

On Aug 20, 4:57 pm, Sebastian Zartner <sebastianzart...@gmail.com>
wrote:
> I guess Honza means to display something like *Type:* Object as tooltip and
> objects returning more info:
>
> * Type:* Object
> * URL:*http://getfirebug.com
Yes, something like that.

Essentially, just richer tooltips that provide more info and are not
obtrusive.

Btw. I like the idea of having links in the tooltips (as suggested by
Markus),
but it's currently not possible due to 'a tooltip is not reachable by
mouse'
limitation.

Honza

[Sebastian Zartner]

Btw. I like the idea of having links in the tooltips (as suggested by Markus), but it's currently not possible due to 'a tooltip is not reachable by mouse' limitation.

Markus, feel free to also create an issue for that.

Sebastian

[Markus Staab]

here we go:

https://code.google.com/p/fbug/issues/detail?id=5845 

how to proceed with the remaining stuff like

>let me put the main parts into a nutshell:

>- most colors which are not intuitive are in the left column (red, gree, black, bold, non-bold font)

>- it is confusing that colors which appear on the left and also on the right have different meaning (red colored var on the left is a constructor, red colored >var on the right is a String-datatype)

?

Markus

[Sebastian Zartner]

how to proceed with the remaining stuff like

let me put the main parts into a nutshell:

- most colors which are not intuitive are in the left column (red, gree, black, bold, non-bold font)

Maybe just doing it that way and drop the colored rendering at all will make the view even more clear.

Well, I guess that can be covered by issue 5364. Though note, we do not have an own category for constructors. (And to introduce a new category just for that would be too much.)
Also unifying the formatting for the property names could be counterproductive when the list of properties is very long and you don't see the headers. So the color and font indication can still be useful.
Also there are still unresolved questions about the category grouping.

- it is confusing that colors which appear on the left and also on the right have different meaning (red colored var on the left is a constructor, red colored var on the right is a String-datatype)

Maybe create again a new issue for changing their formatting to e.g. italic? This would allow differentiating between DOM property constructors and user-defined property constructors.

Sebastian