618322 - Web Console: Inspect pop-up should have scroll bars and be wider

Status: VERIFIED FIXED

(DevTools :: General, defect, P1)

Description

[B.J. Herbison]

User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2.13) Gecko/20101206 Ubuntu/10.10 (maverick) Firefox/3.6.13 ( .NET CLR 3.5.30729; .NET4.0C)
Build Identifier: Mozilla/5.0 (X11; Linux x86_64; rv:2.0b8pre) Gecko/20101209 Firefox/4.0b8pre ID:20101209030340

The Inspect sub-window in the Web Console truncates names, and doesn't provide an easy way to scroll through the list.

Reproducible: Always

Steps to Reproduce:
1. Open Web Console with control-shift-K.
2. Enter the command "document".
3. Click on [Object HTMLDocument]
Actual Results:  
A narrow sub-window appears with only a fraction of the elements visible, many element names truncated, and no scroll bars.

Expected Results:  
A wider sub-window so fewer names are truncated in the initial display, with horizontal and vertical scroll-bars so 1) the ends of all the names can be seen and 2) an easy way exists to get to the bottom of the list.

Comment 1

[[:Aleksej]]

Confirmed on Linux-i686 with Mozilla/5.0 (X11; Linux i686; rv:2.0b8pre) Gecko/20101210 Firefox/4.0b8pre and xmonad.

Comment 2

[Rob Campbell [:rc] (:robcee)]

There should be a scroll bar on the inspector panel.

Patrick can you confirm this on Linux?

Comment 3

[Kevin Dangoor]

I agree that the window can be wider, but I do see a vertical scrollbar (Mac)

Comment 4

[Mihai Sucan [:msucan]]

Neil: the Object panel we have uses xul:tree to display an object's properties in a tree. The cell text is always cropped with "..." at the end. Is there a way to disable this and just show a horizontal scrollbar?

Looked through MDN and I couldn't find a way. Also looked at tree.css, to see if there's some styling that does that. Nothing.

Thanks!

(note that xul:tree disablehscroll=false)

Comment 5

[B.J. Herbison]

I should note that some inspect windows have scroll bars. In particular, "inspect(document);" will produce a window with a vertical scroll bar, but the steps described in the bug report produce a window without a vertical scroll bar. (The version without a scroll bar has an "Update" button, which the version with a scroll bar does not have.)

(The observations in this comment are based on the 20 January Minefield.)

Comment 6

[Neil Deakin]

(In reply to comment #4)
> Neil: the Object panel we have uses xul:tree to display an object's properties
> in a tree. The cell text is always cropped with "..." at the end. Is there a
> way to disable this and just show a horizontal scrollbar?

You need to make the columns have a specific width such that the total width is larger than the container width, for example:
 <treecol width="100"/>

Then a horizontal scrollbar will appear.

> (note that xul:tree disablehscroll=false)

There isn't such an attribute. If you mean hidehscroll, then it is an internal attribute and you shouldn't be setting it yourself.

Comment 7

[Mihai Sucan [:msucan]]

(In reply to comment #6)
> (In reply to comment #4)
> > Neil: the Object panel we have uses xul:tree to display an object's properties
> > in a tree. The cell text is always cropped with "..." at the end. Is there a
> > way to disable this and just show a horizontal scrollbar?
> 
> You need to make the columns have a specific width such that the total width is
> larger than the container width, for example:
>  <treecol width="100"/>
> 
> Then a horizontal scrollbar will appear.

It works, but the width given is used as-is. 100px, 1000px, etc. Is there a way to have it automatically adjust based on the cell text values of the tree? (without hard coding)

I could write some JS function that determines the longest string in the cells, but setting the width won't be accurate. (ugly hack)

> > (note that xul:tree disablehscroll=false)
> 
> There isn't such an attribute. If you mean hidehscroll, then it is an internal
> attribute and you shouldn't be setting it yourself.

Ah, yeah, I meant hidehscroll. I saw it in the DOM Inspector.

Thanks for your quick reply!

Comment 8

[Kevin Dangoor]

(In reply to comment #5)
> I should note that some inspect windows have scroll bars. In particular,
> "inspect(document);" will produce a window with a vertical scroll bar, but the
> steps described in the bug report produce a window without a vertical scroll
> bar. (The version without a scroll bar has an "Update" button, which the
> version with a scroll bar does not have.)

On the Mac, there is a vertical scrollbar when following the steps to reproduce, so this appears to be dependent on the platform.

Comment 9

[Kevin Dangoor]

(In reply to comment #7)
> It works, but the width given is used as-is. 100px, 1000px, etc. Is there a way
> to have it automatically adjust based on the cell text values of the tree?
> (without hard coding)

It's hardcoded now, right?

I think the main thing for this bug is simply to:

1. make it wider
2. ensure that scrollbars appear as necessary on all platforms

Comment 10

[Mihai Sucan [:msucan]]

(In reply to comment #9)
> (In reply to comment #7)
> > It works, but the width given is used as-is. 100px, 1000px, etc. Is there a way
> > to have it automatically adjust based on the cell text values of the tree?
> > (without hard coding)
> 
> It's hardcoded now, right?

Not exactly.

The treecol has flex=1 which tells it to use the available width. The available width is that of the object panel itself. The treecol has no width set for itself.

I do not see any scroll bar when cell texts are longer than the tree/panel width. They are all cut off with "..." at the end. I have to make the panel wider to see the rest. If, for some reason, the text is wider than the screen, I cannot see it because I have no scroll bar.

The vertical scroll bar shows (I can scroll from top to bottom), but no horizontal scroll bar.

> I think the main thing for this bug is simply to:
> 
> 1. make it wider

Sure.

> 2. ensure that scrollbars appear as necessary on all platforms

This is the weird part. We should have an horizontal scrollbar for when the cell text doesn't fit.

We can leave it as it is, and just make the panel wider. Still, I wanted to know if I am missing something, some XUL feature. ;)

Comment 11

[Mihai Sucan [:msucan]]

Attachment: patch

This patch makes the Object Inspector panel wider.

Comment 12

[Neil Deakin]

(In reply to comment #7)
> It works, but the width given is used as-is. 100px, 1000px, etc. Is there a way
> to have it automatically adjust based on the cell text values of the tree?
> (without hard coding)

No, that's bug 136174. It wouldn't be hard to implement though.

Comment 13

[Jonathan Watt [:jwatt]]

Pushed http://hg.mozilla.org/mozilla-central/rev/51e086b46dd0

And FWIW, please in future attach a patch created using hg export.

Comment 14

[Rob Campbell [:rc] (:robcee)]

Mihai, take note!

Thanks jwatt! Marking this fixed.

Comment 15

[Maniac Vlad Florin (:vladmaniac)]

Verified fixed on 

Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110206 Firefox/4.0b12pre

Comment 16

[B.J. Herbison]

I don't think this is fixed, there are still two problems.

First, there is no horizontal scroll bar so some values still can't be seen.

Second, when I click on "[Object HTMLDocument] to get the window I also get the message:

[05:29:24.781] Non-standard document.width was used. Use standard document.body.clientWidth instead. @ https://bugzilla.mozilla.org/show_bug.cgi?id=618332

Build: Mozilla/5.0 (X11; Linux x86_64; rv:2.0b12pre) Gecko/20110206 Firefox/4.0b12pre

Comment 17

[Maniac Vlad Florin (:vladmaniac)]

As for the first item in your comment: 

I do not think we need a horizontal scroll bar for the inspector. Vertical is more than sufficient since the insp window can be easily re-sized to see all lines if necessary.

Comment 18

[Mihai Sucan [:msucan]]

(In reply to comment #16)
> I don't think this is fixed, there are still two problems.
> 
> First, there is no horizontal scroll bar so some values still can't be seen.

This is expected. We elected to only make the popup wider. As pointed out by Florin, users can make the window larger as needed.

> Second, when I click on "[Object HTMLDocument] to get the window I also get the
> message:
> 
> [05:29:24.781] Non-standard document.width was used. Use standard
> document.body.clientWidth instead. @
> https://bugzilla.mozilla.org/show_bug.cgi?id=618332

This is an unrelated bug in the code that we should fix, indeed.

Comment 19

[Maniac Vlad Florin (:vladmaniac)]

This bug should be closed. 

B.J., please file a new bug for the message you are getting.