1013689 - In-content prefs - Alignment and spacing issues

Status: VERIFIED FIXED

(Firefox :: Settings UI, defect)

Description

[Sören Hentzschel]

Attachment: incontent-alignment.png

Please adjust the alignment in the in-content preferences, see the attached screenshot.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Tim, do you think you could pick this up?

Comment 2

[Tim Nguyen :ntim]

(In reply to (Behind on reviews/needinfos) Jared Wein [:jaws] (please needinfo? me) from comment #1)
> Tim, do you think you could pick this up?

I'm a bit caught up by school and exams, but I'll see what I can do. 
Also, since these bugs are a bit old, so some of these issues might have been fixed by our styling updates (especially Richard Marti who worked on the alignment).

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Tim Nguyen [:ntim] from comment #2)
> (In reply to (Behind on reviews/needinfos) Jared Wein [:jaws] (please
> needinfo? me) from comment #1)
> > Tim, do you think you could pick this up?
> 
> I'm a bit caught up by school and exams, but I'll see what I can do. 

Thanks, your work has been fundamental to get us where we are at today.

> Also, since these bugs are a bit old, so some of these issues might have
> been fixed by our styling updates (especially Richard Marti who worked on
> the alignment).

You or Richard (I'm CCing him now) should feel free to close this bug if you don't see anything actionable left.

Comment 4

[Richard Marti (:Paenglab)]

Attachment: bug1013689.patch

It still has small alignment issues:
- the header line is 4px longer than the rest because the buttons etc. have a 4px margin-right. Added this margin to .header.
- the subelements 4px margin-right makes the right page gap too wide. Reduced the right padding on .main-content.
- The listboxes and richlistboxes aren't aligned on the left. Removed the 4px on left margin.
- Removed also some margins/paddings on description, groupbox and .groupbox-body to align them with the other content. subdialog.css has already the reversions to still look good, like the color dialog.
- On OS X changed the button margin-right/-left from 6px to 4px to align with the other elements which have 4px.

Comment 5

[Tim Nguyen :ntim]

Comment on attachment 8545427 [details] [diff] [review]
bug1013689.patch

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

Thanks for fixing this bug :)

::: toolkit/themes/osx/global/in-content/common.css
@@ +20,5 @@
>    margin-top: 3px;
>  }
>  
> +xul|button {
> +  /* use the same margin as other elements for th alignment */

nit : th should be the

::: toolkit/themes/shared/in-content/common.inc.css
@@ +47,3 @@
>  *|*.main-content {
>    padding: 40px 48px 48px;
> +  -moz-padding-end: 44px; /* compensate the 4px margin of sub elements */

Maybe child elements would fit better ?

Comment 6

[Richard Marti (:Paenglab)]

Attachment: bug1013689.patch

Fixed ntim's comments.

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8545446 [details] [diff] [review]
bug1013689.patch

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

::: toolkit/themes/osx/global/in-content/common.css
@@ +22,5 @@
>  
> +xul|button {
> +  /* use the same margin of other elements for the alignment */
> +  -moz-margin-start: 4px;
> +  -moz-margin-end: 4px;

Feel free to leave this alone, but you can use margin-left and margin-right here since they are the same.

::: toolkit/themes/shared/in-content/common.inc.css
@@ +47,3 @@
>  *|*.main-content {
>    padding: 40px 48px 48px;
> +  -moz-padding-end: 44px; /* compensate the 4px margin of child elements */

Please use:
padding-top: 40px;
-moz-padding-end: 44px; /* compensate the 4px margin of child elements */
padding-bottom: 48px;
-moz-padding-start: 48px;

Comment 8

[Richard Marti (:Paenglab)]

Attachment: patch for check-in

Comments addresed.

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/integration/fx-team/rev/83a57d0b2258

Comment 10

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/83a57d0b2258

Comment 11

[Camelia Badau [:cbadau], Desktop QA]

Attachment: 1.png

Verified on Mac 0SX 10.9.5 using latest Aurora 37.0a2 (buildID: 20150113004007) and one mention should be done here: the subcategories name is not aligned with the other elements of the page. Please see screenshot "1.png" - this is by design? It is expected?

Comment 12

[Richard Marti (:Paenglab)]

Also seen but forgot to file a bug. Please can you file one?

Comment 13

[Camelia Badau [:cbadau], Desktop QA]

(In reply to Richard Marti (:Paenglab) from comment #12)
> Also seen but forgot to file a bug. Please can you file one?

I filled bug 1121444.