1363960 - 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

Status: VERIFIED FIXED

(Firefox :: Settings UI, defect, P1)

Description

[Dan D (volunteer tester from the community)]

Attachment: 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.

Comment 1

[Dan D (volunteer tester from the community)]

Attachment: overflow-off-screen_non-fullscreen.png

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

Comment 2

[Alice0775 White]

[Tracking Requested - why for this release]: ux regression

Comment 3

[Marcia Knous [:marcia]]

Tracking 55+ for this visible regression. Adding regression window wanted.

Comment 4

[Alice0775 White]

regression window
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=065eb60729096fa4339ec7800413aed640d9b543&tochange=069b6372cc154a1e6cffdfe1010692da91377cf5

Comment 5

[Mike Taylor [:miketaylr]]

Dolske, is this something we should be concerned about?

Comment 6

[Mike Taylor [:miketaylr]]

Is this going to ride the trains? Or is Nightly only?

Comment 7

[Dan D (volunteer tester from the community)]

Attachment: 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.

Comment 8

[Dan D (volunteer tester from the community)]

Attachment: Pivacy and Security (fixed now).png

Comment 9

[Justin Dolske [:Dolske]]

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).

Comment 10

[Marcia Knous [:marcia]]

ni on Hani to confirm what Dolske asked in Comment 9.

Comment 11

[Justin Dolske [:Dolske]]

(Clearing tracking flags per comment 9)

Comment 12

[Hani Yacoub, Desktop QA]

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

Comment 13

[Ricky Chien [:rickychien] (inactive)]

Attachment: Bug 1363960 - Fix horizontal overflow for about:preferences pane

Review commit: https://reviewboard.mozilla.org/r/157744/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/157744/

Comment 14

[Ricky Chien [:rickychien] (inactive)]

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

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

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 16

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/157744/diff/1-2/

Comment 17

[Ricky Chien [:rickychien] (inactive)]

> 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.

Comment 18

[Ricky Chien [:rickychien] (inactive)]

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 19

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/157744/diff/2-3/

Comment 20

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

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?

Comment 21

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/157744/diff/3-4/

Comment 22

[Ricky Chien [:rickychien] (inactive)]

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.

Comment 23

[Ricky Chien [:rickychien] (inactive)]

Patch has updated and rebased on top of bug 1365133. Please review it again. Thanks

Comment 24

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/157744/diff/4-5/

Comment 25

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

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.

Comment 26

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/157744/diff/5-6/

Comment 27

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

Comment on attachment 8886985 [details]
Bug 1363960 - Fix horizontal overflow for about:preferences pane

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

Comment 28

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e6f33e616c08
Fix horizontal overflow for about:preferences pane r=jaws

Comment 29

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/e6f33e616c08

Comment 30

[Deac Alin]

Attachment: 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

[Alice0775 White]

(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

[Deac Alin]

(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

Comment 33

[Ricky Chien [:rickychien] (inactive)]

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.

Comment 34

[Alice0775 White]

Verified to fix on Firefox56.0b5