Remove unexpected horizontal scrollbar and polish element alignment

VERIFIED FIXED in Firefox 57

Status

()

P1
normal
VERIFIED FIXED
a year ago
a year ago

People

(Reporter: alice0775, Assigned: rickychien)

Tracking

(Blocks: 1 bug, {regression})

57 Branch
Firefox 57
Unspecified
Windows 10
regression
Points:
---
Dependency tree / graph
Bug Flags:
qe-verify +

Firefox Tracking Flags

(firefox-esr52 unaffected, firefox55 unaffected, firefox56 unaffected, firefox57 verified)

Details

(Whiteboard: [photon-preference])

Attachments

(2 attachments)

(Reporter)

Description

a year ago
[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]
(Reporter)

Updated

a year ago
Component: Headless → Preferences

Updated

a year ago
Whiteboard: [photon-structure] [triage] → [photon-preferences] [triage]
Status: NEW → RESOLVED
Last Resolved: a year ago
tracking-firefox57: ? → ---
Resolution: --- → DUPLICATE
Whiteboard: [photon-preferences] [triage]
Duplicate of bug: 1386514
(Reporter)

Comment 2

a year ago
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.
Status: RESOLVED → REOPENED
Resolution: DUPLICATE → ---
(Reporter)

Comment 3

a year ago
Created attachment 8900197 [details]
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.
Blocks: 1356269
Keywords: uiwanted → regression
Whiteboard: [photon-preference][triage]
Assignee: nobody → rchien
Status: REOPENED → ASSIGNED
Flags: qe-verify+
Priority: -- → P1
QA Contact: hani.yacoub
Target Milestone: --- → Firefox 57
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Summary: about:preferences, Too wide the dialog for XGA (1024×768) monitor → Remove unexpected horizontal scrollbar and polish element alignment
Comment hidden (mozreview-request)
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 hidden (mozreview-request)
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.
Attachment #8900571 - Flags: review?(jaws) → review+
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Blocks: 1357306
No longer blocks: 1356269

Comment 18

a year ago
Pushed by rchien@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e17ddf3579d1
Remove unexpected horizontal scrollbar in about:preferences r=jaws
Blocks: 1393409
Blocks: 1393370

Comment 19

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/e17ddf3579d1
Status: ASSIGNED → RESOLVED
Last Resolved: a year agoa year ago
status-firefox57: affected → fixed
Resolution: --- → FIXED
Duplicate of this bug: 1393409
Duplicate of this bug: 1393370

Comment 22

a year ago
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

a year ago
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.
Status: RESOLVED → VERIFIED
status-firefox57: fixed → verified
You need to log in before you can comment on or make changes to this bug.