"Learn More" text on About dialog deprecating OSX 10.7 is misaligned

RESOLVED FIXED in Firefox 51

Status

()

Firefox
Theme
P4
minor
RESOLVED FIXED
a year ago
a year ago

People

(Reporter: Stuart Dunkeld, Assigned: arai)

Tracking

48 Branch
Firefox 51
Unspecified
Mac OS X
Points:
---

Firefox Tracking Flags

(firefox51 fixed)

Details

Attachments

(3 attachments)

(Reporter)

Description

a year ago
Created attachment 8777147 [details]
Screen Shot 2016-08-03 at 00.20.07.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160726073904

Steps to reproduce:

Open "About Firefox" dialog in Firefox 48 on OSX Lion


Actual results:

The "Learn More" label next to the text "You cannot perform further updates on this system" is not correctly aligned with the text.


Expected results:

The label should be correctly aligned with the text.
(Reporter)

Updated

a year ago
Severity: normal → minor
OS: Unspecified → Mac OS X
(Reporter)

Updated

a year ago
Summary: "Learn More" text on About dialog is misaligned → "Learn More" text on About dialog deprecating OSX 10.7 is misaligned
(Assignee)

Comment 1

a year ago
The text is here.

https://dxr.mozilla.org/mozilla-central/rev/ffac2798999c5b84f1b4605a1280994bb665a406/browser/base/content/aboutDialog.xul#113
>               <hbox id="unsupportedSystem" align="center">
>                 <label>&update.unsupported.start;</label><label id="unsupportedLink" class="text-link">&update.unsupported.linkText;</label><label>&update.unsupported.end;</label>
>               </hbox>


label element has margin by default

https://dxr.mozilla.org/mozilla-central/rev/ffac2798999c5b84f1b4605a1280994bb665a406/toolkit/themes/osx/global/global.css#176
> description,
> label {
>   cursor: default;
>   margin-top: 1px;
>   margin-bottom: 2px;
>   margin-inline-start: 6px;
>   margin-inline-end: 5px;
> }


but text-link class removes the margin, and it results in misaligned text.

https://dxr.mozilla.org/mozilla-central/rev/ffac2798999c5b84f1b4605a1280994bb665a406/browser/base/content/aboutDialog.css#83
> .text-link,
> .text-link:focus {
>   margin: 0px;
>   padding: 0px;
> }


This issue happens also with other entries in updateDeck, like downloadFailed and manualUpdate.
Status: UNCONFIRMED → NEW
Component: Untriaged → Theme
Ever confirmed: true
(In reply to Tooru Fujisawa [:arai] from comment #1)
> This issue happens also with other entries in updateDeck, like
> downloadFailed and manualUpdate.

Is this only on OS X or across platforms?
Flags: needinfo?(arai.unmht)
(Assignee)

Comment 3

a year ago
(In reply to Dão Gottwald [:dao] from comment #2)
> (In reply to Tooru Fujisawa [:arai] from comment #1)
> > This issue happens also with other entries in updateDeck, like
> > downloadFailed and manualUpdate.
> 
> Is this only on OS X or across platforms?

Sorry, I just meant, there are same cases that label and text-link label are in same line inside hbox, in aboutDialog.xul.

https://dxr.mozilla.org/mozilla-central/rev/ffac2798999c5b84f1b4605a1280994bb665a406/browser/base/content/aboutDialog.xul#97
>               <hbox id="downloadFailed" align="center">
>                 <label>&update.failed.start;</label><label id="failedLink" class="text-link">&update.failed.linkText;</label><label>&update.failed.end;</label>
>               </hbox>

https://dxr.mozilla.org/mozilla-central/rev/ffac2798999c5b84f1b4605a1280994bb665a406/browser/base/content/aboutDialog.xul#109
>               <hbox id="manualUpdate" align="center">
>                 <label>&update.manual.start;</label><label id="manualLink" class="text-link"/><label>&update.manual.end;</label>
>               </hbox>


I haven't yet checked when or on which platform those hboxes are shown.
but I think those are not platform-specific.
Flags: needinfo?(arai.unmht)
Right, those labels themselves aren't platform-specific, but it would be interesting to know if this bug is platform-specific.
(Assignee)

Comment 5

a year ago
okay, will check the rendering result on each OS shortly.
Thank you!
(Assignee)

Comment 7

a year ago
Created attachment 8777307 [details]
About Firefox on each platform

yeah, you're right.
interestingly the misalignment happens only on OSX.
maybe there's other style that affects the alignment, other than margin?

I already confirmed removing the "marign: 0" rule fixes the misalignment, on OSX.
(In reply to Tooru Fujisawa [:arai] from comment #7)
> I already confirmed removing the "marign: 0" rule fixes the misalignment, on
> OSX.

Would you like to submit a patch for that?
Priority: -- → P4
(Assignee)

Comment 9

a year ago
Sure :)

According to the patch that adds the rule, it seems to be for text-link inside description,
https://hg.mozilla.org/mozilla-central/rev/87590083255c
so I'll change the selector to "description .text-link".
Assignee: nobody → arai.unmht
Status: NEW → ASSIGNED
(Assignee)

Comment 10

a year ago
Created attachment 8780242 [details] [diff] [review]
Do not apply |margin: 0px| and |padding: 0px| to text-link outside of description in about dialog.

changed selector |.text-link| to |description .text-link|, so that the rule is applied only to text link inside description, and text-link next to normal label won't be affected by the rule.
Attachment #8780242 - Flags: review?(dao+bmo)
Comment on attachment 8780242 [details] [diff] [review]
Do not apply |margin: 0px| and |padding: 0px| to text-link outside of description in about dialog.

Looks good, but please use the child selector: description > .text-link

Thanks!
Attachment #8780242 - Flags: review?(dao+bmo) → review+
(Assignee)

Comment 12

a year ago
https://hg.mozilla.org/integration/mozilla-inbound/rev/5b9a61e79b77412b0969cadb04290697ea9ebb38
Bug 1291488 - Do not apply |margin: 0px| and |padding: 0px| to text-link outside of description in about dialog. r=dao

Comment 13

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/5b9a61e79b77
Status: ASSIGNED → RESOLVED
Last Resolved: a year ago
status-firefox51: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 51
You need to log in before you can comment on or make changes to this bug.