1696724 - Page action button icons are stretched

Status: RESOLVED DUPLICATE of bug 1696628

(Core :: SVG, defect)

Description

[Shane Hughes [:aminomancer]]

Attachment: ff-stretched-page-action-button.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

Steps to reproduce:

• Go to some URL where a page action button is loaded. For example, this URL causes a reader mode button to be displayed in the urlbar.
• Look at the page action button

Actual results:

• Any page action button that 1) is an image instead of a button-box, and 2) is an SVG without a 16px by 16px viewBox attribute, or is a raster image larger than 16px by 16px, is stretched vertically due to line 3561 of browser.css, padding-inline: var(--urlbar-icon-padding)
• I don't remember what's different but I'm pretty certain this just began within the last couple days.

Expected results:

• All icons should at least appear to be 16px by 16px with 6px padding

Comment 1

[Shane Hughes [:aminomancer]]

In the screenshot, three SVG icons are displayed together. Here's the more button:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path.../> </svg>
And here's the reader button:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"> <path.../> </svg>
As you can see, the issue is the lack of viewBox attribute. But adding that alone isn't a solution, because page action buttons added by extensions often use PNG images, or at the very least may use SVG files without viewBox attributes explicitly set. The markup and CSS for these elements should at the very least be able to handle any square aspect ratio image input by the extension developer.

I only mention the viewBox thing because it's something else I've noticed with the ongoing proton updates. Every time I check, more elements are being converted from toolbarbuttons or toolbaritems into <image> elements, which may not affect how built-in icons are displayed, but does break PNG icons used frequently by extensions. Maybe devs are supposed to input a 64px image, a 32px image, and a 16px image, but in practice that's rarely done. Putting a single size in the manifest always worked, they could always just include a single 128px image and the toolbarbutton CSS would handle scaling it down to a regular widget size. It's unlikely many of those extensions are going to be updated, and it should be really easy to fix this problem with CSS (or HTML, these could still be custom elements) so firefox might as well support square widget icons of any size.

Comment 2

[Shane Hughes [:aminomancer]]

Actually, I just noticed this page itself loads a reader button, so you should be able to see by just looking up

Comment 3

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

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