1388796 - Remove unexpected horizontal scrollbar and polish element alignment

Status: VERIFIED FIXED

(Firefox :: Settings UI, defect, P1)

Description

[Alice0775 White]

[Tracking Requested - why for this release]: it is bad UI

It needs horizontal scroll!

Steps To Reproduce:
1. open about:preferences

Comment 2

[Alice0775 White]

I can still reproduce on Nightly57.0a1 which included patch of bug 1386514.

https://hg.mozilla.org/mozilla-central/rev/ab30809b4c8e53b8723c062340960680ca419c7f
Build ID  20170822171841
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0


I think that problem is 
* Windows10 system font "Yu Gothic UI" 12pt (AFAIK 9pt default, it is too small).
and 
* "Version 57.0a1(2014-08-22)(64bit) What's new" in "Nightly Updates" section is too long, 
  so, [Show Update History] button is pushed out.

Comment 3

[Alice0775 White]

Attachment: screenshot

Comment 4

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

Please prioritize this. It seems something in the .pane-container is causing it to not shrink as much as it used to. Users who are on small displays will not be able to use the preferences.

Comment 5

[Ricky Chien [:rickychien] (inactive)]

Attachment: Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

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

Comment 6

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

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

Comment 7

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

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

Comment 8

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

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

Comment 9

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

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

Comment 10

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

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

Comment 11

[Ricky Chien [:rickychien] (inactive)]

Bug title has changed to reflect to the patch fix, below issues are addressed along with this patch (Patch has been tested under Win & macOS & Ubuntu):

* Fix unexpected horizontal scrollbar in category list
  (This isn't obvious on macOS since scrollbar might be hidden due to user settings, but it's obvious on Windows)

* Fix unexpected horizontal scrollbar in main content
  (Root cause is because #updateBox deck has lots of status. #manualUpdate is too long to shrink as small as possible. As a result, we need to wrap it within a description)

* Remove min-width: 530px; in .pane-container to avoid subtle horizontal scrollbar in main content.

* Polish element alignment

Comment 14

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

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

Comment 15

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

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

https://reviewboard.mozilla.org/r/171978/#review177396

r=me with the following changes / questions answered.

::: browser/components/preferences/in-content-new/main.xul:762
(Diff revision 7)
>    <label>&updateApplicationDescription.label;</label>
>    <hbox align="start">
>      <vbox flex="1">
>        <description>
>          &updateApplication.version.pre;<label id="version"/>&updateApplication.version.post;
> -        <label id="releasenotes" class="learnMore text-link" hidden="true">&releaseNotes.link;</label>
> +        <label id="releasenotes" class="text-link" hidden="true">&releaseNotes.link;</label>

Why did we need to remove the learnMore class here? This now gives different spacing than the other learnMore links.

::: browser/components/preferences/in-content-new/main.xul:857
(Diff revision 7)
> -          <label>&update.unsupported.start;</label><label id="unsupportedLink" class="text-link">&update.unsupported.linkText;</label><label>&update.unsupported.end;</label>
> +          <label>&update.unsupported.start;</label>
> +          <label id="unsupportedLink" class="learnMore text-link">&update.unsupported.linkText;</label>
> +          <label>&update.unsupported.end;</label>

This change should be reverted. These were all placed on their same line to prevent white-space from being inserted between the start, middle, and end labels. This change will now add an extra space between these labels.

::: browser/components/preferences/in-content-new/main.xul:867
(Diff revision 7)
> -        <image class="update-throbber"/><label>&update.restarting;</label>
> +        <image class="update-throbber"/>
> +        <label>&update.restarting;</label>

This change should likely be reverted for the same reason though it may not be as obvious.

::: browser/themes/shared/incontentprefs/preferences.inc.css
(Diff revision 7)
>  }
>  
>  .learnMore {
>    margin-inline-start: 10px;
> -  font-weight: normal;
> -  white-space: nowrap;

We had previous bugs about "Learn" appearing on a different line than "more". Why do we need to remove that here?

::: browser/themes/shared/incontentprefs/preferences.inc.css:239
(Diff revision 7)
>  #updateBox button {
>    margin-top: 0;
>    margin-bottom: 0;
> +  margin-inline-end: 0;
> +}
> +
> +#updateBox label {

Both of these selectors should be using the child selector.

::: browser/themes/shared/incontentprefs/preferences.inc.css:253
(Diff revision 7)
> +
> +#manualLink {
> +  margin-inline-start: 6px !important;
>  }
>  
>  #updateRadioGroup radio {

Please fix this selector to use the child selector while you're here.

Comment 16

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/171978/diff/7-8/

Comment 17

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/171978/diff/8-9/

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e17ddf3579d1
Remove unexpected horizontal scrollbar in about:preferences r=jaws

Comment 19

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

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

Comment 22

[Hani Yacoub, Desktop QA]

Build ID: 20170903220032
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Verified as fixed on Firefox Nightly 57.0a1 on Windows 10 x 64 and on Mac OS X 10.12.

I'll verify this bug on Ubuntu 16.04 only after bug 1392532 will be fixed.

Comment 23

[Hani Yacoub, Desktop QA]

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

Verified as fixed on Firefox Nightly 57.0a1 on Ubuntu 16.04 x64.