833963 - Variables View: better handling for long strings

Status: RESOLVED FIXED

(DevTools :: Debugger, defect, P2)

Description

[Mihai Sucan [:msucan]]

I have added support for expanding long string actors in variables view, with the web console integration for bug 808370. Found that the properties with long strings cannot be easily viewed/edited:

- no horizontal scroll bar,
- LSA grips render as objects, not as strings (token styling),
- string values should have a max-width (preferably in ems - relative to the font size).

This would make the use of long string properties much nicer in the variables view.

Comment 1

[Mihai Sucan [:msucan]]

Attachment: wip

WIP patch I worked on, with help from Victor.

Comment 2

[Victor Porof [:vporof][:vp]]

Attachment: v1

Ok, so text inputs can't have ellipses (obvious reasons), and labels only need a crop attribute (they don't care about css overflow).

Comment 3

[Victor Porof [:vporof][:vp]]

Attachment: v2

_setGrip was used in tests. Fixed.

Comment 4

[Mihai Sucan [:msucan]]

Comment on attachment 705560 [details] [diff] [review]
v2

Thanks for the updated patch!

Almost there. Problems I see:

1. the horizontal scrollbar always shows, even if I enlarge the variables view sidebar enough to see the entire token-string (property value). Cropping works, it renders very nicely, however, the scrollbar behaves as if there's no max-width on the value, as if there's no cropping happening.

2. when I click to edit the value, scrollbar always shows as if the input has width:30em. So it doesn't wait for me to type a 30em-long string, it just behaves as if you gave the input width:30em. Again, weird behavior.

I played a bit with the DOM Inspector tool and found that this looks like a bug I encountered last weekend when working on a web site layout using CSS 3 Flexbox (display:flex). I worked around an issue I had with display:flex by using the older flexbox implementation: display: -moz-box. I see xul:boxes use that. After two days of endless issues I reached the conclusion -moz-box is even buggier than display:flex.

One of the problems I had: container boxes had greater dimensions than they should, even if child elements had max-widths, and other constraints. It seems -moz-box ignores the end-result of child elements dimensions (things like overflow:hidden, or max-widths/heights).

With that in mind: I just tried changing .token-string from max-width to width: 30em and now rendering is correct. Horizontal scrollbar is as short as it should be. The caveat? Now any .token-string, no matter how short it is, takes 30ems.

I tried many things in the layout I worked on, in the weekend. I don't know how to workaround this issue, apart from switching to display:flex (which is saner, but beware  of other bugs).

Do you have any ideas?

Comment 5

[Victor Porof [:vporof][:vp]]

Attachment: v2.1

Reverted overflow as discussed on IRC.

Comment 6

[Mihai Sucan [:msucan]]

Comment on attachment 705818 [details] [diff] [review]
v2.1

This is fine. Thank you!

Comment 7

[Victor Porof [:vporof][:vp]]

https://hg.mozilla.org/integration/fx-team/rev/92644c33b05e

Comment 8

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/92644c33b05e