1807853 - More from Mozilla - Firefox Mobile icon is too high relative to the text

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect)

Description

[Shane Hughes [:aminomancer]]

Just a minor defect... the Firefox Mobile promo is using an icon from devtools that doesn't have a square viewbox. So when drawn as a background image it effectively has "padding" which makes the icon smaller than the other icons on about:preferences (which all have artboxes clamped to the art dimensions).

A CSS workaround was added - 5px of padding on the top of the "Firefox Mobile" row. Since the icon is drawn to the row's background, extra padding means extra space to compose the icon. This keeps the icon from being smaller than the others, but it means the icon is positioned 2.5px too high. It's centered to the box, not the text em height. And since the box has 5px of padding above the em height, the icon ends up filling that space.

This should be an easy fix as this is actually not the right icon anyway. The icon used in the frontend (e.g. on Firefox View) is device-phone.svg. This icon is scaled to the viewbox so it's perfect.

Comment 1

[Shane Hughes [:aminomancer]]

Attachment: Bug 1807853 - Better icon for Firefox Mobile promo. r=mviar

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7a7919026510
Better icon for Firefox Mobile promo. r=mviar,settings-reviewers

Comment 3

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/7a7919026510

Comment 4

[Simona Rosu [:srosu], Ecosystem QA]

I‘ve verified this issue using the latest Firefox Nightly 110.0a1 (Build ID: 20230104163752) on Windows 10 x64, macOS 11.7.1, and Ubuntu 22.04 x64.

• The Firefox Mobile icon is noticeably bigger and wider than before the fix. And its background-image is set to ‘url("chrome://browser/skin/device-phone.svg")’, and the padding-top has been removed.