Closed Bug 1026679 Opened 5 years ago Closed 5 years ago

Make inContent preferences responsive

Categories

(Firefox :: Preferences, defect)

defect
Not set

Tracking

()

VERIFIED FIXED
Firefox 37

People

(Reporter: ntim, Assigned: shubham, Mentored)

References

Details

(Whiteboard: [good first bug][lang=css])

Attachments

(1 file, 1 obsolete file)

Currently the inContent prefs are not responsive. When resizing the window in a too small width, it should hide the category labels.
OS: Windows 8.1 → All
Hardware: x86_64 → All
Mentor: jaws
Whiteboard: [good first bug][lang=css]
Mentor: ntim007
Basically, you'll need to add this :

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

to browser/themes/shared/incontentprefs/preferences.css
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.
Blocks: 718011
No longer blocks: ship-incontent-prefs
(Removing [good first bug] until we know the desired route forward)
Whiteboard: [good first bug][lang=css] → [lang=css]
(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.
Oh, either I didn't know that before or I did and I forgot. Thanks for the correction.
Whiteboard: [lang=css] → [good first bug][lang=css]
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?
(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.
Assignee: nobody → shubhamjindal18
Status: NEW → ASSIGNED
in-content prefs as in about:preferences right?
(In reply to Shubham Jindal from comment #8)
> in-content prefs as in about:preferences right?

Yep.
Attached patch bug1026679.diff (obsolete) — Splinter Review
Attachment #8532943 - Flags: review?(jaws)
Attachment #8532943 - Flags: feedback?(ntim007)
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)
Attachment #8532943 - Flags: review?(jaws)
Attachment #8532943 - Flags: feedback?(ntim007)
Attached patch bug1026679.diffSplinter Review
Attachment #8532943 - Attachment is obsolete: true
Attachment #8533026 - Flags: review?(jaws)
Attachment #8533026 - Flags: feedback?(ntim007)
Comment on attachment 8533026 [details] [diff] [review]
bug1026679.diff

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

f+ assumming you tested the patch.
Attachment #8533026 - Flags: feedback?(ntim007) → feedback+
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?
(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.
Yeah. Already checked that :)
Comment on attachment 8533026 [details] [diff] [review]
bug1026679.diff

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

Tested and looks good. Thanks!
Attachment #8533026 - Flags: review?(jaws) → review+
Now you can set the checkin-needed keyword to have this landed :)
Keywords: checkin-needed
https://hg.mozilla.org/integration/fx-team/rev/89a647f45019
Keywords: checkin-needed
Whiteboard: [good first bug][lang=css] → [good first bug][lang=css][fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/89a647f45019
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Whiteboard: [good first bug][lang=css][fixed-in-fx-team] → [good first bug][lang=css]
Target Milestone: --- → Firefox 37
Verified fixed on Windows 7 64bit, Ubuntu 13.10 32bit and Mac OSX 10.9.5 using latest Nightly 37.0a1 (buildID: 20150106030201).
Status: RESOLVED → VERIFIED
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)
(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.
You need to log in before you can comment on or make changes to this bug.