1802152 - About Firefox window - check mark icon is positioned incorrectly in Firefox 107

Status: RESOLVED FIXED

(Toolkit :: Application Update, defect, P5)

Description

[usanenko_vadim]

Attachment: Screenshot 2022-11-23 at 16.19.20.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:107.0) Gecko/20100101 Firefox/107.0

Steps to reproduce:

Open "About Firefox" window on macOS

Actual results:

Green check mark icon is not aligned properly to text "Checking for updates..." and others.

Expected results:

Green check mark icon was aligned properly to text "Checking for updates..." and others in previous versions.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Cocoa' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Negritas Sergiu, Desktop QA]

Hello! I have managed to reproduce the issue with firefox 107.0.1, 108.0b9 and 109.0a1(2022-12-05) on MacOS 12.4 with the steps provided in the description. I will mark this issue as NEW and update the flags.

Have a nice day!

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:mossop, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Sam Foster [:sfoster] (he/him)]

I think this can be a mentored bug to fix the alignment here, but I'll look into it and provide details.

Comment 5

[Sam Foster [:sfoster] (he/him)]

It looks like we can use a CSS grid to get the icon and the #updateDeck into the same grid row, which would let us ensure the icon is vertically centered whatever height the button/content on the right-hand side is. Something like this: https://jsfiddle.net/sfoster/qx6fhpr5/

The files involved here are:

• browser/base/content/aboutDialog.xhtml - you can access this dialog from the Help menu > "About Nightly".
• browser/base/content/aboutDialog.css

If you open the browser toolbox, clicking the frame/document picker should have a menu option for aboutDialog.xhtml. That lets you use the inspector etc. as normal on the document in this dialog.

These are XUL elements not html, but in practice normal CSS will work here. We want the #icons in the left column to be always vertically aligned with whatever is in the first "row" of the right column. Depending on the update state, we can have different content in here. Once you have chosen aboutDialog.xhtml frame/document, the global/window in the console contains a gAppUpdater variable. That is defined in aboutDialog-appUpdater.js, so you can try out different options here by manually calling, e.g. gAppUpdater..selectPanel("downloading") from the console, to test your solution.

You will need mozilla-central checked out, and the ability to build locally. Instructions for that process are here. An "artifact" build will be fine for this patch - its all front-end code, no c++/rust compilation necessary.

Once you have a solution, follow our process to submit a patch to phabricator, flagging me for review by adding r?sfoster to the first line of your commit message.

Comment 7

[buglinking]

Hello, as a beginner, I would like to fix this bug as my first contribution. Could I be assigned to work on this bug?

Comment 8

[Sam Foster [:sfoster] (he/him)]

(In reply to buglinking from comment #7)

Hello, as a beginner, I would like to fix this bug as my first contribution. Could I be assigned to work on this bug?

hi buglinking, thanks for taking a look at this and apologies I didn't see your note until now. If you use the "request information from mentor" checkbox/menu I'll get notified in future. For now, its enough to indicate your interest. When you have a patch ready for feedback or review, use moz-phab to submit it and provided the bug number is in the commit message (e.g. "Bug 1802152 - Adjust CSS to position icon in about firefox window") it will get attached here and you will be assigned.

Comment 9

[Matt Moldenhauer [:TheMattHatter01] (He/Him)]

Attachment: Bug 1802152 - Adjust CSS to position icon in about firefox window. r?sfoster

change #updateBox to display a grid. Add id of "updateInfo" to vbox tag containing "updateDeck", "baseline", and "text-blurb". Set "updateInfo" to display a grid and set grid-template-rows to "subgrid".

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1b026697c670
Adjust CSS to position icon in about firefox window. r=sfoster

Comment 11

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/1b026697c670