Properly align layout elements in net inspector when horizontal scrolling is needed

VERIFIED FIXED in Firefox 4.0b10

Status

defect
--
trivial
VERIFIED FIXED
9 years ago
Last year

People

(Reporter: vladmaniac, Assigned: msucan)

Tracking

({polish})

Trunk
Firefox 4.0b10
x86
Windows 7
Dependency tree / graph

Firefox Tracking Flags

(blocking2.0 final+)

Details

(Whiteboard: [softblocker])

Attachments

(2 attachments, 1 obsolete attachment)

Posted image screenshot
Build ID: 

Mozilla/5.0 (Windows NT 6.1; rv:2.0b9pre) Gecko/20110106 Firefox/4.0b9pre

Steps:

1. Open a new tab
2. Open console 
3. Navigate http://www.mozilla.org/ 
4. Look for the net event log 

http://statse.webtrendslive.com/dcsis0ifv10000gg3ag82u4rf_7b1e/dcs.gif?&dcsdat=1294326260375&dcssip=www.mozilla.org&dcsuri=/&dcsref=http://www.mozilla.org/projects/firefox/prerelease.html&WT.co_f=188.27.147.153-591152256.30125489&WT.vtid=188.27.147.153-591152256.30125489&

(this is an e.g of a long GET request, you can try with other)

5. Click to trigger net inspector window. 
6. Scroll horizontally 

If you inspect the UI after scrolling horizontally, you will notice an 
improper arrangement of UI elements. 
Note: screenshot will make much sense.
Keywords: polish, uiwanted
Mozilla/5.0 (Windows NT 6.1; rv:2.0b9pre) Gecko/20110110 Firefox/4.0b9pre

Able to reproduce. The UI elements are not properly aligned in the net inspector window after clicking the net log event in web console.
this was fixed by bug 603625 and will be in b9.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 603625
whups, my mistake. I retested this and it is indeed a real bug. We need to add some overflow handling to our CSS.
Status: RESOLVED → REOPENED
blocking2.0: --- → ?
Resolution: DUPLICATE → ---
Whiteboard: [softblocker]
Blocks: devtools4
blocking2.0: ? → final+
>uiwanted

the plan is to just wrap the text right?  Or are there cases where the text becomes so long when wrapped that the interface has way too much vertical scrolling?  In that case we would need to get these values to collapse and expand, but that's of course considerably more work.  In general we should on scroll vertically.
Keywords: uiwanted
This bug is caused by bug 587438. When I initially coded the stylesheet I expected word-wrap will work - I didn't know of the problem with tables.

We'll need to work around that bug.
Assignee: nobody → mihai.sucan
could use overflow: hidden or scroll, I suppose. Not sure how ugly that's going to be.
(In reply to comment #6)
> could use overflow: hidden or scroll, I suppose. Not sure how ugly that's going
> to be.

The weird thing is ... overflow: hidden/auto fails to work on tables as well! I played a lot and it just doesn't work in any way. Uh oh.

So, the solution I came up with is to wrap the table in a div with overflow: auto.

Otherwise, we are going to have to limit the number of chars in header values, or we'll have to switch away from using tables entirely - only floats and similar fun. I doubt we want either case.
Posted patch proposed patch (obsolete) — Splinter Review
Proposed fix.

It's not ideal, but we are working around bugs: overflow doesn't seem to work on tables (we already have overflow:auto for the table), and word-wrap:break-word doesn't work in tables either (see bug 587438). We had "safety" measures for both of these things, in the style.

I also tried using a <div style="word-wrap:break-word"> in the <td> of each header value. That semi-works: word-wrap:break-word works only for the first line... If the text is long enough, on the second line the word is not force-wrapped. Weird. So, this is not a solution either.
Attachment #503538 - Flags: feedback?(rcampbell)
Comment on attachment 503538 [details] [diff] [review]
proposed patch

not a huge fan of the wrappering divs but according to IRC, this was unavoidable.
Attachment #503538 - Flags: feedback?(rcampbell) → feedback+
Comment on attachment 503538 [details] [diff] [review]
proposed patch

Thanks for the feedback+, Rob!

Yeah, I tried overflow:hidden/auto on the <table> and on the cell, neither worked.

Asking for review.
Attachment #503538 - Flags: review?(dao)
Comment on attachment 503538 [details] [diff] [review]
proposed patch

You can get overflow:auto to work for tables by adding display:block.
Attachment #503538 - Flags: review?(dao) → review-
neat trick! Thanks, Dao.
Thanks Dao! Updated the patch.
Attachment #503538 - Attachment is obsolete: true
Attachment #504482 - Flags: review?(dao)
Attachment #504482 - Flags: review?(dao) → review+
Comment on attachment 504482 [details] [diff] [review]
[checked-in] updated patch

http://hg.mozilla.org/mozilla-central/rev/022475b85087
Attachment #504482 - Attachment description: updated patch → [checked-in] updated patch
Status: REOPENED → RESOLVED
Closed: 9 years ago9 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 4.0b10
Comment on attachment 504482 [details] [diff] [review]
[checked-in] updated patch

http://hg.mozilla.org/mozilla-central/rev/d6046b597820

due to ¿leaks? on win7 debug.
Attachment #504482 - Attachment description: [checked-in] updated patch → [backed-out] updated patch
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
multiple runs on tinderbox still showed the leak in win7 debug after this was backed-out. It's ready to re-land.
Whiteboard: [softblocker] → [softblocker][checkin-needed]
Keywords: checkin-needed
Whiteboard: [softblocker][checkin-needed] → [softblocker]
Comment on attachment 504482 [details] [diff] [review]
[checked-in] updated patch

relanded at http://hg.mozilla.org/mozilla-central/rev/87babe7f661d
Attachment #504482 - Attachment description: [backed-out] updated patch → [checked-in] updated patch
Status: REOPENED → RESOLVED
Closed: 9 years ago9 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Verified fixed on Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b10) Gecko/20100101 Firefox/4.0b10 ID:20110121161358
Status: RESOLVED → VERIFIED
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.