1619697 - Twisty icon is too big and doesn't follow font-size scaling

Status: RESOLVED DUPLICATE of bug 1705454

(Toolkit :: Themes, defect, P3)

Description

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2020-03-02 10-33-26.png

As pointed out in bug 1560540 comment 63, the updated twisty size doesn't really fix the issue and causes the element to look bloated.

The user asked for the twsity to be bigger for accessibility reasons, but the solution of simply increasing the icon size is not correct.
The icons should scale alongside the font size to guarantee the expected level of accessibility without affecting the balance of the UI.

Comment 1

[Julien Cristau [:jcristau]]

Regressing change backed out of 75.

Comment 2

[Alessandro Castellani [:aleca]]

I'm not sure if this is a silly question, but would that be possible enable SVGs autoscaling?
By its own nature, if we don't specify the width and height attributes and we only use the viewBox attribute, the SVG scales automatically to fill the container, and it keeps its aspect ratio.
I tried to use this method as a test, which it works on a regular HTML file, but it doesn't in TB.

Comment 3

[Tim Nguyen :ntim]

(In reply to Alessandro Castellani (:aleca) from comment #2)

I'm not sure if this is a silly question, but would that be possible enable SVGs autoscaling?
By its own nature, if we don't specify the width and height attributes and we only use the viewBox attribute, the SVG scales automatically to fill the container, and it keeps its aspect ratio.
I tried to use this method as a test, which it works on a regular HTML file, but it doesn't in TB.

Do you have an HTML example ?

While viewBox may work, it's still constrained by the width set in the CSS: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/tree.inc.css#171

Might be possible to use em units in the CSS, though I'm not sure.

(Also, unassigning myself as I have other priorities atm)

Comment 4

[Alessandro Castellani [:aleca]]

Attachment: twisty.svg

SVG icon without width and height attributes.

Comment 5

[Alessandro Castellani [:aleca]]

Attachment: svg-resize.html

A silly HTML file example where I'm using the SVG for the bullet list and it resizes based on custom CSS attributes or by inheriting the font size of the list.

Comment 6

[Wayne Mery (:wsmwk)]

Have enough ideas for a workable patch?

Comment 7

[Alessandro Castellani [:aleca]]

I think there's not an easy CSS fix unless we replace the SVGs with something smaller, but then we end up with the opposite problems were users might find the twisty icons too small and they can't easily scale them up.

I think this is something we have to keep as it is until we find a good replacement for the tree element.

Comment 8

[Alessandro Castellani [:aleca]]

This is not an issue anymore as we're overriding these icons with our own variation.