985234 - Reduce padding between dimensions and display in Box Model tab

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Heather Arthur [:harth]]

Attachment: Screenshot 2014-03-18 17.48.25.png

See the screenshot. It's the toolbox at it's default height, and part of the box model is cut off. We should reduce the padding around the dimension and position readout at the top.

Comment 1

[Heather Arthur [:harth]]

Attachment: Add overflow:auto and media query for max-height to layout panel

I added one media query for if the box model tab is too short. You can now see all the details at the toolbox's default height. I also added scrollbars for if it gets smaller.

Comment 2

[Brian Grinstead [:bgrins]]

Comment on attachment 8416597 [details] [diff] [review]
Add overflow:auto and media query for max-height to layout panel

Review of attachment 8416597 [details] [diff] [review]:
-----------------------------------------------------------------

I like the idea of the jumps it makes at smaller widths/heights.  I made a couple of suggestions for ways to simplify what is happening and update the scrolling behavior

::: browser/devtools/layoutview/view.css
@@ +4,5 @@
>  
>  body, html {
>    height: 100%;
>    width: 100%;
> +  overflow: auto;

This makes only the 320px in the middle scrollable.  Get rid of this overflow altogether and scrolling seems to work as expected.  In fact, if you use the suggested refactor for below for body positioning you can remove this whole `body, html {}` rule.

@@ +9,4 @@
>  }
>  
>  body {
>    margin: 0;

I would replace the properties in this rule with:

    max-width: 320px;
    position: relative;
    margin: 0px auto;
    padding: 0;

This is accomplishing the same thing as the media query below

@@ +185,5 @@
>  body.dim > #main > .tooltip {
>    visibility: hidden;
>  }
> +
> +@media (min-width: 320px) {

You should be able to remove this entire media query after making above change

Comment 3

[Heather Arthur [:harth]]

Attachment: add media query for max-height and increase left and right margins

Fixed to comments. I also made the margins on either side of the box a big bigger (4px), because the reduction in height made it look too wide and not balanced with the margin on top.

Comment 4

[Brian Grinstead [:bgrins]]

Comment on attachment 8416637 [details] [diff] [review]
add media query for max-height and increase left and right margins

Review of attachment 8416637 [details] [diff] [review]:
-----------------------------------------------------------------

r+, looking good

Comment 5

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/integration/fx-team/rev/3944fe46b90c

Comment 6

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/3944fe46b90c