Polish the box model properties

RESOLVED FIXED in Firefox 55

Status

()

Firefox
Developer Tools: Inspector
P3
normal
RESOLVED FIXED
9 months ago
9 months ago

People

(Reporter: gl, Assigned: lockhart)

Tracking

(Blocks: 1 bug)

unspecified
Firefox 55
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox55 fixed)

Details

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(1 attachment)

(Reporter)

Description

9 months ago
Currently, the box model properties are styled exactly like the computed view, but given the space we have and the fact that it doesn't work like the computed view, we should make sure they don't overflow and fold into the next line.
(Reporter)

Updated

9 months ago
Priority: -- → P3
(Reporter)

Updated

9 months ago
Assignee: nobody → lockhart
Status: NEW → ASSIGNED
(Reporter)

Comment 1

9 months ago
I think we should also change .boxmodel-position.boxmodel-top, .boxmodel-position.boxmodel-bottom to calc(50% - 2px) while we are at it. This seems more centered than - 1px.
Comment hidden (mozreview-request)
(Reporter)

Comment 3

9 months ago
mozreview-review
Comment on attachment 8852249 [details]
Bug 1349686: Polish the Box Model CSS.

https://reviewboard.mozilla.org/r/124474/#review127342

Give my suggestions a try and let me know what you think.

::: devtools/client/themes/boxmodel.css:328
(Diff revision 1)
>  .boxmodel-properties-wrapper {
>    padding: 0 9px;
>  }
>  
> +.boxmodel-properties-wrapper .property-name-container {
> +  width: 50%;

I think we can just do "flex: 1" here.

::: devtools/client/themes/boxmodel.css:332
(Diff revision 1)
> +.boxmodel-properties-wrapper .property-name-container {
> +  width: 50%;
> +}
> +
> +.boxmodel-properties-wrapper .property-value-container {
> +  width: 50%;

And "flex: 1" here as well.
Attachment #8852249 - Flags: review?(gl)
Comment hidden (mozreview-request)
(Reporter)

Comment 5

9 months ago
mozreview-review
Comment on attachment 8852249 [details]
Bug 1349686: Polish the Box Model CSS.

https://reviewboard.mozilla.org/r/124474/#review127474
Attachment #8852249 - Flags: review?(gl) → review+

Comment 6

9 months ago
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8d2b523a1a71
Polish the Box Model Properties. r=gl

Comment 7

9 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/8d2b523a1a71
Status: ASSIGNED → RESOLVED
Last Resolved: 9 months ago
status-firefox55: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 55

Comment 8

9 months ago
I have successfully reproduced this issue on firefox nightly according to(2017-03-22)

Fixing bug is verified on Latest Nightly-- Build ID: (20170402030202),User Agent: Mozilla/5.0 (Windows NT 10.0; rv:55.0) Gecko/20100101 Firefox/55.0

Tested OS -- Windows10 32bit

[bugday-20170329]
You need to log in before you can comment on or make changes to this bug.