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

VERIFIED FIXED

Status

()

Firefox
Developer Tools
P1
normal
VERIFIED FIXED
7 years ago
7 years ago

People

(Reporter: B.J. Herbison, Assigned: msucan)

Tracking

Trunk
x86
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [Web-Console-Testday][patchclean:0121])

Attachments

(1 attachment)

(Reporter)

Description

7 years ago
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.
(Reporter)

Updated

7 years ago
Whiteboard: [Web-Console-Testday]
Version: unspecified → Trunk

Comment 1

7 years ago
Confirmed on Linux-i686 with Mozilla/5.0 (X11; Linux i686; rv:2.0b8pre) Gecko/20101210 Firefox/4.0b8pre and xmonad.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Hardware: x86_64 → x86
There should be a scroll bar on the inspector panel.

Patrick can you confirm this on Linux?

Updated

7 years ago
Blocks: 593956
Priority: -- → P1

Comment 3

7 years ago
I agree that the window can be wider, but I do see a vertical scrollbar (Mac)
Assignee: nobody → mihai.sucan
(Assignee)

Comment 4

7 years ago
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)
(Reporter)

Comment 5

7 years ago
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

7 years ago
(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.
(Assignee)

Comment 7

7 years ago
(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

7 years ago
(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

7 years ago
(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
(Assignee)

Comment 10

7 years ago
(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. ;)
(Assignee)

Comment 11

7 years ago
Created attachment 505802 [details] [diff] [review]
patch

This patch makes the Object Inspector panel wider.
Attachment #505802 - Flags: feedback?(rcampbell)
(Assignee)

Updated

7 years ago
Status: NEW → ASSIGNED
Whiteboard: [Web-Console-Testday] → [Web-Console-Testday][patchclean:0121]

Comment 12

7 years ago
(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.
Attachment #505802 - Flags: feedback?(rcampbell) → feedback+
Attachment #505802 - Flags: review?(dolske)
Attachment #505802 - Flags: review?(dolske)
Attachment #505802 - Flags: review+
Attachment #505802 - Flags: approval2.0+
Keywords: checkin-needed
Whiteboard: [Web-Console-Testday][patchclean:0121] → [Web-Console-Testday][patchclean:0121][checkin-needed]
Pushed http://hg.mozilla.org/mozilla-central/rev/51e086b46dd0

And FWIW, please in future attach a patch created using hg export.
Keywords: checkin-needed
Mihai, take note!

Thanks jwatt! Marking this fixed.
Status: ASSIGNED → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED
Whiteboard: [Web-Console-Testday][patchclean:0121][checkin-needed] → [Web-Console-Testday][patchclean:0121]
Verified fixed on 

Mozilla/5.0 (Windows NT 6.1; rv:2.0b12pre) Gecko/20110206 Firefox/4.0b12pre
Status: RESOLVED → VERIFIED
(Reporter)

Comment 16

7 years ago
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
Status: VERIFIED → REOPENED
Resolution: FIXED → ---
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.
(Assignee)

Comment 18

7 years ago
(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.
This bug should be closed. 

B.J., please file a new bug for the message you are getting.
Status: REOPENED → RESOLVED
Last Resolved: 7 years ago7 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.