1026679 - Make inContent preferences responsive

Status: VERIFIED FIXED

(Firefox :: Settings UI, defect)

Description

[Tim Nguyen :ntim]

Currently the inContent prefs are not responsive. When resizing the window in a too small width, it should hide the category labels.

Comment 1

[Tim Nguyen :ntim]

Basically, you'll need to add this :

@media (max-width: 800px) {
  .category-name {
    display: none;
  }
}

to browser/themes/shared/incontentprefs/preferences.css

Comment 2

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

I'm not sure we want to hide the category labels. As great as the icons that we have are, I don't think the icons are distinguishable enough to live on their own. We could also try to slide them off screen until the user has clicked on a button to list all of them, but I'll leave the full interaction design to someone on the UX team.

Comment 3

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

(Removing [good first bug] until we know the desired route forward)

Comment 4

[Tim Nguyen :ntim]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2)
> I'm not sure we want to hide the category labels. As great as the icons that
> we have are, I don't think the icons are distinguishable enough to live on
> their own. We could also try to slide them off screen until the user has
> clicked on a button to list all of them, but I'll leave the full interaction
> design to someone on the UX team.

The add-on manager currently does the same thing, and it works great.

Comment 5

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

Oh, either I didn't know that before or I did and I forgot. Thanks for the correction.

Comment 6

[Shubham Jindal [:shubham]]

Hi,

I have the file preferences.inc.css. Should I edit that file and can you tell where exactly can I see the actual bug in NightlyDebug?

Comment 7

[Tim Nguyen :ntim]

(In reply to Shubham Jindal from comment #6)
> Hi,
> 
> I have the file preferences.inc.css. Should I edit that file and can you
> tell where exactly can I see the actual bug in NightlyDebug?

When you resize the browser to a small width in the in-content prefs, you'll see that the UI is almost unusable. With the CSS you need to add, the category names should hide when the window size is lower than 800px, so there's more space for the content area.

Comment 8

[Shubham Jindal [:shubham]]

in-content prefs as in about:preferences right?

Comment 9

[Tim Nguyen :ntim]

(In reply to Shubham Jindal from comment #8)
> in-content prefs as in about:preferences right?

Yep.

Comment 10

[Shubham Jindal [:shubham]]

Attachment: bug1026679.diff

Comment 11

[Tim Nguyen :ntim]

Comment on attachment 8532943 [details] [diff] [review]
bug1026679.diff

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

::: browser/themes/shared/incontentprefs/preferences.inc.css
@@ +64,5 @@
> +@media (max-width: 800px) {
> +  .category-name {
> +    display: none;
> +  }
> +}

Please place this code after the @media (min-resolution: 2dppx) block (at line 101)

Comment 12

[Shubham Jindal [:shubham]]

Attachment: bug1026679.diff

Comment 13

[Tim Nguyen :ntim]

Comment on attachment 8533026 [details] [diff] [review]
bug1026679.diff

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

f+ assumming you tested the patch.

Comment 14

[Shubham Jindal [:shubham]]

tested as in trying to see if the bug has been solved by resizing the window to small width? or are there are some automated tests which I need to run?

Comment 15

[Tim Nguyen :ntim]

(In reply to Shubham Jindal from comment #14)
> tested as in trying to see if the bug has been solved by resizing the window
> to small width? or are there are some automated tests which I need to run?

Just resize the window to a small width and see if the category names are gone.

Comment 16

[Shubham Jindal [:shubham]]

Yeah. Already checked that :)

Comment 17

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

Comment on attachment 8533026 [details] [diff] [review]
bug1026679.diff

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

Tested and looks good. Thanks!

Comment 18

[Tim Nguyen :ntim]

Now you can set the checkin-needed keyword to have this landed :)

Comment 19

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/fx-team/rev/89a647f45019

Comment 20

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/89a647f45019

Comment 21

[Camelia Badau [:cbadau], Desktop Test Engineering]

Verified fixed on Windows 7 64bit, Ubuntu 13.10 32bit and Mac OSX 10.9.5 using latest Nightly 37.0a1 (buildID: 20150106030201).

Comment 22

[Ameen Ross]

The change made here is a step forward, but you can't quite call the design of `about:preferences` responsive yet. The forms are much too desktop-centric. Here are a couple of things that should be changed:

- Indenting of form elements based on text (length of which depends on locale as well) especially the `content` tab
- Non-wrapping text (security tab)
- Horizontal tabs (advanced tab)

Comment 23

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

(In reply to Ameen Ross from comment #22)
> The change made here is a step forward, but you can't quite call the design
> of `about:preferences` responsive yet. The forms are much too
> desktop-centric. Here are a couple of things that should be changed:
> 
> - Indenting of form elements based on text (length of which depends on
> locale as well) especially the `content` tab
> - Non-wrapping text (security tab)
> - Horizontal tabs (advanced tab)

Thanks for the feedback. The future designs of in-content preferences are more responsive, but we needed to get something shipped for a version 1.