Closed Bug 1363960 Opened 7 years ago Closed 7 years ago

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

Categories

(Firefox :: Settings UI, defect, P1)

55 Branch
Unspecified
All
defect

Tracking

()

VERIFIED FIXED
Firefox 56
Tracking Status
firefox-esr52 --- unaffected
firefox53 --- unaffected
firefox54 --- unaffected
firefox55 - unaffected
firefox56 --- verified

People

(Reporter: dandromb, Assigned: rickychien)

References

(Regression)

Details

(Keywords: regression, Whiteboard: [photon-preference])

Attachments

(6 files)

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.
The issue is somewhat more pronounced when not in full-screen (F11) mode.
Component: Untriaged → Preferences
See Also: → 1363646
[Tracking Requested - why for this release]: ux regression
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: regression
OS: Unspecified → All
Tracking 55+ for this visible regression. Adding regression window wanted.
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?
Attached image 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.
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)
New "Preferences" page on 1024x768 resolution doesn't extend horizontally off-screen anymore.
But on 720x768 resolution sub-pages overflow horizontally to the right.
Flags: needinfo?(hani.yacoub)
Target Milestone: Firefox 55 → Firefox 57
Assignee: nobody → rchien
Status: NEW → ASSIGNED
Priority: P2 → P1
Target Milestone: Firefox 57 → Firefox 56
Depends on: 1365133
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 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).
> 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.
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 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 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.
Patch has updated and rebased on top of bug 1365133. Please review it again. Thanks
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 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+
Pushed by rchien@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e6f33e616c08
Fix horizontal overflow for about:preferences pane r=jaws
https://hg.mozilla.org/mozilla-central/rev/e6f33e616c08
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
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
(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
(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)
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)
Verified to fix on Firefox56.0b5
Status: RESOLVED → VERIFIED
Flags: qe-verify+ → in-qa-testsuite+
No longer blocks: 1335907
Has Regression Range: --- → yes
Regressed by: 1335907
You need to log in before you can comment on or make changes to this bug.