Closed Bug 1291488 Opened 5 years ago Closed 5 years ago

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

Categories

(Firefox :: Theme, defect, P4)

48 Branch
Unspecified
macOS
defect

Tracking

()

RESOLVED FIXED
Firefox 51
Tracking Status
firefox51 --- fixed

People

(Reporter: stuartd, Assigned: arai)

Details

Attachments

(3 files)

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.
Severity: normal → minor
OS: Unspecified → Mac OS X
Summary: "Learn More" text on About dialog is misaligned → "Learn More" text on About dialog deprecating OSX 10.7 is misaligned
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)
(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.
okay, will check the rendering result on each OS shortly.
Thank you!
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
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
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+
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
https://hg.mozilla.org/mozilla-central/rev/5b9a61e79b77
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 51
You need to log in before you can comment on or make changes to this bug.