1200069 - Digits in "Box model" overlap each other if it has small height

Status: NEW

(DevTools :: Inspector, defect, P2)

Description

[arni2033]

Attachment: Digits in 'Box model' overlap each other if it has small height.png

STR:   (Win7_64, Nightly 43, 32bit, ID 20150830030224, new profile, HWA off)
1. Open this "data:" URL in new tab (or click URL in the form above)
data:text/html,<div style="height:150px; width:300px; margin:110px; border:100px solid lightgray; padding:100px; background:gray;">
2. Right-click the gray rectangle, click "Inspect Element"
3. Open Inspector sidebar, select "Box model" tab
4. Reduce devtools' height so that Box model became "smaller" due to adaptive design

Result: Digits overlap each other, especially the last digit of margin-left. Can't say what digit it is
Expectations: It should be displayed in a normal way.

Comment 1

[Hernán Rodriguez Colmeiro (:peregrino)]

I looked a bit into the css behind this and I don't know if there's an easy way out here.

From what I saw, the layout section is rendered using a series of nested divs for margin->border->padding->size, and the colors are the borders of those divs. Then the values are absolutely positioned to their correct position. Finally, if the value is more than 3 chars long it's rotated.

While that works for certain values, if a large enough value is used even the rotated text will overlap some other text as they're absolutely positioned: http://i.imgur.com/MYSeLYY.png

Any ideas?

Comment 2

[arni2033]

(In reply to Hernán Rodriguez Colmeiro (:peregrino) from comment #1)
> http://i.imgur.com/MYSeLYY.png
Hm, can't believe I missed this. And well, I know how to fix some of this:
1) To make "thin" version of box model use the same width of "columns" as "normal" version
2) To move "margin", "border" and "padding" strings to the right by X+Y+Z, Y+Z and Z respectively
  (where X, Y, Z are width of columns "margin-left", "border-left" and "padding-left")
   to prevent the issue you described.
(!) This won't prevent long padding-left string from overlapping gray border box when box model is thin

Also, I'd recommend you to describe issues more tricky. For example, to get similar screenshot, but with more real-life padding "10.123456px". (I can't believe I haven't done this yet!)
Otherwise the dev is free to call it an edgecase and never fix it  :)      (nvm if you're mozilla dev)

[OOT] However, I don't like this new box model at all. I just don't file any bugs,
      because they'd be "enhancement" (= "probably will be implemented in the next decade")
  First of all, rotated strings are just awful and difficult to read.
  Secondly, the colors. I remember nidce colors in Firefox 36 ( http://ssmaker.ru/a095c2d2.png ), and
  the new colors... It's hard look at them (btw just like at the brand new white-on-blue selection)

Comment 3

[arni2033]

Attachment: screenshot 2 - bug 1200069 strings in box model overlap each other.png

Thanks for real-life example that exposes way more issues

Comment 4

[Hernán Rodriguez Colmeiro (:peregrino)]

(In reply to arni2033 from comment #2)
> 1) To make "thin" version of box model use the same width of "columns" as
> "normal" version
> 2) To move "margin", "border" and "padding" strings to the right by X+Y+Z,
> Y+Z and Z respectively
>   (where X, Y, Z are width of columns "margin-left", "border-left" and
> "padding-left")
>    to prevent the issue you described.
> (!) This won't prevent long padding-left string from overlapping gray border
> box when box model is thin

While that may work for some cases, it's not a proper solution in the long run. If you take a look into the last screenshot you posted, moving the "padding" string to the right so that it doesn't overlap with the padding-left value will make it completely overlap the padding top value.

And it can get more and more complicated, always finding an edge case. What if the margin and padding overlaps, but not the border? Would you move two strings to the right and not one? It get's messy :)

Maybe :pbro has some suggestions, but it seems the proper way to fix this is to completely change the way the layout is presented (that would be kind of a nice small project btw).

> Also, I'd recommend you to describe issues more tricky. For example, to get
> similar screenshot, but with more real-life padding "10.123456px". (I can't
> believe I haven't done this yet!)
> Otherwise the dev is free to call it an edgecase and never fix it  :)     
> (nvm if you're mozilla dev)
> 

Thanks for the piece of advice. Luckily I'm a dev so usually I comment on what I intend to fix ;)

Comment 5

[Patrick Brosset <:pbro>]

(In reply to arni2033 from comment #2)
> [OOT] However, I don't like this new box model at all. I just don't file any
> bugs,
>       because they'd be "enhancement" (= "probably will be implemented in
> the next decade")
I'm sorry you feel this way. fwiw I really appreciate you filing all the bugs you've been filing recently, this really helps. Of course only a limited number of mozilla staff and volunteers work on devtools and we just can't get to all the bugs. But filing them is key to having more contributors help.
>   First of all, rotated strings are just awful and difficult to read.
I think I agree. This seemed like a good solution to fit longer strings in a small area, but I can see how this would make it harder to read.
Not rotating the strings means we'd need to do one these things (or a combination of them):
- the area in which the string is displayed needs to grow with the string, and we need to make sure resizing the sidebar doesn't change this (which means that the box-model view might not always be entirely visible when you resize the sidebar, not ideal either),
- the labels should be rounded (which isn't ideal because people use this view specifically to get detailed information about the box),
- an ellipsis should be applied (again not ideal for the same reason).
>   Secondly, the colors. I remember nidce colors in Firefox 36 (
> http://ssmaker.ru/a095c2d2.png ), and
>   the new colors... It's hard look at them (btw just like at the brand new
> white-on-blue selection)
Colors are a very subjective thing of course. The reasoning behind these colors were:
- we needed colors that color-blind people would see easily for the highlighter,
- and we wanted to use the same colors in the box-model view
I'm reluctant to change them without proper user testing.

(In reply to Hernán Rodriguez Colmeiro (:peregrino) from comment #4)
> Maybe :pbro has some suggestions, but it seems the proper way to fix this is
> to completely change the way the layout is presented (that would be kind of
> a nice small project btw).
Open to proposals if you have ideas on how to change the way the info is presented :)
Now, one thing that would help a lot I believe is to move or show/hide the legend (which means basically undoing bug 1141571). Does it need to be always visible? Does it need to be displayed at this location? Maybe not.
Also, rounding to 2 or 3 decimal places could help.

I'm going to keep thinking about this today, see if I come up with other ideas.

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

Filter on CLIMBING SHOES

Comment 7

[Julien Cristau [:jcristau]]

Mass wontfix for bugs affecting firefox 52.