New "Preferences" page on 1024x768 screens extends horizontally off-screen (with horizontal scroll bar) doesn't look very good, and not very easy to use

VERIFIED FIXED in Firefox 56

Status

()

Firefox
Preferences
P1
normal
VERIFIED FIXED
4 months ago
23 hours ago

People

(Reporter: Dan D (Not an employee, just a tester), Assigned: rickychien)

Tracking

({regression})

55 Branch
Firefox 56
Unspecified
All
regression
Points:
---
Dependency tree / graph
Bug Flags:
qe-verify +

Firefox Tracking Flags

(firefox-esr52 unaffected, firefox53 unaffected, firefox54 unaffected, firefox55- unaffected, firefox56 verified)

Details

(Whiteboard: [photon-preference])

MozReview Requests

()

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

Attachments

(6 attachments)

Created attachment 8866625 [details]
about_preferences-setting-overflow-off-screen.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:55.0) Gecko/20100101 Firefox/55.0
Build ID: 20170510183715

Steps to reproduce:

1. Have screen resolution of 1024 x 768. 

2. Open Firefox, maximize with F11 for largest screen area possible to work with

(OR instead, Simply open Firefox and resize window to roughly 1024x768 pixels)

3. Visit about:preferences


Actual results:

Some sub-pages overflow horizontally to the right, and require awkward horizontal scrolling to navigate.

These pages are affected: General, Privacy & Security, Updates

These pages are not affected: Files & Applications, Firefox Account


Expected results:

Responsive design should allow all of the settings to be visible on a 1024x768 screen.
(Reporter)

Comment 1

4 months ago
Created attachment 8866627 [details]
overflow-off-screen_non-fullscreen.png

The issue is somewhat more pronounced when not in full-screen (F11) mode.

Updated

4 months ago
Component: Untriaged → Preferences

Updated

4 months ago
See Also: → bug 1363646

Comment 2

4 months ago
[Tracking Requested - why for this release]: ux regression
Status: UNCONFIRMED → NEW
status-firefox54: --- → unaffected
status-firefox55: --- → affected
tracking-firefox55: --- → ?
Ever confirmed: true
Keywords: regression
OS: Unspecified → All
Tracking 55+ for this visible regression. Adding regression window wanted.
tracking-firefox55: ? → +
Keywords: regressionwindow-wanted

Comment 4

4 months ago
regression window
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=065eb60729096fa4339ec7800413aed640d9b543&tochange=069b6372cc154a1e6cffdfe1010692da91377cf5
Blocks: 1335907
Keywords: regressionwindow-wanted

Updated

3 months ago
status-firefox53: --- → unaffected

Updated

3 months ago
Flags: qe-verify+
Priority: -- → P2
QA Contact: hani.yacoub
Whiteboard: [photon-preference]
Target Milestone: --- → Firefox 55
Dolske, is this something we should be concerned about?
Flags: needinfo?(dolske)
Is this going to ride the trains? Or is Nightly only?
(Reporter)

Comment 7

2 months ago
Created attachment 8877675 [details]
General (fixed now).png

There doesn't seem to be any overflow anymore.

To navigate, only up/down scrolling is required, which is pretty typical these days for browser settings pages.

So as far as I am seeing this is fixed.
(Reporter)

Comment 8

2 months ago
Created attachment 8877677 [details]
Pivacy and Security (fixed now).png
Assuming the regressing bug in comment 4 is correct, this should be confined to the new preferences reorg, which is not riding the 55 train (bug 1363850).

Would be good if someone can confirm if this is still a bug in Nightly, there have been an number of changes landing (although this doesn't sound like something explicitly fixed).
Flags: needinfo?(dolske)
ni on Hani to confirm what Dolske asked in Comment 9.
Flags: needinfo?(hani.yacoub)
(Clearing tracking flags per comment 9)
status-firefox55: affected → unaffected
tracking-firefox55: + → -

Comment 12

2 months ago
New "Preferences" page on 1024x768 resolution doesn't extend horizontally off-screen anymore.
But on 720x768 resolution sub-pages overflow horizontally to the right.

Updated

2 months ago
Flags: needinfo?(hani.yacoub)

Updated

2 months ago
Target Milestone: Firefox 55 → Firefox 57

Updated

2 months ago
Assignee: nobody → rchien
Status: NEW → ASSIGNED
Priority: P2 → P1
Target Milestone: Firefox 57 → Firefox 56
(Assignee)

Updated

2 months ago
Depends on: 1365133
Comment hidden (mozreview-request)
(Assignee)

Comment 14

a month ago
Jared,

The root cause of the RWD issue is because that the string inside hbox/label elements are unable to be wrapped into next line, so it causes the outside hbox container cannot be shrunk as small as possible to avoid showing horizontal scrollbar.

Current patch is kind of a workaround to make these extra long hbox elements flexible, but only work for English version. I think this issue might be happened in other languages too.

P.S. Original about:preferences#sync has the same RWD issue so my current patch doesn't fix it as well.

Comment 15

a month ago
mozreview-review
Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

https://reviewboard.mozilla.org/r/157744/#review162890

Overall this looks good, can you explain why you say this will only work for English? How does it fail in other versions?

I do see that we will not wrap the text inside of the buttons, which we may need to do in some cases (though we should try our hardest not to, if possible). If we needed, we could set the "highlightable" attribute on the xul:button which will make the text inside of the button wrap (though the attribute name here doesn't really match what we are using it for).
Comment hidden (mozreview-request)
(Assignee)

Comment 17

a month ago
> Overall this looks good, can you explain why you say this will only work for English? How does it fail in other versions?

For instance, there are many rows in preferences look like this:

<hbox>
  <label>balabala...</label>
  <spacer flex="1">
  <button/>
</hbox>

After resizing browser window, text within a label is unable to be wrapped into next line even I've used textContent instead of value. It might not be a problem since some texts are not that long to cause RWD issues, but it would happen when those texts become too long in different languages/localization.

I real example is "Container Tabs", searching id="browserContainersbox" in devtools and then modify the label text as long as possible will cause the RWD issue. As a result, I'm going to wrap all rows if there are matched above pattern with <description> in order to make the text able to be wrapped.
(Assignee)

Comment 18

a month ago
Ah, I should revise my description in comment 17. Label cannot be wrapped if it follows an extra "Learn More" label. So we should wrap an additional <description> element out of them.
Comment hidden (mozreview-request)

Comment 20

a month ago
mozreview-review
Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

https://reviewboard.mozilla.org/r/157744/#review163824

::: browser/components/preferences/in-content-new/advanced.xul:117
(Diff revision 3)
> +        <description flex="1">
> -        <label>&update.failed.start;</label><label id="failedLink" class="text-link">&update.failed.linkText;</label><label>&update.failed.end;</label>
> +          <label>&update.failed.start;</label><label id="failedLink" class="text-link">&update.failed.linkText;</label><label>&update.failed.end;</label>
> +        </description>

Putting <label> inside of <description> seems odd. Can you use <hbox flex="1"> instead?

::: browser/components/preferences/in-content-new/privacy.xul:626
(Diff revision 3)
>        <column flex="1"/>
>        <column/>
>      </columns>
>      <rows id="contentRows-2">
>        <row id="playDRMContentRow">
> -        <hbox align="center">
> +        <description flex="1">

Can you just set flex="1" on the hbox instead of changing to description?
Attachment #8886985 - Flags: review?(jaws) → review-
Comment hidden (mozreview-request)
(Assignee)

Comment 22

a month ago
mozreview-review-reply
Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

https://reviewboard.mozilla.org/r/157744/#review163824

> Putting <label> inside of <description> seems odd. Can you use <hbox flex="1"> instead?

No, it doesn't work :(

The purpose of wrapping `<description>` is for making `<label>xxx</label><label>Learn more</label>` wrappable.
(Assignee)

Comment 23

a month ago
Patch has updated and rebased on top of bug 1365133. Please review it again. Thanks
Comment hidden (mozreview-request)

Comment 25

a month ago
mozreview-review
Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

https://reviewboard.mozilla.org/r/157744/#review164864

::: commit-message-aff33:1
(Diff revision 5)
> +Bug 1363960 - Fix RWD issues for Preferences r?jaws

Please change the commit message to explain what issues this is fixing. "RWD" I assume to mean "responsive web design" but that doesn't explain what is this patch is actually fixing.

::: browser/components/preferences/in-content-new/advanced.xul:1
(Diff revision 5)
> +# This Source Code Form is subject to the terms of the Mozilla Public
> +# License, v. 2.0. If a copy of the MPL was not distributed with this
> +# file, You can obtain one at http://mozilla.org/MPL/2.0/.
> +
> +<!-- Advanced panel -->

Why is this file being added? We don't have an advanced section anymore.
Attachment #8886985 - Flags: review?(jaws) → review-
Comment hidden (mozreview-request)

Comment 27

29 days ago
mozreview-review
Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

https://reviewboard.mozilla.org/r/157744/#review166482
Attachment #8886985 - Flags: review?(jaws) → review+

Comment 28

29 days ago
Pushed by rchien@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e6f33e616c08
Fix horizontal overflow for about:preferences pane r=jaws

Comment 29

29 days ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/e6f33e616c08
Status: ASSIGNED → RESOLVED
Last Resolved: 29 days ago
status-firefox56: --- → fixed
Resolution: --- → FIXED
status-firefox-esr52: --- → unaffected

Comment 30

14 days ago
Created attachment 8895866 [details]
Screenshot from 2017-08-10 16-19-35.png

Verified using latest Nightly 57.0a1 Build ID 20170810100255: 
- Window 10 x 64 (1024x768 resolution) and looks good - the issue is not reproducible in the above mentioned screens
- Mac OS x 10.12 (1280x720 resolution - min. accepted) - no issues detected
- Linux Ubuntu 16.04 - 64 bit - the issue is reproducible with an overflow to both left and right (as can be seen in the attached screenshot) in General tab only ( other pages are not affected)
Note that the screenshot is taken on a fullscreen, right after accessing about:preferences (start default position)

Should we create a new bug for this issues? and could I mark this as verified fixed?
Thank you

Comment 31

14 days ago
(In reply to Deac Alin from comment #30)
> Created attachment 8895866 [details]
> Screenshot from 2017-08-10 16-19-35.png

> Should we create a new bug for this issues? and could I mark this as
> verified fixed?
> Thank you


Seems Bug 1388796

Comment 32

a day ago
(In reply to Alice0775 White from comment #31)
> Seems Bug 1388796

The bug you mentioned reproduces on Windows 10. The issue I mentioned reproduces on Ubuntu 16.04, while the initial issue was fixed on all platforms. 
I see 2 options here: 
-Reopen this bug - as only 33% seems to be as expected - fixed (Mac OSX)
-File a new bug  - to cover the issue for Ubuntu (in this case we have 2 new bugs and the initial, Verified Fixed for just 1 platform)

I would recommend to go with the first option. Thank you
Flags: needinfo?(rchien)
(Assignee)

Comment 33

a day ago
Alice, this bug is aiming at Fx56, so please verify that under Firefox Beta 56.

Deac Alin, are you still seeing this issue on Fx56 (Beta) as well? There is another horizontal scrollbar issue on Fx57 (Nightly) but it will be addressed in bug 1392532.
Flags: needinfo?(rchien)

Comment 34

23 hours ago
Verified to fix on Firefox56.0b5

Updated

23 hours ago
Status: RESOLVED → VERIFIED
status-firefox56: fixed → verified
You need to log in before you can comment on or make changes to this bug.