Closed Bug 1388796 Opened 5 years ago Closed 5 years ago

Remove unexpected horizontal scrollbar and polish element alignment


(Firefox :: Preferences, defect, P1)

57 Branch
Windows 10



Firefox 57
Tracking Status
firefox-esr52 --- unaffected
firefox55 --- unaffected
firefox56 --- unaffected
firefox57 --- verified


(Reporter: alice0775, Assigned: rickychien)


(Blocks 1 open bug)


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


(2 files)

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

It needs horizontal scroll!

Steps To Reproduce:
1. open about:preferences
Whiteboard: [photon-structure] → [photon-structure] [triage]
Component: Headless → Preferences
Whiteboard: [photon-structure] [triage] → [photon-preferences] [triage]
Closed: 5 years ago
Resolution: --- → DUPLICATE
Whiteboard: [photon-preferences] [triage]
Duplicate of bug: 1386514
I can still reproduce on Nightly57.0a1 which included patch of bug 1386514.
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).
* "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.
Resolution: DUPLICATE → ---
Attached image screenshot
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.
Keywords: uiwantedregression
Whiteboard: [photon-preference][triage]
Assignee: nobody → rchien
Flags: qe-verify+
Priority: -- → P1
QA Contact: hani.yacoub
Target Milestone: --- → Firefox 57
Summary: about:preferences, Too wide the dialog for XGA (1024×768) monitor → Remove unexpected horizontal scrollbar and polish element alignment
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
Whiteboard: [photon-preference][triage] → [photon-preference]
Duplicate of this bug: 1393070
Duplicate of this bug: 1393373
Comment on attachment 8900571 [details]
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences

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"/>&;
> -        <label id="releasenotes" class="learnMore text-link" hidden="true">&;</label>
> +        <label id="releasenotes" class="text-link" hidden="true">&;</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/
(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/
(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/
(Diff revision 7)
> +
> +#manualLink {
> +  margin-inline-start: 6px !important;
>  }
>  #updateRadioGroup radio {

Please fix this selector to use the child selector while you're here.
Attachment #8900571 - Flags: review?(jaws) → review+
Blocks: 1357306
No longer blocks: photon-preference
Pushed by
Remove unexpected horizontal scrollbar in about:preferences r=jaws
Blocks: 1393409
Blocks: 1393370
Closed: 5 years ago5 years ago
Resolution: --- → FIXED
Duplicate of this bug: 1393409
Duplicate of this bug: 1393370
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.
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.
You need to log in before you can comment on or make changes to this bug.