Closed Bug 1388796 Opened 7 years ago Closed 7 years ago

Remove unexpected horizontal scrollbar and polish element alignment

Categories

(Firefox :: Settings UI, defect, P1)

Product:
Firefox
Component:
Settings UI
Version:
57 Branch
Platform:
Unspecified
Windows 10
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
Firefox 57
Tracking Flags:
Tracking Status
firefox-esr52 --- unaffected
firefox55 --- unaffected
firefox56 --- unaffected
firefox57 --- verified

People

(Reporter: alice0775, Assigned: rickychien)

References

(Blocks 1 open bug)

Details

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

Attachments

(2 files)

screenshot
160.53 KB, image/png
Details
Bug 1388796 - Remove unexpected horizontal scrollbar in about:preferences
59 bytes, text/x-review-board-request
jaws
: review+
Details 
[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]
Status: NEW → RESOLVED
Closed: 7 years ago
tracking-firefox57: ? → ---
Resolution: --- → DUPLICATE
Whiteboard: [photon-preferences] [triage]
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 → ---
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.
Blocks: photon-preference
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

    
    

    
      
  

    
    

    
      
  

    
    

    
      
  

    
    

    
      
  
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]

    
    

    
      
  

    
    

    
  
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+

    
    

    
      
  

    
    

    
      
  
Blocks: 1357306
No longer blocks: photon-preference

    
    

    
  
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

    
    

    
  
https://hg.mozilla.org/mozilla-central/rev/e17ddf3579d1
Status: ASSIGNED → RESOLVED
Closed: 7 years ago → 7 years ago

          status-firefox57:
          affected → fixed
Resolution: --- → FIXED

    
    

    
  
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.
Status: RESOLVED → VERIFIED

          status-firefox57:
          fixed → verified

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: