Closed Bug 1802152 Opened 1 year ago Closed 10 months ago

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

Categories

(Toolkit :: Application Update, defect, P5)

Firefox 107
defect

Tracking

()

RESOLVED FIXED
116 Branch
Tracking Status
firefox107 --- wontfix
firefox108 --- wontfix
firefox109 --- wontfix
firefox116 --- fixed

People

(Reporter: usanenko_vadim, Assigned: TheMattHatter01, Mentored)

References

(Blocks 1 open bug)

Details

(Keywords: good-first-bug, Whiteboard: [lang=css][fidedi-ope])

Attachments

(2 files)

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.

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.

Component: Untriaged → Widget: Cocoa
Product: Firefox → Core
Component: Widget: Cocoa → General
Product: Core → Firefox

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!

Status: UNCONFIRMED → NEW
Ever confirmed: true

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(dtownsend)
Severity: -- → S4
Flags: needinfo?(dtownsend)

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

Flags: needinfo?(sfoster)
Flags: needinfo?(sfoster)
Priority: -- → P5
Flags: needinfo?(sfoster)

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.

Mentor: sfoster
Flags: needinfo?(sfoster)
Keywords: good-first-bug
Whiteboard: [lang=css]
Summary: About Firefox window - check mark icon is positioned incorrectly in Firefox 107 on macOS. → About Firefox window - check mark icon is positioned incorrectly in Firefox 107
Duplicate of this bug: 1834645

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

(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.

Flags: needinfo?(buglinking)

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".

Assignee: nobody → matt
Status: NEW → ASSIGNED
Component: General → Application Update
Product: Firefox → Toolkit
Whiteboard: [lang=css] → [lang=css][fidedi-ope]
Pushed by sfoster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1b026697c670
Adjust CSS to position icon in about firefox window. r=sfoster
Status: ASSIGNED → RESOLVED
Closed: 10 months ago
Resolution: --- → FIXED
Target Milestone: --- → 116 Branch
Blocks: 1842006
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: